:root {
            --primary: #91C75E;
            --primary-rgb: 145, 199, 94;
            --secondary: #7A588D;
            --secondary-rgb: 122, 88, 141;
            --background: #F5F5F5;
            --background-rgb: 245, 245, 245;
            --dark: #1A202C;
            --dark-rgb: 26, 32, 44;
            --surface: #FFFFFF;
        }

        body {
            background-color: var(--background);
            color: var(--dark);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        ::selection {
            background-color: var(--secondary);
            color: white;
        }
        /*.navbar-brand img {
            height: 60px;
        }*/
        /* Typography & Custom Colors */
        .font-doodle { font-family: 'Caveat', cursive; }
        .font-sans { font-family: 'Inter', sans-serif; }

        .text-primary-custom { color: var(--primary) !important; }
        .text-secondary-custom { color: var(--secondary) !important; }
        .text-dark-custom { color: var(--dark) !important; }
        .text-gray-700 { color: #374151 !important; }
        .text-gray-600 { color: #4B5563 !important; }
        .text-gray-500 { color: #6B7280 !important; }
        .text-gray-400 { color: #9CA3AF !important; }
        .text-gray-300 { color: #D1D5DB !important; }

        .bg-primary-custom { background-color: var(--primary) !important; }
        .bg-secondary-custom { background-color: var(--secondary) !important; }
        .bg-dark-custom { background-color: var(--dark) !important; }
        .bg-background { background-color: var(--background) !important; }

        /* Transparent/Opacity Backgrounds */
        .bg-background-90 { background-color: rgba(245, 245, 245, 0.9); }
        .bg-primary-20 { background-color: rgba(145, 199, 94, 0.2); }
        .bg-primary-10 { background-color: rgba(145, 199, 94, 0.1); }
        .bg-primary-5 { background-color: rgba(145, 199, 94, 0.05); }
        .bg-secondary-20 { background-color: rgba(122, 88, 141, 0.2); }
        .bg-secondary-10 { background-color: rgba(122, 88, 141, 0.1); }
        .bg-secondary-5 { background-color: rgba(122, 88, 141, 0.05); }
        .bg-white-10 { background-color: rgba(255, 255, 255, 0.1); }

        .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
        .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; }

        /* Mobile-optimized sizing - scales up on desktop */
        .text-4xl { font-size: 2rem; line-height: 1.2; }
        .text-5xl { font-size: 2.5rem; line-height: 1.1; }
        .text-6xl { font-size: 3rem; line-height: 1.1; }

        .leading-tight { line-height: 1.25; }
        .leading-relaxed { line-height: 1.625; }
        .leading-1-1 { line-height: 1.1; }
        .leading-1-3 { line-height: 1.3; }
        .tracking-wide { letter-spacing: 0.025em; }
        .tracking-wider { letter-spacing: 0.05em; }
        .tracking-widest { letter-spacing: 0.1em; }

        @media (min-width: 768px) {
            .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
            .text-5xl { font-size: 3rem !important; line-height: 1 !important; }
            .text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
            .md-text-5xl { font-size: 3rem !important; line-height: 1 !important; }
            .md-text-6xl { font-size: 3.75rem !important; line-height: 1.3 !important; }
            .md-text-7xl { font-size: 4.5rem !important; line-height: 1 !important; }
            .md-text-8xl { font-size: 6rem !important; line-height: 1 !important; }
        }

        .container-7xl { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
        .container-6xl { max-width: 1152px; margin: 0 auto; padding: 0 1.5rem; }
        .container-5xl { max-width: 1024px; margin: 0 auto; padding: 0 1.5rem; }
        .container-4xl { max-width: 896px; margin: 0 auto; padding: 0 1.5rem; }

        /* Mobile-optimized padding - expands on desktop */
        .py-24 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
        .pt-24 { padding-top: 4rem !important; }
        .pb-24 { padding-bottom: 4rem !important; }
        .py-20 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
        .mb-20 { margin-bottom: 3.5rem !important; }
        .mb-16 { margin-bottom: 3rem !important; }
        .mb-12 { margin-bottom: 2rem !important; }

        @media (min-width: 768px) {
            .py-24 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
            .pt-24 { padding-top: 6rem !important; }
            .pb-24 { padding-bottom: 6rem !important; }
            .py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
            .mb-20 { margin-bottom: 5rem !important; }
            .mb-16 { margin-bottom: 4rem !important; }
            .mb-12 { margin-bottom: 3rem !important; }
        }

        .gap-6 { gap: 1.5rem; }
        .gap-8 { gap: 2rem; }

        .border-2 { border-width: 2px !important; }
        .border-3 { border-width: 3px !important; }
        .border-4 { border-width: 4px !important; }
        .border-dark { border-color: var(--dark) !important; }
        .border-white { border-color: white !important; }
        .border-primary { border-color: var(--primary) !important; }
        .border-secondary { border-color: var(--secondary) !important; }

        /* Organic, hand-drawn looking borders */
        .doodle-border {
            border: 3px solid var(--dark);
            border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
        }
        .doodle-border-alt {
            border: 3px solid var(--secondary);
            border-radius: 15px 225px 15px 255px/255px 15px 225px 15px;
        }

        .shadow-doodle { box-shadow: 6px 6px 0px 0px var(--secondary); }
        .shadow-doodle-primary { box-shadow: 6px 6px 0px 0px var(--primary); }
        .shadow-doodle-dark { box-shadow: 6px 6px 0px 0px var(--dark); }

        .hover-shadow-doodle-hover:hover { box-shadow: 2px 2px 0px 0px var(--dark) !important; }
        .hover-shadow-none:hover { box-shadow: none !important; }
        .hover-shadow-doodle-primary:hover { box-shadow: 6px 6px 0px 0px var(--primary) !important; }
        .hover-shadow-doodle-dark:hover { box-shadow: 6px 6px 0px 0px var(--dark) !important; }

        .transition-all { transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
        .transition-transform { transition: transform 0.3s ease; }
        .transition-colors { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }

        .hover-translate-y-1:hover { transform: translateY(-0.25rem); }
        .hover-translate-x-1:hover { transform: translateX(0.25rem); }
        .hover-translate-y-2:hover { transform: translateY(-0.5rem); }
        .hover-translate-y-minus-2:hover { transform: translateY(-0.5rem); }

        .group:hover .group-hover-translate-x-2 { transform: translateX(0.5rem); }
        .group:hover .group-hover-w-full { width: 100%; }
        .group:hover .group-hover-scale-110 { transform: scale(1.1); }
        .group:hover .group-hover-rotate-3 { transform: rotate(3deg); }
        .group:hover .group-hover-rotate-12 { transform: rotate(12deg); }
        .group:hover .group-hover-rotate-minus-3 { transform: rotate(-3deg); }
        .group:hover .group-hover-rotate-minus-12 { transform: rotate(-12deg); }
        .group:hover .group-hover-translate-y-minus-2 { transform: translateY(-0.5rem); }

        .doodle-card {
            background: #FFFFFF;
            border: 3px solid var(--dark);
            border-radius: 10px 30px 15px 25px / 25px 15px 30px 10px;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .doodle-card:hover {
            transform: translateY(-8px) rotate(-1deg);
            box-shadow: 8px 8px 0px var(--primary);
        }

       

        .mix-blend-multiply { mix-blend-mode: multiply; }
        .filter-blur-3xl { filter: blur(64px); }

        .min-h-95vh { min-height: 95vh; }
        .w-max-content { width: max-content; }

        .rounded-full { border-radius: 9999px; }
        .rounded-3xl { border-radius: 1.5rem; }
        .rounded-2xl { border-radius: 1rem; }

        .z-50 { z-index: 50; }
        .z-10 { z-index: 10; }
        .z-0 { z-index: 0; }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 12px; }
        ::-webkit-scrollbar-track { background: var(--background); border-left: 2px solid var(--dark); }
        ::-webkit-scrollbar-thumb { background: var(--primary); border: 2px solid var(--dark); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--secondary); }

        /* Hardware Accelerated Animations for Fast Rendering */
        .animate-blob { animation: blob 10s infinite; will-change: transform; }
        .animate-float { animation: float 6s ease-in-out infinite; will-change: transform; }
        .animate-wiggle { animation: wiggle 3s ease-in-out infinite; will-change: transform; }
        .group:hover .group-hover-animate-wiggle { animation: wiggle 3s ease-in-out infinite; will-change: transform; }
        .animate-spin-slow { animation: spin 15s linear infinite; will-change: transform; }
        .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; will-change: opacity; }
        .animate-bounce { animation: bounce 1s infinite; will-change: transform; }
        .animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; will-change: transform, opacity; }

        .path-draw {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: drawPath 4s ease forwards;
        }

        @keyframes drawPath { to { stroke-dashoffset: 0; } }

        @keyframes blob {
            0% { transform: translate(0px, 0px) scale(1); }
            33% { transform: translate(30px, -50px) scale(1.1); }
            66% { transform: translate(-20px, 20px) scale(0.9); }
            100% { transform: translate(0px, 0px) scale(1); }
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }
        @keyframes wiggle {
            0%, 100% { transform: rotate(-2deg); }
            50% { transform: rotate(2deg); }
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: .5; }
        }
        @keyframes bounce {
            0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
            50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }
        }
        @keyframes ping {
            75%, 100% { transform: scale(2); opacity: 0; }
        }

        @keyframes riverFlow {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(10px); }
        }

        @keyframes walkCross {
            0%, 100% { transform: translateX(0) translateY(0); }
            50% { transform: translateX(100px) translateY(-15px); }
        }

        .animate-river { animation: riverFlow 4s ease-in-out infinite; }
        .animate-walk { animation: walkCross 8s ease-in-out infinite; }

        @keyframes marchLine {
            to { stroke-dashoffset: -28; }
        }
        .animate-march-line { animation: marchLine 1.5s linear infinite; }

        /* Specific offset utility overrides */
        .transform-rotate-3 { transform: rotate(3deg); }
        .transform-rotate-minus-3 { transform: rotate(-3deg); }
        .transform-rotate-12 { transform: rotate(12deg); }
        .transform-rotate-minus-12 { transform: rotate(-12deg); }
        .transform-scale-110 { transform: scale(1.1); }
        .transform-scale-125 { transform: scale(1.25); }

        @media (min-width: 768px) {
            .md-translate-y-minus-8 { transform: translateY(-2rem); }
        }
        @media (min-width: 576px) {
            .sm-translate-y-4 { transform: translateY(1rem); }
        }

        /* Smooth scrolling */
        html { scroll-behavior: smooth; }

       

        /* Hide Bootstrap collapse below lg — we use our own panel */
        @media (max-width: 991.98px) {
            #wpNavbarCollapse { display: none !important; }
        }

        /* ── Nav CTA Button ── */
        .wp-nav-cta-link {
            background-color: var(--primary);
            color: var(--dark);
            padding: 0.65rem 1.75rem;
            border-radius: 9999px;
            font-weight: 700;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border: 2px solid var(--dark);
            box-shadow: 3px 3px 0px 0px var(--dark);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            transition: all 0.3s ease;
        }
        .wp-nav-cta-link:hover {
            box-shadow: 5px 5px 0px 0px var(--dark);
            transform: translateY(-2px) translateX(-2px);
            background-color: var(--secondary);
            color: white;
        }

        /* Footer WP Dynamic Menu Styles */
        .wp-footer-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
        .wp-footer-menu li a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
        .wp-footer-menu li:hover a { color: var(--secondary) !important; }

.navbar .nav-link.active,
.navbar .dropdown-item.active{
    color: var(--primary) !important;
    font-weight: 700;
    background: transparent !important;
}

.navbar .nav-item.active > .nav-link{
    color: var(--primary) !important;
}


#newsletterModal .modal-content {
    border-radius: 12px;
    padding: 1rem;
}
.newsletter-popup-form input[type="email"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 12px;
}
.newsletter-popup-form input[type="submit"] {
    background-color: #91c75e;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
}
.newsletter-popup-form input[type="submit"]:hover {
    background-color: #7ab049;
}

@media (max-width: 767px) {

    .popmake-857{
        width:100%;
        justify-content:center;
        text-align:center;
        padding:12px 16px !important;
    }

}