* {
    box-sizing: border-box;
}


/*=========================================================== 
    web master page style
=============================================================*/

        /* ============ New Navbar (special_) — FULL CORRECTED STYLE ============ */
        :root {
            --special_blue: #D2241D;
            --special_blue-dark: #D2241D;
            --special_text-dark: #0b0b0f;
        }

        .special_navbar-wrap {
            position: sticky;
            top: 0;
            z-index: 1000;
            display: flex;
            justify-content: center;
            padding: 0;
            background: #fff;
            transition: padding 0.35s ease, background 0.35s ease;
        }

        .special_navbar-wrap.special_at-top {
            padding: 16px 20px 0 20px;
            background: transparent;
        }

        .special_navbar-wrap:not(.special_at-top) {
            padding: 0;
            background: #fff;
        }

        .special_navbar {
            width: 100%;
            max-width: 1400px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fff;
            border-radius: 0;
            box-shadow: 0 2px 12px rgba(20, 30, 60, 0.08);
            padding: 14px 40px;
            transition: padding 0.35s ease, box-shadow 0.35s ease, border-radius 0.35s ease, max-width 0.35s ease;
            position: relative;
        }

        .special_navbar-wrap.special_at-top .special_navbar {
            max-width: 1400px;
            border-radius: 100px;
            padding: 10px 32px;
            box-shadow: 0 6px 24px rgba(20, 30, 60, 0.12);
        }

        .special_logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            font-size: 19px;
            color: var(--special_text-dark);
            white-space: nowrap;
        }

        .special_logo img {
            display: block;
            height: 30px;
            width: auto;
            transition: height 0.35s ease;
        }

        .special_navbar-wrap.special_at-top .special_logo img {
            height: 36px;
        }

        .special_nav-links {
            display: flex;
            align-items: center;
            gap: 26px;
            list-style: none;
        }

        .special_nav-links>li {
            position: relative;
        }

        .special_nav-links a {
            text-decoration: none;
            color: var(--special_text-dark);
            font-weight: 600;
            font-size: 15px;
            display: flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
            transition: color 0.2s ease;
        }

        .special_nav-links a:hover {
            color: var(--special_blue);
        }

        .special_nav-links a.special_current {
            color: var(--special_blue);
        }

        .special_chevron {
            width: 8px;
            height: 8px;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: rotate(45deg);
            margin-top: -3px;
            flex-shrink: 0;
        }

        /* ---- Hover-gap fix: extend the dropdown's own hover box down into the gap ---- */
        .special_dropdown {
            padding-bottom: 12px;
            margin-bottom: -12px;
        }

        /* Dropdown submenus (About Us / Services / Case Study / Resources) */
        .special_dropdown>.special_submenu {
            display: none;
            position: absolute;
            top: calc(100% + 12px);
            left: 0;
            margin-top: 0;
            min-width: 240px;
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 12px 30px rgba(20, 30, 60, 0.14);
            padding: 10px;
            list-style: none;
            z-index: 120;
        }

        .special_dropdown:hover>.special_submenu {
            display: block;
        }

        .special_submenu li a {
            display: block;
            padding: 9px 12px;
            font-size: 14px;
            font-weight: 500;
            border-radius: 8px;
            color: var(--special_text-dark);
        }

        .special_submenu li a:hover {
            background: #FDECEB;
            color: var(--special_blue);
        }

        .special_submenu-nested {
            list-style: none;
            padding-left: 14px;
            margin: 2px 0 6px;
        }

        /* ============ Mega Menu (Services / What We Offer) — desktop only ============ */
        .special_megamenu {
            display: none;
        }

        @media (min-width: 861px) {
            .special_dropdown.special_has-mega:hover>.special_submenu {
                display: none !important;
            }

            .special_dropdown.special_has-mega:hover>.special_megamenu {
                display: flex;
            }

            .special_dropdown.special_hover-open>.special_submenu {
                display: block !important;
            }

            .special_dropdown.special_has-mega.special_hover-open>.special_submenu {
                display: none !important;
            }

            .special_dropdown.special_has-mega.special_hover-open>.special_megamenu {
                display: flex !important;
            }

            .special_megamenu {
                position: fixed;
                /* was: absolute */
                top: 0;
                /* JS দিয়ে dynamically সেট হবে */
                left: 0;
                /* JS দিয়ে dynamically সেট হবে */
                width: auto;
                /* JS দিয়ে dynamically সেট হবে (navbar-এর সমান) */
                margin-top: 0;
                background: #fff;
                border-radius: 16px;
                box-shadow: 0 12px 30px rgba(20, 30, 60, 0.14);
                overflow: hidden;
                z-index: 120;
            }

            .special_megamenu-left {
                width: max-content;
                min-width: 240px;
                max-width: 320px;
                flex-shrink: 0;
                background: #f7f9fc;
                padding: 10px;
                max-height: 420px;
                overflow-y: auto;
            }

            .special_megamenu-left ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            .special_megamenu-item {
                border-radius: 10px;
                transition: background 0.2s ease;
            }

            .special_megamenu-item>a {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                padding: 11px 14px;
                font-size: 14.5px;
                font-weight: 700;
                color: var(--special_text-dark);
                border-radius: 10px;
                white-space: normal;
                word-break: break-word;
            }

            .special_megamenu-item>a::after {
                content: '';
                width: 6px;
                height: 6px;
                border-right: 2px solid currentColor;
                border-bottom: 2px solid currentColor;
                transform: rotate(-45deg);
                opacity: 0.45;
                flex-shrink: 0;
            }

            .special_megamenu-item:hover,
            .special_megamenu-item.special_active {
                background: #fff;
            }

            .special_megamenu-item.special_active>a,
            .special_megamenu-item:hover>a {
                color: var(--special_blue);
                background: #FDECEB;
            }

            .special_megamenu-right {
                flex: 1;
                padding: 18px 20px;
                max-height: 420px;
                overflow-y: auto;
            }

            .special_megamenu-panel {
                display: none;
            }

            .special_megamenu-panel.special_active {
                display: block;
            }

            .special_megamenu-panel-title {
                font-size: 13px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.04em;
                color: #8a90a2;
                margin-bottom: 12px;
            }

            .special_megamenu-columns {
                display: grid;
                grid-template-columns: 1fr 1fr;
                column-gap: 20px;
            }

            .special_megamenu-col {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            .special_megamenu-col li a {
                display: block;
                padding: 8px 10px;
                font-size: 14px;
                font-weight: 500;
                color: var(--special_text-dark);
                border-radius: 8px;
                white-space: normal;
                word-break: break-word;
            }

            .special_megamenu-col li a:hover {
                background: #FDECEB;
                color: var(--special_blue);
            }

            .special_megamenu-empty {
                font-size: 14px;
                color: #8a90a2;
            }
        }

        .special_contact-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--special_blue);
            color: #fff;
            font-weight: 700;
            font-size: 14px;
            text-decoration: none;
            padding: 10px 18px;
            border-radius: 100px;
            white-space: nowrap;
            transition: padding 0.35s ease, background 0.2s ease;
        }

        .special_navbar-wrap.special_at-top .special_contact-btn {
            padding: 14px 22px;
            font-size: 15px;
        }

        .special_contact-btn:hover {
            background: var(--special_blue-dark);
            color: #fff;
        }

        .special_contact-btn-mobile {
            display: none;
        }

        /* Hamburger (mobile) */
        .special_hamburger {
            display: none;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            width: 30px;
            height: 30px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
        }

        .special_hamburger span {
            display: block;
            height: 2px;
            width: 100%;
            background: var(--special_text-dark);
            border-radius: 2px;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        .special_hamburger.special_open span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

        .special_hamburger.special_open span:nth-child(2) {
            opacity: 0;
        }

        .special_hamburger.special_open span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        .special_overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(10, 12, 20, 0.4);
            z-index: 140;
        }

        .special_overlay.special_open {
            display: block;
        }

        @media (max-width: 1100px) {
            .special_nav-links {
                gap: 16px;
            }

            .special_nav-links>li>a {
                font-size: 14px;
            }
        }

        @media (max-width: 860px) {

            .special_megamenu {
                display: none !important;
            }

            .special_nav-links {
                position: fixed;
                top: 0;
                right: 0;
                height: 100vh;
                width: min(80vw, 320px);
                background: #fff;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                gap: 4px;
                padding: 90px 24px 28px;
                box-shadow: -8px 0 30px rgba(20, 30, 60, 0.15);
                transform: translateX(100%);
                transition: transform 0.35s ease;
                z-index: 150;
                overflow-y: auto;
            }

            .special_nav-links.special_open {
                transform: translateX(0);
            }

            .special_nav-links>li {
                width: 100%;
            }

            .special_nav-links>li>a {
                font-size: 16px;
                padding: 12px 0;
                width: 100%;
                border-bottom: 1px solid #f0f0f2;
            }

            .special_dropdown {
                position: static;
                padding-bottom: 0;
                margin-bottom: 0;
            }

            .special_dropdown>.special_submenu {
                display: none;
                position: static;
                box-shadow: none;
                margin-top: 0;
                padding-left: 12px;
            }

            .special_dropdown.special_hover-open>.special_submenu {
                display: block;
            }

            .special_contact-btn-mobile {
                display: flex;
                margin-top: 14px;
            }

            .special_hamburger {
                display: flex;
            }

            .special_navbar>.special_contact-btn {
                display: none;
            }

            .special_navbar {
                padding-top: 12px;
                padding-bottom: 12px;
            }

            .special_logo {
                font-size: 16px;
            }

            .special_logo img {
                height: 26px !important;
            }
        }

        @media (max-width: 640px) {
            .special_navbar {
                padding-left: 16px;
                padding-right: 16px;
            }

            .special_navbar-wrap.special_at-top {
                padding: 10px 10px 0 10px;
            }

            .special_navbar-wrap.special_at-top .special_navbar {
                border-radius: 24px;
                padding: 12px 18px;
            }
        }
    
   
   
        
        .wa-fab {
            position: fixed;
            bottom: 22px;
            right: 22px;
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            cursor: pointer;
        }

        .wa-fab-label {
            background: #158d00;
            color: #fff;
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 13.5px;
            font-weight: 600;
            letter-spacing: .01em;
            padding: 10px 16px;
            border-radius: 999px;
            white-space: nowrap;
            box-shadow: 0 10px 24px rgba(3, 69, 9, 0.22);
            opacity: 0;
            transform: translateX(8px);
            animation: waLabelIn .5s ease 1.1s forwards;
            position: relative;
        }

        .wa-fab-label::after {
            content: '';
            position: absolute;
            right: -5px;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 10px;
            background: #0c1626;
            border-radius: 2px;
            rotate: 45deg;
        }

        @keyframes waLabelIn {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .wa-fab-icon {
            position: relative;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: linear-gradient(155deg, #2fe38a, #1fb955);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 12px 26px rgba(31, 185, 85, .38), 0 2px 6px rgba(0, 0, 0, .12);
            transition: transform .3s ease, box-shadow .3s ease;
            flex: none;
        }

        .wa-fab-icon svg {
            width: 30px;
            height: 30px;
            fill: #fff;
            position: relative;
            z-index: 2;
            transition: transform .3s ease;
        }

        .wa-fab-ring {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 2px solid rgba(47, 227, 138, .55);
            animation: waPulse 2.6s ease-out infinite;
        }

        @keyframes waPulse {
            0% {
                transform: scale(1);
                opacity: .65;
            }

            100% {
                transform: scale(1.55);
                opacity: 0;
            }
        }

        .wa-fab:hover .wa-fab-icon {
            transform: scale(1.08) translateY(-2px);
            box-shadow: 0 16px 32px rgba(31, 185, 85, .46), 0 4px 8px rgba(0, 0, 0, .16);
        }

        .wa-fab:hover .wa-fab-icon svg {
            transform: rotate(8deg);
        }

        .wa-fab:hover .wa-fab-label {
            background: #D2241D;
        }

        .wa-fab:hover .wa-fab-label::after {
            background: #D2241D;
        }

        /* Mobile: keep just the icon (label collapses) to save space */
        @media (max-width: 768px) {
            .wa-fab {
                bottom: 16px;
                right: 16px;
            }

            .wa-fab-label {
                display: none;
            }

            .wa-fab-icon {
                width: 50px;
                height: 50px;
            }

            .wa-fab-icon svg {
                width: 26px;
                height: 26px;
            }
        }

        /* ===================================================== */
        /* footer section — Premium 4-column responsive footer   */
        /* ===================================================== */
        .custom-footer {
            margin: 0;
            padding: 0;
            font-family: 'Poppins', sans-serif;
            background-color: #0B2447;
            color: #ffffff !important;
        }

        .custom-footer {
            background: radial-gradient(circle at top left, #000000, #000000);
            padding: 56px 0 0;
        }

        .custom-footer-grid {
            display: grid;
            grid-template-columns: 1.3fr 1fr 1fr 1fr;
            gap: 40px;
            margin-bottom: 6px;
        }

        /* Subtle hairline separators between columns on desktop, centered in
           the existing gap — keeps spacing untouched, just adds definition */
        @media (min-width: 992px) {
            .custom-footer-col {
                position: relative;
            }

            .custom-footer-col:not(:first-child)::before {
                content: '';
                position: absolute;
                left: -20px;
                top: 4px;
                bottom: 4px;
                width: 1px;
                background: rgba(255, 255, 255, 0.08);
            }
        }

        .custom-footer-col h5 {
            font-weight: 700;
            font-size: 18px;
            margin-bottom: 20px;
            position: relative;
            color: #ffffff !important;
            letter-spacing: 0.02em;
        }

        .custom-footer-col h5::after {
            content: '';
            width: 36px;
            height: 3px;
            background: #D2241D;
            position: absolute;
            bottom: -9px;
            left: 0;
            border-radius: 2px;
        }

        /* Column 1: Brand / Logo + Address */
        .custom-footer-brand .footer-logo img {
            height: 34px;
            width: auto;
            margin-bottom: 16px;
            filter: brightness(0) invert(1);
        }

        .custom-footer-brand .footer-address,
        .custom-footer-brand .footer-contact-item {
            font-size: 14px;
            line-height: 1.5;
            color: #b8bdc9;
            margin-bottom: 8px;
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .custom-footer-brand .footer-contact-item i {
            color: #D2241D;
            margin-top: 3px;
            flex-shrink: 0;
        }

        /* Columns 2-3: Services (main + indented sub-services) */
        .custom-footer-service-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .custom-footer-service-list>li {
            margin-bottom: 10px;
        }

        .custom-footer-service-list>li>a.footer-main-service {
            display: block;
            font-size: 15px;
            font-weight: 600;
            line-height: 1.3;
            color: #ffffff;
            text-decoration: none;
            transition: color 0.2s ease, padding-left 0.2s ease;
        }

        .custom-footer-service-list>li>a.footer-main-service:hover {
            color: #D2241D;
            padding-left: 3px;
        }

        .footer-sub-service-list {
            list-style: none;
            margin: 6px 0 0;
            padding-left: 5px;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
        }

        .footer-sub-service-list li {
            line-height: 1.25;
        }

        .footer-sub-service-list li a {
            display: block;
            padding: 4px 0 4px 10px;
            font-size: 13px;
            line-height: 1.3;
            color: #8f95a3;
            text-decoration: none;
            transition: color 0.2s ease, padding-left 0.2s ease;
        }

        .footer-sub-service-list li a:hover {
            color: #D2241D;
            padding-left: 13px;
        }

        /* Column 4: Quick Links */
        .custom-footer-quicklinks ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .custom-footer-quicklinks ul li {
            margin-bottom: 10px;
            line-height: 1.3;
        }

        .custom-footer-quicklinks ul li a {
            font-size: 14px;
            color: #e0e0e0;
            text-decoration: none;
            transition: color 0.2s ease, padding-left 0.2s ease;
        }

        .custom-footer-quicklinks ul li a:hover {
            color: #D2241D;
            padding-left: 3px;
        }

        .custom-footer-bottom-bar {
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.02);
            padding: 16px 0;
            margin-top: 32px;
        }

        .custom-footer-bottom {
            text-align: left;
            color: #9098a8;
            font-size: 13px;
            line-height: 1.5;
            margin: 0;
        }

        .custom-footer-bottom p {
            margin: 0;
        }

        .custom-footer-bottom p a {
            color: #ffffff;
            text-decoration: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            transition: border-color 0.2s ease, color 0.2s ease;
        }

        .custom-footer-bottom p a:hover {
            color: #D2241D;
            border-color: #D2241D;
        }

        .custom-footer-social-icons {
            margin-top: 0;
        }

        .custom-footer-social-icons a {
            display: inline-block;
            width: 34px;
            height: 34px;
            line-height: 34px;
            margin: 0 4px;
            text-align: center;
            border-radius: 50%;
            font-size: 16px;
            background: #fff;
            color: #000;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .custom-footer-social-icons a:hover {
            transform: translateY(-3px) scale(1.08);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
        }

        .custom-footer-social-icons a.whatsapp {
            background: #D2241D;
            color: #fff;
        }

        .custom-footer-social-icons a.facebook {
            background: #1877f2;
            color: #fff;
        }

        .custom-footer-social-icons a.twitter {
            background: #000;
            color: #fff;
        }

        .custom-footer-social-icons a.linkedin {
            background: #0a66c2;
            color: #fff;
        }

        .custom-footer-social-icons a.youtube {
            background: #ff0000;
            color: #fff;
        }

        .custom-footer-social-icons a.instagram {
            background: #E1306C;
            color: #fff;
        }

        .custom-footer-social-icons a.behance {
            background: #1769ff;
            color: #fff;
        }

        .custom-footer-social-icons a.pinterest {
            background: #e60023;
            color: #fff;
        }

        /* Footer grid responsiveness */
        @media (max-width: 991px) {
            .custom-footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 32px 24px;
            }
        }

        @media (max-width: 575px) {
            .custom-footer-grid {
                grid-template-columns: 1fr;
                gap: 28px;
            }

            .custom-footer {
                padding: 40px 0 20px;
            }
        }

        /* Link :disabled */
        .disabled-link {
            pointer-events: none !important;
            cursor: default;
        }


        .footer-social-icons {
            display: flex;
            gap: 12px;
            margin-top: 15px;
        }

        .footer-social-icons .social-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .footer-social-icons .social-icon:hover {
            background-color: #fd0d0d;
            color: #fff;
            transform: translateY(-3px);
        }
  


/* ============ IDX SECTION (select-1-index.html) ============ */
.idx-scope {
    --red-600: #d6261e;
    --red-700: #b31a14;
    --red-500: #ef3a31;
    --red-100: #fdeceb;
    --red-50: #fff6f5;
    --ink-900: #12131a;
    --ink-600: #5b5f6b;
    --ink-400: #8a8e99;
    --line: #ecedf0;
    --bg-tint: linear-gradient(180deg, #ffffff 0%, #fff8f7 45%, #ffffff 100%);
}

* {
    box-sizing: border-box;
}

.idx-scope {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    color: var(--ink-900);
    background: #fff;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

/* ---------- NAVBAR ---------- */
.idx-navbar-custom {
    padding: 18px 0;
    background: #fff;
}

.idx-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--ink-900);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.idx-brand-mark svg {
    width: 22px;
    height: 22px;
}

.idx-brand-name {
    font-weight: 800;
    font-size: 1.28rem;
    letter-spacing: -0.02em;
    color: var(--ink-900);
    margin-left: 12px;
}

.idx-brand-name sup {
    font-size: 0.55rem;
    top: -0.9em;
}

.idx-nav-link-custom {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink-900) !important;
    padding: 0.5rem 1rem !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

.idx-nav-link-custom:hover {
    color: var(--red-600) !important;
}

.idx-btn-contact {
    background: linear-gradient(135deg, var(--red-600), var(--red-700));
    color: #fff;
    font-weight: 700;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 20px -8px rgba(214, 38, 30, 0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.idx-btn-contact:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -8px rgba(214, 38, 30, 0.65);
}

.navbar-toggler {
    border: none;
    box-shadow: none !important;
}

/* ---------- HERO ---------- */
.idx-hero-section {
    background: var(--bg-tint);
    padding: 90px 0 60px;
    position: relative;
}

.idx-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-600);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.55rem 1.25rem;
    border-radius: 999px;
    box-shadow: 0 6px 18px -10px rgba(18, 19, 26, 0.15);
}

.idx-hero-badge .idx-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red-600);
    box-shadow: 0 0 0 4px var(--red-100);
}

.idx-hero-title {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    margin: 1.75rem 0 1.5rem;
}

.idx-hero-title .idx-accent {
    background: linear-gradient(135deg, var(--red-500), var(--red-700));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.idx-hero-sub {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    color: rgb(238, 231, 231);
    max-width: 640px;
    margin: 0 auto 2.4rem;
    line-height: 1.65;
}

.idx-btn-primary-red {
    background: linear-gradient(135deg, var(--red-600), var(--red-700));
    color: #fff;
    font-weight: 700;
    padding: 0.95rem 1.9rem;
    border-radius: 999px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 26px -10px rgba(214, 38, 30, 0.6);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.idx-btn-primary-red:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -8px rgba(214, 38, 30, 0.7);
}

.idx-btn-outline-dark-pill {
    background: #fff;
    color: var(--ink-900);
    font-weight: 700;
    padding: 0.95rem 1.9rem;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    gap: 10px;
    transition: all 0.2s ease;
}

.idx-btn-outline-dark-pill:hover {
    color: var(--red-600);
    border-color: var(--red-500);
    transform: translateY(-2px);
}

.idx-pill-feature {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 0.2rem 0.2rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink-900);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 16px -12px rgba(18, 19, 26, 0.2);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.idx-pill-feature:hover {
    transform: translateY(-3px);
    border-color: var(--red-500);
}

.idx-pill-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--red-500), var(--red-700));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ---------- TRUST STATEMENT ---------- */
.idx-trust-section {
    padding: 40px 0 70px;
}

.idx-trust-text {
    font-size: clamp(1.6rem, 3.4vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.35;
    max-width: 1100px;
}

.idx-trust-text .idx-muted {
    color: var(--ink-400);
    font-weight: 700;
}

.idx-trust-text .idx-highlight {
    color: var(--ink-900);
    font-size: 34px;
}

/* ---------- REVIEW BADGES ---------- */
.idx-review-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 2.75rem;
}

.idx-review-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 260px;
}

.idx-stars-red i {
    color: var(--red-600);
    font-size: 0.95rem;
}

.idx-review-label {
    font-size: 0.8rem;
    color: var(--ink-400);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.idx-review-brand {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--ink-900);
}

.idx-review-count {
    font-size: 0.85rem;
    color: var(--ink-600);
    font-weight: 600;
}

.idx-review-score {
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--ink-900);
}

.idx-design-rush-badge {
    background: linear-gradient(135deg, var(--red-50), #fff);
    border: 1px solid var(--red-100);
}

@media (max-width: 767.98px) {
    .idx-hero-section {
        padding: 60px 0 40px;
    }

    .idx-review-row {
        flex-direction: column;
    }

    .idx-trust-text {
        font-size: 1.5rem;
    }
}

/* ============ SVC SECTION (services-2.html) ============ */
.svc-scope {
    --red-600: #d6261e;
    --red-700: #b31a14;
    --red-500: #ef3a31;
    --red-100: #fdeceb;
    --red-50: #fff6f5;
    --ink-900: #12131a;
    --ink-600: #5b5f6b;
    --ink-400: #8a8e99;
    --line: #ecedf0;
}

* {
    box-sizing: border-box;
}

.svc-scope {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    color: var(--ink-900);
    background: #fff;
}

.svc-services-section {
    padding: 90px 0;
    background: #fff;
}

.svc-section-title {
    font-weight: 700;
    letter-spacing: -0.03em;
    font-size: clamp(1.9rem, 3vw, 3rem);
    margin-bottom: 3rem;
}

.svc-service-card {
    background: #fff;
    color: #12131a;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 2.2rem 2rem;
    height: 100%;
    box-shadow: 0 10px 30px -20px rgba(18, 19, 26, 0.15);
    transition: transform 0.25s ease, box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.svc-service-card:hover {
    transform: translateY(-6px);
    border-color: var(--red-500);
    box-shadow: 0 18px 40px -18px rgba(214, 38, 30, 0.3);
}

.svc-service-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--red-500), var(--red-700));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
    box-shadow: 0 10px 22px -10px rgba(214, 38, 30, 0.55);
}

.svc-service-title {
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.9rem;
}

.svc-service-desc {
    color: var(--ink-600);
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 1.4rem;
}

.svc-service-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.svc-service-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-weight: 700;
    font-size: 0.98rem;
    color: #374151;
    margin-bottom: 0.75rem;
}

.svc-service-list li:last-child {
    margin-bottom: 0;
}

.svc-service-list li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red-600);
    margin-top: 0.5rem;
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .svc-services-section {
        padding: 55px 0;
    }

    .svc-service-card {
        padding: 1.8rem 1.5rem;
    }
}

/* ============ PTN SECTION (partners-3.html) ============ */
.ptn-scope {
    --red-600: #d6261e;
    --red-700: #b31a14;
    --red-500: #ef3a31;
    --red-100: #fdeceb;
    --red-50: #fff6f5;
    --ink-900: #12131a;
    --ink-600: #5b5f6b;
    --ink-400: #8a8e99;
    --line: #ecedf0;
}

* {
    box-sizing: border-box;
}

.ptn-scope {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    color: var(--ink-900);
    background: #fff;
}

.ptn-partners-section {
    padding: 70px 0 90px;
    background: #fff;
}

.ptn-partners-label {
    text-align: center;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red-600);
    margin-bottom: 2.2rem;
}

.ptn-partners-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 20px 15px -30px rgba(18, 19, 26, 0.25);
    padding: 0.5rem;
}

.ptn-partners-row {
    display: flex;
    flex-wrap: wrap;
}

.ptn-partner-item {
    flex: 1 1 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.9rem 1.4rem;
    position: relative;
    min-width: 200px;
}

.ptn-partner-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--line);
}

.ptn-partner-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.35rem;
}

.ptn-partner-name {
    font-weight: 700;
    font-size: 1.15rem;
    color: #3d4148;
    white-space: nowrap;
}

.ptn-partner-name .ptn-light {
    font-weight: 500;
    color: #8f939c;
}
/* --- AWS --- */
.ptn-aws-icon {
    background: #fff5eb;
}

.ptn-aws-icon svg {
    width: 34px;
    height: auto;
}

/* --- Cloudflare --- */
.ptn-cloudflare-icon {
    background: #fff4e8;
}

.ptn-cloudflare-icon svg {
    width: 30px;
    height: auto;
}

/* --- PayPal --- */
.ptn-paypal-icon {
    background: #eaf4ff;
}

.ptn-paypal-icon svg {
    width: 24px;
    height: 24px;
}

/* --- Shopify --- */
.ptn-shopify-icon {
    background: #eaf7e4;
}

.ptn-shopify-icon svg {
    width: 26px;
    height: 26px;
}
@media (max-width: 991.98px) {
    .ptn-partner-item {
        flex: 1 1 33.333%;
    }

    .ptn-partner-item:nth-child(3n)::after {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .ptn-partner-item {
        flex: 1 1 100%;
        justify-content: flex-start;
        padding: 1.3rem 1.2rem;
    }

    .ptn-partner-item::after {
        display: none !important;
    }

    .ptn-partner-item:not(:last-child) {
        border-bottom: 1px solid var(--line);
    }
}

/* ============ TST SECTION (testimonials-4.html) ============ */
.tst-scope {
    --red-600: #d6261e;
    --red-700: #b31a14;
    --red-500: #ef3a31;
    --red-100: #fdeceb;
    --red-50: #fff6f5;
    --ink-900: #12131a;
    --ink-600: #5b5f6b;
    --ink-400: #8a8e99;
    --line: #e7e8ec;
    --star: #f5a623;
}

* {
    box-sizing: border-box;
}

.tst-scope {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    color: var(--ink-900);
    background: #fff;
}

.tst-testimonial-section {
    padding: 80px 0 90px;
    background: #fff;
}

.tst-carousel-viewport {
    overflow: hidden;
}

.tst-carousel-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.tst-testi-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 2rem 2rem 1.9rem;
    flex: 0 0 calc((100% - 3rem) / 3);
    min-width: 0;
}

.tst-testi-stars {
    color: var(--star);
    font-size: 1.05rem;
    margin-bottom: 1.3rem;
    letter-spacing: 2px;
}

.tst-testi-quote {
    color: var(--ink-600);
    font-size: 1.02rem;
    line-height: 1.7;
    margin-bottom: 1.8rem;
    min-height: 168px;
}

.tst-testi-footer {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.tst-testi-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red-500), var(--red-700));
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 18px -8px rgba(214, 38, 30, 0.55);
}

.tst-testi-name {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--ink-900);
    line-height: 1.3;
}

.tst-testi-role {
    font-size: 0.9rem;
    color: var(--ink-400);
    font-weight: 500;
}

.tst-carousel-nav {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 2.6rem;
}

.tst-nav-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.tst-nav-btn:hover:not(:disabled) {
    border-color: var(--red-500);
    color: var(--red-600);
    transform: translateY(-2px);
}

.tst-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tst-nav-btn.tst-active-next {
    border-color: var(--red-500);
    color: var(--red-600);
    background: var(--red-50);
}

@media (max-width: 991.98px) {
    .tst-testi-card {
        flex: 0 0 calc((100% - 1.5rem) / 2);
    }
}

@media (max-width: 575.98px) {
    .tst-testi-card {
        flex: 0 0 100%;
    }

    .tst-testi-quote {
        min-height: 0;
    }
}
/* ============ CTA SECTION (CTA-5.html) ============ */
.cta-scope {
    --red-600: #e31e24;
    --red-700: #c4141a;
    --red-800: #8f0f14;
    --red-900: #4a0709;
    --ink: #101113;
    --muted: #5b6068;
    --bg: #ffffff;
    --card-bg: #fafafa;
}

* {
    box-sizing: border-box;
}

.cta-scope {
    font-family: "Plus Jakarta Sans", sans-serif;
    background: var(--bg);
    color: var(--ink);
    margin: 0;
}

.cta-unico-section {
    padding: 80px 0 60px;
    background: var(--bg);
}

.cta-unico-heading {
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.02em;
    margin-bottom: 32px;
    color: var(--ink);
}

.cta-hero-img-wrap {
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 56px;
    box-shadow: 0 20px 50px -20px rgba(227, 30, 36, 0.25);
}

.cta-hero-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.cta-feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(145deg, #fff0f0, #ffe1e2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--red-700);
    flex-shrink: 0;
}

.cta-feature-icon svg {
    width: 26px;
    height: 26px;
}

.cta-feature-title {
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 12px;
    color: var(--ink);
}

.cta-feature-text {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 0;
}

.cta-feature-col {
    padding-right: 24px;
}

/* CTA section — compact padding */
.cta-cta-section {
    background: linear-gradient(
        160deg,
        var(--ink) 0%,
        var(--red-900) 55%,
        var(--red-700) 130%
    );
    padding: clamp(40px, 6vw, 76px) 20px clamp(48px, 7vw, 88px);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background: radial-gradient(
            circle at 30% 20%,
            rgba(227, 30, 36, 0.35),
            transparent 55%
        ),
        radial-gradient(
            circle at 80% 90%,
            rgba(227, 30, 36, 0.25),
            transparent 50%
        ); */
    pointer-events: none;
}

.cta-cta-heading {
    position: relative;
    max-width: 920px;
    margin: 0 auto clamp(20px, 3.2vw, 32px);
    padding: 0;
}

/* Main headline */
.cta-cta-heading .cta-line1 {
    display: block;
    color: #ffffff;
    font-weight: 800;
    font-size: clamp(1.4rem, 3.6vw, 2.3rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* Tagline */
.cta-cta-heading .cta-line2 {
    display: block;
    margin-top: clamp(8px, 1.6vw, 12px);
    font-weight: 600;
    font-size: clamp(0.85rem, 1.8vw, 1.05rem);
    line-height: 1.5;
    letter-spacing: 0.01em;
    background: linear-gradient(90deg, #ffc9cb, #f4a6a8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Button row */
.cta-cta-btns {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.cta-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    color: var(--red-800);
    font-weight: 700;
    font-size: clamp(0.78rem, 1.6vw, 0.9rem);
    line-height: 1.2;
    padding: clamp(10px, 1.8vw, 13px) clamp(16px, 2.4vw, 26px);
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.25s ease;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}

.cta-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.5);
    color: var(--red-900);
}

.cta-cta-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.cta-cta-btn:hover svg {
    transform: translateX(4px);
}

/* Secondary button — outlined */
.cta-cta-btn-outline {
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    box-shadow: none;
}

.cta-cta-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: none;
}

/* ===== Responsive ===== */
@media (max-width: 767.98px) {
    .cta-unico-section {
        padding: 56px 0 40px;
    }

    .cta-feature-col {
        padding-right: 0;
        margin-bottom: 36px;
    }

    .cta-feature-col:last-child {
        margin-bottom: 0;
    }

    .cta-cta-btns {
        gap: 10px;
    }

    /* Force headline + tagline to stay on a single line each on mobile */
    .cta-cta-heading {
        max-width: 100%;
        padding: 0;
    }

    .cta-cta-heading .cta-line1 {
        white-space: nowrap;
        font-size: 4.5vw;
        letter-spacing: -0.02em;
    }

    .cta-cta-heading .cta-line2 {
        white-space: nowrap;
        font-size: 2.75vw;
        letter-spacing: 0;
        margin-top: 6px;
    }
}
@media (max-width: 420px) {
    .cta-cta-btns {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

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

@media (min-width: 768px) and (max-width: 991.98px) {
    .cta-feature-col {
        margin-bottom: 32px;
    }
}
/*  */
.tch-scope {
    --tch-ink: #3c4356;
    --tch-muted: #8992a6;
    --tch-line: #e7e9f0;
    --tch-bg: #ffffff;
    --tch-card-bg: #ffffff;
    --tch-shadow: 0 1px 2px rgba(30, 34, 54, 0.05);
    --tch-shadow-hover: 0 14px 28px rgba(30, 34, 54, 0.1);

    /* grid sizing tokens — JS reads these at runtime, so keep them in sync
                   with the breakpoints below */
    --tch-cell-w: 116px;
    --tch-cell-h: 116px;
    --tch-gap: 22px;
    --tch-stage-h: 62vh;

    background: var(--tch-bg);
    font-family: "Inter", "Segoe UI", "Noto Sans Bengali", sans-serif;
}

.tch-scope * {
    box-sizing: border-box;
}

.tch-section {
    padding: 72px 0 80px;
}

.tch-eyebrow {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--tch-muted);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.tch-heading {
    text-align: center;
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 700;
    color: var(--tch-ink);
    margin-bottom: 44px;
    letter-spacing: -0.01em;
}

/* ===== Stage: the area we tile exactly full of logos ===== */
.tch-stage {
    position: relative;
    width: 100%;
    min-height: var(--tch-stage-h);
    display: grid;
    gap: var(--tch-gap);
    justify-content: center;
    align-content: center;
}

.tch-card {
    position: relative;
    width: var(--tch-cell-w);
    height: var(--tch-cell-h);
    background: var(--tch-card-bg);
    border: 1px solid var(--tch-line);
    border-radius: 14px;
    box-shadow: var(--tch-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: tch-card-in 0.5s ease forwards;
    transition: box-shadow 0.25s ease, border-color 0.25s ease,
        transform 0.2s ease;
    will-change: transform;
}

@keyframes tch-card-in {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1) var(--tch-rot, rotate(0deg));
    }
}

/* gentle continuous float — amplitude/duration/delay randomized per card via inline vars */
.tch-float-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    animation: tch-floaty var(--tch-dur, 4s) ease-in-out var(--tch-delay, 0s)
        infinite;
}

@keyframes tch-floaty {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(var(--tch-amp, -6px));
    }
}

.tch-card i {
    font-size: 42px;
    line-height: 1;
}

.tch-card:hover {
    box-shadow: var(--tch-shadow-hover);
    border-color: #d7dae4;
    transform: translateY(-3px) rotate(0deg) scale(1.04);
    z-index: 2;
}

.tch-card:hover .tch-float-inner {
    animation-play-state: paused;
}

/* name tooltip on hover */
.tch-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--tch-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.tch-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--tch-ink);
}

.tch-card:hover .tch-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== Responsive breakpoints — update tokens together ===== */
@media (max-width: 992px) {
    .tch-scope {
        --tch-cell-w: 96px;
        --tch-cell-h: 96px;
        --tch-gap: 18px;
        --tch-stage-h: 56vh;
    }

    .tch-card i {
        font-size: 36px;
    }
}

@media (max-width: 576px) {
    .tch-scope {
        --tch-cell-w: 76px;
        --tch-cell-h: 76px;
        --tch-gap: 14px;
        --tch-stage-h: 48vh;
    }

    .tch-section {
        padding: 52px 0 60px;
    }

    .tch-card {
        border-radius: 11px;
    }

    .tch-card i {
        font-size: 28px;
    }

    .tch-heading {
        margin-bottom: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tch-float-inner {
        animation: none !important;
    }

    .tch-card {
        animation: none !important;
        opacity: 1;
    }
}

/*  */
.cli-scope {
    --cli-ink: #3c4356;
    --cli-muted: #8992a6;
    --cli-line: #e7e9f0;
    --cli-bg: #ffffff;
    --cli-card-bg: #ffffff;
    --cli-shadow: 0 1px 2px rgba(30, 34, 54, 0.04);
    --cli-gap: 64px;

    background: var(--cli-bg);
    font-family: "Inter", "Segoe UI", "Noto Sans Bengali", sans-serif;
}

.cli-scope * {
    box-sizing: border-box;
}

.cli-section {
    padding: 72px 0 80px;
    overflow: hidden;
}

.cli-eyebrow {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--cli-muted);
    margin-bottom: 40px;
    text-transform: uppercase;
}

/* --- draggable / auto-scrolling track --- */
.cli-track-wrap {
    position: relative;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 64px,
        #000 calc(100% - 64px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 64px,
        #000 calc(100% - 64px),
        transparent 100%
    );
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.cli-track-wrap.cli-is-dragging {
    cursor: grabbing;
}

.cli-track {
    display: flex;
    align-items: stretch;
    gap: var(--cli-gap);
    width: max-content;
    will-change: transform;
}

.cli-card {
    flex: 0 0 auto;
    width: 230px;
    height: 108px;
    border: 1px solid var(--cli-line);
    border-radius: 6px;
    background: var(--cli-card-bg);
    box-shadow: var(--cli-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
    transition: box-shadow 0.25s ease, transform 0.25s ease,
        border-color 0.25s ease;
}

.cli-card:hover {
    box-shadow: 0 10px 24px rgba(30, 34, 54, 0.08);
    border-color: #d7dae4;
    transform: translateY(-2px);
}

.cli-card img,
.cli-card svg {
    max-width: 100%;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    /* prevents native image-drag from fighting our drag handler */
}

/* text-based logo styling (when no image provided) */
.cli-text {
    font-size: 22px;
    color: #555b6e;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .cli-scope {
        --cli-gap: 44px;
    }

    .cli-card {
        width: 190px;
        height: 92px;
        padding: 16px 18px;
    }

    .cli-card img,
    .cli-card svg {
        max-height: 38px;
    }
}

@media (max-width: 576px) {
    .cli-scope {
        --cli-gap: 28px;
    }

    .cli-section {
        padding: 52px 0 60px;
    }

    .cli-card {
        width: 148px;
        height: 78px;
        padding: 12px 14px;
        border-radius: 5px;
    }

    .cli-card img,
    .cli-card svg {
        max-height: 30px;
    }

    .cli-eyebrow {
        font-size: 11px;
        margin-bottom: 28px;
    }

    .cli-track-wrap {
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 32px,
            #000 calc(100% - 32px),
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 32px,
            #000 calc(100% - 32px),
            transparent 100%
        );
    }
}









  /* ==========================================================
                             GET A QUOTE — v2, aligned to the MSN SoftTech site system:
                             dark navy/teal hero, orange CTAs, "$ eyebrow" labels,
                             rounded card language borrowed from Home/About.
                             Scoped to .gq-scope so nothing leaks into the rest of the site.
                             ========================================================== */
  .gq-scope {
      --navy-950: #070c14;
      --navy-900: #0c1626;
      --navy-800: #142238;
      --navy-700: #1b2c48;
      --paper: #f7f7f4;
      --paper-alt: #eef0ea;
      --ink: #12181f;
      --ink-soft: #5c6672;
      --ink-invert-soft: rgba(255, 255, 255, .66);
      --orange: red;
      --orange-dark: #D2241D;
      --teal: #D2241D;
      --teal-dim: rgba(47, 214, 192, .14);
      --line: #e3e6df;
      --line-dark: rgba(255, 255, 255, .12);
      --danger: #d9483f;
      --ok: #22b378;
      --radius: 16px;

      font-family: 'Inter', sans-serif;
      color: var(--ink);
      background: var(--paper);
  }

  .gq-scope * {
      box-sizing: border-box;
  }

  .gq-display {
      font-family: 'Space Grotesk', sans-serif;
  }

  .gq-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--orange);
      margin-bottom: 18px;
  }

  .gq-eyebrow::before {
      content: '$';
      font-family: 'JetBrains Mono', monospace;
      font-weight: 500;
      color: var(--teal);
  }

  /* ---------- hero / info + form split ---------- */
  .gq-hero {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      align-items: stretch;
  }

  @media (max-width: 991px) {
      .gq-hero {
          grid-template-columns: 1fr;
      }
  }

  /* ----- left: dark info panel ----- */
  .gq-canvas {
      position: relative;
      background:
          radial-gradient(720px 480px at 15% 15%, rgba(47, 214, 192, .16), transparent 60%),
          radial-gradient(640px 420px at 90% 85%, rgba(245, 166, 35, .10), transparent 55%),
          linear-gradient(180deg, var(--navy-950), var(--navy-900));
      color: #fff;
      padding: 88px 56px 64px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
  }

  .gq-canvas h1 {
      font-size: clamp(30px, 3.4vw, 44px);
      font-weight: 700;
      line-height: 1.16;
      margin-bottom: 18px;
      max-width: 480px;
  }

  .gq-canvas .gq-sub {
      font-size: 16px;
      line-height: 1.7;
      color: var(--ink-invert-soft);
      max-width: 440px;
  }

  .gq-canvas .gq-sub * {
      color: inherit !important;
      font-size: inherit !important;
  }

  .gq-canvas .gq-sub a {
      color: var(--teal) !important;
      font-weight: 600;
      text-decoration: underline;
  }

  /* trust strip — mirrors the homepage impact-numbers pattern */
  .gq-trust {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--line-dark);
      border: 1px solid var(--line-dark);
      border-radius: 12px;
      overflow: hidden;
      margin-top: 34px;
      max-width: 460px;
  }

  .gq-trust-item {
      background: rgba(255, 255, 255, .03);
      padding: 16px 14px;
  }

  .gq-trust-item strong {
      display: block;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 22px;
      color: var(--teal);
  }

  .gq-trust-item span {
      display: block;
      font-size: 11px;
      color: var(--ink-invert-soft);
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-top: 4px;
  }

  /* "what happens next" — rounded cards w/ ghost numeral, borrows Our Mission/Vision pattern */
  .gq-next {
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      gap: 14px;
  }

  .gq-next-card {
      position: relative;
      background: var(--navy-800);
      border: 1px solid var(--line-dark);
      border-radius: var(--radius);
      padding: 18px 20px;
      overflow: hidden;
  }

  .gq-next-card .gq-ghost-num {
      position: absolute;
      right: 14px;
      top: -6px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 46px;
      font-weight: 700;
      color: rgba(255, 255, 255, .05);
      line-height: 1;
  }

  .gq-next-card .gq-num-badge {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: var(--teal-dim);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      margin-bottom: 10px;
  }

  .gq-next-card h4 {
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 4px;
      position: relative;
  }

  .gq-next-card p {
      font-size: 13.5px;
      color: var(--ink-invert-soft);
      line-height: 1.55;
      margin: 0;
      position: relative;
  }

  .gq-canvas-foot {
      margin-top: 44px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 12.5px;
      color: var(--ink-invert-soft);
  }

  .gq-canvas-foot .gq-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(47, 214, 192, .18);
  }

  /* ----- right: form panel ----- */
  .gq-form-panel {
      background: #fff;
      padding: 70px 60px 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }

  @media (max-width: 1200px) {
      .gq-form-panel {
          padding: 56px 42px;
      }
  }

  @media (max-width: 991px) {

      .gq-canvas,
      .gq-form-panel {
          padding: 52px 28px;
      }
  }

  @media (max-width: 560px) {

      .gq-canvas,
      .gq-form-panel {
          padding: 42px 18px;
      }
  }

  .gq-sheet-head {
      margin-bottom: 28px;
  }

  .gq-sheet-head h2 {
      font-size: 24px;
      font-weight: 700;
      margin: 0 0 6px;
      color: var(--ink);
  }

  .gq-sheet-head p {
      font-size: 14px;
      color: var(--ink-soft);
      margin: 0;
  }

  .gq-alert {
      border: 1px solid var(--line);
      border-left: 3px solid var(--ok);
      background: #f2faf6;
      padding: 12px 40px 12px 16px;
      font-size: 14px;
      margin-bottom: 20px;
      position: relative;
      border-radius: 8px;
  }

  .gq-alert.alert-danger {
      border-left-color: var(--danger);
      background: #fdf3f2;
  }

  .gq-alert ul {
      margin: 0;
      padding-left: 18px;
  }

  .gq-alert .close {
      position: absolute;
      right: 10px;
      top: 8px;
      font-size: 18px;
      line-height: 1;
      color: var(--ink-soft);
      opacity: .7;
  }

  .gq-form {
      display: flex;
      flex-direction: column;
      gap: 28px;
  }

  .gq-group-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--ink);
      text-transform: uppercase;
      letter-spacing: .03em;
      margin-bottom: 14px;
  }

  .gq-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 18px;
  }

  @media (max-width: 620px) {
      .gq-fields {
          grid-template-columns: 1fr;
      }
  }

  .gq-field {
      position: relative;
  }

  .gq-field.gq-full {
      grid-column: 1 / -1;
  }

  .gq-field label {
      display: block;
      font-size: 11.5px;
      color: var(--ink-soft);
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: .03em;
  }

  .gq-input,
  .gq-textarea,
  .gq-select {
      width: 100%;
      border: 1.5px solid var(--line);
      border-radius: 10px;
      background: var(--paper);
      padding: 12px 14px;
      font-size: 14.5px;
      font-family: 'Inter', sans-serif;
      color: var(--ink);
      transition: border-color .2s ease, background .2s ease;
  }

  .gq-input:focus,
  .gq-textarea:focus,
  .gq-select:focus {
      outline: none;
      border-color: var(--teal);
      background: #fff;
  }

  .gq-input::placeholder,
  .gq-textarea::placeholder {
      color: #9aa2a8;
  }

  .gq-textarea {
      resize: vertical;
      min-height: 110px;
  }

  /* prefer contact */
  .gq-radio-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
  }

  .gq-radio {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      cursor: pointer;
      border: 1.5px solid var(--line);
      border-radius: 999px;
      padding: 9px 16px;
      background: var(--paper);
      transition: border-color .2s ease, background .2s ease;
  }

  .gq-radio:has(input:checked) {
      border-color: var(--navy-900);
      background: var(--navy-900);
      color: #fff;
  }

  .gq-radio input {
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1.5px solid var(--line);
      position: relative;
      cursor: pointer;
      margin: 0;
      flex: none;
  }

  .gq-radio input:checked {
      border-color: var(--teal);
      background: var(--teal);
  }

  /* services as tags */
  .gq-services {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      position: relative;
  }

  .gq-service {
      position: relative;
  }

  .gq-service-label {
      display: inline-block;
      padding: 9px 18px;
      border: 1.5px solid var(--line);
      border-radius: 999px;
      font-size: 13.5px;
      font-weight: 500;
      cursor: pointer;
      transition: all .2s ease;
      background: #fff;
  }

  .gq-service-input:checked+.gq-service-label {
      background: var(--navy-900);
      border-color: var(--orange);
      color: #fff;
  }

  .gq-subservices {
      display: none;
      flex-wrap: wrap;
      gap: 8px;
      position: absolute;
      top: 112%;
      left: 0;
      width: max-content;
      max-width: 320px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px;
      box-shadow: 0 14px 34px rgba(7, 12, 20, .14);
      z-index: 10;
  }

  .gq-subservice {
      display: flex;
      align-items: center;
  }

  .gq-subservice input {
      display: none;
  }

  .gq-subservice label {
      font-size: 12.5px;
      padding: 7px 13px;
      border-radius: 999px;
      background: var(--paper-alt);
      cursor: pointer;
      margin: 0;
      white-space: nowrap;
  }

  .gq-subservice input:checked+label {
      background: var(--orange);
      color: #fff;
  }

  /* uploads */
  .gq-dropzone.dropzone {
      border: 1.5px dashed var(--line);
      border-radius: 12px;
      background: var(--paper);
      padding: 22px;
      min-height: auto;
      font-family: 'Inter', sans-serif;
  }

  .gq-dropzone.dropzone .dz-message {
      margin: 0;
      font-size: 14px;
      color: var(--ink-soft);
  }

  .gq-dropzone.dropzone .dz-message::before {
      content: '⤒ ';
      color: var(--orange-dark);
  }

  .gq-captcha {
      display: flex;
  }

  /* submit — matches the site's orange pill CTA */
  .gq-submit {
      align-self: flex-start;
      background: var(--orange);
      color: #fff;
      border: none;
      padding: 15px 32px;
      font-size: 14.5px;
      font-weight: 600;
      letter-spacing: .01em;
      border-radius: 999px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: background .2s ease, transform .2s ease;
  }

  .gq-submit:hover {
      background: var(--orange-dark);
      transform: translateY(-1px);
  }

  .gq-submit svg {
      transition: transform .25s ease;
  }

  .gq-submit:hover svg {
      transform: translateX(4px);
  }

  @media (max-width: 560px) {
      .gq-submit {
          width: 100%;
          justify-content: center;
      }
  }

  /* ==========================================================
                             PROCESS — dark grid, matches "How We Make Work Successful"
                             Wraps instead of squeezing into one row, so it never goes
                             thin-and-tall regardless of how many steps there are.
                             ========================================================== */
  .gq-process {
      background: var(--navy-950);
      padding: 96px 15px 104px;
  }

  .gq-process-head {
      max-width: 640px;
      margin: 0 auto 48px;
      text-align: center;
  }

  .gq-process-head .gq-eyebrow {
      justify-content: center;
  }

  .gq-process-head h2 {
      font-size: clamp(26px, 3vw, 36px);
      font-weight: 700;
      color: #fff;
  }

  .gq-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 20px;
  }

  .gq-grid-card {
      background: var(--navy-800);
      border: 1px solid var(--line-dark);
      border-radius: var(--radius);
      padding: 28px 24px;
      transition: transform .2s ease, border-color .2s ease;
  }

  .gq-grid-card:hover {
      transform: translateY(-3px);
      border-color: rgb(248, 248, 248);
  }

  .gq-grid-num {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--orange);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 18px;
  }

  .gq-grid-card h3 {
      font-size: 17px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 8px;
  }

  .gq-grid-card .gq-grid-desc,
  .gq-grid-card .gq-grid-desc p {
      font-size: 14.5px !important;
      color: var(--ink-invert-soft) !important;
      line-height: 1.6;
      margin: 0;
  }

  .gq-process-cta {
      text-align: center;
      margin-top: 50px;
  }

  .gq-process-cta a {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--orange);
      color: white;
      padding: 14px 30px;
      border-radius: 999px;
      font-weight: 600;
      font-size: 14px;
      text-decoration: none;
      transition: background .2s ease;
  }

  .gq-process-cta a:hover {
      background: var(--orange-dark);
      color: #fff;
  }


/* ================================================ 
portfoloi page style
portfoloi page style
===================================================*/
table {
       width: px;
   }

   table,
   table th,
   table td {
       border: solid;
   }

   table th,
   table td {
       border: solid;
   }

   table th>ol>li,
   table td>ul>li,
   table th>ul>li,
   table td>ol>li {
       list-style: initial !important;
       margin-left: 20px;
   }

   .marker {
       background-color: yellow;
   }

   .description>ul>li {
       margin-left: 30px !important;
       list-style: initial;
       font-size: 16px !important;
   }

   .description>ol>li {
       margin-left: 30px !important;
       all: revert;
       font-size: 16px !important;
   }

   .description>p>a {
       color: blue;
       font-weight: bold;
       text-decoration: underline;
   }

   .description>p {
       font-size: 18px !important;
   }

   /* ============ WORKS PAGE THEME ============ */
   #works-page {
       --ink: #0f0e0d;
       --paper: #ffffff;
       --white: #ffffff;
       --soft: #f7f5f3;
       --soft-2: #ececea;
       --line: #e2ded9;
       --muted: #5b564f;
       --faint: #9a948b;
       --accent: #D2241D;
       --accent-2: #10131A;
       --green: #1F9D6B;
       --radius: 20px;
       --ease: cubic-bezier(.22, 1, .36, 1);
       background: var(--paper);
       color: var(--ink);
       font-family: "Inter", system-ui, sans-serif;
       -webkit-font-smoothing: antialiased;
       overflow-x: hidden;
   }

   #works-page a {
       color: inherit;
       text-decoration: none;
   }

   #works-page button {
       font: inherit;
   }

   #works-page img {
       display: block;
       max-width: 100%;
   }

   #works-page .wrap {
       width: min(1180px, calc(100% - 40px));
       margin: 0 auto;
   }

   #works-page h1,
   #works-page h2,
   #works-page h3,
   #works-page h4 {
       font-family: "Space Grotesk", system-ui, sans-serif;
       line-height: 1.05;
   }

   #works-page p {
       color: var(--muted);
       line-height: 1.75;
   }

   #works-page .mono {
       font-family: "JetBrains Mono", monospace;
       font-size: 12px;
       font-weight: 600;
       letter-spacing: .1em;
       text-transform: uppercase;
   }

   #works-page .eyebrow {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 8px 16px 8px 13px;
       border-radius: 999px;
       background: #FDECEB;
       color: var(--accent-2);
       font-size: 13px;
       font-weight: 700;
   }

   #works-page .eyebrow::before {
       content: "";
       width: 7px;
       height: 7px;
       border-radius: 50%;
       background: var(--accent);
       flex: none;
   }

   #works-page .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       min-height: 48px;
       padding: 13px 22px;
       border-radius: 999px;
       border: 1px solid var(--ink);
       font-size: 14px;
       font-weight: 700;
       cursor: pointer;
       background: none;
       transition: transform .28s var(--ease), background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
   }

   #works-page .btn:hover {
       transform: translateY(-2px);
   }

   #works-page .btn-dark {
       background: var(--accent);
       color: var(--white);
       border-color: var(--accent);
   }

   #works-page .btn-dark:hover {
       background: var(--accent-2);
       border-color: var(--accent-2);
   }

   #works-page .btn-light {
       background: var(--white);
       color: var(--ink);
       border-color: var(--line);
   }

   #works-page .btn-light:hover {
       border-color: var(--ink);
   }

   #works-page section {
       padding: clamp(64px, 8vw, 100px) 0;
   }

   #works-page .reveal {
       opacity: 0;
       transform: translateY(20px);
       transition: opacity .7s var(--ease), transform .7s var(--ease);
   }

   #works-page .reveal.in {
       opacity: 1;
       transform: translateY(0);
   }

   /* ============ HERO — dark maroon (matches About page hero) ============ */
   #works-page .works-hero {
       position: relative;
       padding: clamp(60px, 8vw, 100px) 0 50px;
       overflow: hidden;
       border-bottom: none;
       background:
           radial-gradient(60% 55% at 15% 8%, rgba(210, 36, 29, .55) 0%, rgba(210, 36, 29, 0) 60%),
           linear-gradient(160deg, #3B0A0C 0%, #200507 45%, #0B0203 100%);
   }

   #works-page .works-hero::before {
       content: "";
       position: absolute;
       inset: 0;
       background: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
       background-size: 72px 72px;
       opacity: 1;
       mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
       pointer-events: none;
   }

   #works-page .works-hero-inner {
       position: relative;
       z-index: 1;
       max-width: 780px;
   }

   #works-page .works-hero .eyebrow {
       background: rgba(255, 255, 255, .07);
       border: 1px solid rgba(255, 255, 255, .16);
       color: rgba(255, 255, 255, .8);
   }

   #works-page .works-hero h1 {
       margin: 20px 0 16px;
       font-size: clamp(36px, 5.6vw, 60px);
       font-weight: 700;
       color: #fff;
   }

   #works-page .works-hero h1 span {
       color: #EF4444;
   }

   #works-page .works-hero p {
       font-size: clamp(15px, 1.5vw, 18px);
       max-width: 580px;
       color: rgba(255, 255, 255, .68);
   }

   #works-page .works-hero-stats {
       position: relative;
       z-index: 1;
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 1px;
       margin-top: 44px;
       border: 1px solid rgba(255, 255, 255, .12);
       background: rgba(255, 255, 255, .12);
       box-shadow: 0 0 2px 0px rgba(0, 0, 0, .5);
   }

   #works-page .wstat {
       background: var(--white);
       padding: 20px 22px;
   }

   #works-page .wstat b {
       display: block;
       /* font-family: "Space Grotesk", system-ui, sans-serif; */
       font-size: clamp(22px, 3vw, 32px);
       color: var(--accent);
   }

   #works-page .wstat span {
       display: block;
       margin-top: 6px;
       color: var(--muted);
       font-size: 15px;
   }

   /* breadcrumb, adapted to sit inside the dark hero */
   #works-page .works-breadcrumb {
       position: relative;
       z-index: 1;
       margin-top: 18px;
   }

   #works-page .works-breadcrumb ul {
       display: flex;
       gap: 8px;
       list-style: none;
       padding: 0;
       margin: 0;
       font-size: 13px;
       color: rgba(255, 255, 255, .45);
   }

   #works-page .works-breadcrumb ul li:not(:last-child)::after {
       content: "/";
       margin-left: 8px;
       color: rgba(255, 255, 255, .3);
   }

   #works-page .works-breadcrumb ul li a {
       color: rgba(255, 255, 255, .85);
       font-weight: 600;
   }

   #works-page .works-breadcrumb ul li a:hover {
       color: #EF4444;
   }

   /* optional: hero buttons, if you add them to the markup later */
   #works-page .works-hero .btn-dark {
       background: #EF4444;
       border-color: #EF4444;
   }

   #works-page .works-hero .btn-light {
       background: transparent;
       border-color: rgba(255, 255, 255, .4);
       color: #fff;
   }

   #works-page .works-hero .btn-light:hover {
       border-color: #fff;
   }

   /* ============ FILTER ============ */
   #works-page .filter-bar {
       position: sticky;
       top: 0;
       z-index: 20;
       background: rgba(255, 255, 255, .94);
       backdrop-filter: blur(14px);
       border-bottom: 1px solid var(--line);
       padding: 16px 0;
   }

   #works-page .filter-row {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       align-items: center;
   }

   #works-page .filter-btn {
       padding: 10px 16px;
       border-radius: 999px;
       border: 1px solid var(--line);
       background: var(--white);
       font-family: "Space Grotesk", system-ui, sans-serif;
       font-size: 13.5px;
       font-weight: 600;
       color: var(--muted);
       cursor: pointer;
       transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
   }

   #works-page .filter-btn:hover {
       border-color: var(--ink);
       color: var(--ink);
   }

   #works-page .filter-btn.active {
       background: var(--ink);
       border-color: var(--ink);
       color: #fff;
   }

   #works-page .filter-count {
       margin-left: auto;
       color: var(--faint);
       font-size: 13px;
       font-family: "JetBrains Mono", monospace;
   }

   /* ============ FEATURED SPOTLIGHT (demo template — no matching Laravel data) ============ */
   #works-page .spotlight-section {
       border-bottom: 1px solid var(--line);
       background: linear-gradient(180deg, #ffffff, var(--soft));
   }

   #works-page .spotlight-card {
       display: grid;
       grid-template-columns: 1.05fr 1fr;
       gap: 0;
       border: 1px solid var(--line);
       border-radius: 0px;
       overflow: hidden;
       background: var(--white);
       box-shadow: 0 30px 80px rgba(15, 14, 13, .08);
   }

   #works-page .spotlight-visual {
       position: relative;
       background: var(--soft);
       padding: 36px 36px 0;
       display: flex;
       align-items: flex-end;
       overflow: hidden;
   }

   #works-page .spotlight-browser {
       width: 100%;
       border-radius: 14px 14px 0 0;
       border: 1px solid var(--line);
       border-bottom: none;
       overflow: hidden;
       box-shadow: 0 -10px 40px rgba(15, 14, 13, .08);
   }

   #works-page .spotlight-bar {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 11px 14px;
       background: var(--white);
       border-bottom: 1px solid var(--line);
   }

   #works-page .spotlight-dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
   }

   #works-page .spotlight-dot:nth-child(1) {
       background: #ff6058;
   }

   #works-page .spotlight-dot:nth-child(2) {
       background: #ffbd2e;
   }

   #works-page .spotlight-dot:nth-child(3) {
       background: #28c940;
   }

   #works-page .spotlight-url {
       flex: 1;
       margin-left: 8px;
       padding: 5px 10px;
       border-radius: 7px;
       background: var(--soft);
       font-family: "JetBrains Mono", monospace;
       font-size: 10.5px;
       color: var(--faint);
   }

   #works-page .spotlight-screen {
       height: 260px;
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
       overflow: hidden;
   }

   #works-page .spotlight-screen::after {
       content: "";
       position: absolute;
       inset: 0;
       background: linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px);
       background-size: 26px 26px;
       opacity: .5;
   }

   #works-page .spotlight-screen span {
       font-family: "Space Grotesk", system-ui, sans-serif;
       font-size: 52px;
       font-weight: 700;
       color: #fff;
       position: relative;
       z-index: 1;
   }

   #works-page .spotlight-body {
       padding: 40px;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }

   #works-page .spotlight-tag {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 16px;
   }

   #works-page .spotlight-live {
       display: inline-flex;
       align-items: center;
       gap: 7px;
       padding: 6px 12px;
       border-radius: 999px;
       background: rgba(31, 157, 107, .12);
       color: var(--green);
       font-family: "JetBrains Mono", monospace;
       font-size: 10.5px;
       font-weight: 700;
       letter-spacing: .06em;
       text-transform: uppercase;
   }

   #works-page .spotlight-dotpulse {
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: currentColor;
       position: relative;
   }

   #works-page .spotlight-dotpulse::after {
       content: "";
       position: absolute;
       inset: -4px;
       border-radius: 50%;
       border: 1.2px solid var(--green);
       animation: pulseRing 1.8s ease-out infinite;
   }

   @keyframes pulseRing {
       0% {
           transform: scale(.6);
           opacity: .9;
       }

       100% {
           transform: scale(2.1);
           opacity: 0;
       }
   }

   #works-page .spotlight-body h3 {
       font-size: clamp(26px, 3.4vw, 38px);
       margin-bottom: 12px;
   }

   #works-page .spotlight-body p {
       font-size: 15px;
       margin-bottom: 22px;
   }

   #works-page .spotlight-results {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 1px;
       background: var(--line);
       border: 1px solid var(--line);
       border-radius: 14px;
       overflow: hidden;
       margin-bottom: 26px;
   }

   #works-page .spotlight-results .r {
       background: var(--white);
       padding: 14px 12px;
   }

   #works-page .spotlight-results .r b {
       display: block;
       font-family: "Space Grotesk", system-ui, sans-serif;
       font-size: 20px;
       color: var(--accent);
   }

   #works-page .spotlight-results .r span {
       display: block;
       margin-top: 3px;
       font-size: 10.5px;
       color: var(--faint);
       text-transform: uppercase;
       letter-spacing: .04em;
   }

   /* ============ WORKS GRID (dynamic — $portfolios) ============ */
   #works-page .works-grid-section {
       border-bottom: 1px solid var(--line);
   }

   #works-page .works-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 18px;
   }

   #works-page .work-card {
       display: block;
       border: 1px solid var(--line);
       border-radius: 0px;
       background: var(--white);
       overflow: hidden;
       transition: transform .32s var(--ease), box-shadow .32s var(--ease);
   }

   #works-page .work-card:hover {
       transform: translateY(-6px);
       box-shadow: 0 26px 60px rgba(15, 14, 13, .1);
   }

   #works-page .wc-browser {
       border-bottom: 1px solid var(--line);
   }

   #works-page .wc-bar {
       display: flex;
       align-items: center;
       gap: 6px;
       padding: 9px 12px;
       background: var(--soft);
       border-bottom: 1px solid var(--line);
   }

   #works-page .wc-dot {
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: var(--line);
   }

   #works-page .wc-url {
       flex: 1;
       margin-left: 6px;
       padding: 4px 8px;
       border-radius: 6px;
       background: var(--white);
       font-family: "JetBrains Mono", monospace;
       font-size: 9.5px;
       color: var(--faint);
       border: 1px solid var(--line);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }

   #works-page .wc-screen {
       height: 150px;
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
   }

   #works-page .wc-screen img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       position: relative;
       z-index: 1;
   }

   #works-page .wc-screen.no-image::after {
       content: "";
       position: absolute;
       inset: 0;
       background: linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px);
       background-size: 20px 20px;
       opacity: .5;
   }

   #works-page .wc-screen span {
       font-family: "Space Grotesk", system-ui, sans-serif;
       font-size: 30px;
       font-weight: 700;
       color: #fff;
       position: relative;
       z-index: 1;
   }

   #works-page .wc-info {
       padding: 20px;
   }

   #works-page .wc-info-top {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 10px;
       margin-bottom: 4px;
   }

   #works-page .wc-info h3 {
       font-size: 18px;
   }

   #works-page .wc-arrow {
       width: 30px;
       height: 30px;
       border-radius: 50%;
       border: 1px solid var(--line);
       display: flex;
       align-items: center;
       justify-content: center;
       flex: none;
       transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
   }

   #works-page .wc-arrow svg {
       width: 13px;
       height: 13px;
       transition: transform .25s var(--ease);
   }

   #works-page .work-card:hover .wc-arrow {
       background: var(--ink);
       border-color: var(--ink);
   }

   #works-page .work-card:hover .wc-arrow svg {
       stroke: #fff;
       transform: rotate(45deg);
   }

   #works-page .wc-cat {
       color: var(--faint);
       font-size: 12px;
   }

   #works-page .works-empty {
       display: none;
       padding: 60px 22px;
       text-align: center;
       border: 1px dashed var(--line);
       border-radius: 16px;
       color: var(--muted);
       grid-column: 1/-1;
   }

   #works-page .works-empty.show {
       display: block;
   }

   /* ============ CTA (demo template — no matching Laravel data) ============ */
   #works-page .works-cta {
       padding: clamp(56px, 8vw, 92px) 0;
       text-align: center;
   }

   #works-page .works-cta-box {
       max-width: 900px;
       margin: 0 auto;
       padding: clamp(28px, 5vw, 54px);
       border: 1px solid var(--line);
       border-radius: 0px;
       background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(247, 245, 243, .96)), radial-gradient(circle at 14% 0%, rgba(226, 35, 26, .14), transparent 34%);
       box-shadow: 0 26px 80px rgba(15, 14, 13, .09);
   }

   #works-page .works-cta-box h2 {
       margin: 14px auto 18px;
       font-size: clamp(28px, 4.4vw, 46px);
       max-width: 660px;
   }

   #works-page .works-cta-box p {
       max-width: 540px;
       margin: 0 auto 26px;
       font-size: 16px;
   }

   @media (max-width:980px) {
       #works-page .works-hero-stats {
           grid-template-columns: repeat(2, 1fr);
       }

       #works-page .spotlight-card {
           grid-template-columns: 1fr;
       }

       #works-page .spotlight-visual {
           padding: 24px 24px 0;
       }

       #works-page .works-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }

   @media (max-width:640px) {
       #works-page .wrap {
           width: min(100% - 28px, 1180px);
       }

       #works-page .works-hero h1 {
           font-size: clamp(30px, 10vw, 44px);
       }

       #works-page .works-hero-stats {
           grid-template-columns: 1fr 1fr;
       }

       #works-page .works-grid {
           grid-template-columns: 1fr;
       }

       #works-page .spotlight-results {
           grid-template-columns: 1fr;
       }

       #works-page .filter-count {
           display: none;
       }
   }

   @media (prefers-reduced-motion:reduce) {

       #works-page *,
       #works-page *::before,
       #works-page *::after {
           animation: none !important;
           transition: none !important;
           scroll-behavior: auto !important;
       }
   }