.forrester-img {
            overflow-x: hidden;
        }
        .res-font{
            position: relative;
            right: 8px;
        }
        .forrester-image {
            max-width: 100%;
            height: auto;
        }

        @media (min-width:1400px) {
            .testimonial-section {
                max-width: 1400px !important;
            }

            .mac-fnt {
                font-size: 50px !important;
            }

                    .home-hero {
            /* background: url(/images/HomePage/Banner_02.png) no-repeat; */
            /* background-size: cover !important; */
            height: 80vh !important;
            /* min-height: 800px; */
        }

        .home-hero .hero-content{
            position: relative;
            bottom: 15px;
        }



            

            .forrester-img {
                min-height: 60vh;
                /* Adjust as needed */
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .box_1 {
                width: 100%;
                max-width: 380px !important;
            }


            .mac-ver-res {
                position: relative;
                left: 80px;
            }
        }

        /* ─── SECTION ─── */
        .testimonial-section {
            width: 100%;
            max-width: 1250px;
            padding: 60px 20px;
            text-align: center;
            position: relative;
        }

        @media only screen and (min-width: 1024px) {
            .role {
                position: relative;
                left: 20px;
            }
        }

        .testimonial-section h2 {
            font-size: 30px;
            font-weight: 900;
            color: #0d1b3e;
            margin-bottom: 20px;
            letter-spacing: -0.3px;
        }

        /* ─── CARDS ROW ─── */
        .cards-row {
            display: flex;
            gap: 16px;
            align-items: stretch;
            justify-content: center;
            height: 440px;
        }

        /* ─── SINGLE CARD ─── */
        .card-item {
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            background: #d5d0ca;
            flex-shrink: 0;
        }

        /* collapsed (pill) */
        .card-item {
            flex: 0 0 105px;
            border-radius: 100px;
        }

        /* expanded */
        .card-item.active {
            flex: 0 0 540px;
            border-radius: 26px;
        }

        /* ─── TWO IMAGES ─── */

        /* Image for COLLAPSED state (pill headshot) */
        .img-collapsed {
            position: absolute;
            inset: 0;
            z-index: 2;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            transition: opacity 0.4s ease;
            opacity: 1;
        }

        .card-item.active .img-collapsed {
            opacity: 0;
            /* hide when expanded */
        }

        /* Image for EXPANDED state (different photo with content bg) */
        .img-expanded {
            position: absolute;
            inset: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            transition: opacity 0.5s ease 0.1s, transform 0.6s ease;
            opacity: 0;
            transform: scale(1.08);
        }

        .card-item.active .img-expanded {
            opacity: 1;
            /* show when expanded */
            /* transform: scale(1); */
        }

        /* ─── GRADIENT OVERLAY (expanded only) ─── */
        .card-item::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 3;
            background: linear-gradient(to top,
                    rgba(0, 0, 0, 0.82) 0%,
                    rgba(0, 0, 0, 0.40) 40%,
                    rgba(0, 0, 0, 0.0) 65%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }

        .card-item.active::after {
            opacity: 1;
        }

        /* ─── COLLAPSED VERTICAL LABEL ─── */
        .collapsed-info {
            position: absolute;
            bottom: 10px;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 6;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            padding-bottom: 26px;
            gap: 8px;
            transition: opacity 0.25s ease;
        }

        .card-item.active .collapsed-info {
            opacity: 0;
            pointer-events: none;
        }

        /* dark scrim on collapsed pill so text is readable */
        .collapsed-info::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top,
                    rgba(0, 0, 0, 0.70) 0%,
                    rgba(0, 0, 0, 0.15) 55%,
                    rgba(0, 0, 0, 0.0) 100%);
                    height: 115%;
            border-radius: inherit;
            pointer-events: none;
        }

        .collapsed-info .company-logo-small {
            position: relative;
            z-index: 1;
            width: 32px;
            height: 32px;
            object-fit: contain;
            filter: brightness(0) invert(1);
        }

        .vertical-text {
            position: relative;
            z-index: 1;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transform: rotate(269deg);
            color: #fff;
            text-align: center;
            text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
        }

        .vertical-text img {
            position: relative;
            z-index: 1;
            height: 25px;
            width: auto;
            transform: rotate(90deg);
        }


        .vertical-text .name {
            font-weight: 700 !important;
            font-size: 12px;
            display: block;
        }

        .vertical-text .role {
            font-weight: 700;
            font-size: 11px;
            display: block;
            /* margin-top: 4px; */
        }

        /* ─── EXPANDED CONTENT ─── */
        .expanded-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 6;
            padding: 28px;
            color: #fff;
            transform: translateY(24px);
            opacity: 0;
            transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.12s;
            pointer-events: none;
        }

        .card-item.active .expanded-info {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
        }

        .expanded-top {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            margin-bottom: 14px;
        }

        .cta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 14px;
            background: transparent;
            border-radius: 999px;
            border: 1px solid #FFFFFF;
            color: #fff;
            font-weight: 700;
            font-size: 16px;
            margin-top: 20px;
            text-decoration: none;
        }

        /* Arrow */
        .cta::after {
            content: "";
            width: 16px;
            height: 16px;
            background: url("/images/partnership/arrow-icon.svg") no-repeat center;
            background-size: contain;
            transition: background 0.3s ease;
        }

        /* Hover effect */
        .cta:hover {
            background: linear-gradient(#E40078, #4D00FF);
            color: #fff;
            border: unset;
        }

        /* Change arrow image on hover */
        .cta:hover::after {
            background: url("/images/partnership/arrow-hover.svg") no-repeat center;
            background-size: contain;
        }


        .brand-name {
            font-size: 22px;
            font-weight: 800;
            letter-spacing: -0.2px;
        }

        .brand-name span {
            color: #7b61ff;
        }

        .person-info {
            text-align: right;
        }

        .person-info .person-name {
            font-weight: 700 !important;
            font-size: 15px;
        }

        .person-info .person-role {
            font-size: 12px;
            /* opacity: 0.75; */
        }

        .card-desc {
            font-size: 13px;
            line-height: 1.6;
            opacity: 0.92;
            max-width: 420px;
            margin-bottom: 16px;
        }

        .watch-link:hover {
            color: #fff;
        }

        /* Watch Now */
        .watch-link {
            display: inline-flex;
            display: flex;
            align-items: center;
            gap: 8px;
            color: #fff;
            text-decoration: none;
            font-weight: 700;
            font-size: 14px;
            /* transition: gap 0.3s ease; */
        }

        /* .watch-link:hover {
      gap: 12px;
      color: #fff;
    } */

        .play-circle {
            width: 24px;
            height: 24px;
            background: #6c5ce7;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            box-shadow: 0 4px 16px rgba(108, 92, 231, 0.5);
            transition: transform 0.3s ease;
        }

        /* .watch-link:hover .play-circle {
      transform: scale(1.15);
    } */


        /* // .testimonial-section */

        /* ─── SECTION ─── */
        .testimonial-section1 {
            background: url('/images/HomePage/background.png');
            /* background: linear-gradient(180deg, #ece8f4 0%, #dfd9ee 50%, #ece8f4 100%); */
            padding: 64px 20px 52px;
            text-align: center;
        }

        /* ─── HEADLINE ─── */
        .headline {
            font-size: 34px;
            font-weight: 900;
            color: #1a0e3e;
            margin-bottom: 44px;
        }

        .headline .dot {
            display: inline-block;
            width: 9px;
            height: 9px;
            background: #3b22a1;
            border-radius: 50%;
            vertical-align: middle;
            position: relative;
            top: -1px;
            margin-left: 1px;
        }

        /* ─── CARD WRAPPER (holds stacked + main) ─── */
        .card-wrapper {
            position: relative;
            max-width: 740px;
            height: 290px;
            margin: 0 auto;
        }

        /* ─── STACKED WHITE CARDS (decorative) ─── */
        .bg-card {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 20px;
            top: 0;
            left: 0;
        }

        .bg-card-1 {
            transform: rotate(-3.5deg) translate(-12px, 8px);
            opacity: 0.45;
            z-index: 1;
        }

        .bg-card-2 {
            transform: rotate(-1.8deg) translate(-6px, 4px);
            opacity: 0.65;
            z-index: 2;
        }

        /* ─── MAIN CARD (slides sit here) ─── */
        .main-card {
            position: relative;
            z-index: 3;
            width: 100%;
            height: 100%;
            border-radius: 20px;
            overflow: hidden;
        }

        /* ─── SINGLE SLIDE ─── */
        .slide {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: stretch;
            background: #2b1a6e;
            border-radius: 20px;
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
        }

        .slide.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* ─── LEFT: LOGO ─── */
        .slide-left {
            flex: 0 0 210px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 28px;
        }

        .logo-box {
            width: 110px;
            height: 110px;
            /* background: #fff; */
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
            position: relative;
        }

        .logo-box::before {
            content: '';
            position: absolute;
            inset: -5px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            transform: rotate(-6deg);
            z-index: -1;
        }

        .logo-box img {
            width: auto;
            height: 145px;
            object-fit: contain;
        }

        /* ─── RIGHT: CONTENT ─── */
        .slide-right {
            flex: 1;
            padding: 32px 36px 32px 8px;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }

        .slide-right h3 {
            font-size: 18px;
            /* font-weight: 800; */
            line-height: 1.4;
            margin-bottom: 12px;
            max-width: 400px;
        }

        .slide-right p {
            font-size: 12.5px;
            line-height: 1.7;
            opacity: 0.82;
            max-width: 400px;
            margin-bottom: 16px;
        }

        .slide-right .author {
            font-size: 12.5px;
            /* font-style: italic; */
            opacity: 0.85;
            position: relative;
            right: 90px;
        }

        .quote-mark {
            position: absolute;
            z-index: 2000 !important;
            bottom: -25px;
            right: 26px;
            font-size: 42px;
            font-weight: 900;
            color: rgba(255, 255, 255, 0.08);
            line-height: 1;
            pointer-events: none;
            user-select: none;
        }

        .quote-mark svg {
            height: 60px;
            width: 60px;
        }

        /* ─── DOTS ─── */
        .dots {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-top: 32px;
        }

        .dot-btn {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: none;
            background: #bcb3d4;
            cursor: pointer;
            padding: 0;
            transition: background 0.3s ease, transform 0.3s ease;
        }

        .dot-btn.active {
            background: #2b1a6e;
            transform: scale(1.15);
        }

        .dot-btn:hover {
            background: #6c5ce7;
        }

        /* ─── RESPONSIVE: TABLETS ─── */
        @media (max-width: 768px) {
            .testimonial-section1 {
                padding: 48px 16px 40px;
            }

            .headline {
                font-size: 26px;
                margin-bottom: 36px;
            }

            .card-wrapper {
                height: auto;
                min-height: 340px;
            }

            .slide {
                flex-direction: column;
                height: auto;
                min-height: 340px;
            }

            .slide-left {
                flex: 0 0 auto;
                padding: 24px 24px 12px;
            }

            .logo-box {
                width: 80px;
                height: 80px;
            }

            .logo-box img {
                width: 48px;
                height: 48px;
            }

            .slide-right {
                padding: 8px 24px 28px;
                text-align: left;
            }

            .slide-right h3 {
                font-size: 16px;
                max-width: 100%;
            }

            .slide-right p {
                max-width: 100%;
            }

            .bg-card-1,
            .bg-card-2 {
                display: none;
            }

            .quote-mark {
                font-size: 56px;
                bottom: 0px;
                right: 16px;
            }
        }

        /* ─── RESPONSIVE: SMALL PHONES (≤480px) ─── */
        @media (max-width: 480px) {
            .testimonial-section1 {
                padding: 36px 12px 32px;
            }

            .headline {
                font-size: 20px;
                margin-bottom: 28px;
                line-height: 1.4;
            }

            /* Stack the dots on smaller headline */
            .headline .dot {
                width: 7px;
                height: 7px;
            }

            .card-wrapper {
                min-height: auto;
            }

            /* Let the slide auto-size to content instead of fixed min-height */
            .slide {
                position: relative;
                /* z-index: 2000; */
                flex-direction: column;
                min-height: auto;
            }

            /* Only the active slide should be visible; hide others completely */
            .slide:not(.active) {
                position: absolute;
                inset: 0;
            }

            .main-card {
                height: auto;
            }

            .slide-left {
                padding: 20px 20px 8px;
            }

            .logo-box {
                width: 64px;
                height: 64px;
                border-radius: 14px;
            }

            .logo-box img {
                width: auto;
                height: 78px;
            }

            .slide-right {
                padding: 6px 18px 22px;
            }

            .slide-right h3 {
                font-size: 14px;
                margin-bottom: 8px;
            }

            .slide-right p {
                font-size: 11.5px;
                line-height: 1.6;
                margin-bottom: 12px;
            }

            .slide-right .author {
                font-size: 11px;
            }

            .quote-mark {
                font-size: 42px;
                bottom: -15px;
                right: 12px;
            }

            .quote-mark svg {
                height: 30px;
                width: 30px;
            }

            .dots {
                margin-top: 24px;
                gap: 8px;
            }

            .dot-btn {
                width: 10px;
                height: 10px;
            }
        }

        /* ─── RESPONSIVE: VERY SMALL SCREENS (≤360px) ─── */
        @media (max-width: 360px) {
            .headline {
                font-size: 17px;
            }

            .slide-right h3 {
                font-size: 13px;
            }

            .slide-right p {
                font-size: 11px;
            }

            .slide-right .author {
                font-size: 10px;
            }

            .slide-left {
                padding: 16px 16px 6px;
            }

            .slide-right {
                padding: 4px 14px 18px;
            }
        }

        /* ─── TOUCH: disable hover styles on touch devices ─── */
        @media (hover: none) {
            .dot-btn:hover {
                background: #bcb3d4;
            }

            .dot-btn.active:hover {
                background: #2b1a6e;
            }
        }


        /* ─── RESPONSIVE ─── */
        @media (max-width: 992px) {
            .cards-row {
                flex-direction: column;
                height: auto;
                align-items: center;
            }

            .card-item {
                width: 100%;
                max-width: 500px;
                height: 110px;
                flex: 0 0 110px;
                border-radius: 26px;
            }

            .card-item.active {
                height: 440px;
                flex: 0 0 440px;
                border-radius: 26px;
            }

            .collapsed-info {
                flex-direction: row;
                padding: 0 20px;
                justify-content: center;
                align-items: center;
            }

            .vertical-text {
                writing-mode: horizontal-tb;
                transform: none;
            }
        }












        .home-hero {
            background: url(/images/HomePage/Banner_02.png) no-repeat;
            background-size: cover !important;
            height: 86vh;
            /* min-height: 800px; */
        }

        .collaborative-intelligence {
            background: url('/images/HomePage/bg-img.png') no-repeat center center !important;
            background-size: cover !important;
            min-height: 70vh;
            width: auto;

        }




        @media (max-width: 900px) {
            .home-hero {
                position: relative;
                width: 100vw;
            }

            .home-hero img {
                width: 100%;
                height: auto;
                /* keeps natural height */
                display: block;
            }

            .home-hero .overlay-text {
                position: absolute;
                top: 60%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #fff;
                text-align: center;
            }
        }

        .home-hero .hero-content h1 {
            letter-spacing: 0px;
            line-height: 1.2;
            font-size: 44px;
            font-weight: bold;
            color: #FFFFFF;
            /* text-transform: uppercase; */
            opacity: 1;
        }

        .btn:first-child:active {
            color: unset;
            background-color: unset;
            border-color: unset;
        }

        .play-button-overlay {
            position: absolute;
            top: 67%;
            left: 76%;
            width: 60px;
            height: 60px;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .play-button-overlay1 {
            position: absolute;
            top: 65%;
            left: 78%;
            width: 60px;
            height: 60px;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }


        body {
            overflow-x: hidden;
        }

        @media (max-width: 768px) {

            .play-button-overlay {
                position: absolute;
                top: 86%;
                left: 50%;
            }

            .collaborative-intelligence {

                min-height: 40vh;
                width: auto;
            }
                    .res-font{
            position: relative;
            right: 3px;
        }

        }


        .card {
            background-color: #FFFFFF;
            color: #162456 !important;
            padding: 48px 32px 40px 32px;
            /* border-radius: 17px; */
            text-align: center;
            border: none !important;

        }


        .card h2 {
            font-size: 30px;
            font-weight: 700;
            /* margin-bottom: 16px; */
            letter-spacing: -1px;
        }

        .card p {
            font-size: 20px;
            font-weight: 400;
            margin-bottom: 40px;
            color: #d1d5db;
        }

        .stats {
            display: flex;
            justify-content: center;
            gap: 80px;
            margin: 40px;
        }

        .stat {
            min-width: 160px;
        }

        .stat .number {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 8px;
            color: #3100B2 !important;
            letter-spacing: -2px;
        }

        .stat .desc {
            font-size: 1.1rem;
            font-weight: 400;
            color: #e0e7ef;
            line-height: 1.3;
        }

        @media (max-width: 700px) {
            .stats {
                flex-direction: column;
                gap: 32px;
            }
        }

        .black-col {
            color: #2B2B2B !important;
        }

        /* ─── BASE BUTTON STYLES ─── */
        .borderClass {
            display: inline-block;
        }

        .borderClass button {
            border: 1px solid #C200DB;
            border-radius: 22px;
            height: 40px;
            min-width: 130px;
            font-size: 14px;
            font-weight: 600;
            white-space: nowrap;
            transition: all 0.3s ease;
        }

        .borderClass button:hover {
            background: #f3e8ff;
            transform: translateY(-1px);
        }

        .borderClass button svg {
            vertical-align: middle;
            transition: transform 0.3s ease;
        }

        .borderClass button:hover svg {
            transform: translateX(2px);
        }

        /* ══════════════════════════════════════
     RESPONSIVE — same height/width, 
     but scale text and icon inside
     ══════════════════════════════════════ */

        /* ── Large Tablet (max 991px) ── */
        @media (max-width: 991px) {
            .borderClass button {
                font-size: 13px;
                min-width: 120px;
                padding-left: 12px !important;
                padding-right: 12px !important;
            }

            .borderClass button svg {
                width: 15px;
                height: 15px;
            }
        }

        /* ── Tablet / Large Phone (max 767px) ── */
        @media (max-width: 767px) {
            .borderClass {
                width: auto !important;
                display: inline-block;
            }

            .mob-fnt {
                font-size: 12px !important;
            }

            .borderClass button {
                font-size: 13px;
                min-width: 115px;
                height: 38px;
                padding-left: 10px !important;
                padding-right: 10px !important;
            }

            .borderClass button svg {
                width: 14px;
                height: 14px;
                margin-left: 4px !important;
            }

            .card {
                padding: 0 !important;
            }

            .mt-15 {
                position: relative;
                top: 70px;
            }

            .mt-10 {
                position: relative;
                top: 75px;
            }

            .track img {
                margin: 0 10px;
            }


        }

        /* ── Small Phone (max 480px) ── */
        @media (max-width: 480px) {
            .borderClass button {
                font-size: 12px;
                min-width: 105px;
                height: 36px;
                padding-left: 8px !important;
                padding-right: 8px !important;
                border-radius: 18px;
            }

            .mob-fnt {
                font-size: 12px !important;
            }

            .borderClass button svg {
                width: 13px;
                height: 13px;
                margin-left: 3px !important;
            }
        }

        .hover-btn:hover {
            background-color: #FFFFFF !important;
            color: black !important;

        }

        .hover-btn1 {
            font-weight: bold !important;
        }

        .hover-btn1:hover {
            background: linear-gradient(to right, #E40078, #4D00FF);
            color: #FFFFFF !important;

        }

        .action-arrow {
            height: 1.5px;
            background-color: #C7C7C7 !important;
            width: 100%;

        }



        /* ── Very Small Phone (max 360px) ── */
        @media (max-width: 360px) {
            .borderClass button {
                font-size: 11px;
                min-width: 95px;
                height: 34px;
                padding-left: 6px !important;
                padding-right: 6px !important;
                border-radius: 17px;
            }

            .mob-fnt {
                font-size: 12px !important;
            }

            .borderClass button svg {
                width: 12px;
                height: 12px;
                margin-left: 2px !important;
            }
        }



        /* // mobile */
        .home-hero-mobile {
            background: url('/images/HomePage/mobile_version.png');
            background-position: center;
            background-repeat: none;
            background-size: 100% 100%;

            display: block;
            position: relative;
            overflow: hidden;
        }

        .home-hero-mobile .banner-image {
            position: absolute;
            object-fit: cover;
            object-position: center bottom;
        }


        /* Text content over image */
        .home-hero-mobile .overlay-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: #ffffff;
            padding: 80px 20px 60px;
            min-height: 73vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .home-hero-mobile .hero-title {
            font-size: 38px;
            font-weight: 700;
            line-height: 1.15;
            color: #ffffff;
            margin-bottom: 14px;
        }

        .section-divider {
            border: none;
            border-top: 2.5px solid #C7C7C7;
            width: 130%;
            margin: 20px 0;
        }

        .home-hero-mobile .hero-subtitle {
            font-size: 20px;
            font-weight: 400;
            line-height: 1.4;
            color: #FFFFFF;
            margin-bottom: 35px;
            padding: 0 10px;
            opacity: 100;
            /* text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); */
        }

        /* CTA Button — Orange/Red gradient with glow */
        .home-hero-mobile .cta-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(to right, #E40078, #4D00FF);
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            padding: 16px 66px;
            border-radius: 50px;
            text-decoration: none;
            /* border: 2px solid rgba(255, 255, 255, 0.15); */
            /* transition: all 0.3s ease; */
            /* box-shadow:
                0 0 20px rgba(255, 80, 50, 0.5),
                0 0 40px rgba(255, 80, 50, 0.25); */
        }


        .home-hero-mobile .cta-btn .arrow-circle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
        }

        /* ===== Bottom Stats Bar ===== */
        .stats-bar {
            background: linear-gradient(135deg, #0a0528, #1a0a4a);
            padding: 24px 16px;
            text-align: center;
        }

        .stats-bar .stats-title {
            font-size: 22px;
            font-weight: 700;
            color: #ffffff;
            line-height: 1.3;
        }

        .stats-bar .stats-title span {
            color: #5eb3ff;
        }

        .border-cli {
            border: 1px solid #DAD3FC;
            border-radius: 20px;
            height: 21vh;
            width: 95%;
            margin-left: 10px;
        }

        .track img {
            height: 60px;
            width: auto;
        }

        .blue-col {
            color: #162456 !important;
        }


        /* ===== Responsive ===== */
        @media (min-width: 576px) {
            .home-hero-mobile .hero-title {
                font-size: 34px;
            }

            .home-hero-mobile .hero-subtitle {
                font-size: 16px;
            }

            .home-hero-mobile .overlay-content {
                padding: 100px 30px 80px;
            }
        }

        @media (min-width: 992px) {

            .home-hero-mobile,
            .stats-bar {
                display: none;
            }
        }
        /* ── Banner container ── */
        .survey-banner {
            background: linear-gradient(to right, #190040, #370067);
            border-radius: 16px;
            max-width: 390px;
            height: 20vh;
            width: 100%;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(46, 30, 110, 0.35);
        }

        /* ── Title text ── */
        .banner-title {
            color: #ffffff;
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.35;
            margin-bottom: 0;
        }

        /* ── "Read the full Survey Report" link text ── */
        .banner-link {
            color: #FFFFFF;
            font-size: 10px;
            font-weight: 700;
            white-space: nowrap;
        }

        /* ── Orange dot ── */
        .banner-dot {
            color: #f97316;
            font-size: 0.65rem;
            line-height: 1;
        }

        /* ── Right image column ── */
        .banner-img-col {
            position: relative;
            min-height: 120px;
        }

        .banner-book-img {
            width: 100%;
            max-width: 110px;
            height: auto;
            /* display: block; */
        }

        /* ── Mobile tweaks (< 360px very small screens) ── */
        @media (max-width: 359px) {
            .banner-title {
                font-size: 0.85rem;
            }

            .banner-link {
                font-size: 0.65rem;
            }

            .banner-book-img {
                max-width: 90px;
            }
        }



        .CostofInaction {
            width: 100%;
            /* background-color: #F5F5F5 !important; */
            padding: 40px 0;
            box-sizing: border-box;
            overflow-x: hidden !important;

        }

        .box_1 {
            width: 100%;
            max-width: 330px;
            height: auto;
            border-radius: 17px;
            margin: 0 auto;
        }




        .box_1 img {
            max-width: 100%;
            height: auto;
            display: block;
        }


        .start-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            border: 1px solid #c084fc;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }

        .start-btn .icon {
            display: flex;
            align-items: center;
            justify-content: center;

            width: 18px;
            height: 18px;

            color: white;
            border-radius: 50%;

            font-size: 12px;
            line-height: 1;
        }

        .mt-lg-80 {
            position: relative;
            top: 60px;
        }

        .mt-lg-40 {
            position: relative;
            top: 70px;
        }

        .service-card {
            background-color: #EFEFEF !important;
            border: 1px solid #CE9DCE !important;
            box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16) !important;
        }

        .featured-card {
            background-color: #FFFFFF !important;
        }


        /* .start-btn:hover {
            background: #e9d5ff;
        } */


        /* #header-india-container>* {
            margin-top: 38px !important;
        } 

        .text-para {
            position: relative;
            bottom: 8px;
        }

        @media (max-width:764px) {
            .promotion-banner {
                height: 52px !important;
            }

            .text-para {
                position: relative;
                top: 1px;
                font-size: 15px !important;
            }
            #header-india-container>* {
            margin-top: 45px !important;
        } 
        } */


                .hero-image {
                    width: 100%;
                    max-width: 200px;
                    display: block;
                    margin: 0 auto 20px;
                    /* centers and adds space below */
                }

                /* IMAGE + TEXT CARD (TEXT → IMAGE) */
                .image-text-card {
                    display: flex;
                    flex-direction: column;
                    box-shadow: 0px 3px 6px #00000029;
                    padding: 0;
                }

                /* TEXT AREA */
                .image-text-card .content {
                    padding: 20px 24px;
                }

                .image-wrapper {
                    flex: 1;
                    /* image fills remaining height */
                    overflow: hidden;
                }

                .image-wrapper img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    padding: 10px;
                    border-radius: 25px !important;
                }


        .cookie-banner-effect {
            /* font-size: 30px; */
            /* transform: translateY(20px); */
            transform: translateX(100%);
            animation: cookie-banner 1s 1s 1 forwards;
        }

        @keyframes cookie-banner {
            0% {
                transform: translateX(-100%);
            }

            100% {
                transform: translateX(0%);
            }
        }

        .accordion-button:not(.collapsed) {
            background-color: #3F5696 !important;
        }


        .form-switch .form-check-input:checked {
            background-position: right center;
            --bs-form-switch-bg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCI+PGRlZnM+PGZpbHRlciBpZD0iRWxsaXBzZV8yNTgwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIGZpbHRlclVuaXRzPSJ1c2VyLXNwYWNlIj48ZmVPZmZzZXQgZHg9Ii0wLjUiIGlucHV0PSJTb3VyY2VBbHBoYSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjAuNSIgcmVzdWx0PSJibHVyIi8+PGZlRmxvb2QgZmxvb2QtY29sb3I9IiMyYjUzNjMiIGZsb29kLW9wYWNpdHk9IjAuNTY5Ii8+PGZlQ29tcG9zaXRlIG9wZXJhdG9yPSJpbiIgaW4yPSJibHVyIi8+PGZlQ29tcG9zaXRlIGluPSJTb3VyY2VHcmFwaGljIi8+PC9maWx0ZXI+PC9kZWZzPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsIDAsIDAsIDEsIDAsIDApIiBmaWx0ZXI9InVybCgjRWxsaXBzZV8yNTgwKSI+PGNpcmNsZSBpZD0iRWxsaXBzZV8yNTgwLTIiIGRhdGEtbmFtZT0iRWxsaXBzZSAyNTgwIiBjeD0iNS41IiBjeT0iNS41IiByPSI1LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIgMS41KSIgZmlsbD0iIzAwMjk5OCIvPjwvZz48L3N2Zz4=") !important;

        }

        .form-check-input:checked[type=checkbox] {
            --bs-form-switch-bg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCI+PGRlZnM+PGZpbHRlciBpZD0iRWxsaXBzZV8yNTgwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIGZpbHRlclVuaXRzPSJ1c2VyLXNwYWNlIj48ZmVPZmZzZXQgZHg9Ii0wLjUiIGlucHV0PSJTb3VyY2VBbHBoYSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjAuNSIgcmVzdWx0PSJibHVyIi8+PGZlRmxvb2QgZmxvb2QtY29sb3I9IiMyYjUzNjMiIGZsb29kLW9wYWNpdHk9IjAuNTY5Ii8+PGZlQ29tcG9zaXRlIG9wZXJhdG9yPSJpbiIgaW4yPSJibHVyIi8+PGZlQ29tcG9zaXRlIGluPSJTb3VyY2VHcmFwaGljIi8+PC9maWx0ZXI+PC9kZWZzPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsIDAsIDAsIDEsIDAsIDApIiBmaWx0ZXI9InVybCgjRWxsaXBzZV8yNTgwKSI+PGNpcmNsZSBpZD0iRWxsaXBzZV8yNTgwLTIiIGRhdGEtbmFtZT0iRWxsaXBzZSAyNTgwIiBjeD0iNS41IiBjeT0iNS41IiByPSI1LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIgMS41KSIgZmlsbD0iIzAwMjk5OCIvPjwvZz48L3N2Zz4=") !important;
        }

        .accordion-button::after {

            background-image: url('./images/cookies/up.svg') !important;
        }

        .accordion-button::before {

            background-image: url('./images/cookies/town.svg') !important;
        }

        .hero-section {
            /* pink to blue */
            background: transparent linear-gradient(292deg, #1A53BC 0%, #6C3AEF 37%, #B50068 100%) 0% 0% no-repeat padding-box;
            color: white;
            border-radius: 20px;
            padding: 80px 30px;
            text-align: center;
            max-width: 900px;
            margin: 50px auto;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .hero-section h2 {
            font-size: 36px;
            line-height: 56px;
            /* margin-bottom: 30px; */
            font-weight: bold;
            line-height: 1.4;
            color: #fff !important;
        }

        .cta-button {
            display: inline-block;
            background: white;
            color: black;
            padding: 12px 24px;
            border-radius: 30px;
            font-weight: bold;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .cta-button span {
            margin-left: 15px;
        }

        .cta-button:hover {
            background: #f1f1f1;
        }