/* =========================================================
   🔹 GLOBAL / COMMON STYLES
   ========================================================= */

/* Blinking animation */
.blink_me {
  animation: blinker 6s linear infinite;
}
@keyframes blinker {
  50% { opacity: 0; }
}

/* Badge styling */
.badge {
  font-size: 2.2em;
  font-weight: bold;
  letter-spacing: 1px;
}

/* Override Bootstrap success color */
.bg-success {
  background-color: yellow;
  color: blue;
}


/* =========================================================
   🔹 BANNER IMAGE RESPONSIVENESS
   ========================================================= */

/* Default (mobile & tablet) */
.banner-img {
  width: 100%;
  height: auto;
}

/* Desktop only */
@media (min-width: 992px) {
  .banner-img {
    width: 75%;
    height: 120px;
    display: block;
    margin: 0 auto; /* center image */
  }
}

/* =========================================================
   🔹 TOP BAR (ORANGE BACKGROUND) (Styles for online student Entire Bar)
   ========================================================= */
.top-bar {
  background: #FF9933;      /* 👈 restore orange */
  padding: 10px 0;
}

/* =========================================================
   🔹 BUTTON CONTAINER
   ========================================================= */
.top-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  gap: 10px;
}

/* =========================================================
   🔹 BUTTON STYLE
   ========================================================= */
.custom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #138808;
  color: #fff;
  font-weight: bold;
  text-decoration: none;

  padding: 8px 22px;
  border-radius: 50px;

  font-size: 17px;
  line-height: 1;
  white-space: nowrap;

  transition: all 0.3s ease;
}

/* Hover */
.custom-btn:hover {
  background: #0f6f0f;
  transform: translateY(-2px);
}

/* Highlight middle */
.highlight-btn {
  border: 3px solid yellow;
}

/* =========================================================
   🔹 RESPONSIVE SPACING
   ========================================================= */
@media (min-width: 768px) {
  .top-buttons { gap: 25px; }
}

@media (min-width: 1200px) {
  .top-buttons { gap: 80px; }
}

@media (min-width: 1600px) {
  .top-buttons { gap: 100px; }
}

/* =========================================================
   🔹 End Styles for online student Entire Bar)
   ========================================================= */


/* =========================================================
   🔹 NAV TABS (CUSTOM DESIGN - GREEN PILLS) (For Notications and all Tabs)
   ========================================================= */

/* Remove default Bootstrap border + center tabs */
.nav-tabs {
  border-bottom: none !important;
  justify-content: center;
  gap: 8px; /* default gap (mobile first) */
  
}

/* Default tab appearance */
.nav-tabs .nav-link {
  background-color: #cfe8cf;   /* light green */
  color: #006400 !important;   /* dark green text */
  font-weight: bold;
  text-transform: uppercase;
  border: none !important;
  border-radius: 8px 8px 0 0;
  padding: 8px 16px;
  transition: all 0.3s ease;
}

/* Active tab (selected) */
.nav-tabs .nav-link.active {
  background-color: #138808 !important; /* strong green */
  color: #fff !important;
}

/* Hover effect */
.nav-tabs .nav-link:hover {
  background-color: #1fa21f !important;
  color: #fff !important;
}

/* Remove focus outline for clean UI */
.nav-tabs .nav-link:focus {
  box-shadow: none;
}


/* =========================================================
   🔹 RESPONSIVE TAB SPACING (ONLY GAP CHANGES)
   ========================================================= */

/* Tablets */
@media (min-width: 768px) {
  .nav-tabs {
    gap: 14px;
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .nav-tabs {
    gap: 24px; /* more spacing */
  }
}

/* Large Screens */
@media (min-width: 1600px) {
  .nav-tabs {
    gap: 32px; /* wide spacing */
  }
}


/* =========================================================
   🔹 TAB CONTENT STYLING
   ========================================================= */

/* Smooth fade animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Headings inside tab content */
.tab-content h4 {
  color: #138808;
  font-weight: 600;
  margin-bottom: 15px;
}


/* =========================================================
   🔹 SUBHEADER BAR
   ========================================================= */
.subheader-bar {
  background: #003366;  /* dark blue */
  color: #fff;
  margin-top:2px;
  
  
}

/* Links */
.menu-link {
  color: #fff;
  text-decoration: none;
  padding: 4px 8px;
  font-size: 14px;
}

/* 📱 Tablet */
/* 💻 Desktop only */
@media (min-width: 992px) {
  .menu-link {
    min-height:20px;
  }
}

@media (min-width: 992px) {
  .menu-link {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 14px; /* optional slight increase */
  }
}

@media (max-width: 992px) {
  .menu-link {
    font-size: 13px;
    padding: 4px 6px;
  }
}

/* 📱 Mobile */
@media (max-width: 768px) {
  .menu-link {
    font-size: 12px;
    padding: 6px 8px;
  }
}

/* 📱 Small Mobile */
@media (max-width: 480px) {
  .menu-link {
    font-size: 11px;
    padding: 6px 6px;
  }
}

/* Separator */
.sep {
  color: #fff;
  margin: 0 6px;
}

/* Active (Home) */
.active-link {
  color: #ffcc00; /* yellow */
}

/* Red highlight buttons */
.highlight-red {
  background: #ff0000;
  color: #fff !important;
  padding: 2px 6px;
  border-radius: 2px;
}

/* Green highlight */
.highlight-green {
  background: green;
  color: #fff !important;
  padding: 2px 6px;
  border-radius: 2px;
}

/* Hover effect */
.menu-link:hover {
  text-decoration: underline;
}

/* =========================================================
   🔹 DEFAULT (MOBILE - NO CHANGE)
   ========================================================= */
.menu-link {
  margin: 0 4px;
}

.sep {
  margin: 0 6px;
}

/* =========================================================
   🔹 TABLET
   ========================================================= */
@media (min-width: 768px) {
  .menu-link {
    margin: 0 8px;
  }
  .sep {
    margin: 0 8px;
  }
}

/* =========================================================
   🔹 DESKTOP (COMPUTER)
   ========================================================= */
@media (min-width: 1200px) {
  .menu-link {
    margin: 0 14px;   /* 👈 increased gap */
  }
  .sep {
    margin: 0 12px;
  }
}

/* =========================================================
   🔹 HD / LARGE SCREENS
   ========================================================= */
@media (min-width: 1600px) {
  .menu-link {
    margin: 0 20px;   /* 👈 wider spacing */
  }
  .sep {
    margin: 0 16px;
  }
}


/* =========================================================
   QUICK MENU SIDEBAR (FINAL MERGED VERSION)
========================================================= */

.quickmenu-sidebar {
  background-color: #003366;
  font-family: Arial, sans-serif;
  width: 100%;
}

.quickmenu-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.quickmenu-sidebar li {
  position: relative;
}

.quickmenu-sidebar a {
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 9px 15px 9px 12px;
  transition: all 0.3s ease;
  border-bottom: 1px solid white;
}

.quickmenu-sidebar a:hover {
  background-color: #00264d;
  color: #ffcc00;
}

/* =========================================
   SUBMENU (DESKTOP - FLYOUT)
========================================= */

.quickmenu-sidebar .submenu {
  display: none;
  position: absolute;
  top: 2px;
  left: 100%;
  background-color: #00264d;
  min-width: 180px;
  z-index: 1000;
}

.quickmenu-sidebar li:hover > .submenu {
  display: block;
}

.quickmenu-sidebar .submenu a {
  font-size: 13px;
  font-weight: normal;
  padding: 8px 20px;
}

/* =========================================
   CARET ICON (SIDEBAR)
========================================= */

.quickmenu-sidebar li:has(.submenu) > a::after {
  content: "";
  float: right;
  border: 5px solid transparent;
  border-left-color: #fff;
  margin-top: 6px;
  transition: 0.3s;
}

.quickmenu-sidebar li:has(.submenu):hover > a::after {
  border-left-color: #ffcc00;
}

/* =========================================
   TOP MENU (QMMC)
========================================= */

.qmmc {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  background: #004080;
}

.qmmc li {
  position: relative;
}

.qmmc a {
  display: block;
  padding: 3px 3px;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  min-width: 70px;
  text-align: center;
}

.qmmc a:hover {
  background: #0066cc;
}

/* Dropdown */
.qmmc li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #004080;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 200px;
  z-index: 1000;
}

.qmmc li:hover > ul {
  display: block;
}

.qmmc li ul li a {
  padding: 8px 12px;
  font-weight: normal;
  color: #fff;
}

.qmmc li ul li a:hover {
  background: #0066cc;
}

/* Caret for top menu */
.qmmc li:has(ul) > a::after {
  content: "";
  border: 5px solid transparent;
  border-top-color: #fff;
  margin-left: 6px;
  display: inline-block;
  vertical-align: middle;
}

.qmmc li:has(ul):hover > a::after {
  border-top-color: #ffcc00;
}

/* =========================================
   MOBILE SIDEBAR BEHAVIOR
========================================= */

@media (max-width: 768px) {

  .quickmenu-sidebar {
    width: 100%;
  }

  .quickmenu-sidebar .submenu {
    position: static;   /* remove flyout */
    width: 100%;
    display: none;
  }

  /* disable hover on mobile */
  .quickmenu-sidebar li:hover > .submenu {
    display: none;
  }

  .quickmenu-sidebar a {
    padding: 10px 15px;
  }

  /* active open state (JS controlled) */
  .quickmenu-sidebar li.active > .submenu {
    display: block;
  }

  .quickmenu-sidebar li.active > a::after {
    transform: rotate(90deg);
    border-left-color: #ffcc00;
  }

}

/* Mobile (default) */
.custom-sidebar {
  padding: 0;
}

/* Tablet and above */
@media (min-width: 768px) {
  .custom-sidebar {
    padding-left: 1px;
    padding-right: 0; /* optional for clean alignment */
  }
}

/* =========================================
   MOBILE SIDEBAR TOGGLE
========================================= */

/* Toggle Button */
.gvp-menu-toggle {
  width: 100%;
  background: #003366;
  color: #fff;
  border: none;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
}

/* Hide sidebar in mobile by default */
@media (max-width: 991px) {

  .quickmenu-sidebar {
    display: none;
    width: 100%;
  }

  /* When active */
  .quickmenu-sidebar.show {
    display: block;
  }
}

/* =========================================
   RESPONSIVE ACHIEVEMENTS SCROLLER
========================================= */

.achievements-content {
  height: 50vh;              /* responsive height */
  min-height: 250px;
  max-height: 400px;

  overflow: hidden;
  position: relative;

  background: #fff;
  padding: 3px;
  border: 1px solid #ddd;
}

/* scrolling container */
.achievements-scroll {
  display: flex;
  flex-direction: column;
  animation: scrollUp 80s linear infinite;
}

/* pause on hover */
.achievements-content:hover .achievements-scroll {
  animation-play-state: paused;
}

/* text */
.achievements-scroll p {
  margin: 0 0 12px;
  font-size: clamp(12px, 1.2vw, 15px); /* 🔥 responsive text */
  line-height: 1.4;
}

/* links */
.achievements-scroll a {
  text-decoration: none;
  color: #003366;
  font-weight: 500;
}

.achievements-scroll a:hover {
  color: #ff6600;
}

/* animation */
@keyframes scrollUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

/* MOBILE TUNING */
@media (max-width: 768px) {
  .achievements-content {
    height: 22vh;
  }
}

.achievements-title {
  display: block;
  width: fit-content;
  margin: 10px auto;   /* center horizontally */

  background-color: #138808; /* green */
  color: #fff;              /* white text */

  padding: 8px 20px;
  border-radius: 10px;

  font-family: 'Segoe UI', sans-serif;
  font-weight: bold;
  font-size: clamp(14px, 1.2vw, 18px);

  text-align: center;
}

/* Apply alternating colors to entire paragraph */
.achievements-scroll p:nth-child(odd) {
  color: #0000ff;
}

.achievements-scroll p:nth-child(even) {
  color: #ff0000;
}

/* Make links inherit same color */
.achievements-scroll p a {
  color: inherit;
  text-decoration: none;
}


/* =========================================
   HOW TO REACH - FULL DESIGN (FINAL)
========================================= */
.visitor-counter{
display:block;
width:max-content;

margin-left:auto;

padding:2px 4px;

background:green;
border-radius:8px;

font-size:22px;
font-weight:500;
color:white;

box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

.how-to-reach {
  margin: 25px 0;
  padding: 20px 15px;

  /* 🔥 Elegant gradient (matches your theme) */
   background: linear-gradient(135deg, #000080, #4169e1);

  border-radius: 14px;

  /* subtle glow */
  box-shadow: 0 8px 25px rgba(0, 51, 102, 0.35);
}

/* =========================================
   TITLE
========================================= */

.how-to-reach .reach-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* =========================================
   CARD DESIGN
========================================= */

.how-to-reach .card {
  border: none;
  border-radius: 12px;

  /* glass effect */
  background: rgba(255, 255, 255, 0.95);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  transition: all 0.3s ease;
  height: 100%;
}

/* Hover animation */
.how-to-reach .card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

/* Card body */
.how-to-reach .card-body {
  padding: 15px;
}

/* =========================================
   TEXT STYLING
========================================= */

.how-to-reach h6 {
  font-weight: 700;
  color: #003366;
  margin-bottom: 10px;
  font-size: 15px;
}

.how-to-reach p {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 6px;
  color: #333;
}

/* Links */
.how-to-reach a {
  color: #004aad;
  text-decoration: none;
  font-weight: 500;
  word-break: break-word;
}

.how-to-reach a:hover {
  color: #ff6600;
  text-decoration: underline;
}

/* =========================================
   MAP STYLING
========================================= */

.how-to-reach iframe {
  width: 100%;
  height: 250px;
  border-radius: 10px;
  border: none;
}

/* =========================================
   RESPONSIVE DESIGN
========================================= */

/* Tablets */
@media (max-width: 991px) {
  .how-to-reach iframe {
    height: 220px;
  }
}

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

  .how-to-reach {
    padding: 15px 10px;
  }

  .how-to-reach .reach-title {
    font-size: 18px;
  }

  .how-to-reach h6,
  .how-to-reach p {
    text-align: center;
  }

  .how-to-reach iframe {
    height: 200px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {

  .how-to-reach iframe {
    height: 180px;
  }

  .how-to-reach p {
    font-size: 12px;
  }
}


/* =========================================
   PAGE FOOTER
========================================= */

.site-footer {
  width: 100%;
  background-color: #00264d;
  color: #ffffff;
  text-align: center;
  padding: 12px 10px;
  font-size: 13px;
  border-top: 2px solid #003366;
}



/* OPTIONAL: stick footer to bottom */
html, body {
  height: 100%;
  margin: 0;
}

.page-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.page-content {
  flex: 1;
}