:root {
   --red: #d20f0c;
   --dark-red: #d20f0c;
   --navy: #582b84;
   --dark: #111;
   --white: #fff;
   --light-gray: #f5f5f5;
   --gray: #666;
   --border: #e0e0e0;
   --gold: #ffed00;
 }

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

html {
   scroll-behavior: smooth;
   height: 100%;
   width: 100%;
 }

body {
   margin: 0;
   padding: 0;
   font-family: 'Poppins', sans-serif;
   color: #333;
   overflow-x: hidden;
   height: 100%;
   width: 100%;
   min-height: 100vh;
 }

 /* ===== TOP BAR ===== */
 /* ============================================================
   topbar.css  —  Single-row: red ticker LEFT | purple portals RIGHT
   Mobile: portals collapse into a toggle → full-width dropdown
   ============================================================ */

 /* ── Wrapper: one solid row, never wraps ─────────────────── */
 .topbar-bar {
   display: flex;
   flex-direction: row;
   align-items: stretch;
   width: 100%;
   height: 36px;
   overflow: visible;
   /* let dropdown hang below */
   position: relative;
   z-index: 1100;
   flex-wrap: nowrap;
   /* NEVER wrap — ticker always left */
 }

 /* ══════════════════════════════════════════════════════════
   LEFT — Red ticker (takes all remaining space)
══════════════════════════════════════════════════════════ */
 .tb-left {
   display: flex;
   align-items: center;
   background: #d20f0c;
   flex: 1 1 0%;
   /* grow to fill space */
   min-width: 0;
   overflow: hidden;
   height: 36px;
 }

 .tb-news-badge {
   flex-shrink: 0;
   background: rgba(0, 0, 0, 0.28);
   color: #fff;
   font-family: 'Poppins', sans-serif;
   font-size: 0.67rem;
   font-weight: 700;
   letter-spacing: 0.8px;
   text-transform: uppercase;
   padding: 0 11px;
   height: 100%;
   display: flex;
   align-items: center;
   gap: 5px;
   white-space: nowrap;
   border-right: 1px solid rgba(255, 255, 255, 0.25);
   margin-right: 10px;
 }

 .tb-ticker-track {
   flex: 1 1 0%;
   min-width: 0;
   overflow: hidden;
   height: 100%;
   display: flex;
   align-items: center;
 }

 .tb-ticker-inner {
   display: inline-flex;
   white-space: nowrap;
   animation: tbScroll 40s linear infinite;
 }

 .tb-ticker-track:hover .tb-ticker-inner {
   animation-play-state: paused;
 }

.tb-ticker-inner span, .tb-ticker-inner span a {
   font-family: 'Poppins', sans-serif;
   font-size: 0.7rem;
   color: #fff;
   padding-right: 56px;
   display: inline-block;
   white-space: nowrap;
   text-decoration: none;
 }

 .tb-ticker-inner span a {
   color: #fff;
   transition: color 0.2s ease;
 }

 .tb-ticker-inner span a:hover {
   color: var(--gold);
 }

 @keyframes tbScroll {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(-50%);
   }
 }

 /* ══════════════════════════════════════════════════════════
   RIGHT — Purple portals (fixed width, never moves)
══════════════════════════════════════════════════════════ */
 .tb-right {
   display: flex;
   align-items: stretch;
   background: #582b84;
   flex-shrink: 0;
   flex-grow: 0;
   height: 36px;
   position: relative;
   /* anchor for dropdown */
 }

 /* ── Desktop: all 5 links in a horizontal row ─────────────── */
 .tb-portals {
   display: flex;
   align-items: stretch;
   height: 36px;
 }

 .tb-portals a {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-family: 'Poppins', sans-serif;
   font-size: 0.67rem;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.9);
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 0.3px;
   padding: 0 11px;
   height: 36px;
   border-left: 1px solid rgba(255, 255, 255, 0.2);
   white-space: nowrap;
   transition: background 0.15s, color 0.15s;
 }

 .tb-portals a:first-child {
   border-left: none;
 }

 .tb-portals a i {
   font-size: 0.58rem;
   opacity: 0.85;
 }

 .tb-portals a:hover {
   background: rgba(255, 255, 255, 0.13);
   color: #ffed00;
 }

 /* Toggle button — hidden on desktop */
 .tb-toggle-btn {
   display: none;
 }

 /* ══════════════════════════════════════════════════════════
   TABLET ≤ 900px — shrink link text slightly
══════════════════════════════════════════════════════════ */
 @media (max-width: 900px) {
   .tb-portals a {
     font-size: 0.6rem;
     padding: 0 8px;
     gap: 3px;
   }

   .tb-news-badge {
     padding: 0 9px;
     font-size: 0.62rem;
   }
 }

 /* ══════════════════════════════════════════════════════════
   MOBILE ≤ 640px
   • Ticker stays LEFT in the same row (never moves)
   • All 5 portal links hidden behind toggle button
   • Toggle button sits on the RIGHT of the bar
   • Clicking drops a full-width panel BELOW the bar
══════════════════════════════════════════════════════════ */
 @media (max-width: 640px) {

   /* Bar stays as one row — no wrapping */
   .topbar-bar {
     height: 36px;
     overflow: visible;
   }

   /* Ticker: fills remaining space, no diagonal cut */
   .tb-left {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
   }

   /* Right zone: only the toggle button */
   .tb-right {
     flex: 0 0 auto;
     background: #582b84;
     height: 36px;
   }

   /* HIDE portal links — become a dropdown panel */
   .tb-portals {
     display: none;
     /* hidden by default */
     position: fixed;
     /* fixed so it always anchors to viewport */
     top: 36px;
     /* right below the bar */
     left: 0;
     right: 0;
     width: 100%;
     height: auto;
     flex-wrap: wrap;
     background: #3a1a6e;
     z-index: 9999;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
     border-top: 2px solid #ffed00;
   }

   /* When toggled open, show as flex */
   .tb-portals.tb-open {
     display: flex;
   }

   /* Each link: 50% width so 2 per row, last one centred */
   .tb-portals a {
     flex: 0 0 50%;
     height: 42px;
     border-left: none;
     border-bottom: 1px solid rgba(255, 255, 255, 0.12);
     border-right: 1px solid rgba(255, 255, 255, 0.12);
     justify-content: center;
     font-size: 0.72rem;
     padding: 0 8px;
     text-align: center;
   }

   /* 5th link spans full width */
   .tb-portals a:nth-child(5) {
     flex: 0 0 100%;
     border-right: none;
   }

   /* Show toggle button */
   .tb-toggle-btn {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     height: 36px;
     padding: 0 13px;
     background: rgba(255, 255, 255, 0.1);
     border: none;
     border-left: 1px solid rgba(255, 255, 255, 0.25);
     color: #fff;
     font-family: 'Poppins', sans-serif;
     font-size: 0.65rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.4px;
     cursor: pointer;
     white-space: nowrap;
     transition: background 0.15s;
     flex-shrink: 0;
   }

   .tb-toggle-btn:hover {
     background: rgba(255, 255, 255, 0.2);
   }

   .tb-toggle-btn i {
     font-size: 0.62rem;
   }

   /* Shrink ticker text */
   .tb-ticker-inner span {
     font-size: 0.65rem;
     padding-right: 30px;
   }

   .tb-news-badge {
     font-size: 0.58rem;
     padding: 0 7px;
     margin-right: 6px;
   }
 }

 /* ══════════════════════════════════════════════════════════
   VERY SMALL ≤ 380px
══════════════════════════════════════════════════════════ */
 @media (max-width: 380px) {
   .tb-news-badge {
     display: none;
   }

   .tb-portals a {
     flex: 0 0 100%;
     border-right: none;
   }

   .tb-portals a:nth-child(5) {
     flex: 0 0 100%;
   }
 }

 .top-bar {
   background: var(--navy);
   color: #ccc;
   font-size: 12px;
   padding: 6px 0;
 }

 .top-bar .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: 1280px;
   margin: 0 auto;
   padding: 0 20px;
 }

 .top-bar a {
   color: #ccc;
   text-decoration: none;
   margin-left: 16px;
 }

 .top-bar a:hover {
   color: var(--gold);
 }

 .top-bar-left span {
   margin-right: 16px;
 }

 .top-bar-left span i {
   margin-right: 4px;
   color: var(--gold);
 }

 /* ===== HEADER ===== */
 /* ============================================================
   header-brand.css
   Row 1 : white bg — images.png (full header banner) + social icons
   Row 2 : purple bg — compact nav bar
   ============================================================ */

 /* ── Kill old header-inner ───────────────────────────────── */
 #main-header {
   position: sticky;
   top: 0;
   z-index: 1000;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
   background: transparent;
   padding: 0;
 }

 #main-header .header-inner {
   display: none !important;
 }

 /* ══════════════════════════════════════════════════════════
   ROW 1 — White brand strip
══════════════════════════════════════════════════════════ */
 .hdr-brand-row {
   background: #fff;
   width: 100%;
   border-bottom: 2px solid #e0d0f0;
 }

 .hdr-brand-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   max-width: 100%;
   padding: 0 24px 0 0;
   height: 110px;
   gap: 0;
 }

 /* ── Banner image (logo + college name) ──────────────────── */
 .hdr-img-link {
   display: flex;
   align-items: center;
   text-decoration: none;
   flex: 1 1 auto;
   min-width: 0;
   height: 100%;
   overflow: hidden;
 }

 .hdr-banner-img {
   height: 100%;
   /* fills full row height */
   width: auto;
   max-width: 100%;
   object-fit: contain;
   object-position: left center;
   display: block;
 }

 /* ── Social icons — far right ────────────────────────────── */
 .hdr-socials {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
   padding-left: 16px;
 }

 .hdr-social {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 6px;
   font-size: 0.85rem;
   color: #fff;
   text-decoration: none;
   transition: transform 0.18s, box-shadow 0.18s;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 }

 .hdr-social:hover {
   transform: translateY(-3px);
   box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2);
 }

 .hdr-fb {
   background: #1877f2;
 }

 .hdr-tw {
   background: #000;
 }

 .hdr-li {
   background: #0a66c2;
 }

 .hdr-yt {
   background: #ff0000;
 }

 .hdr-ig {
   background: radial-gradient(circle at 30% 110%,
       #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
 }

 /* ══════════════════════════════════════════════════════════
   ROW 2 — Purple compact nav bar
══════════════════════════════════════════════════════════ */
 .hdr-nav-row {
   background: #582b84;
   width: 100%;
   position: relative;
 }

 .hdr-nav-inner {
   max-width: 1280px;
   margin: 0 auto;
   padding: 0 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 /* Nav links */
 .hdr-nav-inner #main-nav {
   display: flex;
   align-items: center;
   gap: 0;
   background: transparent;
   flex: 1 1 auto;
 }

 .hdr-nav-inner .nav-item {
   position: relative;
 }

 .hdr-nav-inner .nav-link {
   display: block;
   padding: 11px 14px;
   font-family: 'Poppins', sans-serif;
   font-size: 0.78rem;
   font-weight: 600;
   color: #fff;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   white-space: nowrap;
   transition: background 0.15s, color 0.15s;
   border-right: 1px solid rgba(255, 255, 255, 0.12);
 }

 .hdr-nav-inner .nav-link:hover,
 .hdr-nav-inner .nav-item:hover>.nav-link {
   background: rgba(255, 255, 255, 0.12);
   color: #ffed00;
 }

 /* Dropdown */
 .hdr-nav-inner .dropdown {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   background: #fff;
   min-width: 220px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
   border-top: 3px solid #d20f0c;
   z-index: 9999;
 }

 .hdr-nav-inner .nav-item:hover .dropdown {
   display: block;
 }

 .hdr-nav-inner .dropdown a {
   display: block;
   padding: 9px 18px;
   font-family: 'Poppins', sans-serif;
   font-size: 0.78rem;
   color: #333;
   text-decoration: none;
   border-bottom: 1px solid #f0f0f0;
   transition: all 0.15s;
 }

 .hdr-nav-inner .dropdown a:hover {
   background: #f5eeff;
   color: #582b84;
   padding-left: 24px;
 }

 /* Right group — ALWAYS on far right */
 .hdr-nav-right {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-shrink: 0;
   margin-left: auto;
   /* pushes to far right even when nav is hidden */
 }

 .hdr-nav-inner .header-btn {
   background: #d20f0c;
   color: #fff;
   padding: 7px 18px;
   border-radius: 4px;
   font-family: 'Poppins', sans-serif;
   font-size: 0.75rem;
   font-weight: 700;
   text-decoration: none;
   white-space: nowrap;
   transition: background 0.18s;
   flex-shrink: 0;
 }

 .hdr-nav-inner .header-btn:hover {
   background: #a80d0a;
 }

 .hdr-nav-inner .hamburger {
   display: none;
   flex-direction: column;
   gap: 5px;
   cursor: pointer;
   padding: 4px;
 }

 .hdr-nav-inner .hamburger span {
   width: 24px;
   height: 2px;
   background: #fff;
   border-radius: 2px;
   display: block;
 }

 /* ══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet ≤ 960px
══════════════════════════════════════════════════════════ */
 @media (max-width: 960px) {
   .hdr-brand-inner {
     height: 88px;
     padding-right: 16px;
   }

   .hdr-social {
     width: 30px;
     height: 30px;
     font-size: 0.75rem;
   }

   .hdr-socials {
     gap: 6px;
     padding-left: 12px;
   }

   .hdr-nav-inner .nav-link {
     font-size: 0.72rem;
     padding: 11px 10px;
   }
 }

 /* ══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile ≤ 680px
══════════════════════════════════════════════════════════ */
 @media (max-width: 680px) {
   .hdr-brand-inner {
     height: 70px;
     padding-right: 12px;
   }

   .hdr-socials {
     display: none;
   }

   /* socials in footer on mobile */

   /* Nav */
   .hdr-nav-inner {
     padding: 0 12px;
     width: 100%;
   }

   .hdr-nav-inner .hamburger {
     display: flex;
   }

   .hdr-nav-right {
     margin-left: auto;
   }

   /* keep right group on far right */

   .hdr-nav-inner #main-nav {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     background: #3d1a66;
     flex-direction: column;
     align-items: stretch;
     z-index: 9998;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
     max-height: 70vh;
     overflow-y: auto;
   }

   .hdr-nav-inner #main-nav.open {
     display: flex;
   }

   .hdr-nav-inner .nav-link {
     border-right: none;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     padding: 13px 18px;
     font-size: 0.8rem;
   }

   .hdr-nav-inner .dropdown {
     position: static;
     box-shadow: none;
     border-top: none;
     border-left: 3px solid #d20f0c;
     margin-left: 16px;
     display: none;
   }

   .hdr-nav-inner .nav-item:hover .dropdown {
     display: none;
   }

   .hdr-nav-inner .nav-item.open .dropdown {
     display: block;
   }

   .hdr-nav-inner .dropdown a {
     font-size: 0.76rem;
     padding: 9px 16px;
   }

   .hdr-nav-inner .header-btn {
     font-size: 0.68rem;
     padding: 6px 12px;
   }

   .hdr-nav-row {
     position: relative;
   }
 }

 /* ══════════════════════════════════════════════════════════
   RESPONSIVE — Small ≤ 420px
══════════════════════════════════════════════════════════ */
 @media (max-width: 420px) {
   .hdr-brand-inner {
     height: 58px;
     padding-right: 8px;
   }
 }

 /*///////////////////////////////////////////////////////////////////////////*/
 header {
   background: #fff;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   position: sticky;
   top: 0;
   z-index: 1000;
   transition: all 0.3s;
 }

 header.scrolled {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }

 .header-inner {
   max-width: 1280px;
   margin: 0 auto;
   padding: 12px 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   box-sizing: border-box;
 }

 .logo {
   display: flex;
   align-items: center;
   gap: 12px;
   text-decoration: none;
 }

 .logo-icon {
   width: 64px;
   height: 64px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   background: transparent;
 }

 .logo-icon img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center;
   border-radius: 8px;
   image-rendering: -webkit-optimize-contrast;
   image-rendering: high-quality;
   image-rendering: crisp-edges;
   image-rendering: pixelated;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   backface-visibility: hidden;
 }

 .logo-text {
   line-height: 1.2;
 }

 .logo-text .name {
   font-size: 20px;
   font-weight: 700;
   color: var(--navy);
   letter-spacing: 0.5px;
 }

 .logo-text .sub {
   font-size: 10px;
   color: var(--gray);
   text-transform: uppercase;
   letter-spacing: 2px;
 }

 nav {
   display: flex;
   align-items: center;
   gap: 4px;
 }

 .nav-item {
   position: relative;
 }

 .nav-link {
   display: block;
   padding: 10px 14px;
   font-size: 13px;
   font-weight: 600;
   color: var(--navy);
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   transition: color 0.2s;
 }

 .nav-link:hover,
 .nav-item:hover .nav-link {
   color: var(--red);
 }

 .nav-item .dropdown {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   background: #fff;
   min-width: 220px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
   border-top: 3px solid var(--red);
   z-index: 999;
 }

 .nav-item:hover .dropdown {
   display: block;
 }

 .dropdown a {
   display: block;
   padding: 10px 20px;
   font-size: 13px;
   color: #333;
   text-decoration: none;
   border-bottom: 1px solid #f0f0f0;
   transition: all 0.2s;
 }

 .dropdown a:hover {
   background: #fef0f0;
   color: var(--red);
   padding-left: 26px;
 }

 .header-btn {
   background: var(--red);
   color: white;
   padding: 10px 22px;
   border-radius: 4px;
   font-size: 13px;
   font-weight: 600;
   text-decoration: none;
   transition: background 0.2s;
   white-space: nowrap;
 }

 .header-btn:hover {
   background: var(--dark-red);
 }

 .hamburger {
   display: none;
   flex-direction: column;
   cursor: pointer;
   gap: 5px;
   padding: 4px;
 }

 .hamburger span {
   width: 26px;
   height: 3px;
   background: var(--navy);
   border-radius: 2px;
   transition: all 0.3s;
 }

 /* ===== HERO SLIDER ===== */
 .hero {
   position: relative;
   height: 580px;
   overflow: hidden;
 }

 .slide {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   opacity: 0;
   transition: opacity 0.8s ease;
 }

 .slide.active {
   opacity: 1;
 }

 .slide-1 {
   background-image: url('images/slide/slide-1.png');
 }

 .slide-2 {
   background-image: url('images/slide/slide-2.JPG');
 }

 .slide-3 {
   background-image: url('images/slide/slide-3.JPG');
 }

 .slide-4 {
   background-image: url('images/slide/slide-4.JPG');
 }

 .slide-5 {
   background-image: url('images/slide/slide-5.JPG');
 }

 .slide-6 {
   background-image: url('images/slide/slide-6.JPG');
 }  

 .slide-7 {
   background-image: url('images/slide/slide-7.JPG');
 }

 .slide-8 {
   background-image: url('images/slide/slide-8.JPG'); 
 }

 .slide-9 {
   background-image: url('images/slide/slide-9.png');
  }

    .agri-1 {
      background-image: url('../images/Dept-slide/agri/1.JPG');
    }

      .agri-2 {
      background-image: url('/images/Dept-slide/agri/2.JPG');
    }

      .agri-3 {
      background-image: url('../images/Dept-slide/agri/3.JPG');
    }

    .cse-1 {
      background-image: url('images/Dept-slide/cse/1.JPG');
    }

      .cse-2 {
      background-image: url('images/Dept-slide/cse/2.JPG');
    }

      .cse-3 {
      background-image: url('images/Dept-slide/cse/3.JPG');
    }

    .ai-1 {
      background-image: url('images/Dept-slide/aids/1.JPG');
    }

      .ai-2 {
      background-image: url('images/Dept-slide/aids/2.JPG');
    }

      .ai-3 {
      background-image: url('images/Dept-slide/aids/3.JPG');
    }

    .bme-1 {
      background-image: url('images/Dept-slide/bme/1.JPG');
    }

      .bme-2 {
      background-image: url('images/Dept-slide/bme/2.JPG');
    }

      .bme-3 {
      background-image: url('images/Dept-slide/bme/3.JPG');
    }

      .bt-1 {
      background-image: url('images/Dept-slide/biotech/1.JPG');
    }

      .bt-2 {
      background-image: url('images/Dept-slide/biotech/2.JPG');
    }

      .bt-3 {
      background-image: url('images/Dept-slide/biotech/3.JPG');
    }

      .ce-1 {
      background-image: url('images/Dept-slide/chem/1.JPG');
    }

      .ce-2 {
      background-image: url('images/Dept-slide/chem/2.JPG');
    } 

      .ce-3 {
      background-image: url('images/Dept-slide/chem/3.JPG');
    }

      .civil-1 {
      background-image: url('images/Dept-slide/civil/1.JPG');
    }

      .civil-2 {
      background-image: url('images/Dept-slide/civil/2.JPG');
    }

      .civil-3 {
      background-image: url('images/Dept-slide/civil/3.JPG');
    }

      .aiml-1 {
      background-image: url('images/Dept-slide/aiml/1.JPG');
    }

      .aiml-2 {
      background-image: url('images/Dept-slide/aiml/2.JPG');
    }

      .aiml-3 {
      background-image: url('images/Dept-slide/aiml/3.JPG');
    }

    .cyber-1 {
      background-image: url('images/Dept-slide/cyber/1.JPG');
    }

      .cyber-2 {
      background-image: url('images/Dept-slide/cyber/2.JPG');
    }

      .cyber-3 {
      background-image: url('images/Dept-slide/cyber/3.JPG');
    }

    .iot-1 {
      background-image: url('images/Dept-slide/iot/1.JPG');
    }

      .iot-2 {
      background-image: url('images/Dept-slide/iot/2.JPG');
    }

      .iot-3 {
      background-image: url('images/Dept-slide/iot/3.JPG');
    }

      .csd-1 {
      background-image: url('images/Dept-slide/csd/1.JPG');
    }

      .csd-2 {
      background-image: url('images/Dept-slide/csd/2.JPG');
    }

      .csd-3 {
      background-image: url('images/Dept-slide/csd/3.JPG');
    }

      .eee-1 {
      background-image: url('images/Dept-slide/eee/1.JPG');
    }

      .eee-2 {
      background-image: url('images/Dept-slide/eee/2.JPG');
    }

      .eee-3 {
      background-image: url('images/Dept-slide/eee/3.JPG');
    }

      .eie-1 {
      background-image: url('images/Dept-slide/eie/1.JPG');
    }

      .eie-2 {
      background-image: url('images/Dept-slide/eie/2.JPG');
    }

      .eie-3 {
      background-image: url('images/Dept-slide/eie/3.JPG');
    }

      .it-1 {
      background-image: url('images/Dept-slide/it/1.JPG');
    }

      .it-2 {
      background-image: url('images/Dept-slide/it/2.JPG');
    }

      .it-3 {
      background-image: url('images/Dept-slide/it/3.JPG');
    }

        .ece-1 {
      background-image: url('images/Dept-slide/ece/1.JPG');
    }

      .ece-2 {
      background-image: url('images/Dept-slide/ece/2.JPG');
    }

      .ece-3 {
      background-image: url('images/Dept-slide/ece/3.JPG');
    }

      .ece-vlsi-1 {
      background-image: url('images/Dept-slide/ece-vlsi/1.JPG');
    }

      .ece-vlsi-2 {
      background-image: url('images/Dept-slide/ece-vlsi/2.JPG');
    }

      .ece-vlsi-3 {
      background-image: url('images/Dept-slide/ece-vlsi/3.JPG');
    }

    .mech-1 {
      background-image: url('images/Dept-slide/mech/1.JPG');
    }

      .mech-2 {
      background-image: url('images/Dept-slide/mech/2.JPG');
    }

      .mech-3 {
      background-image: url('images/Dept-slide/mech/3.JPG');
    }

    .mcse-1 {
      background-image: url('images/Dept-slide/m.cse/1.JPG');
    }

      .mcse-2 {
      background-image: url('images/Dept-slide/m.cse/2.JPG');
    }

      .mcse-3 {
      background-image: url('images/Dept-slide/m.cse/3.JPG');
    }

    
    .sh-1 {
      background-image: url('images/Dept-slide/sh/1.JPG');
    }

      .sh-2 {
      background-image: url('images/Dept-slide/sh/2.JPG');
    }

      .sh-3 {
      background-image: url('images/Dept-slide/sh/3.JPG');
    }

    .rae-1 {
      background-image: url('images/Dept-slide/rae/1.JPG');
    }

      .rae-2 {
      background-image: url('images/Dept-slide/rae/2.JPG');
    }

      .rae-3 {
      background-image: url('images/Dept-slide/rae/3.JPG');
    }
 .hero-content {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   max-width: 1280px;
   width: 100%;
   padding: 0 40px;
   color: white;
   z-index: 2;
 }

 .hero-tag {
   display: inline-block;
   background: var(--red);
   color: white;
   font-size: 11px;
   font-weight: 700;
   padding: 5px 14px;
   letter-spacing: 2px;
   text-transform: uppercase;
   margin-bottom: 16px;
   animation: fadeInDown 0.6s ease 0.2s both;
 }

 .hero-title {
   font-size: 52px;
   font-weight: 800;
   line-height: 1.15;
   margin-bottom: 20px;
   font-family: 'Playfair Display', serif;
   animation: fadeInUp 0.7s ease 0.4s both;
   max-width: 620px;
 }

 .hero-sub {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.85);
   margin-bottom: 32px;
   animation: fadeInUp 0.7s ease 0.6s both;
   max-width: 500px;
   line-height: 1.7;
 }

 .hero-btns {
   display: flex;
   gap: 16px;
   animation: fadeInUp 0.7s ease 0.8s both;
   flex-wrap: wrap;
 }

 .btn-primary {
   background: var(--red);
   color: white;
   padding: 14px 32px;
   font-size: 14px;
   font-weight: 600;
   border-radius: 4px;
   text-decoration: none;
   transition: all 0.3s;
   letter-spacing: 0.5px;
 }

 .btn-primary:hover {
   background: var(--dark-red);
   transform: translateY(-2px);
 }

 .btn-outline {
   border: 2px solid rgba(255, 255, 255, 0.7);
   color: white;
   padding: 14px 32px;
   font-size: 14px;
   font-weight: 600;
   border-radius: 4px;
   text-decoration: none;
   transition: all 0.3s;
 }

 .btn-outline:hover {
   background: rgba(255, 255, 255, 0.15);
   border-color: white;
 }

 .hero-dots {
   position: absolute;
   bottom: 30px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 10px;
   z-index: 3;
 }

 .dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.4);
   cursor: pointer;
   transition: all 0.3s;
 }

 .dot.active {
   background: white;
   width: 28px;
   border-radius: 5px;
 }

 .hero-arrows {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 100%;
   display: flex;
   justify-content: space-between;
   padding: 0 20px;
   z-index: 3;
 }

 .arrow-btn {
   width: 46px;
   height: 46px;
   background: rgba(255, 255, 255, 0.15);
   border: 2px solid rgba(255, 255, 255, 0.5);
   border-radius: 50%;
   color: white;
   font-size: 18px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s;
   backdrop-filter: blur(4px);
 }

 .arrow-btn:hover {
   background: var(--red);
   border-color: var(--red);
 }

 /* ===== STATS BAR ===== */
 .stats-bar {
   background: var(--navy);
   padding: 28px 0;
 }

 .stats-grid {
   max-width: 1280px;
   margin: auto;
   padding: 0 20px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   background: rgba(255, 255, 255, 0.1);
 }

 .stat-item {
   background: var(--navy);
   text-align: center;
   padding: 20px;
   position: relative;
 }

 .stat-item:not(:last-child)::after {
   content: '';
   display: none;
   position: absolute;
   right: 0;
   top: 20%;
   bottom: 20%;
   width: 1px;
   background: rgba(255, 255, 255, 0.15);
 }

 .stat-number {
   font-size: 30px;
   font-weight: 500;
   color: var(--gold);
   line-height: 2;
   font-family: 'poppins', sans-serif;
   margin-bottom: 8px;
 }

 .stat-label {
   font-size: 20px;
   font-weight: 300;
   color: rgba(255, 255, 255, 0.7);
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-top: 6px;
   font-family: 'Inter', sans-serif;
 }

 /* ===== SECTION COMMON ===== */
 .container {
   max-width: 1280px;
   margin: auto;
   padding: 0 20px;
 }

 section {
   padding: 80px 0;
 }

 .section-header {
   text-align: center;
   margin-bottom: 50px;
 }

 .section-tag {
   display: inline-block;
   background: #fef0f0;
   color: var(--red);
   font-size: 11px;
   font-weight: 700;
   padding: 5px 16px;
   letter-spacing: 2px;
   text-transform: uppercase;
   margin-bottom: 14px;
   border-radius: 2px;
 }

 .section-title {
   font-size: 36px;
   font-weight: 800;
   color: var(--navy);
   font-family: 'Playfair Display', serif;
   margin-bottom: 14px;
 }

 .section-sub {
   font-size: 15px;
   color: var(--gray);
   max-width: 600px;
   margin: auto;
   line-height: 1.7;
 }

 .divider {
   width: 60px;
   height: 3px;
   background: var(--red);
   margin: 16px auto 0;
 }

 /* ===== ANNOUNCEMENTS TICKER ===== */
 .ticker-bar {
   background: var(--red);
   color: white;
   padding: 10px 0;
   overflow: hidden;
   position: relative;
 }

 .ticker-label {
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   background: linear-gradient(90deg, var(--red) 0%, var(--dark-red) 100%);
   padding: 0 20px;
   display: flex;
   align-items: center;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 2px;
   z-index: 2;
   text-transform: uppercase;
   white-space: nowrap;
   box-shadow: 2px 0 8px rgba(210, 15, 12, 0.4);
 }

 .ticker-wrap {
   display: flex;
   overflow: hidden;
   margin-left: 160px;
 }

 .ticker-content {
   display: flex;
   animation: ticker 30s linear infinite;
   white-space: nowrap;
 }

 .ticker-content span {
   font-size: 13px;
   padding: 0 40px;
   opacity: 0.95;
 }

 .ticker-content span::before {
   content: '★';
   margin-right: 10px;
   color: var(--gold);
 }

 @keyframes ticker {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(-50%);
   }
 }

 /* ===== PROGRAMS ===== */
 .programs {
   background: var(--light-gray);
 }

.programs-grid {
   display: grid;
   width: 100%;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin: 0 auto;
 }

 /* Responsive breakpoints */
 @media (max-width: 1024px) {
   .programs-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
     max-width: 800px;
   }
 }

 @media (max-width: 640px) {
   .programs-grid {
     grid-template-columns: 1fr;
     gap: 16px;
     max-width: none;
   }
 }

.program-card {
   background: white;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
   transition: all 0.3s;
   cursor: pointer;
   width: 100%;
   min-height: 280px;
   display: flex;
   flex-direction: column;
 }

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

 .program-icon {
   height: 120px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 3rem;
   line-height: 1;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   position: relative;
   overflow: hidden;
 }


 .program-icon::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: var(--red);
 }

 .program-card:nth-child(1) .program-icon {
   background: #1a2448;
 }

 .program-card:nth-child(2) .program-icon {
   background: #c8102e;
 }

 .program-card:nth-child(3) .program-icon {
   background: #0b5394;
 }

 .program-card:nth-child(4) .program-icon {
   background: #2d6a4f;
 }

 .program-card:nth-child(5) .program-icon {
   background: #6b2d8b;
 }

 .program-card:nth-child(6) .program-icon {
   background: #b45309;
 }

 .program-card:nth-child(7) .program-icon {
   background: #0d7377;
 }

 .program-card:nth-child(8) .program-icon {
   background: #7c1d2e;
 }

 .program-body {
   padding: 20px;
 }

 .program-name {
   font-size: 16px;
   font-weight: 700;
   color: var(--navy);
   margin-bottom: 8px;
 }

 .program-desc {
   font-size: 13px;
   color: var(--gray);
   line-height: 1.6;
   margin-bottom: 14px;
 }

 .program-link {
   font-size: 13px;
   font-weight: 600;
   color: var(--red);
   text-decoration: none;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .program-link::after {
   content: '→';
   transition: transform 0.2s;
 }

 .program-card:hover .program-link::after {
   transform: translateX(4px);
 }

 /* ===== ABOUT ESEC ===== */
 .about-section {
   background: #f7f7f7;
   padding: 80px 0;
 }

 .about-grid {
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   gap: 60px;
   align-items: center;
 }

 /* IMAGE */
 .about-img img {
   width: 100%;
   border-radius: 20px;
   height: 420px;
   object-fit: cover;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
 }

 /* RIGHT CONTENT */
 .about-content h2 {
   font-size: 34px;
   font-weight: 700;
   color: #1a2448;
   margin-bottom: 20px;
 }

 .about-content p {
   font-size: 15px;
   color: #555;
   line-height: 1.8;
   margin-bottom: 15px;
 }

 /* TAG */
 .about-tag {
   display: inline-block;
   background: #e6f2ff;
   color: #582b84;
   font-size: 13px;
   padding: 6px 16px;
   border-radius: 20px;
   margin-bottom: 12px;
   font-weight: 600;
 }

 /* BADGES */
 .about-badges {
   display: flex;
   gap: 20px;
   margin-top: 30px;
 }

 .badge-card {
   background: #fff;
   padding: 20px;
   border-radius: 14px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   flex: 1;
   position: relative;
   overflow: hidden;
 }

 /* corner design */
 .badge-card::after {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   width: 50px;
   height: 50px;
   background: #582b84;
   clip-path: polygon(100% 0, 0 0, 100% 100%);
 }

 /* TEXT */
 .badge-card h3 {
   font-size: 20px;
   color: #1a2448;
   margin-bottom: 5px;
 }

 .badge-card p {
   font-size: 13px;
   color: #666;
 }

 /* RESPONSIVE */
 @media(max-width: 1024px) {
   .about-grid {
     grid-template-columns: 1fr;
   }

   .about-img img {
     height: 300px;
   }

   .about-badges {
     flex-direction: column;
   }
 }

 /* ===== RANKINGS ===== */
 .rankings {
   background: var(--navy);
 }

 .rankings .section-title {
   color: white;
 }

 .rankings .section-sub {
   color: rgba(255, 255, 255, 0.6);
 }

 .rankings .section-tag {
   background: rgba(255, 255, 255, 0.1);
   color: var(--gold);
 }

 .rank-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 20px;
   margin-top: 50px;
 }

 .rank-card {
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   padding: 30px 20px;
   text-align: center;
   transition: all 0.3s;
 }

 .rank-card:hover {
   background: rgba(255, 255, 255, 0.1);
   transform: translateY(-4px);
   border-color: var(--gold);
 }

 .rank-num {
   font-size: 44px;
   font-weight: 800;
   color: var(--gold);
   font-family: 'Playfair Display', serif;
   line-height: 1;
 }

 .rank-desc {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.6);
   margin-top: 8px;
   line-height: 1.5;
 }

 .rank-body {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.85);
   font-weight: 600;
   margin-top: 10px;
 }

 /* ===== NEWS & EVENTS ===== */
 .news-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr;
   gap: 24px;
 }

 .news-card {
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
   transition: all 0.3s;
   background: white;
 }

 .news-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
 }

 .news-img {
   width: 100%;
   height: 200px;
   object-fit: cover;
 }

 .news-card.featured .news-img {
   height: 280px;
 }

 .news-body {
   padding: 20px;
 }

 .news-cat {
   display: inline-block;
   background: var(--red);
   color: white;
   font-size: 10px;
   font-weight: 700;
   padding: 3px 10px;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   margin-bottom: 10px;
   border-radius: 2px;
 }

 .news-title {
   font-size: 16px;
   font-weight: 700;
   color: var(--navy);
   margin-bottom: 10px;
   line-height: 1.4;
 }

 .news-card.featured .news-title {
   font-size: 20px;
 }

 .news-date {
   font-size: 12px;
   color: var(--gray);
 }

 .news-excerpt {
   font-size: 13px;
   color: var(--gray);
   line-height: 1.6;
   margin: 10px 0;
 }

 .news-link {
   font-size: 13px;
   color: var(--red);
   font-weight: 600;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 6px;
 }

 /* ===== TESTIMONIALS ===== */
 .testimonials {
   background: var(--light-gray);
 }

 .testi-slider {
   position: relative;
   overflow: hidden;
 }

 .testi-track {
   display: flex;
   transition: transform 0.5s ease;
 }

 .testi-card {
   flex: 0 0 calc(33.33% - 16px);
   margin-right: 24px;
   background: white;
   padding: 32px;
   border-radius: 10px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
   position: relative;
 }

 .testi-quote {
   font-size: 60px;
   color: var(--red);
   opacity: 0.15;
   position: absolute;
   top: 10px;
   left: 20px;
   font-family: Georgia, serif;
   line-height: 1;
 }

 .testi-text {
   font-size: 14px;
   color: #555;
   line-height: 1.8;
   margin-bottom: 24px;
   font-style: italic;
 }

 .testi-footer {
   display: flex;
   align-items: center;
   gap: 14px;
 }

 .testi-avatar {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid var(--red);
 }

 .testi-name {
   font-size: 14px;
   font-weight: 700;
   color: var(--navy);
 }

 .testi-role {
   font-size: 12px;
   color: var(--gray);
 }

 .testi-stars {
   color: var(--gold);
   font-size: 12px;
   margin-top: 2px;
 }

 .testi-controls {
   display: flex;
   justify-content: center;
   gap: 10px;
   margin-top: 36px;
 }

 .testi-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #ccc;
   cursor: pointer;
   transition: all 0.3s;
 }

 .testi-dot.active {
   background: var(--red);
   width: 28px;
   border-radius: 5px;
 }

 /* ===== PLACEMENTS ===== */
 .placements-wrap {
   display: grid;
   grid-template-columns: 1fr 2fr;
   gap: 50px;
   align-items: center;
 }

 .placement-stats {
   display: flex;
   flex-direction: column;
   gap: 24px;
 }

 .p-stat {
   background: var(--light-gray);
   padding: 24px;
   border-radius: 8px;
   border-left: 5px solid var(--red);
 }

 .p-stat-num {
   font-size: 40px;
   font-weight: 800;
   color: var(--navy);
   font-family: 'Playfair Display', serif;
   line-height: 1;
 }

 .p-stat-label {
   font-size: 13px;
   color: var(--gray);
   margin-top: 4px;
 }

 .recruiter-heading {
   font-size: 18px;
   font-weight: 700;
   color: var(--navy);
   margin-bottom: 24px;
   padding-bottom: 12px;
   border-bottom: 2px solid var(--border);
 }

 .recruiter-logos {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 16px;
 }

 .recruiter-logo {
   background: var(--light-gray);
   border-radius: 6px;
   padding: 16px 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   font-weight: 700;
   color: var(--navy);
   text-align: center;
   transition: all 0.3s;
   border: 1px solid var(--border);
 }

 .recruiter-logo:hover {
   background: white;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   color: var(--red);
 }

 /* ===== GLOBAL PARTNERSHIPS ===== */
 .global {
   background: #f9f9ff;
 }

 .partner-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 16px;
   margin-top: 40px;
 }

 .partner-card {
   background: white;
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 20px 12px;
   text-align: center;
   font-size: 12px;
   font-weight: 700;
   color: var(--navy);
   transition: all 0.3s;
   cursor: pointer;
 }

 .partner-card:hover {
   border-color: var(--red);
   color: var(--red);
   transform: translateY(-3px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
 }

 .partner-flag {
   font-size: 28px;
   display: block;
   margin-bottom: 8px;
 }

 /* ===== CAMPUS LIFE ===== */
 .campus-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(2, 200px);
   gap: 12px;
 }

 .campus-item {
   border-radius: 8px;
   overflow: hidden;
   position: relative;
   cursor: pointer;
 }

 .campus-item:first-child {
   grid-column: span 2;
   grid-row: span 2;
 }

 .campus-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.4s ease;
 }

 .campus-item:hover img {
   transform: scale(1.06);
 }

 .campus-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 30%, transparent);
   display: flex;
   align-items: flex-end;
   padding: 16px;
   opacity: 0;
   transition: opacity 0.3s;
 }

 .campus-item:hover .campus-overlay {
   opacity: 1;
 }

 .campus-label {
   color: white;
   font-size: 14px;
   font-weight: 700;
 }

 /* ===== ADMISSIONS CTA ===== */
 .admissions-cta {
   background: linear-gradient(135deg, var(--navy) 0%, #2d3e7a 50%, var(--red) 100%);
   padding: 80px 0;
   text-align: center;
   position: relative;
   overflow: hidden;
 }

 .admissions-cta::before {
   content: '';
   position: absolute;
   top: -40%;
   left: -20%;
   width: 600px;
   height: 600px;
   background: rgba(255, 255, 255, 0.03);
   border-radius: 50%;
 }

 .admissions-cta h2 {
   font-size: 42px;
   font-weight: 800;
   color: white;
   font-family: 'Playfair Display', serif;
   margin-bottom: 16px;
   position: relative;
 }

 .admissions-cta p {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.8);
   margin-bottom: 36px;
   position: relative;
 }

 .cta-btns {
   display: flex;
   gap: 16px;
   justify-content: center;
   position: relative;
   flex-wrap: wrap;
 }

 .cta-btn-white {
   background: white;
   color: var(--red);
   padding: 14px 36px;
   font-size: 14px;
   font-weight: 700;
   border-radius: 4px;
   text-decoration: none;
   transition: all 0.3s;
 }

 .cta-btn-white:hover {
   background: var(--gold);
   color: white;
 }

 .cta-btn-ghost {
   border: 2px solid rgba(255, 255, 255, 0.6);
   color: white;
   padding: 14px 36px;
   font-size: 14px;
   font-weight: 700;
   border-radius: 4px;
   text-decoration: none;
   transition: all 0.3s;
 }

 .cta-btn-ghost:hover {
   background: rgba(255, 255, 255, 0.15);
   border-color: white;
 }

 /* ===== FOOTER ===== */
 footer {
   background: #582b84;
   ;
   color: rgba(255, 255, 255, 0.7);
   padding: 60px 0 0;
   font-weight: 600;
 }

 .footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
   gap: 40px;
   padding-bottom: 50px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }

 .footer-brand .logo-text .name {
   color: white;
   font-size: 22px;
 }

 .footer-brand .logo-text .sub {
   color: rgba(255, 255, 255, 0.4);
 }

 .footer-brand p {
   font-size: 13px;
   line-height: 1.8;
   margin: 16px 0;
   color: rgba(255, 255, 255, 0.55);
 }

 .footer-social {
   display: flex;
   gap: 10px;
   margin-top: 16px;
 }

 .social-btn {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
   border: 1px solid rgba(255, 255, 255, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 16px;
   text-decoration: none;
   transition: all 0.3s ease;
   backdrop-filter: blur(10px);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }

 .social-btn:hover {
   background: linear-gradient(135deg, var(--red), #ff4757);
   border-color: var(--red);
   transform: translateY(-2px) scale(1.05);
   box-shadow: 0 8px 25px rgba(210, 15, 12, 0.4);
 }

 .footer-col h4 {
   font-size: 14px;
   font-weight: 700;
   color: white;
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-bottom: 20px;
   padding-bottom: 10px;
   border-bottom: 2px solid var(--red);
   display: inline-block;
 }

 .footer-col ul {
   list-style: none;
 }

 .footer-col ul li {
   margin-bottom: 10px;
 }

 .footer-col ul li a {
   color: rgba(255, 255, 255, 0.55);
   text-decoration: none;
   font-size: 13px;
   transition: color 0.2s;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .footer-col ul li a::before {
   content: '›';
   color: var(--red);
   font-size: 16px;
 }

 .footer-col ul li a:hover {
   color: white;
 }

 .footer-contact p {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.55);
   margin-bottom: 10px;
   display: flex;
   gap: 10px;
   align-items: flex-start;
 }

.footer-contact span {
  color: var(--gold);
  font-size: 15px;
  margin-top: 1px;
  flex-shrink: 0;
}

.footer-col.footer-contact a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.3s ease;
}

.footer-col.footer-contact a:hover {
  color: white;
}

 .footer-bottom {
   padding: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 12px;
   color: rgba(255, 255, 255, 0.35);
   flex-wrap: wrap;
   gap: 10px;
 }

 .footer-bottom a {
   color: rgba(255, 255, 255, 0.35);
   text-decoration: none;
   margin-left: 16px;
 }

 .footer-bottom a:hover {
   color: white;
 }

 /* ===== ANIMATIONS ===== */
 @keyframes fadeInDown {
   from {
     opacity: 0;
     transform: translateY(-20px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .fade-in {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.7s ease, transform 0.7s ease;
 }

 .fade-in.visible {
   opacity: 1;
   transform: translateY(0);
 }

 /* ===== MOBILE NAV ===== */
 @media (max-width: 1024px) {
   nav {
     display: none;
   }

   nav.open {
     display: flex;
     flex-direction: column;
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     background: white;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
     padding: 10px 0;
     z-index: 999;
   }

   nav.open .nav-item .dropdown {
     position: static;
     box-shadow: none;
     border-top: none;
     border-left: 3px solid var(--red);
     margin-left: 20px;
   }

   .hamburger {
     display: flex;
   }

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

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

   .news-card.featured {
     grid-column: span 2;
   }

   .rank-grid {
     grid-template-columns: repeat(3, 1fr);
   }

   .partner-grid {
     grid-template-columns: repeat(4, 1fr);
   }

   .recruiter-logos {
     grid-template-columns: repeat(4, 1fr);
   }

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

   .placements-wrap {
     grid-template-columns: 1fr;
   }

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

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

 @media (max-width: 640px) {
   .hero {
     height: 480px;
   }

   .hero-title {
     font-size: 34px;
   }

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

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

   .news-card.featured {
     grid-column: auto;
   }

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

   .campus-grid {
     grid-template-columns: 1fr;
     grid-template-rows: auto;
   }

   .campus-item:first-child {
     grid-column: auto;
     grid-row: auto;
   }

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

   .recruiter-logos {
     grid-template-columns: repeat(3, 1fr);
   }

   .partner-grid {
     grid-template-columns: repeat(3, 1fr);
   }

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

 /* ===== SCROLL TO TOP ===== */
 #scrollTop {
   position: fixed;
   bottom: 30px;
   right: 30px;
   width: 46px;
   height: 46px;
   background: var(--red);
   color: white;
   border: none;
   border-radius: 50%;
   font-size: 20px;
   cursor: pointer;
   display: none;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 15px rgba(200, 16, 46, 0.4);
   z-index: 900;
   transition: all 0.3s;
 }

 #scrollTop:hover {
   background: var(--dark-red);
   transform: translateY(-3px);
 }

 #scrollTop.show {
   display: flex;
 }

 /* ===== ENQUIRY FLOAT ===== */
 .enquiry-float {
   position: fixed;
   right: -140px;
   top: 50%;
   transform: translateY(-50%) rotate(-90deg);
   transform-origin: right center;
   background: var(--red);
   color: white;
   padding: 12px 24px;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 1px;
   cursor: pointer;
   z-index: 900;
   text-transform: uppercase;
   text-decoration: none;
   transition: right 0.3s;
   white-space: nowrap;
 }

 .enquiry-float:hover {
   right: -120px;
   background: var(--dark-red);
 }

 /* ===== NAAC Badge ===== */
 .naac-badge {
   position: absolute;
   top: 20px;
   right: 20px;
   background: white;
   border-radius: 8px;
   padding: 8px 14px;
   font-size: 12px;
   font-weight: 700;
   color: var(--navy);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
   z-index: 5;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .naac-grade {
   background: var(--red);
   color: white;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   font-weight: 800;
   font-family: 'Playfair Display', serif;
 }

 /*vission-mission*/

 /* =====================================================
   INNER PAGE ADDITIONS — append these to your style.css
   These styles power the page banner, breadcrumb,
   and inner page layouts used on all sub-pages.
   ===================================================== */

 /* ===== PAGE BANNER (replaces hero on inner pages) ===== */
 .page-banner {
   background: linear-gradient(135deg, #1a0a3c 0%, var(--navy) 50%, #3a1a6e 100%);
   padding: 52px 0 40px;
   position: relative;
   overflow: hidden;
 }

 .page-banner::before {
   content: '';
   position: absolute;
   inset: 0;
   background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
 }

 .page-banner::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 4px;
   background: var(--red);
 }

 .page-banner-title {
   font-family: 'Playfair Display', serif;
   font-size: 36px;
   font-weight: 800;
   color: #fff;
   margin-bottom: 12px;
   position: relative;
 }

 .breadcrumb {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: rgba(255, 255, 255, 0.65);
   position: relative;
 }

 .breadcrumb a {
   color: #ffed99;
   text-decoration: none;
   transition: color 0.2s;
 }

 .breadcrumb a:hover {
   color: #fff;
 }

 .bc-sep {
   opacity: 0.5;
 }

 /* ===== INNER PAGE SECTION ===== */
 .inner-page-section {
   padding: 60px 0 80px;
   background: #f5f5f5;
 }

 /* ===== TWO COLUMN LAYOUT (sidebar + content) ===== */
 .inner-two-col {
   display: grid;
   grid-template-columns: 260px 1fr;
   gap: 40px;
   align-items: start;
 }

 /* Sidebar nav (used on About Us pages etc.) */
 .page-sidebar {
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
   overflow: hidden;
   position: sticky;
   top: 100px;
 }

 .page-sidebar h3 {
   background: var(--navy);
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   padding: 16px 20px;
   letter-spacing: 1px;
   text-transform: uppercase;
 }

 .page-sidebar ul {
   list-style: none;
 }

 .page-sidebar ul li a {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 20px;
   font-size: 13px;
   font-weight: 500;
   color: #444;
   text-decoration: none;
   border-bottom: 1px solid #f0f0f0;
   border-left: 3px solid transparent;
   transition: all 0.2s;
 }

 .page-sidebar ul li a:hover,
 .page-sidebar ul li a.active {
   background: #fef0f0;
   color: var(--red);
   border-left-color: var(--red);
   padding-left: 26px;
 }

 .page-sidebar ul li a::before {
   content: '›';
   color: var(--red);
   font-size: 16px;
 }

 /* Main content card */
 .page-main-content {
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
   padding: 40px;
 }

 .page-main-content h2 {
   font-family: 'Playfair Display', serif;
   font-size: 28px;
   font-weight: 800;
   color: var(--navy);
   margin-bottom: 8px;
   padding-bottom: 14px;
   border-bottom: 3px solid var(--red);
   display: inline-block;
 }

 .page-main-content h3 {
   font-size: 18px;
   font-weight: 700;
   color: var(--navy);
   margin: 28px 0 10px;
 }

 .page-main-content p {
   font-size: 14px;
   color: #555;
   line-height: 1.9;
   margin-bottom: 16px;
 }

 .page-main-content ul {
   list-style: none;
   margin-bottom: 20px;
 }

 .page-main-content ul li {
   font-size: 14px;
   color: #555;
   padding: 6px 0 6px 20px;
   position: relative;
   border-bottom: 1px dashed #eee;
 }

 .page-main-content ul li::before {
   content: '✦';
   position: absolute;
   left: 0;
   color: var(--red);
   font-size: 10px;
   top: 8px;
 }

 /* Highlight / info box inside content */
 .content-highlight {
   background: linear-gradient(135deg, var(--navy) 0%, #2d3e7a 100%);
   color: #fff;
   border-radius: 8px;
   padding: 30px 32px;
   margin: 28px 0;
   position: relative;
   overflow: hidden;
 }

 .content-highlight::before {
   content: '';
   position: absolute;
   top: -30px;
   right: -30px;
   width: 120px;
   height: 120px;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 50%;
 }

 .content-highlight h3 {
   font-family: 'Playfair Display', serif;
   font-size: 22px;
   color: #fff;
   margin-bottom: 10px;
 }

 .content-highlight p {
   color: rgba(255, 255, 255, 0.85);
   font-size: 14px;
   line-height: 1.8;
   margin-bottom: 0;
 }

 /* Icon feature cards (for vision/mission/values) */
 .feature-cards {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   margin: 28px 0;
 }

 .feature-card {
   background: #fafafa;
   border: 1px solid #eee;
   border-radius: 8px;
   padding: 24px;
   border-left: 4px solid transparent;
   transition: all 0.3s;
 }

 .feature-card:hover {
   border-left-color: var(--red);
   background: #fff;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 }

 .feature-card .fc-icon {
   font-size: 36px;
   margin-bottom: 12px;
   display: block;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .feature-card h4 {
   font-size: 15px;
   font-weight: 700;
   color: var(--navy);
   margin-bottom: 8px;
 }

 .feature-card p {
   font-size: 13px;
   color: #666;
   line-height: 1.7;
   margin-bottom: 0;
 }

 /* ===== RESPONSIVE ===== */
 @media (max-width: 900px) {
   .inner-two-col {
     grid-template-columns: 1fr;
   }

   .page-sidebar {
     position: static;
   }

   .feature-cards {
     grid-template-columns: 1fr;
   }
 }

 @media (max-width: 640px) {
   .page-banner-title {
     font-size: 26px;
   }

   .page-main-content {
     padding: 24px 18px;
   }
 }


 .mgmt-section-title {
   margin: 36px 0 24px;
 }

 .mgmt-section-title h3 {
   font-family: 'Poppins', sans-serif;
   font-size: 1.35rem;
   font-weight: 700;
   color: #4b0082;
   /* deep purple – matches the site header colour */
   margin: 0 0 8px;
 }

 .mgmt-divider {
   width: 60px;
   height: 3px;
   background: #c0392b;
   /* red accent – matches site red */
   border-radius: 2px;
 }

 /* ── Grid layout ─────────────────────────────────────────── */
 .mgmt-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px;
   margin-top: 8px;
 }

 @media (max-width: 900px) {
   .mgmt-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 560px) {
   .mgmt-grid {
     grid-template-columns: 1fr;
   }
 }

 /* ── Individual card ─────────────────────────────────────── */
 .mgmt-card {
   background: #ffffff;
   border: 2px solid #d4a017;
   /* gold border – like the reference image */
   border-radius: 6px;
   text-align: center;
   padding: 20px 16px 18px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
   transition: transform 0.25s ease, box-shadow 0.25s ease;
 }

 .mgmt-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
 }

 /* ── Photo wrapper ───────────────────────────────────────── */
 .mgmt-photo-wrap {
   width: 160px;
   height: 190px;
   margin: 0 auto 16px;
   border: 2px solid #d4a017;
   /* inner gold border around photo */
   border-radius: 4px;
   overflow: hidden;
   background: #f0f0f0;
   /* placeholder bg if image is missing */
 }

 .mgmt-photo {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top center;
   display: block;
 }

 /* ── Name & Role text ────────────────────────────────────── */
 .mgmt-info {
   margin-top: 4px;
 }

 .mgmt-name {
   font-family: 'Poppins', sans-serif;
   font-size: 0.95rem;
   font-weight: 700;
   color: #9b1dbf;
   /* purple – matches reference */
   margin: 0 0 4px;
   line-height: 1.3;
 }

 .mgmt-role {
   font-family: 'Poppins', sans-serif;
   font-size: 0.85rem;
   font-weight: 500;
   color: #555;
   margin: 0;
 }

 /* Principal Message */

 /* ============================================================
   principal-message.css
   Place this file in the same folder as principal-message.html
   ============================================================ */

 /* ── Principal profile block (photo + info side by side) ─── */
 .principal-block {
   display: flex;
   gap: 36px;
   align-items: flex-start;
   margin: 28px 0 32px;
 }

 @media (max-width: 680px) {
   .principal-block {
     flex-direction: column;
     align-items: center;
     text-align: center;
   }
 }

 /* ── Photo column ────────────────────────────────────────── */
 .principal-photo-col {
   flex-shrink: 0;
 }

 .principal-photo-wrap {
   width: 220px;
   height: 260px;
   border: 3px solid #d4a017;
   /* gold border */
   border-radius: 4px;
   overflow: hidden;
   background: #f0f0f0;
   box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.12);
 }

 .principal-photo {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top center;
   display: block;
 }

 /* ── Info column ─────────────────────────────────────────── */
 .principal-info-col {
   flex: 1;
   padding-top: 6px;
 }

 .principal-name {
   font-family: 'Poppins', sans-serif;
   font-size: 1.1rem;
   font-weight: 700;
   color: #1a1a2e;
   margin: 0 0 4px;
   line-height: 1.4;
 }

 .principal-title {
   font-family: 'Poppins', sans-serif;
   font-size: 0.95rem;
   font-weight: 500;
   color: #555;
   margin: 0 0 2px;
 }

 .principal-college {
   font-family: 'Poppins', sans-serif;
   font-size: 0.9rem;
   color: #777;
   margin: 0 0 20px;
 }

 /* ── Pull quote ──────────────────────────────────────────── */
 .principal-quote {
   font-family: 'Poppins', sans-serif;
   font-size: 0.95rem;
   font-weight: 600;
   color: #2c2c2c;
   line-height: 1.7;
   border-left: 4px solid #c0392b;
   /* red accent */
   margin: 0;
   padding: 10px 0 10px 16px;
   background: #fdf6f6;
   border-radius: 0 4px 4px 0;
 }

 /* ── Message body paragraphs ─────────────────────────────── */
 .principal-message-body {
   margin-top: 8px;
 }

 .principal-message-body p {
   font-family: 'Poppins', sans-serif;
   font-size: 0.95rem;
   color: #444;
   line-height: 1.85;
   text-align: justify;
   margin: 0 0 18px;
 }

 /* ── Signature block ─────────────────────────────────────── */
 .principal-signature {
   margin-top: 28px;
   padding-top: 16px;
   border-top: 1px solid #e0e0e0;
 }

 .sig-name {
   font-family: 'Poppins', sans-serif;
   font-size: 1rem;
   font-weight: 700;
   color: #4b0082;
   margin: 0 0 2px;
 }

 .sig-role {
   font-family: 'Poppins', sans-serif;
   font-size: 0.85rem;
   color: #666;
   margin: 0;
 }

 /* Chart */
 /* ============================================================
   org-chart.css
   Place in the same folder as org-chart.html
   ============================================================ */

 /* ── PDF download button ─────────────────────────────────── */
 .org-pdf-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin: 12px 0 32px;
   padding: 10px 22px;
   background: #4b0082;
   color: #fff;
   font-family: 'Poppins', sans-serif;
   font-size: 0.85rem;
   font-weight: 600;
   border-radius: 4px;
   text-decoration: none;
   transition: background 0.2s;
 }

 .org-pdf-btn:hover {
   background: #c0392b;
 }

 /* ── Outer scroll wrapper (horizontal scroll on mobile) ──── */
 .org-chart-wrap {
   overflow-x: auto;
   padding-bottom: 16px;
 }

 /* ── Chart container ─────────────────────────────────────── */
 .org-chart {
   display: flex;
   flex-direction: column;
   align-items: center;
   min-width: 620px;
   font-family: 'Poppins', sans-serif;
 }

 /* ── Vertical connector line ─────────────────────────────── */
 .org-vline {
   width: 2px;
   height: 28px;
   background: #4b0082;
   flex-shrink: 0;
 }

 /* ── Generic level row ───────────────────────────────────── */
 .org-level {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   gap: 16px;
   width: 100%;
 }

 /* ── Base node ───────────────────────────────────────────── */
 .org-node {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   border-radius: 6px;
   padding: 10px 16px;
   position: relative;
   box-sizing: border-box;
 }

 .org-label {
   font-weight: 700;
   line-height: 1.3;
 }

 .org-sub {
   font-size: 0.75rem;
   font-weight: 400;
   margin-top: 4px;
   opacity: 0.85;
 }

 .org-icon {
   font-size: 1.4rem;
   margin-bottom: 4px;
 }

 /* ── Trust node ──────────────────────────────────────────── */
 .org-node.trust {
   background: linear-gradient(135deg, #1a1a2e, #4b0082);
   color: #fff;
   font-size: 0.95rem;
   padding: 14px 40px;
   border-radius: 8px;
   box-shadow: 0 4px 16px rgba(75, 0, 130, 0.35);
   min-width: 320px;
 }

 /* ── Management node ─────────────────────────────────────── */
 .org-node.management {
   background: #4b0082;
   color: #fff;
   font-size: 0.9rem;
   padding: 12px 36px;
   min-width: 260px;
   box-shadow: 0 3px 12px rgba(75, 0, 130, 0.25);
 }

 /* ── Principal node ──────────────────────────────────────── */
 .org-node.principal {
   background: #c0392b;
   color: #fff;
   font-size: 0.9rem;
   padding: 12px 36px;
   min-width: 240px;
   box-shadow: 0 3px 12px rgba(192, 57, 43, 0.3);
 }

 /* ── Pillar nodes (Dean / CoE) ───────────────────────────── */
 .org-level-4 {
   gap: 12px;
   position: relative;
 }

 /* Horizontal line connecting pillars */
 .org-level-4::before {
   content: '';
   position: absolute;
   top: 0;
   left: calc(50% - 180px);
   width: 360px;
   height: 2px;
   background: #4b0082;
 }

 .org-node.pillar {
   background: #fff;
   border: 2px solid #4b0082;
   color: #1a1a2e;
   font-size: 0.78rem;
   padding: 12px 10px;
   width: 148px;
   min-height: 90px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   transition: transform 0.2s, box-shadow 0.2s;
 }

 .org-node.pillar:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 16px rgba(75, 0, 130, 0.15);
 }

 /* ── HOD head node ───────────────────────────────────────── */
 .org-node.hod-head {
   background: #d4a017;
   color: #fff;
   font-size: 0.88rem;
   padding: 10px 32px;
   min-width: 280px;
   box-shadow: 0 3px 10px rgba(212, 160, 23, 0.3);
 }

 /* ── Department grid ─────────────────────────────────────── */
 .org-dept-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 10px;
   width: 100%;
   margin-top: 0;
 }

 @media (max-width: 900px) {
   .org-dept-grid {
     grid-template-columns: repeat(3, 1fr);
   }
 }

 .org-node.dept {
   background: #f7f0ff;
   border: 1.5px solid #9b59b6;
   color: #4b0082;
   font-size: 0.72rem;
   font-weight: 600;
   padding: 9px 6px;
   border-radius: 5px;
   text-align: center;
   transition: background 0.2s, transform 0.2s;
   cursor: default;
 }

 .org-node.dept:hover {
   background: #4b0082;
   color: #fff;
   transform: scale(1.04);
 }

 /* ── Section divider ─────────────────────────────────────── */
 .org-section-divider {
   width: 100%;
   height: 2px;
   background: linear-gradient(to right, transparent, #d4a017, transparent);
   margin: 28px 0 16px;
 }

 /* ── Support units title ─────────────────────────────────── */
 .org-support-title {
   font-family: 'Poppins', sans-serif;
   font-size: 0.9rem;
   font-weight: 700;
   color: #c0392b;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 12px;
 }

 /* ── Support grid ────────────────────────────────────────── */
 .org-support-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 10px;
   width: 100%;
 }

 @media (max-width: 900px) {
   .org-support-grid {
     grid-template-columns: repeat(3, 1fr);
   }
 }

 .org-node.support {
   background: #fff5f5;
   border: 1.5px solid #e74c3c;
   color: #c0392b;
   font-size: 0.72rem;
   font-weight: 600;
   padding: 9px 6px;
   border-radius: 5px;
   text-align: center;
   transition: background 0.2s, transform 0.2s;
   cursor: default;
 }

 .org-node.support:hover {
   background: #c0392b;
   color: #fff;
   transform: scale(1.04);
 }

 /*chat*/

 /*Founder Profile*/

 /* ============================================================
   founder-profile.css  —  Place next to founder-profile.html
   ============================================================ */

 /* ── HERO BLOCK ─────────────────────────────────────────── */
 .fp-hero {
   display: flex;
   gap: 36px;
   align-items: flex-start;
   margin: 20px 0 40px;
   background: linear-gradient(135deg, #f9f4ff 0%, #fff5f5 100%);
   border: 1px solid #e8d5f5;
   border-radius: 10px;
   padding: 28px;
 }

 @media (max-width: 700px) {
   .fp-hero {
     flex-direction: column;
     align-items: center;
     text-align: center;
   }
 }

 /* Photo column */
 .fp-hero-photo-col {
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
 }

 .fp-photo-frame {
   width: 200px;
   height: 240px;
   border: 3px solid #d4a017;
   border-radius: 6px;
   overflow: hidden;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
 }

 .fp-photo {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top center;
   display: block;
 }

 .fp-born-badge {
   background: #4b0082;
   color: #fff;
   font-family: 'Poppins', sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
   padding: 5px 14px;
   border-radius: 20px;
 }

 .fp-biodata-btn {
   display: inline-block;
   background: #c0392b;
   color: #fff;
   font-family: 'Poppins', sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
   padding: 7px 14px;
   border-radius: 4px;
   text-decoration: none;
   text-align: center;
   transition: background 0.2s;
 }

 .fp-biodata-btn:hover {
   background: #922b21;
 }

 /* Info column */
 .fp-hero-info-col {
   flex: 1;
 }

 .fp-eyebrow {
   font-family: 'Poppins', sans-serif;
   font-size: 0.78rem;
   font-weight: 600;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: #c0392b;
   margin: 0 0 6px;
 }

 .fp-name {
   font-family: 'Playfair Display', serif;
   font-size: 1.9rem;
   font-weight: 700;
   color: #1a1a2e;
   margin: 0 0 10px;
   line-height: 1.2;
 }

 .fp-name-divider {
   width: 56px;
   height: 3px;
   background: linear-gradient(to right, #4b0082, #c0392b);
   border-radius: 2px;
   margin-bottom: 14px;
 }

 .fp-tagline {
   font-family: 'Poppins', sans-serif;
   font-size: 0.9rem;
   color: #555;
   line-height: 1.75;
   margin: 0 0 20px;
 }

 /* Quick facts grid */
 .fp-facts-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
 }

 @media (max-width: 500px) {
   .fp-facts-grid {
     grid-template-columns: 1fr;
   }
 }

 .fp-fact {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   background: #fff;
   border: 1px solid #e8d5f5;
   border-radius: 6px;
   padding: 10px 12px;
 }

 .fp-fact-icon {
   font-size: 1.3rem;
   flex-shrink: 0;
   margin-top: 2px;
 }

 .fp-fact-label {
   font-family: 'Poppins', sans-serif;
   font-size: 0.7rem;
   font-weight: 700;
   color: #4b0082;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin: 0 0 2px;
 }

 .fp-fact-value {
   font-family: 'Poppins', sans-serif;
   font-size: 0.78rem;
   color: #444;
   margin: 0;
   line-height: 1.5;
 }

 /* ── CONTENT SECTIONS ────────────────────────────────────── */
 .fp-section {
   margin-bottom: 36px;
 }

 .fp-section-header {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 14px;
   padding-bottom: 10px;
   border-bottom: 2px solid #f0e0ff;
 }

 .fp-section-icon {
   font-size: 1.4rem;
 }

 .fp-section-header h3 {
   font-family: 'Poppins', sans-serif;
   font-size: 1rem;
   font-weight: 700;
   color: #4b0082;
   margin: 0;
 }

 .fp-section-body p {
   font-family: 'Poppins', sans-serif;
   font-size: 0.9rem;
   color: #444;
   line-height: 1.8;
   margin: 0 0 12px;
 }

 /* Highlight grid (stats) */
 .fp-highlight-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   margin-top: 16px;
 }

 @media (max-width: 600px) {
   .fp-highlight-grid {
     grid-template-columns: 1fr;
   }
 }

 .fp-highlight {
   background: linear-gradient(135deg, #4b0082 0%, #7b1fa2 100%);
   color: #fff;
   border-radius: 8px;
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 6px;
 }

 .fp-hl-num {
   font-family: 'Poppins', sans-serif;
   font-size: 1.8rem;
   font-weight: 800;
   color: #f5d76e;
   line-height: 1;
 }

 .fp-hl-text {
   font-family: 'Poppins', sans-serif;
   font-size: 0.78rem;
   line-height: 1.5;
   opacity: 0.92;
 }

 /* List style */
 .fp-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }

 .fp-list li {
   font-family: 'Poppins', sans-serif;
   font-size: 0.88rem;
   color: #444;
   padding-left: 20px;
   position: relative;
   line-height: 1.6;
 }

 .fp-list li::before {
   content: '▸';
   position: absolute;
   left: 0;
   color: #4b0082;
   font-size: 0.8rem;
   top: 2px;
 }

 /* Education grid */
 .fp-edu-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
   margin-top: 12px;
 }

 @media (max-width: 600px) {
   .fp-edu-grid {
     grid-template-columns: 1fr;
   }
 }

 .fp-edu-card {
   background: #fff;
   border-left: 3px solid #4b0082;
   border-radius: 0 6px 6px 0;
   padding: 10px 14px;
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
 }

 .fp-edu-name {
   font-family: 'Poppins', sans-serif;
   font-size: 0.82rem;
   font-weight: 600;
   color: #1a1a2e;
   margin: 0 0 3px;
   line-height: 1.4;
 }

 .fp-edu-role {
   font-family: 'Poppins', sans-serif;
   font-size: 0.75rem;
   color: #c0392b;
   font-weight: 500;
   margin: 0;
 }

 /* Awards grid */
 .fp-awards-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
 }

 @media (max-width: 800px) {
   .fp-awards-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 500px) {
   .fp-awards-grid {
     grid-template-columns: 1fr;
   }
 }

 .fp-award-card {
   background: #fffdf0;
   border: 1px solid #f0d060;
   border-top: 3px solid #d4a017;
   border-radius: 6px;
   padding: 12px 14px;
   transition: transform 0.2s, box-shadow 0.2s;
 }

 .fp-award-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 16px rgba(212, 160, 23, 0.2);
 }

 .fp-award-year {
   font-family: 'Poppins', sans-serif;
   font-size: 0.78rem;
   font-weight: 800;
   color: #d4a017;
   margin: 0 0 4px;
 }

 .fp-award-title {
   font-family: 'Poppins', sans-serif;
   font-size: 0.82rem;
   font-weight: 700;
   color: #1a1a2e;
   margin: 0 0 4px;
   line-height: 1.3;
 }

 .fp-award-by {
   font-family: 'Poppins', sans-serif;
   font-size: 0.73rem;
   color: #666;
   margin: 0;
   line-height: 1.4;
 }

 /* ── PHOTO GALLERY ───────────────────────────────────────── */
 .fp-gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
 }

 @media (max-width: 700px) {
   .fp-gallery {
     grid-template-columns: repeat(3, 1fr);
   }
 }

 @media (max-width: 480px) {
   .fp-gallery {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 .fp-gallery-item {
   display: block;
   border-radius: 6px;
   overflow: hidden;
   border: 2px solid #e8d5f5;
   transition: transform 0.2s, border-color 0.2s;
   aspect-ratio: 1;
 }

 .fp-gallery-item:hover {
   transform: scale(1.04);
   border-color: #4b0082;
 }

 .fp-gallery-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

 /*Department*/

 /* ============================================================
   departments.css  —  ESEC Departments page
   BITSathy-inspired card grid with filters, icons, hover effects
   ============================================================ */

 /* ── Section wrapper ─────────────────────────────────────── */
 .dept-section {
   background: #f8f5ff;
   padding: 60px 0 80px;
 }

 /* ── Section header ──────────────────────────────────────── */
 .dept-section-header {
   text-align: center;
   margin-bottom: 40px;
 }

 .dept-tag {
   display: inline-block;
   background: #582b84;
   color: #ffed00;
   font-family: 'Poppins', sans-serif;
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   padding: 5px 16px;
   border-radius: 20px;
   margin-bottom: 12px;
 }

 .dept-title {
   font-family: 'Playfair Display', serif;
   font-size: 2.2rem;
   font-weight: 800;
   color: #1a1a2e;
   margin: 0 0 10px;
 }

 .dept-sub {
   font-family: 'Poppins', sans-serif;
   font-size: 0.95rem;
   color: #666;
   max-width: 600px;
   margin: 0 auto 18px;
   line-height: 1.7;
 }

 .dept-divider {
   width: 60px;
   height: 4px;
   background: linear-gradient(to right, #582b84, #d20f0c);
   border-radius: 2px;
   margin: 0 auto;
 }

 /* ── Filter tabs ─────────────────────────────────────────── */
 .dept-filters {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 36px;
 }

 .dept-filter-btn {
   font-family: 'Poppins', sans-serif;
   font-size: 0.78rem;
   font-weight: 600;
   padding: 8px 22px;
   border-radius: 25px;
   border: 2px solid #582b84;
   background: transparent;
   color: #582b84;
   cursor: pointer;
   transition: all 0.2s;
   white-space: nowrap;
 }

 .dept-filter-btn:hover,
 .dept-filter-btn.active {
   background: #582b84;
   color: #fff;
   box-shadow: 0 4px 14px rgba(88, 43, 132, 0.3);
 }

 /* ── Cards grid ──────────────────────────────────────────── */
 .dept-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-bottom: 60px;
 }

 @media (max-width: 1100px) {
   .dept-grid {
     grid-template-columns: repeat(3, 1fr);
   }
 }

 @media (max-width: 768px) {
   .dept-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 480px) {
   .dept-grid {
     grid-template-columns: 1fr;
   }
 }

 /* ── Individual card ─────────────────────────────────────── */
 .dept-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   background: #fff;
   border-radius: 12px;
   padding: 28px 18px 20px;
   text-decoration: none;
   border: 2px solid #ede8f8;
   box-shadow: 0 2px 10px rgba(88, 43, 132, 0.06);
   transition: all 0.28s ease;
   position: relative;
   overflow: hidden;
   text-align: center;
   animation: deptFadeIn 0.4s ease forwards;
 }

 .dept-card::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: linear-gradient(to right, #582b84, #d20f0c);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.3s ease;
 }

 .dept-card:hover {
   transform: translateY(-6px);
   border-color: #582b84;
   box-shadow: 0 12px 32px rgba(88, 43, 132, 0.18);
 }

 .dept-card:hover::before {
   transform: scaleX(1);
 }

 /* Featured card (CSE) */
 .dept-card.featured {
   border-color: #582b84;
   background: linear-gradient(135deg, #f9f4ff 0%, #fff 100%);
 }

 /* ── Card icon ───────────────────────────────────────────── */
 .dept-card-icon {
   width: 70px;
   height: 70px;
   border-radius: 50%;
   background: linear-gradient(135deg, #582b84, #7b3fa8);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 16px;
   transition: transform 0.3s, box-shadow 0.3s;
   flex-shrink: 0;
 }

 .dept-card-icon i {
   font-size: 1.6rem;
   color: #fff;
 }

 .dept-card:hover .dept-card-icon {
   transform: scale(1.1) rotate(-5deg);
   box-shadow: 0 8px 20px rgba(88, 43, 132, 0.35);
 }

 .dept-card.featured .dept-card-icon {
   background: linear-gradient(135deg, #582b84, #3d1a66);
 }

 /* ── Card body ───────────────────────────────────────────── */
 .dept-card-body {
   flex: 1;
 }

 .dept-card-name {
   font-family: 'Poppins', sans-serif;
   font-size: 0.88rem;
   font-weight: 700;
   color: #1a1a2e;
   margin: 0 0 6px;
   line-height: 1.35;
   transition: color 0.2s;
 }

 .dept-card:hover .dept-card-name {
   color: #582b84;
 }

 .dept-card-type {
   font-family: 'Poppins', sans-serif;
   font-size: 0.72rem;
   font-weight: 600;
   color: #d20f0c;
   margin: 0;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 /* ── Card arrow ──────────────────────────────────────────── */
 .dept-card-arrow {
   margin-top: 14px;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #f0e8ff;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s, transform 0.2s;
   flex-shrink: 0;
 }

 .dept-card-arrow i {
   font-size: 0.72rem;
   color: #582b84;
   transition: transform 0.2s;
 }

 .dept-card:hover .dept-card-arrow {
   background: #582b84;
   transform: scale(1.1);
 }

 .dept-card:hover .dept-card-arrow i {
   color: #fff;
   transform: translateX(2px);
 }

 /* ── Fade-in animation ───────────────────────────────────── */
 @keyframes deptFadeIn {
   from {
     opacity: 0;
     transform: translateY(16px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* ── Stats bar ───────────────────────────────────────────── */
 .dept-stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
   background: linear-gradient(135deg, #582b84, #3d1a66);
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 8px 30px rgba(88, 43, 132, 0.3);
 }

 @media (max-width: 640px) {
   .dept-stats {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 .dept-stat-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 28px 16px;
   border-right: 1px solid rgba(255, 255, 255, 0.12);
   text-align: center;
 }

 .dept-stat-item:last-child {
   border-right: none;
 }

 .dept-stat-num {
   font-family: 'Poppins', sans-serif;
   font-size: 2rem;
   font-weight: 800;
   color: #ffed00;
   line-height: 1;
   margin-bottom: 6px;
 }

 .dept-stat-label {
   font-family: 'Poppins', sans-serif;
   font-size: 0.75rem;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.8);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 /*commitees*/

 /* ============================================================
  committees.css  —  Statutory Body & Committees page
   ============================================================ */

 .comm-intro {
   font-family: 'Poppins', sans-serif;
   font-size: 0.95rem;
   color: #555;
   line-height: 1.8;
   margin: 0 0 28px;
   padding: 16px 20px;
   background: #f8f5ff;
   border-left: 4px solid #582b84;
   border-radius: 0 6px 6px 0;
 }

 /* Filter row */
 .comm-filter-row {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 28px;
 }

 .comm-filter-btn {
   font-family: 'Poppins', sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
   padding: 7px 18px;
   border-radius: 20px;
   border: 2px solid #582b84;
   background: transparent;
   color: #582b84;
   cursor: pointer;
   transition: all 0.2s;
   white-space: nowrap;
 }

 .comm-filter-btn:hover,
 .comm-filter-btn.active {
   background: #582b84;
   color: #fff;
   box-shadow: 0 3px 10px rgba(88, 43, 132, 0.25);
 }

 /* Cards grid */
 .comm-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 22px;
   margin-bottom: 48px;
 }

 @media (max-width: 860px) {
   .comm-grid {
     grid-template-columns: 1fr;
   }
 }

 /* Individual card */
 .comm-card {
   display: flex;
   flex-direction: column;
   background: #fff;
   border-radius: 10px;
   border: 1px solid #e8e0f5;
   box-shadow: 0 2px 12px rgba(88, 43, 132, 0.07);
   overflow: hidden;
   transition: transform 0.25s, box-shadow 0.25s;
   animation: commFadeIn 0.4s ease forwards;
 }

 .comm-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 10px 28px rgba(88, 43, 132, 0.14);
 }

 @keyframes commFadeIn {
   from {
     opacity: 0;
     transform: translateY(14px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* Card header */
 .comm-card-header {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 18px 20px;
   background: #faf7ff;
   border-bottom: 1px solid #ede6ff;
 }

 .comm-icon-wrap {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: linear-gradient(135deg, #582b84, #9b59b6);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   box-shadow: 0 3px 10px rgba(88, 43, 132, 0.25);
 }

 .comm-icon-wrap i {
   font-size: 1.25rem;
   color: #fff;
 }

 .comm-title-block {
   flex: 1;
 }

 .comm-name {
   font-family: 'Poppins', sans-serif;
   font-size: 0.92rem;
   font-weight: 700;
   color: #1a1a2e;
   margin: 0 0 5px;
   line-height: 1.3;
 }

 /* Badge pills */
 .comm-badge {
   display: inline-block;
   font-family: 'Poppins', sans-serif;
   font-size: 0.62rem;
   font-weight: 700;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   padding: 3px 10px;
   border-radius: 12px;
 }

 .comm-badge.mandatory {
   background: #fde8e8;
   color: #d20f0c;
 }

 .comm-badge.academic {
   background: #e8f0fe;
   color: #0b5394;
 }

 .comm-badge.admin {
   background: #fef3e2;
   color: #b45309;
 }

 .comm-badge.quality {
   background: #e6f4ea;
   color: #1e7e34;
 }

 .comm-badge.student {
   background: #f3e8ff;
   color: #582b84;
 }

 /* Card body */
 .comm-card-body {
   padding: 18px 20px 20px;
   flex: 1;
 }

 .comm-card-body>p {
   font-family: 'Poppins', sans-serif;
   font-size: 0.84rem;
   color: #555;
   line-height: 1.75;
   margin: 0 0 14px;
 }

 .comm-functions-title {
   font-family: 'Poppins', sans-serif;
   font-size: 0.78rem;
   font-weight: 700;
   color: #582b84;
   margin: 0 0 10px;
   display: flex;
   align-items: center;
   gap: 6px;
   text-transform: uppercase;
   letter-spacing: 0.4px;
 }

 .comm-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 7px;
 }

 .comm-list li {
   font-family: 'Poppins', sans-serif;
   font-size: 0.8rem;
   color: #444;
   padding-left: 18px;
   position: relative;
   line-height: 1.55;
 }

 .comm-list li::before {
   content: '▸';
   position: absolute;
   left: 0;
   top: 1px;
   color: #582b84;
   font-size: 0.72rem;
 }

 /* Stats row */
 .comm-stats-row {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
   background: linear-gradient(135deg, #582b84, #3a1a66);
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 6px 24px rgba(88, 43, 132, 0.25);
 }

 @media (max-width: 600px) {
   .comm-stats-row {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 .comm-stat {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 24px 12px;
   border-right: 1px solid rgba(255, 255, 255, 0.12);
   text-align: center;
 }

 .comm-stat:last-child {
   border-right: none;
 }

 .cs-num {
   font-family: 'Poppins', sans-serif;
   font-size: 1.75rem;
   font-weight: 800;
   color: #ffed00;
   line-height: 1;
   margin-bottom: 5px;
 }

 .cs-label {
   font-family: 'Poppins', sans-serif;
   font-size: 0.7rem;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.8);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 /* Mobile */
 @media (max-width: 560px) {
   .comm-intro {
     font-size: 0.85rem;
     padding: 12px 14px;
   }

   .comm-card-header {
     padding: 14px;
     gap: 10px;
   }

   .comm-icon-wrap {
     width: 44px;
     height: 44px;
   }

   .comm-icon-wrap i {
     font-size: 1rem;
   }

   .comm-name {
     font-size: 0.85rem;
   }

   .comm-card-body {
     padding: 14px;
   }

   .cs-num {
     font-size: 1.4rem;
   }
 }

 
 /* ============================================================
   policy-documents.css  —  Policy Documents page
   ============================================================ */

/* Intro */
.pd-intro {
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  color: #555;
  line-height: 1.8;
  margin: 0 0 24px;
  padding: 14px 18px;
  background: #f8f5ff;
  border-left: 4px solid #582b84;
  border-radius: 0 6px 6px 0;
}

/* ── Toolbar (search + filters) ──────────────────────────── */
.pd-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.pd-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 2px solid #e0d0f5;
  border-radius: 8px;
  padding: 0 14px;
  transition: border-color 0.2s;
}
.pd-search-wrap:focus-within { border-color: #582b84; }
.pd-search-wrap i { color: #582b84; font-size: 0.85rem; flex-shrink: 0; }

.pd-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  color: #333;
  padding: 11px 0;
  background: transparent;
}
.pd-search-input::placeholder { color: #aaa; }

.pd-filter-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pd-filter-btn {
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 20px;
  border: 2px solid #582b84;
  background: transparent;
  color: #582b84;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.pd-filter-btn:hover,
.pd-filter-btn.active {
  background: #582b84;
  color: #fff;
  box-shadow: 0 3px 10px rgba(88,43,132,0.25);
}

/* Count bar */
.pd-count-bar {
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ede8f5;
}
.pd-count-bar span { font-weight: 700; color: #582b84; font-size: 1rem; }

/* ── Category header ─────────────────────────────────────── */
.pd-category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #ede8f5;
}

.pd-cat-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pd-cat-icon i { font-size: 0.95rem; color: #fff; }

.pd-category-header h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
}

/* ── Document item row ───────────────────────────────────── */
.pd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  background: #fff;
  border: 1px solid #ede8f5;
  border-radius: 8px;
  margin-bottom: 8px;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.pd-item:hover {
  border-color: #c4a8e8;
  box-shadow: 0 4px 14px rgba(88,43,132,0.1);
  transform: translateX(3px);
}

.pd-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

/* PDF icon */
.pd-pdf-icon {
  width: 40px; height: 40px;
  background: #fde8e8;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pd-pdf-icon i { font-size: 1.1rem; color: #d20f0c; }

.pd-item-info { min-width: 0; }

.pd-item-name {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-item-meta {
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  color: #888;
  margin: 0;
}

/* Download button */
.pd-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #582b84;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.2s;
}
.pd-download-btn:hover {
  background: #3d1a66;
  transform: scale(1.04);
}
.pd-download-btn i { font-size: 0.65rem; }

/* No results */
.pd-no-results {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
  color: #aaa;
  gap: 12px;
}
.pd-no-results i  { font-size: 2.5rem; }
.pd-no-results p  { font-family: 'Poppins', sans-serif; font-size: 0.9rem; margin: 0; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pd-item { flex-direction: column; align-items: flex-start; }
  .pd-download-btn { width: 100%; justify-content: center; }
  .pd-item-name { white-space: normal; }
}

/*dept-agri*/

/* ══════════════════════════════════════════
       PHOTO SLIDER
    ══════════════════════════════════════════ */
    .dept-hero {
      height: 70vh;
      min-height: 500px;
    }
    .dept-hero .slide {
      background-size: cover;
      background-position: center;
      background-attachment: scroll;
    }
    @media (max-width: 900px) {
      .dept-hero { 
        height: 60vh; 
        min-height: 400px;
      }
    }
@media (max-width: 640px) {
      .dept-hero { 
        height: 50vh; 
        min-height: 300px;
      }
      .page-main-content ul {
        padding-left: 0;
      }
      .page-main-content ul li {
        margin-bottom: 12px;
        text-align: left;
      }
    }

    /* Responsive content */
    .page-main-content { 
      padding: 40px 32px; 
    }
    @media (max-width: 900px) {
      .page-main-content { 
        padding: 32px 24px; 
      }
    }
    @media (max-width: 640px) {
      .page-main-content { 
        padding: 24px 18px; 
      }
      .content-highlight, 
      .kural-block { 
        padding: 20px 16px; 
        font-size: 0.92rem; 
      }
      .page-main-content h3 { 
        font-size: 1.25rem; 
        margin-top: 24px;
      }
      .page-main-content h2 { 
        font-size: 1.6rem; 
      }
      .page-main-content ul li { 
        font-size: 0.9rem; 
        padding: 8px 0 8px 20px; 
      }
      .page-main-content p { 
        font-size: 0.92rem; 
        line-height: 1.75; 
      }
    }

    /* Table responsive wrapper */
    .dept-table-wrap {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(88,43,132,0.08);
    }

/* ══════════════════════════════════════════
       PHOTO SLIDER
    ══════════════════════════════════════════ */
    .dept-slider {
      position: relative;
      width: 100%;
      height: 460px;
      overflow: hidden;
      background: #111;
    }
    .dept-slide {
      position: absolute; inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 0.8s ease;
    }
    .dept-slide.active { opacity: 1; }

    .dept-arrow {
      position: absolute; top: 50%; transform: translateY(-50%);
      z-index: 10;
      background: rgba(255,255,255,0.18); color: #fff;
      border: 2px solid rgba(255,255,255,0.45); border-radius: 50%;
      width: 46px; height: 46px; font-size: 1.9rem;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      backdrop-filter: blur(4px);
      transition: background 0.2s, transform 0.2s;
    }
    .dept-arrow:hover { background: rgba(210,15,12,0.85); border-color: transparent; transform: translateY(-50%) scale(1.08); }
    .dept-prev { left: 16px; }
    .dept-next { right: 16px; }

    .dept-dots {
      position: absolute; bottom: 13px;
      left: 50%; transform: translateX(-50%);
      display: flex; gap: 8px; z-index: 10;
    }
    .dept-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: rgba(255,255,255,0.4);
      border: none; cursor: pointer; padding: 0;
      transition: background 0.2s, transform 0.2s;
    }
    .dept-dot.active { background: #fff; transform: scale(1.3); }

    .slider-placeholder {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 12px; color: #555;
      font-family: 'Poppins', sans-serif;
      font-size: 0.88rem; text-align: center;
    }
    .slider-placeholder svg { opacity: 0.3; }

    /* ══════════════════════════════════════════
      UPLOAD PANEL
    ══════════════════════════════════════════ */
    #uploadPanel {
      width: 100%;
      background: #1a1a2e;
      border-bottom: 3px solid #582b84;
    }
    #up-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
    #up-header {
      display: flex; align-items: center; gap: 14px;
      padding: 12px 0 10px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      flex-wrap: wrap;
    }
    #up-title { display: flex; align-items: center; gap: 10px; flex: 1; }
    #up-title strong { display: block; color: #fff; font-size: 0.92rem; font-weight: 600; font-family: 'Poppins',sans-serif; }
    #up-title .sub { color: #888; font-size: 0.73rem; font-family: 'Poppins',sans-serif; }
    #upBtn {
      display: inline-flex; align-items: center; gap: 7px;
      background: #582b84; color: #fff; border: none; border-radius: 6px;
      padding: 9px 18px; font-size: 0.82rem; font-weight: 600;
      font-family: 'Poppins',sans-serif; cursor: pointer;
      transition: background 0.2s; white-space: nowrap;
    }
    #upBtn:hover { background: #d20f0c; }
    #up-grid {
      display: flex; flex-wrap: wrap; gap: 10px;
      padding: 12px 0; min-height: 86px; align-items: center;
    }
    #up-grid.empty { justify-content: center; }
    #up-empty {
      display: flex; flex-direction: column; align-items: center;
      gap: 7px; color: #555; font-family: 'Poppins',sans-serif;
      font-size: 0.8rem; text-align: center;
    }
    #up-empty p { margin: 0; color: #666; }
    #up-empty strong { color: #999; }

    .up-thumb {
      position: relative; width: 110px; height: 70px;
      border-radius: 6px; overflow: hidden;
      border: 2px solid transparent; cursor: grab;
      transition: border-color 0.2s, transform 0.15s; flex-shrink: 0;
    }
    .up-thumb:hover { border-color: #582b84; transform: scale(1.04); }
    .up-thumb.active-slide { border-color: #ffed00; }
    .up-thumb.dragging { opacity: 0.35; }
    .up-thumb.drag-over { border-color: #d20f0c; transform: scale(1.07); }
    .up-thumb img { width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; display:block; }
    .up-thumb-rm {
      position: absolute; top: 3px; right: 3px;
      width: 20px; height: 20px; border-radius: 50%;
      background: rgba(210,15,12,0.9); color: #fff;
      border: none; font-size: 0.68rem; font-weight: 700;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity 0.2s; padding: 0;
    }
    .up-thumb:hover .up-thumb-rm { opacity: 1; }
    .up-thumb-num {
      position: absolute; bottom: 3px; left: 5px;
      background: rgba(0,0,0,0.55); color: #fff;
      font-size: 0.6rem; font-weight: 600; font-family: 'Poppins',sans-serif;
      padding: 1px 5px; border-radius: 3px;
    }
    #up-footer {
      display: flex; justify-content: space-between; align-items: center;
      padding: 7px 0 11px;
      border-top: 1px solid rgba(255,255,255,0.07);
      font-family: 'Poppins',sans-serif;
    }
    #up-count { color: #999; font-size: 0.74rem; }
    #up-hint  { color: #555; font-size: 0.7rem; }

    /* ══════════════════════════════════════════
      DEPT-SPECIFIC CONTENT STYLES
    ══════════════════════════════════════════ */
    .kural-block {
      background: #f9f4ff;
      border-left: 4px solid #582b84;
      border-radius: 0 8px 8px 0;
      padding: 16px 22px; margin: 16px 0;
    }
    .kural-block p { font-size: 1rem; color: #582b84; font-weight: 600; margin-bottom: 4px; }
    .kural-block .translation { font-size: 0.84rem; color: #666; font-style: italic; font-weight: 400; margin: 0; }

    .dept-table {
      width: 100%;
      border-collapse: collapse;
      font-family: 'Poppins', sans-serif;
      font-size: 0.85rem;
      margin-top: 14px;
    }
    .dept-table th {
      background: #582b84;
      color: #fff;
      padding: 13px 18px;
      text-align: left;
      font-weight: 600;
      letter-spacing: 0.3px;
    }
    .dept-table th:first-child { border-radius: 8px 0 0 0; }
    .dept-table th:last-child  { border-radius: 0 8px 0 0; }
    .dept-table td {
      padding: 13px 18px;
      border-bottom: 1px solid #eee;
      color: #444;
      vertical-align: middle;
    }
    .dept-table tr:last-child td { border-bottom: none; }
    .dept-table tr:nth-child(even) td { background: #f9f4ff; }
    .dept-table tbody tr {
      transition: background 0.15s;
    }
    .dept-table tbody tr:hover td { background: #ede7f6; }

    /* ── .td-label hidden on desktop ── */
    .dept-table .td-label { display: none; }
    .dept-table .td-val   { display: inline; }

    /* ── Card-stack layout on mobile ── */
    @media (max-width: 768px) {
      /* Hide the header row */
      .dept-table thead { display: none; }

      /* Stack everything as blocks */
      .dept-table,
      .dept-table tbody,
      .dept-table tr,
      .dept-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
      }

      /* Each row becomes a card */
      .dept-table tbody tr {
        background: #fff;
        border: 1px solid #d8c8f0;
        border-radius: 12px;
        margin-bottom: 16px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(88,43,132,0.10);
      }

      /* Reset alternating row bg */
      .dept-table tbody tr:nth-child(even) td,
      .dept-table tbody tr:hover td {
        background: #fff;
      }

      /* Each cell */
      .dept-table td {
        padding: 0;
        border-bottom: 1px solid #ede7f6;
      }
      .dept-table td:last-child { border-bottom: none; }

      /* Show the label — purple header strip */
      .dept-table .td-label {
        display: block;
        background: #582b84;
        color: #fff;
        font-family: 'Poppins', sans-serif;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        padding: 6px 14px;
        margin: 0;
      }

      /* Value below the label */
      .dept-table .td-val {
        display: block;
        font-family: 'Poppins', sans-serif;
        font-size: 0.92rem;
        font-weight: 500;
        color: #222;
        padding: 10px 14px;
      }
    }

    @media (max-width: 900px) { .dept-slider { height: 280px; } }
    @media (max-width: 600px) {
      .dept-slider { height: 200px; }
      .dept-arrow  { width: 36px; height: 36px; font-size: 1.4rem; }
      #up-hint { display: none; }
      .up-thumb { width: 80px; height: 52px; }
    }

/* ════════════════════════════════════════════════════════
   DEPT PAGE — sidebar colour override (purple theme)
   Add class="dept-page" to <body> on dept pages
════════════════════════════════════════════════════════ */
.dept-page .page-sidebar ul li a:hover,
.dept-page .page-sidebar ul li a.active {
  background: #f5eeff;
  color: #582b84;
  border-left-color: #582b84;
  padding-left: 26px;
}

.dept-page .page-sidebar ul li a::before {
  color: #582b84;
}


/* ════════════════════════════════════════════════════════
  DEPT TABLE — responsive (card stack on mobile)
════════════════════════════════════════════════════════ */

/* Wrapper */
.dept-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  margin-top: 14px;
  box-shadow: 0 2px 12px rgba(88, 43, 132, 0.08);
}

/* Base table styles */
.dept-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
}

.dept-table th {
  background: #582b84;
  color: #fff;
  padding: 13px 18px;
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.dept-table th:first-child { border-radius: 8px 0 0 0; }
.dept-table th:last-child  { border-radius: 0 8px 0 0; }

.dept-table td {
  padding: 13px 18px;
  border-bottom: 1px solid #eee;
  color: #444;
  vertical-align: middle;
}

.dept-table tr:last-child td { border-bottom: none; }
.dept-table tr:nth-child(even) td { background: #f9f4ff; }
.dept-table tbody tr:hover td { background: #ede7f6; }

/* Hide mobile labels on desktop */
.dept-table .td-label { display: none; }
.dept-table .td-val   { display: inline; }

/* ── Mobile card stack ── */
@media (max-width: 768px) {
  .dept-table thead { display: none; }

  .dept-table,
  .dept-table tbody,
  .dept-table tr,
  .dept-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .dept-table tbody tr {
    background: #fff;
    border: 1px solid #d8c8f0;
    border-radius: 10px;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(88, 43, 132, 0.09);
  }

  .dept-table tbody tr:nth-child(even) td,
  .dept-table tbody tr:hover td { background: #fff; }

  .dept-table td {
    padding: 0;
    border-bottom: 1px solid #ede7f6;
  }
  .dept-table td:last-child { border-bottom: none; }

  /* Purple label strip */
  .dept-table .td-label {
    display: block;
    background: #582b84;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding: 5px 14px;
  }

  /* Value */
  .dept-table .td-val {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #222;
    padding: 10px 14px;
  }
}

/* ── Dept-specific slider overrides ── */
.dept-hero { height: 70vh; min-height: 500px; }
.dept-hero .slide { background-size: cover; background-position: center; }

@media (max-width: 900px) { .dept-hero { height: 60vh; min-height: 400px; } }
@media (max-width: 640px) { .dept-hero { height: 50vh; min-height: 300px; } }

/* Recruiters */
/* ── Recruiters Page Styles ── */

        .recruiters-section {
            padding: 40px 0 60px;
        }

        .section-heading {
            display: inline-block;
            background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
            color: #fff;
            font-family: 'Poppins', sans-serif;
            font-size: 1.35rem;
            font-weight: 800;
            padding: 10px 40px;
            border-radius: 50px;
            border: 3px solid #1b5e20;
            margin: 10px 0 28px;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 16px rgba(46,125,50,0.18);
            text-align: center;
        }

        .section-block {
            margin-bottom: 48px;
        }

        .section-block-header {
            text-align: center;
            margin-bottom: 24px;
        }

        .logo-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 14px;
        }

        @media (max-width: 1100px) {
            .logo-grid { grid-template-columns: repeat(4, 1fr); }
        }
        @media (max-width: 700px) {
            .logo-grid { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 480px) {
            .logo-grid { grid-template-columns: repeat(2, 1fr); }
        }

        .logo-card {
            border: 2px solid #e53935;
            border-radius: 8px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 10px;
            min-height: 80px;
            transition: transform 0.2s, box-shadow 0.2s;
            overflow: hidden;
        }

        .logo-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.13);
        }

        .logo-card img {
            max-width: 100%;
            max-height: 56px;
            object-fit: contain;
            display: block;
        }

        /* Fallback text logo for companies with no image URL */
        .logo-text-fallback {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            font-size: 0.78rem;
            color: #333;
            text-align: center;
            line-height: 1.2;
        }

        .page-main-content h2.rec-main-title {
            font-family: 'Poppins', sans-serif;
            font-size: 1.7rem;
            font-weight: 800;
            color: #1a237e;
            margin-bottom: 6px;
        }
        .page-main-content .rec-sub {
            color: #666;
            font-size: 0.92rem;
            margin-bottom: 30px;
        }

        .stats-row {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 36px;
        }
        .stat-chip {
            background: linear-gradient(135deg, #582b84, #7b3fa0);
            color: #fff;
            border-radius: 50px;
            padding: 8px 22px;
            font-weight: 700;
            font-size: 0.88rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .stat-chip i { font-size: 1rem; }

        .divider-line {
            border: none;
            border-top: 2px dashed #e0e0e0;
            margin: 36px 0;
        }

/* ══════════════════════════════════════════════
       NAV FIX — mobile accordion dropdown
    ══════════════════════════════════════════════ */
    @media (max-width: 680px) {
      /* Each nav-item gets a tap-target arrow */
      .hdr-nav-inner .nav-item > .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .hdr-nav-inner .nav-item > .nav-link .nav-arrow {
        font-size: 0.65rem;
        transition: transform 0.2s;
        margin-left: 6px;
      }
      .hdr-nav-inner .nav-item.open > .nav-link .nav-arrow {
        transform: rotate(180deg);
      }
      /* Dropdown shown when .open added by JS */
      .hdr-nav-inner .nav-item.open > .dropdown {
        display: block !important;
      }
    }

    /* Active nav link highlight */
    .hdr-nav-inner .nav-link.active-page,
    .hdr-nav-inner .nav-item:has(.active-page) > .nav-link {
      background: rgba(255,255,255,0.15);
      color: #ffed00;
    }

    /* ── Page heading styling ─────────────────────── */
    .lib-main-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.7rem;
      font-weight: 800;
      color: #582b84;
      margin-bottom: 4px;
      padding-bottom: 12px;
      border-bottom: 3px solid #d20f0c;
      display: inline-block;
    }
    .lib-intro {
      font-family: 'Poppins', sans-serif;
      font-size: 0.88rem;
      color: #666;
      margin-bottom: 24px;
      line-height: 1.7;
    }

    /* highlight box */
    .lib-highlight-box {
      background: linear-gradient(135deg, #582b84 0%, #2d3e7a 100%);
      color: #fff;
      border-radius: 8px;
      padding: 22px 26px;
      margin: 22px 0;
      position: relative;
      overflow: hidden;
    }
    .lib-highlight-box::before {
      content: '';
      position: absolute;
      top: -30px; right: -30px;
      width: 120px; height: 120px;
      background: rgba(255,255,255,0.05);
      border-radius: 50%;
    }
    .lib-highlight-box h4 {
      font-family: 'Poppins', sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      color: #ffed00;
      margin: 0 0 8px;
    }
    .lib-highlight-box p {
      font-family: 'Poppins', sans-serif;
      font-size: 0.86rem;
      color: rgba(255,255,255,0.88);
      line-height: 1.8;
      margin: 0;
    }

    /* Divider */
    .lib-divider {
      border: none;
      border-top: 2px dashed #ede7f6;
      margin: 32px 0;
    }

     /* ═══════════════════════════════════════════
       HOD MESSAGE — inline styles scoped to page
    ═══════════════════════════════════════════ */

    /* ── Hero profile card ──────────────────── */
    .hod-profile-card {
      display: flex;
      gap: 32px;
      align-items: flex-start;
      background: linear-gradient(135deg, var(--navy, #582b84) 0%, #2d1a55 100%);
      border-radius: 12px;
      padding: 32px;
      margin: 0 0 32px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(88,43,132,0.3);
    }

    /* decorative circle */
    .hod-profile-card::before {
      content: '';
      position: absolute;
      top: -40px; right: -40px;
      width: 180px; height: 180px;
      background: rgba(255,255,255,0.05);
      border-radius: 50%;
    }
    .hod-profile-card::after {
      content: '';
      position: absolute;
      bottom: -60px; left: -20px;
      width: 140px; height: 140px;
      background: rgba(255,255,255,0.03);
      border-radius: 50%;
    }

    /* Photo frame */
    .hod-photo-wrap {
      flex-shrink: 0;
      width: 160px;
      height: 190px;
      border-radius: 8px;
      overflow: hidden;
      border: 3px solid #d4a017;
      box-shadow: 0 6px 20px rgba(0,0,0,0.3);
      position: relative;
      z-index: 1;
      background: rgba(255,255,255,0.1);
    }
    .hod-photo-wrap img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
    }
    /* placeholder icon if no photo */
    .hod-photo-placeholder {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.08);
    }
    .hod-photo-placeholder i {
      font-size: 4rem;
      color: rgba(255,255,255,0.3);
    }

    /* Info column */
    .hod-info-col {
      flex: 1;
      position: relative;
      z-index: 1;
    }

    .hod-label {
      display: inline-block;
      background: #d20f0c;
      font-family: 'Poppins', sans-serif;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 12px;
    }

    .hod-name {
      font-family: 'Playfair Display', serif;
      font-size: 1.65rem;
      font-weight: 700;
      margin: 0 0 4px;
      line-height: 1.2;
    }

    .hod-designation {
      font-family: 'Poppins', sans-serif;
      font-size: 0.88rem;
      font-weight: 600;
      color: #ffed00;
      margin: 0 0 2px;
    }

    .hod-dept {
      font-family: 'Poppins', sans-serif;
      font-size: 0.82rem;
      color:#fff;
      margin: 0 0 18px;
    }

    /* Qualification tags */
    .hod-quals {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 18px;
    }
    .hod-qual-tag {
      font-family: 'Poppins', sans-serif;
      font-size: 0.72rem;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 20px;
      background: rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.9);
      border: 1px solid rgba(255,255,255,0.2);
    }

    /* Quick stat pills */
    .hod-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }
    .hod-stat-pill {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .hod-stat-pill i {
      font-size: 0.85rem;
      color: #ffed00;
    }
    .hod-stat-pill span {
      font-family: 'Poppins', sans-serif;
      font-size: 0.78rem;
      color: rgba(255,255,255,0.85);
    }

    /* ── Message body ───────────────────────── */
    .hod-message-body {
      margin-top: 4px;
    }

    .hod-message-body p {
      font-family: 'Poppins', sans-serif;
      font-size: 0.92rem;
      color: #444;
      line-height: 1.9;
      text-align: justify;
      margin: 0 0 16px;
    }

    /* Opening quote pull */
    .hod-opening-quote {
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      color: #582b84;
      font-style: italic;
      line-height: 1.7;
      border-left: 4px solid #d20f0c;
      padding: 10px 18px;
      background: #f9f4ff;
      border-radius: 0 8px 8px 0;
      margin: 0 0 24px;
    }

    /* ── Highlight section box ──────────────── */
    .hod-highlight-box {
      background: linear-gradient(135deg, #582b84 0%, #2d1a55 100%);
      border-radius: 10px;
      padding: 28px 30px;
      margin: 24px 0;
      position: relative;
      overflow: hidden;
    }
    .hod-highlight-box::before {
      content: '';
      position: absolute;
      top: -20px; right: -20px;
      width: 100px; height: 100px;
      background: rgba(255,255,255,0.05);
      border-radius: 50%;
    }

    .hod-highlight-box h4 {
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      color: #ffed00;
      margin: 0 0 12px;
      position: relative;
      z-index: 1;
    }
    .hod-highlight-box p {
      font-family: 'Poppins', sans-serif;
      font-size: 0.88rem;
      color: rgba(255,255,255,0.88);
      line-height: 1.8;
      margin: 0;
      position: relative;
      z-index: 1;
    }

    /* ── Key focus areas grid ───────────────── */
    .hod-focus-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin: 20px 0;
    }
    @media(max-width:600px){ .hod-focus-grid{ grid-template-columns: 1fr; } }

    .hod-focus-item {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      background: #fff;
      border: 1px solid #ede8f5;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(88,43,132,0.05);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .hod-focus-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(88,43,132,0.12);
    }
    .hod-focus-icon {
      width: 40px; height: 40px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .hod-focus-icon i { font-size: 1rem; }
    .hod-focus-item h4 {
      font-family: 'Poppins', sans-serif;
      font-size: 0.84rem; font-weight: 700;
      color: #1a1a2e; margin: 0 0 4px;
    }
    .hod-focus-item p {
      font-family: 'Poppins', sans-serif;
      font-size: 0.76rem; color: #666;
      line-height: 1.55; margin: 0;
    }

    /* ── Signature block ────────────────────── */
    .hod-signature {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-top: 32px;
      padding-top: 20px;
      border-top: 2px solid #f0e8ff;
    }

    .hod-sig-photo {
      width: 70px; height: 70px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid #d4a017;
      flex-shrink: 0;
      background: #f0e8ff;
    }
    .hod-sig-photo img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: top;
    }
    .hod-sig-photo-placeholder {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
    }
    .hod-sig-photo-placeholder i { font-size: 1.8rem; color: #c4a8e8; }

    .hod-sig-text p {
      margin: 0;
      font-family: 'Poppins', sans-serif;
    }
    .hod-sig-name {
      font-size: 0.95rem !important;
      font-weight: 700 !important;
      color: #582b84 !important;
      margin-bottom: 2px !important;
    }
    .hod-sig-role {
      font-size: 0.78rem !important;
      color: #888 !important;
    }

    /* ── Responsive ─────────────────────────── */
    @media (max-width: 680px) {
      .hod-profile-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 18px;
      }
      .hod-photo-wrap { width: 130px; height: 155px; }
      .hod-quals, .hod-stats { justify-content: center; }
      .hod-name { font-size: 1.35rem; }
      .hod-signature { flex-direction: column; text-align: center; }
    }
    .h{
      color: white;
      padding: 5px;
      font-weight: 250;
    }

/* ── Lab Detail Page ── */

    .lab-detail-hero {
      width: 100%;
      max-height: 420px;
      overflow: hidden;
      border-radius: 10px;
      background: #f0edf5;
      margin-bottom: 28px;
      position: relative;
      aspect-ratio: 16 / 7;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lab-detail-hero img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .lab-detail-hero img:not([src]),
    .lab-detail-hero img[src=""] {
      visibility: hidden;
    }

    .lab-hero-placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #9b8bb5;
      gap: 12px;
      font-size: 15px;
    }

    .lab-hero-placeholder i {
      font-size: 56px;
      color: #c4b4d9;
    }

    .lab-detail-title {
      font-size: 26px;
      font-weight: 700;
      color: #2d1a4a;
      margin-bottom: 6px;
    }

    .lab-detail-badge {
      display: inline-block;
      background: #582b84;
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 14px;
      border-radius: 20px;
      margin-bottom: 20px;
      letter-spacing: 0.5px;
    }

    .lab-detail-desc {
      font-size: 15px;
      color: #444;
      line-height: 1.8;
      margin-bottom: 28px;
    }

    .lab-info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 32px;
    }

    .lab-info-card {
      background: #f8f5fd;
      border: 1px solid #e0d6f0;
      border-radius: 10px;
      padding: 16px 18px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .lab-info-icon {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      background: #582b84;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #fff;
      font-size: 15px;
    }

    .lab-info-label {
      font-size: 11px;
      color: #888;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      margin-bottom: 3px;
    }

    .lab-info-value {
      font-size: 14px;
      font-weight: 600;
      color: #2d1a4a;
    }

    .lab-section-title {
      font-size: 17px;
      font-weight: 700;
      color: #2d1a4a;
      margin-bottom: 14px;
      padding-bottom: 8px;
      border-bottom: 2px solid #e0d6f0;
    }

    .lab-software-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 28px;
      list-style: none;
      padding: 0;
    }

    .lab-software-list li {
      background: #fff;
      border: 1px solid #d9ccee;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 500;
      color: #582b84;
    }

    .lab-gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 12px;
    }

    .lab-gallery-item {
      aspect-ratio: 4 / 3;
      background: #f0edf5;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #b9a8d4;
      font-size: 12px;
      flex-direction: column;
      gap: 6px;
    }

    .lab-gallery-item i {
      font-size: 24px;
    }

    .lab-gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .back-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 600;
      color: #582b84;
      text-decoration: none;
      margin-bottom: 20px;
      padding: 8px 16px;
      border: 1px solid #d9ccee;
      border-radius: 6px;
      background: #fff;
      transition: background 0.2s, color 0.2s;
    }

    .back-btn:hover {
      background: #582b84;
      color: #fff;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .lab-info-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .lab-gallery {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 480px) {
      .lab-info-grid {
        grid-template-columns: 1fr;
      }
      .lab-gallery {
        grid-template-columns: 1fr;
      }
      .lab-detail-title {
        font-size: 20px;
      }
    }

    /* ── Lab Grid: 2-column, large images ── */
    .lab-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px;
      margin-top: 10px;
    }

    .lab-card {
      display: block;
      text-decoration: none;
      color: inherit;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid #e4ddf0;
      background: #fff;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .lab-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 36px rgba(88, 43, 132, 0.18);
    }

    /* Large 16:9 image — same visual weight as BIT Sathy */
    .lab-card-img {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: #ede8f5;
    }

    .lab-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.4s ease;
    }

    .lab-card:hover .lab-card-img img {
      transform: scale(1.04);
    }

    /* Hide <img> while src is empty; placeholder fills space */
    .lab-card-img img:not([src]),
    .lab-card-img img[src=""] {
      visibility: hidden;
    }

    .lab-img-ph {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      pointer-events: none;
    }

    .lab-img-ph i {
      font-size: 54px;
      color: #c9b8e3;
    }

    .lab-img-ph span {
      font-size: 13px;
      font-weight: 500;
      color: #a590c9;
    }

    /* Caption bar — purple top-border accent like BIT */
    .lab-card-caption {
      padding: 15px 18px 17px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: #fff;
      border-top: 3px solid #582b84;
    }

    .lab-card-name {
      font-size: 15px;
      font-weight: 600;
      color: #2d1a4a;
      line-height: 1.35;
      margin: 0;
    }

    .lab-card-arrow {
      flex-shrink: 0;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #582b84;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 13px;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .lab-card:hover .lab-card-arrow {
      background: #d20f0c;
      transform: translateX(3px);
    }

    .labs-heading {
      font-size: 21px;
      font-weight: 700;
      color: #2d1a4a;
      margin-bottom: 22px;
      padding-bottom: 12px;
      border-bottom: 3px solid #582b84;
      display: inline-block;
    }

    /* Responsive */
    @media (max-width: 600px) {
      .lab-grid {
        grid-template-columns: 1fr;
        gap: 18px;
      }
    }