/* Define Theme Variables */
        :root {
            --primary: #91C75E;
            --secondary: #7A588D;
            --bglight: #F5F5F5;
            --dark: #1A202C;
            --font-sans: 'Inter', sans-serif;
            --font-doodle: 'Caveat', cursive;
        }

        body {
            background-color: var(--bglight);
            color: var(--dark);
            overflow-x: hidden;
			width:100%;
            font-family: var(--font-sans);
            -webkit-font-smoothing: antialiased;
        }

        ::selection {
            background-color: var(--secondary);
            color: #fff;
        }

        /* Essential Doodle Aesthetics */
        .font-doodle { font-family: var(--font-doodle); }
        .font-sans { font-family: var(--font-sans); }

        .border-doodle { border: 3px solid var(--dark); }
        .border-doodle-thick { border: 4px solid var(--dark); }
        .border-white { border-color: #ffffff !important; }
        .border-primary { border-color: var(--primary) !important; }
        .border-dashed { border-style: dashed !important; }
        .border-2 { border-width: 2px !important; }
        .border-4 { border-width: 4px !important; }
        .border-t-4 { border-top-width: 4px !important; }
        .border-t-8 { border-top-width: 8px !important; }
        .border-b-4 { border-bottom-width: 4px !important; }
        .border-l-20 { border-left-width: 20px !important; }
        .border-l-primary { border-left-color: var(--primary) !important; }
        .border-l-secondary { border-left-color: var(--secondary) !important; }
        .border-l-dark { border-left-color: var(--dark) !important; }

        /* Custom Colors */
        .text-primary { color: var(--primary) !important; }
        .text-secondary { color: var(--secondary) !important; }
        .text-dark { color: var(--dark) !important; }
        .text-white { color: #ffffff !important; }
        .text-gray-300 { color: #d1d5db !important; }
        .text-gray-400 { color: #9ca3af !important; }
        .text-gray-700 { color: #374151 !important; }
        .text-gray-800 { color: #1f2937 !important; }

        .bg-primary { background-color: var(--primary) !important; }
        .bg-secondary { background-color: var(--secondary) !important; }
        .bg-dark { background-color: var(--dark) !important; }
        .bg-bglight { background-color: var(--bglight) !important; }
        .bg-white { background-color: #ffffff !important; }
        .bg-primary-10 { background-color: rgba(145, 199, 94, 0.1) !important; }
        .bg-primary-20 { background-color: rgba(145, 199, 94, 0.2) !important; }
        .bg-primary-30 { background-color: rgba(145, 199, 94, 0.3) !important; }
        .bg-secondary-10 { background-color: rgba(122, 88, 141, 0.1) !important; }
        .bg-bglight-90 { background-color: rgba(245, 245, 245, 0.9) !important; }

        /* Wobbly Radius Variations */
        .radius-1 { border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; }
        .radius-2 { border-radius: 15px 225px 15px 255px/255px 15px 225px 15px; }
        .radius-3 { border-radius: 25px 255px 35px 15px/255px 15px 225px 25px; }
        .radius-blob { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }

        /* Solid Drop Shadows */
        .shadow-primary { box-shadow: 8px 8px 0px 0px var(--primary); }
        .shadow-secondary { box-shadow: 8px 8px 0px 0px var(--secondary); }
        .shadow-dark { box-shadow: 8px 8px 0px 0px var(--dark); }
        .shadow-light { box-shadow: 8px 8px 0px 0px #FFFFFF; }
        .shadow-sm-custom { box-shadow: 4px 4px 0px 0px var(--dark); }
        .shadow-lg-custom { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

        /* Custom Sizing (Translating Tailwind specifically used sizes) */
        .w-4 { width: 1rem; } .h-4 { height: 1rem; }
        .w-5 { width: 1.25rem; } .h-5 { height: 1.25rem; }
        .w-6 { width: 1.5rem; } .h-6 { height: 1.5rem; }
        .w-8 { width: 2rem; } .h-8 { height: 2rem; }
        .w-10 { width: 2.5rem; } .h-10 { height: 2.5rem; }
        .w-12 { width: 3rem; } .h-12 { height: 3rem; }
        .w-16 { width: 4rem; } .h-16 { height: 4rem; }
        .w-20 { width: 5rem; } .h-20 { height: 5rem; }
        .w-24 { width: 6rem; } .h-24 { height: 6rem; }
        .w-32 { width: 8rem; } .h-32 { height: 8rem; }
        .w-40 { width: 10rem; } .h-40 { height: 10rem; }
        .w-48 { width: 12rem; }
        .w-64 { width: 16rem; } .h-64 { height: 16rem; }
        .w-80 { width: 20rem; } .h-80 { height: 20rem; }
        .w-nav { height: 5rem; }

        .max-w-md { max-width: 28rem !important; }
        .max-w-2xl { max-width: 42rem !important; }
        .max-w-3xl { max-width: 48rem !important; }
        .max-w-4xl { max-width: 56rem !important; }
        .max-w-7xl { max-width: 80rem !important; }

        /* Typography */
        .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
        .text-base { font-size: 1rem; line-height: 1.5rem; }
        .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
        .text-2xl { font-size: 1.5rem; line-height: 2rem; }
        .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
        .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
        .text-5xl { font-size: 3rem; line-height: 1; }
        .text-6xl { font-size: 3.75rem; line-height: 1; }
        .text-7xl { font-size: 4.5rem; line-height: 1; }

        .font-medium { font-weight: 500; }
        .font-bold { font-weight: 700; }
        .font-extrabold { font-weight: 800; }

        .leading-none { line-height: 1; }
        .leading-tight { line-height: 1.25; }
        .leading-snug { line-height: 1.375; }
        .leading-relaxed { line-height: 1.625; }
        .tracking-wide { letter-spacing: 0.025em; }
        .tracking-widest { letter-spacing: 0.1em; }
        .uppercase { text-transform: uppercase; }
        .whitespace-nowrap { white-space: nowrap; }

        /* Position Utilities */
        .top-0 { top: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } .right-0 { right: 0; }
        .top-6 { top: 1.5rem; } .left-6 { left: 1.5rem; } .right-6 { right: 1.5rem; }
        .top-10 { top: 2.5rem; } .left-10 { left: 2.5rem; } .bottom-10 { bottom: 2.5rem; } .right-10 { right: 2.5rem; }
        .top-20 { top: 5rem; } .bottom-20 { bottom: 5rem; }
        .top-28 { top: 7rem; }
        .right-2 { right: 0.5rem; }

        .-top-1 { top: -0.25rem; } .-bottom-1 { bottom: -0.25rem; }
        .-bottom-2 { bottom: -0.5rem; }
        .-top-4 { top: -1rem; } .-left-4 { left: -1rem; } .-right-4 { right: -1rem; } .-bottom-4 { bottom: -1rem; }
        .-top-5 { top: -1.25rem; } .-right-5 { right: -1.25rem; }
        .-top-6 { top: -1.5rem; } .-left-6 { left: -1.5rem; } .-right-6 { right: -1.5rem; } .-bottom-6 { bottom: -1.5rem; }
        .-top-8 { top: -2rem; } .-left-8 { left: -2rem; } .-right-8 { right: -2rem; } .-bottom-8 { bottom: -2rem; }
        .-top-12 { top: -3rem; } .-left-16 { left: -4rem; } .-right-16 { right: -4rem; }

        .top-50 { top: 50%; } .left-50 { left: 50%; }

        /* Transforms */
        .translate-x-4 { transform: translateX(1rem); }
        .translate-y-4 { transform: translateY(1rem); }
        .-translate-x-4 { transform: translateX(-1rem); }
        .-translate-y-50 { transform: translateY(-50%); }
        .-translate-x-50 { transform: translateX(-50%); }
        .rotate-1 { transform: rotate(1deg); }
        .rotate-2 { transform: rotate(2deg); }
        .rotate-3 { transform: rotate(3deg); }
        .rotate-6 { transform: rotate(6deg); }
        .rotate-12 { transform: rotate(12deg); }
        .rotate-45 { transform: rotate(45deg); }
        .-rotate-1 { transform: rotate(-1deg); }
        .-rotate-2 { transform: rotate(-2deg); }
        .-rotate-3 { transform: rotate(-3deg); }
        .-rotate-12 { transform: rotate(-12deg); }
        .scale-x-invert { transform: scaleX(-1); }
        .translate-middle-custom { transform: translate(-50%, -50%); }

        /* Interaction States */
        .custom-transition { transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
        .hover-lift { transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
        .hover-lift:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0px 0px var(--dark); }
        .hover-lift-primary { transition: all 0.3s; }
        .hover-lift-primary:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0px 0px var(--primary); }

        .hover-text-secondary:hover { color: var(--secondary) !important; }
        .hover-text-primary:hover { color: var(--primary) !important; }
        .hover-text-white:hover { color: #ffffff !important; }

        .hover-translate-sm { transition: transform 0.3s; }
        .hover-translate-sm:hover { transform: translate(4px, 4px); box-shadow: none !important; }

        .hover-decoration-wavy:hover { text-decoration: underline wavy var(--primary); text-underline-offset: 4px; }

        /* Group Hover Logic */
        .custom-group:hover .group-hover-w-full { width: 100% !important; }
        .custom-group:hover .group-hover-scale { transform: scale(1.1); }
        .custom-group:hover .group-hover-rotate-12 { transform: rotate(12deg); }
        .custom-group:hover .group-hover-rotate-minus-12 { transform: rotate(-12deg); }
        .custom-group:hover .group-hover-rotate-0 { transform: rotate(0deg); }

        @media (min-width: 768px) {
            .custom-group:hover .md-group-hover-translate-x-6 { transform: translateX(1.5rem) !important; }
            .custom-group:hover .md-group-hover-translate-y-6 { transform: translateY(1.5rem) !important; }
            .md-group-hover-translate-x-6 { transition: transform 0.3s; }
            .md-group-hover-translate-y-6 { transition: transform 0.3s; }
        }

        /* Miscellaneous utilities used by original file */
        .z-minus-1 { z-index: -1; }
        .z-0 { z-index: 0; }
        .z-10 { z-index: 10; }
        .z-20 { z-index: 20; }
        .z-30 { z-index: 30; }
        .z-50 { z-index: 50; }

        .opacity-5 { opacity: 0.05; }
        .opacity-20 { opacity: 0.2; }
        .opacity-30 { opacity: 0.3; }

        .blur-2xl { filter: blur(40px); }
        .pointer-events-none { pointer-events: none; }
        .cursor-default { cursor: default; }

        /* Gaps for Flex / Grid */
        .gap-6 { gap: 1.5rem !important; }
        .gap-8 { gap: 2rem !important; }

        /* Animations */
        @keyframes wiggle {
            0%, 100% { transform: rotate(-2deg); }
            50% { transform: rotate(2deg); }
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        @keyframes drawLine {
            from { stroke-dashoffset: 1000; }
            to { stroke-dashoffset: 0; }
        }
        @keyframes ping {
            75%, 100% { transform: scale(2); opacity: 0; }
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: .5; }
        }
        @keyframes bounce {
            0%, 100% { transform: translateY(-25%) rotate(45deg); animation-timing-function: cubic-bezier(0.8,0,1,1); }
            50% { transform: translateY(0) rotate(45deg); animation-timing-function: cubic-bezier(0,0,0.2,1); }
        }

        .animate-wiggle { animation: wiggle 3s ease-in-out infinite; }
        .animate-float { animation: float 4s ease-in-out infinite; }
        .animate-ping { animation: ping 3s cubic-bezier(0, 0, 0.2, 1) infinite; }
        .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
        .animate-bounce { animation: bounce 1s infinite; }
        .animate-draw { stroke-dasharray: 1000; animation: drawLine 3s ease-out forwards; }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 12px; }
        ::-webkit-scrollbar-track { background: #F5F5F5; border-left: 2px solid #1A202C; }
        ::-webkit-scrollbar-thumb { background: #7A588D; border: 2px solid #1A202C; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #91C75E; }

        /* SVG Base Styles */
        svg path, svg circle, svg rect, svg line { vector-effect: non-scaling-stroke; }

        /* Custom Spacing Overrides to match exactly */
        .py-24 { padding-top: 6rem; padding-bottom: 6rem; }
        .py-32 { padding-top: 8rem; padding-bottom: 8rem; }
        .pt-32 { padding-top: 8rem; }
        .pb-20 { padding-bottom: 5rem; }
        .mb-20 { margin-bottom: 5rem; }
        .mb-24 { margin-bottom: 6rem; }

        @media (min-width: 992px) {
            .lg-pt-48 { padding-top: 12rem; }
            .lg-pb-32 { padding-bottom: 8rem; }
            .lg-h-500 { height: 500px !important; }
        }
        .section-title { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.2; }
        section#faq {
            padding: 6rem 0;
        }
        .shadow-doodle-secondary {
            box-shadow: 6px 6px 0px 0px var(--secondary);
        }
        /* Accordion Custom */
        .faq-item {
            background: var(--white);
            margin-bottom: 1rem;
            cursor: pointer;
        }
        .faq-answer {
            display: none;
            padding-top: 1rem;
            border-top: 2px dashed rgba(26, 32, 44, 0.2);
            margin-top: 1rem;
            color: #4B5563;
        }
        .faq-item.active .faq-answer { display: block; }
        .faq-item.active .faq-icon { transform: rotate(45deg); color: var(--secondary); }