/* Theme Toggle Button Styles */
.theme-toggle-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    color: #1a1a1a;
}

.theme-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.theme-toggle-btn img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.theme-toggle-btn .sun-icon {
    display: none;
}

.theme-toggle-btn .moon-icon {
    display: block;
}

/* --- Dark Mode Configuration --- */
[data-theme="dark"] {
    --main-bg: #0D0D0D;
    --white-color: #0D0D0D;
    --color-white: #0D0D0D;
    --color-title: #ffffff;
    --color-text: #b0b0b0;
    --color-light: #161616;
}

[data-theme="dark"] body {
    background-color: #0D0D0D !important;
    color: #ffffff !important;
}

/* Sections Backgrounds */
[data-theme="dark"] section,
[data-theme="dark"] .partner-section,
[data-theme="dark"] .tech-stack,

[data-theme="dark"] .pricing-section,
[data-theme="dark"] .faq-section,
[data-theme="dark"] .ready-to-build-section,
[data-theme="dark"] .footer-section,
[data-theme="dark"] .trusted-section {
    background-color: #0D0D0D !important;
    background-image: none !important;
    color: #ffffff !important;
}

[data-theme="dark"] .case-study-hero,
[data-theme="dark"] .case-studies-grid-section,
[data-theme="dark"] .outerhero-collage,
[data-theme="dark"] .hero-collage-section,
[data-theme="dark"] .startup-growth-section,
[data-theme="dark"] .our-mission-section,
[data-theme="dark"] .our-vision-section,
[data-theme="dark"] .our-strength-section,
[data-theme="dark"] .choose-section,
[data-theme="dark"] .blog-hero,
[data-theme="dark"] .blog-section,
[data-theme="dark"] .main1 {
    background-color: #0D0D0D !important;
    color: #ffffff !important;
}

/* [data-theme="dark"] .hero-section,
[data-theme="dark"] .what-we-do-section,
[data-theme="dark"] .branding-section {
    background-color: #000 !important;
} */



/* Specific Service Section Backgrounds */
[data-theme="dark"] .uiux-section,
[data-theme="dark"] .webdev-section,
[data-theme="dark"] .mvp-section,
[data-theme="dark"] .testimonial-section {
    background-color: #1A1A1A !important;
}



/* Typography Overrides */
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] .title,
[data-theme="dark"] .card-title,
[data-theme="dark"] .service-heading,
[data-theme="dark"] .footer-title,
[data-theme="dark"] .column-title {
    color: #ffffff !important;
}

[data-theme="dark"] p,
[data-theme="dark"] .p-text,
[data-theme="dark"] .card-desc,
[data-theme="dark"] .hero-description,
[data-theme="dark"] .footer-bottom,
[data-theme="dark"] .testimonial-card p {
    color: #b0b0b0 !important;
}

[data-theme="dark"] .case-study-title,
[data-theme="dark"] .case-study-name,
[data-theme="dark"] .hero-collage-title .dark,
[data-theme="dark"] .hero-title,
[data-theme="dark"] .startup-title,
[data-theme="dark"] .our-mission-title,
[data-theme="dark"] .our-vision-title,
[data-theme="dark"] .our-strength-title,
[data-theme="dark"] .choose-left h2,
[data-theme="dark"] .blog-title,
[data-theme="dark"] .blog-card-title,
[data-theme="dark"] .left h1 {
    color: #000000 !important;
}

[data-theme="dark"] .case-study-text,
[data-theme="dark"] .case-study-desc,
[data-theme="dark"] .hero-description,
[data-theme="dark"] .startup-description,
[data-theme="dark"] .our-mission-text,
[data-theme="dark"] .our-vision-text,
[data-theme="dark"] .our-strength-text,
[data-theme="dark"] .choose-card p,
[data-theme="dark"] .blog-hero-sub,
[data-theme="dark"] .left span,
[data-theme="dark"] .years-number,
[data-theme="dark"] .years-text {
    color: #000000 !important;
}

/* Cards & Containers */
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .partner-card,
[data-theme="dark"] .tech-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .other-service-card,
[data-theme="dark"] .price-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .choose-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .form-box {
    background-color: #161616 !important;
    border-color: #222 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .case-study-card {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .tag {
    background-color: #161616 !important;
    color: #b0b0b0 !important;
    border: 1px solid #333 !important;
}

/* Header & Navigation */
/* [data-theme="dark"] .header-wrapper.scrolled {
    background: rgba(13, 13, 13, 0.95) !important;
    border-bottom: 1px solid #222 !important;
    backdrop-filter: blur(10px);
} */

[data-theme="dark"] .header-wrapper{
    background: rgba(13, 13, 13, 0.95) !important;
    border-bottom: 1px solid #222 !important;
    backdrop-filter: blur(10px);
    color: #fff;
}
[data-theme="dark"] .cust-dev-container{
    /* background-color: #000; */
    color: #000;
}


[data-theme="dark"] .menu-toggle {
    /* background-color: #ffffff; */
    border: 1px solid #fff;
    color: #ffffff;
}


[data-theme="dark"] .nav-item {
    color:#fdfbfb !important;
}

[data-theme="dark"] .logo img,
[data-theme="dark"] .footer-image img {
    filter: invert(1) brightness(2);
}

/* Buttons */
[data-theme="dark"] .cta-button,
[data-theme="dark"] .hero-cta {
    background: #ffffff !important;
    color: #0D0D0D !important;
}

[data-theme="dark"] .cta-text,
[data-theme="dark"] .hero-cta-text {
    color: #0D0D0D !important;
}

[data-theme="dark"] .hero-collage-btn {
    background: #ffffff !important;
    color: #0D0D0D !important;
}

[data-theme="dark"] .theme-toggle-btn {
    background: #161616;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    color: #ffffff;
}

[data-theme="dark"] .theme-toggle-btn .sun-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle-btn .moon-icon {
    display: none;
}

/* Footer Specifics */
[data-theme="dark"] .footer-column a,
[data-theme="dark"] .footer-bottom a {
    color: #b0b0b0 !important;
}

[data-theme="dark"] .footer-column a:hover {
    color: #ffffff !important;
}

[data-theme="dark"] .footer-button {
    background-color: #ffffff !important;
}

[data-theme="dark"] .footer-button .button-text {
    color: #0D0D0D !important;
}

[data-theme="dark"] .footer-button .button-arrow::before {
    color: #0D0D0D !important;
}

/* Contact form specifics */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .file-box {
    background-color: #1a1a1a !important;
    border-color: #333 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .input-group label {
    background-color: #1a1a1a !important;
    color: #888 !important;
}

[data-theme="dark"] input:focus ~ label,
[data-theme="dark"] input:not(:placeholder-shown) ~ label,
[data-theme="dark"] textarea:focus ~ label,
[data-theme="dark"] textarea:not(:placeholder-shown) ~ label {
    color: #ffffff !important;
}

[data-theme="dark"] .bottom-row span,
[data-theme="dark"] .bottom-row p {
    color: #b0b0b0 !important;
}

[data-theme="dark"] .bottom-row a {
    color: #ffffff !important;
}

/* Blog specifics */
[data-theme="dark"] .blog-search-box {
    background-color: #1a1a1a !important;
    border-color: #333 !important;
}

[data-theme="dark"] .blog-search input {
    color: #ffffff !important;
}

/* Hero Collage Dark Theme */
[data-theme="dark"] .hero-collage-title .gray {
    color: #cccccc !important;
}

[data-theme="dark"] .hero-collage-btn:hover {
    background-color: #e5e5e5 !important;
}

[data-theme="dark"] .hero-collage-images img {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    filter: brightness(0.8) !important;
}

/* --- Responsive Layouts --- */
@media (max-width: 768px) {
    .theme-toggle-btn {
        bottom: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
    }
}