/* Custom styles that override all others */

:root {
  --text-color: #1a1a1a;
  --heading-color: #000000;
  --small-text-color: #333333;
}

/* Force text colors everywhere EXCEPT hero section, btn-plan, buttons, and pagination */

*:not(#hero *):not(.btn-plan):not(button):not(.button):not(input[type="button"]):not(input[type="submit"]):not([style*="color: #fff"]):not([style*="color: #ffffff"]) {
  color: var(--text-color) !important;
}

/* Headings */

h1:not(#hero h1), 
h2:not(#hero h2), 
h3:not(#hero h3), 
h4:not(#hero h4), 
h5:not(#hero h5), 
h6:not(#hero h6) {
  color: var(--heading-color) !important;
}

/* Small text and labels */

small:not(#hero small), 
label:not(#hero label) {
  color: var(--small-text-color) !important;
}

/* Links */

a:not(#hero a) {
  color: var(--text-color) !important;
}

/* Navigation */

.nav-link:not(#hero .nav-link),
.navbar-nav .nav-link:not(#hero .nav-link),
.navbar a:not(#hero .navbar a),
.navbar p:not(#hero .navbar p),
.navbar span:not(#hero .navbar span) {
  color: var(--text-color) !important;
}

/* Header and Footer */

header *:not(#hero header *),
footer *:not(#hero footer *) {
  color: var(--text-color) !important;
}

/* Hero section specific styles */

#hero h1,
#hero p,
#hero .lead {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Pricing headers specific styles */

.pricing-header {
  background-color: #ffffff !important;
  transition: background-color 0.3s ease !important;
}

.pricing-header:hover {
  background-color: #1a1a1a !important;
}

.pricing-header .pricing-title {
  font-size: 2.5rem !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  transition: color 0.3s ease !important;
}

.pricing-header .pricing-subtitle {
  font-size: 1.1rem !important;
  color: #6c757d !important;
  transition: color 0.3s ease !important;
}

.pricing-header:hover .pricing-title,
.pricing-header:hover .pricing-subtitle {
  color: #ffffff !important;
}