body { font-family: Arial, sans-serif; }
header { background-color: #004080 !important; }

/* existing */


   :root {
        --brand: #27ae60; /* Primary brand (adjust to match your site) */
        --brand-dark: #1e8d4f;
        --ink: #0f172a; /* Slate-ish text */
        --muted: #64748b; /* Muted text */
        --bg: #ffffff; /* Base bg */
        --soft: #f6f9fb; /* Section alt bg */
        --ring: #e2e8f0; /* Borders */
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto,
          "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
          "Segoe UI Emoji", "Segoe UI Symbol";
        color: var(--ink);
      }

      /* Topbar */
      .topbar {
        background: #0b1220;
        color: #fff;
        font-size: 0.925rem;
      }
      .topbar a {
        color: #fff;
        text-decoration: none;
      }
      .topbar .whats {
        background: var(--brand);
        border-radius: 999px;
        padding: 0.35rem 0.75rem;
      }
      .topbar .whats:hover {
        background: var(--brand-dark);
      }

      /* Navbar */
      .navbar-brand b {
        color: var(--brand);
      }
      .btn-brand {
        background: var(--brand);
        color: #fff;
        border: none;
      }
      .btn-brand:hover {
        background: var(--brand-dark);
        color: #fff;
      }
      .link-brand {
        color: var(--brand);
      }
      .link-brand:hover {
        color: var(--brand-dark);
      }

      /* Hero */
      .hero {
        position: relative;
        isolation: isolate;
        background: linear-gradient(
            135deg,
            rgba(39, 174, 96, 0.08),
            rgba(56, 189, 248, 0.08)
          ),
          url("assets/img/hero.jpg") center/cover no-repeat;
        color: #0b1220;
      }
      .hero::after {
        /* subtle white mask */
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.55);
        z-index: 0;
      }
      .hero .content {
        position: relative;
        z-index: 1;
      }
      .stat-card {
        border: 1px solid var(--ring);
        background: #fff;
        border-radius: 1rem;
      }

      /* Section helpers */
      .section-alt {
        background: var(--soft);
        border-block: 1px solid var(--ring);
      }
      .card-lite {
        border: 1px solid var(--ring);
        border-radius: 1rem;
      }

      /* univeristy logo */
      .university-logos {
  overflow: hidden;
  position: relative;
  width: 100%;
  background: transparent;
  padding: 8px 0;
}

.university-logos .logo-track {
  display: flex;
  gap: 40px;
  width: calc(200px * 20); /* enough width for duplicated logos */
  animation: scroll-logos 30s linear infinite;
}

.university-logos img {
  height: 105px;
  width: auto;
  object-fit: contain;
}

/* Smooth continuous scroll */
@keyframes scroll-logos {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}


      /* Footer */
      footer {
        background: #0b1220;
        color: #cbd5e1;
      }
      footer a {
        color: #cbd5e1;
        text-decoration: none;
      }
      footer a:hover {
        color: #fff;
      }

  .whatsapp-float {
        position: fixed;
        width: 55px;
        height: 55px;
        bottom: 20px;
        right: 20px;
        background-color: #25d366;
        color: #fff;
        border-radius: 50%;
        text-align: center;
        font-size: 28px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s ease;
      }
      .whatsapp-float:hover {
        background-color: #1ebe5b;
        color: #fff;
        text-decoration: none;
      }



/* Smooth section reveal animation */

.reveal{
opacity:0;
transform:translateY(60px);
transition:all .8s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}


/* different styles (optional for variety) */

.reveal-left {
  opacity: 0;
  transform: translateX(-80px);
  transition: all 0.9s ease;
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(80px);
  transition: all 0.9s ease;
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-zoom {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.8s ease;
}

.reveal-zoom.active {
  opacity: 1;
  transform: scale(1);
}

.navbar {
  transition: all 0.3s ease;
}

.navbar.scrolled {
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.card-lite {
  transition: all 0.3s ease;
}

.card-lite:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}


/* Mobile navbar spacing */
@media (max-width: 991px){

.navbar-nav{
gap:6px;
padding-top:10px;
}

.navbar .btn-brand{
margin-top:8px;
padding:10px 16px;
border-radius:8px;
}

}

.btn-brand{
background:#4CAF50;
border:none;
color:#fff;
font-weight:600;
padding:10px 20px;
border-radius:8px;
transition:all .25s ease;
}

.btn-brand:hover{
background:#3c9443;
transform:translateY(-1px);
}




/* courses page  */

   :root {
        --brand: #27ae60; /* Primary brand (adjust to match your site) */
        --brand-dark: #1e8d4f;
        --ink: #0f172a; /* Slate-ish text */
        --muted: #64748b; /* Muted text */
        --bg: #ffffff; /* Base bg */
        --soft: #f6f9fb; /* Section alt bg */
        --ring: #e2e8f0; /* Borders */
      }
      html {
        scroll-behavior: smooth;
      }

      body {
        font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto,
          "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
          "Segoe UI Emoji", "Segoe UI Symbol";
        color: var(--ink);

        background-color: #c3dac8;
      }

      /* Topbar */
      .topbar {
        background: #0b1220;
        color: #fff;
        font-size: 0.925rem;
      }
      .topbar a {
        color: #fff;
        text-decoration: none;
      }
      .topbar .whats {
        background: var(--brand);
        border-radius: 999px;
        padding: 0.35rem 0.75rem;
      }
      .topbar .whats:hover {
        background: var(--brand-dark);
      }

      /* Navbar */
      .navbar-brand b {
        color: var(--brand);
      }
      .btn-brand {
        background: var(--brand);
        color: #fff;
        border: none;
      }
      .btn-brand:hover {
        background: var(--brand-dark);
        color: #fff;
      }
      .link-brand {
        color: var(--brand);
      }
      .link-brand:hover {
        color: var(--brand-dark);
      }

      /* Hero */
      .hero {
        position: relative;
        isolation: isolate;
        background: linear-gradient(
            135deg,
            rgba(39, 174, 96, 0.08),
            rgba(56, 189, 248, 0.08)
          ),
          url("assets/img/hero.jpg") center/cover no-repeat;
        color: #0b1220;
      }
      .hero::after {
        /* subtle white mask */
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.55);
        z-index: 0;
      }
      .hero .content {
        position: relative;
        z-index: 1;
      }
      .stat-card {
        border: 1px solid var(--ring);
        background: #fff;
        border-radius: 1rem;
      }

      /* Section helpers */
      .section-alt {
        background: var(--soft);
        border-block: 1px solid var(--ring);
      }
      .card-lite {
        border: 1px solid var(--ring);
        border-radius: 1rem;
      }

      /* Footer */
      footer {
        background: #0b1220;
        color: #cbd5e1;
      }
      footer a {
        color: #cbd5e1;
        text-decoration: none;
      }
      footer a:hover {
        color: #fff;
      }



      /* Card container */
      .course-card {
        background: #ffffff;
        border-radius: 14px;
        border: 1px solid #e5e5e5;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
        overflow: hidden;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        font-family: "Poppins", "Segoe UI", sans-serif;
      }

      .course-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
      }

      /* Header with subtle gradient */
      .course-card-header {
        background: linear-gradient(135deg, #f5f7fa, #e6f4ea);
        padding: 16px;
        text-align: center;
      }

      .course-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: #1f5f3a;
        margin: 0;
      }

      /* Card body */
      .course-card-body {
        padding: 18px 20px;
        color: #444;
        font-size: 0.95rem;
        line-height: 1.5;
      }

      .course-card-body p {
        margin: 8px 0;
      }

      /* Footer */
      .course-card-footer {
        padding: 14px 20px;
        background: #fafafa;
        text-align: right;
      }

      /* Green button */
      .btn-green {
        background: #1f5f3a;
        color: #fff;
        border: none;
        padding: 10px 18px;
        border-radius: 8px;
        font-size: 0.9rem;
        cursor: pointer;
        transition: background 0.2s ease;
      }

      .btn-green:hover {
        background: #2ecc71;
      }

      .course-card-footer {
        padding: 16px;
        background: #fafafa;
        text-align: center; /* center buttons */
      }

      .course-card-footer .btn-green {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px; /* space between icon and text */
        background: #184d3b; /* deep green */
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 0.9rem;
        font-weight: 600;
        text-transform: uppercase;
        cursor: pointer;
        transition: background 0.2s;
        text-decoration: none;
      }

      .course-card-footer .btn-green i {
        font-size: 0.9rem;
      }

      .course-card-footer .btn-green:hover {
        background: #126b4f; /* lighter green on hover */
      }

      .course-card-footer .btn-green + .btn-green {
        margin-left: 10px; /* space between buttons */
      }

      .filters-box {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      }

      .filters-box input,
      .filters-box select {
        border-radius: 10px;
        border: 1px solid #d1d5db;
        font-size: 0.95rem;
        padding: 10px 14px;
      }

      .filters-box input:focus,
      .filters-box select:focus {
        border-color: #126b4f;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
      }

      .filters-box .btn {
        border-radius: 10px;
        font-weight: 600;
      }

      .stylish-search {
        border-radius: 50px; /* round edges */
        padding: 15px 25px; /* more inner space */
        font-size: 1.1rem; /* slightly bigger text */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* soft shadow */
        border: 1px solid #ddd; /* light border */
        transition: all 0.2s ease-in-out;
      }

      .stylish-search:focus {
        outline: none;
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.25); /* blue glow */
        border-color: #0d6efd; /* Bootstrap primary color */
      }

      /* Pagination links */
      #pagination .page-link {
        color: #28a745; /* green text for normal links */
      }

      /* Active page */
      #pagination .page-item.active .page-link {
        background-color: #126b4f; /* green background */
        border-color: #126b4f;
        color: white; /* text color inside active page */
      }

      /* Hover effect */
      #pagination .page-link:hover {
        background-color: #218838; /* darker green on hover */
        color: white;
      }

      /* Previous/Next buttons */
      #pagination .page-item.disabled .page-link {
        color: #6c757d; /* gray for disabled */
      }


      /* COURSE CARD */
.course-card {
  border: 1px solid #e9ecef;
  border-radius: 14px;
  background: #fff;
  padding: 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all .25s ease;
}

.course-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* title */
.course-card h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 14px;
  color: #0f172a;
}

/* details */
.course-card p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

/* footer */
.course-card-footer {
  margin-top: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* buttons */
.btn-green {
  background: #1f7a55;
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .2s ease;
}

.btn-green:hover {
  background: #176346;
  color: #fff;
}

/* outline secondary button */
.btn-outline-copy {
  background: #f8f9fa;
  color: #333;
  border: 1px solid #dee2e6;
}

.btn-outline-copy:hover {
  background: #eee;
}


@media (max-width: 768px){

.course-card{
padding:18px;
}

.course-card h5{
font-size:16px;
}

.course-card-footer{
flex-direction:column;
}

.btn-green{
width:100%;
justify-content:center;
}

}

#courses-container .col-md-4{
margin-bottom:22px;
}

.filters-box{
background:#fff;
border-radius:14px;
border:1px solid #e9ecef;
box-shadow:0 8px 20px rgba(0,0,0,.05);
}



/* courses page */
   :root {
        --brand: #27ae60; /* Primary brand (adjust to match your site) */
        --brand-dark: #1e8d4f;
        --ink: #0f172a; /* Slate-ish text */
        --muted: #64748b; /* Muted text */
        --bg: #ffffff; /* Base bg */
        --soft: #f6f9fb; /* Section alt bg */
        --ring: #e2e8f0; /* Borders */
      }
      html {
        scroll-behavior: smooth;
      }

      body {
        font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto,
          "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
          "Segoe UI Emoji", "Segoe UI Symbol";
        color: var(--ink);

        background-color: #c3dac8;
      }

      /* Topbar */
      .topbar {
        background: #0b1220;
        color: #fff;
        font-size: 0.925rem;
      }
      .topbar a {
        color: #fff;
        text-decoration: none;
      }
      .topbar .whats {
        background: var(--brand);
        border-radius: 999px;
        padding: 0.35rem 0.75rem;
      }
      .topbar .whats:hover {
        background: var(--brand-dark);
      }

      /* Navbar */
      .navbar-brand b {
        color: var(--brand);
      }
      .btn-brand {
        background: var(--brand);
        color: #fff;
        border: none;
      }
      .btn-brand:hover {
        background: var(--brand-dark);
        color: #fff;
      }
      .link-brand {
        color: var(--brand);
      }
      .link-brand:hover {
        color: var(--brand-dark);
      }

      /* Hero */
      .hero {
        position: relative;
        isolation: isolate;
        background: linear-gradient(
            135deg,
            rgba(39, 174, 96, 0.08),
            rgba(56, 189, 248, 0.08)
          ),
          url("assets/img/hero.jpg") center/cover no-repeat;
        color: #0b1220;
      }
      .hero::after {
        /* subtle white mask */
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.55);
        z-index: 0;
      }
      .hero .content {
        position: relative;
        z-index: 1;
      }
      .stat-card {
        border: 1px solid var(--ring);
        background: #fff;
        border-radius: 1rem;
      }

      /* Section helpers */
      .section-alt {
        background: var(--soft);
        border-block: 1px solid var(--ring);
      }
      .card-lite {
        border: 1px solid var(--ring);
        border-radius: 1rem;
      }

      /* Footer */
      footer {
        background: #0b1220;
        color: #cbd5e1;
      }
      footer a {
        color: #cbd5e1;
        text-decoration: none;
      }
      footer a:hover {
        color: #fff;
      }
      /* Card container */
      .course-card {
        background: #ffffff;
        border-radius: 14px;
        border: 1px solid #e5e5e5;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
        overflow: hidden;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        font-family: "Poppins", "Segoe UI", sans-serif;
      }

      .course-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
      }

      /* Header with subtle gradient */
      .course-card-header {
        background: linear-gradient(135deg, #f5f7fa, #e6f4ea);
        padding: 16px;
        text-align: center;
      }

      .course-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: #1f5f3a;
        margin: 0;
      }

      /* Card body */
      .course-card-body {
        padding: 18px 20px;
        color: #444;
        font-size: 0.95rem;
        line-height: 1.5;
      }

      .course-card-body p {
        margin: 8px 0;
      }

      .course-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap; /* ✅ allows wrapping on small screens */
        gap: 10px; /* ✅ space between buttons */
        padding-top: 10px;
      }

      /* Make buttons take equal width on small screens */
      @media (max-width: 576px) {
        .course-card-footer .btn-green {
          flex: 1 1 100%; /* ✅ each button becomes full-width on mobile */
          text-align: center;
        }
      }

      /* Footer */
      .course-card-footer {
        padding: 14px 20px;
        background: #fafafa;
        text-align: right;
      }

      /* Green button */
      .btn-green {
        background: #1f5f3a;
        color: #fff;
        border: none;
        padding: 10px 18px;
        border-radius: 8px;
        font-size: 0.9rem;
        cursor: pointer;
        transition: background 0.2s ease;
      }

      .btn-green:hover {
        background: #2ecc71;
      }

      .course-card-footer {
        padding: 16px;
        background: #fafafa;
        text-align: center; /* center buttons */
      }

      .course-card-footer .btn-green {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px; /* space between icon and text */
        background: #184d3b; /* deep green */
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 0.9rem;
        font-weight: 600;
        text-transform: uppercase;
        cursor: pointer;
        transition: background 0.2s;
        text-decoration: none;
      }

      .course-card-footer .btn-green i {
        font-size: 0.9rem;
      }

      .course-card-footer .btn-green:hover {
        background: #126b4f; /* lighter green on hover */
      }

      .course-card-footer .btn-green + .btn-green {
        margin-left: 10px; /* space between buttons */
      }

      .filters-box {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      }

      .filters-box input,
      .filters-box select {
        border-radius: 10px;
        border: 1px solid #d1d5db;
        font-size: 0.95rem;
        padding: 10px 14px;
      }

      .filters-box input:focus,
      .filters-box select:focus {
        border-color: #126b4f;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
      }

      .filters-box .btn {
        border-radius: 10px;
        font-weight: 600;
      }

      .stylish-search {
        border-radius: 50px; /* round edges */
        padding: 15px 25px; /* more inner space */
        font-size: 1.1rem; /* slightly bigger text */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* soft shadow */
        border: 1px solid #ddd; /* light border */
        transition: all 0.2s ease-in-out;
      }

      .stylish-search:focus {
        outline: none;
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.25); /* blue glow */
        border-color: #0d6efd; /* Bootstrap primary color */
      }

      /* Pagination links */
      #pagination .page-link {
        color: #28a745; /* green text for normal links */
      }

      /* Active page */
      #pagination .page-item.active .page-link {
        background-color: #126b4f; /* green background */
        border-color: #126b4f;
        color: white; /* text color inside active page */
      }

      /* Hover effect */
      #pagination .page-link:hover {
        background-color: #218838; /* darker green on hover */
        color: white;
      }

      /* Previous/Next buttons */
      #pagination .page-item.disabled .page-link {
        color: #6c757d; /* gray for disabled */
      }




      /* course page */
      /* =============================
COURSES PAGE
============================= */

.course-hero{
background: linear-gradient(135deg,#0f5132,#198754);
color:white;
padding:70px 0;
text-align:center;
}

.course-hero h1{
font-weight:700;
}

.filters-box{
background:#fff;
border-radius:12px;
box-shadow:0 10px 35px rgba(0,0,0,0.06);
padding:30px;
margin-top:-40px;
}

.filters-box label{
font-weight:600;
font-size:14px;
}

.course-card{
background:#fff;
border-radius:12px;
padding:22px;
border:1px solid #eee;
transition:0.25s;
height:100%;
display:flex;
flex-direction:column;
}

.course-card:hover{
transform:translateY(-4px);
box-shadow:0 12px 35px rgba(0,0,0,0.08);
}

.course-card h5{
font-weight:700;
font-size:18px;
}

.course-meta{
font-size:14px;
color:#555;
margin-top:8px;
}

.course-actions{
margin-top:auto;
padding-top:15px;
}

.btn-green{
background:#198754;
color:white;
border:none;
}

.btn-green:hover{
background:#157347;
}

.pagination .page-link{
color:#198754;
}

.pagination .active .page-link{
background:#198754;
border-color:#198754;
color:white;
}


.pagination{
margin-top:40px;
}

.page-link{
padding:8px 14px;
}

/* filter section */
/* ===============================
COURSE FINDER FIXED UI
================================*/

.course-finder-header{
background: linear-gradient(135deg,#0f5132,#1f6f54);
color:white;
padding:80px 0 120px;
text-align:center;
}

.course-finder-header h1{
font-size:42px;
font-weight:700;
margin-bottom:10px;
}

.course-finder-header p{
opacity:.9;
}


/* Filter Card */

.filter-wrapper{
margin-top:-70px;
}

.filter-card{
background:white;
border-radius:18px;
padding:35px;
box-shadow:0 20px 50px rgba(0,0,0,.08);
border:1px solid rgba(0,0,0,.05);
}


/* Grid */

.filter-grid{
display:grid;
grid-template-columns: repeat(4,1fr);
gap:22px;
margin-bottom:25px;
}

.filter-grid .full{
grid-column: span 2;
}


/* Label */

.filter-label{
font-weight:600;
font-size:14px;
margin-bottom:6px;
display:flex;
align-items:center;
gap:6px;
color:#214c3b;
}


/* Inputs */

.filter-card input,
.filter-card select{
width:100%;
padding:14px 16px;
border-radius:10px;
border:2px solid #e3e3e3;
font-size:14px;
background:#fafafa;
}

.filter-card input:focus,
.filter-card select:focus{
outline:none;
border-color:#1f6f54;
box-shadow:0 0 0 3px rgba(31,111,84,.1);
background:white;
}


/* Buttons */

.filter-actions{
display:grid;
grid-template-columns: 2fr 1fr;
gap:20px;
}

.btn-find{
background: linear-gradient(135deg,#1f6f54,#2f8f6d);
border:none;
padding:16px;
color:white;
border-radius:12px;
font-weight:600;
letter-spacing:.5px;
}

.btn-reset{
background:#f2f2f2;
border:2px solid #e2e2e2;
padding:16px;
border-radius:12px;
font-weight:600;
}


/* Responsive */

@media (max-width:1100px){

.filter-grid{
grid-template-columns: repeat(2,1fr);
}

.filter-actions{
grid-template-columns:1fr;
}

}

@media (max-width:600px){

.filter-grid{
grid-template-columns:1fr;
}

}


/* =========================
COURSE CARD UI
========================= */

.course-card{
background:white;
border-radius:14px;
box-shadow:0 6px 25px rgba(0,0,0,.08);
border:1px solid rgba(0,0,0,.05);
transition:.25s;
height:100%;
display:flex;
flex-direction:column;
justify-content:space-between;
}

.course-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 40px rgba(0,0,0,.12);
}

.course-card-body{
padding:22px;
}

.course-title{
font-size:18px;
font-weight:700;
margin-bottom:15px;
line-height:1.4;
}

.course-meta{
font-size:14px;
color:#555;
}

.meta-row{
display:flex;
align-items:center;
gap:8px;
margin-bottom:8px;
}

.meta-row i{
color:#2f6f55;
font-size:15px;
}

.price{
margin-top:10px;
font-size:16px;
color:#0f5132;
}

.course-card-footer{
padding:20px;
border-top:1px solid #eee;
display:flex;
flex-direction:column;
gap:10px;
}

.course-card-footer .btn{
width:100%;
padding:10px;
border-radius:8px;
font-weight:600;
}

.btn-green{
background:#2f6f55;
color:white;
border:none;
}

.btn-green:hover{
background:#245742;
}


/* COURSE CARD FIX */

.course-card{
display:flex;
flex-direction:column;
height:100%;
border-radius:14px;
}

/* body */

.course-card-body{
flex-grow:1;
padding:20px;
}

/* footer */

.course-card-footer{
padding:20px;
margin-top:auto;
}

/* desktop improvement */

@media (min-width:992px){

.course-card{
min-height:260px;
}

.course-card-body{
display:flex;
flex-direction:column;
justify-content:center;
}

}

.course-title{
font-size:18px;
line-height:1.4;
margin-bottom:10px;
}

.course-meta{
font-size:14px;
color:#555;
}


.course-card-new{
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
height:100%;
display:flex;
flex-direction:column;
}

.course-header{
background:linear-gradient(135deg,#0f766e,#065f46);
color:white;
padding:25px;
}

.course-header h5{
font-size:18px;
font-weight:700;
margin-bottom:6px;
}

.course-uni{
font-size:14px;
opacity:.9;
margin-bottom:10px;
}

.course-tags{
display:flex;
gap:8px;
flex-wrap:wrap;
}

.tag{
background:rgba(255,255,255,0.15);
padding:4px 10px;
border-radius:6px;
font-size:12px;
}

.course-body{
padding:20px;
}

.fee-box{
background:#f5f7fb;
border-radius:10px;
padding:15px;
border:1px solid #e5e7eb;
}

.fee-title{
font-weight:700;
font-size:13px;
margin-bottom:8px;
}

.fee-sub{
font-size:12px;
color:#6b7280;
margin-bottom:4px;
}

.fee-row{
display:flex;
justify-content:space-between;
font-size:14px;
margin-bottom:5px;
}

.grand-total{
display:flex;
justify-content:space-between;
font-weight:700;
color:#0f766e;
font-size:15px;
}

.course-buttons{
display:flex;
gap:10px;
margin-top:15px;
}

.btn-copy{
flex:1;
border:1px solid #d1d5db;
background:white;
padding:10px;
border-radius:6px;
}

.btn-enquire{
flex:1;
background:#0f766e;
color:white;
padding:10px;
border-radius:6px;
text-align:center;
text-decoration:none;
}

.course-card-new{
display:flex;
flex-direction:column;
height:100%;
border-radius:14px;
overflow:hidden;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
background:#fff;
}

.course-header{
min-height:120px;
}

.course-body{
display:flex;
flex-direction:column;
flex-grow:1;
padding:20px;
}

.fee-box{
flex-grow:1;
}

.course-buttons{
margin-top:auto;
display:flex;
gap:10px;
}

.course-header h5{
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:72px;
}