/* Dark mode for entire homepage */
body {
    background-color: #0B1D39 !important;  /* Dark navy blue */
    color: #ffffff !important;             /* White text */
}

/* Make sure all headings, paragraphs, spans, and links are white */
h1, h2, h3, h4, h5, h6,
p, span, a, li, label, div {
    color: #ffffff !important;
}

/* Fix links so they don’t disappear */
a {
    color: #00aaff !important;  /* Bright blue links */
}
a:hover {
    color: #66ccff !important;
}

/* Fix buttons */
.eBtn.gradient {
    background: #ffcc00 !important;  /* Bright yellow */
    color: #000000 !important;
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: bold;
}
.eBtn.gradient:hover {
    background: #ff9900 !important;
    color: #ffffff !important;
}

.eBtn.learn-btn {
    background: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}
.eBtn.learn-btn:hover {
    background: #ffffff !important;
    color: #0B1D39 !important;
}


/* Global dark mode background and text */
body, .main-container {
    background-color: #0b1d3a; /* Dark blue background */
    color: #ffffff;           /* White text */
}

/* Links */
a {
    color: #ffffff; /* White links */
}

/* Buttons */
button, .btn {
    background-color: #1e3a5f; /* Darker button background */
    color: #ffffff;
    border: 1px solid #ffffff;
}

/* Override inline or specific dark mode conflicts */
* {
    background-color: inherit !important;
    color: inherit !important;
}



/* Make header/navigation area white */
header, 
.navbar, 
.navbar-area, 
.main-header {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Menu links inside the header */
header a, 
.navbar a, 
.main-header a {
    color: #000000 !important;
}

/* Active/hover effect */
header a:hover, 
.navbar a:hover, 
.main-header a:hover {
    color: #1a73e8 !important; /* Blue hover color */
}




/* 📱 Mobile Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 1.6rem;   /* smaller heading for phone */
        line-height: 1.3;
    }

    .hero-image img {
        max-width: 250px;    /* ✅ reduced image size */
        margin: 0 auto;
        display: block;
    }

    .login-image img,
    .signup-image img {
        max-width: 200px;    /* ✅ smaller on login & signup */
        margin: 20px auto;
        display: block;
    }

    .cta-button {
        width: 100%;          /* full width on phone */
        font-size: 14px;
        padding: 10px 18px;
    }

    .course-card, 
    .feature-box {
        margin-bottom: 15px;
    }
}




/* 🔒 Extra reduction for login & signup images */
.login-image img,
.signup-image img {
    max-width: 140px !important;   /* even smaller */
    height: auto !important;
    margin: 15px auto !important;
    display: block;
}

/* Phone view fine-tuning */
@media (max-width: 480px) {
    .login-image img,
    .signup-image img {
        max-width: 120px !important; /* extra small on very small screens */
    }
}