/*=========================================================
    DARKMODE.CSS
=========================================================*/

/* Smooth Theme Transition */
html,
body,
section,
div,
nav,
footer,
.card,
.about-card,
.gallery-card,
.timeline-content,
.registration-card,
.contact-form,
.form-control,
.form-select,
.btn,
.stat-card {
    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


/*=========================================================
    BODY
=========================================================*/

[data-theme="dark"] {
    background: #0f172a;
    color: #f8fafc;
}


/*=========================================================
    TEXT
=========================================================*/

[data-theme="dark"] h1,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #fff;
}

[data-theme="dark"] h2 {
    color: #000;
}

[data-theme="dark"] p,
[data-theme="dark"] small,
[data-theme="dark"] li {
    color: #cbd5e1;
}

[data-theme="dark"] label {
    color: #000;
}


/*=========================================================
    NAVBAR
=========================================================*/

[data-theme="dark"] .custom-nav {
    background: rgba(15, 23, 42, .95);
    backdrop-filter: blur(20px);
}

[data-theme="dark"] .navbar-brand h5 {
    color: #fff;
}

[data-theme="dark"] .navbar-brand small {
    color: #cbd5e1;
}

[data-theme="dark"] .nav-link {
    color: #fff;
}

[data-theme="dark"] .nav-link:hover {
    color: var(--secondary);
}


/*=========================================================
    HERO
=========================================================*/

[data-theme="dark"] .hero-section {
    background:
        linear-gradient(
            rgba(0, 0, 0, .75),
            rgba(0, 0, 0, .75)
        ),
        url("https://i.postimg.cc/5y3w31KP/BG.jpg")
        center/cover;
}


/*=========================================================
    CARDS
=========================================================*/

[data-theme="dark"] .about-card,
[data-theme="dark"] .gallery-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .registration-card,
[data-theme="dark"] .contact-form,
[data-theme="dark"] .timeline-content,
[data-theme="dark"] .sponsor-card {
    background: #1e293b;
    color: #fff;
    border: 1px solid #334155;
}


/*=========================================================
    FORM
=========================================================*/

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: #0f172a;
    color: #fff;
    border: 1px solid #475569;
}

[data-theme="dark"] .form-control::placeholder {
    color: #94a3b8;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: #0f172a;
    color: #fff;
}

[data-theme="dark"] .cont-us {
    color: #fff;
}


/*=========================================================
    CONTACT
=========================================================*/

[data-theme="dark"] .contact-section {
    background: #111827;
}


/*=========================================================
    FOOTER
=========================================================*/

[data-theme="dark"] .footer {
    background: #020617;
}

[data-theme="dark"] .footer p {
    color: #cbd5e1;
}


/*=========================================================
    BUTTONS
=========================================================*/

[data-theme="dark"] .btn-outline-primary {
    color: #fff;
    border-color: #fff;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background: #fff;
    color: #111827;
}


/*=========================================================
    SCROLLBAR
=========================================================*/

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1e293b;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--primary);
}


/*=========================================================
    SELECTION
=========================================================*/

[data-theme="dark"] ::selection {
    background: var(--secondary);
    color: #111827;
}


/*=========================================================
    RESPONSIVE (max-width: 992px)
=========================================================*/

@media (max-width: 992px) {
    [data-theme="dark"] .nav-link {
        color: #000;
    }

    [data-theme="dark"] label {
        color: #000;
    }

    .contact-section h2 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 25px;
        color: #111827;
    }

    [data-theme="dark"] .contact-section h2 {
        color: #ffffff;
    }

    [data-theme="dark"] .btn-outline-primary {
        color: #000;
        border-color: #000;
    }
}

/*=========================================================
    END
=========================================================*/