/* ============================================================
   P.D. PANDYA MAHILA COMMERCE COLLEGE
   Premium 2026 UI Redesign — custom.css v4.0
   Loaded AFTER styles-merged.css & style.min.css
   All rules use !important or high specificity to win.
   ============================================================ */

/* ----------------------------------------------------------
   0. GOOGLE FONTS — Fallback @import so every page loads
      them even if the <link> tag uses old fonts.
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ----------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------- */
:root {
  --clr-primary:      #1a3a6b;
  --clr-primary-dk:   #0f2447;
  --clr-secondary:    #2563eb;
  --clr-accent:       #c8952a;
  --clr-accent-lt:    #f0b93a;
  --clr-bg:           #f0f4f9;
  --clr-white:        #ffffff;
  --clr-text:         #1e293b;
  --clr-muted:        #64748b;
  --clr-border:       #dde3ef;

  --sh-sm:  0 4px 12px rgba(10,30,66,.09);
  --sh-md:  0 8px 28px rgba(10,30,66,.13);
  --sh-lg:  0 20px 50px rgba(10,30,66,.17);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 9999px;

  --tx-fast: 0.18s cubic-bezier(.4,0,.2,1);
  --tx-base: 0.28s cubic-bezier(.4,0,.2,1);
  --tx-slow: 0.42s cubic-bezier(.4,0,.2,1);

  --fh: 'Outfit', 'Inter', system-ui, sans-serif;
  --fb: 'Inter', system-ui, sans-serif;
}

/* ----------------------------------------------------------
   2. BASE — override template defaults
   ---------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--fb) !important;
  color: var(--clr-text) !important;
  background-color: var(--clr-bg) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased !important;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--fh) !important;
  color: var(--clr-primary) !important;
  font-weight: 700 !important;
}

a { text-decoration: none !important; }

p { line-height: 1.75 !important; }

img { max-width: 100% !important; }

/* ----------------------------------------------------------
   2.5 UNIVERSAL PAGE BANNER — low-specificity default so every
   inner-page header (which usually carries only
   .probootstrap-section-colored, without the homepage's extra
   .probootstrap-bg/.tab-section/.testimonial classes) gets the
   brand navy gradient instead of the template's stock orange
   (#f7aa47). More specific homepage rules further down still win.
   ---------------------------------------------------------- */
.probootstrap-section-colored {
  background: linear-gradient(150deg, var(--clr-primary) 0%, var(--clr-primary-dk) 100%) !important;
}

/* ----------------------------------------------------------
   3. TOP CONTACT BAR
   ---------------------------------------------------------- */
div.probootstrap-header-top {
  background: linear-gradient(90deg, var(--clr-primary-dk) 0%, var(--clr-primary) 100%) !important;
  padding: 9px 0 !important;
}

.probootstrap-top-quick-contact-info span {
  font-family: var(--fb) !important;
  font-size: 12.5px !important;
  color: rgba(255,255,255,.85) !important;
  margin-right: 24px !important;
}

.probootstrap-top-quick-contact-info i {
  color: var(--clr-accent) !important;
}

.probootstrap-top-social ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  gap: 4px !important;
  justify-content: flex-end !important;
}

.probootstrap-top-social ul li { margin: 0 !important; }

.probootstrap-top-social ul li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--r-full) !important;
  background: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.75) !important;
  font-size: 13px !important;
  transition: all var(--tx-fast) !important;
}

.probootstrap-top-social ul li a:hover {
  background: var(--clr-accent) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* ----------------------------------------------------------
   4. LOGO BAND
   ---------------------------------------------------------- */
.probootstrap-page-wrapper1 > .container,
body > .probootstrap-page-wrapper1 > .container {
  background: #fff !important;
  border-bottom: 2px solid var(--clr-border) !important;
  box-shadow: 0 2px 8px rgba(10,30,66,.06) !important;
  /* Break out of Bootstrap's centered, fixed-width .container so this
     white logo band spans the full viewport width like the navy bar
     above it and the nav menu below it — otherwise the page's light-gray
     background shows through on both sides on wide screens. Padding below
     is matched exactly to this project's compiled 750/970/1170px
     breakpoints (see styles-merged.css) so the logos render at the exact
     same size/position as a normal .container — an approximate calc()
     here previously over-padded the box and made the logos shrink. */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  .probootstrap-page-wrapper1 > .container,
  body > .probootstrap-page-wrapper1 > .container {
    padding-left: calc(50vw - 375px) !important;
    padding-right: calc(50vw - 375px) !important;
  }
}

@media (min-width: 992px) {
  .probootstrap-page-wrapper1 > .container,
  body > .probootstrap-page-wrapper1 > .container {
    padding-left: calc(50vw - 485px) !important;
    padding-right: calc(50vw - 485px) !important;
  }
}

@media (min-width: 1200px) {
  .probootstrap-page-wrapper1 > .container,
  body > .probootstrap-page-wrapper1 > .container {
    padding-left: calc(50vw - 585px) !important;
    padding-right: calc(50vw - 585px) !important;
  }
}

/* ----------------------------------------------------------
   5. MAIN NAVIGATION
   ---------------------------------------------------------- */
nav.navbar.probootstrap-navbar,
.navbar.navbar-default.probootstrap-navbar {
  background: #fff !important;
  border: none !important;
  border-bottom: 2px solid var(--clr-border) !important;
  box-shadow: var(--sh-sm) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  min-height: 58px !important;
}

/* Ensure nav links use new font */
.navbar.probootstrap-navbar .navbar-nav > li > a,
nav.probootstrap-navbar .nav.navbar-nav > li > a,
.probootstrap-navbar ul.nav > li > a {
  font-family: var(--fh) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--clr-primary) !important;
  padding: 19px 13px !important;
  letter-spacing: .01em !important;
  background: transparent !important;
  border-radius: 0 !important;
  position: relative !important;
  transition: color var(--tx-fast) !important;
}

/* Active item underline bar */
.probootstrap-navbar .navbar-nav > li > a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 8px !important;
  left: 13px !important;
  right: 13px !important;
  height: 2px !important;
  background: var(--clr-accent) !important;
  border-radius: var(--r-full) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform var(--tx-base) !important;
}

.probootstrap-navbar .navbar-nav > li > a:hover,
.probootstrap-navbar .navbar-nav > li.active > a,
.probootstrap-navbar .navbar-nav > li.open > a {
  color: var(--clr-secondary) !important;
  background: transparent !important;
}

.probootstrap-navbar .navbar-nav > li > a:hover::after,
.probootstrap-navbar .navbar-nav > li.active > a::after {
  transform: scaleX(1) !important;
}

/* Center the nav items */
.probootstrap-navbar #navbar-collapse {
  text-align: center !important;
}

.probootstrap-navbar .navbar-nav.navbar-right {
  float: none !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  margin: 0 !important;
}

/* ----------------------------------------------------------
   6. DROPDOWN MENUS
   ---------------------------------------------------------- */
.probootstrap-navbar .dropdown-menu,
nav.probootstrap-navbar ul.dropdown-menu {
  background: #fff !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-lg) !important;
  padding: 10px 0 !important;
  min-width: 210px !important;
  margin-top: 0 !important;
  left: 0 !important;
  /* Override display:none from template then animate */
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(12px) !important;
  transition: opacity var(--tx-base), transform var(--tx-base), visibility 0s var(--tx-base) !important;
  display: block !important;          /* let CSS control via opacity/visibility */
  pointer-events: none !important;
}

.probootstrap-navbar .dropdown:hover > .dropdown-menu,
.probootstrap-navbar .open > .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  transition: opacity var(--tx-base), transform var(--tx-base), visibility 0s 0s !important;
  pointer-events: auto !important;
}

/* Dropdown items */
.probootstrap-navbar .dropdown-menu > li > a {
  font-family: var(--fb) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--clr-text) !important;
  padding: 11px 22px !important;
  display: flex !important;
  align-items: center !important;
  border-left: 3px solid transparent !important;
  transition: all var(--tx-fast) !important;
  background: transparent !important;
  white-space: nowrap !important;
}

.probootstrap-navbar .dropdown-menu > li + li {
  border-top: 1px solid rgba(0,0,0,.04) !important;
}

.probootstrap-navbar .dropdown-menu > li > a:hover,
.probootstrap-navbar .dropdown-menu > li > a:focus {
  background: rgba(37,99,235,.06) !important;
  color: var(--clr-secondary) !important;
  border-left-color: var(--clr-secondary) !important;
  padding-left: 26px !important;
}

/* Sub-menu (nested) — back to the original right-side flyout style. */
.probootstrap-navbar .dropdown-submenu {
  position: relative !important;
}

.probootstrap-navbar .dropdown-submenu > .dropdown-menu {
  top: -10px !important;
  left: 100% !important;
  margin-left: 2px !important;
  border-radius: var(--r-md) !important;
}

.probootstrap-navbar .dropdown-submenu:hover > .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Arrow on submenu trigger */
.probootstrap-navbar .dropdown-submenu > a::after {
  content: '›' !important;
  margin-left: auto !important;
  padding-left: 10px !important;
  font-size: 17px !important;
  opacity: 0.45 !important;
}

/* Library → Resources is the one submenu positioned far enough right
   that a right-side flyout runs past the edge of the browser window
   (and since the page clips horizontal overflow, that content became
   unreachable). Flip just this one to open to the LEFT instead — every
   other nested submenu keeps the normal right-side flyout above. */
.probootstrap-navbar .dropdown-submenu:has(> .dropdown-menu > li > a[href="libprint.php"]) > .dropdown-menu {
  left: auto !important;
  right: 100% !important;
  margin-left: 0 !important;
  margin-right: 2px !important;
}

.probootstrap-navbar .dropdown-submenu:has(> .dropdown-menu > li > a[href="libprint.php"]) > a::after {
  content: '‹' !important;
}

/* ----------------------------------------------------------
   7. HERO / FLEXSLIDER
   ---------------------------------------------------------- */
section.flexslider {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Fixed height from style.min.css = 700px — we keep it */
section.flexslider .slides > li {
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
}

/* Richer gradient overlay — override the rgba(0,0,0,.3) from template */
section.flexslider .slides > li.overlay::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(15,36,71,.82) 0%,
    rgba(26,58,107,.62) 50%,
    rgba(37,99,235,.22) 100%
  ) !important;
  z-index: 1 !important;
}

section.flexslider .slides > li .container {
  position: relative !important;
  z-index: 2 !important;
}

.probootstrap-slider-text {
  /* Override the margin-top: 300px from style.min.css */
  margin-top: 0 !important;
  padding: 220px 0 80px !important;
  text-align: center !important;
}

.probootstrap-slider-text h1.probootstrap-heading,
.probootstrap-slider-text .probootstrap-heading {
  font-family: var(--fh) !important;
  font-size: clamp(26px,5vw,58px) !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-shadow: 0 4px 28px rgba(0,0,0,.4) !important;
  letter-spacing: -.03em !important;
  line-height: 1.15 !important;
  margin: 0 auto !important;
  max-width: 800px !important;
}

/* Slider dots */
.flex-control-paging li a {
  background: rgba(255,255,255,.3) !important;
  border-radius: var(--r-full) !important;
  box-shadow: none !important;
  transition: all var(--tx-base) !important;
}

.flex-control-paging li a.flex-active {
  background: var(--clr-accent) !important;
  width: 26px !important;
  border-radius: 5px !important;
}

/* ----------------------------------------------------------
   8. HIGHLIGHTS / TABS SECTION
   ---------------------------------------------------------- */
/* The section that holds the tab pills */
.probootstrap-tab-section.probootstrap-section-colored {
  background: linear-gradient(150deg, var(--clr-primary) 0%, var(--clr-primary-dk) 100%) !important;
  padding: 50px 0 20px !important;
}

/* Override the ::before dark overlay from style.min.css */
.probootstrap-tab-section.probootstrap-section-colored::before,
.probootstrap-section-colored::before {
  display: none !important;
}

.probootstrap-tab-section h2.mb0 {
  font-family: var(--fh) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  color: #fff !important;
}

/* Tab pills */
.probootstrap-tabs.nav-tabs {
  border-bottom: none !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 20px !important;
}

.probootstrap-tabs.nav-tabs > li { border: none !important; }

.probootstrap-tabs.nav-tabs > li > a,
.probootstrap-tabs.nav-tabs > li > a:hover {
  font-family: var(--fh) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.82) !important;
  background: rgba(255,255,255,.12) !important;
  border: 1.5px solid rgba(255,255,255,.22) !important;
  border-radius: var(--r-full) !important;
  padding: 10px 28px !important;
  transition: all var(--tx-base) !important;
  margin: 0 !important;
}

.probootstrap-tabs.nav-tabs > li.active > a,
.probootstrap-tabs.nav-tabs > li.active > a:focus,
.probootstrap-tabs.nav-tabs > li.active > a:hover {
  background: var(--clr-accent) !important;
  border-color: var(--clr-accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(200,149,42,.38) !important;
}

/* Content section below tabs */
section.probootstrap-section {
  background-color: #fff !important;
}

/* ----------------------------------------------------------
   9. NOTICE CARDS (Owl carousel in #featured-news)
   ---------------------------------------------------------- */
#featured-news .owl-carousel .item {
  background: #fff !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--r-md) !important;
  padding: 28px 24px 22px !important;
  /* Fixed (not auto) height — with auto, each card sized to its own text
     length, so the row of 3 cards looked uneven/misaligned. A fixed
     height plus the existing line-clamp on the paragraph keeps every
     card in the row identical. */
  height: 260px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: var(--sh-sm) !important;
  margin: 6px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all var(--tx-base) !important;
}

/* Accent left bar */
#featured-news .owl-carousel .item::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 4px !important; height: 100% !important;
  background: linear-gradient(180deg, var(--clr-secondary), var(--clr-accent)) !important;
}

#featured-news .owl-carousel .item:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--sh-lg) !important;
}

.probootstrap-meta {
  font-family: var(--fb) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--clr-muted) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
}

.probootstrap-meta i { color: var(--clr-accent) !important; }

#featured-news .item h3 {
  font-family: var(--fh) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--clr-primary) !important;
  line-height: 1.35 !important;
  margin-bottom: 10px !important;
}

#featured-news .item p {
  font-family: var(--fb) !important;
  font-size: 13.5px !important;
  color: var(--clr-muted) !important;
  line-height: 1.65 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ----------------------------------------------------------
   10. CONTENT CARDS — .probootstrap-featured-news-box
   Used by the homepage "Upcoming Events" carousel AND by many
   interior list pages (activities, committees, notices, etc.)
   Left unscoped (no #id prefix) so every occurrence gets the
   same modern card treatment instead of only the homepage one.
   ---------------------------------------------------------- */
.probootstrap-featured-news-box {
  display: block !important;
  background: #fff !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  border: 1px solid var(--clr-border) !important;
  box-shadow: var(--sh-sm) !important;
  transition: all var(--tx-base) !important;
  margin: 6px 6px 24px !important;
  color: inherit !important;
}

.probootstrap-featured-news-box:hover {
  transform: translateY(-7px) !important;
  box-shadow: var(--sh-lg) !important;
}

.probootstrap-featured-news-box .probootstrap-media {
  margin: 0 !important;
  overflow: hidden !important;
  height: 190px !important;
}

.probootstrap-featured-news-box .probootstrap-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform var(--tx-slow) !important;
}

.probootstrap-featured-news-box:hover .probootstrap-media img {
  transform: scale(1.07) !important;
}

.probootstrap-featured-news-box .probootstrap-text {
  padding: 18px !important;
}

.probootstrap-featured-news-box .probootstrap-text h3 {
  font-family: var(--fh) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--clr-primary) !important;
  margin-bottom: 8px !important;
}

.probootstrap-featured-news-box .probootstrap-text p {
  font-size: 13px !important;
  color: var(--clr-muted) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.probootstrap-date, .probootstrap-location {
  font-family: var(--fb) !important;
  font-size: 12px !important;
  color: var(--clr-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-right: 10px !important;
}

.probootstrap-date i, .probootstrap-location i {
  color: var(--clr-accent) !important;
}

/* ----------------------------------------------------------
   11. TESTIMONIALS SECTION
   ---------------------------------------------------------- */
/*
  style.min.css sets:
    .probootstrap-testimonial:before { background:rgba(0,0,0,.7)!important }
  We need to beat this. Use same selector + our own ::before override.
*/
.probootstrap-testimonial {
  background: linear-gradient(150deg, var(--clr-primary) 0%, var(--clr-primary-dk) 100%) !important;
  padding: 80px 0 !important;
  position: relative !important;
}

/* Kill the dark bg-overlay that style.min adds via :before */
.probootstrap-testimonial::before {
  background: transparent !important;
  display: none !important;
}

.probootstrap-testimonial .section-heading h2 {
  color: #fff !important;
  font-family: var(--fh) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
}

/* The testimonial card — a solid white card reads as a proper "card"
   against the navy section; the previous 7%-opacity white overlay was
   nearly invisible (navy-on-navy) and didn't look intentional. */
div.probootstrap-testimony-wrap {
  background: #ffffff !important;
  border: none !important;
  border-radius: var(--r-lg) !important;
  padding: 40px 32px !important;
  text-align: center !important;
  margin: 0 auto !important;
  max-width: 700px !important;
  box-shadow: var(--sh-lg) !important;
  transition: all var(--tx-base) !important;
}

div.probootstrap-testimony-wrap:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 28px 60px rgba(0,0,0,.3) !important;
}

/* Profile figure — FIXED: constrain with explicit size */
div.probootstrap-testimony-wrap figure {
  display: block !important;
  width: 90px !important;
  height: 90px !important;
  margin: 0 auto 20px !important;
  border-radius: var(--r-full) !important;
  border: 3px solid var(--clr-accent) !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 6px rgba(200,149,42,.18) !important;
  padding: 0 !important;
}

div.probootstrap-testimony-wrap figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: var(--r-full) !important;
}

div.probootstrap-testimony-wrap blockquote.quote {
  font-family: var(--fb) !important;
  font-size: 15px !important;
  color: var(--clr-text) !important;
  font-style: italic !important;
  line-height: 1.75 !important;
  border: none !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

div.probootstrap-testimony-wrap cite.author {
  display: block !important;
  margin-top: 18px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-family: var(--fh) !important;
  color: var(--clr-accent) !important;
}

/* ----------------------------------------------------------
   12. BUTTONS
   ---------------------------------------------------------- */
a.btn, button.btn, .btn {
  font-family: var(--fh) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 11px 26px !important;
  border-radius: var(--r-sm) !important;
  transition: all var(--tx-base) !important;
  letter-spacing: .01em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
}

a.btn-primary, button.btn-primary, .btn-primary {
  background: linear-gradient(135deg, var(--clr-secondary), var(--clr-primary)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(37,99,235,.28) !important;
}

a.btn-primary:hover, button.btn-primary:hover, .btn-primary:hover {
  background: linear-gradient(135deg, var(--clr-accent), #9a720f) !important;
  box-shadow: 0 8px 24px rgba(200,149,42,.38) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}

/* ----------------------------------------------------------
   13. FOOTER
   ---------------------------------------------------------- */
footer.probootstrap-footer {
  background: var(--clr-primary-dk) !important;
  background-image: none !important;
  padding: 64px 0 0 !important;
  position: relative !important;
  border-top: none !important;
}

footer.probootstrap-footer::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--clr-secondary), var(--clr-accent), var(--clr-secondary)) !important;
}

.probootstrap-footer-widget {
  padding-bottom: 32px !important;
}

.probootstrap-footer-widget img {
  /* images/rlogo.png is already a full-color logo with light text
     designed for a dark background — brightness(0) invert(1) was
     flattening it into a plain white silhouette, hiding the real logo. */
  max-width: 160px !important;
}

.probootstrap-footer-widget h3 {
  font-family: var(--fh) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  margin-bottom: 18px !important;
  padding-bottom: 10px !important;
  position: relative !important;
  border-bottom: none !important;
}

.probootstrap-footer-widget h3::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important;
  width: 32px !important; height: 2px !important;
  background: var(--clr-accent) !important;
  border-radius: var(--r-full) !important;
}

.probootstrap-footer-widget ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.probootstrap-footer-widget ul li { margin-bottom: 9px !important; }

.probootstrap-footer-widget ul li a {
  font-family: var(--fb) !important;
  font-size: 13.5px !important;
  color: rgba(255,255,255,.65) !important;
  transition: all var(--tx-fast) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.probootstrap-footer-widget ul li a:hover {
  color: #fff !important;
  padding-left: 4px !important;
}

.probootstrap-contact-info {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.probootstrap-contact-info li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  font-family: var(--fb) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

.probootstrap-contact-info li i {
  color: var(--clr-accent) !important;
  font-size: 16px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

.probootstrap-contact-info li span {
  color: rgba(255,255,255,.72) !important;
}

/* Footer social icons */
ul.probootstrap-footer-social {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

ul.probootstrap-footer-social li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: var(--r-full) !important;
  color: rgba(255,255,255,.7) !important;
  font-size: 14px !important;
  transition: all var(--tx-base) !important;
}

ul.probootstrap-footer-social li a:hover {
  background: var(--clr-accent) !important;
  border-color: var(--clr-accent) !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
}

/* Map iframe */
.probootstrap-footer-widget iframe {
  border-radius: var(--r-sm) !important;
  min-height: 190px !important;
}

/* Copyright bar */
.probootstrap-copyright {
  background: rgba(0,0,0,.22) !important;
  margin-top: 16px !important;
  padding: 18px 0 !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
}

.probootstrap-copyright p {
  font-family: var(--fb) !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.5) !important;
  margin: 0 !important;
}

.js-backtotop {
  font-family: var(--fb) !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.5) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color var(--tx-fast) !important;
}

.js-backtotop:hover { color: var(--clr-accent) !important; }

/* ----------------------------------------------------------
   14. TABLES
   ---------------------------------------------------------- */
.table-responsive {
  border-radius: var(--r-sm) !important;
  overflow: hidden !important;
  border: 1px solid var(--clr-border) !important;
  box-shadow: var(--sh-sm) !important;
}

.table { margin-bottom: 0 !important; }

.table thead tr th {
  background: var(--clr-primary) !important;
  color: #fff !important;
  font-family: var(--fh) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  padding: 15px 18px !important;
  border: none !important;
}

.table tbody tr td {
  font-family: var(--fb) !important;
  font-size: 14px !important;
  color: var(--clr-text) !important;
  padding: 13px 18px !important;
  border-bottom: 1px solid var(--clr-border) !important;
  vertical-align: middle !important;
}

.table-hover tbody tr:hover {
  background: rgba(37,99,235,.04) !important;
}

.table-striped tbody tr:nth-of-type(even) {
  background: rgba(240,244,249,.7) !important;
}

/* ----------------------------------------------------------
   15. SECTION HEADINGS (Inner pages)
   ---------------------------------------------------------- */
.section-heading h2, .section-heading h1 {
  font-family: var(--fh) !important;
  font-weight: 800 !important;
  position: relative !important;
  margin-bottom: 8px !important;
}

/* On colored sections (navy bg) invert to white */
.probootstrap-section-colored .section-heading h1,
.probootstrap-section-colored .section-heading h2 {
  color: #fff !important;
}

/* Note: the plain "inner page banner" background is now handled by the
   low-specificity .probootstrap-section-colored fallback (see section 2.5)
   so it no longer overrides the testimonial/highlights sections' own
   padding via a higher-specificity 3-class selector. */

/* ----------------------------------------------------------
   16. FORMS
   ---------------------------------------------------------- */
.form-control {
  font-family: var(--fb) !important;
  font-size: 14px !important;
  color: var(--clr-text) !important;
  background: #fff !important;
  border: 1.5px solid var(--clr-border) !important;
  border-radius: var(--r-sm) !important;
  padding: 11px 15px !important;
  height: auto !important;
  box-shadow: none !important;
  transition: border-color var(--tx-fast), box-shadow var(--tx-fast) !important;
}

.form-control:focus {
  border-color: var(--clr-secondary) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.1) !important;
  outline: none !important;
  background: #fff !important;
}

label {
  font-family: var(--fh) !important;
  font-weight: 600 !important;
  color: var(--clr-primary) !important;
  font-size: 13.5px !important;
  margin-bottom: 5px !important;
}

/* ----------------------------------------------------------
   17. OWL CAROUSEL — general improvements
   ---------------------------------------------------------- */
/* Pull the carousel margin down from 100px (style.min) */
.owl-carousel { margin-bottom: 40px !important; }

/* ----------------------------------------------------------
   18. GENERAL SECTIONS
   ---------------------------------------------------------- */
section.probootstrap-section {
  padding: 72px 0 !important;
}

/* Alternating white/light bg — excludes colored/banner sections so this
   never clobbers their navy background (it has higher specificity than
   .probootstrap-section-colored/.probootstrap-testimonial/.probootstrap-tab-section
   because of the element+pseudo-class, which was silently turning those
   sections' white heading text invisible against a light background). */
section.probootstrap-section:not(.probootstrap-section-colored):nth-of-type(even) {
  background-color: var(--clr-bg) !important;
}

/* ----------------------------------------------------------
   19. MOBILE NAV
   ---------------------------------------------------------- */
.navbar-toggle {
  border: 1.5px solid var(--clr-border) !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 10px !important;
  background: transparent !important;
  transition: all var(--tx-fast) !important;
}

.navbar-toggle:hover {
  background: var(--clr-primary) !important;
  border-color: var(--clr-primary) !important;
}

.navbar-toggle .icon-bar {
  background: var(--clr-primary) !important;
  border-radius: 2px !important;
  height: 2px !important;
  display: block !important;
  width: 22px !important;
  margin: 4px 0 !important;
}

.navbar-toggle:hover .icon-bar {
  background: #fff !important;
}

/* Logo band (MET seal / college name / campus badge) — header.php and
   index.php force this row inline to display:flex with no wrap, so on
   mobile the three logos never stack and get squeezed unreadably small.
   !important is required to beat the inline style (only !important can). */
@media (max-width: 767px) {
  [style="display: flex; align-items: center; justify-content: center;"] {
    flex-direction: column !important;
  }
}

@media (max-width: 991px) {
  .probootstrap-navbar .navbar-nav.navbar-right {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    float: none !important;
  }

  .probootstrap-navbar .navbar-nav > li > a {
    padding: 12px 20px !important;
    border-bottom: 1px solid var(--clr-border) !important;
  }

  .probootstrap-navbar .dropdown-menu,
  nav.probootstrap-navbar ul.dropdown-menu {
    position: relative !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(26,58,107,.05) !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    display: none !important;
  }

  .probootstrap-navbar .open > .dropdown-menu {
    display: block !important;
  }

  .probootstrap-navbar .dropdown-submenu > .dropdown-menu {
    left: 0 !important;
    margin-left: 14px !important;
    top: auto !important;
  }
}

/* ----------------------------------------------------------
   20. INNER-PAGE CARDS (Staff, Faculty, etc.)
   ---------------------------------------------------------- */
.probootstrap-teacher {
  background: #fff !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  box-shadow: var(--sh-sm) !important;
  transition: all var(--tx-base) !important;
  margin-bottom: 24px !important;
}

.probootstrap-teacher:hover {
  transform: translateY(-7px) !important;
  box-shadow: var(--sh-lg) !important;
}

.probootstrap-teacher .text h3 {
  font-family: var(--fh) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--clr-primary) !important;
}

/* Staff photo + Name/Designation/Qualification grid variant */
.probootstrap-teacher figure.media {
  margin: 0 auto 16px !important;
  text-align: center !important;
}

.probootstrap-teacher .text .row > div {
  font-family: var(--fb) !important;
  font-size: 13px !important;
  color: var(--clr-text) !important;
  padding: 4px 12px !important;
}

.probootstrap-teacher .text .row > div b {
  color: var(--clr-primary) !important;
  font-family: var(--fh) !important;
  font-weight: 600 !important;
}

/* ----------------------------------------------------------
   20b. CONTACT PAGE — SIDEBAR CARD & MAP STRIP
   ---------------------------------------------------------- */
.probootstrap-sidebar-inner {
  background: #fff !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-sm) !important;
  padding: 32px !important;
}

.probootstrap-sidebar-inner h3 {
  font-family: var(--fh) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--clr-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.probootstrap-sidebar-inner p a {
  color: var(--clr-text) !important;
  font-weight: 600 !important;
}

#probootstrap-content.probootstrap-sidebar-inner {
  background: var(--clr-bg) !important;
  box-shadow: none !important;
}

.probootstrap-cta {
  background: linear-gradient(150deg, var(--clr-primary) 0%, var(--clr-primary-dk) 100%) !important;
  padding: 40px 0 !important;
}

.probootstrap-cta iframe {
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-md) !important;
}

/* ----------------------------------------------------------
   20c. PHOTO / VIDEO GALLERY GRID
   (visual polish only — width/float/position left untouched
   since the Isotope masonry script depends on them)
   ---------------------------------------------------------- */
.probootstrap-gallery figure.grid-item {
  border-radius: var(--r-sm) !important;
  overflow: hidden !important;
  box-shadow: var(--sh-sm) !important;
  transition: box-shadow var(--tx-base), transform var(--tx-base) !important;
}

.probootstrap-gallery figure.grid-item:hover {
  box-shadow: var(--sh-lg) !important;
  transform: translateY(-4px) !important;
}

.probootstrap-gallery figure.grid-item img {
  transition: transform var(--tx-slow) !important;
  display: block !important;
}

.probootstrap-gallery figure.grid-item:hover img {
  transform: scale(1.06) !important;
}

/* ----------------------------------------------------------
   20d. GRACEFUL BROKEN-IMAGE FALLBACK
   Several database-driven photos (staff, testimonials, gallery,
   events) point to files missing from disk. Instead of the
   browser's default broken-icon + overlapping alt-text, show a
   plain neutral placeholder. Only affects images that actually
   fail to load — successfully-loaded photos are unaffected.
   ---------------------------------------------------------- */
.probootstrap-teacher figure img,
.probootstrap-testimony-wrap figure img,
.probootstrap-gallery img,
.probootstrap-media img {
  background-color: var(--clr-bg) !important;
  color: transparent !important;
  font-size: 0 !important;
}

/* ----------------------------------------------------------
   21. ACCESSIBILITY
   ---------------------------------------------------------- */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--clr-accent) !important;
  outline-offset: 3px !important;
}

/* ----------------------------------------------------------
   22. PRINT
   ---------------------------------------------------------- */
@media print {
  .probootstrap-header-top,
  .probootstrap-navbar,
  footer.probootstrap-footer,
  .btn { display: none !important; }
}