/* Shared professional theme for Iskill Info Technologies.
   Palette is taken from the logo: deep blue, cool gray, white, and ink. */
:root {
  --iskill-blue: #075f96;
  --iskill-blue-dark: #0a3f63;
  --iskill-blue-soft: #e8f3f8;
  --iskill-silver: #9ba1a4;
  --iskill-silver-soft: #eef2f4;
  --iskill-ink: #102033;
  --iskill-muted: #637181;
  --iskill-line: #dce5ea;
  --iskill-paper: #f7fafc;
  --iskill-card: #ffffff;
  --iskill-shadow: 0 14px 36px rgba(16, 32, 51, 0.08);
  --brand: var(--iskill-blue);
  --brand-dark: var(--iskill-blue-dark);
  --brand-700: var(--iskill-blue-dark);
  --muted: var(--iskill-muted);
  --bg: var(--iskill-paper);
  --bg-start: #edf5f8;
  --bg-end: #ffffff;
  --card: var(--iskill-card);
  --radius: 8px;
  --max-width: 1180px;
  --container: 1180px;
  --nav-bg-start: #ffffff;
  --nav-bg-end: #ffffff;
  --nav-text: var(--iskill-ink);
  --nav-muted: var(--iskill-muted);
  --nav-border: var(--iskill-line);
  --nav-shadow: var(--iskill-shadow);
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

* {
  letter-spacing: 0 !important;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--iskill-paper) !important;
  color: var(--iskill-ink) !important;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
}

a {
  color: var(--iskill-blue);
}

img {
  max-width: 100%;
}

.container {
  max-width: var(--max-width) !important;
}

.muted,
.small,
p.desc,
.card p,
.course p,
.panel p,
.topic-card p,
.feature-post p {
  color: var(--iskill-muted) !important;
}

body > header.container,
body > header.site-nav,
header.site-header-scroll {
  width: min(94%, var(--max-width)) !important;
  max-width: var(--max-width) !important;
  margin: 14px auto 0 !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  background: #ffffff !important;
  border: 1px solid var(--iskill-line) !important;
  border-radius: 8px !important;
  color: var(--iskill-ink) !important;
  box-shadow: var(--iskill-shadow) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}

.site-topbar {
  display: none !important;
  width: min(94%, var(--max-width)) !important;
  max-width: var(--max-width) !important;
  margin: 12px auto -4px !important;
  padding: 8px 14px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: var(--iskill-blue-dark) !important;
  color: #ffffff !important;
  border-radius: 8px 8px 0 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.site-topbar a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.site-topbar-links {
  display: inline-flex !important;
  gap: 14px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.site-topbar > span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

body > header.sticky,
body > header.site-nav.sticky,
header.site-header-scroll.sticky {
  position: fixed !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(94%, var(--max-width)) !important;
  margin-top: 0 !important;
  z-index: 70 !important;
}

body.header-offset {
  padding-top: var(--header-height, 112px) !important;
  transition: padding-top 180ms ease !important;
}

body > header.scrolled,
body > header.scrolled a,
body > header.scrolled .brand h1,
body > header.scrolled .brand .tag,
header.site-header-scroll.scrolled,
header.site-header-scroll.scrolled a,
header.site-header-scroll.scrolled .brand h1,
header.site-header-scroll.scrolled .brand .tag {
  color: var(--iskill-ink) !important;
}

.brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0;
}

.brand-logo,
.brand-logo[style] {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  padding: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid var(--iskill-line) !important;
  border-radius: 8px !important;
}

.brand-logo img,
.brand img,
.login-logo img {
  object-fit: contain !important;
}

.brand-logo img,
.brand-logo[style] img {
  height: 38px !important;
  width: auto !important;
}

.brand h1 {
  color: var(--iskill-ink) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

.brand .tag,
.brand.tag {
  color: var(--iskill-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

nav.main-nav,
body > header nav,
header.site-header-scroll nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  margin-right: 12px !important;
}

.header-nav-group {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-right: auto !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.header-nav-group .brand {
  flex-shrink: 0 !important;
}

.header-nav-group .main-nav {
  margin-left: 2px !important;
}

nav.main-nav ul,
body > header nav ul,
header.site-header-scroll nav ul {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

nav.main-nav ul li,
body > header nav ul li,
header.site-header-scroll nav ul li {
  position: relative !important;
}

header a,
header a:hover,
header a:focus,
header a:active,
.header-nav-group a,
.header-nav-group a:hover,
.header-nav-group a:focus,
.nav-actions a,
.nav-actions a:hover,
.nav-actions a:focus,
.nav-actions .btn,
.nav-actions .btn:hover,
.nav-actions .btn:focus,
.mobile-panel a,
.mobile-panel a:hover,
.mobile-panel a:focus {
  text-decoration: none !important;
  text-underline-offset: 0 !important;
  border-bottom: none !important;
}

nav.main-nav a,
body > header nav a,
header.site-header-scroll nav a,
.nav-trigger {
  color: var(--iskill-ink) !important;
  border-radius: 8px !important;
  padding: 9px 10px !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  text-underline-offset: 0 !important;
}

nav.main-nav a:hover,
body > header nav a:hover,
header.site-header-scroll nav a:hover,
.nav-trigger:hover,
nav a[aria-current="page"] {
  color: var(--iskill-blue) !important;
  background: var(--iskill-blue-soft) !important;
}

.nav-trigger {
  border: 1px solid transparent !important;
}

.nav-caret {
  font-size: 11px !important;
}

.nav-item::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  height: 18px !important;
}

.mega-menu {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-12px) !important;
  min-width: 340px !important;
  max-width: min(760px, 90vw) !important;
  z-index: 50 !important;
  border: 1px solid var(--iskill-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 22px 60px rgba(16, 32, 51, 0.16) !important;
  background: #ffffff !important;
  padding: 18px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  will-change: opacity, transform;
  transition: opacity 260ms ease, transform 260ms ease, visibility 0s linear 0s !important;
}

.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
  transition-delay: 0s !important;
}

.mega-menu::before {
  content: "" !important;
  position: absolute !important;
  top: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(45deg) !important;
  width: 16px !important;
  height: 16px !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(16, 32, 51, 0.08) !important;
  border-left: 1px solid rgba(16, 32, 51, 0.08) !important;
}

.mega-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.mega-card,
.mega-card:hover {
  border-radius: 8px !important;
  border-color: var(--iskill-line) !important;
}

.mega-card:hover {
  background: var(--iskill-blue-soft) !important;
}

.nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.nav-actions .btn {
  min-height: 44px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(16, 32, 51, 0.06) !important;
}

.nav-actions .btn-outline {
  background: #ffffff !important;
  color: var(--iskill-blue-dark) !important;
  border: 1px solid rgba(7, 95, 150, 0.2) !important;
  text-decoration: none !important;
}

.nav-actions .btn-outline:hover {
  background: var(--iskill-blue-soft) !important;
  color: var(--iskill-blue) !important;
  border-color: rgba(7, 95, 150, 0.28) !important;
}

.nav-actions .btn-primary {
  background: var(--iskill-blue) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 24px rgba(7, 95, 150, 0.2) !important;
  text-decoration: none !important;
}

.btn,
.btn-enroll,
.competition-cta,
.admin-btn,
a[class*="btn"],
button[class*="btn"]:not(.mobile-nav-toggle),
button:not([type="submit"]):not([type="button"]):not([type="reset"]):not(.mobile-nav-toggle),
button[type="submit"],
button[type="button"],
button[type="reset"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease !important;
}

a[class*="btn"]:hover,
a[class*="btn"]:focus,
button[class*="btn"]:hover,
button[class*="btn"]:focus,
button:hover,
button:focus {
  text-decoration: none !important;
  text-underline-offset: 0 !important;
  transform: translateY(-2px) !important;
}

button {
  border-radius: 8px !important;
  font-weight: 800 !important;
}

.btn-primary,
.btn-login,
.btn-enroll,
.admin-btn,
.competition-cta,
button[name="signup"],
button[name="login"] {
  background: var(--iskill-blue) !important;
  color: #ffffff !important;
  border: 1px solid var(--iskill-blue) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(7, 95, 150, 0.18) !important;
}

.btn-primary:hover,
.btn-login:hover,
.btn-enroll:hover,
.admin-btn:hover,
.competition-cta:hover,
button[name="signup"]:hover,
button[name="login"]:hover {
  background: var(--iskill-blue-dark) !important;
  border-color: var(--iskill-blue-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 26px rgba(7, 95, 150, 0.24) !important;
}

.btn-outline,
.btn-secondary,
.btn-ghost,
.cta .btn,
.newsletter .btn {
  background: #ffffff !important;
  color: var(--iskill-blue-dark) !important;
  border: 1px solid var(--iskill-line) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(16, 32, 51, 0.06) !important;
}

.btn-outline:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.cta .btn:hover,
.newsletter .btn:hover {
  color: var(--iskill-blue) !important;
  border-color: rgba(7, 95, 150, 0.28) !important;
  background: var(--iskill-blue-soft) !important;
  box-shadow: 0 12px 22px rgba(16, 32, 51, 0.1) !important;
}

.hero,
.page-hero,
.hero-detail,
.competition-hero {
  padding-top: clamp(36px, 6vw, 64px) !important;
  padding-bottom: clamp(28px, 5vw, 48px) !important;
}

.hero > *,
.page-hero > *,
.hero-detail > *,
.services-hero > *,
.contest-hero > *,
.competition-hero > * {
  min-width: 0 !important;
}

.hero h1,
.hero h2,
.page-hero h1,
.hero-detail h2,
.competition-hero h2,
.services-hero h1,
.contest-hero h1 {
  color: var(--iskill-ink) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.hero p,
.page-hero p,
.hero-detail p,
.competition-hero p {
  color: var(--iskill-muted) !important;
}

.hero-kicker,
.kicker,
.eyebrow,
.lead,
.badge,
.meta .pill {
  background: var(--iskill-blue-soft) !important;
  color: var(--iskill-blue-dark) !important;
  border-color: rgba(7, 95, 150, 0.18) !important;
  border-radius: 999px !important;
}

.hero-illustration,
.hero-card,
.hero-media,
.hero-visual,
.panel,
.card,
.course,
.feature,
.topic-card,
.feature-post,
.team-member,
.value,
.stat,
.hero-stat,
.control,
.contact-item,
.category-card,
.steps li,
.login-container,
.login-card,
.signup-container {
  background: #ffffff !important;
  border: 1px solid var(--iskill-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 28px rgba(16, 32, 51, 0.07) !important;
}

.course::before,
.cta::before,
.benefits-band::before {
  display: none !important;
}

.hero-illustration img,
.hero img,
.hero-image,
.topic-card img,
.feature-post img,
.card-media img,
.course img,
.hero-visual img {
  border-radius: 8px !important;
}

.features,
.courses,
.grid,
.topic-grid,
.team-grid,
.category-grid,
.benefits-grid {
  gap: 18px !important;
}

.section-head h3,
.panel h3,
.card h3,
.course h3,
.topic-card h4,
.feature-post h3,
.page-title h1 {
  color: var(--iskill-ink) !important;
}

.skill-list span,
.meta-pill {
  background: var(--iskill-blue-soft) !important;
  color: var(--iskill-blue-dark) !important;
  border: 1px solid rgba(7, 95, 150, 0.12) !important;
  border-radius: 999px !important;
}

.cta,
.newsletter,
.cta-box,
.benefits-band {
  background: var(--iskill-blue-dark) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

.cta p,
.newsletter p,
.cta-box p,
.benefits-band p,
.benefits-band strong,
.benefit strong {
  color: rgba(255, 255, 255, 0.86) !important;
}

.newsletter input,
input,
select,
textarea,
.form-control {
  border: 1px solid var(--iskill-line) !important;
  border-radius: 8px !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--iskill-blue) !important;
  box-shadow: 0 0 0 0.2rem rgba(7, 95, 150, 0.14) !important;
}

footer,
footer.site-footer {
  background: #0d1720 !important;
  color: #ffffff !important;
  border-top: 4px solid var(--iskill-blue) !important;
  padding: 48px 0 !important;
  margin-top: 54px !important;
}

footer h4 {
  color: #ffffff !important;
}

footer p,
footer li,
footer .footer-bottom,
footer div {
  color: rgba(255, 255, 255, 0.74) !important;
}

footer a {
  color: #bde5ff !important;
}

footer input {
  background: #ffffff !important;
}

.back-to-top {
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 50% !important;
  background: var(--iskill-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(16, 32, 51, 0.24) !important;
  cursor: pointer !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(12px) !important;
  transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease !important;
  visibility: hidden !important;
  z-index: 180 !important;
}

.back-to-top.show {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--iskill-blue-dark) !important;
  outline: 3px solid rgba(7, 95, 150, 0.18) !important;
  outline-offset: 3px !important;
}

@media (max-width: 640px) {
  .back-to-top {
    right: 16px !important;
    bottom: 16px !important;
    width: 42px !important;
    height: 42px !important;
  }
}

#mobile-panel,
.mobile-panel {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: min(92vw, 360px) !important;
  max-width: 100% !important;
  height: 100dvh !important;
  padding: 18px 16px 20px !important;
  display: none;
  flex-direction: column !important;
  gap: 12px !important;
  background: #ffffff !important;
  border-left: 1px solid var(--iskill-line) !important;
  box-shadow: -16px 0 36px rgba(16, 32, 51, 0.14) !important;
  z-index: 110 !important;
  overflow-y: auto !important;
}

#mobile-panel.open,
.mobile-panel.open {
  transform: translateX(0) !important;
}

.mobile-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--iskill-line) !important;
}

.close-panel {
  margin-left: auto !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--iskill-blue-dark) !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

#mobile-panel nav ul,
.mobile-panel nav ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 8px 0 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

#mobile-panel nav a,
.mobile-panel nav a {
  width: 100% !important;
  padding: 11px 12px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  color: var(--iskill-ink) !important;
  background: transparent !important;
  text-decoration: none !important;
}

.mobile-panel-actions .btn {
  width: 100% !important;
  justify-content: flex-start !important;
  padding: 11px 12px !important;
  border-radius: 10px !important;
}

#mobile-panel nav a:hover,
.mobile-panel nav a:hover {
  background: var(--iskill-blue-soft) !important;
  color: var(--iskill-blue) !important;
  border-color: rgba(7, 95, 150, 0.16) !important;
}

.login-container,
.signup-container {
  max-width: 940px !important;
  overflow: hidden !important;
}

.login-logo,
.signup-image {
  background: #ffffff !important;
}

.login-logo h2,
.signup-form h3,
.form-section h5 {
  color: var(--iskill-ink) !important;
}

.signup-image {
  position: relative;
}

.signup-image::after {
  content: "Build practical skills with Iskill Info";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(10, 63, 99, 0.88);
  color: #ffffff;
  font-weight: 800;
}

/* Default: hide mobile toggle on all screens (only show on smaller viewports) */
.mobile-nav-toggle,
button.mobile-nav-toggle {
  display: none !important;
}

/* Explicitly hide hamburger even with .btn class */
button.mobile-nav-toggle.btn {
  display: none !important;
}

@media (max-width: 1024px) {
  body > header.container,
  body > header.site-nav,
  header.site-header-scroll {
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .header-nav-group {
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
  }

  body > header .brand,
  header.site-header-scroll .brand,
  header.site-nav .brand {
    flex: 0 0 auto !important;
  }

  body > header nav.main-nav,
  header.site-header-scroll nav.main-nav,
  header.site-nav nav.main-nav {
    display: none !important;
    flex: 0 0 0 !important;
  }

  nav.main-nav ul,
  header.site-header-scroll nav ul {
    display: none !important;
  }

  .mobile-nav-toggle,
  button.mobile-nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
    background: var(--iskill-blue-soft) !important;
    border: 1px solid rgba(7, 95, 150, 0.18) !important;
    position: relative !important;
    z-index: 120 !important;
  }

  /* Show hamburger on tablets/mobile */
  button.mobile-nav-toggle.btn {
    display: inline-flex !important;
  }

  body.mobile-panel-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, 0.34) !important;
    z-index: 100 !important;
  }

  .hero,
  .page-hero,
  .hero-detail,
  .featured,
  .content-grid,
  .hero-panel,
  .participation-wrap {
    grid-template-columns: 1fr !important;
  }

  .hero h2,
  .hero-detail h2,
  .competition-hero h2,
  .services-hero h1,
  .contest-hero h1 {
    font-size: clamp(1.75rem, 7.2vw, 2.25rem) !important;
    line-height: 1.08 !important;
  }

  .nav-actions {
    display: none !important;
  }

  .mobile-panel-actions {
    display: flex !important;
  }
}

@media (max-width: 640px) {
  .brand h1 {
    font-size: 14px !important;
  }

  .brand .tag {
    display: none !important;
  }

  .brand-logo,
  .brand-logo[style] {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .hero-stats,
  .topic-grid,
  .category-grid,
  .benefits-grid,
  .contact-inner {
    grid-template-columns: 1fr !important;
  }

  .login-container,
  .signup-container {
    width: 94% !important;
  }
}

/* Logged-in dashboard and admin surfaces */
.sidebar {
  background: #0d1720 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  box-shadow: 8px 0 28px rgba(16, 32, 51, 0.12) !important;
}

.sidebar a {
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.86) !important;
  background: transparent !important;
}

.sidebar a:hover,
.sidebar a:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  transform: none !important;
}

.main {
  background: var(--iskill-paper) !important;
  min-height: 100vh !important;
}

.main > h3,
.main h3.text-white,
.main .text-white.fw-bold {
  color: var(--iskill-ink) !important;
}

.navbar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--iskill-line) !important;
  box-shadow: 0 8px 24px rgba(16, 32, 51, 0.06) !important;
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link,
.navbar a,
.navbar-brand {
  color: var(--iskill-ink) !important;
}

.nav-cta,
.nav-cta i {
  color: #ffffff !important;
}

.list-group-item,
table,
.table {
  color: var(--iskill-ink) !important;
}

#menuToggle,
.mobile-menu-btn {
  background: var(--iskill-blue) !important;
  border: 1px solid var(--iskill-blue) !important;
  color: #ffffff !important;
}

/* Legacy dashboard pages used white text over old gradients. */
body > .container .text-white,
.main .text-white,
.brand-name {
  color: var(--iskill-ink) !important;
}

.sidebar .text-white,
footer .text-white,
.btn-primary.text-white,
.btn-modern.text-white {
  color: #ffffff !important;
}

/* Responsive consistency patch - July 2026 */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

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

body > header.container,
body > header.site-nav,
header.site-header-scroll {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

body > header nav,
nav.main-nav,
.nav-actions {
  flex: 0 0 auto !important;
}

body > header .brand,
header.site-header-scroll .brand,
header.site-nav .brand {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

@media (min-width: 1121px) {
  body > header.container,
  body > header.site-nav,
  header.site-header-scroll {
    justify-content: flex-start !important;
  }

  body > header .brand,
  header.site-header-scroll .brand,
  header.site-nav .brand {
    flex: 0 0 auto !important;
  }

  body > header nav,
  nav.main-nav,
  header.site-header-scroll nav {
    flex: 1 1 auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  body > header nav ul,
  nav.main-nav ul,
  header.site-header-scroll nav ul {
    justify-content: flex-start !important;
  }
}

@media (min-width: 1121px) {
  .nav-actions {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  .mobile-nav-toggle {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .site-topbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-bottom: 0 !important;
  }

  .site-topbar-links {
    gap: 10px !important;
  }

  body > header.container,
  body > header.site-nav,
  header.site-header-scroll {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    padding: 9px 10px !important;
  }

  .site-topbar,
  main.container,
  .services-main,
  .contest-main,
  .detail-main {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero p,
  .services-hero p,
  .contest-hero p,
  .detail-lede {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .hero h1,
  .hero h2,
  .services-hero h1,
  .contest-hero h1,
  .detail-title {
    width: calc(100vw - 76px) !important;
    max-width: calc(100vw - 64px) !important;
    font-size: clamp(1.55rem, 6.4vw, 2rem) !important;
  }

  .hero p,
  .services-hero p,
  .contest-hero p,
  .detail-lede,
  .services-actions,
  .contest-actions {
    width: calc(100vw - 76px) !important;
    max-width: calc(100vw - 64px) !important;
  }

  .brand h1 {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  .site-topbar {
    font-size: 12px !important;
  }

  .services-actions .btn,
  .contest-actions .btn,
  .hero-actions .btn {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .footer-grid,
  footer .footer-grid {
    grid-template-columns: 1fr !important;
  }

  footer form {
    flex-direction: column !important;
  }

  footer input,
  footer button,
  footer .btn {
    width: 100% !important;
  }
}

/* Legacy services/about pages that still use Bootstrap media cards. */
.services,
.recent-posts,
.cta,
.cta2 {
  overflow-x: hidden !important;
}

.services .row,
.recent-posts .row {
  row-gap: 22px !important;
}

.services .single-rpost,
.recent-posts .single-rpost {
  min-height: 100% !important;
  background: #ffffff !important;
  border: 1px solid var(--iskill-line) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 28px rgba(16, 32, 51, 0.07) !important;
}

.services .post-thumb,
.recent-posts .post-thumb {
  flex: 0 0 42% !important;
  margin: 0 !important;
  min-width: 0 !important;
}

.services .post-thumb img,
.recent-posts .post-thumb img {
  width: 100% !important;
  height: 100% !important;
  min-height: 220px !important;
  object-fit: cover !important;
}

.services .post-content,
.recent-posts .post-content {
  flex: 1 1 auto !important;
  padding: 22px !important;
  color: var(--iskill-ink) !important;
  text-align: left !important;
}

.services .post-content h3,
.recent-posts .post-content h3 {
  font-size: clamp(1.05rem, 2vw, 1.35rem) !important;
  line-height: 1.25 !important;
  margin: 8px 0 14px !important;
}

.services .post-content h3 a,
.recent-posts .post-content h3 a,
.services .service-btn,
.recent-posts .service-btn {
  color: var(--iskill-ink) !important;
  overflow-wrap: anywhere !important;
}

.services .post-btn,
.recent-posts .post-btn {
  color: #ffffff !important;
  background: var(--iskill-blue) !important;
}

footer.footer,
.footer {
  margin-bottom: 0 !important;
}

@media (max-width: 767px) {
  .services .single-rpost,
  .recent-posts .single-rpost {
    display: flex !important;
    flex-direction: column !important;
  }

  .services .post-thumb,
  .recent-posts .post-thumb {
    flex-basis: auto !important;
    order: 0 !important;
    width: 100% !important;
  }

  .services .post-content,
  .recent-posts .post-content {
    order: 1 !important;
    padding: 18px !important;
  }

  .services .post-thumb img,
  .recent-posts .post-thumb img {
    height: 210px !important;
    min-height: 210px !important;
  }
}

@media (max-width: 420px) {
  .brand-logo,
  .brand-logo[style] {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  .brand-logo img,
  .brand-logo[style] img {
    height: 32px !important;
  }

  .mobile-panel {
    width: 88vw !important;
  }
}
/* Course and catalogue mobile controls */
@media (max-width: 640px) {
  .controls,
  .search-form {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .control,
  .results {
    width: 100% !important;
  }

  .control input[type="search"],
  .control select,
  .search-form input,
  .search-form select,
  .search-form button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .card-footer {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .btn-enroll,
  .product-actions .btn,
  .product-actions a {
    width: 100% !important;
    min-width: 0 !important;
  }

  .product-meta,
  .meta {
    flex-wrap: wrap !important;
  }

  .rating {
    white-space: normal !important;
  }
}
/* Shared mega menu behavior */
.nav-item {
  position: relative !important;
}

.nav-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.mega-menu {
  position: fixed !important;
  top: 98px !important;
  left: 50vw !important;
  width: min(780px, 86vw) !important;
  padding: 18px !important;
  background: #ffffff !important;
  color: var(--iskill-ink) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: auto !important;
  transform: translate(-50%, 8px) !important;
  transition: opacity 180ms ease 140ms, transform 180ms ease 140ms, visibility 0s linear 320ms !important;
  z-index: 100 !important;
}

.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
  transition-delay: 0s !important;
}

.mega-menu::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-left: 1px solid var(--iskill-line);
  border-top: 1px solid var(--iskill-line);
  transform: translateX(-50%) rotate(45deg);
}

.mega-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.mega-card {
  display: block !important;
  padding: 13px !important;
  background: #f8fbff !important;
  color: var(--iskill-ink) !important;
  text-decoration: none !important;
}

.mega-card strong {
  display: block !important;
  color: var(--iskill-blue-dark) !important;
  font-size: 14px !important;
  margin-bottom: 4px !important;
}

.mega-card span {
  display: block !important;
  color: var(--iskill-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

@media (max-width: 1024px) {
  .mega-menu {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .mega-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Legacy Bootstrap header toggle cleanup */
@media (max-width: 1120px) {
  .navbar-toggler[style],
  header .navbar-toggler[style] {
    margin-left: 0 !important;
  }

  .fixed-header .navbar,
  header.fixed-header .navbar {
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  /* Fix hamburger visibility */
@media (min-width: 1025px) {
  .mobile-nav-toggle,
  button.mobile-nav-toggle,
  button.mobile-nav-toggle.btn,
  button.mobile-nav-toggle[style] {
    display: none !important;
  }

  #mobile-panel,
  .mobile-panel {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .mobile-nav-toggle,
  button.mobile-nav-toggle,
  button.mobile-nav-toggle.btn {
    display: inline-flex !important;
  }

  .main-nav,
  .nav-actions {
    display: none !important;
  }
}
}

/* Modern Mega Menu - Premium Polish & Design */
#nav .mega-menu {
  background: #ffffff !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
  border-radius: 0 !important;
  top: 95px !important;
  padding: 0 !important;
  width: 1100px !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
  left: calc(50% - 550px) !important;
  backdrop-filter: blur(10px) !important;
}

#nav .mega-menu::before {
  display: none !important;
}

/* Sidebar Navigation - Premium Styling */
#nav .mega-sidebar {
  width: 280px !important;
  background: linear-gradient(180deg, #f8fbff 0%, #f0f6ff 100%) !important;
  border-right: 1px solid rgba(11, 102, 255, 0.08) !important;
  padding: 24px 0 !important;
  flex-shrink: 0 !important;
}

#nav .sidebar-title {
  font-size: 10px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  padding: 0 20px 18px !important;
  margin: 0 !important;
  border-bottom: 2px solid rgba(11, 102, 255, 0.1) !important;
}

#nav .sidebar-menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#nav .sidebar-menu li {
  margin: 0 !important;
}

#nav .sidebar-menu li a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 18px !important;
  color: #555 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 220ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
}

#nav .sidebar-menu li a i {
  font-size: 15px !important;
  color: #0b66ff !important;
  width: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#nav .sidebar-menu li a:before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: #0b66ff !important;
  opacity: 0 !important;
  transition: opacity 220ms ease !important;
}

#nav .sidebar-menu li a:hover {
  background: rgba(11, 102, 255, 0.12) !important;
  color: #0b66ff !important;
  padding-left: 22px !important;
}

#nav .sidebar-menu li a:hover:before {
  opacity: 1 !important;
}

#nav .sidebar-menu li.active a {
  background: rgba(11, 102, 255, 0.15) !important;
  color: #0b66ff !important;
  font-weight: 600 !important;
}

#nav .sidebar-menu li.active a:before {
  opacity: 1 !important;
}

/* Main Content Area - Premium */
#nav .mega-main-content {
  flex: 1 !important;
  padding: 32px 32px !important;
  overflow-y: auto !important;
  max-height: 600px !important;
}

#nav .content-header {
  margin-bottom: 28px !important;
}

#nav .content-header h5 {
  margin: 0 0 8px 0 !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.5px !important;
}

#nav .content-header p {
  margin: 0 !important;
  color: #999 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Grid Layouts */
#nav .courses-grid,
#nav .contests-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
}

/* Course & Contest Cards - Premium Design */
#nav .course-card,
#nav .contest-card {
  background: #ffffff !important;
  border: 1.5px solid #f0f5ff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  cursor: pointer !important;
  transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

#nav .course-card:hover,
#nav .contest-card.active-contest:hover {
  border-color: #0b66ff !important;
  box-shadow: 0 16px 40px rgba(11, 102, 255, 0.18) !important;
  transform: translateY(-6px) !important;
}

#nav .contest-card.coming-contest {
  opacity: 0.65 !important;
  pointer-events: none !important;
  filter: grayscale(30%) !important;
}

#nav .course-img,
#nav .contest-img {
  width: 100% !important;
  height: 150px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #f8faff 0%, #f0f6ff 100%) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#nav .course-img img,
#nav .contest-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#nav .course-card:hover .course-img img,
#nav .contest-card.active-contest:hover .contest-img img {
  transform: scale(1.12) !important;
}

/* Brand Icon Circle */
#nav .course-brand {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 38px !important;
  height: 38px !important;
  background: rgba(11, 102, 255, 0.9) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  z-index: 5 !important;
  box-shadow: 0 4px 16px rgba(11, 102, 255, 0.3) !important;
}

/* Card Text Content */
#nav .course-card strong,
#nav .contest-card strong {
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 14px 14px 6px !important;
  line-height: 1.35 !important;
  display: block !important;
}

#nav .course-card .course-desc,
#nav .contest-card .contest-desc {
  color: #666 !important;
  font-size: 12px !important;
  margin: 0 14px 10px !important;
  line-height: 1.5 !important;
  display: block !important;
}

#nav .course-card .course-duration,
#nav .contest-card .contest-meta {
  color: #999 !important;
  font-size: 11px !important;
  margin: 0 14px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-weight: 500 !important;
}

/* Course Tags/Badges */
#nav .course-tag {
  position: absolute !important;
  top: 55px !important;
  right: 12px !important;
  background: #2ecc71 !important;
  color: #ffffff !important;
  padding: 5px 11px !important;
  border-radius: 14px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.25) !important;
}

#nav .course-tag.trending {
  background: #4ecdc4 !important;
  box-shadow: 0 4px 12px rgba(78, 205, 196, 0.25) !important;
}

/* Contest Badges */
#nav .contest-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  padding: 7px 14px !important;
  border-radius: 18px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  z-index: 5 !important;
  backdrop-filter: blur(8px) !important;
}

#nav .contest-badge.active-badge {
  background: rgba(11, 102, 255, 0.95) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(11, 102, 255, 0.35) !important;
}

#nav .contest-badge.soon-badge {
  background: rgba(160, 160, 160, 0.85) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

#nav .contest-badge i {
  font-size: 12px !important;
}

/* Hover Effects */
#nav .nav-item:hover > .nav-link {
  color: #0b66ff !important;
  font-weight: 600 !important;
}

/* Animation */
@media (min-width: 1025px) {
  #nav .nav-item:hover .mega-menu {
    animation: slideDown 250ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
    visibility: hidden;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
  #nav .mega-menu {
    width: 950px !important;
    left: calc(50% - 475px) !important;
  }

  #nav .courses-grid,
  #nav .contests-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  #nav .mega-sidebar {
    width: 240px !important;
  }

  #nav .mega-main-content {
    padding: 28px 28px !important;
  }
}

@media (max-width: 1024px) {
  #nav .mega-menu {
    flex-direction: column !important;
    width: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  #nav .mega-sidebar {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(11, 102, 255, 0.08) !important;
    padding: 16px 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  #nav .sidebar-title {
    display: none !important;
  }

  #nav .sidebar-menu {
    display: flex !important;
    width: 100% !important;
    overflow-x: auto !important;
  }

  #nav .sidebar-menu li {
    flex-shrink: 0 !important;
  }

  #nav .sidebar-menu li a {
    padding: 10px 16px !important;
    white-space: nowrap !important;
  }

  #nav .mega-main-content {
    padding: 24px !important;
  }

  #nav .courses-grid,
  #nav .contests-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

@media (max-width: 768px) {
  #nav .mega-menu {
    display: none !important;
  }
}