/* ====================================================== HOME ========================================================== */
        :root {
            --logo-teal: #28b5a3;
            --logo-orange: #ff7b49;
            --logo-blue: #4aa3ff;
            --bg-dark-start: #2b1b26;
            --bg-dark-end: #0f0710;
            --card-bg: rgba(255, 255, 255, 0.04);
            --text-light: #fff;
            --color-bg-light: #f8f9fa;
            --border-radius: 16px;
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        * {
            box-sizing: border-box
        }

html {
    scroll-behavior: smooth;
}

        .container-hero {
            padding: 5.5rem 1rem;
        }

        @media (min-width:1200px) {
            .container-hero {
                padding: 7rem 1rem;
            }
        }

       

        .hero-sub {
            max-width: 60ch;
            color: #000000;
            margin-top: .8rem;
            font-size: clamp(14px, 1.4vw, 18px);
        }

        .actions {
            justify-content: center;
            margin-top: 1.6rem;
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        

        .btn-outline {
            border: 2px solid var(--logo-teal);
            padding: .85rem 1.4rem;
            color: var(--logo-teal);
            border-radius: 10px;
            background: transparent;
            font-weight: 700;
        }

        /* Profile area responsive sizing */
        .profile-frame {
            width: min(380px, 44vw);
            height: calc(min(380px, 44vw) * 1.37);
            /* keep tall shape */
            border-radius: 180px;
            background: linear-gradient(180deg, rgba(74, 163, 255, 0.06), rgba(40, 181, 163, 0.04));
            padding: 12px;
            position: relative;
            display: block;
            margin: auto;
            min-width: 220px;
            max-width: 420px;
        }

        .profile-inner {
            width: 100%;
            height: 100%;
            border-radius: 170px;
            overflow: hidden;
            background: var(--card-bg);
            border: 4px solid rgba(255, 255, 255, 0.03);
        }

        .profile-inner img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transform: translateY(-3%);
        }

        /* Floating cards and social icons: use viewport relative offsets for responsiveness */
        .float-card {
            position: absolute;
            display: flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95));
            color: #111;
            padding: 8px 14px;
            border-radius: 60px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
            font-size: clamp(12px, 1.2vw, 14px);
            z-index: 8;
            white-space: nowrap;
        }

        .float-card img {
            height: 34px;
            width: 34px;
            border-radius: 50%;
            object-fit: cover
        }

        /* primary follower badge - set as bottom-right-ish on large, centered on small */
        .card-follow {
            right: 83%;
            bottom: 74%;
            transform: translate(0, 0);
        }

        /* .card-user {
            left: -14%;
            top: 36%;
        } */

        /* social round icons */
        .floating-icon {
            position: absolute;
            height: 44px;
            width: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #fff;
            z-index: 6;
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
        }

        .ig {
            background: var(--logo-orange);
            left: -4%;
            top: 56%;
        }

        .tw {
            background: var(--logo-blue);
            right: -1%;
            top: 18%;
        }

        .yt {
            background: #e63946;
            right: 12%;
            bottom: 6%;
        }

        /* small-screen adjustments */
        @media (max-width: 991.98px) {
            .row-hero {
                flex-direction: column-reverse;
            }

            .col-hero-left,
            .col-hero-right {
                width: 100%
            }

            .profile-frame {
                width: min(320px, 68vw);
                height: calc(min(320px, 68vw) * 1.37);
            }

            /* stack floating cards free and center above/below */
            /* .card-user {
                left: 50%;
                top: -8%;
                transform: translateX(-50%);
            } */

            .card-follow {
                right: 18%;
                bottom: 91%;
                transform: translateX(50%);
            }

            .ig {
                left: -7%;
                top: auto;
                bottom: 33%;
                position: relative;
            }

            .tw {
                right: 2%;
                top: -100%;
                position: relative;
            }

            .yt {
                right: -88%;
                bottom: 41%;
                position: relative;
            }

            .actions {
                justify-content: center
            }

            .hero-sub {
                margin-left: auto;
                margin-right: auto
            }

            .profile-inner img {
                transform: none
            }
        }

        /* very small phones */
        @media (max-width: 420px) {
            .hero-title {
                font-size: clamp(22px, 9vw, 32px)
            }

            .profile-frame {
                width: 84vw;
                height: calc(84vw * 1.37);
            }

            .float-card {
                font-size: 12px;
                padding: 6px 10px
            }

            .floating-icon {
                height: 40px;
                width: 40px;
                font-size: 18px
            }
        }

        /* small header logo */
        .site-header {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 18px
        }

        .site-logo {
            height: 56px;
            width: auto
        }

        .bac-bg {
            background-image: url(ChatGPT\ Image\ Nov\ 20\,\ 2025\,\ 09_56_05\ AM.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .second-bg {
            background-color: #7171714c;
        }

        @media (min-width: 768px) {
            .abac-bg {
                background-attachment: fixed;
            }
        }


        /* ====================================================== HOME END ========================================================== */
        /* ================================
   SOCIAL BAR SECTION
   ================================ */
        .social-bar-section {
            background: var(--color-bg-light);
            padding: 60px 0;
        }

        .social-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            padding: 1.5rem 1rem;
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-sm);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .social-button:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-lg);
        }

        .social-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
            margin-bottom: 1rem;
            transition: transform 0.3s ease;
        }

        .social-button:hover .social-icon {
            transform: scale(1.1) rotate(5deg);
        }

        .social-icon.instagram {
            background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
        }

        .social-icon.youtube {
            background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
        }

        .social-icon.tiktok {
            background: linear-gradient(135deg, #000000 0%, #69C9D0 50%, #EE1D52 100%);
        }

        .social-icon.facebook {
            background: linear-gradient(135deg, #1877f2 0%, #0c63d4 100%);
        }

        .social-icon.twitter {
            background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 100%);
        }

        .follower-count {
            text-align: center;
        }

        .follower-count strong {
            display: block;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-text);
            margin-bottom: 0.25rem;
        }

        .follower-count small {
            display: block;
            font-size: 0.875rem;
            color: var(--color-text-light);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* =======================================================About ME================================================================== */

        :root {
            --accent-a: #2dd19c;
            --accent-b: #ff6ea8;
            --muted: #f5f7fb;
            --tag-bg: #fff0f6;
            --card-bg: #fbfdff;
            --text-muted: #6b7280;
        }

        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            background: #fff;
            color: #111827;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        main.about-wrap {
            max-width: 1240px;
            margin: 0 auto;
            padding: clamp(20px, 4vw, 64px) 18px;
        }

        /* Grid container */
        .about-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(18px, 4vw, 40px);
            align-items: center;
            justify-items: center;
        }

        /* At wide screens split columns */
        @media(min-width:900px) {
            .about-grid {
                grid-template-columns: minmax(320px, 44%) minmax(420px, 56%);
            }

            .about-grid {
                align-items: center;
            }
        }

        /* LEFT: blob composition */
        .blob-area {
            width: min(460px, 46vw);
            max-width: 520px;
            position: relative;
            display: grid;
            place-items: center;
            pointer-events: none;
        }

        .main-blob {
            width: 100%;
            height: auto;
            aspect-ratio: 1.12/1;
            object-fit: cover;
            border-radius: 50% 40% 60% 45%;
            filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.12));
            transform-origin: center;
            animation: floatBlob 5.2s ease-in-out infinite;
            display: block;
            background: linear-gradient(180deg, #fff, #f4f7fb);
            /* fallback */
        }

        /* decor small gradient orbs */
        .decor-blob {
            position: absolute;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(45, 209, 156, 0.95), rgba(255, 110, 168, 0.95));
            opacity: 0.98;
            transform: translate3d(0, 0, 0);
            will-change: transform, opacity;
            box-shadow: 0 8px 22px rgba(45, 209, 156, 0.08);
        }

        .decor-blob.b1 {
            width: 86px;
            height: 64px;
            left: -6%;
            top: 6%;
            transform: rotate(10deg);
            animation: floatSmall 5s ease-in-out infinite;
        }

        .decor-blob.b2 {
            width: 108px;
            height: 72px;
            right: -6%;
            top: 36%;
            animation: floatSmall 4.6s ease-in-out infinite;
            animation-delay: 0.6s;
        }

        .decor-blob.b3 {
            width: 64px;
            height: 48px;
            left: 6%;
            bottom: -4%;
            animation: floatSmall 4.2s ease-in-out infinite;
            animation-delay: 1.1s;
        }

        @keyframes floatBlob {
            0% {
                transform: translateY(0) rotate(-0.6deg);
            }

            50% {
                transform: translateY(-14px) rotate(0.6deg);
            }

            100% {
                transform: translateY(0) rotate(-0.6deg);
            }
        }

        @keyframes floatSmall {
            0% {
                transform: translateY(0) scale(1);
            }

            50% {
                transform: translateY(-8px) scale(1.02);
            }

            100% {
                transform: translateY(0) scale(1);
            }
        }

        /* RIGHT: content */
        .content {
            width: 100%;
        }

        .about-title {
            font-size: clamp(20px, 3vw, 30px);
            font-weight: 800;
            margin: 0 0 8px 0;
            letter-spacing: -0.02em;
        }

        .about-desc {
            margin: 0 0 14px 0;
            color: var(--text-muted);
            font-size: clamp(13px, 1.6vw, 15px);
            line-height: 1.7;
            max-width: 720px;
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 14px;
            align-items: center;
        }

        .tag {
            display: inline-flex;
            gap: 8px;
            align-items: center;
            padding: 8px 12px;
            border-radius: 999px;
            background: #fff;
            font-weight: 600;
            font-size: 13px;
            border: 1px solid rgba(0, 0, 0, 0.04);
            box-shadow: 0 6px 18px rgba(99, 102, 241, 0.03);
        }

        /* Info card with pink-green accent stripe */
        .info-card {
            background: var(--card-bg);
            border-radius: 14px;
            padding: 14px;
            margin-top: 8px;
            border: 1px solid rgba(10, 15, 20, 0.04);
            box-shadow: 0 10px 30px rgba(3, 7, 18, 0.03);
            position: relative;
            overflow: visible;
        }

        .info-card::before {
            content: "";
            position: absolute;
            left: -1px;
            top: 12px;
            bottom: 12px;
            width: 6px;
            border-radius: 8px;
            background: linear-gradient(180deg, rgba(255, 116, 139, 0.98), rgba(46, 197, 157, 0.98));
            box-shadow: 0 6px 18px rgba(45, 209, 156, 0.08);
        }

        .info-row {
            display: flex;
            flex-direction: column;
            gap: 8px;
            font-size: 14px;
            color: #374151;
        }

        /* CTA */
        .cta-row {
            margin-top: 14px;
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
        }

        .cta {
            padding: 10px 18px;
            border-radius: 999px;
            display: inline-flex;
            gap: 10px;
            align-items: center;
            background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
            color: #fff;
            font-weight: 700;
            border: none;
            cursor: pointer;
            box-shadow: 0 12px 30px rgba(45, 209, 156, 0.12);
        }

        .cta:focus {
            outline: 3px solid rgba(45, 209, 156, 0.14);
            outline-offset: 3px;
        }

        /* Small tweaks for very small screens */
        @media(max-width:599px) {
            .decor-blob.b1 {
                left: -22%;
                top: 0;
                width: 64px;
                height: 48px;
            }

            .decor-blob.b2 {
                right: -40%;
                top: 28%;
                width: 86px;
                height: 56px;
            }

            .decor-blob.b3 {
                left: 10%;
                bottom: -10%;
                width: 52px;
                height: 40px;
            }

            .info-card::before {
                display: none;
            }

            /* cleaner on tight screens */
            .about-grid {
                gap: 18px;
            }

            .about-desc {
                text-align: justify;
            }

            .info-card {
                text-align: left;
                width: 100%;
            }

            .cta-row {
                justify-content: center;
            }

            .tags {
                justify-content: center;
            }

            .main-blob {
                width: 112%;
                height: 31vh;
            }

            .about-title {
                text-align: center;
            }

        }

        /* fine tune for medium screens so layout matches reference spacing */
        @media(min-width:900px) and (max-width:1200px) {
            .blob-area {
                margin-left: -6%;
            }
        }


        /* =================================================================My Leates Video================================================================= */


        /* ============================================== TESTIMONIAL =========================================================== */
        .test-body {
            font-family: "Shippori Antique", sans-serif;
            color: #000;
            min-height: 71vh;
            display: grid;
            place-items: center;
            padding: 2rem;
            /* background: linear-gradient(180deg, #fafafa, #f0f6ff) */
        }

        .content-wrapper {
            width: 90%;
            max-width: 900px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.2rem
        }

        h1 {
            font-size: calc(2.1rem + .6vmin)
        }

        .blue-line {
            height: .3rem;
            width: 6rem;
            background: rgb(79, 143, 226);
            border-radius: 4px
        }

        .wrapper-for-arrows {
            position: relative;
            width: 100%;
            border-radius: 1rem;
            box-shadow: rgba(99, 99, 99, .12) 0 6px 22px;
            overflow: hidden;
            background: #fff;
            padding: 2.2rem 1.2rem;
            display: grid;
            place-items: center
        }

        .review-wrap {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .8rem;
            min-height: 260px
        }

        .avatars {
            border-radius: 50%;
            width: calc(6rem + 4vmin);
            height: calc(6rem + 4vmin);
            background-size: cover;
            background-position: center;
            box-shadow: 5px -3px rgb(79, 143, 226);
            position: relative
        }

        .personName {
            font-weight: 700;
            letter-spacing: .08rem
        }

        .profession {
            color: rgb(79, 143, 226);
            font-weight: 600;
            font-size: .95rem
        }

        .description {
            max-width: 740px;
            text-align: center;
            color: #5b5b5b;
            line-height: 1.8rem;
            padding: 0 1rem
        }

        .arrow-wrap {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            gap: 1rem;
            width: 100%;
            justify-content: space-between;
            padding: 0 1rem
        }

        .btn-arrow {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            border: 2px solid rgb(79, 143, 226);
            cursor: pointer;
            background: #fff;
            transition: transform .18s
        }

        .btn-arrow:hover {
            transform: scale(1.06)
        }

        .btn-arrow svg {
            transform: translateX(1px);
            stroke: rgb(79, 143, 226)
        }

        .controls {
            display: flex;
            gap: .7rem;
            align-items: center;
            margin-top: 1rem
        }

        .testimonial {
            display: none
        }

        .testimonial.active {
            display: block
        }

        @media (max-width:900px) {
            .content-wrapper {
                width: 100%
            }

            .description {
                padding: 0 .5rem
            }
        }

        /* ==============================================VIDEO TESTIMONIAL ============================================== */
        .hvt-section {
            padding: 60px 20px;
            text-align: center;
            font-family: Inter, sans-serif;
        }

        .hvt-title {
            font-size: 32px;
            font-weight: 800;
        }

        .hvt-sub {
            margin-bottom: 20px;
            color: #777;
        }

        /* Slider */
        .hvt-wrap {
            max-width: 1100px;
            margin: auto;
            position: relative;
            overflow: hidden;
        }

        .hvt-track {
            display: flex;
            gap: 20px;
            transition: .4s ease;
        }

        .hvt-card {
            flex: 0 0 33.33%;
            min-width: 33.33%;
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
            overflow: hidden;
            position: relative;
            cursor: pointer;
            transition: .3s;
        }

        .hvt-thumb {
            width: 100%;
            height: 240px;
            object-fit: cover;
        }

        .hvt-details {
            padding: 15px;
        }

        /* Play Button */
        .hvt-play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.55);
            color: #fff;
            width: 75px;
            height: 75px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: 32px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(4px);
            transition: .2s ease-in-out;
        }

        .hvt-card:hover .hvt-play-btn {
            transform: translate(-50%, -50%) scale(1.12);
            background: rgba(0, 0, 0, 0.75);
        }

        /* Arrows */
        .hvt-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: #0b1220;
            color: #fff;
            border: none;
            padding: 14px 18px;
            cursor: pointer;
            border-radius: 10px;
            font-size: 22px;
            z-index: 10;
        }

        .hvt-left {
            left: 10px;
        }

        .hvt-right {
            right: 10px;
        }

        /* Dots */
        .hvt-dots {
            display: flex;
            gap: 8px;
            justify-content: center;
            margin-top: 18px;
        }

        .hvt-dots button {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: none;
            background: #dedede;
        }

        .hvt-dots .active {
            background: #28b5a3;
        }

        /* Modal */
        .hvt-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .6);
            display: none;
            align-items: center;
            justify-content: center;
        }

        .hvt-modal.active {
            display: flex;
        }

        .hvt-modal-box {
            width: 90%;
            max-width: 850px;
            position: relative;
        }

        .hvt-frame {
            width: 100%;
            height: 460px;
            border: none;
            border-radius: 12px;
        }

        .hvt-close {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #fff;
            border: none;
            font-size: 24px;
            padding: 6px 10px;
            cursor: pointer;
        }



        :root {
            --circle-size: 60px;
            --gap: 18px;
            --right-offset: 28px;
            --bg: #3d405b;
            --expanded-dist: 96px;
            /* how far each item moves left when opened */
        }


        #menu-toggleww {
            position: absolute;
            left: -9999px;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

        /* wrapper placed fixed center-right */
        .menu-wrapperww {
            position: fixed;
            top: 42%;
            right: var(--right-offset);
            transform: translateY(-50%);
            z-index: 999;
        }

        .menu-listww {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: var(--gap);
            align-items: center;
            margin: 0;
            padding: 0;
        }

        .menu-itemww {
            display: grid;
            place-items: center;
        }

        /* label acts as the toggle button */
        .menu-labelww {
            width: var(--circle-size);
            height: var(--circle-size);
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            display: grid;
            place-items: center;
            background: #007aa5;
            background-size: 150%;
            background-position: center;
            background-repeat: no-repeat;
            box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
            cursor: pointer;
        }


        .menu-labelww::after {
            content: "";
            position: absolute;
            left: -25%;
            width: 150%;
            height: 50%;
            bottom: 0;
            opacity: 0.35;
            background-repeat: repeat-x;
            background-size: 180px 100%;
            animation: wave 4s linear infinite;

            /* perfect encoded wave SVG */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C30 0 60 26 90 14 C120 2 150 26 180 14 C210 2 240 26 270 14 L270 40 L0 40 Z' fill='%23ffffff'/%3E%3C/svg%3E");
        }

        @keyframes wave {
            from {
                background-position: 0 0;
            }

            to {
                background-position: -240px 0;
            }
        }


        .menu-labelww:active {
            transform: scale(.98);
        }

        .menu-labelww svg {
            width: 58%;
            height: 58%;
            display: block;
            fill: #fff;
        }

        /* circles */
        .menu-circleww {
            --size: var(--circle-size);
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            background: #efefef;
            display: grid;
            place-items: center;
            font-size: 1.3rem;
            cursor: pointer;
            transition:
                transform 380ms cubic-bezier(.2, .9, .22, 1),
                box-shadow 220ms ease,
                background 160ms ease,
                opacity 260ms ease;
            box-shadow: 0 6px 12px rgba(0, 0, 0, .12);
            user-select: none;
            /* start closed: slightly to the right and invisible */
            transform: translateX(0) translateY(0);
            opacity: 0;
            pointer-events: none;
        }

        /* when hovered open (or focus) we keep small lift */
        .menu-circleww:hover {
            transform: translateY(-6px) scale(1.03);
            background: #f5f7ff;
            box-shadow: 0 12px 22px rgba(0, 0, 0, .16);
        }

        /* Use the checkbox state to toggle circles: when checked, move each circle left by computed amount */
        /* each circle uses --i index (0,1,2...) to create staggered translate and delay */
        #menu-toggleww:checked+.menu-wrapperww .menu-listww .menu-circleww {
            opacity: 1;
            pointer-events: auto;
            /* move left: base distance + extra per index for layered offset */
            transform: translateX(calc(-1 * (var(--expanded-dist) + (var(--i) * 8px))));
        }

        /* Add a small scale to the label when checked */
        #menu-toggleww:checked+.menu-wrapperww .menu-labelww {
            transform: scale(0.96);
            box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
        }

        /* Staggered transition delays using --i */
        .menu-circleww {
            transition-delay: calc(var(--i) * 65ms);
        }

        /* but when closing, we want reverse stagger => use negative delay on the label sibling trick */
        #menu-toggleww:checked+.menu-wrapperww .menu-listww .menu-circleww {
            transition-delay: calc(var(--i) * 65ms);
        }

        /* when NOT checked, reverse the delay so items disappear bottom-first (nice touch) */
        #menu-toggleww:not(:checked)+.menu-wrapperww .menu-listww .menu-circleww {
            transition-delay: calc((3 - var(--i)) * 35ms);
        }

        /* keyboard focus outline */
        .menu-circleww:focus,
        .menu-labelww:focus {
            outline: 3px solid rgba(255, 255, 255, .12);
            outline-offset: 4px;
        }

        /* responsive tweaks */
        @media (max-width:520px) {
            .mgt {
                margin-top: px;
            }

            :root {
                --circle-size: 48px;
                --gap: 12px;
                --right-offset: 12px;
                --expanded-dist: 72px;
            }
        }

        /* .menu-circleww:nth-child(2) {
            transition-delay: .05s;
        }

        .menu-circleww:nth-child(3) {
            transition-delay: .10s;
        }

        .menu-circleww:nth-child(4) {
            transition-delay: .15s;
        }

        .menu-circleww:nth-child(5) {
            transition-delay: .20s;
        } */








        :root {
            --lp-bg: #f4f7fb;
            --lp-accent: #ff7a4d;
            --lp-accent-2: #ffb06b;
            --lp-card: #f0f0f0;
            --lp-text: #0b1620;
            --lp-radius: 18px;
            --lp-shadow: 0 18px 40px rgba(10, 20, 40, 0.06);
        }

        /* Reset + base */

        .lp-body {
            margin: 0;
            font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
            background: linear-gradient(180deg, #f8fbff 0%, #f3f6fb 45%), var(--lp-bg);
            color: var(--lp-text);
            padding: 48px 20px 80px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Container */
        .lp-wrapper {
            max-width: 1250px;
            margin: 0 auto
        }

        /* Title */
        .lp-head {
            text-align: center;
            margin-bottom: 6px
        }

        .lp-head__title {
            font-size: 48px;
            margin: 0;
            font-weight: 800;
            letter-spacing: -0.5px
        }

        .lp-head__sub {
            color: #8896a3;
            margin-top: 10px;
            margin-bottom: 26px
        }

        /* Pills */
        .lp-pills {
            display: flex;
            gap: 12px;
            justify-content: center;
            margin-bottom: 32px;
            flex-wrap: wrap
        }

        .lp-pill {
            border-radius: 999px;
            padding: 10px 16px;
            background: #fff;
            border: 1px solid #f4dede;
            box-shadow: 0 6px 18px rgba(20, 30, 50, 0.02);
            cursor: pointer;
            font-weight: 700;
            color: #ff6b6b;
            transition: all .18s;
        }

        .lp-pill--active {
            background: linear-gradient(90deg, var(--lp-accent), var(--lp-accent-2));
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(255, 106, 72, 0.14)
        }

        /* Grid */
        .lp-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 28px;
            align-items: stretch
        }

        @media (max-width:1100px) {
            .lp-grid {
                grid-template-columns: repeat(3, 1fr)
            }
        }

        @media (max-width:820px) {
            .lp-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media (max-width:520px) {
            .lp-grid {
                grid-template-columns: repeat(1, 1fr)
            }
        }

        /* Card */
        .lp-card {
            background: var(--lp-card);
            border-radius: var(--lp-radius);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            min-height: 430px;
            box-shadow: var(--lp-shadow);
            transition: transform .25s;
        }

        .lp-card:hover {
            transform: translateY(-8px);
        }

        .lp-card__media {
            height: 310px;
            position: relative;
            overflow: hidden
        }

        .lp-card__media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .lp-card__tag {
            position: absolute;
            left: 14px;
            top: 12px;
            background: rgba(255, 255, 255, 0.9);
            padding: 8px 10px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 13px;
            color: #222
        }

        .lp-card__meta {
            padding: 18px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.5) 100%);
            color: #fff;
            margin-top: auto;
            border-bottom-left-radius: var(--lp-radius);
            border-bottom-right-radius: var(--lp-radius);
        }

        .lp-card__title {
            margin: 0;
            font-size: 18px;
            font-weight: 800
        }

        .lp-card__desc {
            margin: 8px 0 0;
            font-size: 14px;
            opacity: 0.95
        }

        /* collapsed behaviour: .lp-collapsed hides .lp-card--extra */
        .lp-grid.lp-collapsed .lp-card.lp-card--extra {
            display: none
        }

        /* Controls */
        .lp-controls {
            text-align: center;
            margin-top: 22px
        }

        .lp-btn {
            padding: 10px 18px;
            border-radius: 999px;
            border: 0;
            background: var(--lp-accent);
            color: #fff;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(255, 120, 90, 0.12);
        }

        .lp-btn.lp-hidden {
            display: none
        }

        /* No-results message */
        .lp-noresults {
            grid-column: 1/-1;
            text-align: center;
            padding: 24px;
            color: #6e7b83
        }

        /* small accessibility helper */
        .lp-pill:focus {
            outline: 3px solid rgba(255, 120, 90, 0.15);
            outline-offset: 4px;
            border-radius: 999px
        }






















        :root {
            --bg: #f6f9fc;
            --card: #ffffff;
            --muted: #6d7a86;
            --accent: #ff6b4a;
            --accent-2: #ffb06b;
            --radius: 14px;
            --shadow: 0 18px 40px rgba(12, 20, 30, 0.06);
            --max-width: 1200px;
        }

        .bl-body {
            margin: 0;
            font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial;
            color: #0f1720;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            padding: 36px 18px;
        }

        .bl-wrap {
            max-width: var(--max-width);
            margin: 0 auto;
        }

        /* header */
        .bl-head {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-start;
            margin-bottom: 20px
        }

        .bl-head__title {
            font-size: 34px;
            margin: 0;
            font-weight: 800;
            letter-spacing: -0.4px
        }

        .bl-head__desc {
            color: var(--muted);
            margin: 0
        }

        /* layout: featured + grid */
        .bl-layout {
            display: grid;
            grid-template-columns: 1fr 420px;
            gap: 28px;
            margin-top: 18px
        }

        @media(max-width:1000px) {
            .bl-layout {
                grid-template-columns: 1fr
            }
        }

        /* featured post */
        .bl-featured {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02));
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
        }

        .bl-featured__img {
            height: 320px;
            position: relative;
            overflow: hidden
        }

        .bl-featured__img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .bl-featured__content {
            padding: 20px 22px;
            background: var(--card)
        }

        .bl-featured__kicker {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--accent), var(--accent-2));
            color: #fff;
            font-weight: 700;
            margin-bottom: 12px
        }

        .bl-featured__title {
            margin: 0;
            font-size: 22px;
            font-weight: 800
        }

        .bl-featured__meta {
            color: var(--muted);
            margin-top: 8px;
            font-size: 14px
        }

        .bl-featured__excerpt {
            margin-top: 12px;
            color: #374151;
            line-height: 1.6
        }

        /* right column: categories + recent list */
        .bl-sidebar {
            display: flex;
            flex-direction: column;
            gap: 18px
        }

        .bl-card {
            background: var(--card);
            border-radius: 12px;
            padding: 14px;
            box-shadow: 0 10px 30px rgba(12, 20, 30, 0.04)
        }

        .bl-cats {
            display: flex;
            flex-wrap: wrap;
            gap: 10px
        }

        .bl-cat {
            padding: 8px 12px;
            border-radius: 999px;
            background: #fff;
            border: 1px solid #f0e7e7;
            color: #d04a40;
            font-weight: 700;
            cursor: pointer;
            transition: transform .15s, box-shadow .15s;
        }

        .bl-cat--active {
            background: linear-gradient(90deg, var(--accent), var(--accent-2));
            color: #fff;
            transform: translateY(-2px)
        }

        .bl-list {
            display: flex;
            flex-direction: column;
            gap: 12px
        }

        .bl-list__item {
            display: flex;
            gap: 12px;
            align-items: center
        }

        .bl-thumb {
            width: 76px;
            height: 60px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0
        }

        .bl-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .bl-list__title {
            font-weight: 700;
            font-size: 14px;
            margin: 0
        }

        .bl-list__meta {
            font-size: 13px;
            color: var(--muted)
        }

        /* posts grid */
        .bl-grid {
            margin-top: 26px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px
        }

        @media(max-width:1100px) {
            .bl-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(max-width:700px) {
            .bl-grid {
                grid-template-columns: 1fr
            }
        }

        .bl-post {
            background: var(--card);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            transition: transform .18s;
        }

        .bl-post:hover {
            transform: translateY(-8px)
        }

        .bl-post__media {
            height: 180px;
            overflow: hidden
        }

        .bl-post__media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .bl-post__body {
            padding: 14px 16px;
            flex: 1;
            display: flex;
            flex-direction: column
        }

        .bl-post__kicker {
            font-size: 12px;
            color: #d04a40;
            font-weight: 800;
            margin-bottom: 8px
        }

        .bl-post__title {
            font-size: 16px;
            margin: 0 0 8px;
            font-weight: 800
        }

        .bl-post__excerpt {
            color: #374151;
            font-size: 14px;
            line-height: 1.5;
            flex: 1
        }

        .bl-post__meta {
            font-size: 13px;
            color: var(--muted);
            margin-top: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center
        }

        .bl-btn {
            padding: 8px 12px;
            border-radius: 8px;
            background: linear-gradient(90deg, var(--accent), var(--accent-2));
            color: #fff;
            border: 0;
            font-weight: 800;
            cursor: pointer
        }

        /* read more expanded content */
        .bl-expand {
            display: none;
            padding: 12px 16px;
            background: #fbfbfd;
            border-top: 1px solid #eee;
            margin-top: 10px;
            border-radius: 10px
        }

        .bl-expand.show {
            display: block
        }

        /* small utilities */
        .u-muted {
            color: var(--muted)
        }

        .u-center {
            text-align: center
        }

        /* footer actions: load more */
        .bl-actions {
            margin-top: 20px;
            text-align: center
        }

        .bl-load {
            padding: 10px 18px;
            border-radius: 999px;
            border: 0;
            background: #fff;
            color: var(--accent);
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 8px 24px rgba(12, 20, 30, 0.05)
        }

        /* responsive tweaks */
        @media (max-width:520px) {
            

            .bl-head__title {
                font-size: 28px
            }

            .bl-featured__img {
                height: 200px
            }

            .bl-featured__content {
                padding: 16px
            }

            .bl-grid {
                gap: 16px
            }
        }


        :root {
            --bg: #f4f7fb;
            --accent: #ff7a4d;
            --accent2: #ffb06b;
            --card: #fff;
            --muted: #8b98a3;
            --radius: 18px;
            --shadow: 0 18px 40px rgba(10, 20, 40, 0.06);
            --maxw: 1250px;
        }

        .lpv-body {
            margin: 0;
            padding: 48px 20px 80px;
            font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
            background: linear-gradient(180deg, #f8fbff 0%, #f3f6fb 45%), var(--bg);
            color: #0b1620;
            -webkit-font-smoothing: antialiased;
        }

        .lpv-wrap {
            max-width: var(--maxw);
            margin: 0 auto
        }

        .lpv-head {
            text-align: center;
            margin-bottom: 10px
        }

        .lpv-title {
            font-size: 48px;
            margin: 0;
            font-weight: 800
        }

        .lpv-sub {
            color: var(--muted);
            margin-top: 8px;
            margin-bottom: 28px
        }

        .lpv-pills {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 28px
        }

        .lpv-pill {
            padding: 10px 16px;
            border-radius: 999px;
            background: #fff;
            border: 1px solid #f5e0e0;
            color: #ff6b6b;
            font-weight: 700;
            cursor: pointer
        }

        .lpv-pill--active {
            background: linear-gradient(90deg, var(--accent), var(--accent2));
            color: #fff;
            transform: translateY(-3px)
        }

        .lpv-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 28px;
            align-items: stretch
        }

        @media(max-width:1100px) {
            .lpv-grid {
                grid-template-columns: repeat(3, 1fr)
            }
        }

        @media(max-width:820px) {
            .lpv-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(max-width:520px) {
            .lpv-grid {
                grid-template-columns: 1fr
            }
        }

        .lpv-card {
            background: var(--card);
            border-radius: var(--radius);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            min-height: 430px;
            box-shadow: var(--shadow);
            transition: transform .25s;
        }

        .lpv-card:hover {
            transform: translateY(-8px)
        }

        .lpv-thumb {
            position: relative;
            height: 310px;
            background: #fde9ea;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden
        }

        .lpv-thumb iframe {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        /* play badge */
        .lpv-play {
            position: absolute;
            right: 14px;
            top: 12px;
            background: linear-gradient(90deg, var(--accent), var(--accent2));
            color: #fff;
            padding: 8px 10px;
            border-radius: 999px;
            font-weight: 800;
            box-shadow: 0 8px 20px rgba(255, 110, 80, 0.14)
        }

        .lpv-title-bubble {
            position: absolute;
            left: 12px;
            top: 12px;
            background: rgba(255, 255, 255, 0.95);
            padding: 6px 10px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 13px
        }

        .lpv-meta {
            padding: 20px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.6) 100%);
            color: #fff;
            margin-top: auto
        }

        .lpv-meta h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 800
        }

        .lpv-meta p {
            margin: 8px 0 0;
            opacity: 0.95
        }

        .lpv-grid.lpv-collapsed .lpv-card.lpv-extra {
            display: none
        }

        .lpv-controls {
            text-align: center;
            margin-top: 32px
        }

        .lpv-btn {
            padding: 12px 22px;
            border-radius: 999px;
            border: 0;
            background: linear-gradient(90deg, var(--accent), var(--accent2));
            color: #fff;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 12px 30px rgba(255, 120, 90, 0.12)
        }

        .lpv-hidden {
            display: none
        }

        /* modal styles */
        .lpv-modal {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: rgba(4, 8, 16, 0.6);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            z-index: 60;
        }

        .lpv-modal.show {
            display: flex
        }

        .lpv-modal__inner {
            width: 100%;
            max-width: 900px;
            border-radius: 12px;
            overflow: hidden;
            background: #000;
            position: relative
        }

        .lpv-modal__close {
            position: absolute;
            right: 12px;
            top: 12px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            padding: 6px 8px;
            cursor: pointer;
            font-weight: 700;
            z-index: 70
        }

        /* responsive tweaks */
        @media(max-width:520px) {
            .lpv-body {
                padding: 28px 12px
            }

            .lpv-title {
                font-size: 32px
            }

            .lpv-thumb {
                height: 220px
            }
        }


           .partners-wrap {
            margin-top: 10px;
            padding: 24px;
            border-radius: 10px;
        }

        .partners-row {
            display: flex;
            gap: 36px;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            overflow: hidden
        }

        .partner {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 140px;
            padding: 8px 12px;

        }

        .partner iframe
        {
            max-height: 56px;
            width: auto;
            display: block
        }

        .partner:hover {
            filter: none;
            transform: translateY(-6px) scale(1.02)
        }

        @media (max-width:820px) {
            .partner img {
                max-height: 44px
            }

            .partners-wrap {
                padding: 14px
            }
        }

        @media (max-width:480px) {
            .partner img {
                max-height: 36px
            }

            .card.active {
                width: 254px;
            }
        }


        :root {
            --card-radius: 14px;
            --muted: #7b7f87;
            --accent1: #ff2a8a;
            --accent2: #ff9b2a;
            --shadow: 0 18px 40px rgba(16, 24, 40, 0.06);
            --maxw: 1300px;
        }

        .testi-sec {
            max-width: var(--maxw);
            margin: 0 auto;
            padding: 18px;
        }

        .testi-title {
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            letter-spacing: -0.4px;
            font-size: 30px;
            margin: 0;
            color: #0b1220;
        }