:root {
  --mb-bg: #030712;
  --mb-bg-2: #07111f;
  --mb-panel: #0b1220;
  --mb-panel-2: #111827;
  --mb-panel-3: #151f32;
  --mb-text: #eef6ff;
  --mb-muted: #a7b4c8;
  --mb-cyan: #12c8ff;
  --mb-blue: #1768ff;
  --mb-violet: #8b3dff;
  --mb-magenta: #c044ff;
  --mb-success: #2ee6a6;
  --mb-line: rgba(255, 255, 255, .11);
  --mb-line-strong: rgba(18, 200, 255, .28);
  --mb-shadow: 0 26px 80px rgba(0, 0, 0, .5);
  --mb-soft-shadow: 0 18px 45px rgba(0, 0, 0, .32);
}

html,
body {
  background:
    linear-gradient(180deg, rgba(3, 7, 18, .98), rgba(7, 17, 31, .98)),
    radial-gradient(circle at 12% 0%, rgba(18, 200, 255, .18), transparent 32rem),
    radial-gradient(circle at 86% 6%, rgba(139, 61, 255, .18), transparent 34rem),
    radial-gradient(circle at 50% 60%, rgba(23, 104, 255, .07), transparent 42rem),
    var(--mb-bg) !important;
  color: var(--mb-text) !important;
  min-height: 100vh;
}

a {
  transition: color .2s ease, background .2s ease, transform .2s ease, border-color .2s ease;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .65), transparent 78%);
}

body,
p,
li,
span,
.content,
.section-title p {
  color: var(--mb-muted) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
h1 a,
h2 a,
h3 a,
h4 a {
  color: var(--mb-text) !important;
  letter-spacing: 0 !important;
}

.top-header,
.navbar-area,
.desktop-nav.nav-area,
.mobile-responsive-nav .mean-container .mean-bar {
  background: rgba(3, 7, 18, .88) !important;
  border-bottom: 1px solid var(--mb-line);
  backdrop-filter: blur(18px);
}

.top-header {
  padding: 8px 0;
}

.top-header a,
.top-header li,
.desktop-nav .navbar .navbar-nav .nav-item a,
.mobile-responsive-nav .mean-container a.meanmenu-reveal {
  color: var(--mb-text) !important;
}

.desktop-nav .navbar .navbar-nav .nav-item a:hover,
.desktop-nav .navbar .navbar-nav .nav-item a.active,
.top-header a:hover {
  color: var(--mb-cyan) !important;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu {
  background: rgba(5, 10, 22, .98) !important;
  border: 1px solid var(--mb-line);
  border-radius: 8px;
  box-shadow: var(--mb-shadow);
  max-height: 72vh;
  overflow: auto;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a {
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.moubarmej-brand-logo {
  width: 320px !important;
  max-height: 96px;
  object-fit: contain;
  padding: 8px 14px;
  border-radius: 8px;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(135deg, rgba(18, 200, 255, .70), rgba(139, 61, 255, .70)) border-box;
  border: 1px solid transparent;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .06),
    0 0 34px rgba(18, 200, 255, .18),
    0 0 54px rgba(139, 61, 255, .14);
  filter:
    contrast(1.12)
    brightness(1.18)
    drop-shadow(0 0 16px rgba(18, 200, 255, .30))
    drop-shadow(0 0 26px rgba(139, 61, 255, .22));
}

.moubarmej-footer-logo {
  max-width: 260px;
  border-radius: 8px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .34);
}

.banner-area,
.inner-banner,
.inner-banner-bg,
.inner-banner-bg9,
.section-bg,
.courses-area-two {
  background:
    linear-gradient(135deg, rgba(3, 7, 18, .96), rgba(10, 18, 34, .92)),
    radial-gradient(circle at 78% 18%, rgba(139, 61, 255, .28), transparent 30rem),
    radial-gradient(circle at 15% 22%, rgba(18, 200, 255, .24), transparent 28rem) !important;
  position: relative;
  overflow: hidden;
}

.banner-area::after,
.inner-banner::after,
.inner-banner-bg9::after {
  content: "";
  position: absolute;
  inset: auto 8% -72px 8%;
  height: 150px;
  background: linear-gradient(90deg, transparent, rgba(18, 200, 255, .35), rgba(139, 61, 255, .32), transparent);
  filter: blur(34px);
  pointer-events: none;
}

.inner-banner {
  min-height: 138px !important;
  height: auto !important;
}

.inner-title {
  padding-top: 58px !important;
}

.inner-title ul li,
.inner-title ul li a,
.inner-title h3,
.section-title h2,
.section-title p {
  color: var(--mb-text) !important;
}

.section-title {
  max-width: 850px;
  margin-inline: auto;
}

.section-title h2 {
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.section-title h2::after {
  content: "";
  display: block;
  width: 84px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mb-cyan), var(--mb-violet));
  box-shadow: 0 0 28px rgba(18, 200, 255, .38);
}

.courses-area,
.courses-area-two,
.featured-area,
.categories-area,
.instructors-area,
.blog-area,
.courses-details-area,
.about-area,
.choose-area,
.counter-area,
.newsletter-area,
.testimonials-area {
  background: transparent !important;
}

.courses-item,
.single-course-item,
.categories-item,
.categories-card,
.instructors-card,
.counter-card,
.counter-card.improved-alignment,
.blog-card,
.single-blog-card,
.contact-form,
.contact-info,
.form-control,
.select2-container--default .select2-selection--single,
.courses-details-contact,
.courses-details-sidebar,
.courses-details-tab .tabs,
.courses-details-tab-content,
.footer-area {
  background:
    linear-gradient(180deg, rgba(17, 26, 45, .92), rgba(7, 12, 25, .96)),
    radial-gradient(circle at 88% 0%, rgba(18, 200, 255, .08), transparent 16rem) !important;
  border: 1px solid var(--mb-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--mb-shadow);
}

.counter-card,
.counter-card.improved-alignment,
.blog-card,
.blog-card *:not(.default-btn):not(.tag-btn):not(i),
.single-blog-card,
.single-blog-card *:not(.default-btn):not(.tag-btn):not(i) {
  color: var(--mb-text) !important;
}

.counter-card p,
.counter-card span,
.blog-card p,
.single-blog-card p {
  color: var(--mb-muted) !important;
}

.counter-card .icon-with-number,
.counter-card .content,
.blog-card .content,
.single-blog-card .content {
  background: transparent !important;
}

.courses-item {
  overflow: hidden;
  min-height: 100% !important;
  position: relative;
  isolation: isolate;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.courses-item::before,
.categories-item::before,
.instructors-card::before,
.courses-details-contact::before,
.courses-details-sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(135deg, rgba(18, 200, 255, .16), transparent 34%, rgba(139, 61, 255, .16));
  transition: opacity .22s ease;
}

.courses-item:hover::before,
.categories-item:hover::before,
.instructors-card:hover::before,
.courses-details-contact:hover::before,
.courses-details-sidebar:hover::before {
  opacity: 1;
}

.courses-item > a {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #08101f;
}

.courses-item > a img,
.courses-details-sidebar > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, filter .35s ease;
}

.courses-item:hover > a img {
  transform: scale(1.055);
  filter: saturate(1.12) contrast(1.04);
}

.courses-item:hover {
  transform: translateY(-6px);
  border-color: var(--mb-line-strong) !important;
  box-shadow: 0 30px 85px rgba(0, 0, 0, .56), 0 0 0 1px rgba(18, 200, 255, .08);
}

.courses-item .content {
  padding: 22px 22px 20px !important;
}

.courses-item .content h3 {
  min-height: 52px;
  margin-top: 14px !important;
}

.courses-item .content h3 a:hover {
  color: var(--mb-cyan) !important;
}

.courses-item .content h3 a,
.courses-item .content p,
.courses-item .content,
.courses-details-contact,
.courses-details-contact p,
.courses-details-contact li,
.courses-details-sidebar,
.courses-details-sidebar li,
.courses-details-sidebar h3,
.courses-details-into h3,
.courses-details-accordion h3,
.courses-details-instructor h3,
.accordion-title,
.accordion-content-left,
.accordion-content-right {
  color: var(--mb-text) !important;
}

.courses-item .content p,
.course-list li,
.courses-details-contact p,
.courses-details-sidebar li {
  color: var(--mb-muted) !important;
}

.categories-item {
  padding: 18px 14px !important;
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease;
}

.categories-item:hover,
.instructors-card:hover {
  transform: translateY(-5px);
  border-color: var(--mb-line-strong) !important;
}

.categories-item img {
  width: 70px !important;
  height: 70px !important;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .34);
}

.categories-item h3,
.categories-item h3 a {
  color: var(--mb-text) !important;
}

.instructors-card {
  overflow: hidden;
  padding-bottom: 18px;
}

.instructors-card img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-bottom: 1px solid var(--mb-line);
}

.instructors-card .content {
  background: transparent !important;
  padding: 18px !important;
}

.tag-btn,
.default-btn,
.read-btn,
.optional-btn,
.cart-btn,
.search-btn,
.courses-details-tab .tabs li.current,
.courses-details-tab .tabs li:hover {
  background: linear-gradient(135deg, var(--mb-cyan), var(--mb-blue) 48%, var(--mb-violet)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 34px rgba(23, 104, 255, .28);
}

.tag-btn:hover,
.default-btn:hover {
  transform: translateY(-2px);
  color: #fff !important;
  box-shadow: 0 18px 44px rgba(139, 61, 255, .32);
}

.bottom-content,
.course-list,
.courses-details-list li,
.courses-details-tab .tabs {
  border-color: var(--mb-line) !important;
}

.rating2 i,
.rating i {
  color: #ffc857 !important;
}

.courses-details-tab .tabs li {
  color: var(--mb-muted);
  background: rgba(255, 255, 255, .04);
  border-radius: 8px;
}

.accordion-button,
.accordion-item,
.accordion-body,
.accordion-title,
.accordion-content,
.accordion-content-list {
  background: rgba(255, 255, 255, .035) !important;
  color: var(--mb-text) !important;
  border-color: var(--mb-line) !important;
}

.accordion {
  padding: 0 !important;
}

.accordion-item {
  border-radius: 8px !important;
  margin-bottom: 12px !important;
  overflow: hidden;
}

.accordion-title {
  display: block;
  padding: 16px 18px !important;
  font-weight: 700;
}

.accordion-content-list {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px !important;
  border-top: 1px solid rgba(255, 255, 255, .07) !important;
}

.courses-details-contact,
.courses-details-sidebar {
  position: relative;
  overflow: hidden;
}

.courses-details-sidebar {
  position: sticky;
  top: 110px;
}

.courses-details-sidebar .content {
  padding: 22px !important;
}

.courses-details-sidebar h3 {
  font-size: 28px !important;
  font-weight: 800;
}

.course-rich-details h2,
.course-rich-details h3,
.course-rich-details h4 {
  color: var(--mb-text) !important;
}

.course-rich-details p,
.course-rich-details li {
  color: var(--mb-muted) !important;
  line-height: 1.9;
}

.course-rich-details h3 {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--mb-line);
}

input,
textarea,
select,
.form-control,
.nice-select,
.select2-container--default .select2-selection--single {
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid var(--mb-line) !important;
  color: var(--mb-text) !important;
  border-radius: 8px !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--mb-cyan) !important;
  box-shadow: 0 0 0 3px rgba(18, 200, 255, .12) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(167, 180, 200, .75) !important;
}

.footer-area {
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  margin-top: 40px;
  background:
    linear-gradient(180deg, rgba(5, 10, 22, .98), rgba(2, 6, 14, 1)),
    radial-gradient(circle at 22% 0%, rgba(18, 200, 255, .13), transparent 30rem),
    radial-gradient(circle at 78% 20%, rgba(139, 61, 255, .14), transparent 30rem) !important;
}

.footer-widget .footer-list li a,
.footer-widget h3,
.footer-widget p,
.footer-widget .footer-contact li .content h4,
.footer-widget .footer-contact li .content span,
.footer-widget .footer-contact li .content span a,
.copy-right-text p {
  color: var(--mb-text) !important;
}

.copyright-area {
  background: rgba(0, 0, 0, .26) !important;
  border-top: 1px solid var(--mb-line);
}

.owl-nav button,
.owl-dots button span {
  background: rgba(255, 255, 255, .14) !important;
}

.owl-dots button.active span,
.owl-dots button:hover span {
  background: linear-gradient(90deg, var(--mb-cyan), var(--mb-violet)) !important;
}

table,
.table {
  color: var(--mb-text) !important;
  background: rgba(255, 255, 255, .035) !important;
  border-color: var(--mb-line) !important;
}

hr {
  border-color: var(--mb-line) !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #050914;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--mb-cyan), var(--mb-violet));
  border-radius: 999px;
}

@media (max-width: 767px) {
  .moubarmej-brand-logo {
    width: 190px !important;
    max-height: 64px;
  }

  .courses-area {
    padding-top: 56px !important;
  }

  .footer-area {
    padding: 36px 18px !important;
  }
}

/* Black identity pass: strict Moubarmej 2026 visual system */
:root {
  --mb-bg: #000000;
  --mb-bg-2: #03040a;
  --mb-panel: #05070d;
  --mb-panel-2: #080b14;
  --mb-panel-3: #0b1020;
  --mb-text: #ffffff;
  --mb-muted: #b8c2d6;
  --mb-line: rgba(255, 255, 255, .10);
  --mb-line-strong: rgba(18, 200, 255, .42);
  --mb-shadow: 0 28px 80px rgba(0, 0, 0, .72);
}

html,
body {
  background: #000 !important;
  color: #fff !important;
}

body::before {
  background-image:
    linear-gradient(rgba(18, 200, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 61, 255, .035) 1px, transparent 1px);
  background-size: 86px 86px;
  opacity: .42;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% -10%, rgba(18, 200, 255, .18), transparent 24rem),
    radial-gradient(circle at 92% 10%, rgba(139, 61, 255, .15), transparent 24rem),
    radial-gradient(circle at 8% 20%, rgba(23, 104, 255, .13), transparent 22rem);
}

.top-header,
.navbar-area,
.desktop-nav.nav-area,
.mobile-responsive-nav .mean-container .mean-bar,
.mean-bar {
  background: rgba(0, 0, 0, .94) !important;
  border-bottom: 1px solid rgba(18, 200, 255, .16) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, .62);
}

.desktop-nav .navbar,
.navbar,
.mean-nav,
.mean-container .mean-nav ul li a {
  background: #000 !important;
}

.desktop-nav .navbar .navbar-nav .nav-item a,
.mean-container .mean-nav ul li a,
.top-header a,
.top-header li {
  color: #fff !important;
}

.desktop-nav .navbar .navbar-nav .nav-item a:hover,
.desktop-nav .navbar .navbar-nav .nav-item a.active,
.mean-container .mean-nav ul li a:hover,
.top-header a:hover {
  color: var(--mb-cyan) !important;
  text-shadow: 0 0 18px rgba(18, 200, 255, .42);
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu {
  background: #02040a !important;
  border: 1px solid rgba(18, 200, 255, .18) !important;
}

.banner-area,
.inner-banner,
.inner-banner-bg,
.inner-banner-bg9,
.section-bg,
.courses-area-two,
.courses-area,
.categories-area,
.featured-area,
.instructors-area,
.blog-area,
.courses-details-area,
.about-area,
.choose-area,
.counter-area,
.newsletter-area,
.testimonials-area,
section,
main {
  background-color: #000 !important;
  background-image:
    radial-gradient(circle at 82% 0%, rgba(139, 61, 255, .13), transparent 22rem),
    radial-gradient(circle at 16% 10%, rgba(18, 200, 255, .12), transparent 20rem) !important;
}

.banner-area,
.inner-banner,
.inner-banner-bg,
.inner-banner-bg9 {
  border-bottom: 1px solid rgba(18, 200, 255, .18);
}

.container,
.container-fluid,
.row {
  background-color: transparent !important;
}

.courses-item,
.single-course-item,
.categories-item,
.categories-card,
.instructors-card,
.counter-card,
.counter-card.improved-alignment,
.blog-card,
.single-blog-card,
.contact-form,
.contact-info,
.courses-details-contact,
.courses-details-sidebar,
.courses-details-tab .tabs,
.courses-details-tab-content,
.accordion-item,
.accordion-content,
.accordion-content-list,
.footer-widget,
.form-control,
.select2-container--default .select2-selection--single {
  background: linear-gradient(180deg, #080b14, #03040a) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .68) !important;
}

.courses-item:hover,
.categories-item:hover,
.instructors-card:hover,
.blog-card:hover,
.single-blog-card:hover {
  border-color: rgba(18, 200, 255, .46) !important;
  box-shadow:
    0 32px 90px rgba(0, 0, 0, .78),
    0 0 0 1px rgba(139, 61, 255, .18),
    0 0 42px rgba(18, 200, 255, .10) !important;
}

.courses-item .content,
.categories-item .content,
.instructors-card .content,
.blog-card .content,
.single-blog-card .content,
.courses-details-sidebar .content,
.courses-details-contact .content,
.accordion-content-left,
.accordion-content-right {
  background: transparent !important;
}

.courses-item > a,
.courses-item > a img,
.courses-details-sidebar > img,
.categories-item img,
.instructors-card img {
  background-color: #03040a !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
h1 a,
h2 a,
h3 a,
h4 a,
.section-title h2,
.inner-title h3,
.courses-item .content h3 a,
.categories-item h3,
.categories-item h3 a,
.accordion-title {
  color: #fff !important;
}

p,
li,
span,
.section-title p,
.courses-item .content p,
.course-list li,
.courses-details-contact p,
.courses-details-contact li,
.courses-details-sidebar li,
.course-rich-details p,
.course-rich-details li {
  color: #b8c2d6 !important;
}

.section-title h2::after,
.inner-title h3::after {
  background: linear-gradient(90deg, #12c8ff, #1768ff, #8b3dff) !important;
}

.tag-btn,
.default-btn,
.read-btn,
.optional-btn,
.cart-btn,
.search-btn,
button,
input[type="submit"],
.courses-details-tab .tabs li.current,
.courses-details-tab .tabs li:hover {
  background: linear-gradient(135deg, #12c8ff 0%, #1768ff 46%, #8b3dff 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 16px 38px rgba(23, 104, 255, .34) !important;
}

.tag-btn {
  background: rgba(18, 200, 255, .10) !important;
  border: 1px solid rgba(18, 200, 255, .34) !important;
  color: #7fe3ff !important;
  box-shadow: none !important;
}

.tag-btn:hover {
  background: linear-gradient(135deg, #12c8ff, #8b3dff) !important;
  color: #fff !important;
}

input,
textarea,
select,
.form-control,
.nice-select,
.select2-container--default .select2-selection--single {
  background: #03040a !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

.footer-area {
  background: #000 !important;
  border-top: 1px solid rgba(18, 200, 255, .18) !important;
}

.copyright-area {
  background: #000 !important;
}

.bg-white,
.white-bg,
.section-bg,
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: #ffffff"],
[style*="background:#ffffff"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #ffffff"],
[style*="background-color:#ffffff"] {
  background: #000 !important;
  background-color: #000 !important;
}

[style*="background-color :#004a84"],
[style*="background-color:#004a84"],
[style*="background: #004a84"],
[style*="background:#004a84"] {
  background: #000 !important;
  background-color: #000 !important;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden !important;
}

.mb-page-head {
  padding: 58px 0 26px;
  background:
    radial-gradient(circle at 80% 0%, rgba(139, 61, 255, .18), transparent 24rem),
    radial-gradient(circle at 18% 0%, rgba(18, 200, 255, .16), transparent 22rem),
    #000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.mb-page-head-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 700;
}

.mb-page-head-inner a {
  color: #7fe3ff !important;
}

.mb-page-head-inner span::before {
  content: "/";
  margin-inline-end: 12px;
  color: rgba(255, 255, 255, .35);
}

.mb-courses-section {
  padding: 68px 0 72px;
  background: #000 !important;
}

.mb-home-courses {
  padding-top: 82px;
}

.mb-section-heading {
  max-width: 780px;
  margin: 0 auto 34px;
  text-align: center;
}

.mb-section-heading span {
  display: inline-flex;
  margin-bottom: 12px;
  color: #7fe3ff !important;
  font-weight: 800;
  letter-spacing: 0 !important;
}

.mb-section-heading h2 {
  margin: 0;
  color: #fff !important;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900 !important;
  line-height: 1.25;
}

.mb-courses-grid {
  row-gap: 28px;
}

.mb-course-card {
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(9, 12, 22, .98), rgba(0, 0, 0, .98)) !important;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .72);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.mb-course-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .85;
  background:
    linear-gradient(135deg, rgba(18, 200, 255, .16), transparent 28%),
    radial-gradient(circle at 84% 2%, rgba(139, 61, 255, .20), transparent 18rem);
}

.mb-course-card:hover {
  transform: translateY(-7px);
  border-color: rgba(18, 200, 255, .50);
  box-shadow:
    0 36px 100px rgba(0, 0, 0, .82),
    0 0 0 1px rgba(139, 61, 255, .22),
    0 0 46px rgba(18, 200, 255, .12);
}

.mb-course-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #03040a;
}

.mb-course-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, .70));
}

.mb-course-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .42s ease, filter .42s ease;
}

.mb-course-card:hover .mb-course-media img {
  transform: scale(1.06);
  filter: saturate(1.14) contrast(1.05);
}

.mb-course-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}

.mb-course-topline,
.mb-course-footer,
.mb-course-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mb-course-tag,
.mb-course-rating,
.mb-course-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .10);
  color: #dbe8ff !important;
  font-size: 12px;
  font-weight: 800;
}

.mb-course-tag {
  color: #7fe3ff !important;
  border-color: rgba(18, 200, 255, .28);
}

.mb-course-rating i {
  color: #ffc857 !important;
}

.mb-course-title {
  margin: 16px 0 10px;
  min-height: 58px;
  font-size: 19px !important;
  line-height: 1.55 !important;
  font-weight: 900 !important;
}

.mb-course-title a {
  color: #fff !important;
}

.mb-course-title a:hover {
  color: #12c8ff !important;
}

.mb-course-desc {
  display: -webkit-box;
  min-height: 52px;
  margin: 0 0 18px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #b8c2d6 !important;
  font-size: 14px !important;
  line-height: 1.85;
}

.mb-course-meta {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-bottom: 2px;
}

.mb-course-footer {
  margin-top: 16px;
}

.mb-course-price {
  color: #fff;
  font-size: 18px;
  font-family: Arial, sans-serif;
}

.mb-course-action,
.mb-all-courses-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 8px;
  color: #fff !important;
  font-weight: 900;
  background: linear-gradient(135deg, #12c8ff, #1768ff 50%, #8b3dff) !important;
  box-shadow: 0 18px 42px rgba(23, 104, 255, .34);
}

.mb-all-courses-link {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

#about_us,
#featured_categories,
#teachers,
#counter_area,
#testimonials,
#faqs,
#gallary,
#steps,
#contact_us,
#blog,
#map {
  display: none !important;
}

.owl-carousel.course-slider-two {
  display: grid !important;
}

.mb-udemy-hero {
  padding: 86px 0 56px;
  background:
    radial-gradient(circle at 76% 10%, rgba(139, 61, 255, .22), transparent 28rem),
    radial-gradient(circle at 16% 0%, rgba(18, 200, 255, .18), transparent 26rem),
    #000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.mb-hero-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.mb-hero-content span {
  display: inline-flex;
  margin-bottom: 14px;
  color: #7fe3ff !important;
  font-weight: 900;
}

.mb-hero-content h1 {
  margin: 0 auto 16px;
  max-width: 850px;
  color: #fff !important;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 950 !important;
  line-height: 1.2;
}

.mb-hero-content p {
  max-width: 690px;
  margin: 0 auto 28px;
  color: #c6d2e6 !important;
  font-size: 18px;
  line-height: 1.9;
}

.mb-hero-search,
.mb-catalog-search {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 760px;
  min-height: 62px;
  margin: 0 auto;
  padding: 8px;
  background: #fff !important;
  border: 2px solid #fff;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

.mb-hero-search i,
.mb-catalog-search i {
  color: #111827 !important;
  font-size: 22px;
  margin-inline-start: 12px;
}

.mb-hero-search input,
.mb-catalog-search input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 8px;
  color: #111827 !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

.mb-hero-search button,
.mb-catalog-search button {
  min-height: 46px;
  padding: 0 24px;
  border-radius: 8px;
  white-space: nowrap;
}

.mb-catalog-head {
  padding: 54px 0 36px;
}

.mb-catalog-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 560px);
  align-items: end;
  gap: 28px;
}

.mb-catalog-title a {
  color: #7fe3ff !important;
  font-weight: 800;
}

.mb-catalog-title h1 {
  margin: 10px 0 8px;
  color: #fff !important;
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 950 !important;
}

.mb-catalog-title p {
  margin: 0;
  color: #b8c2d6 !important;
}

.mb-catalog-section {
  padding: 42px 0 76px;
  background: #000 !important;
}

.mb-filter-panel {
  position: sticky;
  top: 116px;
  padding: 20px;
  background: linear-gradient(180deg, #080b14, #020309) !important;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .68);
}

.mb-filter-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #fff;
  font-size: 18px;
}

.mb-filter-head i {
  color: #12c8ff !important;
}

.mb-filter-group {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.mb-filter-group > label:first-child {
  display: block;
  margin-bottom: 10px;
  color: #fff !important;
  font-weight: 900;
}

.mb-filter-group input[type="search"],
.mb-filter-group select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  background: #000 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 8px !important;
}

.mb-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 9px 0;
  color: #c6d2e6 !important;
  cursor: pointer;
}

.mb-radio input {
  width: 16px;
  height: 16px;
  accent-color: #1768ff;
}

.mb-filter-submit,
.mb-filter-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border-radius: 8px;
  font-weight: 900;
}

.mb-filter-reset {
  color: #7fe3ff !important;
  background: rgba(18, 200, 255, .08) !important;
  border: 1px solid rgba(18, 200, 255, .28);
}

.mb-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  padding: 16px 18px;
  background: #05070d !important;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
}

.mb-results-bar strong {
  color: #fff;
  font-size: 18px;
}

.mb-results-bar span {
  color: #b8c2d6 !important;
}

.inner-banner-bg9#video_area {
  min-height: 420px !important;
  padding: 74px 0 58px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .96), rgba(0, 0, 0, .72)),
    radial-gradient(circle at 82% 12%, rgba(139, 61, 255, .22), transparent 28rem),
    radial-gradient(circle at 16% 18%, rgba(18, 200, 255, .18), transparent 24rem),
    #000 !important;
}

.inner-banner-bg9 .inner-title {
  max-width: 830px;
  padding-top: 0 !important;
}

.inner-banner-bg9 .inner-title h4 {
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 950 !important;
  line-height: 1.25;
  color: #fff !important;
}

.inner-banner-bg9 .rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  color: #fff !important;
}

.inner-banner-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.inner-banner-content .user-area,
.inner-banner-content .course-list {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
}

.courses-details-contact,
.courses-details-sidebar {
  border-radius: 8px !important;
}

.courses-details-sidebar {
  margin-top: -230px;
}

.courses-details-sidebar > img {
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.courses-details-tab .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px !important;
}

.courses-details-tab .tabs li {
  margin: 0 !important;
  padding: 10px 16px !important;
  font-weight: 900;
}

@media (max-width: 991px) {
  .mb-catalog-title {
    grid-template-columns: 1fr;
  }

  .mb-filter-panel {
    position: static;
    margin-bottom: 26px;
  }

  .courses-details-sidebar {
    margin-top: 24px;
  }
}

@media (max-width: 575px) {
  .mb-hero-search,
  .mb-catalog-search {
    flex-wrap: wrap;
    padding: 12px;
  }

  .mb-hero-search button,
  .mb-catalog-search button {
    width: 100%;
  }
}

.mb-course-hero {
  padding: 54px 0 64px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, .88)),
    radial-gradient(circle at 76% 8%, rgba(139, 61, 255, .22), transparent 28rem),
    radial-gradient(circle at 18% 10%, rgba(18, 200, 255, .18), transparent 24rem),
    #000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.mb-course-breadcrumb {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  color: #b8c2d6 !important;
}

.mb-course-breadcrumb a {
  color: #7fe3ff !important;
  font-weight: 900;
}

.mb-course-breadcrumb span::before {
  content: "/";
  margin-inline-end: 10px;
  color: rgba(255, 255, 255, .36);
}

.mb-course-hero h1 {
  margin: 0 0 14px;
  color: #fff !important;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.24;
  font-weight: 950 !important;
}

.mb-course-subtitle {
  max-width: 760px;
  margin: 0 0 18px;
  color: #d6e1f5 !important;
  font-size: 19px;
  line-height: 1.8;
}

.mb-course-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.mb-course-proof span,
.mb-course-teacher-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  color: #fff !important;
  font-weight: 800;
}

.mb-hero-rating i,
.mb-review-stars i {
  color: #ffc857 !important;
}

.mb-course-teacher-line {
  margin-top: 4px;
}

.mb-course-teacher-line img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.mb-course-layout {
  padding: 42px 0 76px;
  background: #000 !important;
}

.mb-course-preview,
.mb-learn-box,
.mb-course-block,
.mb-buy-card {
  background: linear-gradient(180deg, #080b14, #020309) !important;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .68);
  overflow: hidden;
}

.mb-course-preview {
  margin-bottom: 24px;
}

.mb-course-preview img,
.mb-course-preview video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  background: #000;
}

.mb-learn-box,
.mb-course-block {
  margin-bottom: 24px;
  padding: 24px;
}

.mb-learn-box h2,
.mb-course-block h2 {
  margin: 0 0 18px;
  color: #fff !important;
  font-size: 24px;
  font-weight: 950 !important;
}

.mb-learn-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.mb-learn-grid span {
  display: flex;
  gap: 10px;
  color: #d6e1f5 !important;
  line-height: 1.7;
}

.mb-learn-grid i {
  color: #12c8ff !important;
  margin-top: 4px;
}

.mb-block-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.mb-block-head h2 {
  margin: 0;
}

.mb-block-head span {
  color: #b8c2d6 !important;
}

.mb-curriculum {
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
  overflow: hidden;
}

.mb-unit {
  background: #03040a;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.mb-unit:last-child {
  border-bottom: 0;
}

.mb-unit summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  color: #fff !important;
  font-weight: 900;
}

.mb-unit summary::-webkit-details-marker {
  display: none;
}

.mb-unit summary span {
  color: #b8c2d6 !important;
  font-weight: 700;
}

.mb-lesson-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, .025);
  border-top: 1px solid rgba(255, 255, 255, .075);
}

.mb-lesson-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d6e1f5 !important;
  cursor: pointer;
}

.mb-lesson-title i {
  color: #12c8ff !important;
}

.mb-lesson-row span {
  color: #b8c2d6 !important;
  font-family: Arial, sans-serif;
}

.mb-course-description,
.mb-course-description p,
.mb-course-description li {
  color: #c6d2e6 !important;
  line-height: 1.9;
}

.mb-course-description .course-rich-details h2,
.mb-course-description .course-rich-details h3,
.mb-course-description .course-rich-details h4 {
  color: #fff !important;
}

.mb-instructor-box {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.mb-instructor-box img {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(18, 200, 255, .42);
}

.mb-instructor-box h3 {
  margin: 0 0 8px;
  color: #fff !important;
}

.mb-instructor-box p {
  color: #c6d2e6 !important;
  line-height: 1.8;
}

.mb-reviews {
  display: grid;
  gap: 14px;
}

.mb-review-item {
  padding: 16px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
}

.mb-review-item > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.mb-review-item strong {
  color: #fff;
}

.mb-review-item span,
.mb-review-item p {
  color: #b8c2d6 !important;
}

.mb-buy-card {
  position: sticky;
  top: 112px;
  margin-top: -210px;
}

.mb-buy-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.mb-buy-body {
  padding: 20px;
}

.mb-buy-price {
  display: block;
  margin-bottom: 14px;
  color: #fff;
  font-size: 32px;
  font-weight: 950;
  font-family: Arial, sans-serif;
}

.mb-buy-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  width: 100%;
  color: #fff !important;
  font-weight: 950;
  border-radius: 8px;
  background: linear-gradient(135deg, #12c8ff, #1768ff 50%, #8b3dff) !important;
  box-shadow: 0 18px 42px rgba(23, 104, 255, .34);
}

.mb-buy-includes {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.mb-buy-includes h3 {
  margin: 0 0 12px;
  color: #fff !important;
  font-size: 18px;
}

.mb-buy-includes span {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  color: #d6e1f5 !important;
}

.mb-buy-includes i {
  color: #12c8ff !important;
}

@media (max-width: 991px) {
  .mb-buy-card {
    position: static;
    margin-top: 24px;
  }
}

@media (max-width: 575px) {
  .mb-learn-grid {
    grid-template-columns: 1fr;
  }

  .mb-block-head,
  .mb-lesson-row,
  .mb-review-item > div:first-child {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Logo clarity and programming motion effects */
@keyframes mb-code-drift {
  0% { transform: translate3d(0, 0, 0); opacity: .24; }
  50% { opacity: .42; }
  100% { transform: translate3d(-90px, 76px, 0); opacity: .24; }
}

@keyframes mb-logo-glow {
  0%, 100% {
    box-shadow: 0 0 34px rgba(18, 200, 255, .18), 0 0 54px rgba(139, 61, 255, .14);
  }
  50% {
    box-shadow: 0 0 52px rgba(18, 200, 255, .34), 0 0 86px rgba(139, 61, 255, .28);
  }
}

@keyframes mb-scan-line {
  0% { transform: translateX(-130%); opacity: 0; }
  18% { opacity: .9; }
  55% { opacity: .36; }
  100% { transform: translateX(150%); opacity: 0; }
}

.moubarmej-brand-logo {
  width: 340px !important;
  max-height: 104px !important;
  padding: 10px 16px !important;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(135deg, rgba(18, 200, 255, .86), rgba(139, 61, 255, .80)) border-box !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  filter:
    contrast(1.16)
    brightness(1.22)
    drop-shadow(0 0 18px rgba(18, 200, 255, .34))
    drop-shadow(0 0 30px rgba(139, 61, 255, .26)) !important;
  animation: mb-logo-glow 3.4s ease-in-out infinite;
}

.navbar-area,
.mb-udemy-hero,
.mb-course-hero {
  position: relative;
  overflow: hidden;
}

.navbar-area::before,
.mb-udemy-hero::before,
.mb-course-hero::before {
  content: "{ }  < />  const learn = true;  function build() {}  npm run skill";
  position: absolute;
  inset-inline-start: -10%;
  top: 0;
  width: 220%;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: rgba(18, 200, 255, .10);
  font-family: Consolas, Monaco, monospace;
  font-size: 18px;
  letter-spacing: 2px;
  pointer-events: none;
  animation: mb-code-drift 18s linear infinite;
}

.desktop-nav,
.mobile-responsive-nav,
.mb-hero-content,
.mb-course-hero .container {
  position: relative;
  z-index: 1;
}

.mb-course-card,
.mb-buy-card,
.mb-filter-panel {
  position: relative;
  overflow: hidden;
}

.mb-course-card::after,
.mb-buy-card::after,
.mb-filter-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 44%;
  background: linear-gradient(90deg, transparent, rgba(18, 200, 255, .18), transparent);
  transform: translateX(-130%);
  pointer-events: none;
}

.mb-course-card:hover::after,
.mb-buy-card:hover::after,
.mb-filter-panel:hover::after {
  animation: mb-scan-line 1.25s ease-out;
}

.mb-course-media::before,
.mb-course-preview::before {
  content: "</>";
  position: absolute;
  z-index: 2;
  inset-inline-start: 14px;
  top: 14px;
  min-width: 44px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #7fe3ff;
  background: rgba(0, 0, 0, .64);
  border: 1px solid rgba(18, 200, 255, .34);
  font-family: Consolas, Monaco, monospace;
  font-weight: 900;
  box-shadow: 0 0 24px rgba(18, 200, 255, .20);
}

.mb-course-preview {
  position: relative;
}

.mb-hero-content h1::after {
  content: "_";
  color: #12c8ff;
  text-shadow: 0 0 20px rgba(18, 200, 255, .70);
}

.mb-hero-search,
.mb-catalog-search {
  position: relative;
  isolation: isolate;
}

.mb-hero-search::before,
.mb-catalog-search::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 10px;
  background: linear-gradient(135deg, #12c8ff, #1768ff, #8b3dff);
  filter: blur(16px);
  opacity: .38;
}

@media (max-width: 767px) {
  .moubarmej-brand-logo {
    width: 220px !important;
    max-height: 74px !important;
    padding: 7px 10px !important;
  }
}

/* Clean logo correction */
.moubarmej-brand-logo {
  width: 285px !important;
  max-height: 84px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  filter: brightness(1.08) contrast(1.06) drop-shadow(0 8px 18px rgba(0, 0, 0, .55)) !important;
}

.navbar-area::before,
.mb-udemy-hero::before,
.mb-course-hero::before {
  content: none !important;
  animation: none !important;
}

.mb-course-media::before,
.mb-course-preview::before {
  display: none !important;
}

@media (max-width: 767px) {
  .moubarmej-brand-logo {
    width: 210px !important;
    max-height: 64px !important;
  }
}

/* Calm homepage search */
.mb-hero-search {
  max-width: 720px !important;
  min-height: 58px !important;
  background: #fff !important;
  border: 1px solid rgba(255, 255, 255, .85) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.mb-udemy-hero {
  overflow: visible !important;
  z-index: 20;
}

.mb-hero-content {
  position: relative;
  z-index: 30 !important;
}

.mb-home-courses {
  position: relative;
  z-index: 1;
}

.mb-live-search-results {
  position: absolute;
  z-index: 2000;
  inset-inline: 0;
  top: calc(100% + 10px);
  display: none;
  max-height: 390px;
  overflow: auto;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, .12);
  border-radius: 8px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .28);
  text-align: start;
  direction: rtl;
}

.mb-live-search-results.is-active {
  display: block;
}

.mb-live-result {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 82px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(17, 24, 39, .08);
  background: #fff;
  text-decoration: none !important;
}

.mb-live-result:last-child {
  border-bottom: 0;
}

.mb-live-result:hover {
  background: #f3f7ff;
}

.mb-live-result img {
  width: 92px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
}

.mb-live-result span {
  display: block;
  min-width: 0;
}

.mb-live-result strong {
  display: -webkit-box;
  overflow: hidden;
  color: #111827 !important;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mb-live-result small {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  color: #5b6475 !important;
  font-size: 12px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mb-live-empty {
  padding: 14px;
  color: #5b6475;
  background: #fff;
}

.mb-hero-search::before {
  content: none !important;
}

.mb-hero-search input {
  background: #fff !important;
  color: #111827 !important;
}

.mb-hero-search button {
  box-shadow: none !important;
}

@media (max-width: 575px) {
  .mb-live-search-results {
    top: calc(100% + 8px);
    max-height: 320px;
  }

  .mb-live-result {
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 74px;
    padding: 10px;
  }

  .mb-live-result img {
    width: 76px;
  }
}

/* Learning paths */
.mb-paths-hero,
.mb-path-detail-hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0 58px;
  background:
    radial-gradient(circle at 18% 18%, rgba(18, 200, 255, .18), transparent 32%),
    radial-gradient(circle at 82% 22%, rgba(139, 61, 255, .18), transparent 34%),
    #02040a;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.mb-paths-hero span,
.mb-path-section-title span,
.mb-path-back {
  display: inline-flex;
  color: #7fe3ff;
  font-weight: 800;
  letter-spacing: 0;
}

.mb-paths-hero h1,
.mb-path-detail-hero h1 {
  max-width: 880px;
  margin: 16px 0 14px;
  color: #fff;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.18;
}

.mb-paths-hero p,
.mb-path-subtitle,
.mb-path-description {
  max-width: 760px;
  color: rgba(255, 255, 255, .74);
  font-size: 17px;
  line-height: 1.9;
}

.mb-paths-section,
.mb-path-detail-section {
  padding: 56px 0 80px;
  background: #05070d;
}

.mb-path-card {
  height: calc(100% - 24px);
  margin-bottom: 24px;
  overflow: hidden;
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.mb-path-card:hover {
  transform: translateY(-4px);
  border-color: rgba(18, 200, 255, .42);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .35);
}

.mb-path-media,
.mb-path-detail-media,
.mb-path-step-image {
  display: block;
  overflow: hidden;
  background: #000;
}

.mb-path-media img,
.mb-path-detail-media img,
.mb-path-step-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.mb-path-body {
  padding: 22px;
}

.mb-path-level {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  color: #d9f7ff;
  background: rgba(18, 200, 255, .10);
  border: 1px solid rgba(18, 200, 255, .26);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}

.mb-path-body h3,
.mb-path-step-content h3 {
  margin: 14px 0 10px;
  font-size: 20px;
  line-height: 1.45;
}

.mb-path-body h3 a,
.mb-path-step-content h3 a {
  color: #fff;
}

.mb-path-body p,
.mb-path-step-content p,
.mb-path-side p {
  color: rgba(255, 255, 255, .68);
  line-height: 1.8;
}

.mb-path-meta,
.mb-path-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.mb-path-meta span,
.mb-path-stats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px;
  font-size: 13px;
}

.mb-path-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  color: #fff !important;
  background: linear-gradient(135deg, #12c8ff, #1768ff 52%, #8b3dff);
  border-radius: 6px;
  font-weight: 900;
}

.mb-path-detail-media {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .45);
}

.mb-path-section-title {
  margin-bottom: 22px;
}

.mb-path-section-title h2 {
  margin: 8px 0 0;
  color: #fff;
  font-size: 30px;
}

.mb-path-timeline {
  position: relative;
  display: grid;
  gap: 16px;
}

.mb-path-course-step {
  position: relative;
  display: grid;
  grid-template-columns: 42px 210px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
}

.mb-path-step-index {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(18, 200, 255, .14);
  border: 1px solid rgba(18, 200, 255, .34);
  border-radius: 50%;
  font-weight: 900;
}

.mb-path-step-image {
  border-radius: 6px;
}

.mb-path-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mb-path-side {
  position: sticky;
  top: 100px;
  padding: 24px;
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
}

.mb-path-side strong {
  display: block;
  margin-bottom: 12px;
  color: #fff;
  font-size: 20px;
}

@media (max-width: 991px) {
  .mb-path-course-step {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .mb-path-step-image {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 575px) {
  .mb-paths-hero,
  .mb-path-detail-hero {
    padding: 62px 0 40px;
  }

  .mb-path-body {
    padding: 18px;
  }

  .mb-path-course-step {
    grid-template-columns: 1fr;
  }

  .mb-path-step-index {
    width: 36px;
    height: 36px;
  }
}