:root {
      --primary: #0b57b3;
      --accent: #00b4d8;
      --muted: #6c7a89;
      --bg: #f7fbff;
      --card-shadow: 0 12px 30px rgba(11, 99, 214, 0.06);
      --glass: rgba(255,255,255,0.6);
    }

    * { box-sizing: border-box; }
    body {
      font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: var(--bg);
      color: #12263f;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      scroll-behavior: smooth;
    }

    /* ---------- NAVBAR ---------- */
    .navbar {
      background: linear-gradient(90deg, #080808, #04789c);
      box-shadow: 0 8px 30px rgba(2,6,23,0.12);
    }
    .navbar-brand { 
        font-weight: 800; 
        color: #fff !important; 
        letter-spacing: .2px; 
    }
       /* minimal safeguard inlined styles (your main styles remain in styles.css) */
    .nav-logo {
      height: 2.6em;      /* Maintain the desired vertical size (3em) */
      width: auto;      /* Let the width scale proportionally based on the height */
      max-width: 100%;  /* Ensures it doesn't exceed the parent container width */
      display: block;
    }

    /* --- Keep the rest of your CSS --- */

    .brand-text {
      font-size: 1.4rem;
      font-weight: 700;
      color: white;
    }
    .nav-link { color: rgba(255,255,255,0.92) !important; font-weight: 600; padding: .6rem 0.8rem; }
    .nav-link:hover { color: #fff !important; opacity: .95; }
    .nav-item .dropdown-menu { min-width: 10rem; }

    /* Right action buttons */
    .nav-actions .btn {
      border-radius: 999px;
      padding: .45rem .8rem;
      font-weight: 700;
      box-shadow: 0 6px 18px rgba(2,6,23,0.08);
    }
    .btn-lms { background: #fff; color: var(--primary); }
    .btn-lms:hover { transform: translateY(-2px); }

    /* ---------- HERO ---------- */
    header.hero {
      padding: 5.25rem 0 3.5rem;
      text-align: left;
      background: linear-gradient(180deg, rgba(11,87,179,0.98), rgba(0,180,216,0.85));
      color: #fff;
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 24px;
      margin-bottom: 2rem;
    }
    header.hero .container { position: relative; z-index: 3; }
    header.hero h1 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); font-weight: 800; margin-bottom: .4rem; }
    header.hero p.lead { font-size: 1.05rem; opacity: .95; margin-bottom: 1rem; }

    /* ---------- MAIN LAYOUT ---------- */
    .section-title { text-align: left; color: var(--primary); font-weight: 800; margin-bottom: 1rem; }

    /* ---------- COURSE CARDS ---------- */
    .course-card {
      border: none;
      border-radius: 12px;
      overflow: hidden;
      transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s;
      background: #ffffff;
      box-shadow: var(--card-shadow);
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .course-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(10,30,90,0.10); }

    .course-media {
      height: 180px;
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .course-badge {
      position: absolute;
      left: 14px;
      top: 14px;
      padding: .35rem .6rem;
      border-radius: 999px;
      font-weight: 700;
      font-size: .8rem;
      box-shadow: 0 6px 18px rgba(2,6,23,0.08);
      color: #fff;
    }
    .badge-present { background: #198754; }
    .badge-upcoming { background: #f59e0b; color: #111; }

    .course-body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .6rem; flex: 1 1 auto; }
    .course-title { font-weight: 700; margin-bottom: 0; font-size: 1.02rem; color: #0b2b5a; }
    .course-meta { color: var(--muted); font-size: .92rem; margin-bottom: .45rem; }

    .course-actions { margin-top: auto; display:flex; gap:.6rem; align-items:center; }
    .course-actions .btn { border-radius: 8px; font-weight:700; }

    /* ---------- FOOTER ---------- */
    footer.site-footer {
      background: linear-gradient(90deg,#042a5b,#062a4f);
      color: #fff;
      padding: 2.5rem 0;
      margin-top: 2.5rem;
      text-align: center;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }
/* Smooth zoom animation */
.upi-qr-animated {
  animation: fadeZoom 0.4s ease-out;
}

@keyframes fadeZoom {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.upi-qr-zoom {
  animation: qrPop 0.5s ease-out;
}

/* Top social bar */
.top-bar {
  background: linear-gradient(90deg, #2EBFC2 0%, #00AFEF 100%);
  padding: 6px 1rem;
  color: #fff;
  font-size: 0.92rem;
  box-shadow: 0 6px 20px rgba(2,6,23,0.08);
  align-items: center;
  z-index: 1050;
}

/* logo */
.topbar-logo {
  height: 34px;
  width: auto;
  display: inline-block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

/* Optional site name (hidden on mobile) */
.site-name { font-weight:700; color:#fff; letter-spacing:0.2px; }

/* social links */
.top-social-link {
  color: #fff;
  font-size:1.12rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  border-radius:8px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* call / whatsapp buttons */
.btn-call {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  padding: .28rem .6rem;
  border-radius: 8px;
  font-weight:600;
}
.btn-whatsapp {
  background: rgba(0,0,0,0.07);
  color: #fff;
  border-radius: 8px;
  padding: .28rem .6rem;
  display:inline-flex;
  gap:.4rem;
  align-items:center;
}

/* hover glow & lift */
.top-social-link:hover, .btn-call:hover, .btn-whatsapp:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 30px rgba(11,87,179,0.18);
  color: #082a4b;
  background: rgba(255,255,255,0.92);
}

/* social toggler (mobile) */
.social-toggler { color: #fff; border: none; background: transparent; }

/* collapsed dropdown container (mobile) */
@media (max-width: 767px) {
  #topSocialCollapse.d-md-flex { display: none !important; } /* hide desktop class */
  #topSocialCollapse.show-mobile {
    display: flex !important;
    position: absolute;
    top: 48px;
    right: 12px;
    background: linear-gradient(90deg, #2EBFC2, #00AFEF);
    padding:8px;
    gap:8px;
    border-radius:10px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.12);
    z-index:1060;
  }
}

/* Floating WhatsApp button */
.floating-whatsapp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1100;
  background: linear-gradient(180deg, #25D366, #128C7E);
  color: #fff;
  width:52px;
  height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  box-shadow: 0 10px 30px rgba(18,140,126,0.28);
  transition: transform .18s ease, box-shadow .18s ease;
  text-decoration: none;
  font-size:1.4rem;
  border: none;
}
.floating-whatsapp:hover { transform: translateY(-6px) scale(1.04); box-shadow: 0 18px 40px rgba(18,140,126,0.34); }

/* icon color reset */
.top-social-link i, .floating-whatsapp i { color: #fff; }

/* small safety: ensure navbar below doesn't overlap */
nav.navbar { z-index:1040; }


    /* responsiveness */
    @media (max-width: 767px) {
      header.hero { padding: 3rem 0; border-radius: 0; text-align: center; }
      .course-media { height: 140px; }
      .nav-actions { gap: .4rem; }
    }