/* ============================================
   Civil Sansad — Modern Theme Layer
   Clean minimal design with dark/light support
   ============================================ */

/* ---- Light Theme (Default) ---- */
:root {
  --primary: #0075cd;
  --primary-hover: #005fa3;
  --primary-light: rgba(0,117,205,0.1);
  --secondary: #f65401;
  --secondary-light: rgba(246,84,1,0.1);
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #0ea5e9;

  --bg: #f8fafc;
  --bg-alt: #ffffff;
  --card-bg: #ffffff;
  --text: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --heading-color: #0f172a;
  --text-primary: #0f172a;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --transition: 0.2s ease;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nav-bg: #ffffff;
  --nav-text: #334155;
  --nav-hover: var(--primary);
  --footer-bg: #0f172a;
  --footer-text: #ffffff;
  --footer-heading: #f1f5f9;
  --footer-border: #1e293b;
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-focus: var(--primary);
  --overlay: rgba(0,0,0,0.5);
  --hero-gradient: linear-gradient(135deg, rgba(0,117,205,0.9), rgba(15,23,42,0.85));
  --page-banner-bg: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
}

/* ---- Dark Theme ---- */
[data-theme="dark"] {
  --bg: #0f172a;
  --bg-alt: #1e293b;
  --card-bg: #1e293b;
  --text: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --heading-color: #f1f5f9;
  --text-primary: #f1f5f9;
  --border: #334155;
  --border-light: #1e293b;
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.35);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.4);
  --nav-bg: #1e293b;
  --nav-text: #cbd5e1;
  --footer-bg: #020617;
  --footer-text: #ffffff;
  --footer-heading: #e2e8f0;
  --footer-border: #1e293b;
  --input-bg: #0f172a;
  --input-border: #334155;
  --overlay: rgba(0,0,0,0.7);
  --hero-gradient: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(0,0,0,0.9));
  --page-banner-bg: linear-gradient(135deg, #020617 0%, #0f172a 100%);
  --primary-light: rgba(0,117,205,0.2);
}

/* ---- Global Resets ---- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  transition: background var(--transition), color var(--transition);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--heading-color);
  font-weight: 700;
  line-height: 1.3;
}

a { color: var(--primary); transition: color var(--transition); }
a:hover { color: var(--primary-hover); }

img { max-width: 100%; height: auto; }

/* ---- Theme Toggle Button ---- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  transition: all var(--transition);
  font-size: 16px;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.theme-toggle .icon-sun,
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---- Modern Nav ---- */
.modern-nav {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  padding: 0 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background var(--transition), box-shadow var(--transition);
}

.modern-nav.scrolled {
  box-shadow: var(--shadow-md);
}

/* ---- Top Info Bar ---- */
.nav-topbar {
  background: linear-gradient(90deg, var(--primary), #0090e0);
  color: #ffffff;
  font-size: 13px;
}

.nav-topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 7px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nav-topbar-contact {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-topbar-contact a {
  color: #ffffff;
  text-decoration: none;
  transition: color var(--transition);
}

.nav-topbar-contact a:hover {
  color: #ffffff;
}

.nav-topbar-contact a span {
  margin-right: 5px;
}

.nav-topbar-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

/* Scrolling news ticker for Admission Open */
.nav-ticker {
  overflow: hidden;
  white-space: nowrap;
  max-width: 260px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.nav-ticker-track {
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.3px;
  animation: navTicker 14s linear infinite;
}

@keyframes navTicker {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.nav-topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--secondary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: all var(--transition);
}

.nav-topbar-btn:hover {
  background: #d94700;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  color: #ffffff;
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 104px;
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo img {
  height: 78px;
  width: auto;
}

.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}

.nav-menu > li > a {
  display: block;
  padding: 8px 16px;
  color: var(--nav-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  white-space: nowrap;
}

.nav-menu > li > a:hover,
.nav-menu > li.active > a {
  color: var(--primary);
  background: var(--primary-light);
}

.nav-menu > li { position: relative; }

/* Dropdown */
.nav-menu .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s ease;
  z-index: 1001;
}

.nav-menu > li:hover > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu .dropdown li a {
  display: block;
  padding: 8px 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.nav-menu .dropdown li a:hover {
  background: var(--primary-light);
  color: var(--primary);
}

/* Nested dropdown */
.nav-menu .dropdown .dropdown {
  top: 0;
  left: 100%;
}

.nav-menu .dropdown > li { position: relative; }
.nav-menu .dropdown > li > a::after {
  content: '\f105';
  font-family: FontAwesome;
  float: right;
  margin-left: 8px;
  font-size: 11px;
  opacity: 0.4;
}
.nav-menu .dropdown .dropdown > li > a::after { content: '\f105'; }

/* Nav Right (auth + toggle) */
.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nav-auth-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition);
  border: 1px solid var(--border);
  color: var(--nav-text);
  background: transparent;
}

.nav-auth-btn:hover { border-color: var(--primary); color: var(--primary); }

.nav-auth-btn.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.nav-auth-btn.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* Mobile Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  cursor: pointer;
}

.nav-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s;
}

.nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav Panel */
.nav-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s;
}

.nav-mobile-overlay.active { display: block; opacity: 1; }

.nav-mobile {
  display: none;
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background: var(--card-bg);
  z-index: 1000;
  overflow-y: auto;
  transition: right 0.3s ease;
  box-shadow: var(--shadow-lg);
}

.nav-mobile.active { right: 0; }

.nav-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.nav-mobile-header img { height: 32px; }

.nav-mobile-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--border-light);
  border-radius: 50%;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-mobile-list {
  list-style: none;
  padding: 12px;
  margin: 0;
}

.nav-mobile-list li a {
  display: block;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.nav-mobile-list li a:hover,
.nav-mobile-list li.active a {
  background: var(--primary-light);
  color: var(--primary);
}

.nav-mobile-list .sub-list {
  list-style: none;
  padding: 0 0 0 16px;
  margin: 0;
  display: none;
}

.nav-mobile-list .sub-list.open { display: block; }

/* Rotate the dropdown arrow when a sub-menu is expanded */
.nav-mobile-list li a i.fa-chevron-down {
  transition: transform 0.25s ease;
}

.nav-mobile-list > li.open > a i.fa-chevron-down {
  transform: rotate(180deg);
}

.nav-mobile-list .sub-list li a {
  font-size: 13px;
  padding: 8px 16px;
  color: var(--text-secondary);
}

.nav-mobile-auth {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-mobile-auth .btn {
  display: block;
  text-align: center;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition);
}

/* ---- Page Banner ---- */
.page-banner {
  background: var(--page-banner-bg);
  padding: 40px 0 26px;
  text-align: center;
}

.page-banner h1 {
  color: #fff;
  font-size: 32px;
  margin-bottom: 8px;
}

.page-banner .breadcrumb-custom {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
}

.page-banner .breadcrumb-custom a {
  color: #ffffff;
  text-decoration: none;
}

.page-banner .breadcrumb-custom a:hover { color: #fff; }
.page-banner .breadcrumb-custom .sep { color: #ffffff; }
.page-banner .breadcrumb-custom .current { color: #fff; font-weight: 600; }

/* ---- Inner Header (subpage title banner) — compact globally.
   Overrides the pt-70/pb-20 style utility classes and the
   .divider base padding used on all subpages ---- */
.inner-header.divider .container,
.inner-header .container {
  padding-top: 52px !important;
  padding-bottom: 42px !important;
}

/* Give the banner breathing room so its background
   image stays visible despite the compact layout */
.inner-header {
  min-height: 150px;
}

/* Cap the dark overlay so the banner image stays visible
   (pages using overlay-dark-8 were almost fully black) */
.inner-header.overlay-dark-7::before,
.inner-header.overlay-dark-8::before,
.inner-header.overlay-dark-9::before {
  background-color: rgba(17, 17, 17, 0.45);
}

/* Smaller title + tighter gap between title and breadcrumbs */
.inner-header .title {
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 6px;
}

.inner-header .breadcrumb {
  margin-top: 2px !important;
  margin-bottom: 0 !important;
}

@media (max-width: 575px) {
  .inner-header.divider .container,
  .inner-header .container {
    padding-top: 36px !important;
    padding-bottom: 30px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .inner-header { min-height: 120px; }
}

/* ---- Section Defaults ---- */
.modern-section {
  padding: 70px 0;
}

.modern-section:nth-child(even) {
  background: var(--bg-alt);
}

.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-header h2 {
  font-size: 28px;
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
}

.section-header h2::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  margin: 12px auto 0;
}

.section-header p {
  color: var(--text-secondary);
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto;
}

/* ---- Cards ---- */
.modern-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
}

.modern-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.modern-card-body {
  padding: 24px;
}

.modern-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* ---- Course Cards ---- */
.course-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
}

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.course-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center top;
}

.course-card-body {
  padding: 14px 16px;
}

.course-card-body h4 {
  font-size: 17px;
  margin: 0;
}

.course-card-body p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 16px;
}

/* ---- Buttons ---- */
.btn-modern {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-modern-primary {
  background: var(--primary);
  color: #fff;
}

.btn-modern-primary:hover {
  background: var(--primary-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,117,205,0.3);
}

.btn-modern-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.btn-modern-outline:hover {
  background: var(--primary);
  color: #fff;
}

.btn-modern-secondary {
  background: var(--secondary);
  color: #fff;
}

.btn-modern-secondary:hover {
  background: #e04d01;
  color: #fff;
}

/* ---- Forms ---- */
.form-modern .form-group {
  margin-bottom: 20px;
}

.form-modern label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.form-modern label i {
  color: var(--primary);
  margin-right: 5px;
}

.form-modern .form-control {
  height: 46px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  padding: 10px 14px;
  font-size: 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}

.form-modern .form-control:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px var(--primary-light);
  outline: none;
}

.form-modern textarea.form-control {
  height: auto;
  min-height: 100px;
  resize: vertical;
}

/* ---- Footer ---- */
.modern-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 60px 0 0;
}

.modern-footer h5 {
  color: var(--footer-heading);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 12px;
}

.modern-footer h5::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

.modern-footer a {
  color: var(--footer-text);
  text-decoration: none;
  transition: color var(--transition);
}

.modern-footer a:hover {
  color: var(--primary);
}

.modern-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.modern-footer .footer-links li {
  margin-bottom: 10px;
}

.modern-footer .footer-links li a {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modern-footer .footer-links li a::before {
  content: '\f105';
  font-family: FontAwesome;
  font-size: 10px;
  opacity: 0.5;
}

.modern-footer-bottom {
  border-top: 1px solid var(--footer-border);
  padding: 20px 0;
  margin-top: 40px;
}

.modern-footer-bottom p {
  font-size: 13px;
  margin: 0;
  color: var(--footer-text);
}

.modern-footer-social {
  display: flex;
  gap: 10px;
}

.modern-footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--footer-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-text);
  font-size: 14px;
  transition: all var(--transition);
}

.modern-footer-social a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ---- Hero Banner (index) ---- */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-section .tp-banner-container {
  border-radius: 0;
}

/* ---- Fun Facts ---- */
.funfact-section {
  background: var(--page-banner-bg);
  position: relative;
}

.funfact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
}

.funfact-counter {
  text-align: center;
  padding: 30px 20px;
}

.funfact-counter .counter-icon {
  font-size: 36px;
  color: var(--primary);
  margin-bottom: 12px;
}

.funfact-counter .counter-number {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 6px;
}

.funfact-counter .counter-label {
  font-size: 14px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---- CTA Section ---- */
.cta-section {
  background: var(--primary);
  color: #fff;
  padding: 60px 0;
  text-align: center;
}

.cta-section h2 {
  color: #fff;
  font-size: 30px;
  margin-bottom: 16px;
}

.cta-section p {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 24px;
}

/* ---- Blog/News Cards ---- */
.post-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.post-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.post-card-body {
  padding: 20px;
}

.post-card-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.post-card-meta i { color: var(--primary); margin-right: 4px; }

.post-card-body h4 {
  font-size: 17px;
  margin-bottom: 8px;
}

.post-card-body h4 a {
  color: var(--heading-color);
  text-decoration: none;
}

.post-card-body h4 a:hover {
  color: var(--primary);
}

.post-card-body p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

/* ---- Teacher Cards ---- */
.team-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  transition: all 0.3s ease;
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.team-card-avatar {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center top;
}

.team-card-info {
  padding: 20px;
}

.team-card-info h4 {
  font-size: 17px;
  margin-bottom: 4px;
}

.team-card-info .designation {
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
}

/* ---- Contact Info ---- */
.contact-info-card {
  text-align: center;
  padding: 30px 20px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
  height: 100%;
}

.contact-info-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.contact-info-card .icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 22px;
  color: var(--primary);
}

.contact-info-card h4 {
  font-size: 16px;
  margin-bottom: 8px;
}

.contact-info-card p {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
}

/* ---- FAQ Accordion ---- */
.faq-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  transition: all var(--transition);
}

.faq-question:hover { color: var(--primary); }

.faq-question i {
  transition: transform 0.3s;
  font-size: 14px;
  color: var(--primary);
}

.faq-item.active .faq-question i { transform: rotate(180deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-answer-inner {
  padding: 0 20px 16px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.7;
}

/* ---- Auth Pages ---- */
.auth-wrapper {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 15px;
  background: var(--bg);
}

.auth-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 450px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}

.auth-card h2 {
  font-size: 24px;
  margin-bottom: 6px;
}

.auth-card .subtitle {
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-size: 14px;
}

.auth-card .links {
  text-align: center;
  margin-top: 20px;
}

.auth-card .links a {
  font-weight: 600;
}

/* ---- Alert ---- */
.alert {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 20px;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ---- Selection ---- */
::selection { background: var(--primary); color: #fff; }

/* ============================================
   RESPONSIVE — Tablet
   ============================================ */
@media (max-width: 991px) {
  .nav-menu { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile { display: block; }
  .nav-right .nav-auth-btn { display: none; }

  /* Top bar: keep contact + CTA but tighten spacing */
  .nav-topbar-inner { padding: 6px 16px; gap: 8px; }
  .nav-topbar-contact { gap: 14px; font-size: 12px; }

  .page-banner { padding: 34px 0 22px; }
  .page-banner h1 { font-size: 26px; }
  .modern-section { padding: 50px 0; }
  .section-header h2 { font-size: 24px; }
}

/* ============================================
   RESPONSIVE — Mobile
   ============================================ */
@media (max-width: 575px) {
  .nav-container { padding: 0 16px; height: 72px; }
  .nav-logo img { height: 52px; }

  /* Top bar: keep everything on one line, hide email to fit */
  .nav-topbar-inner { flex-wrap: nowrap; gap: 8px; padding: 7px 12px; }
  .nav-topbar-contact a:last-child { display: none; }
  .nav-ticker { max-width: 140px; }

  .page-banner { padding: 28px 0 18px; }
  .page-banner h1 { font-size: 22px; }
  .modern-section { padding: 40px 0; }
  .section-header { margin-bottom: 32px; }
  .section-header h2 { font-size: 22px; }
  .section-header p { font-size: 14px; }

  .funfact-counter .counter-number { font-size: 28px; }
  .funfact-counter .counter-label { font-size: 12px; }

  .cta-section { padding: 40px 0; }
  .cta-section h2 { font-size: 24px; }

  .modern-footer { padding: 40px 0 0; }

  .auth-card { padding: 28px 20px; }
}

@media (max-width: 479px) {
  .page-banner h1 { font-size: 20px; }
  .section-header h2 { font-size: 20px; }

  .nav-mobile { width: 260px; }
}

/* ============================================
   UTILITY OVERRIDES
   ============================================ */
.text-theme-colored { color: var(--primary) !important; }
.bg-theme-colored { background-color: var(--primary) !important; }

/* Override ThemeMascot dark footer for dark mode */
[data-theme="dark"] .footer { background: #020617; }
[data-theme="dark"] .footer p,
[data-theme="dark"] .footer h5,
[data-theme="dark"] .footer a { color: var(--footer-text); }
[data-theme="dark"] .footer .widget-title { color: var(--footer-heading); }

/* Override ThemeMascot body classes */
[data-theme="dark"] body { background: #0f172a; color: #e2e8f0; }
[data-theme="dark"] .main-content { background: #0f172a; }

/* Fix ThemeMascot panel/widget dark mode */
[data-theme="dark"] .panel,
[data-theme="dark"] .widget { color: var(--text); }
[data-theme="dark"] .panel-default > .panel-heading { background: var(--card-bg); border-color: var(--border); color: var(--text); }

/* Marquee override */
.header-marquee {
  background: var(--primary);
  color: #fff;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 600;
}

.header-marquee a { color: #fff; text-decoration: underline; }

/* ============================================
   LEARNING SECTION (index.php)
   ============================================ */
.learning-section {
  background: var(--bg-alt);
  padding: 60px 0;
}

.learning-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.3s ease;
}

.learning-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.learning-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.learning-icon.icon-blue { background: rgba(0,117,205,0.1); color: var(--primary); }
.learning-icon.icon-green { background: rgba(16,185,129,0.1); color: var(--success); }
.learning-icon.icon-orange { background: rgba(246,84,1,0.1); color: var(--secondary); }
.learning-icon.icon-red { background: rgba(239,68,68,0.1); color: var(--danger); }

.learning-card-content h4 {
  font-size: 15px;
  margin-bottom: 2px;
}

.learning-card-content p {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 0;
}

/* ============================================
   NEWS/BLOG SECTION (index.php)
   ============================================ */
.blog-news-section {
  padding: 60px 0;
  background: var(--bg);
}

.news-card-modern {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.news-card-header {
  background: var(--primary);
  padding: 16px 20px;
  text-align: center;
}

.news-card-header h2 {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

.news-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none !important;
  transition: background var(--transition);
  border-bottom: 1px solid var(--border-light);
}

.news-item:hover { background: var(--primary-light); }

.news-item .check-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 10px;
}

.news-item .news-title {
  flex: 1;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.news-item .arrow-icon {
  color: var(--text-muted);
  font-size: 14px;
  margin-left: 10px;
}

.check-more {
  display: block;
  text-align: center;
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none !important;
  border-top: 1px solid var(--border);
  transition: background var(--transition);
}

.check-more:hover { background: var(--primary-light); }

/* ============================================
   THEMEMASCOT COMPATIBILITY LAYER
   Auto-modernizes all inner pages + dark mode
   ============================================ */

/* ---- Inner page header/banner ---- */
.inner-header {
  background: var(--page-banner-bg) !important;
  padding: 60px 0 40px !important;
}
.inner-header .title {
  color: #fff !important;
  font-family: var(--font-heading);
  font-weight: 700;
}
.inner-header .breadcrumb {
  background: transparent !important;
  border-radius: var(--radius-sm);
  display: inline-flex;
  padding: 6px 14px;
  margin-top: 10px;
}
.inner-header .breadcrumb a { color: #ffffff !important; }
.inner-header .breadcrumb a:hover { color: #fff !important; }
.inner-header .breadcrumb li,
.inner-header .breadcrumb .active { color: #fff !important; }

/* Remove parallax overlay darkness on banners */
.layer-overlay.overlay-dark-5::before,
.layer-overlay.overlay-dark-4::before { opacity: 0.55 !important; }

/* ---- Section titles ---- */
.section-title h2 {
  font-family: var(--font-heading);
  color: var(--heading-color);
}
[data-theme="dark"] .section-title h2,
[data-theme="dark"] .text-black-333,
[data-theme="dark"] .text-black,
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--heading-color); }
[data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] li { color: inherit; }

/* ---- Body text in dark mode ---- */
[data-theme="dark"] body,
[data-theme="dark"] .main-content { background: var(--bg); color: var(--text); }
[data-theme="dark"] .text-gray,
[data-theme="dark"] .text-gray-dark { color: var(--text-secondary) !important; }

/* ---- Cards / boxes / panels ---- */
[data-theme="dark"] .project,
[data-theme="dark"] .post,
[data-theme="dark"] .panel,
[data-theme="dark"] .panel-body,
[data-theme="dark"] .hover-effect .details,
[data-theme="dark"] .icon-box,
[data-theme="dark"] .contact-info,
[data-theme="dark"] .widget { color: var(--text); }
[data-theme="dark"] .panel-default { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .thumb img { filter: brightness(0.9); }

/* ---- Tables ---- */
[data-theme="dark"] .table { color: var(--text); }
[data-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] .table > tbody > tr > td { border-color: var(--border); color: var(--text); }
.table { border-radius: var(--radius-sm); overflow: hidden; }
.table > thead > tr > th {
  background: var(--primary-light);
  color: var(--primary);
  border-bottom: none;
}

/* ---- Forms (all pages incl. contact) ---- */
[data-theme="dark"] .form-control {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* ---- Buttons ---- */
.btn { border-radius: var(--radius-sm); transition: all var(--transition); }
.btn-theme-colored {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.btn-theme-colored:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-1px);
}

/* ---- Pagination ---- */
.pagination > li > a,
.pagination > li > span {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text);
  margin: 0 3px;
  border-radius: var(--radius-sm) !important;
}
.pagination > li > a:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.pagination > .active > a,
.pagination > .active > span {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* ---- Breadcrumbs inside pages ---- */
.breadcrumb { background: var(--card-bg); border-radius: var(--radius-sm); }

/* ---- Accordion / FAQ (Bootstrap collapse) ---- */
.panel-group .panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
[data-theme="dark"] .panel-group .panel { background: var(--card-bg); }
.panel-group .panel-heading { background: var(--bg-alt) !important; border-color: var(--border) !important; }
[data-theme="dark"] .panel-group .panel-title a { color: var(--text); }
.panel-group .panel-title a:hover { color: var(--primary); }

/* ============================================
   BLOG / NEWS / FAQ PAGES — theme the old markup
   (fixes hardcoded light backgrounds that stayed
   white in dark mode)
   ============================================ */

/* Blog & news post cards: use themed card background */
.post .entry-content {
  background: var(--card-bg);
}

/* Post titles were forced white (invisible on light cards) */
.post .entry-title.text-white,
.post .entry-title.text-white a {
  color: var(--heading-color) !important;
  transition: color var(--transition);
}
.post .entry-title.text-white a:hover {
  color: var(--primary) !important;
}

/* Meta dates/author readable in dark mode */
[data-theme="dark"] .text-gray-darkgray,
[data-theme="dark"] .text-gray-silver {
  color: var(--text-secondary) !important;
}

/* FAQ accordion: header + content follow the theme */
.panel-group .panel-title a {
  background: var(--bg-alt);
  color: var(--heading-color);
}
.panel-group .panel-content {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .panel-group .panel-title a {
  background: var(--card-bg);
}

/* ============================================
   TEAM / CONTACT PAGES — theme the old markup
   ============================================ */

/* Light utility backgrounds must follow the theme */
.bg-deep,
.bg-light,
.bg-lighter,
.bg-lightest,
.bg-silver-light {
  background-color: var(--bg-alt) !important;
}

/* Dark text classes must flip in dark mode */
[data-theme="dark"] .text-black,
[data-theme="dark"] .text-black-333,
[data-theme="dark"] .text-black-777,
[data-theme="dark"] .text-dark {
  color: var(--text) !important;
}

/* Contact page info boxes: card look matching the theme */
.contact-info {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}
.contact-info:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}
.contact-info h4 { color: var(--heading-color); }
.contact-info h6, .contact-info h6 a { color: var(--text-secondary); }
.contact-info h6 a:hover { color: var(--primary); }

/* ---- Blog/news/course listing cards (theme markup) ---- */
.project, .hover-effect {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
}
.project:hover, .hover-effect:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Card body strip: was hardcoded white */
.project .project-details,
.hover-effect .details {
  background: var(--card-bg);
  border-bottom: 3px solid transparent;
}
.project:hover .project-details {
  border-bottom-color: var(--primary);
}

/* Title links inside project/hover-effect cards */
.project-details h4 a,
.project-details .title a,
.hover-effect .title a {
  color: var(--heading-color);
  transition: color var(--transition);
}
.project-details h4 a:hover,
.project-details .title a:hover,
.hover-effect .title a:hover {
  color: var(--primary);
}
.project-details .title a,
.hover-effect .title { color: var(--heading-color); }
.project-details .title a:hover { color: var(--primary); }
[data-theme="dark"] .sub-title,
[data-theme="dark"] .details h5 { color: var(--text-secondary) !important; }

/* ---- Sidebar widgets on listing pages ---- */
.widget .widget-title { color: var(--heading-color) !important; }
[data-theme="dark"] .widget .widget-title { color: var(--heading-color) !important; }
.list-border li { border-color: var(--border-light); }
[data-theme="dark"] .list-border li a { color: var(--text-secondary); }

/* ---- Styled icons circles ---- */
.styled-icons a {
  transition: all var(--transition);
}

/* ---- Testimonial / service blocks dark fix ---- */
[data-theme="dark"] .testimonial,
[data-theme="dark"] .service-block,
[data-theme="dark"] .team-block { color: var(--text); }

/* ---- Footer legacy class support (old pages) ---- */
.bg-black-222 { background: var(--footer-bg) !important; }
.bg-black-333 { background: #020617 !important; }
.footer .text-white,
.footer .text-gray { color: var(--footer-text) !important; }
[data-theme="dark"] .footer-bottom .text-black-777 { color: #ffffff !important; }
.footer-bottom .text-black-777 { color: #ffffff !important; }
.footer .widget-title { color: var(--footer-heading) !important; }
.footer .list-border li a { color: var(--footer-text); }
.footer .list-border li a:hover { color: var(--primary); }
.footer .list-border li { border-color: var(--footer-border) !important; }

/* ---- Header legacy classes (in case old header used somewhere) ---- */
.header-nav-wrapper { box-shadow: var(--shadow); }

/* ---- ScrollToTop modern ---- */
.scrollToTop {
  background: var(--primary) !important;
  color: #fff !important;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 50% !important;
  box-shadow: var(--shadow-md);
}

/* ---- Preloader light/dark ---- */
[data-theme="dark"] #preloader { background: var(--bg); }

/* ---- Misc dark fixes ---- */
[data-theme="dark"] .divider.parallax.layer-overlay::before { opacity: 0.75; }
[data-theme="dark"] .bg-white { background: var(--card-bg) !important; }
[data-theme="dark"] .main-content.bg-lighter,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-lighter,
[data-theme="dark"] .bg-lightest,
[data-theme="dark"] .bg-silver-light { background-color: var(--bg) !important; }
[data-theme="dark"] .bg-white-transparent-9,
[data-theme="dark"] .bg-white-transparent-8,
[data-theme="dark"] .bg-white-transparent-7 { background: rgba(15, 23, 42, 0.85) !important; }
[data-theme="dark"] img:not(.rev-slidebg):not(.course-card-img):not(.team-card-avatar):not(.post-card-img) { opacity: 0.95; }
[data-theme="dark"] .line-bottom:after { background: var(--primary); }

/* ============================================
   RESPONSIVE POLISH — iPad / Tablet / Phones
   ============================================ */

/* iPad Pro / Landscape tablets */
@media (max-width: 1199px) {
  .nav-container { max-width: 100%; padding: 0 16px; }
}

/* Tablets / iPads portrait */
@media (max-width: 991px) {
  .nav-right .nav-auth-btn { display: none; }
  .nav-right .theme-toggle { width: 34px; height: 34px; }

  .course-card-img { height: 160px; }
  .team-card-avatar { height: 220px; }
  .post-card-img { height: 160px; }
}

/* Large phones / small tablets */
@media (max-width: 767px) {
  .row.no-gutters > [class*="col-"],
  .learning-section .col-lg-5,
  .learning-section .col-lg-7 { width: 100%; }

  #mission .learning-card { margin-bottom: 16px; }
  .funfact-counter { padding: 20px 10px; }
  .cta-section h2 { font-size: 26px; }

  /* Stack footer columns */
  .modern-footer .container .row > div { width: 100%; flex: 0 0 100% !important; min-width: 0 !important; }
}

/* Phones */
@media (max-width: 575px) {
  .course-card-img { height: 180px; }
  .news-item { padding: 10px 12px; }
  .news-card-header h2 { font-size: 18px; }
  .check-more { font-size: 13px; padding: 12px; }
  .score-stats { gap: 10px; }
  .contact-info-card { padding: 24px 14px; }

  /* Floating icons smaller + avoid overlap */
  .floating-icons a img { width: 42px !important; }
  .floating-icons { bottom: 70px; left: 12px; gap: 8px; }
}

/* Small phones (iPhone SE etc.) */
@media (max-width: 374px) {
  .section-header h2 { font-size: 19px; }
  .btn-modern { padding: 9px 18px; font-size: 13px; }
  .auth-card { padding: 22px 16px; }
}

/* ============================================
   HORIZONTAL SCROLL-SNAP SLIDER (Our Courses)
   ============================================ */
.h-slider {
  position: relative;
}

.h-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;              /* Firefox */
  padding-bottom: 8px;
  cursor: grab;
}
.h-track::-webkit-scrollbar { display: none; }
.h-track.dragging {
  cursor: grabbing;
}

.h-item {
  flex: 0 0 calc((100% - 40px) / 3);
  scroll-snap-align: start;
}

/* Arrow controls */
.h-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  z-index: 5;
  box-shadow: var(--shadow-md);
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.h-arrow:hover {
  background: var(--primary-hover);
  transform: translateY(-50%) scale(1.08);
}
.h-prev { left: -14px; }
.h-next { right: -14px; }

/* Dots */
.h-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.h-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
  padding: 0;
  transition: all var(--transition);
}
.h-dot:hover { background: var(--text-muted); }
.h-dot.active {
  background: var(--primary);
  width: 26px;
  border-radius: 6px;
}

/* ---- Course card text contrast (dark/light) ---- */
.course-card-body h4,
.course-card-body p,
.course-card .course-card-body {
  color: var(--heading-color);
}
.course-card-body h4 a {
  color: var(--text-primary) !important;
}
.course-card-body h4 a:hover {
  color: var(--primary) !important;
}
.course-card-body p {
  color: var(--text-secondary) !important;
}

/* Slider responsive */
@media (max-width: 1200px) {
  .h-prev { left: 4px; }
  .h-next { right: 4px; }
}
@media (max-width: 991px) {
  .h-item { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 575px) {
  .h-item { flex-basis: 84%; }
  .h-track { gap: 14px; scroll-snap-type: x mandatory; }
  .h-arrow { width: 36px; height: 36px; font-size: 18px; }
  .h-prev { left: 4px; }
  .h-next { right: 4px; }
}

/* ============================================
   EMPTY STATE COMPONENT
   ============================================ */
.empty-state {
  text-align: center;
  padding: 70px 20px;
  background: var(--card-bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  max-width: 560px;
  margin: 40px auto;
}
.empty-state .empty-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}
.empty-state h3 {
  font-size: 20px;
  margin-bottom: 8px;
}
.empty-state p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 22px;
}

/* ============================================
   QUERY MODAL ("Have a Question?")
   Always-light surface — scoped to #myModal so
   global/dark-theme rules never bleed in.
   ============================================ */
#myModal .modal-content {
  background: #ffffff;
  color: #0f172a;
}

/* Labels: force high-contrast dark */
#myModal .form-modern label,
#myModal .form-group label,
#myModal label {
  color: #0f172a;
}
#myModal label i {
  color: #0075cd;
  margin-right: 5px;
}

/* Inputs: light gray bg, dark text, subtle border */
#myModal .form-control,
#myModal input.form-control,
#myModal textarea.form-control {
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  height: auto;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 14px;
  box-shadow: none;
}
#myModal textarea.form-control {
  min-height: 110px;
  resize: vertical;
}

/* Placeholders: readable gray */
#myModal .form-control::placeholder {
  color: #94a3b8;
  opacity: 1;
}
#myModal .form-control:-ms-input-placeholder { color: #94a3b8; }

/* Focus state */
#myModal .form-control:focus {
  background: #ffffff;
  color: #0f172a;
  border-color: #0075cd;
  box-shadow: 0 0 0 3px rgba(0, 117, 205, 0.15);
  outline: none;
}

/* Submit button stays brand blue */
#myModal button[type="submit"] {
  background: #0075cd;
  color: #ffffff;
  border: 1px solid #0075cd;
}
#myModal button[type="submit"]:hover {
  background: #005fa3;
  border-color: #005fa3;
  color: #ffffff;
}