html.dark-mode body,
html.dark-mode main,
html.dark-mode .page-wrapper {
  background-color: #121212 !important;
  color: #f5f5f5 !important;
}

html.dark-mode .site-header {
  border-bottom: none !important;
  box-shadow: none !important;
}

html.dark-mode .study-section.gcse-bg {
  background-color: #181818 !important;
  color: #f5f5f5 !important;
}


/* Global Dark Mode Base */
html.dark-mode {
  background-color: #121212;
  color: #f5f5f5;
}

html.dark-mode a {
  color: #9ac7ff;
}

/* Header */
html.dark-mode .site-header {
  background-color: #1e1e1e !important;
  color: #f5f5f5;
}

html.dark-mode .site-header .nav a {
  color: #f5f5f5 !important;
}

html.dark-mode .menu-toggle,
html.dark-mode .dark-mode-toggle {
  color: #f5f5f5;
}

/* Cookie Banner */
html.dark-mode .cookie-banner {
  background: #333;
  color: #fff;
}

html.dark-mode .cookie-buttons .accept {
  background-color: #3f87a6;
}

html.dark-mode .cookie-buttons .reject {
  background-color: #777;
  color: #eee;
}

/* Reviews Section */
html.dark-mode .reviews {
  background-color: #1e1e1e;
  color: #f5f5f5;
}

html.dark-mode .review-card {
  background-color: #2b2b2b;
  color: #f5f5f5;
}

html.dark-mode .review-card span {
  color: #3f87a6;
}

/* Hero Section */
html.dark-mode .hero {
  background-color: #1a1a1a !important;
  color: #f5f5f5;
}

html.dark-mode .overlay {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Benefits Section */
html.dark-mode .benefits, 
html.dark-mode .enhanced-benefits {
  background-color: #1e1e1e !important;
  color: #f5f5f5 !important;
}

html.dark-mode .benefit-card {
  background-color: #2b2b2b !important;
  color: #f5f5f5 !important;
  border: 1px solid #444 !important;
}

html.dark-mode .benefit-card .emoji {
  font-size: 2rem;
}

/* Categories Section */
html.dark-mode .categories {
  background-color: #1e1e1e !important;
  color: #f5f5f5 !important;
}

html.dark-mode .category-card {
  background-color: #2b2b2b !important;
  color: #f5f5f5 !important;
  border: 1px solid #444 !important;
  transition: background-color 0.3s;
}

html.dark-mode .category-card:hover {
  background-color: #3a3a3a !important;
}

/* Blog Section */
html.dark-mode .blog-section {
  background-color: #1e1e1e !important;
  color: #f5f5f5 !important;
}

html.dark-mode .blog-card {
  background-color: #2b2b2b !important;
  color: #f5f5f5 !important;
  border: 1px solid #444 !important;
  transition: background-color 0.3s;
}

html.dark-mode .blog-card:hover {
  background-color: #3a3a3a !important;
}

html.dark-mode .read-more {
  color: #9ac7ff !important;
}

/* CTA Section */
html.dark-mode .cta {
  background-color: #1e1e1e !important;
  color: #f5f5f5 !important;
}

html.dark-mode .cta-btn {
  background-color: #3f87a6 !important;
  color: #fff !important;
  transition: background-color 0.3s;
}

html.dark-mode .cta-btn:hover {
  background-color: #326d88 !important;
}

/* Popular Quizzes */
html.dark-mode .popular-quizzes {
  background-color: #1e1e1e !important;
  color: #f5f5f5 !important;
}

html.dark-mode .quiz-card {
  background-color: #2b2b2b !important;
  color: #f5f5f5 !important;
  border: 1px solid #444 !important;
  transition: background-color 0.3s;
}

html.dark-mode .quiz-card:hover {
  background-color: #3a3a3a !important;
}

html.dark-mode .btn.primary {
  background-color: #3f87a6 !important;
  color: #fff !important;
}

/* Tracking Soon Section */
html.dark-mode .tracking-soon {
  background-color: #1e1e1e !important;
  color: #f5f5f5 !important;
}

/* Adsense Placeholder */
html.dark-mode .adsense-placeholder {
  background-color: #2b2b2b !important;
  border: 1px dashed #555 !important;
}

html.dark-mode .adsense-label {
  color: #bbb !important;
}

/* Back To Top Button */
html.dark-mode #backToTop {
  background-color: #444 !important;
  color: #fff !important;
  border: 1px solid #666 !important;
  transition: background-color 0.3s;
}

html.dark-mode #backToTop:hover {
  background-color: #555 !important;
}

/* Additional cookie banner dark mode */
html.dark-mode .cookie-banner p {
  color: #fff !important;
}

html.dark-mode .cookie-buttons button {
  border: none !important;
}

/* Hero Button Fix */
html.dark-mode .hero-text .button {
  background-color: #2563eb; /* Tailwind-style blue */
  color: #ffffff;
}

html.dark-mode .hero-text .button:hover {
  background-color: #1d4ed8; /* slightly darker blue */
}


/* Category Card Text */
html.dark-mode .category-card {
  background-color: #2b2b2b !important;
  color: #f5f5f5 !important;
  border: 1px solid #444 !important;
}

html.dark-mode .category-card:hover {
  background-color: #3a3a3a !important;
  color: #fff !important;
}

/* Quiz Card Headings & Text */
html.dark-mode .quiz-card h3,
html.dark-mode .quiz-card p {
  color: #f5f5f5 !important;
}

/* CTA Button Fix */
html.dark-mode .cta .button,
html.dark-mode .cta-btn {
  background-color: #3f87a6 !important;
  color: white !important;
}

html.dark-mode .cta .button:hover,
html.dark-mode .cta-btn:hover {
  background-color: #326d88 !important;
}

/* Category Card */
html.dark-mode .category-card {
  background-color: #2b2b2b !important;
  color: #f5f5f5 !important;
  border: 1px solid #444 !important;
}
html.dark-mode .category-card:hover {
  background-color: #3a3a3a !important;
  color: #fff !important;
}

/* Quiz Card Text */
html.dark-mode .quiz-card h3,
html.dark-mode .quiz-card p {
  color: #f5f5f5 !important;
}

/* Quiz Card Button */
html.dark-mode .btn.primary {
  background-color: #3f87a6 !important;
  color: white !important;
}
html.dark-mode .btn.primary:hover {
  background-color: #326d88 !important;
}

/* CTA Button */
html.dark-mode .cta .button,
html.dark-mode .cta-btn {
  background-color: #3f87a6 !important;
  color: white !important;
}
html.dark-mode .cta .button:hover,
html.dark-mode .cta-btn:hover {
  background-color: #326d88 !important;
}

/* Read More Buttons in Blog Cards */
html.dark-mode .read-more {
  color: #3f87a6 !important;
}
html.dark-mode .read-more:hover {
  color: #b2d4ff !important;
  text-decoration: underline !important;
}

/* Blog Section */
html.dark-mode .blog-section {
  background-color: #1e1e1e !important;
  color: #f5f5f5 !important;
}

html.dark-mode .blog-card {
  background-color: #2b2b2b !important;
  border-left: 5px solid #3f87a6 !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
}

html.dark-mode .blog-card h3 {
  color: #3f87a6 !important;
}

html.dark-mode .blog-card p {
  color: #ccc !important;
}

/* Footer text and links in dark mode */
html.dark-mode .site-footer {
  background-color: #1e1e1e !important;
  color: #f5f5f5 !important;
}

html.dark-mode .site-footer a {
  color: #3f87a6 !important;
  text-decoration: none;
}

html.dark-mode .site-footer a:hover {
  color: #b2d4ff !important;
  text-decoration: underline;
}

/* Study Page - Subject Grid and Cards */
html.dark-mode .subject-grid {
  background-color: transparent; /* or darken slightly if needed */
}

html.dark-mode .subject-card {
  background-color: #2b2b2b !important;
  color: #f5f5f5 !important;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
}

html.dark-mode .subject-card h2 {
  color: #3f87a6;
}

html.dark-mode .subject-card p {
  color: #ccc;
}

html.dark-mode .subject-card .button {
  background-color: #3f87a6;
  color: white;
}

html.dark-mode .subject-card .button.disabled {
  background-color: #555;
  color: #ccc;
  cursor: not-allowed;
}
/* Contact Page - Dark Mode Styling */
html.dark-mode .contact-wrapper {
  background-color: #121212 !important;
  color: #f5f5f5 !important;
  padding: 2rem;
}

html.dark-mode .contact-form-section input[type="text"],
html.dark-mode .contact-form-section input[type="email"],
html.dark-mode .contact-form-section textarea {
  background-color: #1e1e1e;
  color: #f5f5f5;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

html.dark-mode .contact-form-section input:focus,
html.dark-mode .contact-form-section textarea:focus {
  border-color: #3f87a6;
  outline: none;
}

html.dark-mode .contact-form-section button[type="submit"] {
  background-color: #3f87a6;
  color: white;
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

html.dark-mode .contact-form-section button[type="submit"]:hover {
  background-color: #326d88;
}

html.dark-mode .contact-form-section p {
  color: #ccc !important;
}

/* Contact Form Container */
html.dark-mode .contact-form-section {
  background-color: #1e1e1e !important;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Math Study Page - Dark Mode */

html.dark-mode .category-grid {
  background-color: transparent;
}

html.dark-mode .flip-card {
  background-color: transparent;
}

html.dark-mode .flip-card-front,
html.dark-mode .flip-card-back {
  background-color: #2b2b2b !important;
  color: #f5f5f5 !important;
  border: 1px solid #444;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

html.dark-mode .flip-card-back h3 {
  color: #9ac7ff;
}

html.dark-mode .flip-card-back ul li {
  color: #ccc;
}

html.dark-mode .flip-card-back .button {
  background-color: #3f87a6;
  color: white;
}

html.dark-mode .flip-card-back .button:hover {
  background-color: #3f87a6;;
}

html.dark-mode .category-labels h2 {
  color: #3f87a6;
}

html.dark-mode .category-labels p {
  color: #ccc;
}

/* Optional: Support Section Cards */
html.dark-mode .support-card {
  background-color: #2b2b2b;
  color: #f5f5f5;
  border: 1px solid #444;
  transition: background-color 0.3s;
}

html.dark-mode .support-card:hover {
  background-color: #3a3a3a;
}

html.dark-mode .flip-card-back h3 {
  color: #3f87a6!important; 
}

/* Math Study Page Layout Background Fix */
html.dark-mode .page-wrapper,
html.dark-mode .container,
html.dark-mode .category-section {
  background-color: #121212 !important;
  color: #f5f5f5 !important;
}
html.dark-mode .main-heading {
  color: #3f87a6 !important; 
}
/* Math Subcategory Page - Dark Mode */

/* Header section */
html.dark-mode .math-hero {
  background-color: #1e1e1e !important;
  color: #f5f5f5 !important;
  padding: 2rem;
  text-align: center;
}

html.dark-mode .math-hero h1 {
  color: #9ac7ff !important;
}

html.dark-mode .math-hero .back-link {
  color: #9ac7ff !important;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 1rem;
}

html.dark-mode .math-hero .back-link:hover {
  color: #b2d4ff !important;
  text-decoration: underline;
}

/* Subcategory grid */
html.dark-mode .subcategory-grid {
  background-color: transparent;
}

html.dark-mode .subcategory-card {
  background-color: #2b2b2b;
  color: #f5f5f5;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 1.2rem;
  transition: background-color 0.3s;
  text-decoration: none;
}

html.dark-mode .subcategory-card:hover {
  background-color: #3a3a3a;
}

html.dark-mode .subcategory-card h3 {
  color: #3f87a6;
}

html.dark-mode .subcategory-card p {
  color: #ccc;
}

/* Disabled cards */
html.dark-mode .subcategory-card.disabled {
  background-color: #222 !important;
  border: 1px dashed #555 !important;
  color: #777 !important;
  cursor: not-allowed;
}

/* Ads section (optional refinement) */
html.dark-mode .adsense-placeholder {
  background-color: #2b2b2b !important;
  border: 1px dashed #555 !important;
}

html.dark-mode .adsense-label {
  color: #aaa !important;
}

/* Dark Mode – Math Subcategory Header Adjustments */

html.dark-mode .math-hero h1 {
  color: #3f87a6 !important; /* brand color */
}

html.dark-mode .math-hero p {
  color: #ccc !important; /* same as subcategory card <p> */
}

html.dark-mode .math-hero .back-link {
  color: #3f87a6 !important;
  font-weight: bold;
  text-decoration: none;
}

html.dark-mode .math-hero .back-link:hover {
  color: #9ac7ff !important;
  text-decoration: underline;
}

/* Subcategory Quizzes Page - Dark Mode */

html.dark-mode .subcategory-wrapper {
  background-color: #121212 !important;
  color: #f5f5f5 !important;
  padding: 2rem;
}

html.dark-mode .subcategory-title {
  color: #3f87a6 !important;
  margin-bottom: 1.5rem;
}

/* Filter Form */
html.dark-mode .filter-form {
  background-color: #1e1e1e;
  padding: 1rem;
  border: 1px solid #444;
  border-radius: 8px;
  margin-bottom: 2rem;
}

html.dark-mode .filter-form label {
  color: #f5f5f5;
  margin-right: 0.5rem;
}

html.dark-mode .filter-form select {
  background-color: #2b2b2b;
  color: #f5f5f5;
  border: 1px solid #666;
  border-radius: 6px;
  padding: 0.4rem;
  margin-right: 1rem;
}

html.dark-mode .filter-form button {
  background-color: #3f87a6;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
}

html.dark-mode .filter-form button:hover {
  background-color: #326d88;
}

/* Quiz Cards */
html.dark-mode .quiz-grid {
  background: transparent;
}

html.dark-mode .quiz-card {
  background-color: #2b2b2b;
  color: #f5f5f5;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

html.dark-mode .quiz-card h2 {
  color: #3f87a6;
  margin-bottom: 0.8rem;
}

html.dark-mode .quiz-card p {
  color: #ccc;
}

html.dark-mode .start-button {
  display: inline-block;
  margin-top: 1rem;
  background-color: #3f87a6;
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
}

html.dark-mode .start-button:hover {
  background-color: #326d88;
}

/* No quizzes message */
html.dark-mode .no-quizzes {
  color: #ccc;
  font-style: italic;
  margin-top: 2rem;
}

/* Ad placeholders */
html.dark-mode .adsense-placeholder {
  background-color: #2b2b2b !important;
  border: 1px dashed #555 !important;
}

html.dark-mode .adsense-label {
  color: #aaa !important;
}

/* Practice Room - Dark Mode */

html.dark-mode .step-quiz-hero {
  background-color: #1e1e1e;
  color: #f5f5f5;
  padding: 1.5rem;
}

html.dark-mode .quiz-title {
  color: #9ac7ff;
}

html.dark-mode .progress-bar-wrapper {
  background: #1a1a1a;
  padding: 1rem;
  border-radius: 6px;
  color: #ccc;
}

html.dark-mode .progress-label {
  color: #ccc;
}

html.dark-mode .progress-bar .step {
  background-color: #444;
}

html.dark-mode .progress-bar .step.correct {
  background-color: #3f87a6;
}

html.dark-mode .progress-bar .step.incorrect {
  background-color: #c0392b;
}

/* Question and Answer Section */
html.dark-mode .question-block {
  background-color: #2b2b2b;
  color: #f5f5f5;
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid #444;
  margin-bottom: 1.5rem;
}

html.dark-mode .question-instruction {
  color: #ccc;
}

html.dark-mode .text-input {
  background-color: #1e1e1e;
  color: #f5f5f5;
  border: 1px solid #555;
}

html.dark-mode .math-symbols-toolbar button {
  background-color: #3f87a6;
  color: white;
  border: none;
}

html.dark-mode .math-symbols-toolbar button:hover {
  background-color: #326d88;
}

/* Option Labels */
html.dark-mode .option-label {
  background-color: #1e1e1e;
  color: #f5f5f5;
  border: 1px solid #555;
  padding: 0.6rem;
  border-radius: 6px;
  margin-bottom: 0.8rem;
}

/* Feedback Section */
html.dark-mode .feedback-block.correct {
  color: #3f87a6;
}

html.dark-mode .feedback-block.partial {
  color: #f1c40f;
}

html.dark-mode .feedback-block.incorrect {
  color: #e74c3c;
}

/* Explanation */
html.dark-mode .explanation-box {
  background-color: #2c2c2c;
  color: #f5f5f5;
  border: 1px solid #555;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1.5rem;
}

html.dark-mode .explanation-box h4 {
  color: #9ac7ff;
}

/* Hint box */
html.dark-mode .hint-box {
  background-color: #1e1e1e;
  color: #f5f5f5;
  border: 1px dashed #777;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

/* Buttons */
html.dark-mode .button,
html.dark-mode .button.primary,
html.dark-mode .finish-button {
  background-color: #3f87a6;
  color: white;
}

html.dark-mode .button:hover,
html.dark-mode .primary:hover,
html.dark-mode .finish-button:hover {
  background-color: #326d88;
}

/* Final Feedback */
html.dark-mode .final-feedback {
  background-color: #1e1e1e;
  color: #f5f5f5;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 2rem;
  margin-top: 2rem;
}

/* Ad placeholders */
html.dark-mode .adsense-placeholder {
  background-color: #2b2b2b !important;
  border: 1px dashed #555 !important;
}

html.dark-mode .adsense-label {
  color: #aaa !important;
}

html.dark-mode .form-content,
html.dark-mode main,
html.dark-mode .subcategory-wrapper {
  background-color: #121212 !important;
  color: #f5f5f5 !important;
}

/* Extra force for question background */
html.dark-mode .question-text,
html.dark-mode .question-text span {
  background-color: #2b2b2b !important;
  color: #f5f5f5 !important;
  display: block;
  padding: 1rem;
  border-radius: 8px;
}

html.dark-mode .quiz-title {
  color: #3f87a6 !important;
}

html.dark-mode .quiz-title:hover {
  color: #9ac7ff !important;
}

/* ===== DARK MODE: GCSE Tutorials ===== */

html.dark-mode .gcse-tutorials {
  background: #101820;
  color: #e0f4ff;
}

html.dark-mode .tutorial-card {
  background: #1a2a33;
  border-color: #3f87a6;
  color: #e0f4ff;
}

html.dark-mode .tutorial-card {
  background: #1a2a33;
  border-color: #3f87a6;
  color: #d0e6f0;
  font-weight: normal;
}

html.dark-mode .tutorial-card h4 {
  color: #b0d8ec !important;
  font-size: 1rem;
  font-weight: 500;
  margin-top: 0.8rem;
  margin-bottom: 0.4rem;
}

html.dark-mode .tutorial-card p {
  color: #a0b8c8 !important;
  font-size: 0.95rem;
  font-weight: 400;
}


/* ===== DARK MODE: GCSE Exam Papers ===== */
html.dark-mode .gcse-exam-papers {
  background: #101820;
  color: #e0f4ff;
}

html.dark-mode .exam-paper-card {
  background-color: #1a2a33;
  border-color: #d0e4f5;
}


html.dark-mode .exam-paper-card:hover {
  background: #2a3c4a;
}

html.dark-mode .exam-paper-card h4 {
  color: #d0e4f5; /* slightly softer yellow */
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.8px;
}

html.dark-mode .exam-paper-card p {
  color: #ccddee;
  font-weight: 400;
  font-size: 0.95rem;
}



/* ===== DARK MODE: GCSE Worksheets ===== */
html.dark-mode .gcse-worksheets {
  background: #101820;
  color: #e0f4ff;
}

html.dark-mode .worksheet-card {
  background-color: #1c2a32 !important;
  border: 1px solid #555 !important;
  color: #9ac7ff !important; /* blue titles */
}

html.dark-mode .worksheet-card h4 {
  color: #9ac7ff !important; /* worksheet title */
  font-family: 'Luckiest Guy', cursive;
  font-size: 1.05rem;
  letter-spacing: 2.5px;
}

html.dark-mode .worksheet-card p {
  color: #bbb !important; /* subtitle (e.g. topic) */
}


/* ===== DARK MODE: Tutor CTA ===== */
html.dark-mode .tutor-cta {
  background-color: #1c2a32 !important;
  color: #e0f4ff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html.dark-mode .tutor-cta .main-heading {
  color: #9ac7ff !important;
  font-family: 'Luckiest Guy', cursive;
  letter-spacing: 0.5px;
}

html.dark-mode .tutor-cta .subtext {
  color: #ccddee !important;
  font-size: 1.05rem;
}

html.dark-mode .tutor-benefits {
  color: #bbb !important;
}

html.dark-mode .tutor-benefits li::before {
  color: #10b981 !important; /* checkmark green */
}

html.dark-mode .tutor-cta .button {
  background-color: #3f87a6 !important;
  color: white !important;
}

html.dark-mode .tutor-cta .button:hover {
  background-color: #326d88 !important;
}


html.dark-mode .gcse-bg {
  background-color: #181818 !important;  /* Or any dark tone you prefer */
  color: #f5f5f5;
}


html.dark-mode .subtext {
  color: #b0c7d1 !important;
}

html.dark-mode .alevel-section-title {
  font-size: 2.2rem; /* dark background */          /* soft blue text */
  text-align: center;
   background-color: #1e1e1e !important; 
  padding: 2rem !important; /* optional – reduce space */
  color: #9ac7ff !important;

}

html.dark-mode .section-title {
  background-color: #1e1e1e !important; /* match other dark backgrounds */
  color: #9ac7ff !important;            /* readable soft blue */
  padding: 5rem;
}

html.dark-mode .alevel {
  background-color: #121212 !important;
}

/* ===== DARK MODE: A-Level Exam Papers ===== */
html.dark-mode .alevel-exam-papers {
  background-color: #101820 !important;
  color: #e0f4ff !important;
}

html.dark-mode .alevel-exam-papers .exam-paper-card {
  background-color: #1a2a33 !important;
  border: 2px solid #d0e4f5 !important;
  color: #9ac7ff !important;
}

html.dark-mode .alevel-exam-papers .exam-paper-card:hover {
  background: #2a3c4a !important;
}

html.dark-mode .alevel-exam-papers .exam-paper-card h4 {
  color: #d0e4f5 !important;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.8px;
}

html.dark-mode .alevel-exam-papers .exam-paper-card p {
  color: #ccddee !important;
  font-weight: 400;
  font-size: 0.95rem;
}

html.dark-mode .alevel-exam-papers .exam-footer {
  color: #9ac7ff !important;
}

html.dark-mode .alevel-exam-papers .see-all-btn {
  background-color: #3f87a6 !important;
  color: white !important;
  transition: background-color 0.3s;
}

html.dark-mode .alevel-exam-papers .see-all-btn:hover {
  background-color: #326d88 !important;
}

html.dark-mode .alevel-worksheets {
  background-color: #101820 !important;
  color: #e0f4ff !important;
}

html.dark-mode .alevel-worksheets .worksheet-card {
  background-color: #1c2a32 !important;
  border: 1px solid #555 !important;
  color: #9ac7ff !important;
}

html.dark-mode .alevel-worksheets .worksheet-card h4 {
  color: #9ac7ff !important;
  font-family: 'Luckiest Guy', cursive;
  font-size: 1.05rem;
  letter-spacing: 2.5px;
}

html.dark-mode .alevel-worksheets .worksheet-card p {
  color: #bbb !important;
}

html.dark-mode .alevel-worksheets .worksheet-footer {
  color: #9ac7ff;
}

html.dark-mode .alevel-worksheets .see-all-btn {
  background-color: #3f87a6 !important;
  color: white !important;
  transition: background-color 0.3s;
}

html.dark-mode .alevel-worksheets .see-all-btn:hover {
  background-color: #326d88 !important;
}

html.dark-mode .alevel-tutoring {
  background-color: #1c1c14 !important;
  color: #f5f5f5 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html.dark-mode .alevel-tutoring .main-heading {
  color: #ffd166 !important; /* soft golden yellow */
  font-family: 'Luckiest Guy', cursive;
  letter-spacing: 0.5px;
}

html.dark-mode .alevel-tutoring .subtext {
  color: #ccc !important;
  font-size: 1.05rem;
}

html.dark-mode .alevel-tutoring .tutor-benefits {
  color: #bbb !important;
  list-style: none;
}

html.dark-mode .alevel-tutoring .tutor-benefits li::before {
  color: #ffd166 !important; /* checkmark yellow */
}

html.dark-mode .alevel-tutoring .see-all-btn {
  background-color: #ffd166 !important;
  color: #121212 !important;
}

html.dark-mode .alevel-tutoring .see-all-btn:hover {
  background-color: #e0b400 !important;
}

html.dark-mode .functional {
  background-color: #1a1a10 !important;
}

html.dark-mode .functional-exam-papers {
  background-color: #181810;
}

html.dark-mode .functional-exam-papers .exam-paper-card {
  background-color: #2b2b1f;
  border: 2px solid #e0cd00;
  color: #f5f5f5;
}

html.dark-mode .functional-worksheets .worksheet-card {
  background-color: #2c2c1a !important;
  border: 1px solid #777 !important;
  color: #f5f5f5 !important;
}

html.dark-mode .functional .subtext,
html.dark-mode .functional .main-heading {
  color: #f5f5f5 !important;
}

html.dark-mode .functional-tutoring {
  background-color: #1f1f14;
  color: #f5f5f5;
}

html.dark-mode .functional-section-title {
  background-color: #1a1a1a;
  color: #ffe44a;
}

html.dark-mode .functional-worksheets {
  background: #1a1a1a;
  padding: 3rem 2rem;
}

/* Force dark background and text */
html.dark-mode .contact-wrapper {
  background-color: #121212 !important;
  color: #f5f5f5 !important;
  padding: 3rem 1rem !important;
}

/* Form container styling */
html.dark-mode .contact-form-section {
  background-color: #1e1e1e !important;
  border: 1px solid #444 !important;
  border-radius: 10px !important;
  padding: 2rem !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Form input fields */
html.dark-mode .contact-form-section input,
html.dark-mode .contact-form-section textarea {
  background-color: #2b2b2b !important;
  color: #f5f5f5 !important;
  border: 1px solid #666 !important;
}

/* Labels and paragraphs */
html.dark-mode .contact-form-section label,
html.dark-mode .contact-form-section p {
  color: #ccc !important;
}

/* Submit button */
html.dark-mode .contact-form-section button[type="submit"] {
  background-color: #3f87a6 !important;
  color: white !important;
  border: none !important;
  padding: 0.7rem 1.5rem !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: background-color 0.3s;
}

html.dark-mode .contact-form-section button[type="submit"]:hover {
  background-color: #326d88 !important;
}

html.dark-mode .contact-wrapper h1 {
  color: #9ac7ff !important;
  text-align: center;
}

/* === DARK MODE PATCHES FOR HOME PAGE === */

html.dark-mode .section-light,
html.dark-mode .section-soft-blue {
  background-color: #111827 !important;
  color: #e5e7eb !important;
}

html.dark-mode .exam-card,
html.dark-mode .tutorial-card,
html.dark-mode .blog-card,
html.dark-mode .benefit-card,
html.dark-mode .quiz-card,
html.dark-mode .review-card {
  background-color: #1f2937 !important;
  color: #f3f4f6 !important;
  border: 1px solid #374151;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

html.dark-mode .exam-card:hover,
html.dark-mode .tutorial-card:hover,
html.dark-mode .quiz-card:hover {
  background-color: #2d3748 !important;
}

html.dark-mode .adsense-placeholder {
  background-color: #1a1a1a !important;
  border: 1px dashed #444 !important;
  color: #aaa !important;
}

html.dark-mode .fake-3d-title {
  color: #93c5fd !important;
}

html.dark-mode .tracking-text,
html.dark-mode .tutoring-text,
html.dark-mode .cta h2 {
  color: #d1d5db !important;
}

html.dark-mode .cta-btn {
  background-color: #2563eb;
  color: #fff;
}

html.dark-mode .cta-btn:hover {
  background-color: #1d4ed8;
}

html.dark-mode .text-gray-300 {
  color: #d1d5db !important;
}
html.dark-mode .text-gray-400 {
  color: #9ca3af !important;
}

html.dark-mode .exam-card {
  background: #2c2c2c;
  color: #f0f0f0; /* fallback in case <p> and <h3> aren’t styled individually */
  border-color: #444;
}

html.dark-mode .exam-card h3 {
  color: #76c6ff; /* light blue for contrast */
  text-decoration: none;
}

html.dark-mode .exam-card p {
  color: #ccc;
  text-decoration: none;
}

html.dark-mode .benefits-tutor,
html.dark-mode .how-it-works,
html.dark-mode .about-tutor,
html.dark-mode .testimonials,
html.dark-mode .pricing-tutor {
  background-color: #1c1c1c;
  color: #f0f0f0;
}

html.dark-mode .benefit-card,
html.dark-mode .step-card,
html.dark-mode .testimonials blockquote {
  background: #2a2a2a;
  border-color: #555;
  color: #eee;
}

html.dark-mode .about-tutor ul li,
html.dark-mode .pricing-tutor p {
  color: #ccc;
}

html.dark-mode .cta-final {
  background-color: #27495f;
}

html.dark-mode .hero-tutor{
  background-color: #1a1a1a !important;
}


html.dark-mode .hero-tutor h1,
html.dark-mode .hero-tutor .subtitle,
html.dark-mode .hero-tutor a {
  color: #f5f5f5 !important;
}

html.dark-mode .hero-tutor .cta-button {
  background-color: #2563eb !important; /* Tailwind-style blue */
  color: #ffffff !important;
  border: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}