/* Dark Mode CSS */
:root {
    --primary: #8A6FFF; /* Lighter purple for better contrast */
    --secondary: #FFC448;
    --light: #1E2029; /* Dark background */
    --dark: #F0F0F0; /* Light text */
    --bg-dark: #12141D; /* Dark background */
    --bg-darker: #0A0B11; /* Darker background */
    --text-light: #E0E0E0; /* Light text */
    --text-muted: #AAAAAA; /* Muted text */
    --border-color: #2A2D3A; /* Border color */
}

body {
    background-color: var(--bg-dark);
    color: var(--text-light);
}

/* Navbar */
.navbar {
    background-color: var(--bg-darker) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.navbar .navbar-nav .nav-link {
    color: var(--text-light);
}

.navbar-brand {
    background-color: var(--primary) !important;
}

/* Custom Colors */
.custom-yellow {
    color: #FFD700; /* Dark yellow color */
}

/* Header */
#home {
    background: url(../img/bg-header2.png) left top no-repeat, var(--bg-dark);
}

.bg-light {
    background-color: var(--bg-dark) !important;
}

.bg-white {
    background-color: var(--bg-dark) !important;
}

/* Sections */
.container-fluid.bg-light {
    background-color: var(--bg-darker) !important;
}

/* Cards and containers */
.service-item, 
.portfolio-item,
.team-item,
.testimonial-item,
.modal-content {
    background-color: var(--bg-darker) !important;
    border-color: var(--border-color);
}

/* Text colors */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-light);
}

p, span, li, a:not(.btn) {
    color: var(--text-muted);
}

/* Buttons */
.btn-play:after {
    background-color: var(--bg-darker);
}

/* Progress bars */
.progress {
    background-color: var(--bg-darker);
}

/* Form elements */
input, textarea, select {
    background-color: var(--bg-darker) !important;
    border-color: var(--border-color) !important;
    color: var(--text-light) !important;
}

/* Footer */
.container-fluid.bg-dark {
    background-color: var(--bg-darker) !important;
}

/* Spinner */
#spinner {
    background-color: var(--bg-dark) !important;
}

/* Tab navigation */
.nav-pills {
    background-color: var(--bg-darker);
    border-color: var(--primary) !important;
}

.nav-pills .nav-link {
    color: var(--text-light);
}

.nav-pills .nav-link.active {
    background-color: var(--primary);
}

/* Testimonial section */
.testimonial-carousel .owl-item.center .testimonial-item {
    background-color: var(--primary) !important;
}

/* Hover effects */
.service-item:hover,
.portfolio-item:hover {
    box-shadow: 0 0 15px rgba(138, 111, 255, 0.3);
}