/* ==============================================
   DARK MODE STYLES
   ============================================== */

/* Dark mode active class for body */
body.dark-mode {
    background: #001103;
    color: #d6fff4;
}


               /* Show default cursor on mobile/touch devices */
        @media (hover: none) and (pointer: coarse) {
            * {
                cursor: auto !important;
            }
            
            .cursor-arrow {
                display: none !important;
            }
        }


/* Background lines in dark mode */
body.dark-mode .bg-line path{
    opacity: 0.3;
    color: #32ff8b;
    /* filter: invert(1); */
}

/* Glass header dark mode */
body.dark-mode .glass-header {
    background: rgba(211, 255, 219, 0.245);
    border: 1px solid rgba(212, 255, 243, 0.2);
}

body.dark-mode .profile-badge {
    background: #000000;
    color: #ffffff;
    border: 1px solid rgba(0, 28, 5, 0.2);
}

body.dark-mode .profile-name,
body.dark-mode .profile-handle {
    color: hsl(0, 0%, 100%);
}

/* Menu button dark mode */ 
body.dark-mode .menu-btn {
    background: #000000;
    border: 1px solid rgba(0, 28, 5, 0.2);
}

body.dark-mode .menu-btn:hover {
    background: #000000;
    border: 1.6px solid #ffffff;
    /* background-image: 
        linear-gradient(#D4FFF3, #D4FFF3),
        linear-gradient(45deg, #009358, #32ff8b); */
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

body.dark-mode .menu-btn span {
    background: #D4FFF3;
}

/* Navigation card dark mode */
body.dark-mode .nav-card {
    background: rgba(211, 255, 219, 0.245);
    border: 1px solid rgba(212, 255, 243, 0.2);
}

body.dark-mode .nav-card-inner {
    background: #000000;
}

body.dark-mode .nav-card a {
    color: #fff;
}
body.dark-mode .nav-card a:hover {
    color: #D4FFF3;
}

/* Hero content dark mode */
body.dark-mode .hero-content h1,
body.dark-mode .hero-content h2,
body.dark-mode .hero-content p {
    color: #ECFFFA;
}

body.dark-mode .switching-text {
    color: #6db68c;
}

/* Work with me button dark mode */
body.dark-mode .work-with-me-button-container {
    background: rgba(211, 255, 219, 0.245);
    border: 1px solid rgba(212, 255, 243, 0.2);
}

body.dark-mode .work-with-me-cta-btn {
    background: #000000;
    color: #D4FFF3;
}

body.dark-mode .work-with-me-cta-btn:hover {
    background: #001b0c;
    color: #ffffff;
}

body.dark-mode .work-with-me-sparkle-star path {
    fill: #000000;
}

/* Line breakers dark mode */
body.dark-mode .line-breaker {
    border-top: 2px dashed #04725A;
    opacity: 0.2;
}

/* Tag title dark mode */
body.dark-mode .tag-title {
    color: rgba(212, 255, 243, 0.5);
}

/* Services section dark mode */
body.dark-mode .services-title {
    color: #ECFFFA;
}

body.dark-mode .services-subtitle {
    color: #D4FFF3;
}

body.dark-mode .service-card {
    background: rgba(0, 28, 5, 0.6);
    border: 2px dashed rgba(212, 255, 243, 0.2);
}

body.dark-mode .service-card:hover {
    border-color: rgba(50, 255, 139, 0.5);
    box-shadow: 0 20px 60px rgba(50, 255, 139, 0.2);
}

body.dark-mode .service-icon {
    background: #ECFFFA;
}

body.dark-mode .service-card:hover .service-icon {
    background: #000000;
}

body.dark-mode .service-icon svg path,
body.dark-mode .service-icon svg circle,
body.dark-mode .service-icon svg rect {
    stroke: #001C05;
}

body.dark-mode .service-title {
    color: #ECFFFA;
}

body.dark-mode .service-description {
    color: #D4FFF3;
}

/* Sticky service badges dark mode */
body.dark-mode .sticky-service-badge {
    background: rgba(44, 67, 49, 0.8);
    border: 1px solid rgba(212, 255, 243, 0.3);
}
body.dark-mode .sticky-service-badge svg path {
    /* Cursor arrow dark mode */ 
    stroke: #d9ffe8;
}
body.dark-mode .sticky-service-badge svg rect {
    /* Cursor arrow dark mode */ 
    stroke: #d9ffe8;
}
body.dark-mode .sticky-service-badge:hover {
    background: rgba(33, 70, 40, 0.997);
    border-color: rgba(50, 255, 139, 0.5);
}

body.dark-mode .sticky-service-badge span {
    color: #ECFFFA;
}

/* Gallery items dark mode */
body.dark-mode .gallery-item {
    border: 2px dashed rgba(85, 122, 101, 0.3);
    background: #0A1F0E;
}

/* Budget section dark mode */
body.dark-mode .budget-tag {
    background: rgba(0, 28, 5, 0.6);
    border: 2px dashed rgba(212, 255, 243, 0.2);
    color: #ECFFFA;
}

body.dark-mode .budget-title {
    color: #ECFFFA;
}

body.dark-mode .budget-subtitle {
    color: #D4FFF3;
}

body.dark-mode .budget-card {
    background: rgba(0, 28, 5, 0.6);
    border: 2px dashed rgba(212, 255, 243, 0.2);
}

body.dark-mode .budget-card::before {
    background: #ECFFFA;
}

body.dark-mode .budget-card:hover {
    border-color: transparent;
    box-shadow: 0 20px 60px rgba(50, 255, 139, 0.2);
}

body.dark-mode .budget-card:hover .card-content {
    color: #001C05;
}

body.dark-mode .budget-card:hover .price-range {
    color: #001C05;
}

body.dark-mode .budget-card:hover .feature-item {
    color: #001C05;
    border-color: rgba(0, 28, 5, 0.2);
}

body.dark-mode .budget-card:hover .feature-checkmark {
    background: #001C05;
}

body.dark-mode .budget-card:hover .feature-checkmark::after {
    border-color: #ECFFFA;
}

body.dark-mode .budget-tier {
    color: #a1ffca;
}
body.dark-mode .budget-card:hover .budget-tier {
    color: #006212;
}


body.dark-mode .price-range {
    color: #ECFFFA;
}

body.dark-mode .budget-timeframe {
    color: #D4FFF3;
}
body.dark-mode .budget-card:hover .budget-timeframe {
    color: #003209;
}

body.dark-mode .feature-item {
    color: #D4FFF3;
    border: 1px dashed rgba(212, 255, 243, 0.2);
}

body.dark-mode .feature-checkmark {
    background: #ECFFFA;
}

body.dark-mode .feature-checkmark::after {
    border-color: #001C05;
}

body.dark-mode .featured-badge {
    background: #ECFFFA;
    color: #001C05;
}

body.dark-mode .payment-info {
    background: rgba(0, 28, 5, 0.6);
    border: 2px dashed rgba(212, 255, 243, 0.2);
}

body.dark-mode .payment-title {
    color: #ECFFFA;
}

body.dark-mode .payment-badge {
    background: #cfe9e2;
    color: #001C05;
    border: 2px dashed #04725A;
}

body.dark-mode .payment-badge:hover {
    border-color: #76ffb1;
    background: #ffffff;
}

body.dark-mode .payment-note {
    color: #D4FFF3;
}

/* What I Don't Do section dark mode */
body.dark-mode .dont-do-tag {
    background: rgba(0, 28, 5, 0.6);
    border: 2px dashed rgba(212, 255, 243, 0.2);
    color: #ECFFFA;
}

body.dark-mode .dont-do-title {
    color: #ECFFFA;
}

body.dark-mode .dont-do-subtitle {
    color: #D4FFF3;
}

body.dark-mode .dont-do-card {
    background: rgba(0, 28, 5, 0.6);
    border: 2px dashed rgba(212, 255, 243, 0.2);
}

body.dark-mode .dont-do-card:hover {
    border-color: rgba(255, 100, 100, 0.4);
    box-shadow: 0 20px 60px rgba(255, 100, 100, 0.15);
}

body.dark-mode .dont-do-card-title {
    color: #ECFFFA;
}

body.dark-mode .dont-do-card-description {
    color: #D4FFF3;
}

body.dark-mode .dont-do-footer {
    background: #cdece4;
}

body.dark-mode .dont-do-footer p {
    color: #001C05;
}

body.dark-mode .dont-do-footer strong {
    color: #009358;
}

/* Work section dark mode */
body.dark-mode .work-tag {
    background: rgba(0, 28, 5, 0.6);
    border: 2px dashed rgba(212, 255, 243, 0.2);
    color: #ECFFFA;
}

body.dark-mode .work-title {
    color: #ECFFFA;
}

body.dark-mode .work-subtitle {
    color: #D4FFF3;
}

body.dark-mode .process-step {
    background: rgba(0, 28, 5, 0.6);
    border: 2px dashed rgba(212, 255, 243, 0.2);
}

body.dark-mode .process-step:hover {
    border-color: rgba(50, 255, 139, 0.5);
    box-shadow: 0 20px 60px rgba(50, 255, 139, 0.2);
}

body.dark-mode .step-number {
    background: #ECFFFA;
    color: #001C05;
}

body.dark-mode .process-step:hover .step-number {
    background: #000000;
    color: rgba(50, 255, 139, 0.875);
}

body.dark-mode .step-title {
    color: #ECFFFA;
}

body.dark-mode .step-description {
    color: #D4FFF3;
}

/* Footer dark mode */
body.dark-mode .site-footer {
    color: #D4FFF3;
}

/* Cursor arrow dark mode */
/* body.dark-mode .cursor-arrow path {
    fill: #ECFFFA;
    stroke: #32ff8b;
} */

/* Click animation lines dark mode */
/* body.dark-mode .click-line {
    background: #32ff8b;
} */

/* Theme toggle button */
.theme-toggle {
    position: fixed;
    bottom: 50px;
    left: 50px;
    width: 60px;
    height: 60px;
    background: #001C05;
    border: 2px solid rgba(212, 255, 243, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.theme-toggle:hover {
    transform: scale(1.05) rotate(15deg);
    box-shadow: 0 12px 40px rgba(0, 147, 88, 0.2);
    border-color: rgba(50, 255, 139, 0.5);
}

.theme-toggle svg {
    width: 28px;
    height: 28px;
    transition: all 0.3s ease;
}

.theme-icon {
    position: absolute;
    transition: all 0.3s ease;
}

.theme-icon.hidden {
    opacity: 0;
    transform: rotate(180deg) scale(0);
}

/* Dark mode theme toggle */
body.dark-mode .theme-toggle {
    background: #ECFFFA;
    border: 2px solid rgba(0, 28, 5, 0.2);
}

body.dark-mode .theme-toggle:hover {
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(168, 255, 184, 0.2);
    border-color: rgba(0, 147, 88, 0.5);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .theme-toggle {
        bottom: 40px;
        left: 40px;
        width: 56px;
        height: 56px;
    }
    
    .theme-toggle svg {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 480px) {
    .theme-toggle {
        bottom: 40px;
        left: 30px;
        width: 52px;
        height: 52px;
    }
    
    .theme-toggle svg {
        width: 22px;
        height: 22px;
    }
}













   /* Dark mode styles */
     
        body.dark-mode .line-breaker {
            border-top: 2px dashed #04725A;
            opacity: 0.2;
        }

        body.dark-mode .connect-label,
        body.dark-mode .questions-label {
            background: rgba(0, 28, 5, 0.6);
            border: 2px dashed rgba(212, 255, 243, 0.2);
            color: #ECFFFA;
        }

        body.dark-mode .connect-heading-title,
        body.dark-mode .questions-heading-title {
            color: #ECFFFA;
        }

        body.dark-mode .connect-heading-text,
        body.dark-mode .questions-heading-text {
            color: #D4FFF3;
        }

        body.dark-mode .connect-box,
        body.dark-mode .question-block {
            background: rgba(0, 28, 5, 0.6);
            border: 2px dashed rgba(212, 255, 243, 0.2);
        }

        body.dark-mode .connect-box:hover,
        body.dark-mode .question-block:hover {
            border-color: rgba(50, 255, 139, 0.5);
            box-shadow: 0 20px 60px rgba(50, 255, 139, 0.2);
        }

        body.dark-mode .connect-symbol {
            background: #000000;
        }

        body.dark-mode .connect-box:hover .connect-symbol {
            background: #000000;
        }

        body.dark-mode .connect-primary-text,
        body.dark-mode .question-trigger {
            color: #ECFFFA;
        }

        body.dark-mode .connect-secondary-text,
        body.dark-mode .answer-text {
            color: #D4FFF3;
        }

        body.dark-mode .connect-action-btn {
            background: #ECFFFA;
            color: #001C05;
        }

        body.dark-mode .connect-action-btn:hover {
            background: #ffffff;
        }

        body.dark-mode .question-trigger:hover {
            color: #32ff8b;
        }

        body.dark-mode .question-chevron path {
            stroke: #ECFFFA;
        }

        @media (max-width: 768px) {
            .connect-symbol {
                width: 70px;
                height: 70px;
            }

            .connect-symbol svg {
                width: 35px;
                height: 35px;
            }

            .connect-action-btn {
                padding: 16px 32px;
                font-size: 16px;
            }
        }

















 /* ==============================================
   NEW BUDGET SECTION DARK MODE STYLES
   Paste this at the bottom of your style-dark.css
   ============================================== */

body.dark-mode .budget-card-service {
    background: rgba(0, 28, 5, 0.6);
    border: 2px dashed rgba(212, 255, 243, 0.2);
}

body.dark-mode .budget-card-service::before {
    background: #ECFFFA;
}

body.dark-mode .budget-card-service:hover {
    border-color: #a1ffca;
    box-shadow: 0 20px 60px rgba(50, 255, 139, 0.2);
}

body.dark-mode .service-category-icon {
    background: #ECFFFA;
}

body.dark-mode .budget-card-service:hover .service-category-icon {
    background: 3#000000;
}

body.dark-mode .service-category-icon svg path,
body.dark-mode .service-category-icon svg rect {
    stroke: #001C05;
}

body.dark-mode .service-category-title {
    color: #ECFFFA;
}

body.dark-mode .budget-card-service:hover .service-category-title {
    color: #001C05;
}

body.dark-mode .service-category-desc {
    color: #D4FFF3;
}

body.dark-mode .budget-card-service:hover .service-category-desc {
    color: #001C05;
}

body.dark-mode .price-from,
body.dark-mode .price-to {
    color: #ECFFFA;
}

body.dark-mode .budget-card-service:hover .price-from,
body.dark-mode .budget-card-service:hover .price-to {
    color: #001C05;
}

body.dark-mode .price-divider {
    color: #D4FFF3;
}

body.dark-mode .budget-card-service:hover .price-divider {
    color: #001C05;
    opacity: 0.4;
}

body.dark-mode .scope-examples li {
    color: #D4FFF3;
    border: 1px dashed rgba(212, 255, 243, 0.2);
}

body.dark-mode .budget-card-service:hover .scope-examples li {
    color: #001C05;
    border-color: rgba(0, 28, 5, 0.2);
}

body.dark-mode .scope-examples li::before {
    background: #ECFFFA;
}

body.dark-mode .budget-card-service:hover .scope-examples li::before {
    background: #001C05;
}

body.dark-mode .scope-examples li::after {
    border-color: #001C05;
}

body.dark-mode .budget-card-service:hover .scope-examples li::after {
    border-color: #ECFFFA;
}

body.dark-mode .pricing-note {
    background: rgba(0, 28, 5, 0.6);
    border: 2px dashed rgba(212, 255, 243, 0.2);
}

body.dark-mode .pricing-note p {
    color: #D4FFF3;
}

body.dark-mode .pricing-note strong {
    color: #a1ffca;
}