/*======= Sub Pages Main Layourt CSS Start ======*/
        :root {
            /* Existing style variables for the rest of the layout */
            --sidebar-bg: #f7f7f7;
            --sidebar-active: #184aff;
            --sidebar-border: #e3e7f3;
            --sidebar-text: #222;
            --sidebar-hover: #e7eeff;
            --sidebar-active-bg: #fff;
            --desc-grey: #848484;
            --primary-blue: #245ce6;
            --text-base: 15px;
            --text-small: 13.7px;
            --sidebar-font: 15.4px;
            --sidebar-font-mobile: 14.2px;
            --heading-lg: 2.15rem;
            --heading-md: 1.14rem;
            --feature-li: 15px;
            --anim-duration: .75s;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            font-family: 'Poppins', Arial, sans-serif;
            background: #fff;
            color: #181a20;
            height: 100%;
            min-height: 100%;
            box-sizing: border-box;
            overflow-x: hidden;
            font-size: var(--text-base);
        }


        /* ---- SIDEBAR & MAIN CONTENT: Your Existing Styles Below ---- */
        /* MAIN LAYOUT */
        /* Layout Root: Flex for desktop, stack for mobile */
        .layout-root {
            display: flex;
            min-height: 100vh;
            background: #fff;
            /* margin-top: 56px; */
            box-sizing: border-box;
        }

        .layout-root {
            margin-top: 0 !important;
        }

        .sidebar {
            position: fixed;
            top: 56px;
            left: 0;
            height: calc(100vh - 56px);
            width: 246px;
            background: var(--sidebar-bg);
            border-right: 1.5px solid var(--sidebar-border);
            box-shadow: 0 2px 32px #0001;
            padding: 38px 0 32px 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            z-index: 0 !important;
        }

        .main-section {
            flex: 1 1 0;
            max-width: 1100px;
            min-width: 0;
            font-size: var(--text-base);
            margin-left: 246px;
            padding: 52px 40px 38px 52px;
            transition: margin-left 0.3s, padding 0.3s;
            box-sizing: border-box;
        }

        @media (max-width: 1100px) {
            .main-section {
                padding: 32px 10px 16px 18px;
            }

            .sidebar {
                width: 175px;
            }

            .main-section {
                margin-left: 175px;
            }
        }

        @media (max-width: 900px) {
            .layout-root {
                display: block;
                margin-top: 56px;
            }

            .sidebar {
                display: none !important;
            }

            .main-section {
                margin-left: 0 !important;
                padding: 18px 2vw 8vw 2vw !important;
                max-width: 99vw;
            }
        }

        @media (max-width: 600px) {
            .main-section {
                padding: 8vw 3vw 9vw 3vw !important;
            }
        }

        /* --- END SIDEBAR RESPONSIVENESS --- */

        /* PRODUCT MAIN IMAGE — INCREASED HEIGHT, RESPONSIVE */
        .product-main-img {
            width: 100%;
            border-radius: 0;
            margin-bottom: 18px;
            /* background: #e6eefa; */
            object-fit: cover;
            aspect-ratio: 16/7;
            max-height: 430px;
            min-height: 210px;
            display: block;
            opacity: 0;
            transform: scale(.97) translateY(40px);
            transition: all var(--anim-duration) cubic-bezier(.22, .67, .23, 1.11);
        }

        .product-main-img.in-view {
            opacity: 1;
            transform: scale(1) translateY(0);
        }

        @media (max-width: 900px) {
            .product-main-img {
                min-height: 160px;
                max-height: 230px;
                aspect-ratio: 16/10;
            }
        }

        /* code for changing the height of the image  */
        @media (max-width: 600px) {
            .product-main-img {
                min-height: 180px;
                max-height: 220px;
                aspect-ratio: 16/10;
            }
        }

        /* MAIN SECTION AND REST UNCHANGED */
        .main-section {
            flex: 1 1 0;
            padding: 52px 40px 38px 52px;
            max-width: 1100px;
            min-width: 0;
            font-size: var(--text-base);
        }

        .back-link {
            display: flex;
            align-items: center;
            gap: 7px;
            color: #555e6a;
            font-size: var(--text-small);
            font-weight: 400;
            text-decoration: none;
            margin-bottom: 15px;
            margin-top: 0;
            transition: color 0.14s;
            cursor: pointer;
            user-select: none;
            letter-spacing: 0.01em;
            opacity: 0;
            transform: translateY(-30px);
            transition: all var(--anim-duration) cubic-bezier(.17, .67, .23, 1.11);
        }

        .back-link.in-view {
            opacity: 1;
            transform: translateY(0);
        }

        .page-title {
            font-size: var(--heading-lg);
            font-weight: 700;
            margin: 0 0 18px 0;
            font-family: 'Poppins', Arial, sans-serif;
            display: flex;
            align-items: center;
            gap: 0.18em;
            line-height: 1.18;
            letter-spacing: -0.005em;
            opacity: 0;
            transform: translateY(-25px) scale(.98);
            transition: all var(--anim-duration) cubic-bezier(.17, .67, .23, 1.11);
        }

        .page-title.in-view {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .page-title .divider {
            color: #232323;
            font-weight: 400;
            margin: 0 0.17em;
            font-size: 1.03em;
            letter-spacing: 0;
        }

        .desc-lead {
            text-align: justify;
            font-size: var(--text-base);
            /* color: var(--desc-grey); */
            color:#464444;
            margin-bottom: 0;
            margin-top: 2px;
            font-weight: 400;
            max-width: 940px;
            line-height: 1.56;
            opacity: 0;
            transform: translateX(-42px);
            transition: all var(--anim-duration) cubic-bezier(.22, .67, .23, 1.11);
            font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

        }

        .desc-lead.in-view {
            opacity: 1;
            transform: translateX(0);
        }

        .key-features-section {
            /* margin-top: 10px; */
            font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            margin-bottom: 10px;
            opacity: 0;
            transform: translateY(40px) scale(.96);
            transition: all var(--anim-duration) cubic-bezier(.21, .64, .19, 1.1);
        }

        .key-features-section.in-view {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .key-features-title {
            font-size: var(--heading-md);
            font-weight: 700;
            color: #232323;
            margin-bottom: 16px;
            letter-spacing: 0.01em;
        }

        .feature-list {
            padding-left: 18px;
            margin-top: 0;
            margin-bottom: 30px;
            font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

        }

        .feature-list li {
            font-size: var(--feature-li);
            color: #3e3e3e;
            margin-bottom: 5px;
            line-height: 1.6;
            font-weight: 400;
            letter-spacing: 0.02em;
            max-width: 820px;
            font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        }

        .feature-actions {
            display: flex;
            gap: 23px;
            margin-top: 20px;
            margin-bottom: 5px;
            flex-wrap: wrap;
        }

        .feature-btn {
            background: #245ce6;
            color: #fff;
            font-family: 'Poppins', Arial, sans-serif;
            font-size: var(--text-base);
            font-weight: 600;
            border: none;
            border-radius: 2.5px;
            padding: 12px 32px;
            cursor: pointer;
            transition: background .13s, box-shadow .12s;
            box-shadow: 0 2px 12px #e8eefa22;
            letter-spacing: 0.01em;
            display: flex;
            align-items: center;
            gap: 8px;
            text-align: center;
            text-decoration:none;
            display: inline-block;  /* Ensures proper button behavior */
        }

        .feature-btn:active,
        .feature-btn:focus {
            outline: none;
        }

        .feature-btn:hover {
            background: #184aff;
        }

        .feature-btn.secondary {
            background: #fff;
            color: #245ce6;
            border: 2px solid #245ce6;
            box-shadow: none;
            font-weight: 600;
        }

        .feature-btn.secondary:hover {
            background: #e8f0ff;
            color: #184aff;
            border-color: #184aff;
        }

/* --- MOBILE FIX: keep buttons side-by-side --- */
@media (max-width: 768px) {
  .feature-actions {
    flex-direction: row;      /* stay side by side */
    justify-content: center;  /* center horizontally */
    align-items: center;
    gap: 14px;                /* even spacing between them */
    flex-wrap: nowrap;        /* prevent stacking */
  }

  .feature-btn {
    flex: 1 1 auto;
    min-width: 150px;         /* keep both uniform width */
    padding: 8px 14px;       /* balanced height and spacing */
    text-align: center;
  }

        .feature-btn.secondary {
            background: #fff;
            color: #245ce6;
            border: 2px solid #245ce6;
            box-shadow: none;
            font-weight: 600;
        }
}


        .see-action-section {
            margin-top: 48px;
            margin-bottom: 0;
            width: 100%;
            opacity: 0;
            transform: translateY(44px) scale(.94);
            transition: all var(--anim-duration) cubic-bezier(.22, .65, .16, 1.07);
        }

        .see-action-section.in-view {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .see-action-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: #181a20;
            margin-bottom: 18px;
            margin-left: 0;
            margin-top: 0;
            font-family: 'Poppins', Arial, sans-serif;
            letter-spacing: 0;
        }

        .see-action-video-wrap {
            width: 100%;
            background: transparent;
            border-radius: 0;
            min-height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin-bottom: 10px;
            box-sizing: border-box;
            max-width: 740px;
            margin-left: auto;
            margin-right: auto;
            aspect-ratio: 16/8;
        }

        .see-action-video-iframe {
            width: 74vw;
            max-width: 730px;
            min-width: 210px;
            min-height: 180px;
            aspect-ratio: 16 / 8;
            max-height: 350px;
            border: none;
            background: #ececec;
            display: block;
            border-radius: 0;
            z-index: 2;
        }

        .see-action-video-desc {
            position: absolute;
            left: 0;
            right: 0;
            top: 22%;
            text-align: center;
            color: #222;
            font-size: 15.1px;
            font-weight: 500;
            pointer-events: none;
            z-index: 2;
        }

        .related-products-section {
            margin-top: 60px;
            width: 100%;
            padding: 0;
            background: transparent;
            opacity: 0;
            transform: translateY(55px) scale(.97);
            transition: all 1.15s cubic-bezier(.22, .67, .23, 1.11);
        }

        .related-products-section.in-view {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .related-products-title-wrap {
            text-align: center;
            margin-bottom: 36px;
            margin-top: 10px;
        }

        .related-products-title {
            font-size: 1.8rem;
            font-weight: 700;
            letter-spacing: 0;
            color: #181a20;
            margin: 0 auto 10px auto;
            font-family: 'Poppins', Arial, sans-serif;
            position: relative;
            display: inline-block;
            z-index: 1;
        }

        .related-products-title:after {
            content: '';
            display: block;
            margin: 13px auto 0 auto;
            width: 45px;
            height: 6px;
            border-radius: 3px;
            background: #245ce6;
            opacity: 1;
        }

        .related-products-list {
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 26px;
            margin: 0 auto;
            flex-wrap: nowrap;
            box-sizing: border-box;
        }

        .related-product-card {
            position: relative;
            width: 410px;
            height: 390px;
            background: #f6f8fc;
            box-shadow: 0 5px 30px #1313130c;
            border-radius: 0;
            overflow: hidden;
            transition: box-shadow 0.21s, transform 0.23s cubic-bezier(.17, .67, .23, 1.11);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            animation: cardFadeIn 1.2s cubic-bezier(.24, .83, .45, 1.08);
        }

        .related-product-card:hover {
            box-shadow: 0 10px 38px #181a2022;
            transform: translateY(-7px) scale(1.017);
        }

        @keyframes cardFadeIn {
            from {
                opacity: 0;
                transform: translateY(40px) scale(.97);
            }

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

        .related-product-img {
            width: 100%;
            height: 315px;
            object-fit: cover;
            border-radius: 0;
            background: #f0f1f7;
            display: block;
            box-shadow: none;
        }

        .related-product-info {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 72%;
            min-width: 260px;
            max-width: 300px;
            background: rgba(255, 255, 255, 0.78);
            box-shadow: 0 8px 32px #002c5015;
            border-radius: 0;
            padding: 28px 22px 26px 24px;
            z-index: 2;
            display: flex;
            flex-direction: column;
            gap: 9px;
            text-align: left;
            margin: 0 0 24px 30px;
        }

        .related-product-title {
            font-weight: 700;
            font-size: 1.16rem;
            margin-bottom: 5px;
            margin-top: 0;
            color: #181a20;
            font-family: 'Poppins', Arial, sans-serif;
        }

        .related-product-desc {
            font-size: 1.01rem;
            font-weight: 400;
            color: #444950;
            line-height: 1.58;
            margin-bottom: 0;
            margin-top: 0;
            font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
        }

        .related-product-arrow {
            position: absolute;
            bottom: 0;
            right: 0;
            background: #2469ec;
            color: #fff;
            width: 48px;
            height: 48px;
            border-radius: 9px 0 0 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.1rem;
            font-weight: 600;
            box-shadow: 0 2px 12px #245ce63a;
            cursor: pointer;
            border: none;
            outline: none;
            z-index: 10;
            transition: background 0.17s;
        }

        .related-product-arrow:hover,
        .related-product-arrow:focus {
            background: #003bb8;
        }

        @media (max-width: 1200px) {
            .related-products-list {
                gap: 14px;
            }

            .related-product-card {
                width: 340px;
                height: 325px;
            }

            .related-product-img {
                height: 245px;
            }

            .related-products-title {
                font-size: 2rem;
            }
        }

        @media (max-width: 900px) {
            .related-products-list {
                flex-wrap: wrap;
                gap: 13px;
            }

            .related-product-card {
                width: 88vw;
                min-width: 0;
                max-width: 98vw;
                height: 320px;
            }

            .related-product-info {
                margin: 0 0 15px 13px;
                max-width: 89vw;
            }

            .related-product-img {
                height: 170px;
            }
        }

        @media (max-width: 650px) {
            .related-products-section {
                margin-top: 18px;
            }

            .related-products-title {
                font-size: 1.23rem;
            }

            .related-products-list {
                flex-direction: column;
                gap: 11px;
            }

            .related-product-card {
                width: 100vw;
                min-width: 0;
                max-width: 99vw;
                height: 268px;
            }

            .related-product-info {
                left: 0;
                right: 0;
                margin-left: 5vw;
                max-width: 95vw;
                padding: 14px 11px;
            }

            .related-product-img {
                height: 108px;
            }

            .related-product-arrow {
                width: 38px;
                height: 38px;
                font-size: 1.18rem;
            }
        }

        @media (max-width: 1200px) {
            .main-section {
                padding: 35px 13px 16px 18px;
            }

            .sidebar {
                width: 175px;
            }

            .cat-link {
                font-size: 15px;
            }

            .page-title {
                font-size: 1.65rem;
            }

            .key-features-title {
                font-size: 1.07rem;
            }

            .see-action-title {
                font-size: 1.46rem;
            }

            .see-action-video-wrap {
                min-height: 110px;
            }

            .see-action-video-iframe {
                min-height: 110px;
            }
        }

        @media (max-width: 900px) {
            .see-action-title {
                font-size: 1.22rem;
            }

            .see-action-video-iframe {
                min-height: 90px;
            }

            .see-action-video-desc {
                font-size: 13px;
            }

            .main-section {
                padding: 16px 2vw 15vw 2vw;
            }

            .see-action-section {
                margin-top: 30px;
            }

            .see-action-video-wrap {
                max-width: 98vw;
            }
        }

        @media (max-width: 600px) {
            .see-action-title {
                font-size: 1.01rem;
            }

            .see-action-video-wrap {
                min-height: 60px;
                max-width: 99vw;
            }

            .see-action-video-iframe {
                min-height: 60px;
                max-width: 99vw;
            }

            .main-section {
                padding: 8vw 4vw 9vw 4vw;
            }

            .see-action-section {
                margin-top: 18px;
            }
        }

        /* side menu bar code css */
        /* Sidebar menu (desktop) */
        .sidebar {
            width: 246px;
            background: var(--sidebar-bg);
            border-right: 1.5px solid var(--sidebar-border);
            box-shadow: 0 2px 32px #0001;
            padding: 38px 0 32px 0;
            min-height: calc(100vh - 56px);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .sidebar h2 {
            font-size: var(--heading-md);
            font-weight: 700;
            padding-left: 28px;
            margin: 0 0 23px 0;
            letter-spacing: 0.01em;
        }

        .cat-list {
            width: 100%;
            list-style: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .cat-item {
            margin-bottom: 3px;
            width: 100%;
            overflow: hidden;
        }

        .cat-link {
            font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            display: block;
            font-size: var(--sidebar-font);
            color: var(--sidebar-text);
            font-weight: 500;
            padding: 10px 0 10px 28px;
            width: 100%;
            background: none;
            border: none;
            outline: none;
            cursor: pointer;
            border-left: 4px solid transparent;
            border-radius: 0 8px 8px 0;
            text-align: left;
            transition: background .12s, color .12s, border .11s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-decoration: none;
            box-sizing: border-box;
            max-width: 96%;
        }

        .cat-link.active,
        .cat-link:focus {
            background: var(--sidebar-active-bg);
            color: var(--sidebar-active);
            border-left: 4px solid var(--sidebar-active);
            font-weight: 700;
            box-shadow: 0 1px 12px #e7eaff17;
        }

        .cat-link:hover:not(.active) {
            color: var(--sidebar-active);
            background: var(--sidebar-hover);
            border-left: 4px solid #b7cefa;
            text-decoration: none;
        }

        /* Responsive switching */
        @media (max-width: 900px) {
            .sidebar {
                display: none !important;
            }

            .sidebar-drawer {
                display: flex !important;
            }
        }

        @media (min-width: 901px) {
            .sidebar-drawer {
                display: none !important;
            }
        }

        .mobile-categories {
            display: none;
            background: #fff;
            padding: 18px 0 0 0;
            margin-bottom: 16px;
        }

        @media (max-width: 900px) {
            .mobile-categories {
                display: block;
            }

            .main-section .mobile-categories ul.cat-list {
                padding-left: 0;
            }
        }

        /* Hide sidebar completely on mobile */
        @media (max-width: 900px) {
            .sidebar {
                display: none !important;
            }
        }

        @media (min-width: 901px) {
            .mobile-categories {
                display: none !important;
            }
        }

        /* video code for responsiveness  */
        @media (max-width: 600px) {

            .see-action-video-wrap,
            .see-action-video-iframe {
                min-height: 120px;
                aspect-ratio: 16/9;
                max-width: 100vw;
            }
        }

        @media (max-width: 600px) {
            .related-products-list {
                flex-direction: column;
                gap: 14px;
                align-items: center;
                padding: 0;
            }

            .related-product-card {
                width: 96vw;
                max-width: 400px;
                min-width: 0;
                height: 380px;
                /* Set a fixed height for card */
                margin: 0 auto;
                overflow: visible;
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
            }

            .related-product-img {
                height: 280px;
                width: 100%;
                object-fit: cover;
                border-radius: 0;
                display: block;
            }

            .related-product-info {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 77%;
                min-width: 170px;
                max-width: 89vw;
                background: #fff;
                box-shadow: 0 8px 32px #002c5015;
                border-radius: 0;
                padding: 12px 10px 11px 14px;
                z-index: 2;
                margin: 0 0 12px 10px;
                font-size: 0.97rem;
            }

            .related-product-arrow {
                position: absolute;
                bottom: 0;
                right: 0;
                width: 38px;
                height: 38px;
                font-size: 1.18rem;
                border-radius: 9px 0 0 0;
                z-index: 10;
                margin: 0;
            }
        }

        /* box visibleness for the related videos section  */
        /* for reducing gap in mobile view above categories  */
        /* Tighten space above Categories on mobile */
        @media (max-width: 900px) {

            /* reduce the main content top padding */
            .main-section {
                padding-top: 6px !important;
                /* was 18px / 8vw */
            }

            /* remove extra padding/margin on the Categories wrapper */
            .mobile-categories {
                padding-top: 4px;
                /* was 18px */
                margin-top: 0;
            }

            /* kill the default big top margin on the H2 */
            .mobile-categories h2 {
                margin-top: 4px;
                /* was browser default ~20px */
                margin-bottom: 10px;
            }

            /* guard against any first-child margin collapse adding space */
            .main-section>*:first-child {
                margin-top: 0;
            }
        }

        /* color hover ovverriding */
        /* Fix mobile menu hover turning white */
        @media (max-width: 900px) {

            .mobile-menu-link:hover,
            .mobile-menu-link:focus {
                background: #005187 !important;
                /* pick your blue */
                border-color: #005187 !important;
                color: #fff !important;
            }
        }

        /* === RESPONSIVE LAYOUT IMPROVEMENTS === */

        /* Limit max width and center main layout */
        .layout-root {
            max-width: 1400px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            min-height: 100vh;
            background: #fff;
            margin-top: 56px;
            /* maintain navbar offset */
            box-sizing: border-box;
            gap: 40px;
            /* space between sidebar and main */
            padding-left: 20px;
            /* small horizontal padding */
            padding-right: 20px;
        }

        /* Sidebar: fixed width, sticky */
        .sidebar {
            position: sticky;
            /* stick with scroll */
            top: 56px;
            /* below navbar */
            height: calc(100vh - 56px);
            width: 246px;
            /* fixed width desktop */
            background: var(--sidebar-bg);
            border-right: 1.5px solid var(--sidebar-border);
            box-shadow: 0 2px 32px #0001;
            padding: 38px 0 32px 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            z-index: 1030;
        }

        /* Main content: take remaining width, margin left for sidebar */
        .main-section {
            flex: 1 1 0;
            max-width: calc(100% - 286px);
            /* 246 + 40 gap */
            min-width: 0;
            font-size: var(--text-base);
            padding: 52px 40px 38px 52px;
            box-sizing: border-box;
            margin-left: 0;
            /* sidebar and gap handled by flex + gap */
            transition: padding 0.3s ease;
        }

        /* Responsive breakpoint adjustments */

        /* Medium screens */
        @media (max-width: 1100px) {
            .sidebar {
                width: 175px;
            }

            .main-section {
                max-width: calc(100% - 215px);
                /* 175 + 40 gap */
                padding: 32px 10px 16px 18px;
            }
        }

        /* Small screens */
        @media (max-width: 900px) {
            .layout-root {
                display: block;
                max-width: 100%;
                margin-left: 0;
                margin-right: 0;
                padding-left: 0;
                padding-right: 0;
            }

            .sidebar {
                display: none !important;
                /* hide sidebar */
            }

            .main-section {
                max-width: 100% !important;
                margin-left: 0 !important;
                padding: 18px 2vw 8vw 2vw !important;
            }

            .mobile-categories {
                display: block !important;
            }
        }

        /* Extra small screens */
        @media (max-width: 600px) {
            .main-section {
                padding: 8vw 3vw 9vw 3vw !important;
            }
        }

        /* Ensure product images and videos scale well */
        .product-main-img {
            max-width: 100%;
            height: auto;
            object-fit: cover;
        }

        /* Responsive image heights */
        @media (max-width: 900px) {
            .product-main-img {
                max-height: 230px;
                min-height: 160px;
            }
        }

        @media (max-width: 600px) {
            .product-main-img {
                max-height: 220px;
                min-height: 180px;
            }
        }

        /* Fix sidebar heading font size on smaller screens */
        @media (max-width: 1200px) {
            .sidebar h2 {
                font-size: 1.3rem;
            }

            .cat-link {
                font-size: 15px;
            }
        }

        /* Adjust related product cards container on small screens */
        @media (max-width: 650px) {
            .related-products-list {
                flex-direction: column;
                gap: 12px;
                align-items: center;
                padding: 0;
            }

            .related-product-card {
                width: 96vw;
                max-width: 400px;
            }
        }

        /* Smooth scroll behavior for anchor navigation */
        html {
            scroll-behavior: smooth;
        }

        /* ===== CUSTOM SOLUTIONS CALLOUT ===== */
        .custom-solutions {
            width: 100%;
            display: flex;
            justify-content: center;
            box-sizing: border-box;
            padding: 32px 0 40px 0;
            /* outer breathing room vs other sections */
        }

        .cs-wrap {
            width: 94%;
            max-width: 1080px;
            margin: 0 auto;
            background: #f3f7ff;
            /* soft blue like screenshot */
            border-radius: 6px;
            padding: 32px 24px 36px 24px;
            text-align: center;
            box-shadow: 0 6px 28px rgba(8, 28, 72, 0.06);
        }

        .cs-title {
            font-family: 'Poppins', Arial, sans-serif;
            font-weight: 700;
            font-size: 1.32rem;
            color: #0f1320;
            margin: 0 0 12px 0;
            letter-spacing: 0.01em;
        }

        .cs-desc {
            font-family: 'Poppins', Arial, sans-serif;
            font-weight: 400;
            font-size: 0.98rem;
            line-height: 1.65;
            color: #495160;
            margin: 0 0 22px 0;
            max-width: 780px;
            margin-left: auto;
            margin-right: auto;
        }

        /* CTA Button */
        .cs-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: 'Poppins', Arial, sans-serif;
            font-weight: 700;
            font-size: 0.98rem;
            text-decoration: none;
            color: #ffffff;
            background: #2255e6;
            /* main blue */
            border: 0;
            border-radius: 3px;
            padding: 12px 22px;
            box-shadow: 0 8px 24px rgba(34, 85, 230, 0.22);
            transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
        }

        .cs-btn:hover,
        .cs-btn:focus {
            background: #0f3fd9;
            /* hover blue */
            box-shadow: 0 10px 26px rgba(15, 63, 217, 0.28);
            transform: translateY(-1px);
            outline: none;
        }

        .cs-btn:active {
            transform: translateY(0);
        }

        .cs-arrow {
            font-size: 1.05em;
            line-height: 1;
        }

        /* Responsive tweaks for consistency with your breakpoints */
        @media (max-width: 1200px) {
            .cs-title {
                font-size: 1.2rem;
            }
        }

        @media (max-width: 900px) {
            .custom-solutions {
                padding: 22px 0 28px 0;
            }

            .cs-wrap {
                width: 96%;
                padding: 24px 16px 28px 16px;
            }

            .cs-desc {
                font-size: 0.95rem;
            }
        }

        @media (max-width: 600px) {
            .cs-title {
                font-size: 1.06rem;
            }

            .cs-desc {
                font-size: 0.93rem;
            }

            .cs-btn {
                font-size: 0.94rem;
                padding: 11px 18px;
            }
        }

        .heading1{
            font-size: 28px;
            color: #000000;
        }

        /* ===== END CUSTOM SOLUTIONS CALLOUT ===== */

        /* ======Images Zoom Effect ======*/
          *, *::before, *::after { box-sizing: border-box; }
    .gallery-wrap { max-width: 1200px; margin: 24px auto; padding: 0 16px; }
    .gallery {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      justify-items: center; /* centers smaller tiles */
    }
    @media (min-width:600px){ .gallery{ grid-template-columns: repeat(2,1fr);} }
    @media (min-width:900px){ .gallery{ grid-template-columns: repeat(3,1fr);} }

    .tile{
      position: relative;
      width: 100%;
      max-width: 250px;   /* smaller tiles */
      aspect-ratio: 1/1;
      overflow: hidden;
      background:#eaeaea;
      box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }
    .tile img{
      width:100%; height:100%; object-fit:cover; display:block;
      transition: transform .3s ease;
      cursor: zoom-in;
    }
    @media (hover:hover) and (pointer:fine){
      .tile:hover img{ transform: scale(1.02); }
    }

    /* ===== Lightbox ===== */
    .lightbox {
      position: fixed; inset: 0;
      display: none;
      align-items: center; justify-content: center;
      padding: max(4vw, 16px);
      background: rgba(0,0,0,.7);   /* backdrop only behind the panel */
      z-index: 9999;
      overscroll-behavior: contain;
    }
    .lightbox.open { display: flex; }

    /* White panel so the image never sits on black */
    .lightbox__panel{
      background: #fff;
      max-width: min(92vw, 1200px);
      max-height: 90vh;
      overflow: auto;         /* if image is tall, you can scroll inside */
      box-shadow: 0 12px 40px rgba(0,0,0,.45);
      position: relative;
    }
    .lightbox__img{
      display:block;
      width: 100%;            /* scale to panel width */
      height: auto;
      object-fit: contain;    /* never crop in the lightbox */
      background:#fff;        /* prevents any dark edges */
      cursor: zoom-out;
    }

    /* Close button */
    .lightbox__close{
      position:absolute; top:8px; right:8px;
      border:0; background:#000; color:#fff; width:36px; height:36px;
      font-size:20px; line-height:36px; text-align:center; cursor:pointer;
      opacity:.85;
    }
    .lightbox__close:focus{ outline:2px solid #1976d2; outline-offset:2px; }

    .card-arrow{
        text-decoration: none;
        color: #fff;
    }


   /*=========== Products sidebar scrolling CSS =============*/
    /* <-- THIS is the independent scroller */
        .cat-list {
            flex: 1 1 auto;
            max-height: calc(100vh - 110px);
            /* 100vh minus the header/padding in sidebar */
            overflow-y: auto;
            overscroll-behavior: contain;
            /* stop scroll chaining to the page */
            -webkit-overflow-scrolling: touch;
        }

        .sidebar h2 {
            flex: 0 0 auto;
        }

        /* Mobile: sidebar becomes a top block; keep list scrollable */
        @media (max-width: 900px) {
            .sidebar {
                overflow: visible;
            }

            /* page scrolls naturally */
            .cat-list {
                max-height: 42vh;
                /* your existing intent */
                min-height: 0;
                overflow-y: auto;
            }
        }

        /* ===== Mobile: page scrolls everything together ===== */
        @media (max-width: 900px) {
            .sidebar {
                position: static;
                /* not sticky */
                top: auto;
                height: auto;
                max-height: none;
                overflow: visible;
                /* sidebar itself doesn't scroll */
            }

            /* the list also stops being its own scroller */
            .cat-list {
                max-height: none !important;
                min-height: 0;
                overflow: visible !important;
                -webkit-overflow-scrolling: auto;
                padding-bottom: 0;
            }
        }        


/* =========Sidebar minimise======== */

   /* Only minimal, isolated styles for mobile accordion */
    @media (max-width: 768px) {
      .ssm-acc-wrap {
        border-radius: 8px;
        background: #f6f7fb;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        margin-bottom: 16px;
      }

      .ssm-acc-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        background: #ffffff;
        border: none;
        cursor: pointer;
        font-family: 'Poppins', Arial, sans-serif;
        font-weight: 600;
        font-size: 16px;
        color: #111827;
      }

      .ssm-acc-trigger:focus {
        outline: 2px solid #245ce6;
        outline-offset: 2px;
      }

      .ssm-acc-arrow {
        display: inline-flex;
        width: 20px;
        height: 20px;
        align-items: center;
        justify-content: center;
        transition: transform 0.18s ease;
        user-select: none;
      }

      .ssm-acc-trigger[aria-expanded="true"] .ssm-acc-arrow {
        transform: rotate(180deg);
      }

      .ssm-acc-panel {
        display: none;
        padding: 6px 8px 10px 8px;
        background: #ffffff;
      }

      .ssm-acc-panel.ssm-open {
        display: block;
      }

      /* Make list look clean on mobile */
      .ssm-acc-panel .cat-list {
        list-style: none;
        margin: 0;
        padding: 6px 6px 10px 6px;
      }

      .ssm-acc-panel .cat-item + .cat-item {
        margin-top: 2px;
      }

      .ssm-acc-panel .cat-link {
        display: block;
        padding: 10px 10px;
        border-radius: 6px;
        text-decoration: none; /* keep links clean */
        color: #111827;
        font-family: 'Inter', Arial, sans-serif;
        font-weight: 500;
        background: #f8fafc;
      }

      .ssm-acc-panel .cat-link.active {
        background: #eaf0ff;
        color: #245ce6;
        font-weight: 600;
      }

      /* Hide original sidebar title on mobile (we inject our trigger) */
      .sidebar h2,
      .mobile-categories > h2 {
        display: none;
      }
    }