body{font-family:system-ui;background:#f8fafc;overflow-x:hidden;}
    .top-bar{background:#fff;border-bottom:1px solid #e5e7eb}
    .main-menu{background:#0f172a}
    .main-menu a{color:#fff!important;font-weight:500}
    .main-menu a:hover{color:#38bdf8!important}
    
/* ===== SEARCH PILL ===== */
/* ===== DESKTOP SEARCH ===== */
.search-wrap{ max-width:520px; }
.search-pill{
  background:#fff;
  border:1px solid #ced4da;
  border-radius:50px;
  overflow:hidden;
}

/* icon */
.search-icon{
  padding:0 16px;
  color:#6c757d;
  font-size:16px;
}

/* input */
.search-input{
  border:none;
  outline:none;
  flex:1;
  height:46px;
  font-size:15px;
}

.search-input::placeholder{
  color:#9ca3af;
}

/* button */
.search-btn{
  background:#0d6efd;
  color:#fff;
  border:none;
  padding:0 26px;
  height:46px;
  font-weight:500;
}

.search-btn:hover{
  background:#0b5ed7;
}

/* ===== NOTICE SCROLLER ===== */
.notice-bar{
  background:#fffbeb;
  border-top:1px solid #fde68a;
  border-bottom:1px solid #fde68a;
  overflow:hidden;
  white-space:nowrap;
}

.notice-track{
  display:inline-block;
  padding-left:100%;
  animation: notice-scroll 18s linear infinite;
}

.notice-bar:hover .notice-track{
  animation-play-state:paused;
}

.notice-item{
  display:inline-block;
  color:#dc2626;
  font-weight:600;
  padding:10px 0;
}

@keyframes notice-scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}

/* ===== TABS ===== */
.custom-tabs .nav-link{
  border-radius:30px;
  padding:10px 26px;
  font-weight:600;
  color:#334155;
  background:#f1f5f9;
  margin:0 6px;
}

.custom-tabs .nav-link.active{
  background:#0d6efd;
  color:#fff;
  box-shadow:0 6px 16px rgba(13,110,253,.3);
}

/* ===== INFO CARDS ===== */
.info-card{
  background:#fff;
  border-radius:16px;
  padding:28px 20px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  font-weight:600;
  cursor:pointer;
  transition:.25s ease;
}

.info-card i{
  font-size:26px;
  color:#0d6efd;
  margin-bottom:10px;
}

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

/* ================= COLORFUL COURSE CARDS ================= */

.course-card{
  border-radius:18px;
  padding:26px 14px;
  color:#fff;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  transition:all .25s ease;
  cursor:pointer;
}

.course-card i{
  font-size:30px;
  margin-bottom:10px;
}

.course-card h6{
  margin:0;
  font-weight:700;
  font-size:14px;
  line-height:1.3;
}

/* hover */
.course-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 18px 45px rgba(0,0,0,.25);
}

/* mobile spacing */
@media(max-width:768px){
  .course-card{
    padding:22px 12px;
  }
}
/* ===== VIEW MORE BUTTON ===== */
.view-more-btn{
  background:linear-gradient(135deg,#0d6efd,#38bdf8);
  color:#fff;
  padding:12px 34px;
  border-radius:30px;
  font-weight:600;
  box-shadow:0 8px 20px rgba(13,110,253,.35);
  text-decoration:none;
  display:inline-block;
}

.view-more-btn:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(13,110,253,.45);
}
/* ===== STATE CARD TEXT DEEP COLOR ===== */
#stateTab .course-card{
  color:#1f2937; /* deep slate */
}

#stateTab .course-card i{
  color:#111827; /* darker icon */
}

#stateTab .course-card h6{
  font-weight:700;
}

/* ================= COURSES LIST CARDS ================= */

.course-list-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,.1);
  transition:.25s ease;
  height:100%;
}

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

/* image */
.course-img img{
  width:100%;
  height:140px;
  object-fit:cover;
}

/* body */
.course-body{
  padding:14px;
}

.course-title{
  font-weight:700;
  font-size:14px;
  line-height:1.3;
  margin-bottom:6px;
  color:#1e3a8a;
}

.course-tag{
  display:inline-block;
  background:#eef2ff;
  color:#3730a3;
  font-size:11px;
  padding:3px 10px;
  border-radius:12px;
  margin-bottom:10px;
  font-weight:600;
}

.course-meta{
  font-size:12px;
  color:#475569;
  margin-bottom:12px;
}

.course-meta div{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:6px;
}

.course-meta i{
  color:#0d6efd;
}

/* button */
.course-btn{
  display:block;
  text-align:center;
  background:linear-gradient(135deg,#16a34a,#22c55e);
  color:#fff;
  padding:9px 0;
  border-radius:12px;
  font-weight:600;
  text-decoration:none;
  font-size:13px;
}

.course-btn:hover{
  color:#fff;
  opacity:.95;
}

/* mobile tuning */
@media(max-width:768px){
  .course-img img{
    height:120px;
  }
}

/* ================= COLLEGE LIST PAGE ================= */

.college-card{
  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:.25s ease;
  height:100%;
  display:flex;
  flex-direction:column;
}

.college-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 45px rgba(0,0,0,.15);
}

/* logo */
.college-logo{
  background:linear-gradient(135deg,#eef2ff,#f5f3ff);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:16px;
}

.college-logo img{
  width:80px;
  height:80px;
  object-fit:contain;
}

/* body */
.college-body{
  padding:14px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.college-name{
  font-size:14px;
  font-weight:700;
  line-height:1.3;
  color:#1e3a8a;
  margin-bottom:6px;
}

.college-location{
  font-size:12px;
  color:#475569;
  margin-bottom:10px;
}

.college-location i{
  color:#6366f1;
  margin-right:4px;
}

/* tags */
.college-tags{
  font-size:11px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}

.college-tags span{
  background:#f1f5f9;
  padding:4px 8px;
  border-radius:12px;
  color:#334155;
  font-weight:600;
}

.college-tags i{
  color:#6366f1;
  margin-right:3px;
}

/* actions */
.college-actions{
  margin-top:auto;
  display:flex;
  gap:8px;
}

.view-btn{
  flex:1;
  background:linear-gradient(135deg,#4f46e5,#6366f1);
  color:#fff;
  font-size:12px;
  font-weight:600;
  border-radius:12px;
  padding:8px 0;
}

.enquire-btn{
  flex:1;
  background:#ecfeff;
  color:#0369a1;
  font-size:12px;
  font-weight:700;
  border-radius:12px;
  padding:8px 0;
}

.view-btn:hover,
.enquire-btn:hover{
  opacity:.95;
}

/* mobile tuning */
@media(max-width:768px){
  .college-logo img{
    width:64px;
    height:64px;
  }
}

/* ================= COLLEGE ROW CARD ================= */

.college-row-card{
  background:#ffffff;
  border-radius:20px;
  padding:14px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:0 8px 26px rgba(0,0,0,.08);
  transition:.25s ease;
}

.college-row-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 38px rgba(0,0,0,.14);
}

/* logo */
.college-row-logo{
  width:64px;
  height:64px;
  border-radius:16px;
  background:#f1f5f9;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.college-row-logo img{
  width:44px;
  height:44px;
  object-fit:contain;
}

/* body */
.college-row-body{
  flex:1;
}

.college-row-name{
  font-size:14px;
  font-weight:700;
  color:#1e3a8a;
  margin-bottom:6px;
  line-height:1.3;
}

.college-row-meta{
  font-size:11px;
  color:#475569;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.college-row-meta i{
  color:#6366f1;
  margin-right:4px;
}

/* actions */
.college-row-actions{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.btn-view{
  background:linear-gradient(135deg,#4f46e5,#6366f1);
  color:#fff;
  font-size:11px;
  padding:6px 12px;
  border-radius:12px;
  font-weight:600;
}

.btn-enquire{
  background:#ecfeff;
  color:#0369a1;
  font-size:11px;
  padding:6px 12px;
  border-radius:12px;
  font-weight:700;
}

.btn-view:hover,
.btn-enquire:hover{
  opacity:.95;
}

/* mobile optimization */
@media(max-width:768px){
  .college-row-card{
    padding:12px;
  }

  .college-row-actions{
    gap:4px;
  }
}
/* ===== MOBILE BOTTOM NAV DEFAULT ===== */
.mobile-bottom-nav a{
  color:#64748b; /* gray */
  text-decoration:none;
}
.mobile-bottom-nav a.active{
  color:#0d6efd;
  font-weight:600;
}

/* ================= PREMIUM SEGMENT TABS ================= */

.program-tabs-advanced{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:nowrap;
}

/* base tab */
.program-tabs-advanced .nav-link{
  background:#ffffff;
  border:1px solid #e5e7eb;
  color:#111827;
  font-weight:600;
  padding:10px 26px;
  border-radius:14px;
  transition:all .25s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}

/* hover */
.program-tabs-advanced .nav-link:hover{
  background:#f9fafb;
  transform:translateY(-2px);
}

/* active */
.program-tabs-advanced .nav-link.active{
  background:#dc2626;
  color:#ffffff;
  border:none;
  box-shadow:0 8px 20px rgba(220,38,38,.35);
}

/* ================= PROGRAM CARD ================= */
.program-card-new{
  background:#ffffff;
  border-radius:18px;
  padding:16px;
  text-align:center;
  box-shadow:0 8px 25px rgba(0,0,0,.07);
  transition:.25s ease;
  position:relative;
  overflow:hidden;
}

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

/* duration badge */
.duration-badge{
  position:absolute;
  top:10px;
  left:10px;
  background:#f3f4f6;
  padding:4px 8px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  color:#374151;
}

/* icon */
.icon-box{
  font-size:28px;
  color:#dc2626;
  margin:35px 0 10px;
}

/* title */
.program-card-new h6{
  font-weight:700;
  margin-bottom:12px;
  color:#111827;
}

/* view program button */
.view-program-btn{
  display:block;
  background:#dc2626;
  color:#ffffff;
  padding:7px 0;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  transition:.25s ease;
}

.view-program-btn:hover{
  background:#b91c1c;
  color:#ffffff;
}

/* ================= VIEW ALL BUTTON ================= */
.btn-danger{
  background:#dc2626;
  border:none;
  font-weight:600;
}

.btn-danger:hover{
  background:#b91c1c;
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){

  .hero-section{
    height:360px;
    padding:0 15px;
  }

  .program-tabs{
    flex-wrap:wrap;
  }

  .program-tabs .nav-link{
    margin-bottom:8px;
  }

  .icon-box{
    margin:30px 0 8px;
  }

  .program-tabs-advanced{
    gap:8px;
  }

  .program-tabs-advanced .nav-link{
    padding:8px 12px;
    font-size:13px;
    border-radius:10px;
  }

}

/* ================= HERO IMAGE SLIDER ================= */

.hero-banner{
  height:300px;
  background-size:cover;
  background-position:center;
  animation:kenburns 20s ease-in-out infinite alternate;
}

/* Ken Burns continuous zoom */
@keyframes kenburns{
  0%{
    transform:scale(1);
  }
  100%{
    transform:scale(1.12);
  }
}

/* progress bar container */
/* ===== PROGRESS BAR SMOOTH ===== */
.hero-progress{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:rgba(255,255,255,0.25);
  z-index:20;
  overflow:hidden;
}

.hero-progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#dc2626,#ff4d4d);
  will-change: width;
  transition: none;
}

/* ================= HERO NAV BUTTONS ================= */

.carousel-control-prev,
.carousel-control-next{
  width:60px;
  opacity:1;
}

.hero-nav-btn{
  width:42px;
  height:42px;
  background:rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:16px;
  transition:.3s ease;
}

/* hover desktop */
.hero-nav-btn:hover{
  background:#dc2626;
  transform:scale(1.1);
}

/* position center vertically */
.carousel-control-prev{
  left:10px;
}

.carousel-control-next{
  right:10px;
}

.carousel-item{
  transition: transform .8s ease-in-out;
}
/* mobile */
@media(max-width:768px){
  .hero-banner{
    height:200px;
  }
  
  .carousel-control-prev,
  .carousel-control-next{
    width:50px;
  }

  .hero-nav-btn{
    width:36px;
    height:36px;
    font-size:14px;
    background:rgba(0,0,0,0.6);
  }
}

/* ================= GLASSMORPHISM STATS ================= */

.glass-stat{
  padding:25px 15px;
  border-radius:22px;
  backdrop-filter:blur(15px);
  background:rgba(255,255,255,0.15);
  box-shadow:0 15px 40px rgba(0,0,0,.15);
  color:#fff;
  position:relative;
  overflow:hidden;
  transition:.4s ease;
}

/* Animated gradient shift */
.glass-stat::before{
  content:"";
  position:absolute;
  inset:0;
  background-size:300% 300%;
  animation:gradientShift 8s ease infinite;
  z-index:-1;
}

@keyframes gradientShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* Blue gradient */
.gradient-blue::before{
  background:linear-gradient(135deg,#6366f1,#3b82f6,#2563eb);
}

/* Green gradient */
.gradient-green::before{
  background:linear-gradient(135deg,#10b981,#059669,#047857);
}

/* Orange gradient */
.gradient-orange::before{
  background:linear-gradient(135deg,#f59e0b,#ef4444,#dc2626);
}

/* Circular icon */
.circle-wrap{
  width:70px;
  height:70px;
  border-radius:50%;
  background:rgba(255,255,255,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 15px;
  backdrop-filter:blur(8px);
}

/* Icon bounce animation */
.stat-icon{
  font-size:28px;
  animation:bounce 2s infinite;
}

@keyframes bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

/* Number */
.glass-stat h3{
  font-weight:800;
  margin-bottom:5px;
}

/* Label */
.glass-stat p{
  font-size:14px;
  opacity:.95;
  margin:0;
}

/* Hover */
.glass-stat:hover{
  transform:translateY(-8px);
  box-shadow:0 25px 60px rgba(0,0,0,.3);
}

@media(max-width:768px){
    
    /* ================= MOBILE UI ================= */

  /* hide desktop header */
  .navbar, .top-bar{
    display:none !important;
  }

  .mobile-top{
    display:flex;
    align-items:center;
    gap:12px;
  }

  .mobile-top .logo{
    font-size:20px;
    font-weight:700;
  }

  .mobile-links{
    display:flex;
    gap:10px;
    font-size:13px;
  }

  .mobile-links a{
    color:#fff;
    text-decoration:none;
    font-weight:500;
  }

  /* search */
  .mobile-search{
    margin-top:10px;
  }

  .mobile-search .search-pill{
    background:#fff;
    border-radius:30px;
    padding:10px 14px;
    display:flex;
    align-items:center;
    gap:10px;
  }

  .mobile-search input{
    border:none;
    outline:none;
    width:100%;
    font-size:14px;
  }

  /* banner height */
  .banner,
  .carousel-item > div{
    height:220px !important;
  }

  /* tabs */
  .custom-tabs{
    overflow-x:auto;
    white-space:nowrap;
  }

  .custom-tabs .nav-link{
    display:inline-block;
    font-size:14px;
    padding:8px 18px;
  }

  /* cards */
  .info-card{
    padding:20px 12px;
    font-size:14px;
  }

  /* bottom nav */
  .mobile-bottom-nav{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#fff;
    display:flex;
    justify-content:space-around;
    border-top:1px solid #e5e7eb;
    padding:6px 0;
    z-index:999;
  }

  .mobile-bottom-nav a{
    text-align:center;
    color:#64748b;
    text-decoration:none;
    font-size:11px;
  }

  .mobile-bottom-nav i{
    font-size:18px;
    display:block;
    margin-bottom:2px;
  }

  .mobile-bottom-nav a.active{
    color:#0d6efd;
  }

  /* space for bottom nav */
  body{
    padding-bottom:70px;
  }

  .desktop-header{ display:none !important; }

  .mobile-header{
    background:linear-gradient(135deg,#ff7a18,#ff9f1c);
    padding:14px 12px 16px;
    color:#fff;
  }

  /* top row */
  .mobile-top-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
  }

  .brand-text{
    color:#fff;
    font-weight:800;
    font-size:22px;
    line-height:1.2;
  }

  .brand-text span{
    display:block;
    font-weight:600;
    font-size:11px;
    opacity:.9;
  }

  .mobile-phone{
    display:flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,.2);
    padding:6px 10px;
    border-radius:20px;
    font-size:12px;
    color:#fff;
    font-weight:600;
  }

  /* search */
  .mobile-search-pill{
    background:#fff;
    border-radius:30px;
    padding:6px 8px;
    display:flex;
    align-items:center;
    gap:8px;
  }

  .mobile-search-pill i{
    color:#64748b;
    font-size:14px;
  }

  .mobile-search-pill input{
    border:none;
    outline:none;
    flex:1;
    font-size:14px;
  }

  .mobile-search-pill button{
    background:#0d6efd;
    border:none;
    color:#fff;
    border-radius:20px;
    padding:6px 14px;
    font-size:13px;
    font-weight:600;
  }

/* menu container */
  .mobile-menu-cards{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:10px;
  }

  /* menu card: 3 per row */
  .mobile-menu-cards .menu-card{
    flex:0 0 calc(33.333% - 10px);
    width:auto;
    scroll-snap-align:unset;
    background:#ffffff;
    border-radius:16px;
    padding:12px 8px;
    text-align:center;
    font-size:12px;
    font-weight:600;
    color:#111;
    text-decoration:none;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    transition:transform .15s ease, box-shadow .15s ease;
  }

  .mobile-menu-cards .menu-card i{
    display:block;
    font-size:18px;
    margin-bottom:6px;
    color:#ff7a18;
  }

  .mobile-menu-cards .menu-card span{
    display:block;
    line-height:1.2;
    color:#111;
    font-weight:900;
  }

/* tap animation */
.menu-card:active{
  transform:scale(.96);
}

/* hover (desktop safety) */
.menu-card:hover{
  text-decoration:none;
  color:#111;
}

}

/* Navbar: keep icon + text in one line */
.desktop-header .navbar-nav .nav-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1.1;
}

/* Ensure icon doesn't break */
.desktop-header .navbar-nav .nav-link i{
  display: inline-block;
  font-size: 0.95em;
  line-height: 1;
}

/* Optional: keep consistent vertical alignment */
.desktop-header .navbar-nav{
  align-items: center;
}

/* ================= DESKTOP MENU DIVIDERS ================= */
.desktop-header .navbar-nav .nav-item{
  position: relative;
}

/* vertical divider after each item except last */
.desktop-header .navbar-nav .nav-item:not(:last-child)::after{
  content: "";
  position: absolute;
  right: -10px;              /* divider position between items */
  top: 50%;
  transform: translateY(-50%);
  height: 25px;              /* divider height */
  width: 1px;                /* divider thickness */
  background: rgba(255,255,255,0.25); /* subtle white line on dark bg */
}

/* spacing so divider doesn't overlap text */
.desktop-header .navbar-nav{
  gap: 20px;                 /* you already use gap-3 in HTML; CSS also ok */
}