@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@600;700&display=swap');
.section-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 28px;
  color: #800000;
}

        /* FORCE HIDE ALL LOGOS - STRONGER RULES */
        .navbar-brand,
        .navbar-header,
        .navbar-default .navbar-brand,
        a.navbar-brand,
        #logo,
        .navbar img,
        .header img,
        nav img {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            width: 0 !important;
            height: 0 !important;
        }

        /* SEARCH AREA CUSTOMIZATION */
    /*    #moresearches_menu label[for="library-search"] {
            font-weight: 700 !important;
        }

        #moresearches_menu label[for="library-search"]::after {
            content: " OPAC" !important;
        }

        #moresearches_menu label[for="library-search"] {
            font-size: 0;
        }

        #moresearches_menu label[for="library-search"]::before {
            content: "Library OPAC";
            font-size: 14px;
            font-weight: 700;
        }

        .form-control option {
            font-weight: 700 !important;
        }

        select#select_library {
            font-weight: 700 !important;
        }
*/
        /* Exception for our library logo */
        .top-logo {
            display: none !important;
        }

        :root {
            --maroon: #7b1b16;
            --maroon-deep: #5f120f;
            --text: #2c1d1a;
            --muted: #6d544d;
            --cream: #f4e2d2;
            --bg: #fff;
            --white: #fff;
    --primary-maroon: #800000;
    --accent-blue: #428bca;
    --light-bg: #FCF9FC;
    --text-dark: #333;
    --border-color: #eee;
    font-size: 16px;
        }

        

        body{
    font-family:Arial,sans-serif;
    color:var(--text-dark);
    background:#f8f8f8;
    line-height:1.6;
    padding:12px 20px 32px;
    position:relative;
}

        /* --- Hero Section --- */
     	 
	    .hero {
    position: relative;
    width: 95%;          /* reduce width */
    max-width: 1730px;   /* optional maximum width */
    margin: 0 auto 16px; /* center horizontally */
    min-height: 290px;
    height: auto;
    border-radius: 14px;
    overflow: hidden;
    background: var(--cream);
}

        .hero-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cotain;  /* Change from 'cover' to 'contain' */
          object-position: center;  /* Center the image */
        }

     /*   .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, 
                rgba(0,0,0,0.16) 8%, 
                rgba(244,226,210,0.2) 55%, 
                rgba(244,226,210,0.9) 70%, 
                rgba(244,226,210,1) 85%
            );
        }  */

        .hero-card {
            position: absolute;
            z-index: 1;
            max-width: 750px;
            width: 75%;
            right: 24px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .hero-text-content {
            flex: 1;
            order: 2;
          position: relative;  /* Added this to adjust pill row relative to hero-text-context */
        }

        .hero-card .library-logo {
            width: 120px;
            height: 120px;
            flex-shrink: 0;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            object-fit: contain;
            order: 1;
            align-self: flex-start;
            margin-top: -10px;
        }

        .hero-card h1 {
            font-family: 'Cormorant SC', serif;
            font-weight: 700;
            font-size: clamp(1.8rem, 2.8vw, 2.4rem);
            letter-spacing: 0.18em;
            line-height: 1.08;
            margin-bottom: 0;
            text-transform: uppercase;
            color: var(--maroon-deep);
        }

        .hero-card p {
            font-size: 0.98rem;
            color: #3f2c28;
            margin-bottom: 14px;
            min-height: 0;
            display: none;
        }

/* Library Logo and name over image */
.hero-brand {
    position: absolute;
    top: 22px;
    left: 24px;          /*left: 50%; this was center*/
    transform: none;  /*transform: translateX(-50%); this was left*/
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 3;
}

.hero-logo {
    height: 64px;   /* increased size from 56 */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35));
}

/* Text styling */
.hero-title {
    font-family: 'Cormorant SC', serif;  /* more institutional & premium  Playfair Display*/

    font-size: 2.2rem;                  /* increased size */
    font-weight: 700;
    letter-spacing: 0.08em;
   /* color: #ffffff;*/
color: #7b1b16;  /* deep maroon */
 text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    /* readability without background
    text-shadow: 
        0 2px 6px rgba(0,0,0,0.75),
        0 0 10px rgba(0,0,0,0.35); */
}

        /* --- Pills/Buttons --- */
        .pill-row {
            display: flex;
            flex-wrap: nowrap;
            gap: 8px;
            overflow: visible;
            /*margin-top: 16px;*/
        /* margin-top commented out and the following changes made to adjust position of pill row relative to hero-text-context*/
       position: absolute;  /* Change from margin-top */
       bottom: -130px;  /* Position below the h1 */
       left: 0;
       width: 100%;
        justify-content: flex-end;  /* Align pills to the right */
        }

        .pill {
            border-radius: 999px;
            /*padding: 8px 12px; */
         padding: 8px 14px;  /* Reduced from 12px 18px */
            font-weight: 700;
            border: 1.4px solid var(--maroon);
            background: transparent; 
            /*color: var(--maroon);*/
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
          /*font-size: 0.85rem; */
          font-size: 0.9rem;  /* Reduced from 1.0rem */
            white-space: nowrap;
            user-select: none;
        }

        .pill:hover {
            background: var(--maroon);
            color: var(--white);
        }

        .pill.active {
            background: var(--maroon);
            color: var(--white);
        }

        .pill.active:hover {
            background: var(--maroon-deep);
            border-color: var(--maroon-deep);
        }

/* Base pill (normal state) The a.pill.active and hover, etc is used instead of simple .pill.active and hover because pills are now URLs */
a.pill,
a.pill:link,
a.pill:visited {
 /*background: transparent;  
color: var(--maroon);*/
/*background: var(--maroon); */
background: rgba(123, 27, 22, 0.6);  /* Light transparent maroon */

color: #ffffff;
  text-decoration: none;
}

/* Hover + active states ? white text */
a.pill:hover,
a.pill:active,
a.pill:focus,
a.pill-active,
a.pill.active:hover {
 background: var(--maroon);  
/* background: rgba(123, 27, 22, 0.6);  /* Light transparent maroon */
color: #ffffff;
  text-decoration: none;
}

/* =========================================
   TABLE RESPONSIVE
========================================= */

.table-container{
    width:100%;
    overflow-x:auto;
}

table{
    width:100%;
    max-width:100%;
}

.nav-right a {
  text-decoration: none;
  color: maroon;
  font-weight: 550;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* =========================================
   PHOTO CREDIT UNDER CAROUSAL
========================================= */
.photo-credit {
    width: 95%;
    margin: 0 auto;
    text-align: right;
    font-size: 0.75rem;
    line-height: 1;
    color: #888;
}
/* =========================================
   STAFF CARDS
========================================= */
/* Center last card */
.staff-card:last-child {
  grid-column: 2 / 3;
}

/* Research pages: do not center the final staff-card */
.research-page .staff-card:last-child,
.guide-pathways .staff-card:last-child {
    grid-column: auto;
}

.staff-card{

  border:1px solid #ccc;
  border-radius:10px;
  padding:15px;
  background:#f9f9f9;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  transition:0.3s;
}

.staff-card:hover{
  transform:translateY(-5px);
}

.staff-card h3{
  margin-bottom:8px;
  color:#800000;
}

.staff-card .contact{
  font-size:14px;
  color:#555;
}

.staff-card .role{
  font-weight:bold;
  margin:8px 0;
}

/* Optional overlay for better text visibility */
.header-overlay {
  background: rgba(0, 0, 0, 0.5);
  padding: 20px 40px;
  border-radius: 10px;
  text-align: center;
}

.header h1 {
  color: #fff;
  margin: 0;
  font-size: 28px;
}

.header p {
  color: #ddd;
  margin: 5px 0 0;
  font-size: 16px;
}
/* Typography */
section h5 {
  font-size: 17px;
  font-weight: bold;
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    color: var(--primary-maroon);
    margin-bottom: 1rem;
}

/* Layout */

h5 {
  color: #900000; /* change to any color you want */
}

/* If you want specific headings only */
h5:nth-of-type(1) { /* Book Bank */
  color: #900000;
}

h5:nth-of-type(2) { /* Circulation Section */
  color: #900000;
}

/* --- UPDATED FULL-WIDTH LAYOUT --- */

.small-table {
  width: 400px;              /* controls size */
  max-width: 90%;            /* responsive on mobile */
  margin: 20px auto;         /* center horizontally */
  font-size: 14px;           /* slightly smaller text */
}

.small-table.styled-table {
  width: 700px;
}
.small-table td:first-child {
  width: 80px;              /* fixed label column */
  font-weight: bold;
}

.content{
    background:#fff;
    padding:25px;
    border-radius:14px;
    width:100%;
    max-width:1600px;
    margin:0 auto;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
    transition:.3s ease;
}

/* Optional hover effect */
.content:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.sidebar {
    min-width: 0; /* Fixes grid blowout issues */
}

/* --- UPDATED HEADER (Full Width) --- */

.sidebar {
    flex: 1;
    min-width: 200px;
}
/* Sidebar Card Enhancements */

.sidebar-card {
    background: #fff;
    padding: 18px;
    margin-bottom: 15px;
    border-radius: 6px;
    border-top: 3px solid var(--primary-maroon); /* Visual consistency */
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.sidebar-card h4 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: var(--primary-maroon);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
 .sidebar-card h6 {
    font-size: 1.0rem;
    margin-bottom: 12px;
    color: var(--primary-maroon);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Sidebar Links */
.sidebar-links {
    list-style: none;
    padding: 0;
	
}
.sidebar-links li a{
    font-weight: 400 !important;
}

.sidebar-links li {
    padding: 6px 0;
    border-bottom: 1px solid #f9f9f9;
    font-size:0.9rem;
}

.sidebar-links a {
    color: var(--accent-blue);
    transition: all 0.2s;
    display: block;
}

.sidebar-links a:hover {
    color: var(--primary-maroon);
    padding-left: 5px; /* Subtle hover animation */
}

/* Specialized Tags */
.badge-new {
    background: #28a745;
    color: white;
    font-size: 0.65rem;
    padding: 2px 5px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 5px;
}

.coming-soon {
    color: #999;
    font-style: italic;
    font-size: 0.8rem;
}

/* VPN Section */
.vpn-highlight{
    background:#fff;
    border-top:3px solid #800000;
    border-radius:6px;
    padding:14px;
    text-align:left;

    box-shadow:0 2px 6px rgba(0,0,0,0.05);

    transition:transform 0.3s ease,
               box-shadow 0.3s ease;
}

.vpn-highlight:hover{
    transform:translateX(8px);
    box-shadow:0 6px 16px rgba(0,0,0,0.2);
}

.vpn-link{
    color:#428bca !important;
    text-decoration:none;
    font-size:0.9rem;
    font-weight:400;
    display:block;
}

.vpn-link:hover{
    color:#800000 !important;
}
/* Scrollable Database List (Optional) */
.scrollable-list {
  max-height: none;     /* remove height restriction */
  overflow: visible;    /* remove scroll */
}

/* Custom Scrollbar */
.scrollable-list::-webkit-scrollbar {
    width: 4px;
}
.scrollable-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
/* Policy Styles */
.policy-block {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
}

ul {
    list-style-position: inside;
    margin-left: 10px;
}

li {
    margin-bottom: 10px;
    color: #555;
}

/* Table Styling */

.table-container {
  width: 100%;
  overflow-x: auto;
}

.styled-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

.styled-table th {
  background-color: #800000; /* Maroon */
  color: white;
  padding: 12px;
  text-align: center;
  font-size: 18px;
}

.styled-table td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
}

.styled-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.styled-table tr:hover {
  background-color: #f1f1f1;
}

.styled-table a {
  text-decoration: none;
  color: #333;
}

.styled-table a:hover {
  color: #800000;
}

.policy-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
}

.policy-table th {
    background-color: var(--primary-maroon);
    color: white;
    text-align: left;
    padding: 12px;
}

.policy-table td {
    padding: 12px;
    border: 1px solid var(--border-color);
    font-size: 0.95rem;
}

.group-label {
    font-weight: bold;
    background: #fdfdfd;
    color: var(--primary-maroon);
}

/* Header & Footer */

.header {
    text-align: center;
    padding: 40px 20px;
   background-color: transparent;
 
}

.footer {
    margin-top: 50px;
    padding: 20px;
    text-align: center;
    font-size: 0.9rem;
    color: #777;

}

/* Responsive */
@media (max-width: 768px) {
    .main-layout { flex-direction: column; }
    .sidebar { order: 2; }
    .content { order: 1; }
}
.app-download {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

.app-text {
  margin: 0;
  font-size: 16px;
}

.playstore-btn {
  text-decoration: none;
  color: #800000;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* RESOURCE CONTAINER */
.resource-container {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* RESOURCE CARDS */
.resource {
    background: #ffffff;
    width: 300px;
	height: 300px;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    border: 1px solid #e5e5e5;
    transition: all 0.3s ease;
    text-align: center;
}

.resource:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

.resource a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.resource .logo {
   
    height: 150px;
    object-fit: contain;
    border-radius: 10px;
    width: 200px;
    display: block;
    margin: 0 auto 15px auto;
    transition: transform 0.3s ease;
}

.resource:hover .logo {
    transform: scale(1.04);
}

.resource p {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
}

/* TEXT */
.resource p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.4;
}
.resource-container.left-align {
    display: flex;
    justify-content: flex-start;
    gap: 22px;
    margin-left: 95px;
}

/* CONTACT SECTION - THEME FIXED */
.contact-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 0px;
}
/* LEFT BOX */
.left-box {
 width: 75%;
    margin: 0 auto;
    flex: 1;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.left-box h2 {
    background: var(--primary-maroon);
    color: #fff;
    padding: 14px;
    text-align: center;
    font-size: 20px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.info {
    padding: 25px;
    border: 1px solid #f0f0f0;
    text-align: center;
    transition: 0.3s;
}

.info:hover {
    background: #fafafa;
}

.info i {
    font-size: 26px;
    color: var(--primary-maroon);
    margin-bottom: 10px;
}

.info h3 {
    margin-bottom: 6px;
    color: var(--primary-maroon);
}

.info p {
    color: #555;
    font-size: 14px;
}

/* RIGHT BOX */
.right-box {
 width: 75%;
    margin: 0 auto;
    flex: 1;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.right-box h2 {
    background: var(--primary-maroon);
    color: #fff;
    padding: 14px;
    text-align: center;
    font-size: 20px;
}

/* FORM */
form {
    padding: 20px;
}

.row {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}

input, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    transition: 0.2s;
}

input:focus, textarea:focus {
    border-color: var(--primary-maroon);
    outline: none;
}

textarea {
    height: 100px;
    resize: none;
    margin-bottom: 15px;
}

/* CAPTCHA */
.captcha-box {
    background: #f3f3f3;
    padding: 10px;
    margin: 10px 0;
    font-weight: bold;
    letter-spacing: 3px;
}

/* BUTTON */
button {
    background: var(--primary-maroon);
    color: #fff;
    border: none;
    padding: 10px 22px;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.3s;
}

button:hover {
    background: #5f120f;
}
ul.custom-bullets {
  list-style: none;
  padding-left: 0;
}
ul li {
    margin-bottom: 12px;   /* space between bullet points */
    line-height: 1.6;      /* better readability */
}

ul.custom-bullets li {
    margin-bottom: 14px;
    padding-left: 5px;
}
ul.custom-bullets li::before {
  content: "*";
  color: maroon;
  font-weight: bold;
  margin-right: 10px;
}
/* RESPONSIVE */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }

    .row {
        flex-direction: column;
    }
}

.simple-table {

  width: 80%;        /* change this value as you like */
  margin: 20px auto; /* centers the table */

  border-collapse: separate;
  border-spacing: 5;
  overflow: hidden;
  border-radius: 20px; /* overall rounding */
}

.simple-table thead th {
  background-color: maroon;
  color: white;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.simple-table td {
 text-align: center;
  vertical-align: middle;
  padding: 4px 8px;
  line-height: 1.1;  
  height: auto;        /* let content control height */
  border: 1px solid #000;
  padding: 10px;
  text-align: center;
  font-size: 15px;
}

/* Default link color */
.simple-table a {

  text-decoration: none;
  color: black;
  transition: 0.2s;
}
.simple-table th {
  padding: 8px;
}
/* Hover effect ONLY on content */
.simple-table td:hover a {
  color: #800000; /* maroon on hover */
}
section {
  margin-top: 0;
  padding-top: 0;
}

.table-container {
  margin-top: 0;
  padding-top: 0;
}

.simple-table {
  margin-top: 0;
}
form button {
    display: block;
    margin: 20px auto 0 auto; /* centers horizontally */
}
.btn-center {
    text-align: center;
    margin-top: 15px;
}

.designation{
  font-size: 17px;
  color: #555;
  font-weight: 700;
  margin-bottom: 10px;
}

.qualification{
  margin-top: 8px;
  font-size: 14px;
  color: #444;
}

.contact{
  display: flex;
  align-items: center;
  gap: 8px;
  color: #444;
  margin: 5px 0;
  font-size: 14px;
}

.contact i{
  color: #800000;
  width: 18px;
}
.table-container{
    width: 100%;
    overflow-x: auto;
    margin: 20px 0;
}

.round-table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border: 1px solid #d7d7d7;
    border-radius: 14px;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

.round-table tr{
    border-bottom: 1px solid #e5e5e5;
}

.round-table tr:last-child{
    border-bottom: none;
}

.round-table td{
    padding: 14px;
    vertical-align: middle;
    border-bottom: 1px solid #ececec;
    color: #333;
    font-size: 14px;
}

.round-table tr:last-child td{
    border-bottom: none;
}

/* Small Images */
.round-table img{
    width: 90px;
    height: 60px;
    object-fit: contain;
    border-radius: 8px;
    display: block;
    margin: auto;
}

/* Links */
.round-table a{
    color: #800000;
    text-decoration: none;
    font-weight: bold;
}

/* Section Heading */
.section h2{
    color: #800000;
    margin-bottom: 15px;
}
/* =========================================
   GLOBAL RESET
========================================= */

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

html,
body{
    width:100%;
    overflow-x:hidden;
    font-family:Arial, sans-serif;
    background:#f8f8f8;
}

/* =========================================
   CARDS SECTION
========================================= */

.cards-section{
    width:94%;
    margin:20px auto;
}

.cards-viewport{
    position:relative;
    overflow:hidden;
}

.cards-row{
    display:flex;
    gap:16px;
    overflow:hidden;
    scroll-behavior:smooth;
}

/* CARD */

.card{
    flex:0 0 calc((100% - 32px) / 3);
    min-width:calc((100% - 32px) / 3);

    height:260px;

    border-radius:16px;
    overflow:hidden;
    position:relative;

    text-decoration:none;
}

.card img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* OVERLAY */

.card-overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,0.85),
        rgba(0,0,0,0.2),
        rgba(0,0,0,0)
    );

    opacity:0;
    transition:0.3s;
}

.card-content{
    position:absolute;
    bottom:20px;
    left:20px;
    right:20px;

    color:#fff;

    opacity:0;
    transition:0.3s;

    z-index:2;
}

.card:hover .card-overlay,
.card:hover .card-content{
    opacity:1;
}

.card h2{
    font-size:22px;
    margin-bottom:6px;
}

.card p{
    font-size:14px;
    line-height:1.5;
}

/* BADGE */

.badge{
    position:absolute;
    top:12px;
    left:12px;

    width:34px;
    height:34px;

    border-radius:50%;

    background:rgba(255,255,255,0.25);

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    font-weight:bold;

    z-index:3;
}

/* ARROWS */

.arrow-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:44px;
    height:44px;

    border:none;
    border-radius:50%;

    background:rgba(128,0,0,0.85);

    color:#fff;

    font-size:24px;

    cursor:pointer;

    z-index:5;
}

.arrow-btn.left{
    left:10px;
}

.arrow-btn.right{
    right:10px;
}

/* ===================================
   RESPONSIVE OPAC SEARCH BOX
=================================== */

.carousel-search-box{
    width:95%;
    max-width:1770px;
    margin:12px auto;

    background:#ffffff;

    border-left:5px solid #800000;
    border-right:5px solid #800000;

    border-radius:14px;

    padding:8px;

    box-shadow:0 2px 8px rgba(0,0,0,0.06);
}

/* REMOVE EXTRA SPACE AFTER HEADING */

.carousel-search-title{
    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    gap:6px;

    width:100%;

    margin:0 auto 2px auto;
}

.carousel-search-title h2{
    margin:0;
    text-align:center;
}

.carousel-search-title span{
    display:flex;
    align-items:center;
    justify-content:center;
}
/* SEARCH ROW */

.carousel-search-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

/* INPUT */

.carousel-search-row input{
    flex:1;
    min-width:220px;

    height:42px;

    border:2px solid #8d2b22;
    border-radius:8px;

    padding:0 14px;

    font-size:14px;

    background:#f9f9f9;
}

/* SELECT */

.carousel-search-row select{
    height:42px;

    border:2px solid #8d2b22;
    border-radius:8px;

    padding:0 10px;

    font-size:14px;

    background:#ffffff;
    cursor:pointer;
}

.catalog-select{
    width:160px;
}

.library-select{
    width:220px;
}

/* BUTTON */

.carousel-search-row button{
    width:52px;
    height:42px;

    border:none;
    border-radius:8px;

    background:#800000;
    color:#ffffff;

    font-size:18px;

    cursor:pointer;

    position:relative;
    top:-10px;   /* moves button upward */

    transition:0.3s;
}

.carousel-search-row button:hover{
    background:#5f120f;
}

/* TABLET */

@media(max-width:992px){

    .carousel-search-row{
        gap:8px;
    }

    .catalog-select,
    .library-select{
        width:100%;
    }

    .carousel-search-row input{
        width:100%;
    }
}

/* MOBILE */

@media(max-width:768px){

    .carousel-search-box{
        padding:10px;
        border-radius:12px;
    }

    .carousel-search-title{
        flex-direction:column;
        gap:2px;
    }

    .carousel-search-title h2{
        font-size:20px;
    }

    .carousel-search-row{
        flex-direction:column;
        align-items:stretch;
    }

    .carousel-search-row input,
    .carousel-search-row select,
    .carousel-search-row button{
        width:100%;
        min-width:100%;
    }

    .carousel-search-row button{
        height:42px;
        margin-top:2px;
    }
}

/* SMALL MOBILE */

@media(max-width:480px){

    .carousel-search-title h2{
        font-size:18px;
    }

    .carousel-search-row input,
    .carousel-search-row select,
    .carousel-search-row button{
        height:40px;
        font-size:13px;
    }
}

/* =========================================
   MAIN LAYOUT
========================================= */

.main-layout{
    display:grid;
    grid-template-columns:260px 1fr 260px;

    gap:20px;

    width:95%;
    margin:20px auto;
}

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

footer{
    margin-top:30px;

    padding:20px;

    text-align:center;

    background:#ffffff;

    color:#555;
}

/* =========================================
   TABLET RESPONSIVE
========================================= */

@media(max-width:992px){

    .main-layout{
        grid-template-columns:1fr;
    }

    .card{
        flex:0 0 calc((100% - 16px) / 2);
        min-width:calc((100% - 16px) / 2);
    }

    .carousel-search-row{
        gap:8px;
    }

    .catalog-select,
    .library-select{
        width:100%;
    }

    .carousel-search-row input{
        width:100%;
    }
}

/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media(max-width:768px){

    .cards-section,
    .carousel-search-box,
    .main-layout{
        width:95%;
    }

    .card{
        flex:0 0 100%;
        min-width:100%;
    }

    .carousel-search-title{
        flex-direction:column;
        gap:2px;
    }

    .carousel-search-title h2{
        font-size:20px;
    }

    .carousel-search-row{
        flex-direction:column;
        align-items:stretch;
    }

    .carousel-search-row input,
    .carousel-search-row select,
    .carousel-search-row button{
        width:100%;
        min-width:100%;
    }

    .content{
        padding:18px;
    }

    .arrow-btn{
        width:38px;
        height:38px;
        font-size:20px;
    }
}

/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:480px){

    .carousel-search-box{
        padding:10px;
    }

    .carousel-search-title h2{
        font-size:18px;
    }

    .carousel-search-row input,
    .carousel-search-row select,
    .carousel-search-row button{
        height:40px;
        font-size:13px;
    }

    .content{
        padding:15px;
    }

    .card{
        height:220px;
    }
}

nav img {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            width: 0 !important;
            height: 0 !important;
        }

       .cards-section{
    width: 95%; /* 93%;*/
    max-width: 1730; /*2870px;*/

    margin: 15px auto 0 auto;
}

        .cards-viewport {
            position: relative;
            overflow: hidden;
        }

        .cards-row {
            display: flex;
            flex-wrap: nowrap;
            gap: 16px;
            scroll-behavior: smooth;
            overflow-x: hidden;
            padding-bottom: 4px;
            width: 100%;
            scrollbar-width: none;
        }

        .cards-row::-webkit-scrollbar {
            display: none;
        }

        /* --- Individual Card --- */
        .card {
            flex: 0 0 calc((100% - 32px) / 3);
            min-width: calc((100% - 32px) / 3);
            max-width: calc((100% - 32px) / 3);
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            min-height: 210px;
            color: var(--white);
            isolation: isolate;
            text-decoration: none;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.18);
        }

        .card img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .card-overlay {
            position: absolute;
            inset: 0;
           /* background: linear-gradient(
                120deg,
                rgba(180, 80, 70, 0.25) 0%,
                rgba(255, 255, 255, 0.10) 100%
            ); */

   /* Strong bottom gradient for readability */
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.6) 40%,
        rgba(0,0,0,0.2) 70%,
        rgba(0,0,0,0) 100%
    );
            z-index: 1;     /* below text */
          /*added to remove captions on image cards and put them on hover*/           
opacity: 0;
    transition: opacity 0.3s ease;
 
        }

        .card .badge {
            position: absolute;
            top: 12px;
            left: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 999px;
            border: 1.4px solid rgba(255,255,255,0.9);
            font-weight: 700;
            font-size: 0.85rem;
            background: rgba(255,255,255,0.14);
            backdrop-filter: blur(2px);
            z-index: 1;
            color: #fff;
        }

        .card-content {
            position: relative;
            z-index: 2;  /* higher than overlay */
            padding: 18px;
            padding-top: 44px;
            display: grid;
            gap: 8px;
            align-content: end;
            height: 100%;
/*added to remove captions on image cards and put them on hover*/           
opacity: 0;
    transition: opacity 0.3s ease;
        }
/*added to remove captions on image cards and put them on hover*/          
.card:hover .card-content {
    opacity: 1;
}

.card:hover .card-overlay {
    opacity: 1;
}

        .card h2 {
            font-family: 'Playfair Display', serif;
            font-size: 1.32rem;
            letter-spacing: 0.01em;
            color: #ffffff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.85);
        }

        .card p {
/*            color: #f3e9e7;*/
color: #f1f1f1;
    text-shadow: 0 2px 6px rgba(0,0,0,0.85);
            font-size: 0.94rem;
        }

        /* --- Navigation Arrows --- */
        .arrow-btn {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: 1.4px solid var(--maroon);
            background: rgba(123,27,22,0.68);
            color: #fff;
            font-size: 1.35rem;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 8px 16px rgba(0,0,0,0.24);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .arrow-btn:hover {
            background: rgba(123,27,22,0.9);
        }

        .arrow-btn.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .arrow-btn.floating {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 5;
        }

        .arrow-btn.left { left: 10px; }
        .arrow-btn.right { right: 10px; }

        /* --- Media Queries --- */
        @media (max-width: 960px) { 
            .card { 
                flex: 0 0 calc((100% - 16px) / 2);
                min-width: calc((100% - 16px) / 2);
                max-width: calc((100% - 16px) / 2);
            } 
        }
@media(max-width:640px){.arrow-btn{ width: 40px; height: 40px; font-size: 1.2rem; }}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.faq-container{
  max-width: 1000px;
  margin: auto;
}
.faq-category {
    margin-bottom: 35px;
}

.faq-category > h3 {
    margin: 0 0 18px;
    padding: 10px 14px;
    background: #f5eaea;
    color: #800000;
    border-left: 4px solid #800000;
    border-radius: 4px;
    font-size: 1.3rem;
    font-weight: 700;
}
}
.faq-heading{
  text-align: center;
  font-size: 40px;
  color: #900000;
  margin-bottom: 40px;
  font-weight: bold;
}

.faq-box{
  background: #ffffff;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 25px;
  border-left: 6px solid #900000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: 0.3s ease;
}

.faq-box:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.faq-question{
  font-size: 20px;
  color: #900000;
  margin-bottom: 12px;
  font-weight: 700;
}

.faq-answer{
  font-size: 16px;
  line-height: 1.8;
  color: #444;
}

/* =========================================
   MAIN LAYOUT RESPONSIVE
========================================= */

@media (max-width: 992px) {

  .main-layout {
    grid-template-columns: 1fr;
  }

  #left-sidebar,
  #right-sidebar {
    width: 100%;
  }

  /* News cards stack */
  

  
  .news-card {
    flex-direction: column;
    text-align: center;
  }

  .news-card img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* Contact section */
  .info-grid {
    grid-template-columns: 1fr;
  }

  /* Search area */
  .carousel-search-row {
    flex-direction: column;
  }

  /* Staff cards */
  .card-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 768px) {

  .main-layout {
    padding: 10px;
    gap: 15px;
  }

 

  /* FAQ */
  .faq-heading,
  .section-title {
    font-size: 26px;
    text-align: center;
  }

  .faq-question {
    font-size: 18px;
  }

  .faq-answer {
    font-size: 15px;
  }

  /* Resource cards */
  .resource-container {
    justify-content: center;
  }

  .resource {
    width: 100%;
    max-width: 320px;
    height: auto;
  }

  /* Staff cards */
  .card-container {
    grid-template-columns: 1fr;
  }

  /* Tables */
  .table-container {
    overflow-x: auto;
  }

  .styled-table,
  .simple-table,
  .round-table,
  .policy-table {
    min-width: 500px;
  }
}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .faq-box,
  .staff-card,
  .resource,
  .sidebar-card {
    padding: 15px;
  }

  .faq-question {
    font-size: 16px;
  }

  .faq-answer {
    font-size: 14px;
  }

  .carousel-search-title h2 {
    font-size: 20px;
  }
}

/* =========================================
   TOP NAVBAR
========================================= */

 
.top-navbar{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 80px 10px 20px; /* increased right padding */
}

.nav-right{
    display: flex;
    align-items: center;
    gap: 15px;
}
.nav-right a{
    text-decoration: none;
    color: maroon;
    font-weight: 550;
}

/* BOLD DROPDOWN TEXT */

.catalog-select,
.library-select{
    font-weight:700;
    color:#333;
}

/* BOLD DROPDOWN OPTIONS */

.catalog-select option,
.library-select option{
    font-weight:700;
}
.custom-bullets li a {
    color: inherit;   /* normal link color */
    text-decoration: none;
}

.custom-bullets li a:hover {
    color: #428bca;   /* hover color */
}

.vpn-highlight{
    background:#fff;
    border-top:3px solid #800000;
    border-radius:6px;
    padding:14px;
    text-align:left;

    box-shadow:0 2px 6px rgba(0,0,0,0.05);

    transition:transform 0.3s ease,
               box-shadow 0.3s ease;
}

.vpn-highlight:hover{
    transform:translateX(8px);
    box-shadow:0 6px 16px rgba(0,0,0,0.2);
}

.vpn-link{
    color:#428bca !important;
    text-decoration:none;
    font-size:0.9rem;
    font-weight:400;
    display:block;
}

.vpn-link:hover{
    color:#800000 !important;
}

/* Staff Directory Responsive Layout */
.card-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.staff-card{
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    border-top: 4px solid #800000;
    transition: all 0.3s ease;
    height: 100%;
}

.staff-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.staff-card h3{
    color: #800000;
    font-size: 20px;
    margin-bottom: 10px;
    line-height: 1.3;
}

.designation{
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.qualification{
    color: #555;
    margin-bottom: 5px;
}

.contact{
    display: flex;
    align-items: center;
    gap: 10px;
    word-break: break-word;
    margin-top: 8px;
}

.contact i{
    color: #800000;
    min-width: 18px;
}

/* Tablets */
@media (max-width: 992px){
    .card-container{
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .content{
        width: 100%;
        padding: 15px;
    }

    .card-container{
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .staff-card{
        padding: 15px;
    }

    .staff-card h3{
        font-size: 18px;
    }

    .designation,
    .qualification,
    .staff-card p{
        font-size: 14px;
        line-height: 1.5;
    }

    .contact{
        font-size: 14px;
        flex-wrap: wrap;
    }
}

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

    .staff-card{
        padding: 12px;
    }

    .staff-card h3{
        font-size: 16px;
    }

    .designation,
    .qualification,
    .staff-card p,
    .contact{
        font-size: 13px;
    }

    .style1{
        text-align: center;
        font-size: 24px;
    }
}
@media (max-width:768px){

    .main-layout{
        display:block;
    }

    #left-sidebar,
    #right-sidebar{
        width:100%;
        margin-bottom:20px;
    }

    .content{
        width:100%;
    }
}

/* =========================================================
   FINAL DESKTOP ALIGNMENT
   Keep the three-column layout fixed while zooming.
   The header aligns with the CENTER content column.
   ========================================================= */

:root {
    --layout-width: 95%;
    --sidebar-width: 260px;
    --layout-gap: 20px;
}

.main-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--sidebar-width);
    gap: var(--layout-gap);
    width: var(--layout-width);
    max-width: none;
    margin: 20px auto;
    padding: 0;
    align-items: start;
}

.main-layout > #left-sidebar,
.main-layout > #right-sidebar {
    width: 100%;
    min-width: 0;
}

.main-layout > .content {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    justify-self: stretch;
}

/* Header/banner: same left edge and width as the center content column */
#header-area {
    width: calc(
        var(--layout-width) - (2 * var(--sidebar-width)) - (2 * var(--layout-gap))
    );
    margin-left: calc(
        (100% - var(--layout-width)) / 2
        + var(--sidebar-width)
        + var(--layout-gap)
    );
    margin-right: 0;
}

#header-area .hero {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Preserve the intended mobile/tablet stacking */
@media (max-width: 992px) {
    .main-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        width: 95%;
        margin: 20px auto;
    }

    #header-area {
        width: 95%;
        margin: 0 auto 16px;
    }

    #header-area .hero {
        width: 100%;
    }
}

/* =========================================================
   FINAL PAGE-WIDTH ALIGNMENT

   The hero, picture carousel, catalogue search, and the
   three-column main layout all use the SAME outer width.

   The hero/carousel/search are intentionally aligned with
   the OUTER edges of the sidebars — not with the centre
   content column.
   ========================================================= */

:root {
    --page-width: 95%;
    --sidebar-width: 260px;
    --layout-gap: 20px;
}

/* Three-column section */
.main-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--sidebar-width);
    gap: var(--layout-gap);
    width: var(--page-width);
    max-width: none;
    margin: 20px auto;
    padding: 0;
    align-items: start;
}

.main-layout > #left-sidebar,
.main-layout > #right-sidebar,
.main-layout > .content {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
}

/* Hero/banner: aligned with the OUTER page edges */
#header-area {
    width: var(--page-width);
    max-width: none;
    margin: 0 auto 16px;
}

#header-area .hero {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Picture carousel: same outer width */
.cards-section {
    width: var(--page-width);
    max-width: none;
    margin: 20px auto;
}

/* Catalogue search: same outer width */
.carousel-search-box {
    width: var(--page-width);
    max-width: none;
    margin: 12px auto;
}

/* Preserve the intended mobile/tablet stacking */
@media (max-width: 992px) {
    .main-layout {
        grid-template-columns: 1fr;
        width: var(--page-width);
        margin: 20px auto;
    }

    #header-area,
    .cards-section,
    .carousel-search-box {
        width: var(--page-width);
    }
}








/* =========================================================
   SIDEBAR-DRIVEN CONTENT HEIGHT

   The natural height of the sidebars determines the height
   of the three-column row. The centre content fills that
   height. If its own content is longer, it scrolls internally.
   ========================================================= */

@media (min-width: 993px) {
    .main-layout {
        height: auto;
        min-height: 0;
        overflow: visible;
        align-items: stretch;
    }

    /* Sidebars determine the natural row height */
    .main-layout > #left-sidebar,
    .main-layout > #right-sidebar {
        height: auto;
        min-height: 0;
        overflow: visible;
        align-self: stretch;
    }

    /*
       Do not let the centre content contribute its own
       height to the grid row. It simply fills the row created
       by the sidebars.
    */
    .main-layout > .content {
        height: auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        align-self: stretch;
    }
}

@media (max-width: 992px) {
    .main-layout {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .main-layout > .content,
    .main-layout > #left-sidebar,
    .main-layout > #right-sidebar {
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }
}

/* =========================================================
   RESEARCH PAGES
   Uses the existing .staff-card component
   ========================================================= */

.research-page-intro,
.guide-intro {
    text-align: center;
    margin-bottom: 25px;
}

.research-page-intro p,
.guide-intro p {
    max-width: 900px;
    margin: 0 auto;
    color: #555;
}


/* Research Guide callout */

.research-guide-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 25px;
    padding: 14px 18px;
    background: #fcf9f7;
    border: 1px solid #eee;
    border-left: 4px solid #800000;
    border-radius: 6px;
}

.research-guide-callout-text strong {
    display: block;
    color: #800000;
}

.research-guide-callout-text span {
    color: #555;
    font-size: .9rem;
}

.research-guide-button {
    background: #800000;
    color: #fff !important;
    padding: 8px 15px;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: 700;
    white-space: nowrap;
}

.research-guide-button:hover {
    background: #5f120f;
}


/* Research cards
   .card-container supplies the existing grid.
   .staff-card supplies the existing card appearance.
*/

.research-card-grid {
    /* Only spacing/height specific to Research */
    gap: 20px;
}

.research-card-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 10px;
    background: #f8ece8;
    font-size: 21px;
}

.research-card-grid .staff-card {
    display: flex;
    flex-direction: column;
    min-height: 270px;
}

.research-card-grid .staff-card h2 {
    margin-bottom: 8px;
}

.research-card-grid .staff-card p {
    margin-bottom: 12px;
    color: #444;
    font-size: .9rem;
    line-height: 1.5;
}

.research-use {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #eee;
    color: #555;
    font-size: .88rem;
}

.research-use strong {
    color: #800000;
}

.research-card-link {
    display: block;
    margin-top: 10px;
    color: #428bca;
    font-weight: 700;
    text-decoration: none;
}

.research-card-link:hover {
    color: #800000;
}


/* Research page footer */

.research-page-footer {
    margin-top: 25px;
    padding: 15px;
    text-align: center;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 6px;
    color: #555;
}

.research-page-footer a {
    color: #428bca;
    font-weight: 700;
}


/* Research Guide pathways */

.guide-pathways {
    display: grid;
    gap: 20px;
}

.guide-path {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 20px;
}

.guide-level {
    color: #800000;
    font-weight: 700;
    font-size: 1.1rem;
}

.guide-level span {
    display: block;
    margin-top: 4px;
    color: #777;
    font-size: .8rem;
    font-weight: 400;
}

.guide-path h2 {
    margin-bottom: 7px;
}

.guide-path p {
    margin-bottom: 10px;
    color: #444;
}

.guide-start {
    padding: 10px 12px;
    background: #fcf9f7;
    border-left: 3px solid #800000;
    border-radius: 4px;
    color: #555;
    font-size: .9rem;
}

.guide-start strong {
    color: #800000;
}

.guide-links {
    margin-top: 10px;
}

.guide-links a {
    display: inline-block;
    margin-right: 14px;
    color: #428bca;
    font-weight: 700;
    text-decoration: none;
}

.guide-links a:hover {
    color: #800000;
    text-decoration: underline;
}


/* Subject-specific resources */

.guide-subjects {
    margin-top: 25px;
    padding: 18px;
    background: #fff;
    border-radius: 6px;
    border-top: 3px solid #800000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.guide-subjects h2 {
    margin-bottom: 8px;
}

.guide-subjects > p {
    color: #555;
}

.guide-subject-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 18px;
}

.guide-subject-item {
    padding: 12px;
    background: #f9f9f9;
    border-radius: 6px;
}

.guide-subject-item strong {
    display: block;
    margin-bottom: 4px;
    color: #800000;
}

.guide-subject-item span {
    color: #555;
    font-size: .88rem;
    line-height: 1.45;
}


/* Final Research Guide section */

.guide-next {
    margin-top: 25px;
    padding: 18px;
    text-align: center;
    background: #800000;
    border-radius: 6px;
    color: #fff;
}

.guide-next h2 {
    margin-bottom: 6px;
    color: #fff;
}

.guide-next p {
    margin-bottom: 12px;
    color: #f7eeee;
}

.guide-next a {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 6px;
    background: #fff;
    color: #800000;
    text-decoration: none;
    font-weight: 700;
}


/* Responsive */

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

    .guide-path {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .guide-subject-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .research-card-grid {
        grid-template-columns: 1fr;
    }

    .research-card-grid .staff-card {
        min-height: 0;
    }

    .research-guide-callout {
        flex-direction: column;
        align-items: flex-start;
    }
}