:root {
    --bg-color: #ffffff;
    --text-color: #111111;
    --card-bg: #f8f9fa;
    --header-bg: #ffffff;
    --footer-bg: #f5f5f5;
    --input-bg: #ffffff;
    --border-color: #ddd;
}

body.dark-mode {
    --bg-color: #121212;
    --text-color: #f5f5f5;
    --card-bg: #1e1e1e;
    --header-bg: #181818;
    --footer-bg: #101010;
    --input-bg: #222222;
    --border-color: #333;
}

body {
    background: var(--bg-color);
    color: var(--text-color);
    transition: 0.3s ease;
}

header,
.navbar {
    background: var(--header-bg);
}

footer {
    background: var(--footer-bg);
}

.card,
.product-box,
.box,
.section-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

input,
textarea,
select {
    background: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

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

.dark-mode{
    .header-area{
       background: var(--bg-color);
    }  
}

.home.dark-mode{
    .about_area{
       background: var(--bg-color); 
       .bg-theme-color1 {
            background-color: var(--bg-color); 
            .about_info{
                p{
                    color: #fff;
                }
            }
       }
    }
    .music_area.music_gallery{
        background-color: var(--bg-color);
        h3{
            color: #fff;
        }
        .top_music_area{
            background-color: #fff; 
            margin: 0 1px;
        }
    }
}


.frontend\.about.dark-mode{
    .about_area{
        h3{
            color: #fff;
        }
        .about_thumb{
            border: 1px solid #fff;
        }
        .about_info{
            p{
                color: #fff;
            }
        }
    }
}

.frontend\.musictracks.dark-mode{
    .music_area_home{
        background-color: var(--bg-color);
        h3{
            color: #fff;
        }
        .top_music_area{
            background-color: #fff; 
            margin: 0 1px;
        }
    }
}

.frontend\.musicvideos.dark-mode{
    .youtube_video_area{
        background-color: var(--bg-color);
    }
}

.frontend\.contact.dark-mode{
    .contact-section{
        .contact_social{
            h3{
                color: #fff;
            }
        }
        .media.contact-info{
            i{
                color: #fff;
            }
            h3{
                color: #fff;
            }
            p{
               color: #fff; 
            }
        }
    }
}