/* Black Frame Theme for Homepage */

/* Main body background - black */
body {
    background-color: #000000 !important;
    color: #ffffff;
}

/* Header with black theme */
header {
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: none !important;
}

/* Enhanced Logo for Black Theme */
header .logo {
    position: relative;
}

header .logo::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(247, 202, 62, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    transition: all var(--transition-slow);
    z-index: -1;
}

header .logo:hover::before {
    width: 110%;
    height: 110%;
}

header .logo img {
    filter: drop-shadow(0 0.2rem 0.8rem rgba(247, 202, 62, 0.3)) brightness(1.1) !important;
    transition: all var(--transition-base);
    height: 4.5rem !important;
}

header .logo:hover img {
    filter: drop-shadow(0 0.5rem 1.5rem rgba(247, 202, 62, 0.6)) brightness(1.2) !important;
    transform: scale(1.05);
}

header.scrolled .logo img {
    filter: drop-shadow(0 0.2rem 0.5rem rgba(247, 202, 62, 0.2)) brightness(1.05) !important;
    height: 4rem !important;
}

header.scrolled {
    background: rgba(0, 0, 0, 0.98) !important;
    box-shadow: 0 0.3rem 1.5rem rgba(247, 202, 62, 0.1);
}

header .navbar ul li a {
    color: rgba(255, 255, 255, 0.8) !important;
}

header .navbar ul li a:hover,
header .navbar ul li a.active {
    color: var(--yellow) !important;
}

header #menu-bar {
    color: #ffffff !important;
}

/* All sections with black background */
section {
    background-color: #000000 !important;
    color: #ffffff;
}

/* Home/hero section */
.home {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
    color: #ffffff;
}

.slide {
    background: transparent !important;
    color: #ffffff !important;
}

.slide h1,
.slide h3 {
    color: #ffffff !important;
    text-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.5);
    font-size: 1.8rem !important;
}

.slide h3 {
    font-size: 1.6rem !important;
}

.slide p {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.3);
    font-size: 1.2rem !important;
}

/* About section */
.about {
    background: #000000 !important;
    color: #ffffff;
}

.about .heading,
.about h1 {
    color: #ffffff !important;
}

.about .heading span {
    color: var(--yellow) !important;
}

.about p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.about .banner {
    border: none !important;
    box-shadow: 0 0.5rem 2rem rgba(247, 202, 62, 0.2);
}

/* Programs section */
.projects {
    background: #000000 !important;
    color: #ffffff;
}

.projects .heading {
    color: #ffffff !important;
}

.projects .heading span {
    color: var(--yellow) !important;
}

.projects .row .content .info {
    background: rgba(26, 26, 26, 0.8) !important;
    border: none !important;
    color: #ffffff;
}

.projects .row .content .info:hover {
    background: rgba(26, 26, 26, 1) !important;
    border: none !important;
    box-shadow: 0 0.5rem 2rem rgba(247, 202, 62, 0.3);
}

.projects .row .content .info h3 {
    color: #ffffff !important;
}

.projects .row .content .info p {
    color: rgba(255, 255, 255, 0.8) !important;
}

.projects .row .image {
    background: rgba(26, 26, 26, 0.8) !important;
    border: none !important;
}

/* What We Do section */
#whatwedo {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
}

#whatwedo .heading {
    color: #ffffff !important;
}

#whatwedo .heading span {
    color: var(--yellow) !important;
}

#whatwedo .info {
    background: rgba(26, 26, 26, 0.9) !important;
    border: none !important;
    color: #ffffff;
}

#whatwedo .info:hover {
    background: rgba(26, 26, 26, 1) !important;
    border: none !important;
    box-shadow: 0 0.5rem 2rem rgba(247, 202, 62, 0.3);
}

#whatwedo .info h3 {
    color: var(--yellow) !important;
}

#whatwedo .info p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Join Us / EYN section */
.joinus {
    background: #000000 !important;
    color: #ffffff;
}

.joinus .heading {
    color: #ffffff !important;
}

.joinus .heading span {
    color: var(--yellow) !important;
}

.joinus p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.joinus .joining {
    border: none !important;
    box-shadow: 0 0.5rem 2rem rgba(247, 202, 62, 0.2);
}

/* Talks/Testimonials section */
.talks {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
    color: #ffffff;
}

.talks .heading {
    color: #ffffff !important;
}

.talks .heading span {
    color: var(--yellow) !important;
}

.mySlides {
    background: rgba(26, 26, 26, 0.6) !important;
    color: #ffffff;
    border: none !important;
    border-radius: 1rem;
    padding: 3rem;
}

.mySlides q {
    color: rgba(255, 255, 255, 0.9) !important;
}

.mySlides .author {
    color: var(--yellow) !important;
}

/* Buttons on black background */
.btn {
    background: transparent !important;
    color: var(--yellow) !important;
    border: 0.2rem solid var(--yellow);
}

.btn:hover {
    background: var(--yellow) !important;
    color: #000000 !important;
    box-shadow: 0 0.5rem 1.5rem rgba(247, 202, 62, 0.4);
}

/* Scrollbar for black theme */
html::-webkit-scrollbar-track {
    background: #000000;
}

html::-webkit-scrollbar-thumb {
    background: var(--yellow);
    border-radius: 1rem;
}

html::-webkit-scrollbar-thumb:hover {
    background: var(--yellow-dark);
}

/* Navigation dots and controls */
.navigation-manual .manual-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 0.2rem solid rgba(247, 202, 62, 0.5) !important;
}

.navigation-manual .manual-btn:hover {
    background: var(--yellow) !important;
    border-color: var(--yellow) !important;
}

.navigation-auto div {
    border: 0.2rem solid rgba(247, 202, 62, 0.5) !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

#radio1:checked ~ .navigation-auto .auto-btn1,
#radio2:checked ~ .navigation-auto .auto-btn2,
#radio3:checked ~ .navigation-auto .auto-btn3,
#radio4:checked ~ .navigation-auto .auto-btn4 {
    background: var(--yellow) !important;
    border-color: var(--yellow) !important;
}

input[type="radio"]:checked + label .manual-btn,
input[type="radio"]:checked ~ .navigation-manual .manual-btn {
    background: var(--yellow) !important;
    border-color: var(--yellow) !important;
}

/* Slider container and border */
.border {
    background: rgba(0, 0, 0, 0.8) !important;
    border: none !important;
}

.slider {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
    background-image: none !important;
    border: none !important;
}

.slides {
    background: transparent !important;
}

/* Slider controls */
.prev, .next {
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 1rem;
}

.prev:hover, .next:hover {
    background: rgba(247, 202, 62, 0.8);
    color: #000000 !important;
}

/* Dot indicators */
.dot {
    background: rgba(255, 255, 255, 0.3);
}

.dot.active,
.dot:hover {
    background: var(--yellow);
}

/* Footer adjustments for black theme */
.footer {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
    border-top: none !important;
}

/* Spinner/loader */
.spinner-wrapper {
    background: #000000 !important;
}

/* Selection color */
*::selection {
    background: var(--yellow);
    color: #000000;
}

/* Links */
a {
    color: var(--yellow);
}

a:hover {
    color: var(--yellow-light);
}

/* HR separator */
hr {
    border: none !important;
    background: transparent !important;
    height: 0.1rem;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Mobile menu for black theme */
@media (max-width: 800px) {
    header .navbar {
        background: rgba(0, 0, 0, 0.98) !important;
        border-top: none !important;
    }
    
    header .navbar ul {
        background: rgba(0, 0, 0, 0.98) !important;
    }
    
    header .navbar ul li a {
        color: rgba(255, 255, 255, 0.8) !important;
        border-bottom: none !important;
    }
    
    header .navbar ul li a:hover {
        background: rgba(247, 202, 62, 0.1);
        color: var(--yellow) !important;
    }
}

/* Dark mode toggle adjustments */
.dark-mode {
    /* Additional dark mode styles if needed */
}

/* Ensure all text is visible */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
}

p, span, div, li {
    color: rgba(255, 255, 255, 0.9);
}

/* News section for black theme */
.news {
    background: #000000 !important;
}

.news .heading {
    color: #ffffff !important;
}

.news .heading span {
    color: var(--yellow) !important;
}

.news-item-inner {
    background: rgba(26, 26, 26, 0.8) !important;
    border: none !important;
    color: #ffffff;
}

.news-item-inner:hover {
    background: rgba(26, 26, 26, 1) !important;
    border: none !important;
}

.news-title {
    color: #ffffff !important;
}

.news-tags {
    color: rgba(255, 255, 255, 0.8) !important;
}

.news-tags a {
    color: var(--yellow) !important;
}

/* Events section */
.events {
    background: #000000 !important;
}

.events .heading {
    color: #ffffff !important;
}

.events .heading span {
    color: var(--yellow) !important;
}

.eventbox {
    background: rgba(26, 26, 26, 0.8) !important;
    border: none !important;
}

.eventbox h3 {
    color: #ffffff !important;
}

/* Scroll to top button */
#button {
    background: var(--yellow) !important;
    color: #000000 !important;
    border: 0.2rem solid var(--yellow) !important;
}

#button:hover {
    background: var(--yellow-dark) !important;
    box-shadow: 0 0.5rem 1.5rem rgba(247, 202, 62, 0.4) !important;
}

/* Override any white backgrounds */
.white-bg,
.bg-white {
    background: #000000 !important;
}

/* Card enhancements for black theme */
.card-enhanced {
    background: rgba(26, 26, 26, 0.8) !important;
    border: none !important;
}

.card-enhanced:hover {
    background: rgba(26, 26, 26, 1) !important;
    border: none !important;
}