:root{
  /* extracted from screenshot */
  --teal:#037A81;
  --teal-dark:#046a70;
  --gold:#EEB32C;
  --gold-dark:#d9a321;
  --bg:#ffffff;
  --hero:#fbfaf4;      /* warm off-white tint */
  --soft:#f6fbfb;
  --text:#0f172a;
  --muted:#64748b;
  --border:rgba(15,23,42,.10);
  --radius:18px;
}

/* Cairo everywhere */
html,body{ font-family:"Cairo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
body{ background:var(--bg); color:var(--text); }
.text-muted2{ color:var(--muted)!important; }

/* Bootstrap polish */
.btn{ border-radius:999px; font-weight:800; }
.form-control,.form-select{ border-radius:14px; border-color:var(--border); }
.badge{ border-radius:999px; }
.shadow-soft{ box-shadow: 0 16px 42px rgba(15,23,42,.10); }

/* Header (match screenshot) */
.navbar{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
}
.navbar .container{ max-width: 1200px; }
.brand{
  display:flex; align-items:center; gap:.65rem;
  text-decoration:none;
}
.brand-mark{
  width:38px; height:38px; border-radius:12px;
  background: var(--teal);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 20px rgba(3,122,129,.22);
}
.brand-mark svg{ width:18px; height:18px; fill:#fff; }
.brand-name{ font-weight:900; color:var(--teal); font-size:1.05rem; }

.navbar-nav{ gap:.35rem; }
.navbar-nav .nav-link{
  font-weight:800;
  color:#334155;
  padding:.50rem 1.05rem;
  border-radius:999px;
}
.navbar-nav .nav-link:hover{ background: rgba(3,122,129,.08); color:var(--teal); }
.navbar-nav .nav-link.active{
  background: rgba(3,122,129,.12);
  color:var(--teal);
}

.btn-nav-gold{
  background: var(--gold);
  border: 1px solid var(--gold);
  color:#1f2937;
  padding:.6rem 1.25rem;
}
.btn-nav-gold:hover{ background:var(--gold-dark); border-color:var(--gold-dark); color:#1f2937; }

/* Hero */
.hero{
  background:
    radial-gradient(950px 520px at 18% 18%, rgba(3,122,129,.16), transparent 62%),
    radial-gradient(900px 520px at 78% 18%, rgba(238,179,44,.20), transparent 62%),
    linear-gradient(180deg, var(--hero), #ffffff);
  padding: 2.1rem 0 2.6rem;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cpath d='M0 40h220M0 110h220M0 180h220' stroke='%23000000' stroke-opacity='.03'/%3E%3Cpath d='M40 0v220M110 0v220M180 0v220' stroke='%23000000' stroke-opacity='.03'/%3E%3C/svg%3E");
  background-size: 280px 280px;
  opacity:.7;
  pointer-events:none;
}
.hero *{ position:relative; z-index:1; }

.pill-note{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.34rem .78rem;
  border-radius:999px;
  background: rgba(238,179,44,.14);
  border:1px solid rgba(238,179,44,.28);
  color:#7a4a00;
  font-weight:800;
  font-size:.9rem;
}

.hero-h1{
  font-weight:900;
  line-height:1.30;
  color: var(--teal);
  letter-spacing: -.2px;
}
.hero-h1 .gold{ color: var(--gold); }
.hero-lead{
  color: var(--muted);
  max-width: 560px;
  font-size: 1.05rem;
}

.btn-hero-teal{
  background: var(--teal);
  border:1px solid var(--teal);
  color:#fff;
  padding:.72rem 1.55rem;
}
.btn-hero-teal:hover{ background:var(--teal-dark); border-color:var(--teal-dark); color:#fff; }

.btn-hero-outline{
  border:1px solid rgba(15,23,42,.35);
  background:#fff;
  color:#111827;
  padding:.72rem 1.55rem;
}
.btn-hero-outline:hover{ background: rgba(15,23,42,.05); color:#111827; }

.hero-badges{
  display:flex; flex-wrap:wrap; gap: 16px;
  margin-top: 1.15rem;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:.45rem;
  color: var(--muted);
  font-weight:700;
  font-size:.92rem;
}
.hero-badge i{ color:#22c55e; }

.hero-card{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.12);
  background:#fff;
  box-shadow: 0 22px 52px rgba(15,23,42,.12);
  padding: 14px;
}
.hero-image{
  height: 292px; /* match screenshot feel */
  border-radius: 18px;
  border: 4px solid rgba(255,255,255,.95);
  outline: 1px solid rgba(15,23,42,.14);
  background-image:url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1600&q=70");
  background-size:cover;
  background-position:center;
  box-shadow: 0 18px 40px rgba(15,23,42,.14);
}
.hero-bubble{
  position:absolute;
  left: 22px;
  bottom: 18px;
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  padding: 10px 12px;
  display:flex; align-items:center; gap:10px;
  box-shadow: 0 16px 30px rgba(15,23,42,.12);
}
.hero-bubble .ico{
  width:34px; height:34px; border-radius: 12px;
  background: rgba(34,197,94,.12);
  display:flex; align-items:center; justify-content:center;
  color:#16a34a;
}
.hero-bubble .t1{ font-weight:900; font-size:.95rem; }
.hero-bubble .t2{ color:var(--muted); font-size:.82rem; }

/* Section headings */
.section-title{
  font-weight:900;
  color: var(--teal);
}
.section-sub{ color: var(--muted); }

/* Feature cards */
.feature-card{
  border:1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  background:#fff;
  padding: 24px 18px;
  text-align:center;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
  min-height: 232px; /* match screenshot card height */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.feature-icon{
  width:48px; height:48px; border-radius: 18px;
  margin: 0 auto 12px;
  background: rgba(238,179,44,.16);
  border:1px solid rgba(238,179,44,.25);
  display:flex; align-items:center; justify-content:center;
  color: #b45309;
}
.feature-title{ font-weight:900; color: var(--teal); margin-bottom: 8px; }
.feature-desc{ color: var(--muted); font-size:.92rem; line-height:1.7; }

/* Courses grid */
.course-card{
  border:1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  background:#fff;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.course-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
}
.course-thumb{
  height: 178px;
  background-size:cover;
  background-position:center;
}
.course-chip{
  position:absolute; top: 12px; right: 12px;
  background: rgba(3,122,129,.12);
  border:1px solid rgba(3,122,129,.22);
  color: var(--teal);
  font-weight:900;
  padding:.35rem .68rem;
  border-radius:999px;
  font-size:.8rem;
}
.course-title{ font-weight:900; color: var(--teal); }
.course-meta{
  display:flex; gap: 14px; flex-wrap:wrap;
  color: var(--muted);
  font-size:.88rem;
}
.course-meta i{ color: var(--gold); }

.course-bottom{
  display:flex; justify-content:space-between; align-items:center;
  margin-top: 14px;
}
.price{
  font-weight:900;
  color: var(--teal);
}

/* CTA band + Footer */
.cta-band{
  background: var(--teal);
  color:#e6fffb;
  padding: 92px 0; /* taller like screenshot */
}
.cta-band p{ color: rgba(230,255,251,.88); margin-bottom: 18px; }

.footer{
  background:#0f172a;
  color:#e2e8f0;
  padding-top: 72px;
  padding-bottom: 46px;
}
.footer a{ color:#cbd5e1; text-decoration:none; }
.footer a:hover{ color:#fff; }
.footer hr{ border-color: rgba(255,255,255,.12); }

/* Responsive */
@media (max-width: 991px){
  .navbar-nav{ gap:.2rem; }
  .hero{ padding: 1.4rem 0 2rem; }
  .hero-image{ height: 230px; }
  .hero-bubble{ left: 14px; bottom: 14px; }
  .hero-h1{ font-size: 2.1rem; }
}



/* Hero stats overlay (replaces bubble) */
.hero-stats {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: min(360px, 90%);
}

.hero-stat {
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 14px;
    padding: 10px 12px;
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 26px rgba(15,23,42,.10);
}

    .hero-stat .num {
        font-weight: 900;
        color: var(--teal);
        line-height: 1.1;
    }

    .hero-stat .lbl {
        color: var(--muted);
        font-size: .82rem;
        font-weight: 700;
        margin-top: 2px;
    }

@media (max-width: 991px) {
    .hero-stats {
        left: 12px;
        bottom: 12px;
        width: min(340px, 92%);
    }
}


/* Pixel-perfect container */
.ctc-container {
    max-width: 1220px;
}

@media (min-width: 1400px) {
    .ctc-container {
        max-width: 1220px;
    }
}

/* Typography tuning */
.hero-h1 {
    font-size: 3.15rem;
}

@media (max-width: 991px) {
    .hero-h1 {
        font-size: 2.25rem;
    }
}

.section-title {
    font-size: 2.05rem;
    line-height: 1.25;
}

@media (max-width: 991px) {
    .section-title {
        font-size: 1.65rem;
    }
}

/* Section vertical rhythm (match screenshot) */
.hero {
    padding: 2.2rem 0 3.1rem;
}

section.py-5 {
    padding-top: 4.0rem !important;
    padding-bottom: 4.0rem !important;
}


/* Hero stats-only (no image) */
.hero-stats-panel {
    /* border-radius: 22px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 52px rgba(15,23,42,.12);*/
    padding: 18px;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .hero-stats-panel .hero-stats {
        position: static;
        width: 100%;
        max-width: 520px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .hero-stats-panel .hero-stat {
        background: rgba(255,255,255,.62);
        border: 1px solid rgba(15,23,42,.12);
        border-radius: 16px;
        padding: 34px 34px 34px 34px;
    }

        .hero-stats-panel .hero-stat .num {
            font-size: 1.35rem;
        }

        .hero-stats-panel .hero-stat .lbl {
            font-size: .8rem;
        }

@media (max-width: 991px) {
    .hero-stats-panel {
        min-height: auto;
    }

        .hero-stats-panel .hero-stat {
            padding: 12px 12px;
        }
}


/*.hero-stat{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 26px 20px;
  border-radius: 18px;
  min-height: 120px;
}*/

.hero-stat .num{
  font-size: 2.1rem;
  font-weight: 900;
}

.hero-stat .lbl{
  font-size: 1.05rem;
  margin-top: 6px;
}

/* =============================
   2) Courses – pixel perfect like screenshot #1
   ============================= */
.course-card{
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

.course-thumb{
  height: 240px;
}

.course-title{
  font-size: 1.45rem;
  font-weight: 900;
  margin-top: 10px;
}

.course-meta{
  font-size: .95rem;
  margin-top: 12px;
}

.course-bottom{
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.price{
  font-size: 1.4rem;
  font-weight: 900;
}

/* spacing between cards */
#latestCourses .col-lg-4{
  padding-left:18px;
  padding-right:18px;
}



/* ===== Course Details (match screenshot) ===== */
.course-hero{
  background:
    radial-gradient(900px 420px at 25% 10%, rgba(3,122,129,.18), transparent 60%),
    radial-gradient(900px 420px at 70% 0%, rgba(238,179,44,.14), transparent 62%),
    linear-gradient(180deg,#0b2a3f,#071f31 70%, #071f31);
  color:#e5eef6;
  padding: 84px 0 78px;
  position:relative;
  overflow:hidden;
}
.course-hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0);
  background-size: 18px 18px;
  opacity:.25;
  pointer-events:none;
}
.course-hero *{ position:relative; z-index:1; }

.course-hero .hero-tags{
  display:flex;
  gap:10px;
  justify-content:flex-start;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom: 16px;
}
.tag-pill{
  font-weight:900;
  border-radius: 999px;
  padding:.35rem .7rem;
  font-size:.85rem;
  border:1px solid rgba(255,255,255,.14);
}
.tag-pill.tag-gold{ background: var(--gold); color:#111827; border-color: rgba(0,0,0,.05); }
.tag-pill.tag-dark{ background: rgba(255,255,255,.10); color:#e5eef6; }

.course-hero h1{
  font-weight: 900;
  letter-spacing:-.2px;
  color:#1cd0c8;
  font-size: 2.55rem;
  margin-bottom: 12px;
}
.course-hero p{
  color: rgba(229,238,246,.82);
  max-width: 760px;
  margin: 0 auto 22px;
  line-height:1.9;
}

.course-meta-bar{
  display:flex;
  gap:22px;
  justify-content:center;
  flex-wrap:wrap;
  color: rgba(229,238,246,.85);
  font-weight:700;
}
.course-meta-bar i{ color: var(--gold); }

/* Main cards */
.details-wrap{
  padding: 34px 0 70px;
  background: #ffffff;
}
.details-card{
  border:1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  background:#fff;
  box-shadow: 0 12px 30px rgba(15,23,42,.07);
}
.details-card .card-title{
  font-weight: 900;
  color: var(--teal);
  font-size: 1.25rem;
}

.sidebar-card{
  border:1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  background:#fff;
  box-shadow: 0 18px 40px rgba(15,23,42,.10);
  overflow:hidden;
}
.video-thumb{
  height: 210px;
  background-size: cover;
  background-position: center;
  position:relative;
}
.video-thumb::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.25);
}
.play-btn{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width:54px; height:54px;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  border: 2px solid rgba(255,255,255,.75);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.play-btn i{ color:#fff; font-size: 1.3rem; }

.sidebar-body{ padding: 18px 18px 16px; }
.sidebar-price{
  display:flex;
  justify-content:flex-end;
  align-items:baseline;
  gap:8px;
  margin-bottom: 12px;
}
.sidebar-price .amount{
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--teal);
}
.sidebar-price .cur{ color: var(--muted); font-weight:800; }

.btn-enroll{
  width:100%;
  background: var(--teal);
  border: 1px solid var(--teal);
  color:#fff;
  padding: .85rem 1rem;
  border-radius: 14px;
  font-weight: 900;
}
.btn-enroll:hover{ background: var(--teal-dark); border-color: var(--teal-dark); color:#fff; }

.sidebar-list{
  margin-top: 14px;
  border-top: 1px solid rgba(15,23,42,.06);
  padding-top: 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  color:#334155;
  font-weight:800;
  font-size:.95rem;
}
.sidebar-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.sidebar-item .k{ color: var(--muted); font-weight:700; }

.share-row{
  text-align:center;
  color: var(--muted);
  font-weight:700;
  font-size:.95rem;
  padding: 12px 0 0;
}

/* overview checklist */
.checklist{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin-top: 14px;
}
.checklist li{
  list-style:none;
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#334155;
  font-weight:700;
}
.checklist i{ color:#22c55e; margin-top:3px; }
@media (max-width: 991px){
  .course-hero{ padding: 64px 0 62px; }
  .course-hero h1{ font-size: 2.05rem; }
  .checklist{ grid-template-columns: 1fr; }
  .video-thumb{ height: 190px; }
}
.curr-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 16px;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 14px;
  background: #fbfcfe;
}
.curr-row + .curr-row{ margin-top: 10px; }
.curr-left{
  color: var(--muted);
  font-weight:700;
  font-size:.92rem;
}
.curr-right{
  font-weight:900;
  color:#0f172a;
}


/* ===== Pixel-perfect tweaks for Course Details ===== */
.course-hero{
  padding: 86px 0 84px;
  background: radial-gradient(900px 520px at 18% 15%, rgba(3,122,129,.20), transparent 60%),
              radial-gradient(900px 520px at 72% 8%, rgba(238,179,44,.16), transparent 62%),
              linear-gradient(180deg,#08283e 0%, #061e31 70%, #061e31 100%);
}
.course-hero::after{ opacity:.28; background-size: 16px 16px; }

.course-hero .hero-tags{ gap:12px; margin-bottom:18px; }
.tag-pill{ font-size:.82rem; padding:.34rem .72rem; border-radius: 999px; }
.tag-pill.tag-gold{ background: #f4b62b; } /* closer to screenshot */
.tag-pill.tag-dark{ background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.14); }

.course-hero h1{
  font-size: 2.85rem;
  color:#10b7b0; /* teal title like screenshot */
  margin-bottom: 10px;
}
.course-hero p{ font-size: 1.05rem; margin-bottom: 24px; }

.course-meta-bar{
  gap: 26px;
  font-size: .98rem;
}
.course-meta-bar span{ display:inline-flex; align-items:center; gap:8px; }
.course-meta-bar i{ font-size:1.05rem; }

.details-wrap{ padding: 40px 0 78px; }

.details-card{
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}
.details-card .card-title{ font-size:1.18rem; }

/* Sidebar like screenshot */
.sidebar-card{
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(15,23,42,.14);
}
.video-thumb{
  height: 220px;
  border-radius: 14px;
  margin: 18px 18px 0;
  overflow:hidden;
}
.video-thumb::after{ background: rgba(0,0,0,.22); }
.play-btn{
  width:56px; height:56px;
  background: rgba(0,0,0,.45);
  border: 2px solid rgba(255,255,255,.70);
}
.sidebar-body{ padding: 14px 18px 18px; }

.sidebar-price{
  justify-content:flex-start; /* RTL visual right -> start aligns right */
  margin-top: 8px;
  margin-bottom: 12px;
}
.sidebar-price .amount{ font-size: 2.05rem; }
.sidebar-price .cur{ font-size:1.05rem; }

.btn-enroll{
  border-radius: 12px;
  padding: .9rem 1rem;
  font-size: 1.05rem;
}

.sidebar-list{
  padding-top: 14px;
  gap: 10px;
  font-size: .95rem;
}
.sidebar-item{ padding: 0 2px; }
.share-row{ padding-top: 14px; }

/* Checklist like screenshot */
.checklist{ gap: 16px 34px; margin-top: 16px; }
.checklist li{ font-size: .98rem; }
.checklist i{ font-size: 1.05rem; }

/* Curriculum rows */
.curr-row{
  background: #f8fafc;
  border-radius: 14px;
  padding: 16px 18px;
}
.curr-left{ font-size: .92rem; }
.curr-right{ font-size: 1.02rem; }

/* Make meta appear on left visually: swap flex order */
.curr-row{
  display:flex;
  justify-content:space-between;
}
.curr-right{ order:1; }
.curr-left{ order:2; text-align:left; }

/* Responsive */
@media (max-width: 991px){
  .course-hero h1{ font-size: 2.15rem; }
  .course-hero{ padding: 70px 0 66px; }
  .video-thumb{ margin: 14px 14px 0; height: 200px; }
}

.courses-filter {
    background: #f8fafc;
    border-bottom: 1px solid rgba(0,0,0,.05)
}

.filter-box {
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,.05)
}

.filter-input {
    height: 46px;
    border-radius: 12px;
    font-weight: 600
}


/* ===== Advanced Filters + Pagination ===== */
.cats-menu {
    max-height: 380px;
    overflow: auto;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(15,23,42,.12);
}

.cats-checks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

    .cats-checks .form-check {
        margin: 0;
        padding: 8px 10px;
        border-radius: 12px;
        background: #f8fafc;
        border: 1px solid rgba(0,0,0,.05);
    }

        .cats-checks .form-check:hover {
            background: #f1f5f9;
        }

    .cats-checks .form-check-input {
        margin-top: .2rem;
    }

.pagination .page-link {
    border-radius: 12px !important;
    margin: 0 4px;
    border: 1px solid rgba(0,0,0,.07);
    color: var(--teal);
    font-weight: 800;
}

.pagination .page-item.active .page-link {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
}

.pagination .page-link:hover {
    background: rgba(3,122,129,.08);
}


/* ===== Courses Sidebar Layout + Enhancements ===== */
.sidebar-filter {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 12px 30px rgba(15,23,42,.07);
}

    .sidebar-filter .accordion-item {
        border: 1px solid rgba(0,0,0,.05);
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .sidebar-filter .accordion-button {
        font-weight: 900;
        color: #0f172a;
        padding: .9rem .95rem;
    }

        .sidebar-filter .accordion-button:not(.collapsed) {
            background: rgba(3,122,129,.08);
            color: var(--teal);
        }

    .sidebar-filter .accordion-body {
        padding: .9rem .95rem 1rem;
    }

/* price slider (dual range) */
.form-range {
    height: 1.1rem;
}

#minPrice {
    margin-top: 2px;
}

#maxPrice {
    margin-top: -8px;
}
/* overlap feel */

/* results bar sticky under navbar */
.results-bar {
    position: sticky;
    top: 82px;
    z-index: 3;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 16px;
    padding: 10px 12px;
    box-shadow: 0 10px 22px rgba(15,23,42,.06);
    margin-bottom: 16px;
}

.view-btn.active {
    background: rgba(3,122,129,.10) !important;
    border-color: rgba(3,122,129,.15) !important;
    color: var(--teal) !important;
}

/* List view */
#coursesGrid.list-view {
    display: block;
}

    #coursesGrid.list-view > div {
        width: 100%;
        max-width: 100%;
    }

    #coursesGrid.list-view .course-card {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    #coursesGrid.list-view .course-thumb {
        height: 220px;
        width: 320px;
        flex: 0 0 320px;
    }

    #coursesGrid.list-view .course-chip {
        right: auto;
        left: 12px;
    }
    /* keep readable */
    #coursesGrid.list-view .course-card .p-4 {
        flex: 1;
    }

    #coursesGrid.list-view .course-meta {
        gap: 18px;
    }

@media (max-width: 991px) {
    .results-bar {
        top: 74px;
    }

    #coursesGrid.list-view .course-card {
        flex-direction: column;
    }

    #coursesGrid.list-view .course-thumb {
        width: 100%;
        flex: auto;
        height: 220px;
    }
}