/* =========================================================
   PROGRESS PUBLISHERS
   PREMIUM EDUCATIONAL HOMEPAGE
   Bootstrap 4.6 Compatible
========================================================= */

/* =========================================================
           ROOT
        ========================================================= */

        :root {
            --primary: #342283;
            --primary-dark: #25175f;
            --primary-light: #5a42b8;

            --secondary: #f59e0b;
            --accent: #f97316;

            --dark: #171525;
            --text: #454153;
            --muted: #77738a;

            --light: #f7f7fb;
            --border: #e9e7f0;
            --white: #ffffff;

            --shadow-sm:
                0 4px 16px rgba(28, 20, 65, .06);

            --shadow:
                0 10px 35px rgba(28, 20, 65, .10);

            --shadow-lg:
                0 18px 50px rgba(28, 20, 65, .15);

            --radius: 12px;
            --radius-lg: 18px;

            --transition:
                all .25s ease;
        }


        /* =========================================================
           GLOBAL
        ========================================================= */

        html {
            scroll-behavior: smooth;
        }


        /* =========================================================
           SCROLLBAR (extra thin, brand-tinted)
        ========================================================= */

        html {
            scrollbar-width: thin;
            scrollbar-color: var(--primary-light) transparent;
        }

        ::-webkit-scrollbar {
            width: 3px;
            height: 3px;
        }

        ::-webkit-scrollbar-button {
            display: none;
            width: 0;
            height: 0;
        }

        html::-webkit-scrollbar-button,
        body::-webkit-scrollbar-button {
            display: none;
            width: 0;
            height: 0;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary-light);
            border-radius: 999px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary);
        }


        /* =========================================================
           FLOATING QUICK-ACCESS BUTTONS
        ========================================================= */

        .floating-actions {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 1050;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }

        .floating-actions__btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            color: #fff;
            font-size: 24px;
            line-height: 1;
            box-shadow: var(--shadow-lg);
            transition: var(--transition);
            text-decoration: none;
        }

        .floating-actions__btn:hover {
            transform: translateY(-4px) scale(1.06);
            color: #fff;
        }

        .floating-actions__btn--whatsapp {
            background: #25d366;
        }

        .floating-actions__btn--mail {
            background: var(--primary);
        }

        .floating-actions__btn--site {
            background: #fff;
            padding: 6px;
            border: 2px solid var(--border);
        }

        .floating-actions__btn--site img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 50%;
        }

        @media (max-width: 575.98px) {

            .floating-actions {
                right: 14px;
                bottom: 14px;
                gap: 10px;
            }

            .floating-actions__btn {
                width: 48px;
                height: 48px;
                font-size: 20px;
            }

        }


        /* =========================================================
           FAQ CHATBOT WIDGET
        ========================================================= */

        .chatbot-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            border: none;
            color: #fff;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            font-size: 24px;
            line-height: 1;
            box-shadow: var(--shadow-lg);
            transition: var(--transition);
            cursor: pointer;
            position: relative;
        }

        .chatbot-toggle:hover {
            transform: translateY(-4px) scale(1.06);
        }

        .chatbot-toggle::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 50%;
            box-shadow: 0 0 0 0 rgba(52, 34, 131, 0.55);
            animation: chatbotPulse 2.4s infinite;
            pointer-events: none;
        }

        @keyframes chatbotPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(52, 34, 131, 0.45);
            }
            70% {
                box-shadow: 0 0 0 14px rgba(52, 34, 131, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(52, 34, 131, 0);
            }
        }

        .chatbot-panel {
            position: fixed;
            right: 20px;
            bottom: 96px;
            z-index: 1060;
            width: 350px;
            max-width: calc(100vw - 28px);
            height: 480px;
            max-height: calc(100vh - 140px);
            background: var(--white, #fff);
            border-radius: var(--radius-lg, 16px);
            box-shadow: var(--shadow-lg);
            display: none;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid var(--border);
        }

        .chatbot-panel.is-open {
            display: flex;
            animation: chatbotFadeIn 0.22s ease;
        }

        @keyframes chatbotFadeIn {
            from {
                opacity: 0;
                transform: translateY(12px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .chatbot-panel__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 14px 16px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: #fff;
            flex-shrink: 0;
        }

        .chatbot-panel__title {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .chatbot-panel__avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }

        .chatbot-panel__name {
            font-weight: 600;
            font-size: 14.5px;
            line-height: 1.2;
        }

        .chatbot-panel__status {
            font-size: 12px;
            opacity: 0.9;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .chatbot-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #4ade80;
            display: inline-block;
        }

        .chatbot-panel__close {
            background: transparent;
            border: none;
            color: #fff;
            font-size: 16px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }

        .chatbot-panel__close:hover {
            background: rgba(255, 255, 255, 0.18);
        }

        .chatbot-panel__body {
            flex: 1;
            overflow-y: auto;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: var(--light, #f6f6fa);
        }

        .chatbot-msg {
            max-width: 86%;
            padding: 9px 13px;
            border-radius: 14px;
            font-size: 13.5px;
            line-height: 1.5;
            word-wrap: break-word;
        }

        .chatbot-msg--bot {
            align-self: flex-start;
            background: #fff;
            color: var(--text);
            border: 1px solid var(--border);
            border-bottom-left-radius: 4px;
        }

        .chatbot-msg--user {
            align-self: flex-end;
            background: var(--primary);
            color: #fff;
            border-bottom-right-radius: 4px;
        }

        .chatbot-msg a {
            color: var(--primary);
            font-weight: 600;
        }

        .chatbot-msg--user a {
            color: #fff;
            text-decoration: underline;
        }

        .chatbot-quick-replies {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-self: stretch;
        }

        .chatbot-quick-reply {
            border: 1.5px solid var(--primary);
            background: #fff;
            color: var(--primary);
            font-size: 12.5px;
            font-weight: 600;
            padding: 7px 12px;
            border-radius: 999px;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .chatbot-quick-reply:hover {
            background: var(--primary);
            color: #fff;
        }

        .chatbot-quick-reply--link {
            border-color: var(--secondary, #f59e0b);
            color: var(--secondary, #f59e0b);
        }

        .chatbot-quick-reply--link:hover {
            background: var(--secondary, #f59e0b);
            color: #fff;
        }

        .chatbot-panel__footer {
            flex-shrink: 0;
            padding: 10px 14px;
            border-top: 1px solid var(--border);
            text-align: center;
            background: #fff;
        }

        .chatbot-whatsapp-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: #25d366;
            font-weight: 600;
            font-size: 13px;
            text-decoration: none;
        }

        .chatbot-whatsapp-link:hover {
            text-decoration: underline;
        }

        @media (max-width: 575.98px) {

            .chatbot-panel {
                right: 14px;
                bottom: 82px;
                width: calc(100vw - 28px);
                height: calc(100vh - 170px);
            }

            .chatbot-toggle {
                width: 48px;
                height: 48px;
                font-size: 20px;
            }

        }

        body {
            margin: 0;
            background: #fff;
            color: var(--text);
            font-family:
                Inter,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Arial,
                sans-serif;

            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        a {
            text-decoration: none;
            transition: var(--transition);
        }

        button,
        input {
            font-family: inherit;
        }

        img {
            max-width: 100%;
        }


        /* =========================================================
           TOP HEADER
        ========================================================= */

        .top-header {
            background:
                linear-gradient(
                    135deg,
                    var(--primary-dark),
                    var(--primary)
                );

            min-height: 42px;

            border-bottom:
                1px solid rgba(255,255,255,.12);
        }

        .top-header .container {
            min-height: 42px;
        }

        .top-header .navbar-nav {
            display: flex;
            align-items: center;
            justify-content: flex-end;

            width: 100%;

            gap: 4px;
        }

        .top-header .nav-link {
            color: rgba(255,255,255,.88) !important;

            font-size: 12px;
            font-weight: 500;

            padding: 7px 12px !important;

            border-radius: 6px;

            white-space: nowrap;
        }

        .top-header .nav-link:hover {
            color: #fff !important;

            background:
                rgba(255,255,255,.12);

            transform: translateY(-1px);
        }


        /* =========================================================
           MAIN NAVIGATION
        ========================================================= */

        .main-nav {
            position: relative;
            z-index: 1000;

            background: #fff;

            min-height: 88px;

            border-bottom:
                1px solid var(--border);

            box-shadow:
                0 3px 18px rgba(28,20,65,.04);
        }

        .main-nav .container {
            min-height: 88px;

            display: flex;
            align-items: center;
        }


        /* =========================================================
           LOGO
        ========================================================= */

        .main-nav .navbar-brand {
            display: flex;
            align-items: center;

            padding: 0;

            margin-right: 28px;

            flex-shrink: 0;
        }

        .main-nav .navbar-brand img {
            display: block;

            width: auto;
            max-width: 210px;
            height: 66px;

            object-fit: contain;

            transition: var(--transition);
        }

        .main-nav .navbar-brand:hover img {
            transform: scale(1.02);
        }


        /* =========================================================
           SEARCH
        ========================================================= */

        .main-nav form {
            flex: 1;

            max-width: 480px;

            margin-right: 28px;
        }

        .main-search {
            position: relative;

            width: 100%;
        }

        .main-search input {
            width: 100%;

            height: 44px;

            padding:
                0 52px 0 18px;

            border:
                1px solid #ddd9e8;

            border-radius: 9px;

            background: #faf9fc;

            color: var(--dark);

            font-size: 14px;

            outline: none;

            transition: var(--transition);

            box-sizing: border-box;
        }

        .main-search input::placeholder {
            color: #9691a5;
        }

        .main-search input:focus {
            background: #fff;

            border-color:
                var(--primary-light);

            box-shadow:
                0 0 0 4px
                rgba(52,34,131,.08);
        }

        .main-search button {
            position: absolute;

            top: 4px;
            right: 4px;

            width: 36px;
            height: 36px;

            display: flex;
            align-items: center;
            justify-content: center;

            border: 0;

            border-radius: 7px;

            color: #fff;

            background:
                linear-gradient(
                    135deg,
                    var(--primary),
                    var(--primary-light)
                );

            cursor: pointer;

            transition: var(--transition);
        }

        .main-search button:hover {
            transform: translateY(-1px);

            box-shadow:
                0 5px 14px
                rgba(52,34,131,.25);
        }

        .main-search button i {
            font-size: 13px;
        }


        /* =========================================================
           MAIN MENU
        ========================================================= */

        .main-nav #navbar2 {
            flex: 0 0 auto;
        }

        .main-nav #navbar2 .navbar-nav {
            display: flex;
            align-items: center;

            gap: 3px;
        }

        .main-nav #navbar2 .nav-link {
            position: relative;

            display: flex;
            align-items: center;
            justify-content: center;

            gap: 6px;

            color: #403b50 !important;

            font-size: 14px;
            font-weight: 600;

            padding:
                10px 12px !important;

            border-radius: 8px;

            white-space: nowrap;
        }

        .main-nav #navbar2 .nav-link:hover {
            color: var(--primary) !important;

            background:
                rgba(52,34,131,.06);
        }

        .main-nav #navbar2 .nav-link.active {
            color: var(--primary) !important;

            background:
                rgba(52,34,131,.08);
        }

        .main-nav #navbar2 .nav-link.active::after {
            content: "";

            position: absolute;

            left: 50%;
            bottom: -1px;

            width: 22px;
            height: 3px;

            transform:
                translateX(-50%);

            border-radius: 10px;

            background:
                var(--primary);
        }

        .main-nav #navbar2 .nav-link i {
            font-size: 14px;
        }


        /* =========================================================
           MOBILE TOGGLE
        ========================================================= */

        .navbar-toggler {
            border: 1px solid var(--border);

            border-radius: 8px;

            padding: 7px 9px;

            box-shadow: none !important;
        }

        .navbar-toggler:focus {
            border-color: var(--primary);

            box-shadow:
                0 0 0 3px
                rgba(52,34,131,.08) !important;
        }


        /* =========================================================
           PAGE BANNER
        ========================================================= */

        .pageBanner {
            height: 129px;

            display: flex;
            align-items: center;

            background:
                linear-gradient(
                    135deg,
                    var(--primary-dark),
                    var(--primary),
                    #5845b5
                );

            color: #fff;
        }


        /* =========================================================
           CONTENT HELPERS
        ========================================================= */

        .categorySlider h2 {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .subjectWiseImage {
            border-radius: 12px;

            text-align: center;

            overflow: hidden;

            background: #fff;

            border:
                1px solid var(--border);

            box-shadow:
                var(--shadow-sm);

            transition: var(--transition);
        }

        .subjectWiseImage:hover {
            transform:
                translateY(-5px);

            box-shadow:
                var(--shadow);
        }

        .classBoard {
            border-radius: 12px;

            text-align: center;

            overflow: hidden;

            background: #fff;

            border:
                1px solid var(--border);

            box-shadow:
                var(--shadow-sm);

            transition: var(--transition);
        }

        .classBoard:hover {
            transform:
                translateY(-5px);

            box-shadow:
                var(--shadow);
        }

        .categorySlider .classBoard h2 {
            padding-top: 10px;
            padding-bottom: 10px;
        }


        /* =========================================================
           SEARCH RESULTS / BOOK GRID
        ========================================================= */

        .searchPage .bookGrid {
            background: #fff;

            border:
                1px solid var(--border);

            border-radius: 14px;

            overflow: hidden;

            text-align: center;

            margin-bottom: 24px;

            box-shadow:
                var(--shadow-sm);

            transition: var(--transition);
        }

        .searchPage .bookGrid:hover {
            transform:
                translateY(-4px);

            box-shadow:
                var(--shadow);
        }

        .searchPage .bookGrid .bookImgBox {
            padding: 20px;
        }

        .bookDesc button {
            width: 100%;
        }


        /* =========================================================
           GENERAL BUTTONS
        ========================================================= */

        .btn-primary {
            background:
                linear-gradient(
                    135deg,
                    var(--primary),
                    var(--primary-light)
                );

            border-color:
                var(--primary);

            border-radius: 8px;

            box-shadow:
                0 5px 15px
                rgba(52,34,131,.15);
        }

        .btn-primary:hover {
            background:
                linear-gradient(
                    135deg,
                    var(--primary-dark),
                    var(--primary)
                );

            border-color:
                var(--primary-dark);

            transform:
                translateY(-1px);
        }


        /* =========================================================
           FOOTER
        ========================================================= */

        .footer {
            position: relative;

            margin-top: 60px;

            padding:
                50px 0 24px;

            color: #d8d4e5;

            background:
                linear-gradient(
                    145deg,
                    #17132d,
                    #241b48
                );

            overflow: hidden;
        }

        .footer::before {
            content: "";

            position: absolute;

            top: 0;
            left: 0;
            right: 0;

            height: 4px;

            background:
                linear-gradient(
                    90deg,
                    var(--primary),
                    #8a73dc,
                    var(--secondary)
                );
        }

        .footer .container {
            position: relative;
            z-index: 1;
        }

        .footerLogo {
            display: block;

            width: auto;

            max-width: 190px;
            height: 60px;

            object-fit: contain;

            margin-bottom: 28px;
        }

        .footerLinks {
            display: flex;

            align-items: center;
            justify-content: center;

            flex-wrap: wrap;

            gap: 6px 8px;

            padding: 0;
            margin: 0;

            list-style: none;

            width: 100%;
        }

        .footerLinks li {
            position: relative;
        }

        .footerLinks li:not(:last-child)::after {
            content: "•";

            color:
                rgba(255,255,255,.25);

            margin-left: 9px;
        }

        .footerLinks a {
            color: #d9d5e6;

            font-size: 13px;
            font-weight: 500;
        }

        .footerLinks a:hover {
            color: #fff;
        }

        .copyright {
            width: 100%;

            text-align: center;

            margin-top: 25px;

            padding-top: 22px;

            border-top:
                1px solid
                rgba(255,255,255,.10);
        }

        .copyright p {
            margin: 0;

            color:
                rgba(255,255,255,.55);

            font-size: 12px;

            line-height: 1.7;
        }

        .copyright svg {
            width: 11px;
            height: 11px;

            vertical-align:
                -1px;
        }

        .copyright sup svg {
            width: 8px;
            height: 8px;
        }


        /* =========================================================
           RESPONSIVE
        ========================================================= */

        @media (max-width: 1199px) {

            .main-nav .navbar-brand {
                margin-right: 18px;
            }

            .main-nav .navbar-brand img {
                max-width: 175px;
            }

            .main-nav form {
                margin-right: 15px;
            }

            .main-nav #navbar2 .nav-link {
                padding-left: 9px !important;
                padding-right: 9px !important;

                font-size: 13px;
            }
        }


        @media (max-width: 991px) {

            .top-header {
                min-height: auto;
            }

            .top-header .navbar-toggler {
                margin: 7px 0;
            }

            .top-header .navbar-collapse {
                padding-bottom: 8px;
            }

            .top-header .navbar-nav {
                align-items: stretch;

                gap: 2px;
            }

            .top-header .nav-link {
                padding:
                    8px 10px !important;
            }


            .main-nav {
                padding:
                    10px 0;
            }

            .main-nav .container {
                min-height: auto;

                flex-wrap: wrap;
            }

            .main-nav .navbar-brand {
                margin-right: auto;
            }

            .main-nav .navbar-brand img {
                height: 58px;
                max-width: 170px;
            }

            .main-nav > form {
                order: 3;

                flex-basis: 100%;

                max-width: none;

                margin:
                    12px 0 2px;
            }

            .main-nav #navbar2 {
                flex-basis: 100%;

                margin-top: 8px;
            }

            .main-nav #navbar2 .navbar-nav {
                align-items: stretch;
            }

            .main-nav #navbar2 .nav-link {
                justify-content: flex-start;

                padding:
                    11px 14px !important;
            }

            .main-nav #navbar2 .nav-link.active::after {
                left: 0;
                bottom: 50%;

                width: 3px;
                height: 22px;

                transform:
                    translateY(50%);
            }
        }


        @media (max-width: 767px) {

            .top-header .navbar-nav {
                display: grid;

                grid-template-columns:
                    repeat(2, 1fr);
            }

            .top-header .nav-link {
                text-align: center;
            }

            .main-nav .navbar-brand img {
                height: 52px;
                max-width: 155px;
            }

            .main-search input {
                height: 46px;
            }

            .main-search button {
                width: 38px;
                height: 38px;
            }

            .footer {
                margin-top: 40px;

                padding:
                    40px 0 20px;
            }

            .footerLogo {
                max-width: 160px;
                height: 52px;
            }

            .footerLinks {
                flex-direction: column;

                gap: 10px;
            }

            .footerLinks li:not(:last-child)::after {
                display: none;
            }
        }


        @media (max-width: 480px) {

            .top-header .navbar-nav {
                grid-template-columns:
                    1fr;
            }

            .main-nav .navbar-brand img {
                max-width: 140px;
            }

            .main-search input {
                font-size: 13px;
            }

            .footerLinks a {
                font-size: 12px;
            }
        }


        /* =========================================================
           ACCESSIBILITY
        ========================================================= */

        a:focus-visible,
        button:focus-visible,
        input:focus-visible {
            outline:
                3px solid
                rgba(52,34,131,.25);

            outline-offset: 2px;
        }


        /* =========================================================
           UTILITY
        ========================================================= */

        .svg-1em {
            height: 1em !important;
        }

        .svg-2em {
            height: 2em !important;
        }

        .input-group-text {
            font-size: .75rem;
        }

:root {
    --pp-primary: #1f5fbf;
    --pp-primary-dark: #174a96;
    --pp-primary-soft: #edf4ff;

    --pp-heading: #172033;
    --pp-text: #475569;
    --pp-muted: #718096;

    --pp-border: #e6ebf2;
    --pp-bg: #f7f9fc;
    --pp-white: #ffffff;

    --pp-orange: #f59e0b;
    --pp-pink: #e85d8e;
    --pp-green: #138a72;

    --pp-radius: 12px;
    --pp-shadow: 0 4px 18px rgba(15, 23, 42, .06);
    --pp-shadow-hover: 0 12px 30px rgba(15, 23, 42, .11);
}


/* =========================================================
   GLOBAL
========================================================= */

.pp-home {
    background: var(--pp-white);
    color: var(--pp-text);
}

.pp-section {
    padding: 78px 0;
}

.pp-section-soft {
    background: var(--pp-bg);
}


/* =========================================================
   HERO
========================================================= */

.pp-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(100deg, #f4f8ff 0%, #ffffff 58%, #f7fbff 100%);
    border-bottom: 1px solid var(--pp-border);
}

.pp-hero::before {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    right: -160px;
    top: -190px;
    border: 1px solid rgba(31, 95, 191, .08);
    border-radius: 50%;
}

.pp-hero::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    left: -150px;
    bottom: -170px;
    border: 1px solid rgba(31, 95, 191, .06);
    border-radius: 50%;
}

.pp-hero .container {
    position: relative;
    z-index: 2;
}

.pp-hero-content {
    min-height: 470px;
    display: flex;
    align-items: center;
    padding: 48px 0;
}

.pp-hero-copy {
    width: 43%;
    padding-right: 30px;
}

.pp-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    color: var(--pp-primary);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.pp-hero-kicker::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--pp-primary);
    border-radius: 2px;
}

.pp-hero-title {
    margin: 0;
    color: var(--pp-heading);
    font-size: 46px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1.2px;
}

.pp-hero-title span {
    color: var(--pp-primary);
}

.pp-hero-description {
    max-width: 410px;
    margin: 20px 0 0;
    color: var(--pp-text);
    font-size: 15px;
    line-height: 1.75;
}

.pp-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
}

.pp-hero-meta-item {
    padding: 8px 12px;
    color: var(--pp-text);
    background: rgba(255,255,255,.8);
    border: 1px solid var(--pp-border);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.pp-hero-image {
    width: 57%;
    height: 410px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.pp-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.pp-section-header {
    margin-bottom: 30px;
}

.pp-section-header.center {
    text-align: center;
}

.pp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--pp-primary);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.pp-eyebrow::before,
.pp-eyebrow::after {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--pp-primary);
    border-radius: 2px;
}

.pp-section-title {
    margin: 0;
    color: var(--pp-heading);
    font-size: 30px;
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: -.4px;
}

.pp-section-subtitle {
    max-width: 600px;
    margin: 8px auto 0;
    color: var(--pp-muted);
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   CATALOGUE SECTIONS
========================================================= */

.pp-catalogue-section {
    background: var(--pp-white);
}

.pp-carousel-wrap {
    position: relative;
    padding: 0 44px;
}

.pp-carousel {
    margin: 0 -8px;
}

.pp-carousel .owl-stage {
    display: flex;
}

.pp-carousel .owl-item {
    display: flex;
    padding: 8px;
}

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


/* =========================================================
   SUBJECT CARDS
========================================================= */

.pp-subject-card {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--pp-white);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-shadow);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.pp-subject-card:hover {
    transform: translateY(-5px);
    border-color: #d6e2f5;
    box-shadow: var(--pp-shadow-hover);
}

.pp-subject-image {
    position: relative;
    height: 245px;
    padding: 18px;
    overflow: hidden;
    background: #f5f7fb;
}

.pp-subject-image::after {
    content: "";
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: -12px;
    height: 20px;
    background: rgba(15, 23, 42, .10);
    filter: blur(13px);
    border-radius: 50%;
}

.pp-subject-image img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .3s ease;
}

.pp-subject-card:hover .pp-subject-image img {
    transform: scale(1.035);
}

.pp-subject-content {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--pp-border);
}

.pp-subject-name {
    margin: 0;
    color: var(--pp-heading);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
}

.pp-card-arrow {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pp-primary);
    background: var(--pp-primary-soft);
    border-radius: 50%;
    transition: background .2s ease, color .2s ease;
}

.pp-subject-card:hover .pp-card-arrow {
    color: #fff;
    background: var(--pp-primary);
}

.pp-card-arrow svg {
    width: 8px;
    height: 12px;
}


/* =========================================================
   CLASS CARDS
========================================================= */

.pp-class-card {
    position: relative;
    width: 100%;
    min-height: 175px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 20px;
    background: linear-gradient(145deg, #f8fbff, #eef4fc);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-shadow);
    text-decoration: none !important;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.pp-class-card::before {
    content: "";
    position: absolute;
    width: 115px;
    height: 115px;
    top: -45px;
    right: -30px;
    border: 18px solid rgba(31, 95, 191, .06);
    border-radius: 50%;
}

.pp-class-card::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    right: 35px;
    top: 35px;
    background: rgba(255,255,255,.5);
    border-radius: 50%;
}

.pp-class-card:hover {
    transform: translateY(-5px);
    border-color: #d2dff2;
    box-shadow: var(--pp-shadow-hover);
}

.pp-class-content {
    position: relative;
    z-index: 3;
}

.pp-class-label {
    display: block;
    margin-bottom: 7px;
    color: var(--pp-primary);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pp-class-name {
    margin: 0;
    color: var(--pp-heading);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
}

.pp-class-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    color: var(--pp-text);
    font-size: 10px;
    font-weight: 700;
}

.pp-class-link svg {
    width: 7px;
    height: 11px;
}


/* =========================================================
   CAROUSEL CONTROLS
========================================================= */

.pp-carousel-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    transform: translateY(-50%);
}

.pp-carousel-controls button {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pp-heading);
    background: #fff;
    border: 1px solid var(--pp-border);
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(15,23,42,.08);
    pointer-events: auto;
    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.pp-carousel-controls button:hover {
    color: #fff;
    background: var(--pp-primary);
    border-color: var(--pp-primary);
    transform: scale(1.06);
}

.pp-carousel-controls svg {
    width: 7px;
    height: 14px;
}


/* =========================================================
   ABOUT SECTION
========================================================= */

.pp-about {
    background: var(--pp-bg);
}

.pp-about-grid {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--pp-border);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--pp-shadow);
}

.pp-about-content {
    width: 52%;
    padding: 42px 45px;
}

.pp-about-title {
    margin: 0 0 18px;
    color: var(--pp-heading);
    font-size: 29px;
    font-weight: 800;
    letter-spacing: -.4px;
}

.pp-about-content p {
    margin: 0 0 14px;
    color: var(--pp-text);
    font-size: 13px;
    line-height: 1.85;
}

.pp-about-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    color: var(--pp-primary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
}

.pp-about-link svg {
    width: 10px;
    height: 12px;
}

.pp-about-stats {
    width: 48%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: #f9fbfe;
    border-left: 1px solid var(--pp-border);
}

.pp-stat {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px;
    text-align: center;
}

.pp-stat + .pp-stat {
    border-left: 1px solid var(--pp-border);
}

.pp-stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 10px;
}

.pp-stat-icon.orange {
    color: var(--pp-orange);
    background: #fff7e7;
}

.pp-stat-icon.pink {
    color: var(--pp-pink);
    background: #fff0f5;
}

.pp-stat-icon svg {
    width: 23px;
    height: 23px;
}

.pp-stat-number {
    margin: 0;
    color: var(--pp-heading);
    font-size: 27px;
    line-height: 1;
    font-weight: 800;
}

.pp-stat-label {
    margin: 7px 0 0;
    color: var(--pp-muted);
    font-size: 10px;
    line-height: 1.4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}


/* =========================================================
   FEATURED PRODUCTS
========================================================= */

.pp-featured {
    background: #fff;
}

.pp-featured-grid {
    margin-left: -8px;
    margin-right: -8px;
}

.pp-featured-col {
    padding: 8px;
}

.pp-featured-card {
    height: 100%;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-shadow);
    text-decoration: none !important;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.pp-featured-card:hover {
    transform: translateY(-4px);
    border-color: #d7e2f1;
    box-shadow: var(--pp-shadow-hover);
}

.pp-featured-image {
    width: 42%;
    min-height: 235px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f8fb;
    border-right: 1px solid var(--pp-border);
}

.pp-featured-image img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    transition: transform .3s ease;
}

.pp-featured-card:hover .pp-featured-image img {
    transform: scale(1.04);
}

.pp-featured-content {
    width: 58%;
    padding: 25px 23px;
}

.pp-featured-class {
    display: inline-block;
    margin-bottom: 8px;
    padding: 5px 8px;
    color: var(--pp-primary);
    background: var(--pp-primary-soft);
    border-radius: 5px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.pp-featured-title {
    margin: 0;
    color: var(--pp-heading);
    font-size: 18px;
    line-height: 1.35;
    font-weight: 750;
}

.pp-featured-description {
    margin: 10px 0 15px;
    color: var(--pp-muted);
    font-size: 11px;
    line-height: 1.7;
}

.pp-featured-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pp-primary);
    font-size: 11px;
    font-weight: 700;
}

.pp-featured-link svg {
    width: 9px;
    height: 11px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199.98px) {

    .pp-hero-title {
        font-size: 40px;
    }

    .pp-subject-image {
        height: 220px;
    }

    .pp-about-content {
        padding: 35px;
    }

}

@media (max-width: 991.98px) {

    .pp-section {
        padding: 60px 0;
    }

    .pp-hero-content {
        min-height: 400px;
    }

    .pp-hero-copy {
        width: 46%;
    }

    .pp-hero-image {
        width: 54%;
        height: 340px;
    }

    .pp-hero-title {
        font-size: 34px;
    }

    .pp-hero-description {
        font-size: 13px;
    }

    .pp-section-title {
        font-size: 26px;
    }

    .pp-subject-image {
        height: 205px;
    }

    .pp-about-grid {
        display: block;
    }

    .pp-about-content,
    .pp-about-stats {
        width: 100%;
    }

    .pp-about-stats {
        border-left: 0;
        border-top: 1px solid var(--pp-border);
    }

    .pp-stat {
        min-height: 155px;
    }

}

@media (max-width: 767.98px) {

    .pp-section {
        padding: 48px 0;
    }

    .pp-hero-content {
        min-height: auto;
        display: block;
        padding: 35px 0 30px;
    }

    .pp-hero-copy {
        width: 100%;
        padding: 0;
    }

    .pp-hero-title {
        font-size: 34px;
        letter-spacing: -.7px;
    }

    .pp-hero-description {
        max-width: none;
        font-size: 12px;
    }

    .pp-hero-meta {
        margin-top: 18px;
    }

    .pp-hero-image {
        width: 100%;
        height: 260px;
        margin-top: 20px;
        justify-content: center;
    }

    .pp-hero-image img {
        object-position: center;
    }

    .pp-section-header {
        margin-bottom: 22px;
    }

    .pp-section-title {
        font-size: 24px;
    }

    .pp-section-subtitle {
        font-size: 11px;
    }

    .pp-carousel-wrap {
        padding: 0 31px;
    }

    .pp-subject-image {
        height: 190px;
    }

    .pp-subject-content {
        min-height: 62px;
        padding: 12px;
    }

    .pp-subject-name {
        font-size: 12px;
    }

    .pp-class-card {
        min-height: 145px;
        padding: 17px;
    }

    .pp-class-name {
        font-size: 19px;
    }

    .pp-carousel-controls button {
        width: 30px;
        height: 30px;
    }

    .pp-about-content {
        padding: 28px 22px;
    }

    .pp-about-title {
        font-size: 25px;
    }

    .pp-about-content p {
        font-size: 12px;
        line-height: 1.75;
    }

    .pp-stat {
        min-height: 135px;
        padding: 18px 10px;
    }

    .pp-stat-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 10px;
    }

    .pp-stat-number {
        font-size: 23px;
    }

    .pp-featured-card {
        display: flex;
    }

    .pp-featured-image {
        width: 40%;
        min-height: 205px;
        padding: 13px;
    }

    .pp-featured-image img {
        height: 175px;
    }

    .pp-featured-content {
        width: 60%;
        padding: 20px 16px;
    }

    .pp-featured-title {
        font-size: 15px;
    }

}

@media (max-width: 479.98px) {

    .pp-hero-title {
        font-size: 30px;
    }

    .pp-hero-image {
        height: 220px;
    }

    .pp-carousel-wrap {
        padding: 0 27px;
    }

    .pp-subject-image {
        height: 165px;
        padding: 12px;
    }

    .pp-subject-content {
        min-height: 57px;
    }

    .pp-subject-name {
        font-size: 11px;
    }

    .pp-card-arrow {
        width: 25px;
        height: 25px;
    }

    .pp-class-card {
        min-height: 130px;
    }

    .pp-class-name {
        font-size: 17px;
    }

    .pp-about-stats {
        grid-template-columns: 1fr;
    }

    .pp-stat + .pp-stat {
        border-left: 0;
        border-top: 1px solid var(--pp-border);
    }

    .pp-featured-card {
        min-height: 185px;
    }

    .pp-featured-image {
        width: 38%;
        min-height: 185px;
    }

    .pp-featured-image img {
        height: 155px;
    }

    .pp-featured-content {
        width: 62%;
        padding: 16px 13px;
    }

    .pp-featured-title {
        font-size: 14px;
    }

    .pp-featured-description {
        font-size: 10px;
        line-height: 1.55;
    }

}


 /* =========================================================
       ABOUT PAGE
    ========================================================= */
    .about-page {
        background: #fff;
        color: #253047;
    }

    /* ===================== HERO ===================== */
    .about-hero {
        position: relative;
        min-height: 330px;
        display: flex;
        align-items: center;
        overflow: hidden;
        background:
            linear-gradient(135deg, rgba(14, 55, 103, .96), rgba(22, 108, 153, .88)),
            url("<?= base_url('uploads/about.png'); ?>") center/cover no-repeat;
    }

    .about-hero::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 50%;
        right: -130px;
        top: -180px;
    }

    .about-hero::after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 50%;
        left: -120px;
        bottom: -180px;
    }

    .about-hero-content {
        position: relative;
        z-index: 2;
        padding: 70px 0 85px;
    }

    .about-hero-kicker {
        display: inline-flex;
        align-items: center;
        padding: 7px 14px;
        margin-bottom: 15px;
        border: 1px solid rgba(255,255,255,.25);
        border-radius: 30px;
        color: #fff;
        background: rgba(255,255,255,.08);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1.8px;
        text-transform: uppercase;
    }

    .about-hero h1 {
        margin: 0;
        color: #fff;
        font-size: 48px;
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: -.8px;
    }

    .about-hero p {
        max-width: 620px;
        margin: 15px 0 0;
        color: rgba(255,255,255,.84);
        font-size: 16px;
        line-height: 1.8;
    }

    /* ===================== BREADCRUMB ===================== */
    .about-breadcrumb {
        position: relative;
        z-index: 5;
        margin-top: -45px;
    }

    .about-breadcrumb-inner {
        padding: 17px 22px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 12px 35px rgba(25, 55, 90, .10);
    }

    .about-breadcrumb .breadcrumb {
        margin: 0;
        padding: 0;
        background: transparent;
        font-size: 13px;
    }

    .about-breadcrumb .breadcrumb-item a {
        color: #66758a;
        text-decoration: none;
        transition: all .2s ease;
    }

    .about-breadcrumb .breadcrumb-item a:hover {
        color: #146c9f;
    }

    .about-breadcrumb .breadcrumb-item.active {
        color: #146c9f;
        font-weight: 600;
    }

    /* ===================== INTRO ===================== */
    .about-intro {
        padding: 90px 0 70px;
    }

    .about-content {
        padding-right: 35px;
    }

    .section-eyebrow {
        display: inline-block;
        margin-bottom: 12px;
        color: #e18a2c;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .about-content h2 {
        margin: 0 0 22px;
        color: #173b63;
        font-size: 38px;
        line-height: 1.2;
        font-weight: 800;
        letter-spacing: -.6px;
    }

    .about-content h2 span {
        color: #e18a2c;
    }

    .about-content .lead-copy {
        color: #536278;
        font-size: 17px;
        line-height: 1.85;
        margin-bottom: 17px;
    }

    .about-content p {
        color: #68778b;
        font-size: 15px;
        line-height: 1.85;
        margin-bottom: 17px;
    }

    .about-highlight {
        display: flex;
        align-items: center;
        margin-top: 28px;
        padding: 18px 20px;
        background: #f5f9fc;
        border-left: 4px solid #e18a2c;
        border-radius: 0 8px 8px 0;
    }

    .about-highlight strong {
        display: block;
        color: #173b63;
        font-size: 15px;
        margin-bottom: 3px;
    }

    .about-highlight span {
        display: block;
        color: #748196;
        font-size: 13px;
    }

    /* ===================== IMAGE ===================== */
    .about-image-wrap {
        position: relative;
        padding: 15px 15px 25px 25px;
    }

    .about-image-wrap::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 75%;
        height: 78%;
        background: #edf5fa;
        border-radius: 14px;
        z-index: 0;
    }

    .about-image-wrap::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: 110px;
        height: 110px;
        border-radius: 12px;
        background: #e18a2c;
        opacity: .12;
        z-index: 0;
    }

    .about-image-card {
        position: relative;
        z-index: 2;
        overflow: hidden;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 22px 55px rgba(25, 55, 90, .16);
    }

    .about-image-card img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        transition: transform .5s ease;
    }

    .about-image-card:hover img {
        transform: scale(1.025);
    }

    .about-year-badge {
        position: absolute;
        z-index: 3;
        left: 0;
        bottom: 5px;
        min-width: 155px;
        padding: 17px 20px;
        color: #fff;
        background: #173b63;
        border-radius: 0 10px 10px 0;
        box-shadow: 0 10px 25px rgba(23,59,99,.20);
    }

    .about-year-badge strong {
        display: block;
        font-size: 27px;
        line-height: 1;
        font-weight: 800;
    }

    .about-year-badge span {
        display: block;
        margin-top: 5px;
        color: rgba(255,255,255,.75);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    /* ===================== VALUES ===================== */
    .about-values {
        padding: 75px 0 90px;
    }

    .about-section-heading {
        max-width: 680px;
        margin: 0 auto 45px;
        text-align: center;
    }

    .about-section-heading h3 {
        margin: 0 0 12px;
        color: #173b63;
        font-size: 32px;
        font-weight: 800;
    }

    .about-section-heading p {
        margin: 0;
        color: #718096;
        font-size: 15px;
        line-height: 1.8;
    }

    .about-feature-card {
        height: 100%;
        padding: 30px 25px;
        background: #fff;
        border: 1px solid #e8eef3;
        border-radius: 12px;
        box-shadow: 0 7px 25px rgba(25,55,90,.05);
        transition: all .3s ease;
    }

    .about-feature-card:hover {
        transform: translateY(-6px);
        border-color: rgba(225,138,44,.25);
        box-shadow: 0 18px 40px rgba(25,55,90,.10);
    }

    .about-feature-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 58px;
        margin-bottom: 20px;
        border-radius: 12px;
        color: #173b63;
        background: #edf5fa;
    }

    .about-feature-icon svg {
        width: 27px;
        height: 27px;
    }

    .about-feature-card h4 {
        margin: 0 0 10px;
        color: #243b5a;
        font-size: 18px;
        font-weight: 700;
    }

    .about-feature-card p {
        margin: 0;
        color: #718096;
        font-size: 14px;
        line-height: 1.75;
    }

    /* ===================== STATS ===================== */
    .about-stats {
        margin-top: -45px;
        position: relative;
        z-index: 5;
    }

    .about-stats-card {
        overflow: hidden;
        background: #173b63;
        border-radius: 14px;
        box-shadow: 0 18px 45px rgba(23,59,99,.18);
    }

    .about-stat {
        position: relative;
        padding: 27px 20px;
        text-align: center;
    }

    .about-stat + .about-stat::before {
        content: "";
        position: absolute;
        left: 0;
        top: 25%;
        width: 1px;
        height: 50%;
        background: rgba(255,255,255,.15);
    }

    .about-stat strong {
        display: block;
        color: #fff;
        font-size: 28px;
        line-height: 1;
        font-weight: 800;
    }

    .about-stat span {
        display: block;
        margin-top: 8px;
        color: rgba(255,255,255,.70);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .7px;
        text-transform: uppercase;
    }

    /* ===================== RESPONSIVE ===================== */
    @media (max-width: 991.98px) {
        .about-hero {
            min-height: 290px;
        }

        .about-hero h1 {
            font-size: 40px;
        }

        .about-content {
            padding-right: 0;
            margin-bottom: 50px;
        }

        .about-intro {
            padding-top: 70px;
        }
    }

    @media (max-width: 767.98px) {
        .about-hero-content {
            padding: 55px 0 70px;
        }

        .about-hero h1 {
            font-size: 34px;
        }

        .about-hero p {
            font-size: 14px;
        }

        .about-breadcrumb {
            margin-top: -35px;
        }

        .about-breadcrumb-inner {
            padding: 14px 16px;
        }

        .about-intro {
            padding: 60px 0 55px;
        }

        .about-content h2 {
            font-size: 30px;
        }

        .about-content .lead-copy {
            font-size: 16px;
        }

        .about-image-wrap {
            padding-left: 12px;
            padding-right: 8px;
        }

        .about-values {
            padding: 60px 0 70px;
        }

        .about-section-heading h3 {
            font-size: 27px;
        }

        .about-stat {
            padding: 22px 10px;
        }

        .about-stat strong {
            font-size: 23px;
        }
    }

    @media (max-width: 575.98px) {
        .about-hero {
            min-height: 255px;
        }

        .about-hero h1 {
            font-size: 30px;
        }

        .about-hero-kicker {
            font-size: 10px;
        }

        .about-year-badge {
            min-width: 135px;
            padding: 13px 16px;
        }

        .about-year-badge strong {
            font-size: 23px;
        }

        .about-stat + .about-stat::before {
            display: none;
        }
    }



    /* =====================================================
   CONTACT PAGE
===================================================== */

.contact-hero {
    position: relative;
    overflow: hidden;

    padding: 68px 0 76px;

    background:
        linear-gradient(
            135deg,
            #172554 0%,
            #1e3a8a 58%,
            #2563eb 100%
        );

    color: #fff;
}

.contact-hero-pattern {
    position: absolute;

    width: 520px;
    height: 520px;

    right: -180px;
    top: -280px;

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 50%;
}

.contact-hero-pattern::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    top: 100px;
    left: 100px;

    border: 1px solid rgba(255,255,255,.07);

    border-radius: 50%;
}

.contact-hero-content {
    position: relative;
    z-index: 2;
}

.contact-hero-label {
    display: inline-block;

    margin-bottom: 15px;
    padding: 7px 14px;

    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50px;

    background: rgba(255,255,255,.08);

    color: rgba(255,255,255,.92);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.contact-hero h1 {
    margin: 0 0 13px;

    font-size: 43px;
    line-height: 1.15;
    font-weight: 700;
}

.contact-hero p {
    max-width: 650px;

    margin: 0;

    color: rgba(255,255,255,.80);

    font-size: 16px;
    line-height: 1.75;
}


/* =====================================================
   HERO MARK
===================================================== */

.contact-hero-mark {
    position: relative;
    z-index: 2;

    width: 150px;
    height: 150px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 28px;

    background: rgba(255,255,255,.09);

    box-shadow: 0 20px 50px rgba(0,0,0,.16);
}

.contact-hero-mark span {
    color: rgba(255,255,255,.70);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.contact-hero-mark strong {
    color: #fff;

    font-size: 28px;
    line-height: 1.1;

    letter-spacing: 2px;
}


/* =====================================================
   BREADCRUMB
===================================================== */

.contact-breadcrumb {
    background: #fff;

    border-bottom: 1px solid #e8edf4;
}

.custom-breadcrumb {
    padding: 15px 0;

    background: transparent;

    font-size: 13px;
}

.custom-breadcrumb a {
    color: #64748b;

    text-decoration: none;

    transition: color .2s ease;
}

.custom-breadcrumb a:hover {
    color: #2563eb;
}

.custom-breadcrumb .active {
    color: #1e293b;

    font-weight: 600;
}


/* =====================================================
   CONTACT DETAILS SECTION
===================================================== */

.contact-details-section {
    padding: 65px 0 45px;
}

.section-heading {
    margin-bottom: 38px;
}

.section-label {
    display: block;

    margin-bottom: 8px;

    color: #2563eb;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.section-heading h2 {
    margin: 0 0 9px;

    color: #172033;

    font-size: 30px;
    line-height: 1.3;

    font-weight: 700;
}

.section-heading p {
    margin: 0;

    color: #718096;

    font-size: 14px;
}


/* =====================================================
   CONTACT DETAIL CARD
===================================================== */

.contact-detail-card {
    position: relative;

    height: 100%;

    overflow: hidden;

    padding: 28px 24px;

    background: #fff;

    border: 1px solid #e3e9f1;
    border-radius: 12px;

    box-shadow: 0 6px 22px rgba(15,23,42,.04);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.contact-detail-card:hover {
    transform: translateY(-4px);

    border-color: #cdd9eb;

    box-shadow: 0 16px 35px rgba(15,23,42,.09);
}

.contact-detail-number {
    position: absolute;

    top: 14px;
    right: 17px;

    color: #edf1f6;

    font-size: 30px;
    line-height: 1;

    font-weight: 800;
}

.contact-detail-icon {
    width: 48px;
    height: 48px;

    margin-bottom: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 15px;
    font-weight: 700;
}

.contact-detail-label {
    display: block;

    margin-bottom: 6px;

    color: #2563eb;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.1px;
}

.contact-detail-card h3 {
    margin: 0 0 10px;

    color: #1e293b;

    font-size: 17px;
    font-weight: 700;
}

.contact-detail-card p {
    min-height: 65px;

    margin: 0;

    color: #64748b;

    font-size: 13px;
    line-height: 1.7;
}

.contact-detail-card a {
    color: #475569;

    text-decoration: none;

    transition: color .2s ease;
}

.contact-detail-card a:hover {
    color: #2563eb;
}

.contact-detail-note {
    display: block;

    margin-top: 8px;

    color: #94a3b8;

    font-size: 10px;
}

.email-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.email-list a {
    word-break: break-word;
}


/* =====================================================
   FORM SECTION
===================================================== */

.contact-form-section {
    padding: 25px 0 80px;

    background: #f7f9fc;
}

.contact-main-box {
    overflow: hidden;

    border: 1px solid #e1e7ef;
    border-radius: 14px;

    background: #fff;

    box-shadow: 0 10px 35px rgba(15,23,42,.06);
}


/* =====================================================
   MAP
===================================================== */

.contact-map {
    position: relative;

    height: 100%;
    min-height: 620px;

    overflow: hidden;

    background: #e2e8f0;
}

.map-container {
    width: 100%;
    height: 100%;

    min-height: 620px;

    display: block;

    border: 0;
}

.map-information {
    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 20px;

    padding: 18px 20px;

    border-radius: 10px;

    background: rgba(15,23,42,.91);

    box-shadow: 0 10px 30px rgba(0,0,0,.16);

    color: #fff;
}

.map-information span {
    display: block;

    margin-bottom: 5px;

    color: rgba(255,255,255,.60);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.3px;
}

.map-information strong {
    display: block;

    margin-bottom: 5px;

    font-size: 17px;
}

.map-information p {
    margin: 0;

    color: rgba(255,255,255,.70);

    font-size: 11px;
    line-height: 1.6;
}


/* =====================================================
   FORM WRAPPER
===================================================== */

.contact-form-wrapper {
    padding: 42px 42px 35px;
}

.form-heading {
    margin-bottom: 8px;
}

.form-heading h2 {
    margin: 0 0 8px;

    color: #172033;

    font-size: 29px;
    line-height: 1.35;

    font-weight: 700;
}

.form-heading h2 span {
    color: #2563eb;
}

.form-heading p {
    margin: 0;

    color: #718096;

    font-size: 13px;
    line-height: 1.7;
}

.required-note {
    margin: 18px 0 27px;

    color: #94a3b8;

    font-size: 11px;
}

.required-note span,
.required {
    color: #dc2626;
}


/* =====================================================
   FORM
===================================================== */

.contact-form-wrapper .form-group {
    margin-bottom: 20px;
}

.contact-form-wrapper label {
    display: block;

    margin-bottom: 7px;

    color: #334155;

    font-size: 12px;
    font-weight: 600;
}

.contact-form-wrapper .form-control {
    min-height: 46px;

    padding: 10px 13px;

    border: 1px solid #dbe2ea;
    border-radius: 7px;

    background: #fff;

    color: #1e293b;

    font-size: 13px;

    box-shadow: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.contact-form-wrapper textarea.form-control {
    min-height: 95px;

    resize: vertical;
}

.contact-form-wrapper .form-control::placeholder {
    color: #a3adba;
}

.contact-form-wrapper .form-control:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.09);
}


/* =====================================================
   JQUERY VALIDATION
===================================================== */

.contact-form-wrapper .form-group.has-error .form-control {
    border-color: #dc3545;

    background: #fffafa;
}

.contact-form-wrapper label.error {
    margin-top: 6px;
    margin-bottom: 0;

    color: #dc3545;

    font-size: 11px;
    font-weight: 500;
}


/* =====================================================
   SERVER VALIDATION
===================================================== */

.server-validation {
    margin-bottom: 20px;
    padding: 13px 16px;

    border: 1px solid #f1b8bd;
    border-radius: 7px;

    background: #fff5f5;

    color: #b42318;

    font-size: 12px;
}

.server-validation ul {
    margin: 0;
    padding-left: 18px;
}


/* =====================================================
   FLASH ALERT
===================================================== */

.contact-alert {
    margin-bottom: 25px;

    border-radius: 7px;

    font-size: 12px;
}


/* =====================================================
   REQUEST OPTIONS
===================================================== */

.request-section {
    margin-top: 25px;
    padding: 20px;

    border: 1px solid #e3e9f1;
    border-radius: 8px;

    background: #f8fafc;
}

.request-label {
    display: block;

    margin-bottom: 15px;

    color: #64748b;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.1px;
}

.request-checkbox {
    min-height: 24px;
}

.request-checkbox .custom-control-label {
    padding-top: 2px;

    color: #475569;

    font-size: 11px;
    font-weight: 500;

    cursor: pointer;
}

.request-checkbox .custom-control-input:checked ~ .custom-control-label {
    color: #1e293b;
}

.request-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    border-color: #2563eb;
    background-color: #2563eb;
}


/* =====================================================
   SUBMIT
===================================================== */

.form-submit {
    display: flex;
    justify-content: flex-end;

    margin-top: 25px;
}

.contact-submit {
    min-width: 165px;

    padding: 12px 19px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 7px;

    background: #2563eb;

    color: #fff;

    font-size: 12px;
    font-weight: 700;

    box-shadow: 0 6px 16px rgba(37,99,235,.18);

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.contact-submit:hover {
    background: #1d4ed8;

    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 9px 22px rgba(37,99,235,.25);
}

.contact-submit:focus {
    outline: none;

    color: #fff;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.15),
        0 6px 16px rgba(37,99,235,.18);
}

.contact-submit:disabled {
    opacity: .7;

    cursor: not-allowed;

    transform: none;
}

.submit-arrow {
    margin-left: 9px;

    font-size: 17px;

    transition: transform .2s ease;
}

.contact-submit:hover .submit-arrow {
    transform: translateX(4px);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 991.98px) {

    .contact-details-section {
        padding-top: 55px;
    }

    .contact-map {
        min-height: 400px;
    }

    .map-container {
        min-height: 400px;
    }

    .contact-form-wrapper {
        padding: 35px;
    }

}


@media (max-width: 767.98px) {

    .contact-hero {
        padding: 45px 0 52px;
    }

    .contact-hero h1 {
        font-size: 32px;
    }

    .contact-hero p {
        font-size: 14px;
    }

    .contact-details-section {
        padding: 45px 0 25px;
    }

    .section-heading {
        margin-bottom: 30px;
    }

    .section-heading h2 {
        font-size: 25px;
    }

    .contact-detail-card {
        padding: 25px 22px;
    }

    .contact-form-section {
        padding: 20px 0 55px;
    }

    .contact-form-wrapper {
        padding: 30px 22px;
    }

    .form-heading h2 {
        font-size: 25px;
    }

    .form-submit {
        justify-content: stretch;
    }

    .contact-submit {
        width: 100%;
    }

}


@media (max-width: 575.98px) {

    .contact-hero h1 {
        font-size: 29px;
    }

    .contact-detail-card {
        min-height: auto;
    }

    .contact-map {
        min-height: 350px;
    }

    .map-container {
        min-height: 350px;
    }

    .map-information {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .contact-form-wrapper {
        padding: 25px 18px;
    }

    .request-section {
        padding: 16px;
    }

}



    /* =========================================================
       SEARCH PAGE
    ========================================================= */

    .search-page {
        background:
            linear-gradient(
                180deg,
                #f8f7fc 0%,
                #ffffff 55%
            );

        min-height: 70vh;

        padding-bottom: 70px;
    }


    /* =========================================================
       BREADCRUMB
    ========================================================= */

    .search-breadcrumb {
        padding: 18px 0;

        background: #fff;

        border-bottom:
            1px solid #eeeaf5;
    }

    .search-breadcrumb .breadcrumb {
        margin: 0;

        align-items: center;

        font-size: 13px;
    }

    .search-breadcrumb .breadcrumb-item {
        color: #8b8798;
    }

    .search-breadcrumb .breadcrumb-item a {
        color: #342283;

        font-weight: 600;
    }

    .search-breadcrumb .breadcrumb-item a:hover {
        color: #5a42b8;
    }

    .search-breadcrumb
    .breadcrumb-item + .breadcrumb-item::before {
        color: #aaa5b8;

        content: "\f105";

        font-family:
            "Font Awesome 6 Free";

        font-weight: 900;
    }


    /* =========================================================
       MAIN CONTAINER
    ========================================================= */

    .search-results-wrapper {
        padding-top: 35px;
    }


    /* =========================================================
       PAGE HEADER
    ========================================================= */

    .search-page-header {
        position: relative;

        display: flex;

        align-items: center;
        justify-content: space-between;

        gap: 20px;

        margin-bottom: 28px;

        padding: 24px 28px;

        background: #fff;

        border:
            1px solid #ebe8f3;

        border-radius: 16px;

        box-shadow:
            0 8px 30px rgba(43, 31, 91, .07);

        overflow: hidden;
    }

    .search-page-header::before {
        content: "";

        position: absolute;

        left: 0;
        top: 0;
        bottom: 0;

        width: 4px;

        background:
            linear-gradient(
                180deg,
                #342283,
                #755bd0
            );
    }

    .search-heading {
        display: flex;

        align-items: center;

        gap: 15px;
    }

    .search-heading-icon {
        width: 48px;
        height: 48px;

        flex: 0 0 48px;

        display: flex;

        align-items: center;
        justify-content: center;

        color: #fff;

        background:
            linear-gradient(
                135deg,
                #342283,
                #6751bd
            );

        border-radius: 12px;

        box-shadow:
            0 8px 18px
            rgba(52,34,131,.20);
    }

    .search-heading-icon i {
        font-size: 18px;
    }

    .search-heading h1 {
        margin: 0;

        color: #211c31;

        font-size: 24px;
        font-weight: 750;

        line-height: 1.2;
    }

    .search-heading p {
        margin: 5px 0 0;

        color: #817c91;

        font-size: 13px;
    }

    .search-heading p strong {
        color: #342283;

        font-weight: 650;
    }


    /* =========================================================
       BACK BUTTON
    ========================================================= */

    .search-back-btn {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 8px;

        min-height: 42px;

        padding:
            0 18px;

        color: #342283;

        background: #f4f1fb;

        border:
            1px solid #e5def7;

        border-radius: 9px;

        font-size: 13px;
        font-weight: 650;

        white-space: nowrap;

        transition:
            all .25s ease;
    }

    .search-back-btn:hover {
        color: #fff;

        background:
            linear-gradient(
                135deg,
                #342283,
                #6651ba
            );

        border-color: #342283;

        transform:
            translateY(-1px);

        box-shadow:
            0 7px 18px
            rgba(52,34,131,.18);
    }


    /* =========================================================
       RESULTS GRID
    ========================================================= */

    .search-results-grid {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;
    }


    /* =========================================================
       BOOK CARD
    ========================================================= */

    .search-book-card {
        position: relative;

        display: flex;

        min-width: 0;
        height: 100%;

        background: #fff;

        border:
            1px solid #ebe8f2;

        border-radius: 15px;

        overflow: hidden;

        box-shadow:
            0 6px 22px
            rgba(39, 29, 82, .055);

        transition:
            transform .28s ease,
            box-shadow .28s ease,
            border-color .28s ease;
    }

    .search-book-card:hover {
        transform:
            translateY(-5px);

        border-color:
            #ddd5f1;

        box-shadow:
            0 15px 38px
            rgba(39, 29, 82, .12);
    }


    /* =========================================================
       BOOK IMAGE
    ========================================================= */

    .search-book-image {
        position: relative;

        flex: 0 0 185px;

        width: 185px;

        min-height: 235px;

        padding: 15px;

        background:
            linear-gradient(
                145deg,
                #f3f1f8,
                #faf9fc
            );

        overflow: hidden;
    }

    .search-book-image::after {
        content: "";

        position: absolute;

        left: 15px;
        right: 15px;
        bottom: 10px;

        height: 18px;

        background:
            radial-gradient(
                ellipse,
                rgba(25,18,52,.16),
                transparent 70%
            );

        filter: blur(5px);

        opacity: .65;
    }

    .search-book-image img {
        position: relative;
        z-index: 2;

        display: block;

        width: 100%;
        height: 100%;

        min-height: 205px;

        object-fit: contain;

        border-radius: 7px;

        filter:
            drop-shadow(
                0 7px 10px
                rgba(30,20,55,.18)
            );

        transition:
            transform .35s ease;
    }

    .search-book-card:hover
    .search-book-image img {
        transform:
            scale(1.035)
            rotate(-.4deg);
    }


    /* =========================================================
       CONTENT
    ========================================================= */

    .search-book-content {
        flex: 1;

        display: flex;

        flex-direction: column;

        min-width: 0;

        padding: 23px 22px;
    }

    .search-book-label {
        display: inline-flex;

        align-items: center;

        width: fit-content;

        gap: 6px;

        margin-bottom: 9px;

        padding:
            5px 9px;

        color: #342283;

        background:
            #f3effd;

        border-radius: 5px;

        font-size: 10px;
        font-weight: 750;

        text-transform: uppercase;

        letter-spacing: .6px;
    }

    .search-book-label i {
        font-size: 9px;
    }

    .search-book-title {
        margin: 0 0 9px;

        color: #252034;

        font-size: 19px;
        font-weight: 700;

        line-height: 1.35;

        display: -webkit-box;

        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        overflow: hidden;
    }

    .search-book-description {
        margin: 0;

        color: #777286;

        font-size: 13px;

        line-height: 1.7;

        display: -webkit-box;

        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;

        overflow: hidden;
    }


    /* =========================================================
       CARD FOOTER
    ========================================================= */

    .search-book-footer {
        display: flex;

        align-items: center;
        justify-content: space-between;

        gap: 12px;

        margin-top: auto;

        padding-top: 20px;
    }

    .search-book-link {
        display: inline-flex;

        align-items: center;

        gap: 7px;

        color: #342283;

        font-size: 13px;
        font-weight: 700;
    }

    .search-book-link i {
        font-size: 11px;

        transition:
            transform .25s ease;
    }

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

    .search-book-link:hover {
        color: #5c44bb;
    }

    .book-view-icon {
        width: 32px;
        height: 32px;

        display: flex;

        align-items: center;
        justify-content: center;

        color: #342283;

        background: #f5f2fb;

        border-radius: 8px;

        font-size: 12px;
    }


    /* =========================================================
       EMPTY STATE
    ========================================================= */

    .search-empty {
        padding:
            65px 25px;

        text-align: center;

        background: #fff;

        border:
            1px solid #ebe8f3;

        border-radius: 16px;

        box-shadow:
            0 8px 30px
            rgba(43,31,91,.06);
    }

    .search-empty-icon {
        width: 72px;
        height: 72px;

        margin:
            0 auto 18px;

        display: flex;

        align-items: center;
        justify-content: center;

        color: #342283;

        background:
            #f3effb;

        border-radius: 50%;

        font-size: 25px;
    }

    .search-empty h3 {
        margin: 0 0 8px;

        color: #272132;

        font-size: 20px;
        font-weight: 700;
    }

    .search-empty p {
        max-width: 480px;

        margin:
            0 auto 22px;

        color: #817c8d;

        font-size: 13px;

        line-height: 1.7;
    }

    .search-empty a {
        display: inline-flex;

        align-items: center;

        gap: 7px;

        padding:
            10px 18px;

        color: #fff;

        background:
            linear-gradient(
                135deg,
                #342283,
                #6751bd
            );

        border-radius: 8px;

        font-size: 13px;
        font-weight: 650;
    }

    .search-empty a:hover {
        transform:
            translateY(-1px);

        box-shadow:
            0 7px 18px
            rgba(52,34,131,.20);
    }


    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 991px) {

        .search-results-grid {
            grid-template-columns:
                1fr;
        }

        .search-book-image {
            flex-basis: 170px;

            width: 170px;
        }

    }


    @media (max-width: 767px) {

        .search-results-wrapper {
            padding-top: 22px;
        }

        .search-page-header {
            flex-direction: column;

            align-items: flex-start;

            padding: 20px;
        }

        .search-back-btn {
            width: 100%;
        }

        .search-book-card {
            display: block;
        }

        .search-book-image {
            width: 100%;

            height: 250px;

            min-height: 0;

            padding: 18px;
        }

        .search-book-image img {
            height: 214px;

            min-height: 0;
        }

        .search-book-content {
            padding: 20px;
        }

        .search-book-footer {
            padding-top: 18px;
        }

    }


    @media (max-width: 480px) {

        .search-heading h1 {
            font-size: 20px;
        }

        .search-heading-icon {
            width: 42px;
            height: 42px;

            flex-basis: 42px;
        }

        .search-book-title {
            font-size: 17px;
        }

        .search-book-description {
            font-size: 12px;
        }

    }


    /* =========================================================
       ORDER ONLINE PAGE
    ========================================================= */

    .order-online-page {
        min-height: 100vh;
    }

    /* Banner */
    .order-banner {
        position: relative;
        min-height: 250px;
        display: flex;
        align-items: center;
        background:
            linear-gradient(135deg, rgba(52, 34, 131, .96), rgba(30, 64, 175, .88)),
            url("<?= base_url('uploads/images/order-online.jpg') ?>") center/cover;
    }

    .order-banner::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            rgba(52, 34, 131, .95),
            rgba(15, 23, 42, .60)
        );
    }

    .order-banner-content {
        position: relative;
        z-index: 2;
        color: #fff;
        padding: 50px 0 80px;
    }

    .order-banner-content .eyebrow {
        display: inline-flex;
        align-items: center;
        padding: 7px 14px;
        border-radius: 30px;
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.20);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        margin-bottom: 14px;
    }

    .order-banner-content h1 {
        margin: 0;
        font-size: 38px;
        font-weight: 800;
        letter-spacing: -.02em;
    }

    .order-banner-content p {
        margin: 10px 0 0;
        color: rgba(255,255,255,.78);
        font-size: 15px;
        max-width: 650px;
    }

    /* Breadcrumb */
    .order-breadcrumb-wrap {
        margin-top: -42px;
        position: relative;
        z-index: 5;
    }

    .order-breadcrumb {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 12px 35px rgba(15, 23, 42, .10);
        padding: 14px 20px;
    }

    .order-breadcrumb .breadcrumb {
        margin: 0;
        background: transparent;
        padding: 0;
        font-size: 13px;
    }

    .order-breadcrumb a {
        color: #64748b;
        text-decoration: none;
    }

    .order-breadcrumb .active {
        color: #342283;
        font-weight: 700;
    }

    /* Main */
    .order-section {
        padding: 42px 0 70px;
    }

    /* Stepper */
    .order-steps {
        background: #fff;
        border: 1px solid #e8ecf3;
        border-radius: 18px;
        padding: 24px 28px;
        margin-bottom: 24px;
        box-shadow: 0 8px 28px rgba(15, 23, 42, .05);
    }

    .steps-list {
        display: flex;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .step-item {
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;
        color: #94a3b8;
        font-size: 13px;
        font-weight: 700;
    }

    .step-item:not(:last-child)::after {
        content: "";
        position: absolute;
        height: 2px;
        left: 48px;
        right: 0;
        top: 19px;
        background: #e2e8f0;
        z-index: 0;
    }

    .step-item.active,
    .step-item.completed {
        color: #342283;
    }

    .step-item.active:not(:last-child)::after,
    .step-item.completed:not(:last-child)::after {
        background: #342283;
    }

    .step-number {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        background: #f1f5f9;
        color: #64748b;
        border: 1px solid #e2e8f0;
        position: relative;
        z-index: 2;
        font-size: 14px;
        font-weight: 800;
    }

    .step-item.active .step-number,
    .step-item.completed .step-number {
        color: #fff;
        background: #342283;
        border-color: #342283;
        box-shadow: 0 5px 14px rgba(52, 34, 131, .22);
    }

    .step-text strong {
        display: block;
        color: inherit;
        font-size: 14px;
    }

    .step-text span {
        display: block;
        color: #94a3b8;
        font-size: 11px;
        font-weight: 500;
        margin-top: 2px;
    }

    /* Form card */
    .order-card {
        background: #fff;
        border: 1px solid #e7ebf2;
        border-radius: 18px;
        box-shadow: 0 8px 28px rgba(15, 23, 42, .05);
        overflow: hidden;
        margin-bottom: 22px;
    }

    .order-card-header {
        padding: 22px 26px;
        border-bottom: 1px solid #edf0f5;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .order-card-title {
        display: flex;
        align-items: center;
    }

    .section-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 13px;
        background: #f0edff;
        color: #342283;
        font-size: 17px;
        font-weight: 800;
    }

    .order-card-title h3 {
        margin: 0;
        color: #172033;
        font-size: 18px;
        font-weight: 800;
    }

    .order-card-title p {
        margin: 3px 0 0;
        color: #94a3b8;
        font-size: 12px;
    }

    .required-note {
        color: #94a3b8;
        font-size: 12px;
        font-style: italic;
    }

    .required {
        color: #dc2626;
        font-weight: 700;
    }

    .order-card-body {
        padding: 28px 26px;
    }

    /* Inputs */
    .form-group {
        margin-bottom: 20px;
    }

    .form-label {
        color: #334155;
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 7px;
    }

    .form-control,
    .custom-select {
        height: 46px;
        border-radius: 9px;
        border: 1px solid #dbe2ea;
        background: #fff;
        color: #1e293b;
        font-size: 14px;
        box-shadow: none !important;
        transition: all .2s ease;
    }

    textarea.form-control {
        height: auto;
        min-height: 100px;
        resize: vertical;
    }

    .form-control::placeholder {
        color: #a8b2c1;
    }

    .form-control:focus,
    .custom-select:focus {
        border-color: #342283;
        box-shadow: 0 0 0 3px rgba(52, 34, 131, .09) !important;
    }

    .input-prefix {
        position: relative;
    }

    .input-prefix .prefix {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #64748b;
        font-size: 13px;
        font-weight: 700;
        z-index: 2;
    }

    .input-prefix .form-control {
        padding-left: 42px;
    }

    /* Validation */
    label.error,
    small.error,
    .help-block {
        display: block;
        color: #dc2626 !important;
        font-size: 11px;
        font-weight: 600;
        margin-top: 6px;
    }

    .has-error .form-control,
    .has-error .custom-select {
        border-color: #dc2626 !important;
        background: #fffafa;
    }

    .has-error .form-control:focus,
    .has-error .custom-select:focus {
        box-shadow: 0 0 0 3px rgba(220, 38, 38, .08) !important;
    }

    /* Dispatch */
    .dispatch-box {
        border: 1px solid #e4e8ef;
        background: #f8fafc;
        border-radius: 12px;
        padding: 18px 20px;
    }

    .dispatch-title {
        color: #334155;
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .dispatch-options {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .dispatch-option {
        position: relative;
    }

    .dispatch-option input {
        position: absolute;
        opacity: 0;
    }

    .dispatch-option label {
        min-width: 120px;
        padding: 11px 17px;
        border: 1px solid #dbe2ea;
        border-radius: 9px;
        background: #fff;
        color: #475569;
        cursor: pointer;
        text-align: center;
        font-size: 13px;
        font-weight: 700;
        margin: 0;
        transition: all .2s ease;
    }

    .dispatch-option input:checked + label {
        color: #342283;
        border-color: #342283;
        background: #f4f1ff;
    }

    /* Remarks */
    .remarks-box {
        margin-bottom: 26px;
    }

    /* Cart */
    .cart-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 15px;
        margin-bottom: 13px;
    }

    .cart-header h4 {
        margin: 0;
        color: #172033;
        font-size: 16px;
        font-weight: 800;
    }

    .cart-header p {
        margin: 4px 0 0;
        color: #94a3b8;
        font-size: 12px;
    }

    .quantity-note {
        color: #dc2626;
        font-size: 11px;
        font-weight: 600;
        font-style: italic;
    }

    .cart-wrapper {
        border: 1px solid #e3e8ef;
        border-radius: 13px;
        overflow: hidden;
    }

    .cart-table {
        margin: 0;
        width: 100%;
    }

    .cart-table thead th {
        background: #f8fafc;
        color: #64748b;
        border: 0;
        border-bottom: 1px solid #e3e8ef;
        padding: 13px 12px;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
        white-space: nowrap;
    }

    .cart-table tbody td {
        border-color: #edf0f4;
        padding: 14px 12px;
        vertical-align: middle;
        color: #334155;
        font-size: 13px;
    }

    .book-name {
        color: #172033;
        font-weight: 700;
    }

    .book-price {
        color: #342283;
        font-weight: 800;
        white-space: nowrap;
    }

    .class-select {
        height: 38px;
        min-width: 105px;
        font-size: 12px;
        border-radius: 7px;
    }

    .quantity {
        width: 80px;
        height: 38px;
        text-align: center;
        font-weight: 700;
        border-radius: 7px;
    }

    .delete-btn {
        width: 35px;
        height: 35px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: #fff1f2;
        color: #dc2626;
        font-size: 14px;
        font-weight: 800;
        transition: all .2s ease;
    }

    .delete-btn:hover {
        background: #dc2626;
        color: #fff;
    }

    .cart-empty {
        text-align: center;
        padding: 32px 20px !important;
        color: #94a3b8 !important;
    }

    .cart-empty strong {
        display: block;
        color: #64748b;
        font-size: 14px;
        margin-bottom: 4px;
    }

    .cart-empty span {
        font-size: 12px;
    }

    .cart-total {
        background: #342283 !important;
        color: #fff;
    }

    .cart-total td {
        border: 0 !important;
        padding: 16px 14px !important;
        color: #fff !important;
    }

    .total-label {
        font-size: 13px;
        font-weight: 600;
        opacity: .8;
        margin-right: 10px;
    }

    .total-amount {
        font-size: 21px;
        font-weight: 800;
    }

    /* Add book */
    .add-book-card {
        margin-top: 24px;
        padding: 20px;
        border: 1px solid #e3e8ef;
        border-radius: 13px;
        background: #f8fafc;
    }

    .add-book-title {
        color: #172033;
        font-size: 14px;
        font-weight: 800;
        margin-bottom: 15px;
    }

    .book-select {
        height: 46px;
        background: #fff;
    }

    .price-preview {
        height: 46px;
        padding: 0 14px;
        border: 1px solid #dbe2ea;
        border-radius: 9px;
        background: #fff;
        display: flex;
        align-items: center;
        color: #342283;
        font-weight: 800;
    }

    .quantity-input {
        height: 46px;
        text-align: center;
        font-weight: 700;
    }

    .add-cart-btn {
        height: 46px;
        border: 0;
        border-radius: 9px;
        background: #342283;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        padding: 0 20px;
        transition: all .2s ease;
    }

    .add-cart-btn:hover {
        background: #28196a;
        color: #fff;
        transform: translateY(-1px);
    }

    /* Buttons */
    .order-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 25px;
        gap: 12px;
    }

    .order-btn {
        min-width: 120px;
        height: 45px;
        border-radius: 9px;
        font-size: 13px;
        font-weight: 700;
        padding: 0 20px;
    }

    .order-btn-primary {
        background: #342283;
        border-color: #342283;
    }

    .order-btn-primary:hover {
        background: #28196a;
        border-color: #28196a;
    }

    .order-btn-secondary {
        background: #fff;
        border-color: #dbe2ea;
        color: #475569;
    }

    .order-btn-secondary:hover {
        background: #f8fafc;
        color: #172033;
    }

    /* Alert */
    .order-alert {
        border-radius: 11px;
        border: 0;
        font-size: 13px;
    }

    /* Responsive */
    @media (max-width: 767.98px) {

        .order-banner {
            min-height: 210px;
        }

        .order-banner-content {
            padding: 35px 0 65px;
        }

        .order-banner-content h1 {
            font-size: 29px;
        }

        .order-section {
            padding: 28px 0 50px;
        }

        .order-steps {
            padding: 18px 14px;
        }

        .steps-list {
            display: block;
        }

        .step-item {
            padding-bottom: 15px;
        }

        .step-item:last-child {
            padding-bottom: 0;
        }

        .step-item:not(:last-child)::after {
            left: 19px;
            right: auto;
            top: 40px;
            bottom: 0;
            width: 2px;
            height: auto;
        }

        .step-text span {
            display: none;
        }

        .order-card-header,
        .order-card-body {
            padding: 20px 16px;
        }

        .required-note {
            display: none;
        }

        .cart-header {
            display: block;
        }

        .quantity-note {
            display: block;
            margin-top: 7px;
        }

        .add-book-card {
            padding: 15px;
        }

        .order-actions {
            flex-direction: column-reverse;
        }

        .order-btn {
            width: 100%;
        }
    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        .order-card-body {
            padding: 24px 20px;
        }
    }


    
/* ========================================
   DOWNLOAD PAGE
======================================== */

.downloads-hero {
    position: relative;
    overflow: hidden;
    padding: 65px 0 75px;
    background: linear-gradient(
        135deg,
        #172554 0%,
        #1e3a8a 55%,
        #2563eb 100%
    );
    color: #fff;
}

.downloads-hero::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    right: -150px;
    top: -200px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
}

.downloads-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    left: -110px;
    bottom: -170px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-eyebrow {
    display: inline-block;
    padding: 7px 14px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50px;
    background: rgba(255,255,255,.08);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.downloads-hero h1 {
    margin: 0 0 12px;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
}

.downloads-hero p {
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 16px;
    line-height: 1.7;
}


/* ========================================
   HERO MARK
======================================== */

.hero-mark {
    position: relative;
    z-index: 2;

    width: 135px;
    height: 135px;

    margin-left: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.2);
    border-radius: 28px;

    background: rgba(255,255,255,.1);

    box-shadow: 0 20px 50px rgba(0,0,0,.15);
}

.hero-mark span {
    color: rgba(255,255,255,.9);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
}


/* ========================================
   BREADCRUMB
======================================== */

.breadcrumb-wrapper {
    background: #fff;
    border-bottom: 1px solid #e9edf3;
}

.custom-breadcrumb {
    padding: 15px 0;
    background: transparent;
    font-size: 13px;
}

.custom-breadcrumb a {
    color: #64748b;
    text-decoration: none;
    transition: all .2s ease;
}

.custom-breadcrumb a:hover {
    color: #2563eb;
}

.custom-breadcrumb .active {
    color: #1e293b;
    font-weight: 600;
}


/* ========================================
   MAIN SECTION
======================================== */

.downloads-section {
    padding: 65px 0 80px;
    background: #f7f9fc;
}


/* ========================================
   SECTION HEADING
======================================== */

.section-heading {
    margin-bottom: 40px;
}

.section-label {
    display: inline-block;
    margin-bottom: 9px;

    color: #2563eb;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.section-heading h2 {
    margin: 0 0 9px;

    color: #172033;

    font-size: 30px;
    font-weight: 700;
}

.section-heading p {
    margin: 0;

    color: #718096;

    font-size: 14px;
}


/* ========================================
   DOWNLOAD CARD
======================================== */

.download-card {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 170px;

    overflow: hidden;

    padding: 25px 27px;

    background: #fff;

    border: 1px solid #e5eaf1;
    border-radius: 12px;

    text-decoration: none !important;

    box-shadow: 0 5px 18px rgba(15,23,42,.04);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.download-card:hover {
    transform: translateY(-4px);

    border-color: #cdd9eb;

    box-shadow: 0 16px 35px rgba(15,23,42,.10);
}


/* ========================================
   CARD NUMBER
======================================== */

.download-number {
    position: absolute;

    top: 12px;
    right: 16px;

    color: #e8edf5;

    font-size: 36px;
    line-height: 1;

    font-weight: 800;
}


/* ========================================
   DOWNLOAD ICON
======================================== */

.download-icon {
    flex: 0 0 64px;

    width: 64px;
    height: 64px;

    margin-right: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 28px;

    font-weight: 700;

    text-align: center;

    transition: all .25s ease;
}

.download-card:hover .download-icon {
    background: #2563eb;
    color: #fff;
    transform: scale(1.05);
}


/* ========================================
   CONTENT
======================================== */

.download-content {
    position: relative;
    z-index: 2;

    min-width: 0;
}

.download-label {
    display: block;

    margin-bottom: 5px;

    color: #2563eb;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;
}

.download-content h3 {
    margin: 0 0 5px;

    color: #1e293b;

    font-size: 18px;
    line-height: 1.4;

    font-weight: 700;

    transition: color .2s ease;
}

.download-card:hover .download-content h3 {
    color: #2563eb;
}

.download-content p {
    margin: 0 0 13px;

    color: #718096;

    font-size: 13px;
}


/* ========================================
   ACTION
======================================== */

.download-action {
    display: inline-flex;
    align-items: center;

    color: #2563eb;

    font-size: 12px;
    font-weight: 700;

    transition: all .2s ease;
}

.download-arrow {
    margin-left: 7px;

    font-size: 16px;

    transition: transform .2s ease;
}

.download-card:hover .download-arrow {
    transform: translateX(4px);
}


/* ========================================
   EMPTY STATE
======================================== */

.empty-state {
    max-width: 600px;

    margin: 20px auto;

    padding: 55px 25px;

    border: 1px solid #e5eaf1;
    border-radius: 12px;

    background: #fff;

    text-align: center;

    box-shadow: 0 8px 25px rgba(15,23,42,.04);
}

.empty-mark {
    width: 70px;
    height: 70px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eff6ff;

    color: #2563eb;

    font-size: 28px;
    font-weight: 700;
}

.empty-state h3 {
    margin-bottom: 8px;

    color: #1e293b;

    font-size: 20px;
    font-weight: 700;
}

.empty-state p {
    margin-bottom: 22px;

    color: #718096;

    font-size: 14px;
}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 767.98px) {

    .downloads-hero {
        padding: 45px 0 50px;
    }

    .downloads-hero h1 {
        font-size: 31px;
    }

    .downloads-hero p {
        font-size: 14px;
    }

    .downloads-section {
        padding: 45px 0 55px;
    }

    .section-heading {
        margin-bottom: 30px;
    }

    .section-heading h2 {
        font-size: 25px;
    }

    .download-card {
        min-height: 150px;
        padding: 22px 20px;
    }

    .download-icon {
        flex: 0 0 54px;

        width: 54px;
        height: 54px;

        margin-right: 15px;

        font-size: 23px;
    }

    .download-content h3 {
        font-size: 16px;
    }

    .download-content p {
        font-size: 12px;
    }

    .download-number {
        font-size: 30px;
    }

}


@media (max-width: 480px) {

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

    .download-icon {
        flex: 0 0 48px;

        width: 48px;
        height: 48px;

        margin-right: 13px;

        font-size: 20px;
    }

    .download-content h3 {
        padding-right: 20px;
        font-size: 15px;
    }

    .download-label {
        font-size: 8px;
    }

    .download-content p {
        margin-bottom: 9px;
    }

}

 /* =========================================================
       BOOK DETAIL PAGE
    ========================================================= */
    .bookDetailPage {
        padding: 35px 0 60px;
    }

    .bookDetailPage .book-detail-card {
        background: #fff;
        border: 1px solid #e7ebf0;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 8px 30px rgba(15, 23, 42, 0.07);
    }

    /* Breadcrumb */
    .bookDetailPage .breadcrumbs-2 {
        margin-bottom: 0;
    }

    /* Cover Section */
    .book-cover-column {
        /*background: linear-gradient(145deg, #f1f5f9, #e8eef5);*/
        padding: 35px;
        /*min-height: 100%;*/
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .book-cover-wrapper {
        width: 100%;
        max-width: 350px;
        position: relative;
    }

    .book-cover-wrapper::after {
        content: "";
        position: absolute;
        left: 10%;
        right: 10%;
        bottom: -18px;
        height: 22px;
        background: rgba(15, 23, 42, 0.14);
        filter: blur(16px);
        border-radius: 50%;
        z-index: 0;
    }

    .bookImgBox {
        position: relative;
        z-index: 1;
        background: #fff;
        padding: 12px;
        border-radius: 14px;
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.15);
        transition: all .3s ease;
    }

    .bookImgBox:hover {
        transform: translateY(-5px);
        box-shadow: 0 24px 55px rgba(15, 23, 42, 0.19);
    }

    .bookImgBox img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 520px;
        object-fit: contain;
        border-radius: 9px;
    }

    /* Details */
    .book-detail-content {
        padding: 38px 42px;
    }

    .book-heading-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 14px;
    }

    .book-title {
        margin: 0;
        color: #172033;
        font-size: 30px;
        line-height: 1.25;
        font-weight: 700;
        letter-spacing: -0.3px;
    }

    .book-sub-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 10px;
    }

    .book-sub-meta span {
        display: inline-flex;
        align-items: center;
        padding: 5px 10px;
        background: #f1f5f9;
        color: #64748b;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
    }

    .class-badge {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        padding: 8px 13px;
        background: #eef4ff;
        color: #2563eb;
        border: 1px solid #dbe7ff;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
    }

    /* Price */
    .book-price-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        margin: 25px 0 22px;
        padding: 17px 20px;
        background: linear-gradient(135deg, #f8fafc, #f1f5f9);
        border: 1px solid #e8edf3;
        border-radius: 12px;
    }

    .book-price-label {
        color: #64748b;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .8px;
        font-weight: 700;
        margin-bottom: 3px;
    }

    .book-price {
        margin: 0;
        color: #0f766e;
        font-size: 30px;
        font-weight: 800;
        line-height: 1;
    }

    .book-price .ico {
        width: 17px;
        height: 22px;
        margin-right: 4px;
        vertical-align: -2px;
    }

    /* Digital Content CTA */
    .digital-content-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        margin: 0 0 22px;
        padding: 16px 20px;
        background: linear-gradient(135deg, var(--primary, #342283), var(--primary-light, #5a42b8));
        border-radius: 12px;
        color: #fff;
        flex-wrap: wrap;
    }

    .digital-content-cta__text {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .digital-content-cta__icon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: rgba(255, 255, 255, .16);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .digital-content-cta__title {
        font-size: 14px;
        font-weight: 700;
        margin: 0;
    }

    .digital-content-cta__sub {
        font-size: 12px;
        opacity: .85;
        margin: 2px 0 0;
    }

    .digital-content-cta__btn {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        background: #fff;
        color: var(--primary, #342283);
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
        transition: all .2s ease;
    }

    .digital-content-cta__btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
        color: var(--primary, #342283);
    }

    /* Description */
    .book-description {
        margin-bottom: 26px;
    }

    .section-label {
        margin-bottom: 9px;
        color: #172033;
        font-size: 14px;
        font-weight: 700;
    }

    .book-description-text {
        color: #64748b;
        font-size: 14px;
        line-height: 1.8;
        margin: 0;
    }

    /* Meta Cards */
    .bookMeta {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin: 0 0 28px;
    }

    .bookMeta .list-group-item {
        min-width: 0;
        padding: 15px;
        background: #fff;
        border: 1px solid #e7ebf0 !important;
        border-radius: 10px !important;
        display: flex;
        flex-direction: column;
        gap: 5px;
        transition: all .25s ease;
    }

    .bookMeta .list-group-item:hover {
        border-color: #cbd5e1 !important;
        transform: translateY(-2px);
        box-shadow: 0 7px 18px rgba(15, 23, 42, 0.06);
    }

    .author-title {
        color: #94a3b8;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .7px;
        font-weight: 700;
    }

    .author-name {
        color: #263247;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 600;
        word-break: break-word;
    }

    /* Series */
    .series-section {
        margin-top: 10px;
        padding-top: 24px;
        border-top: 1px solid #edf0f4;
    }

    .series-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 13px;
    }

    .series-title {
        margin: 0;
        color: #172033;
        font-size: 18px;
        font-weight: 700;
    }

    .series-count {
        padding: 5px 9px;
        background: #f1f5f9;
        color: #64748b;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 700;
    }

    .detailsTable {
        margin: 0 !important;
        border: 1px solid #e7ebf0;
        border-radius: 10px;
        overflow: hidden;
        border-collapse: separate;
        border-spacing: 0;
    }

    .detailsTable thead th {
        background: #f8fafc;
        color: #64748b;
        border-top: 0;
        border-bottom: 1px solid #e7ebf0;
        padding: 12px 14px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .5px;
        font-weight: 700;
        white-space: nowrap;
    }

    .detailsTable tbody td {
        padding: 12px 14px;
        color: #475569;
        border-top: 1px solid #f0f2f5;
        font-size: 13px;
        vertical-align: middle;
    }

    .detailsTable tbody tr:first-child td {
        border-top: 0;
    }

    .detailsTable tbody tr {
        transition: background .2s ease;
    }

    .detailsTable tbody tr:hover {
        background: #f8fafc;
    }

    .detailsTable a {
        color: #2563eb;
        font-weight: 600;
        text-decoration: none;
    }

    .detailsTable a:hover {
        color: #1d4ed8;
        text-decoration: underline;
    }

    .price-cell {
        color: #0f766e !important;
        font-weight: 700;
    }

    /* Footer Actions */
    .book-footer {
        margin-top: 28px;
        padding-top: 22px;
        border-top: 1px solid #edf0f4;
        display: flex;
        justify-content: flex-end;
    }

    .btn-back {
        min-width: 110px;
        padding: 10px 18px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        transition: all .2s ease;
    }

    .btn-back:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, .10);
    }

    /* Breadcrumb */
    .breadcrumbs-2 {
        background: #fff;
        border-bottom: 1px solid #e9edf2;
    }

    .breadcrumbs-2 .breadcrumb {
        margin: 0;
        padding: 13px 0;
        background: transparent;
        font-size: 13px;
    }

    .breadcrumbs-2 .breadcrumb-item a {
        color: #64748b;
        text-decoration: none;
    }

    .breadcrumbs-2 .breadcrumb-item a:hover {
        color: #2563eb;
    }

    .breadcrumbs-2 .breadcrumb-item.active {
        color: #172033;
        font-weight: 600;
    }

    /* Responsive */
    @media (max-width: 991.98px) {
        .book-cover-column {
            padding: 30px;
        }

        .book-detail-content {
            padding: 30px;
        }

        .book-title {
            font-size: 26px;
        }

        .bookImgBox img {
            max-height: 450px;
        }
    }

    @media (max-width: 767.98px) {
        .bookDetailPage {
            padding: 20px 0 40px;
        }

        .book-detail-card {
            border-radius: 13px !important;
        }

        .book-cover-column {
            padding: 25px 20px 30px;
        }

        .book-cover-wrapper {
            max-width: 270px;
        }

        .book-detail-content {
            padding: 25px 20px;
        }

        .book-heading-row {
            flex-direction: column;
            gap: 10px;
        }

        .book-title {
            font-size: 23px;
        }

        .class-badge {
            align-self: flex-start;
        }

        .book-price-row {
            margin: 20px 0;
        }

        .book-price {
            font-size: 26px;
        }

        .bookMeta {
            grid-template-columns: 1fr;
        }

        .series-section {
            overflow-x: auto;
        }

        .detailsTable {
            min-width: 650px;
        }

        .book-footer {
            justify-content: stretch;
        }

        .btn-back {
            width: 100%;
        }
    }

    @media (max-width: 420px) {
        .book-sub-meta span {
            font-size: 11px;
        }

        .book-price-row {
            padding: 14px;
        }

        .book-description-text {
            font-size: 13px;
        }
    }


/* --------------------------------
   KEYBOOKS PAGE
-------------------------------- */

.keybooks-hero {
    position: relative;
    overflow: hidden;
    padding: 65px 0 75px;
    background:
        linear-gradient(135deg, #172554 0%, #1e3a8a 55%, #2563eb 100%);
    color: #fff;
}

.keybooks-hero:before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    right: -130px;
    top: -180px;
}

.keybooks-hero:after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    left: -100px;
    bottom: -150px;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50px;
    background: rgba(255,255,255,.08);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.keybooks-hero h1 {
    margin: 0 0 12px;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
}

.keybooks-hero p {
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 16px;
    line-height: 1.7;
}

.hero-book-icon {
    position: relative;
    z-index: 2;
    width: 125px;
    height: 125px;
    margin-left: auto;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 20px 50px rgba(0,0,0,.15);
}

.hero-book-icon i {
    font-size: 55px;
    color: rgba(255,255,255,.92);
}


/* --------------------------------
   BREADCRUMB
-------------------------------- */

.breadcrumb-wrapper {
    background: #fff;
    border-bottom: 1px solid #e9edf3;
}

.custom-breadcrumb {
    padding: 15px 0;
    background: transparent;
    font-size: 13px;
}

.custom-breadcrumb a {
    color: #64748b;
    text-decoration: none;
    transition: .2s ease;
}

.custom-breadcrumb a:hover {
    color: #2563eb;
}

.custom-breadcrumb .active {
    color: #1e293b;
    font-weight: 600;
}


/* --------------------------------
   SECTION
-------------------------------- */

.keybooks-section {
    padding: 65px 0 80px;
}

.section-heading {
    margin-bottom: 38px;
}

.section-label {
    display: inline-block;
    margin-bottom: 9px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.section-heading h2 {
    margin: 0 0 9px;
    color: #172033;
    font-size: 30px;
    font-weight: 700;
}

.section-heading p {
    margin: 0;
    color: #718096;
    font-size: 14px;
}


/* --------------------------------
   BOOK CARD
-------------------------------- */

.keybook-card {
    position: relative;
    display: flex;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(15,23,42,.04);
    transition: all .25s ease;
}

.keybook-card:hover {
    transform: translateY(-3px);
    border-color: #d6deec;
    box-shadow: 0 15px 35px rgba(15,23,42,.09);
}


/* --------------------------------
   NUMBER
-------------------------------- */

.book-number {
    flex: 0 0 76px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
    color: #fff;
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    font-size: 22px;
    font-weight: 700;
}

.book-content {
    width: 100%;
    min-width: 0;
    padding: 25px 28px 27px;
}


/* --------------------------------
   BOOK HEADER
-------------------------------- */

.book-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.book-category {
    display: inline-block;
    margin-bottom: 6px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.book-title-wrapper h3 {
    margin: 0;
    color: #1e293b;
    font-size: 19px;
    line-height: 1.45;
    font-weight: 700;
}


/* --------------------------------
   VOLUME COUNT
-------------------------------- */

.book-count {
    flex: 0 0 auto;
    min-width: 78px;
    padding: 9px 13px;
    border: 1px solid #e4e9f0;
    border-radius: 8px;
    background: #f8fafc;
    text-align: center;
}

.book-count strong {
    display: block;
    color: #2563eb;
    font-size: 17px;
    line-height: 1.2;
}

.book-count span {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}


/* --------------------------------
   DIVIDER
-------------------------------- */

.book-divider {
    height: 1px;
    margin: 21px 0;
    background: #edf0f4;
}


/* --------------------------------
   VOLUME HEADING
-------------------------------- */

.volume-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.volume-heading span {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.volume-heading small {
    color: #94a3b8;
    font-size: 11px;
}


/* --------------------------------
   VOLUME BUTTONS
-------------------------------- */

.volume-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.volume-btn {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 11px 0 6px;
    border: 1px solid #dce3ec;
    border-radius: 7px;
    background: #fff;
    color: #334155;
    text-decoration: none !important;
    transition: all .2s ease;
}

.volume-btn:hover {
    color: #1d4ed8;
    border-color: #93c5fd;
    background: #eff6ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37,99,235,.08);
}

.volume-icon {
    width: 27px;
    height: 27px;
    margin-right: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 12px;
}

.volume-name {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.volume-arrow {
    margin-left: 9px;
    color: #94a3b8;
    font-size: 10px;
    transition: .2s ease;
}

.volume-btn:hover .volume-arrow {
    color: #2563eb;
}


/* --------------------------------
   EMPTY VOLUME
-------------------------------- */

.empty-volume {
    padding: 13px 15px;
    border: 1px dashed #d8dee8;
    border-radius: 7px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
}


/* --------------------------------
   EMPTY STATE
-------------------------------- */

.empty-state {
    max-width: 600px;
    margin: 20px auto;
    padding: 55px 25px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    box-shadow: 0 8px 25px rgba(15,23,42,.04);
}

.empty-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-size: 27px;
}

.empty-state h3 {
    margin-bottom: 8px;
    color: #1e293b;
    font-size: 20px;
    font-weight: 700;
}

.empty-state p {
    margin-bottom: 22px;
    color: #718096;
    font-size: 14px;
}


/* --------------------------------
   RESPONSIVE
-------------------------------- */

@media (max-width: 767.98px) {

    .keybooks-hero {
        padding: 45px 0 50px;
    }

    .keybooks-hero h1 {
        font-size: 31px;
    }

    .keybooks-hero p {
        font-size: 14px;
    }

    .keybooks-section {
        padding: 45px 0 55px;
    }

    .section-heading h2 {
        font-size: 25px;
    }

    .keybook-card {
        display: block;
    }

    .book-number {
        width: 100%;
        min-height: 46px;
        padding: 0;
        align-items: center;
        justify-content: flex-start;
        padding-left: 20px;
        font-size: 17px;
    }

    .book-content {
        padding: 21px 18px 22px;
    }

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

    .book-title-wrapper h3 {
        font-size: 17px;
    }

    .book-count {
        min-width: 65px;
        padding: 7px 8px;
    }

    .volume-heading {
        display: block;
    }

    .volume-heading small {
        display: block;
        margin-top: 5px;
    }

    .volume-list {
        gap: 7px;
    }

    .volume-btn {
        min-height: 36px;
    }

    .volume-name {
        font-size: 11px;
    }
}

@media (max-width: 480px) {

    .book-header {
        display: block;
    }

    .book-count {
        display: inline-block;
        margin-top: 12px;
    }

    .volume-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}


/* =========================================
   PRINT / PUBLISH PAGE
========================================= */

.print-hero {
    position: relative;
    overflow: hidden;
    padding: 68px 0 76px;
    background:
        linear-gradient(
            135deg,
            #172554 0%,
            #1e3a8a 58%,
            #2563eb 100%
        );
    color: #fff;
}

.print-hero-pattern {
    position: absolute;
    width: 520px;
    height: 520px;
    right: -180px;
    top: -280px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
}

.print-hero-pattern::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    top: 100px;
    left: 100px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 50%;
}

.print-hero-content {
    position: relative;
    z-index: 2;
}

.print-hero-label {
    display: inline-block;
    margin-bottom: 15px;
    padding: 7px 14px;

    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50px;

    background: rgba(255,255,255,.08);

    color: rgba(255,255,255,.92);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.print-hero h1 {
    margin: 0 0 13px;

    font-size: 43px;
    line-height: 1.15;
    font-weight: 700;
}

.print-hero p {
    max-width: 650px;
    margin: 0;

    color: rgba(255,255,255,.80);

    font-size: 16px;
    line-height: 1.75;
}


/* =========================================
   HERO MARK
========================================= */

.print-hero-mark {
    position: relative;
    z-index: 2;

    width: 150px;
    height: 150px;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 28px;

    background: rgba(255,255,255,.09);

    box-shadow: 0 20px 50px rgba(0,0,0,.16);
}

.print-hero-mark span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-top: 65px;
    margin-left: 14px;
    position: absolute;
    color: rgba(255,255,255,.88);
}


.print-hero-mark strong {
    margin: 3px 0;

    font-size: 25px;
    line-height: 1;

    font-weight: 400;

    color: rgba(255,255,255,.55);
}


/* =========================================
   BREADCRUMB
========================================= */

.print-breadcrumb {
    background: #fff;
    border-bottom: 1px solid #e8edf4;
}

.custom-breadcrumb {
    padding: 15px 0;

    background: transparent;

    font-size: 13px;
}

.custom-breadcrumb a {
    color: #64748b;
    text-decoration: none;

    transition: color .2s ease;
}

.custom-breadcrumb a:hover {
    color: #2563eb;
}

.custom-breadcrumb .active {
    color: #1e293b;
    font-weight: 600;
}


/* =========================================
   MAIN SECTION
========================================= */

.print-content-section {
    padding: 70px 0 80px;
}


/* =========================================
   INFORMATION CARD
========================================= */

.print-info-card {
    height: 100%;
    padding: 38px 40px;

    background: #fff;

    border: 1px solid #e4eaf2;
    border-radius: 14px;

    box-shadow: 0 8px 28px rgba(15,23,42,.05);
}

.print-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;
}

.print-section-label {
    color: #2563eb;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.print-established {
    padding: 5px 9px;

    border-radius: 5px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .8px;
}

.print-info-card h2 {
    margin: 0;

    color: #172033;

    font-size: 30px;
    line-height: 1.3;

    font-weight: 700;
    text-transform: uppercase;
}

.print-divider {
    width: 55px;
    height: 3px;

    margin: 18px 0 25px;

    background: #2563eb;
}


/* =========================================
   ADDRESS
========================================= */

.print-address {
    display: flex;
    align-items: flex-start;

    margin-bottom: 28px;
    padding: 17px;

    border: 1px solid #e6ebf2;
    border-radius: 9px;

    background: #f8fafc;
}

.print-address-mark {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    margin-right: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #2563eb;

    color: #fff;

    font-size: 10px;
    font-weight: 700;
}

.print-meta-label {
    display: block;
    margin-bottom: 4px;

    color: #64748b;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.print-address p {
    margin: 0;

    color: #263449;

    font-size: 13px;
    line-height: 1.6;
    font-weight: 600;
}


/* =========================================
   DESCRIPTION
========================================= */

.print-description p {
    margin-bottom: 17px;

    color: #667085;

    font-size: 14px;
    line-height: 1.85;
}

.print-description p:last-child {
    margin-bottom: 0;
}


/* =========================================
   HIGHLIGHTS
========================================= */

.print-highlights {
    display: flex;

    margin-top: 30px;
    padding-top: 25px;

    border-top: 1px solid #e9edf3;
}

.print-highlight {
    flex: 1;

    display: flex;
    align-items: center;

    padding-right: 18px;
}

.print-highlight + .print-highlight {
    padding-left: 18px;
    border-left: 1px solid #e5eaf1;
}

.print-highlight strong {
    margin-right: 9px;

    color: #2563eb;

    font-size: 16px;
    font-weight: 700;
}

.print-highlight span {
    color: #263449;

    font-size: 10px;
    line-height: 1.3;

    font-weight: 700;
}

.print-highlight small {
    color: #94a3b8;

    font-size: 9px;
    font-weight: 500;
}


/* =========================================
   IMAGE CARD
========================================= */

.print-image-card {
    position: relative;

    height: 100%;
    min-height: 500px;

    overflow: hidden;

    border-radius: 14px;

    background: #172033;

    box-shadow: 0 15px 40px rgba(15,23,42,.12);
}

.print-image-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;
}

.print-image-card:hover img {
    transform: scale(1.04);
}

.print-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(15,23,42,.88) 0%,
            rgba(15,23,42,.25) 48%,
            rgba(15,23,42,.02) 100%
        );
}


/* =========================================
   IMAGE CAPTION
========================================= */

.print-image-caption {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 28px;
}

.print-image-caption span {
    display: block;
    margin-bottom: 7px;

    color: rgba(255,255,255,.68);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.print-image-caption strong {
    display: block;

    color: #fff;

    font-size: 21px;
    line-height: 1.3;

    font-weight: 700;
}


/* =========================================
   IMAGE BADGE
========================================= */

.print-image-badge {
    position: absolute;

    top: 22px;
    right: 22px;

    width: 92px;
    height: 92px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 14px;

    background: rgba(23,37,84,.78);

    backdrop-filter: blur(8px);

    color: #fff;

    text-align: center;
}

.print-image-badge strong {
    font-size: 24px;
    line-height: 1;
}

.print-image-badge span {
    margin-top: 5px;

    color: rgba(255,255,255,.75);

    font-size: 8px;
    line-height: 1.35;

    font-weight: 600;
    text-transform: uppercase;
}


/* =========================================
   SERVICE STRIP
========================================= */

.print-service-strip {
    margin-top: 30px;
    padding: 28px 32px;

    border: 1px solid #e1e7ef;
    border-radius: 12px;

    background: #fff;

    box-shadow: 0 6px 22px rgba(15,23,42,.04);
}

.print-service-label {
    display: block;
    margin-bottom: 5px;

    color: #2563eb;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.print-service-strip h3 {
    margin: 0;

    color: #1e293b;

    font-size: 20px;
    line-height: 1.4;

    font-weight: 700;
}

.print-service-points {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.print-service-points span {
    display: inline-block;

    padding: 8px 12px;

    border: 1px solid #dfe7f1;
    border-radius: 6px;

    background: #f8fafc;

    color: #475569;

    font-size: 10px;
    font-weight: 600;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991.98px) {

    .print-content-section {
        padding: 55px 0 65px;
    }

    .print-info-card {
        padding: 32px;
    }

    .print-image-card {
        min-height: 450px;
    }

    .print-service-points {
        justify-content: flex-start;
    }

}


@media (max-width: 767.98px) {

    .print-hero {
        padding: 45px 0 52px;
    }

    .print-hero h1 {
        font-size: 32px;
    }

    .print-hero p {
        font-size: 14px;
        line-height: 1.65;
    }

    .print-content-section {
        padding: 45px 0 55px;
    }

    .print-info-card {
        padding: 25px 22px;
    }

    .print-info-card h2 {
        font-size: 25px;
    }

    .print-description p {
        font-size: 13px;
        line-height: 1.75;
    }

    .print-image-card {
        min-height: 390px;
    }

    .print-service-strip {
        padding: 24px 20px;
    }

    .print-service-strip h3 {
        font-size: 18px;
    }

}


@media (max-width: 480px) {

    .print-card-top {
        align-items: flex-start;
    }

    .print-established {
        font-size: 8px;
    }

    .print-info-card h2 {
        font-size: 22px;
    }

    .print-address {
        padding: 14px;
    }

    .print-address-mark {
        flex: 0 0 36px;

        width: 36px;
        height: 36px;

        margin-right: 11px;
    }

    .print-address p {
        font-size: 12px;
    }

    .print-highlights {
        display: block;
    }

    .print-highlight {
        padding: 10px 0;
    }

    .print-highlight + .print-highlight {
        padding-left: 0;

        border-left: 0;
        border-top: 1px solid #e5eaf1;
    }

    .print-image-card {
        min-height: 340px;
    }

    .print-image-caption {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    .print-image-caption strong {
        font-size: 18px;
    }

    .print-image-badge {
        width: 78px;
        height: 78px;

        top: 15px;
        right: 15px;
    }

    .print-image-badge strong {
        font-size: 20px;
    }

}

  /* =========================================================
       CLASS BOOKS PAGE
    ========================================================= */

    .class-books-page {
        min-height: 100vh;
    }

    /* =========================================================
       PAGE HEADER
    ========================================================= */

    .class-books-header {
        background: linear-gradient(135deg, #172554 0%, #1e3a8a 55%, #2563eb 100%);
        border-bottom: 1px solid #e8ebef;
    }

    .class-books-header-inner {
        padding: 62px 0 40px;
    }

    .class-books-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 9px;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .8px;
        text-transform: uppercase;
    }

    .class-books-label::before {
        content: "";
        width: 22px;
        height: 2px;
        background: #fff;
        border-radius: 5px;
    }

    .class-books-header h1 {
        margin: 0;
        color: #fff;
        font-size: 30px;
        line-height: 1.25;
        font-weight: 700;
    }

    .class-books-header p {
        max-width: 650px;
        margin: 8px 0 0;
        color: #fff;
        font-size: 14px;
        line-height: 1.7;
    }

    /* =========================================================
       BREADCRUMB
    ========================================================= */

    .class-books-breadcrumb {
        border-top: 1px solid #f0f2f5;
        background: #fff;
    }

    .class-books-breadcrumb .breadcrumb {
        margin: 0;
        padding: 12px 0;
        background: transparent;
        font-size: 12px;
    }

    .class-books-breadcrumb .breadcrumb-item a {
        color: #7d8795;
        text-decoration: none;
        transition: color .2s ease;
    }

    .class-books-breadcrumb .breadcrumb-item a:hover {
        color: #2563eb;
    }

    .class-books-breadcrumb .breadcrumb-item.active {
        color: #2563eb;
        font-weight: 600;
    }

    .class-books-breadcrumb
    .breadcrumb-item + .breadcrumb-item::before {
        color: #b9c1cc;
    }

    /* =========================================================
       CONTENT
    ========================================================= */

    .class-books-content {
        padding: 34px 0 60px;
    }

    /* =========================================================
       TOOLBAR
    ========================================================= */

    .class-books-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;

        margin-bottom: 22px;
        padding-bottom: 18px;

        border-bottom: 1px solid #e5e9ee;
    }

    .class-books-toolbar-left {
        min-width: 0;
    }

    .class-books-title {
        display: flex;
        align-items: center;
        gap: 11px;

        margin: 0;

        color: #202938;
        font-size: 20px;
        line-height: 1.4;
        font-weight: 700;
    }

    .class-books-title::before {
        content: "";
        width: 4px;
        height: 25px;
        flex: 0 0 4px;

        background: #2563eb;
        border-radius: 5px;
    }

    .class-books-subtitle {
        margin: 5px 0 0 15px;
        color: #8b94a1;
        font-size: 12px;
    }

    .class-books-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;

        padding: 8px 16px;

        background: #fff;
        border: 1px solid #dce2e9;
        border-radius: 6px;

        color: #4b5563;
        font-size: 12px;
        font-weight: 600;

        text-decoration: none !important;
        white-space: nowrap;

        transition: all .2s ease;
    }

    .class-books-back:hover {
        color: #2563eb;
        background: #f8fafc;
        border-color: #2563eb;
        transform: translateX(-2px);
    }

    /* =========================================================
       BOOK GRID
    ========================================================= */

    .class-books-grid {
        margin-left: -9px;
        margin-right: -9px;
    }

    .class-books-grid > [class*="col-"] {
        padding-left: 9px;
        padding-right: 9px;
        margin-bottom: 18px;
    }

    /* =========================================================
       BOOK CARD
    ========================================================= */

    .class-book-card {
        height: 100%;

        background: #fff;
        border: 1px solid #e4e8ed;
        border-radius: 9px;

        overflow: hidden;

        box-shadow: 0 2px 8px rgba(15, 23, 42, .025);

        transition:
            transform .25s ease,
            box-shadow .25s ease,
            border-color .25s ease;
    }

    .class-book-card:hover {
        border-color: #d4dfed;
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(15, 23, 42, .09);
    }

    .class-book-link {
        display: block;
        height: 100%;

        color: inherit;
        text-decoration: none !important;
    }

    /* =========================================================
       BOOK COVER
    ========================================================= */

    .class-book-cover {
        position: relative;
        height: 280px;

        padding: 17px;

        background: #f3f5f8;
        border-bottom: 1px solid #edf0f4;

        overflow: hidden;
    }

    .class-book-cover img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: contain;
        border-radius: 3px;

        transition: transform .35s ease;
    }

    .class-book-card:hover .class-book-cover img {
        transform: scale(1.035);
    }

    /* =========================================================
       LINK ICON
    ========================================================= */

    .class-book-link-icon {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 2;

        width: 34px;
        height: 34px;

        display: flex;
        align-items: center;
        justify-content: center;

        background: rgba(255, 255, 255, .96);
        border: 1px solid #dfe5eb;
        border-radius: 50%;

        color: #2563eb;

        box-shadow: 0 5px 14px rgba(15, 23, 42, .12);

        opacity: 0;
        transform: translateY(-5px);

        transition: all .22s ease;
    }

    .class-book-card:hover .class-book-link-icon {
        opacity: 1;
        transform: translateY(0);
    }

    .class-book-link-icon svg {
        width: 13px;
        height: 13px;
    }

    /* =========================================================
       BOOK DETAILS
    ========================================================= */

    .class-book-details {
        min-height: 142px;

        padding: 15px 16px 16px;

        display: flex;
        flex-direction: column;
    }

    .class-book-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 8px;
        margin-bottom: 9px;
    }

    .class-book-subject {
        max-width: 58%;

        margin: 0;

        color: #2563eb;

        font-size: 10px;
        line-height: 1.4;
        font-weight: 700;

        letter-spacing: .45px;
        text-transform: uppercase;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .class-book-class {
        max-width: 42%;

        margin: 0;

        color: #98a1ae;

        font-size: 10px;
        line-height: 1.4;
        font-weight: 500;

        text-align: right;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .class-book-name {
        min-height: 44px;

        margin: 0 0 13px;

        color: #202938;

        font-size: 15px;
        line-height: 1.45;
        font-weight: 700;

        transition: color .2s ease;
    }

    .class-book-card:hover .class-book-name {
        color: #2563eb;
    }

    /* =========================================================
       VIEW BUTTON
    ========================================================= */

    .class-book-button {
        width: fit-content;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        margin-top: auto;
        padding: 7px 14px;
        width:100%;

        background: #2563eb;
        border: 1px solid #2563eb;
        border-radius: 5px;

        color: #fff !important;

        font-size: 11px;
        line-height: 1.4;
        font-weight: 600;

        text-decoration: none !important;

        transition: all .2s ease;
    }

    .class-book-button:hover {
        background: #1d4ed8;
        border-color: #1d4ed8;
        transform: translateY(-1px);
    }

    /* =========================================================
       EMPTY STATE
    ========================================================= */

    .class-books-empty {
        padding: 65px 25px;

        background: #fff;
        border: 1px solid #e4e8ed;
        border-radius: 9px;

        text-align: center;
    }

    .class-books-empty-icon {
        width: 54px;
        height: 54px;

        margin: 0 auto 16px;

        display: flex;
        align-items: center;
        justify-content: center;

        background: #f1f5f9;
        border-radius: 50%;

        color: #94a3b8;
    }

    .class-books-empty-icon svg {
        width: 23px;
        height: 23px;
    }

    .class-books-empty h3 {
        margin: 0 0 6px;

        color: #374151;
        font-size: 18px;
        font-weight: 700;
    }

    .class-books-empty p {
        margin: 0;

        color: #929baa;
        font-size: 13px;
    }

    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 1199.98px) {

        .class-book-cover {
            height: 255px;
        }

    }

    @media (max-width: 991.98px) {

        .class-books-header-inner {
            padding: 28px 0 25px;
        }

        .class-books-header h1 {
            font-size: 27px;
        }

        .class-book-cover {
            height: 245px;
        }

        .class-book-details {
            min-height: 142px;
        }

    }

    @media (max-width: 767.98px) {

        .class-books-header-inner {
            padding: 24px 0 22px;
        }

        .class-books-header h1 {
            font-size: 23px;
        }

        .class-books-header p {
            font-size: 13px;
        }

        .class-books-content {
            padding: 25px 0 45px;
        }

        .class-books-toolbar {
            align-items: flex-start;
            flex-direction: column;

            gap: 13px;

            margin-bottom: 18px;
            padding-bottom: 15px;
        }

        .class-books-title {
            font-size: 18px;
        }

        .class-books-subtitle {
            margin-left: 15px;
        }

        .class-books-back {
            width: 100%;
        }

        .class-books-grid {
            margin-left: -6px;
            margin-right: -6px;
        }

        .class-books-grid > [class*="col-"] {
            padding-left: 6px;
            padding-right: 6px;
            margin-bottom: 12px;
        }

        .class-book-cover {
            height: 205px;
            padding: 11px;
        }

        .class-book-details {
            min-height: 172px;
            padding: 12px;
        }

        .class-book-name {
            min-height: 41px;
            font-size: 13px;
        }

        .class-book-subject,
        .class-book-class {
            font-size: 9px;
        }

        .class-book-link-icon {
            width: 30px;
            height: 30px;

            top: 9px;
            right: 9px;

            opacity: 1;
            transform: none;
        }

        .class-book-link-icon svg {
            width: 11px;
            height: 11px;
        }

        .class-book-button {
            width: 100%;
        }

    }

    @media (max-width: 420px) {

        .class-books-header h1 {
            font-size: 21px;
        }

        .class-book-cover {
            height: 180px;
        }

        .class-book-details {
            min-height: 160px;
            padding: 11px;
        }

        .class-book-name {
            font-size: 12px;
        }

        .class-book-subject,
        .class-book-class {
            font-size: 8px;
        }

        .class-book-button {
            padding: 6px 10px;
            font-size: 10px;
        }

    }

    /*****************SEARCH SUBJECT PAGE **************************/
.downloads-hero {
  position : relative;
  overflow : hidden;
  padding : 65px 0 75px;
  background : linear-gradient(
                135deg,
                #172554 0%,
                #1e3a8a 55%,
                #2563eb 100%);
  color : #fff;
}
  .downloads-hero : :before {
  content : "";
  position : absolute;
  width : 430px;
  height : 430px;
  right : -150px;
  top : -200px;
  border-radius : 50%;
  background : rgba(255, 255, 255, .05);
}
  .downloads-hero : :after {
  content : "";
  position : absolute;
  width : 260px;
  height : 260px;
  left : -110px;
  bottom : -170px;
  border-radius : 50%;
  background : rgba(255, 255, 255, .04);
}
.hero-content {
  position : relative;
  z-index : 2;
}
.hero-eyebrow {
  display : inline-block;
  padding : 7px 14px;
  margin-bottom : 16px;
  border : 1px solid rgba(255, 255, 255, .25);
  border-radius : 50px;
  background : rgba(255, 255, 255, .08);
  font-size : 11px;
  font-weight : 600;
  letter-spacing : 1px;
  text-transform : uppercase;
}
.downloads-hero h1 {
  margin : 0 0 12px;
  font-size : 42px;
  line-height : 1.2;
  font-weight : 700;
}
.downloads-hero p {
  max-width : 650px;
  margin : 0;
  color : rgba(255, 255, 255, .82);
  font-size : 16px;
  line-height : 1.7;
}
.subject-books-content {
  padding : 34px 0 60px;
}
.books-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #e6eaf0;
}
.books-toolbar-left {
  min-width: 0;
}
.books-toolbar-title {
  display: flex; align-items: center; gap: 11px; margin: 0; color: #202938; font-size: 20px; line-height: 1.4; font-weight: 700;
}
  .books-toolbar-title : :before {
  content: ""; width: 4px; height: 25px; flex: 0 0 4px; background: #2563eb; border-radius: 5px;
}
.books-toolbar-subtitle {
  margin: 5px 0 0 15px; color: #8a93a1; font-size: 12px;
}
.books-back-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; background: #fff; border: 1px solid #dce2e9; border-radius: 6px; color: #4b5563; font-size: 12px; font-weight: 600; text-decoration: none !important; transition: all .2s ease; white-space: nowrap;
}
  .books-back-btn : hover {
  background: #f8fafc; border-color: #2563eb; color: #2563eb; transform: translateX(-2px);
}
.books-grid {
  margin-left: -9px; margin-right: -9px;
}
.books-grid > [class*="col-"] {
  padding-left: 9px; padding-right: 9px; margin-bottom: 18px;
}
.catalog-book-card {
  position: relative; height: 100%; background: #fff; border: 1px solid #e5e9ef; border-radius: 9px; overflow: hidden; box-shadow: 0 2px 8px rgba(15, 23, 42, .025); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
  .catalog-book-card : hover {
  border-color: #d7e1ef; transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15, 23, 42, .09);
}
.catalog-book-link {
  display: block; height: 100%; color: inherit; text-decoration: none !important;
}
.catalog-book-cover {
  position: relative; height: 280px; padding: 17px; background: #f3f5f8; border-bottom: 1px solid #edf0f4; overflow: hidden;
}
  .catalog-book-cover : :after {
  content: ""; position: absolute; left: 17px; right: 17px; bottom: 0; height: 1px; background: rgba(255, 255, 255, .8);
}
.catalog-book-cover img {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 3px; transition: transform .35s ease;
}
  .catalog-book-card : hover .catalog-book-cover img {
  transform: scale(1.035);
}
.catalog-book-link-icon {
  position: absolute; z-index: 3; top: 12px; right: 12px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .96); border: 1px solid #e0e5eb; border-radius: 50%; color: #2563eb; box-shadow: 0 5px 14px rgba(15, 23, 42, .12); opacity: 0; transform: translateY(-5px); transition: all .22s ease;
}
  .catalog-book-card : hover .catalog-book-link-icon {
  opacity: 1; transform: translateY(0);
}
.catalog-book-link-icon svg {
  width: 13px; height: 13px;
}
.catalog-book-details {
  min-height: 188px; padding: 15px 16px 16px; display: flex; flex-direction: column;
}
.catalog-book-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px;
}
.catalog-book-category {
  max-width: 58%; margin: 0; color: #2563eb; font-size: 9px; line-height: 1.4; font-weight: 700; letter-spacing: .65px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.catalog-book-subject {
  max-width: 42%; margin: 0; color: #9aa3af; font-size: 10px; line-height: 1.4; font-weight: 500; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.catalog-book-title {
  min-height: 44px; margin: 0 0 10px; color: #202938; font-size: 15px; line-height: 1.45; font-weight: 700; transition: color .2s ease;
}
  .catalog-book-card : hover .catalog-book-title {
  color: #2563eb;
}
.catalog-book-range {
  min-height: 27px; margin: 0 0 13px;
}
.catalog-book-range span {
  display: inline-flex; align-items: center; padding: 4px 8px; background: #f7f8fa; border: 1px solid #e7ebef; border-radius: 4px; color: #697586; font-size: 10px; line-height: 1.3; font-weight: 600;
}
.catalog-view-btn {
  align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 100%; padding: 7px 13px; background: #2563eb; border: 1px solid #2563eb; border-radius: 5px; color: #fff !important; font-size: 11px; line-height: 1.4; font-weight: 600; text-decoration: none !important; transition: all .2s ease;
}
  .catalog-view-btn : hover {
  background: #1d4ed8; border-color: #1d4ed8; transform: translateY(-1px);
}
.books-empty {
  padding: 65px 25px; background: #fff; border: 1px solid #e5e9ef; border-radius: 9px; text-align: center;
}
.books-empty-mark {
  width: 54px; height: 54px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; border-radius: 50%; color: #94a3b8;
}
.books-empty-mark svg {
  width: 22px; height: 22px;
}
.books-empty h3 {
  margin: 0 0 6px; color: #374151; font-size: 18px; font-weight: 700;
}
.books-empty p {
  margin: 0; color: #929baa; font-size: 13px;
}
  @media (max-width: 1199.98px) {
  .catalog-book-cover{height: 250px;
}
  }@media (max-width: 991.98px) {
  .subject-books-header-inner{padding: 28px 0 25px;
}
.subject-books-header h1 {
  font-size: 27px;
}
.catalog-book-cover {
  height: 245px;
}
.catalog-book-details {
  min-height: 180px;
}
  }@media (max-width: 767.98px) {
  .subject-books-header-inner{padding: 24px 0 22px;
}
.subject-books-header h1 {
  font-size: 23px;
}
.subject-books-header p {
  font-size: 13px;
}
.subject-books-content {
  padding: 25px 0 45px;
}
.books-toolbar {
  align-items: flex-start; flex-direction: column; gap: 13px; margin-bottom: 18px; padding-bottom: 15px;
}
.books-toolbar-title {
  font-size: 18px;
}
.books-toolbar-subtitle {
  margin-left: 15px;
}
.books-back-btn {
  width: 100%; justify-content: center;
}
.books-grid {
  margin-left: -6px; margin-right: -6px;
}
.books-grid > [class*="col-"] {
  padding-left: 6px; padding-right: 6px; margin-bottom: 12px;
}
.catalog-book-cover {
  height: 205px; padding: 11px;
}
  .catalog-book-cover : :after {
  left: 11px; right: 11px;
}
.catalog-book-details {
  min-height: 176px; padding: 12px;
}
.catalog-book-title {
  min-height: 41px; font-size: 13px;
}
.catalog-book-category {
  font-size: 8px;
}
.catalog-book-subject {
  font-size: 9px;
}
.catalog-book-link-icon {
  width: 30px; height: 30px; top: 9px; right: 9px; opacity: 1; transform: none;
}
.catalog-book-link-icon svg {
  width: 11px; height: 11px;
}
.catalog-view-btn {
  width: 100%;
}
  }@media (max-width: 420px) {
  .subject-books-header h1{font-size: 21px;
}
.catalog-book-cover {
  height: 180px;
}
.catalog-book-details {
  min-height: 165px; padding: 11px;
}
.catalog-book-title {
  font-size: 12px;
}
.catalog-book-range {
  margin-bottom: 10px;
}
.catalog-view-btn {
  padding: 6px 10px; font-size : 10px;
}
  }input : :placeholder {
  color : gray;
  font-style : italic;
  font-size : 14px;
  opacity : 0.8;
}