.bg-neuro {
            background: radial-gradient(circle at 99% 87%, rgba(255, 200, 80, 0.9) 0%, rgba(255, 180, 50, 0.5) 12%, rgba(255, 150, 0, 0.2) 29%, transparent 58%), linear-gradient(0deg,rgba(24, 22, 69, 1) 0%, rgba(82, 81, 116, 1) 64%, rgba(121, 120, 147, 1) 100%);
            }

        .bg-about {
            background:
                radial-gradient(
                    ellipse at top,
                    rgba(180,240,255,1) 0%,
                    rgba(70,190,255,.9) 32%,
                    rgba(0,140,255,.22) 58%,
                    transparent 68%
                ) top -70px center / 140% 220px no-repeat,

                radial-gradient(
                    ellipse at bottom,
                    rgba(180,240,255,1) 0%,
                    rgba(70,190,255,.9) 32%,
                    rgba(0,140,255,.22) 58%,
                    transparent 68%
                ) bottom -70px center / 140% 220px no-repeat,

                linear-gradient(180deg, #17145f 0%, #120f55 100%);
        }
        
        .bg-neuro h1, .bg-neuro h2, .bg-neuro h3, .bg-neuro h4, .bg-neuro h5, .bg-neuro p {
            color: white !important;
        }

        .headerlogo-neuro {
            max-width: 150px;
        }
        
        .neuro-subtitle {
            font-size: 35px;
        }

        .girl-image {
            text-align: end;
        }

        .girl-image img {
            bottom: 0px !important;
        }

        .about-collage-hero {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            padding: 50px 0 40px;
            background: linear-gradient(180deg, #19164d 0%, #151345 100%);
        }

        .about-collage-hero .container {
            max-width: 1760px;
        }

        .about-collage-hero::before {
            content: "";
            position: absolute;
            top: -230px;
            left: 50%;
            z-index: 0;
            width: min(620px, 44vw);
            height: 420px;
            pointer-events: none;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 211, 72, 0.96) 0%, rgba(255, 194, 30, 0.68) 22%, rgba(255, 190, 34, 0.24) 48%, transparent 72%);
            filter: blur(28px);
            opacity: 0.9;
            transform: translateX(-50%);
        }

        .about-collage-hero::after {
            content: "";
            position: absolute;
            top: -110px;
            left: 50%;
            z-index: 0;
            width: min(760px, 54vw);
            height: 580px;
            pointer-events: none;
            background:
                radial-gradient(ellipse at 50% 0%, rgba(255, 230, 136, 0.34) 0%, rgba(255, 212, 82, 0.18) 26%, transparent 62%),
                linear-gradient(96deg, transparent 0%, rgba(255, 206, 68, 0.02) 24%, rgba(255, 218, 104, 0.28) 50%, rgba(255, 206, 68, 0.02) 76%, transparent 100%);
            filter: blur(46px);
            -webkit-mask-image:
                linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.18) 18%, #000 42%, #000 58%, rgba(0, 0, 0, 0.18) 82%, transparent 100%),
                linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
            -webkit-mask-composite: source-in;
            mask-image:
                linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.18) 18%, #000 42%, #000 58%, rgba(0, 0, 0, 0.18) 82%, transparent 100%),
                linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
            mask-composite: intersect;
            opacity: 0.72;
            transform: translateX(-50%) scaleY(0.95);
            transform-origin: top center;
            animation: aboutSpotlightSweep 5.5s ease-in-out infinite alternate;
        }

        @keyframes aboutSpotlightSweep {
            0% {
                opacity: 0.68;
                transform: translateX(-52%) translateY(-18px) scaleX(0.82) scaleY(0.88);
            }

            48% {
                opacity: 0.98;
                transform: translateX(-50%) translateY(12px) scaleX(1.02) scaleY(1.06);
            }

            100% {
                opacity: 0.76;
                transform: translateX(-48%) translateY(34px) scaleX(0.9) scaleY(1.14);
            }
        }

        .about-hero-wave {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            height: 270px;
            pointer-events: none;
        }

        .about-hero-wave svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        .about-collage-inner {
            position: relative;
            z-index: 2;
            min-height: 580px;
        }

        .about-collage-copy {
            max-width: 1220px;
            margin: 0 auto;
            min-height: 288px;
            padding: 30px 76px;
            text-align: center;
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.07);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 42px rgba(0, 0, 0, 0.15);
        }

        .about-collage-copy h1 {
            margin-bottom: 26px;
            color: #fff !important;
            font-size: clamp(44px, 3.2vw, 60px);
            line-height: 1.15;
        }

        .about-collage-copy p {
            max-width: 980px;
            margin: 0 auto;
            color: #fff !important;
            font-size: clamp(20px, 1.35vw, 26px);
            line-height: 1.2;
        }

        .about-device {
            position: absolute;
            z-index: 4;
            display: block;
            height: auto;
            object-fit: contain;
        }

        .about-laptop {
            top: -4px;
            left: 50px;
            width: clamp(132px, 11.2vw, 198px);
            filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.22));
            transform: rotate(-6deg);
        }

        .about-phone {
            right: 52px;
            top: 188px;
            width: clamp(92px, 7vw, 138px);
            filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.24));
            transform: rotate(9deg);
        }

        .about-photo-strip {
            position: absolute;
            left: 50%;
            top: 354px;
            z-index: 5;
            width: min(1500px, 78vw);
            transform: translateX(-50%);
        }

        .about-photo-frame {
            display: block;
            width: 100%;
            height: auto;
        }

        .about-photo-card {
            display: none;
            overflow: hidden;
            width: 140px;
            height: 100px;
            border-radius: 10px;
            background: #fff;
            box-shadow: 0 16px 26px rgba(15, 20, 50, 0.2);
        }

        .about-photo-card.tall {
            width: 132px;
            height: 148px;
            margin-top: -32px;
        }

        .about-photo-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .about-photo-card:nth-child(2) {
            margin-top: 20px;
        }

        .about-photo-card:nth-child(4) {
            margin-top: 14px;
        }

        .about-photo-card:nth-child(5) {
            margin-top: 24px;
        }

        .about-cta-banner {
            position: relative;
            overflow: hidden;
            min-height: 498px;
            padding: clamp(38px, 5vw, 72px) clamp(18px, 4vw, 72px);
            border-radius: 40px 40px 40px 40px;
            background:
                linear-gradient(90deg, rgba(24, 22, 69, 0.82) 0%, rgba(35, 33, 82, 0.58) 48%, rgba(24, 22, 69, 0.82) 100%),
                url("{% static 'main/bookle/assets/img/about/cta-medical-students.png' %}") center / cover no-repeat;
        }

        .about-cta-card {
            position: relative;
            z-index: 2;
            width: min(1065px, 78vw);
            min-height: 418px;
            margin: 0 auto;
            padding: clamp(36px, 4vw, 44px) clamp(28px, 5vw, 76px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            text-align: center;
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.38);
            border-radius: 36px 36px 36px 36px;
            background: rgba(255, 255, 255, 0.28);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 24px 60px rgba(16, 14, 54, 0.2);
            backdrop-filter: blur(9px);
            -webkit-backdrop-filter: blur(9px);
        }

        .about-cta-card h2 {
            margin-bottom: 26px;
            color: #fff !important;
            font-size: clamp(34px, 3.6vw, 48px);
            line-height: 1.1;
            font-weight: 800;
        }

        .about-cta-card p {
            max-width: 850px;
            margin: 0 auto 24px;
            color: #fff !important;
            font-size: clamp(20px, 2vw, 28px);
            line-height: 1.12;
            font-weight: 700;
        }

        .about-cta-decor {
            position: absolute;
            z-index: 3;
            pointer-events: none;
            user-select: none;
            height: auto;
            filter: drop-shadow(0 16px 18px rgba(13, 12, 45, 0.28));
        }

        .about-cta-decor.blood-pressure {
            top: -30px;
            left: 250px;
            width: 205px;
            transform: rotate(-4deg);
        }

        .about-cta-decor.thermometer {
            top: 9px;
            right: 165px;
            width: 116px;
            transform: rotate(34deg);
        }

        .about-cta-decor.stethoscope {
            top: 186px;
            right: 146px;
            width: 182px;
            transform: rotate(2deg);
        }

        .about-cta-decor.medical-kit {
            left: 92px;
            bottom: 82px;
            width: 156px;
            transform: rotate(-8deg);
        }

        @media (min-width: 1200px) and (max-width: 1399px) {
            .about-cta-banner {
                min-height: 480px;
                padding: 68px 54px;
            }

            .about-cta-card {
                width: min(1060px, 88vw);
                min-height: 360px;
                padding: 42px 86px;
            }

            .about-cta-card h2 {
                margin-bottom: 26px;
                font-size: 48px;
            }

            .about-cta-card p {
                max-width: 850px;
                font-size: 26px;
                line-height: 1.14;
            }

            .about-cta-decor.blood-pressure {
                top: -34px;
                left: 278px;
                width: 174px;
            }

            .about-cta-decor.thermometer {
                top: 34px;
                right: 166px;
                width: 98px;
            }

            .about-cta-decor.stethoscope {
                top: 166px;
                right: 156px;
                width: 126px;
                opacity: 0.72;
                z-index: 1;
            }

            .about-cta-decor.medical-kit {
                left: 124px;
                bottom: 94px;
                width: 122px;
            }
        }

        @media (max-width: 1199px) {
            .about-cta-banner {
                min-height: 430px;
            }

            .about-cta-card {
                width: min(820px, 82vw);
                min-height: 340px;
            }

            .about-cta-decor.blood-pressure {
                left: 70px;
                width: 160px;
            }

            .about-cta-decor.thermometer {
                right: 48px;
                width: 88px;
            }

            .about-cta-decor.stethoscope {
                right: 46px;
                width: 138px;
            }

            .about-cta-decor.medical-kit {
                left: 44px;
                width: 118px;
            }
        }

        @media (max-width: 767px) {
            .about-cta-banner {
                min-height: auto;
                padding: 34px 14px 90px;
                border-radius: 0 28px 28px 28px;
            }

            .about-cta-card {
                width: 100%;
                min-height: auto;
                padding: 32px 18px 38px;
                border-radius: 0 28px 28px 28px;
            }

            .about-cta-card h2 {
                margin-bottom: 18px;
                font-size: 30px;
            }

            .about-cta-card p {
                font-size: 17px;
                line-height: 1.25;
            }

            .about-cta-decor.blood-pressure {
                top: -16px;
                left: 18px;
                width: 92px;
            }

            .about-cta-decor.thermometer {
                top: 8px;
                right: 16px;
                width: 54px;
            }

            .about-cta-decor.stethoscope {
                display: none;
            }

            .about-cta-decor.medical-kit {
                left: 24px;
                bottom: 22px;
                width: 86px;
            }
        }


        /* Mobile layout */
        @media (max-width: 992px) {
            .client-info {
                flex-direction: column;
                align-items: flex-start;
            }

            /* Teks (nama & universitas) tampil dulu */
            .client-info .content {
                order: 1;
                margin-bottom: 6px;
            }

            /* Foto setelah teks */
            .client-info .client-img {
                order: 2;
            }

            /* Biar tidak terlalu besar di HP */
            .client-img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-size: cover;
                background-position: center;
            }

            .client-info .content h3 {
                font-size: 14px !important;
            }

            .client-info .content span {
                font-size: 12px !important;
            }

            .star i {
                font-size: 11px;
            }
        }

        @media (max-width: 991px) {
            .about-collage-hero {
                padding: 34px 0 42px;
                background:
                    radial-gradient(circle at 50% 0%, rgba(252, 193, 15, 0.78) 0, rgba(252, 193, 15, 0.34) 14%, transparent 34%),
                    linear-gradient(180deg, #17164d 0%, #151345 100%);
            }

            .about-collage-inner {
                min-height: auto;
            }

            .about-collage-copy {
                margin: 0 16px 22px;
                min-height: auto;
                padding: 24px 20px;
            }

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

            .about-laptop {
                top: 8px;
                left: 10px;
                width: 92px;
                transform: rotate(-8deg) scale(0.86);
                transform-origin: top left;
            }

            .about-phone {
                top: 104px;
                right: 10px;
                width: 58px;
                transform: rotate(8deg) scale(0.86);
                transform-origin: top right;
            }

            .about-photo-strip {
                position: relative;
                left: auto;
                bottom: auto;
                width: min(720px, 96vw);
                padding: 0;
                margin: 0 auto;
                transform: none;
            }

            .about-photo-frame {
                display: block;
            }

        }

        @media (min-width: 769px) and (max-width: 991px) {
            .about-collage-inner {
                min-height: 520px;
            }

            .about-photo-strip {
                position: absolute;
                left: 50%;
                top: 354px;
                width: min(720px, 96vw);
                transform: translateX(-50%);
            }
        }

        @media (max-width: 768px) {
            .about-hero-wave {
                display: block;
                bottom: -34px;
            }

            .about-photo-strip {
                top: 0;
            }
        }

        @media (max-width: 767px) {
            .about-hero-wave {
                display: none;
            }
        }

        @media (max-width: 575px) {
            .about-collage-hero::before,
            .about-collage-hero::after {
                display: none;
            }

            .about-photo-strip {
                width: 100%;
                padding: 0 16px;
                display: grid;
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .about-photo-frame {
                display: none;
            }

            .about-photo-card,
            .about-photo-card.tall {
                display: block;
                width: 100%;
                height: auto;
                border-radius: 58px;
                margin: 0 !important;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .about-collage-hero::after {
                animation: none;
            }
        }




        /* Untuk mobile, bisa diperkecil biar proporsional */
        @media (max-width: 576px) {
            .client-img {
                width: 50px;
                height: 50px;
            }
        }

        @media (max-width: 768px) {
            .feature-wrapper {
                display: flex;
                flex-direction: column;
                gap: 18px;
                background: #dbecee;
                padding: 20px;
                border-radius: 18px;
            }

            .feature-box-items {
                display: flex;
                align-items: center;
                gap: 14px;
            }

            .feature-box-items .icon {
                width: 55px;
                height: 55px;
                border-radius: 12px;
                background: #17174a;
                color: #fff;
                flex-shrink: 0;
            }

            .feature-box-items .icon i {
                font-size: 20px;
            }

            .feature-box-items .content h3 {
                font-size: 15px;
                margin-bottom: 4px;
            }

            .feature-box-items .content p {
                font-size: 13px;
                line-height: 1.4;
                margin: 0;
            }
        }


        @media (max-width: 992px) {

            .feature-wrapper {
                display: block !important;
                padding: 20px;
                background: #dbecee;
                border-radius: 20px;
            }

            .feature-box-items {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                gap: 16px;
                margin-bottom: 18px;
                text-align: left !important;
            }

            .feature-box-items .icon {
                width: 64px !important;
                height: 64px !important;
                min-width: 64px;
                border-radius: 16px;
                background: #17174a;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .feature-box-items .content {
                text-align: left !important;
            }

            .feature-box-items .content h3 {
                font-size: 16px;
                margin-bottom: 4px;
            }

            .feature-box-items .content p {
                font-size: 13px;
                line-height: 1.4;
                margin: 0;
            }
        }

        @media (max-width: 1399px) {

            /* .container, .container-lg, .container-md, .container-sm, .container-xl {
                max-width: 1140px;
            } */
            .contact-info-area {
                justify-content: center;
            }

            

        }

        @media (max-width: 800px) {

            /* .container, .container-lg, .container-md, .container-sm, .container-xl {
                max-width: 1140px;
            } */
            .hero-section {
                height: 1000px;
            }

        }

        @media (max-width: 400px) {

            /* .container, .container-lg, .container-md, .container-sm, .container-xl {
                max-width: 1140px;
            } */
            .hero-section {
                height: 800px;
            }

        }

        @media (max-width: 767px) {

            /* .container, .container-lg, .container-md, .container-sm, .container-xl {
                max-width: 1140px;
            } */
            .contact-info-area {
                justify-content: left;
            }

        }

        @media (max-width: 991px) {

            .bg-neuro {
            background: radial-gradient(circle at 50% 87%, rgba(255, 200, 80, 0.9) 0%, rgba(255, 180, 50, 0.5) 12%, rgba(255, 150, 0, 0.2) 29%, transparent 58%), linear-gradient(0deg,rgba(24, 22, 69, 1) 0%, rgba(82, 81, 116, 1) 64%, rgba(121, 120, 147, 1) 100%);
            }

            .hero-1 .girl-image img {
                width: 100%;
            }

            .hero-content {
                text-align: center;
            }

            .header-1 .header-main:before {
                width: 50%;
                height: 86px;
            }

            .header-1 .header-main:after {
                width: 250px;
                height: 89px;
                width: 0px;
            }

        }

        @media (min-width: 992px) {

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

            .hero-1 {
                height: 760px;
            }

        }

        @media (max-width: 436px) {

            .headerlogo-neuro {
                max-width: 110px !important;
                margin-top: 10px !important;
                top: 10px !important;
            }

        }

        @media (max-width: 1024px) and (min-width: 992px) {
            .hero-1 .girl-image img {
                right: 74px;
            }

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

            .hero-1 {
                height: 760px;
            }

            .hero-1 {
                font-size: 25px;
            }

            .neuro-subtitle {
                font-size: 20px;
            }
        }

        @media (min-width: 1366px) {

            /* .container, .container-lg, .container-md, .container-sm, .container-xl {
                max-width: 1140px;
            } */
            

            .under-hero {
                max-width: 100%;
            }

            

            .hero-section {
                margin-top: -5px;
            }

            .book-slider-wrapper {
                position: relative;
            }

            /* kiri */
            .book-slider-wrapper::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100px;
                height: 100%;
                z-index: 10;
                pointer-events: none;

                background: linear-gradient(to right, #fff, transparent);
            }

            /* kanan */
            .book-slider-wrapper::after {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                width: 100px;
                height: 100%;
                z-index: 10;
                pointer-events: none;

                background: linear-gradient(to left, #fff, #fff, transparent);
            }

        }

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

        .shop-button .theme-btn {
            background: #181645 !important;
            color: white !important;
        }

        .shop-button .theme-btn:hover {
            color: #181645 !important;
        }

        .social-icon a:hover {
            background-color: #FCC10F !important;
            color: #181645 !important;
        }

        @media screen and (min-width: 416px) and (max-width: 600px) {
            .shop-box-items .book-thumb {
                height: 400px !important;
                object-fit: cover;
            }
        }

        @media screen and (min-width: 370px) and (max-width: 415px) {
            .shop-box-items .book-thumb {
                height: 360px !important;
                object-fit: cover;
            }
        }