:root {
    --main-font: 'fontRegular', sans-serif;
}

.website-theme {
    --background-color-95: #fffffff1;
    --heading-color2: var(--secondary-color-rgb);
    --border-primary-light: color-mix(in srgb, var(--primary-color-light), transparent 70%);
    --gradient-start: var(--primary-color-rgb);
    --gradient-end: var(--secondary-color-rgb);
    --gradient-start-light: var(--primary-color-rgb);
    --gradient-end-light: color-mix(in srgb, var(--secondary-color-rgb), transparent 90%);
    --shadow-green: 14 33 210;
}

.website-theme {
    --font-family: var(--main-font);
    --font-family-medium: 'fontMedium', sans-serif;
    --font-size: 16px;
    --text-primary: var(--primary-color-rgb);
    --text-primary2: #545e6d;
    --badge-white: #ffffff26;
    --badge-label-primary: var(--primary-color-rgb);
    --badge-hero-primary: var(--primary-color-rgb);
    --bg-primary: var(--primary-color-rgb);
    --form-shadow-color: rgba(0, 67, 255, 0.45);
    --background: #ffffff;
    --foreground: oklch(0.145 0 0);
    --card: #ffffff;
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: #030213;
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(0.95 0.0058 264.53);
    --secondary-foreground: #030213;
    --muted: #ececf0;
    --muted-foreground: #717182;
    --accent: #e9ebef;
    --accent-foreground: #030213;
    --destructive: #d4183d;
    --destructive-foreground: #ffffff;
    --border: rgba(0, 0, 0, 0.1);
    --ring: oklch(0.708 0 0);
    --input: transparent;
    --input-background: #f3f3f5;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    --gradient-priimary: var(--primary-color-rgb);
    --gradient-priimary2: var(--secondary-color-rgb);
    --heading-gradient: var(--primary-color-rgb);
    --heading-priimary2: var(--secondary-color-rgb);
    --gradient-middle: #ffffff;
    --gradient-bg-start: #f5f3ff;
    --gradient-bg-end: #eff6ff;
    --bg-blue-soft: color-mix(in srgb, var(--primary-color-rgb), transparent 90%);
    --text-gray-soft: #f3f4f6;
    --border-soft: #e5e7eb;
    --bg-badge-soft: color-mix(in srgb, var(--primary-color-rgb), transparent 85%);
    --particle-primary: var(--primary-color-rgb);
    --heading-gradient-primary: linear-gradient(to bottom right, var(--heading-gradient), var(--secondary-color-rgb));
    --teg-line-bg: color-mix(in srgb, var(--primary-color-rgb), transparent 90%);
    --grid-line: rgba(0, 0, 0, 0.02);
    --glow-color: rgba(37, 99, 235, 0.1);
    --switch-background: #cbced4;
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: #030213;
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);

    /* Grid and Background Colors */
    --color-grid-light: #e5e7eb;
    --color-grid-dark: #1c1917;
    --color-grid-subtle: #80808012;
    --color-grid-white: #ffffff0a;
    --color-grid-indigo: #4f46e50a;
    --color-grid-violet: #8b5cf614;

    /* Highlight and Animated Colors */
    --color-highlight-cyan: #06b6d4;
    --color-highlight-blue: #3b82f6;
    --color-animated-amber: #fbbf24;
    --color-animated-red: #ef4444;
    --color-animated-violet: #8b5cf6;
    --color-animated-pink: #ec4899;
    --color-animated-emerald: #10b981;

    /* Gradients and Overlays */
    --color-gradient-violet-subtle: rgba(139, 92, 246, 0.3);
    --color-gradient-pink-subtle: rgba(236, 72, 153, 0.3);
    --color-gradient-blue-subtle: rgba(59, 130, 246, 0.3);
    --color-overlay-dark-subtle: rgba(0, 0, 0, 0.05);

    /* Specific Section Colors */
    --color-mask-black: #000;
    --color-minimal-bg: #FDFBF7;
    --color-orange: #fe9a00;
    --color-orange2: #ff6900;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --radius-full: var(--radius);
    --radius-2xl: var(--radius);
    --radius-3xl: var(--radius);
}

@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-input-background: var(--input-background);
    --color-switch-background: var(--switch-background);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);

    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);

}

@layer base {
    .website-theme * {
        border-color: var(--border);
        outline-color: var(--ring);
    }

    .website-theme body {
        background-color: var(--background);
        color: var(--foreground);

        font-family: var(--font-family);
        margin-right: 0px !important;
    }

    html.website-theme {
        font-size: var(--font-size);
        overflow-x: hidden;
    }

    .website-theme h1 {
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-medium);
        line-height: 1.5;
    }

    .website-theme h2 {
        font-size: var(--text-xl);
        font-weight: var(--font-weight-medium);
        line-height: 1.5;
    }

    .website-theme h3 {
        font-size: var(--text-lg);
        font-weight: var(--font-weight-medium);
        line-height: 1.5;
    }

    .website-theme h4 {
        font-size: var(--text-base);
        font-weight: var(--font-weight-medium);
        line-height: 1.5;
    }

    .website-theme label {
        font-size: var(--text-base);
        font-weight: var(--font-weight-medium);
        line-height: 1.5;
    }

    .website-theme button {
        font-size: var(--text-base);
        font-weight: var(--font-weight-medium);
        line-height: 1.5;
    }

    .website-theme input {
        font-size: var(--text-base);
        font-weight: var(--font-weight-normal);
        line-height: 1.5;
    }
}

.website-theme {
    .background-color {
        background: var(--background-color);
    }

    .text-color {
        color: var(--text-color);
    }

    .container {
        max-width: var(--container-width) !important;
    }

    .prose h2 {
        font-size: 1.875rem;
        font-weight: 700;
        margin-top: 2.5rem;
        margin-bottom: 1.25rem;
        color: var(--primary);
    }

    .prose p {
        margin-bottom: 1.5rem;
        color: var(--text-primary2);
        line-height: 1.75;
    }

    .prose h2:first-child {
        margin-top: 0;
    }

    .bg-gradient-primary-shadow {
        background-image: linear-gradient(to right, var(--primary-color-rgb),
                color-mix(in srgb, var(--primary-color-rgb), transparent 0%));
    }

    .gradient-background-full-light {
        background-image: linear-gradient(to bottom right,
                color-mix(in srgb, var(--secondary-color-light), transparent 90%),
                color-mix(in srgb, var(--secondary-color-light), transparent 90%),
                color-mix(in srgb, var(--primary-color-light), transparent 60%));
    }

    .gradient-background-full-medium {
        background-image: linear-gradient(to bottom right,
                color-mix(in srgb, var(--secondary-color-light), transparent 50%),
                color-mix(in srgb, var(--primary-color-light), transparent 10%));
    }

    .gradient-primary-full-dark-to-light {
        background-image: linear-gradient(to bottom right,
                color-mix(in srgb, var(--gradient-start), transparent 0%),
                color-mix(in srgb, var(--secondary-color-light), transparent 0%));
    }

    .gradient-primary-full-dark {
        background-image: linear-gradient(to bottom right,
                color-mix(in srgb, var(--secondary-color-light), transparent 0%),
                color-mix(in srgb, var(--gradient-start), transparent 0%));
    }

    .gradient-primary-full {
        background-image: linear-gradient(to bottom right,
                color-mix(in srgb, var(--primary-color-dark), transparent 0%),
                color-mix(in srgb, var(--gradient-start), transparent 0%),
                color-mix(in srgb, var(--primary-color-dark), transparent 0%));
    }

    .gradient-primary {
        background-image: linear-gradient(to top right,
                var(--gradient-priimary),
                var(--gradient-priimary2));
    }


    .gradient-secondary {
        background-image: linear-gradient(to right,
                var(--secondary-color-rgb),
                color-mix(in srgb, var(--secondary-color-rgb), transparent 0%));
    }

    .bg-gradient-primary-top-bottom {
        background-image: linear-gradient(to bottom,
                var(--gradient-priimary),
                var(--gradient-priimary2));
    }

    .bg-gradient-primary {
        /* Fixed: using color-mix for opacity 0.6 */
        background-image: linear-gradient(to right,
                var(--gradient-start),
                color-mix(in srgb, var(--gradient-end), transparent 0%));
    }
        .bg-gradient-primary-heading {
        /* Fixed: using color-mix for opacity 0.6 */
        background-image: linear-gradient(to right,
                var(--gradient-end),
                color-mix(in srgb, var(--gradient-start), transparent 0%));
    }

    .bg-gradient-primary-light {
        /* Fixed: using color-mix for opacity 0.1 */
        background-image: linear-gradient(to right,
                color-mix(in srgb, var(--gradient-start), transparent 80%),
                color-mix(in srgb, var(--gradient-start), transparent 0%));
        color: var(--primary-color-light);
    }

    .bg-primary-background-light {
        background-image: linear-gradient(to bottom right,
                color-mix(in srgb, var(--primary-color-light), transparent 50%),
                color-mix(in srgb, var(--primary-color-light), transparent 70%));
    }

    .bg-gradient-extra-light {
        background-color: #ffffff;
        /* Fixed: using color-mix for opacity 0.05 */
        background-image: linear-gradient(to bottom right,
                color-mix(in srgb, var(--gradient-start), transparent 95%),
                #ffffff,
                color-mix(in srgb, var(--gradient-start), transparent 95%));
    }

    .bg-primary-light {
        background: color-mix(in srgb, var(--gradient-start), transparent 95%);
    }

    .bg-gradient-primary-warm {
        background-image: linear-gradient(to bottom right,
                var(--color-orange2),
                var(--color-orange2),
                var(--color-orange));
    }

    .gradient-black-full {
        background-image: linear-gradient(to bottom right,
                color-mix(in srgb, var(--color-black), transparent 0%),
                color-mix(in srgb, var(--color-gray-900), transparent 10%),
                color-mix(in srgb, var(--color-black), transparent 0%));
    }

    .hover-text:hover h3 {
        color: var(--primary-color-rgb);
    }

    .hover-border:hover {
        border-color: var(--primary-color-rgb);
    }

    .hover-multiple:hover button {
        color: var(--primary-color-rgb);
        background-color: var(--primary-color-rgb);
    }

    .hover-multiple:hover h3 {
        color: var(--primary-color-rgb);
    }

    .hover-bg-btn:hover button {
        background-color: var(--primary-color-rgb);
        color: white;
    }

    .hover-bg-link:hover {
        background-color: var(--primary-color-rgb);
        color: white;
    }

    .heading-gradient {
        background-image: var(--heading-gradient-primary);
    }

    .word-gradient {
        background-image: var(--heading-gradient-primary);
    }

    .text-gradient {
        background-image: linear-gradient(to bottom right,
                var(--gradient-priimary),
                var(--gradient-priimary2));
    }

    .bottom-blue-glow {
        position: absolute;
        inset: 0;
        opacity: 0.4;
        filter: blur(90px);
        /* Fixed: removed rgb() wrapper */
        background: radial-gradient(ellipse at bottom, var(--primary-color-rgb), transparent 70%);
    }

    .gradient-primary:hover {
        background-image: linear-gradient(to top right,
                var(--gradient-priimary2)),
            var(--gradient-priimary);
    }

    .primaryoutline:hover {
        background: color-mix(in srgb, var(--primary-color-light), transparent 90%);
        color: var(--primary-color-light);
        border-color: var(--primary-color-light);
    }

    .primary-button {
        background-color: var(--primary-color-rgb);
    }

    .primary-button:hover {
        background-color: var(--secondary-color-rgb);
    }

    .hover-secondary:hover {
        background-color: var(--secondary);
        color: var(--primary);
    }

    .hover-primary:hover {
        background-color: var(--bg-primary);
        color: white;
    }

    .bg-primary {
        background-color: var(--bg-primary);
    }

    .bg-secondary {
        background-color: var(--secondary-color-rgb);
    }

    .bg-blue-soft {
        background-color: var(--bg-blue-soft);
    }

    .bg-white-primary {
        background-color: var(--badge-white);
    }

    .bg-badge-primary {
        background-color: var(--bg-badge-soft) !important;
    }

    .badge-hero-primary {
        color: var(--badge-hero-primary);
    }

    .banner-gradient {
        background-image: linear-gradient(to bottom right,
                var(--gradient-priimary),
                var(--gradient-priimary2));
    }

    .text-secondary {
        color: var(--secondary-color-rgb);
    }

    .text-primary-light {
        color: var(--primary-color-light);
    }

    .text-primary {
        color: var(--text-primary);
    }

    .text-primary2 {
        color: var(--text-primary2);
    }

    .text-black {
        color: var(--color-primary);
    }

    .text-gray-soft {
        color: var(--text-gray-soft);
    }

    .badge-text-primary {
        color: var(--badge-label-primary);
    }

    .text-stroke-red {
        -webkit-text-stroke: 1px var(--badge-label-primary) !important;
        color: transparent !important;
    }

    .border-primary {
        border-color: var(--text-primary);
    }

    .border-primary-light {
        border-color: var(--border-primary-light);
    }

    .bg-white {
        background-color: var(--background);
    }

    .border-soft {
        border-color: var(--border-soft);
    }

    a,
    button {
        cursor: pointer;
    }

    .font-extrabold {
        font-family: 'fontExtraBold';
    }

    .font-bold {
        font-family: 'fontBold';
    }

    .font-semibold {
        font-family: 'fontSemiBold';
    }

    .tagline-after::after {
        content: " ";

    }

    @keyframes smoothSlideDown {
        0% {
            opacity: 0;
            transform: translateY(-16px);
        }

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

    .mobile-menu-slide {
        animation: smoothSlideDown 0.35s ease-out forwards;
    }

    .light-purple-white-blue-gradient {
        background-image: linear-gradient(to bottom right,
                var(--gradient-start),
                /* purple-100 */
                var(--gradient-middle),
                /* white */
                var(--gradient-end));
    }

    .btn-shadow {
        box-shadow: 0 0 0 2px var(--primary-color-rgb), 0 0 0 calc(2px + 2px) color-mix(in srgb, var(--secondary-color-rgb), transparent 50%), 1px -6px #0000;
        border: transparent;
    }

    /* herosection  css */
    .gradient-bg-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
        pointer-events: none;
    }

    .gradient-sphere {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
    }

    .sphere-center-blue {
        width: 60vw;
        height: 60vw;
        /* Using Variables here */
        background: radial-gradient(circle,
                var(--sphere-inner) 30%,
                var(--sphere-outer) 50%,
                transparent 80%);
        top: 50%;
        left: 50%;
        margin-left: -30vw;
        margin-top: -30vw;
        transition: background 0.5s ease;
        /* Smooth transition when toggling theme */
    }

    /* --- Mobile View Changes --- */
    @media (max-width: 768px) {
        .sphere-center-blue {
            width: 140vw;
            height: 140vw;
            margin-left: -70vw;
            margin-top: -70vw;
            top: 35%;
            opacity: 0.9;
        }
    }

    .noise-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.05;
        z-index: 5;
        /* Noise usually works well on both, but lighter in Light Mode is better */
        mix-blend-mode: overlay;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    }

    .grid-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: 40px 40px;
        /* Using Variables for grid lines */
        background-image:
            linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
            linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
        z-index: 2;
        transition: background-image 0.5s ease;
    }

    .glow {
        position: absolute;
        width: 60vw;
        height: 60vh;
        /* Using Variable */
        background: radial-gradient(circle, var(--glow-color), transparent 70%);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        animation: pulse 8s infinite alternate;
        filter: blur(40px);
    }

    .particles-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
    }

    .particle {
        position: absolute;
        background: var(--particle-primary);
        border-radius: 50%;
        opacity: 0;
        pointer-events: none;
    }


    /* pricing glow */
    /* Pricing Section Gradients & Animation */
    .pricing-glow {
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        filter: blur(120px);
        opacity: 0.15;
        z-index: 0;
        pointer-events: none;
    }

    .glow-left {
        top: -20%;
        left: -10%;
        /* Fixed: removed rgb() wrapper */
        background: var(--primary-color-rgb);
        animation: floatBlob 15s infinite ease-in-out;
    }

    .glow-right {
        top: -20%;
        right: -10%;
        background: var(--secondary-color-rgb);
        animation: floatBlob 18s infinite ease-in-out reverse;
    }

    .pricing-animated-bg {
        background-size: 40px 40px;
        background-image:
            linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
        animation: backgroundMove 30s linear infinite;
    }

    @keyframes floatBlob {
        0% {
            transform: translate(0, 0) scale(1);
        }

        33% {
            transform: translate(30px, 50px) scale(1.1);
        }

        66% {
            transform: translate(-20px, 20px) scale(0.95);
        }

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

    @keyframes backgroundMove {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: 40px 40px;
        }
    }

    /* pricing glow */
    .pricing-glow {
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        filter: blur(120px);
        opacity: 0.2;
        /* Light and subtle */
        z-index: 0;
        pointer-events: none;
    }

    .glow-left {
        top: -20%;
        left: -15%;
        /* Fixed: removed rgb() wrapper */
        background: var(--primary-color-rgb);
        animation: floatBlob 10s ease-in-out infinite;
    }

    .glow-right {
        top: -20%;
        right: -15%;
        background: var(--secondary-color-rgb);
        animation: floatBlob 12s ease-in-out infinite alternate;
    }

    @keyframes floatBlob {
        0% {
            transform: translate(0, 0);
        }

        50% {
            transform: translate(30px, 50px);
        }

        100% {
            transform: translate(0, 0);
        }
    }

    .faq-gradient-left {
        position: absolute;
        bottom: -250px;
        left: -200px;
        width: 600px;
        height: 600px;
        /* Fixed: removed rgb() wrapper */
        background: radial-gradient(circle, var(--primary-color-rgb) 0%, transparent 60%);
        opacity: 0.35;
        filter: blur(120px);
        pointer-events: none;
        z-index: -1;
    }

    .faq-gradient-right {
        position: absolute;
        bottom: -250px;
        right: -200px;
        width: 600px;
        height: 600px;
        /* Fixed: removed rgb() wrapper */
        background: radial-gradient(circle, var(--primary-color-rgb) 0%, transparent 60%);
        opacity: 0.35;
        filter: blur(120px);
        pointer-events: none;
        z-index: -1;
        /* Content ke piche */
    }

    .text-gradient2 {}

    /* tagline */

    .join-gap {
        position: relative;
        z-index: 1;
        width: 32px;
        --size: 17px;
        --m: 0.5;
        --p: calc(var(--m) * var(--size));
        --R: calc(var(--size) * sqrt(var(--m) * var(--m) + 1));
        height: 70px;
        margin: 0px -8px;
        mask: radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #0000 101%) left calc(50% - 2 * var(--size)) bottom 0 / calc(4 * var(--size)) 51% no-repeat, radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%) left 50% bottom var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) no-repeat, radial-gradient(var(--R) at left 50% top calc(var(--size) + var(--p)), #0000 101%) left calc(50% - 2 * var(--size)) top 0 / calc(4 * var(--size)) 51% no-repeat, radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), #0000 99%, #000 101%) left 50% top var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) no-repeat;
        background: linear-gradient(90deg, var(--teg-line-bg), var(--teg-line-bg));
        border: none;
        /* left: 37px; */
    }

    .bg-tagline {
        background-color: var(--teg-line-bg);
    }

    .border-hover:hover {
        /* Fixed: removed rgb() wrapper */
        border: 1px solid var(--primary-color-rgb);
    }

    /* 404 Gradient Text */
    .text-gradient-custom {
        /* Fixed: removed rgb() wrapper */
        background: linear-gradient(135deg, var(--primary-color-rgb) 0%, var(--secondary-color-rgb) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    /* Background Glow Blobs */
    .glow-blob-primary {
        /* Fixed: removed rgb() wrapper */
        background-color: var(--primary-color-rgb);
        filter: blur(80px);
        opacity: 0.15;
    }

    .glow-blob-secondary {
        background-color: var(--secondary-color-rgb);
        filter: blur(80px);
        opacity: 0.15;
    }

    /* Primary Button Styling */
    .btn-primary-custom {
        /* Fixed: removed rgb() wrapper */
        background-color: var(--primary-color-rgb);
        color: #ffffff;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        /* Fixed: removed rgb() wrapper */
        border: 1px solid var(--primary-color-rgb);
    }

    .btn-primary-custom:hover {
        background-color: var(--secondary-color-rgb);
        border-color: var(--secondary-color-rgb);
        /* Green pe black text jyada readable hota hai */
        color: #000000;
        transform: translateY(-3px);
        box-shadow: 0 10px 20px -5px rgba(120, 233, 17, 0.4);
    }

    /* Button Icon Animation on Hover */
    .btn-primary-custom:hover .btn-icon {
        transform: translateX(-4px);
    }

    .bg-primary-30 {
        background-color: color-mix(in srgb, var(--primary-color-rgb), transparent 70%);
    }

    .bg-primary-20 {
        background-color: color-mix(in srgb, var(--primary-color-rgb), transparent 80%);
    }

    .bg-primary-10 {
        background-color: color-mix(in srgb, var(--primary-color-rgb), transparent 90%);
    }

    .bg-primary-5 {
        background-color: color-mix(in srgb, var(--primary-color-rgb), transparent 95%);
    }

    .form-shadow {
        box-shadow: -3px -1px 22px 4px var(--form-shadow-color);
        -webkit-box-shadow: -3px -1px 22px 4px var(--form-shadow-color);
        -moz-box-shadow: -3px -1px 22px 4px var(--form-shadow-color);
    }

    .btn-shadow {
        box-shadow: 1px 0px 5px 2px var(--form-shadow-color);
        -webkit-box-shadow: 1px 0px 5px 2px var(--form-shadow-color);
        -moz-box-shadow: 1px 0px 5px 2px var(--form-shadow-color);
    }

    .to-purple-400 {
        --tw-gradient-to: var(--primary-color-rgb);
    }

    .from-blue-400 {
        --tw-gradient-from: var(--secondary-color-rgb);
    }

    /* dynamic canvas css class */
    .theme-button {
        border-radius: var(--button-radius);
    }

    .theme-radius {
        border-radius: var(--radius);
    }

    .section-spacing {
        padding-top: var(--section-spacing);
        padding-bottom: var(--section-spacing);
    }
  .hero-inner-spacing {
        padding-top: calc(var(--section-spacing) / 2);
        padding-bottom: calc(var(--section-spacing) / 2);
    }
    .section-spacing-top {
        margin-top: var(--section-spacing);
    }

    .section-spacing-bottom {
        margin-bottom: var(--section-spacing);
    }

    /* default shadow classes */
    .shadow-none {
        box-shadow: var(--shadow-none-style) !important;
    }

    .shadow-sm {
        box-shadow: var(--shadow-sm-style) !important;
    }

    .shadow-md {
        box-shadow: var(--shadow-md-style) !important;
    }

    .shadow-lg {
        box-shadow: var(--shadow-lg-style) !important;
    }

    .shadow-xl {
        box-shadow: var(--shadow-xl-style) !important;
    }

    .shadow-2xl {
        box-shadow: var(--shadow-2xl-style) !important;
    }


    /* default border classes */
    .border {
        border-width: var(--border-width) !important;
    }

    .border-b {
        border-bottom-width: var(--border-width) !important;
    }

    .border-t {
        border-top-width: var(--border-width) !important;
    }

    .border-2 {
        border-width: var(--border-width-2) !important;
    }

    .border-4 {
        border-width: var(--border-width-4) !important;
    }

    .border-l-4 {
        border-left-width: var(--border-width-4) !important;
    }

    .text-5xl.font-bold {
        font-family: var(--section-heading-font) !important;
        letter-spacing: var(--text-4xl-tracking) !important;
    }

    /* default Heading classes */

    .text-4xl.font-bold {
        font-family: var(--section-heading-font) !important;
        letter-spacing: var(--text-4xl-tracking) !important;

    }

    .galleryInActive{
  opacity: 50%;
    }
    .galleryInActive:hover{
  opacity: 100%;

    }
    .galleryActive{
    box-shadow: var(--shadow-xl-style) !important;
    scale: 110% 110%;
    }
  
}