@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-ExtraLight.ttf') format('truetype');
        font-weight: 200;
        font-style: normal;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-ExtraLightItalic.ttf') format('truetype');
        font-weight: 200;
        font-style: italic;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-Light.ttf') format('truetype');
        font-weight: 300;
        font-style: normal;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-LightItalic.ttf') format('truetype');
        font-weight: 300;
        font-style: italic;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-Italic.ttf') format('truetype');
        font-weight: 400;
        font-style: italic;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-Semibold.ttf') format('truetype');
        font-weight: 600;
        font-style: normal;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-SemiboldItalic.ttf') format('truetype');
        font-weight: 600;
        font-style: italic;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-Bold.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-BoldItalic.ttf') format('truetype');
        font-weight: 700;
        font-style: italic;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-Black.ttf') format('truetype');
        font-weight: 900;
        font-style: normal;
}

@font-face {
        font-family: 'SourceSansPro';
        src: url('../fonts/SourceSansPro-BlackItalic.ttf') format('truetype');
        font-weight: 900;
        font-style: italic;
}

/* Variables */
:root {
        --primary-color: hsl(212, 84%, 24%);
        --primary-color-light: hsl(212, 84%, 30%);
        --accent-color: hsl(34, 95%, 52%);
        --accent-color-light: hsl(34, 95%, 50%);
        --secondary-color: #f8f8f8;
        --white-color: #ffffff;
        --black-color: #000000;
        --heading-text: hsl(0, 0%, 17%);
        --text-color: #444;
        --hero-height: 87vh;
        --sub-hero-height: 60vh;
        --footer-bg: hsl(200, 3%, 23%);
        --footer-bg-dark: hsl(0, 0%, 17%);
        --social-icon-color: #555;
        --background-color: #fff;
        --border-color: hsl(0, 0%, 80%);
        --hero-height: 90vh;
        --designation: hsl(0, 0%, 43.5%);
        --link-color: hsl(210, 98%, 21%);

        /* Colors */
        --color-heading: hsl(212, 84%, 24%);
        --color-text: #333;
        --color-link: #007BFF;
        --color-link-hover: #0056b3;
        --color-muted: #666;
        --border-color: #ddd;

        /* Spacing */
        --space-lg: 2rem;
        --space-md: 1.5rem;
        --space-sm: 1rem;
        --space-xs: 0.5rem;
}


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

body {
        font-family: 'SourceSansPro', sans-serif;
        color: var(--text-color);
        min-height: 100dvh;
}

.hero-overlay h1 {
        color: var(--white-color);
        font-size: 3rem;
        margin-bottom: 0.5rem;
        font-weight: 600;
}

.hero-overlay p {
        color: var(--white-color);
        font-size: 1.3rem;
        max-width: 600px;
        margin-bottom: 2rem;
}

/* Scroll Indicator */
.scroll-indicator {
        width: 30px;
        height: 50px;
        border: 2px solid var(--white-color);
        border-radius: 25px;
        position: relative;
        cursor: pointer;
}

.scroll-indicator span {
        display: block;
        width: 4px;
        height: 4px;
        background: var(--white-color);
        border-radius: 50%;
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        animation: scrollAnim 1s infinite;
}

@keyframes scrollAnim {
        0% {
                opacity: 0;
                top: 10px;
        }

        50% {
                opacity: 1;
        }

        100% {
                opacity: 0;
                top: 30px;
        }
}


/* The slides container */
.hero-slides {
        width: 100%;
        height: 100%;
        position: relative;
}

/* Each individual slide */
.slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        /* Hide by default */
        transition: opacity 1s;
        /* smooth fade transition */
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        /* if you want that parallax effect */
}

/* The "active" slide is visible */
.slide.active {
        opacity: 1;
        z-index: 2;
}

/* The overlay inside each slide is styled as usual, no change. */

/* Example backgrounds for each slide 
   (Approach B: define them in CSS, or you can inline them if you prefer) */
.slide:nth-child(1) {
        background-image: url('../images/hero1.jpg');
}

.slide:nth-child(2) {
        background-image: url('../images/hero2.jpg');
}

.slide:nth-child(3) {
        background-image: url('../images/hero3.jpg');
}

/* Navigation Buttons */
.slide-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.4);
        color: #fff;
        border: none;
        font-size: 2rem;
        padding: 0.5rem 1rem;
        cursor: pointer;
        z-index: 3;
}

.slide-nav:hover {
        background: rgba(0, 0, 0, 0.6);
}

.prev {
        left: 10px;
}

.next {
        right: 10px;
}

/* Mission Section */
.mission-section {
        padding: 3rem 1rem;
        background: var(--white-color);
        /* Removed margin-top to eliminate empty gap */
}

.mission-section .container {
        max-width: 1000px;
        margin: 0 auto;
        text-align: center;
}

.mission-section h2 {
        font-size: 2rem;
        color: var(--primary-color);
        margin-bottom: 1.5rem;
        font-weight: 600;
}

.mission-section p {
        color: var(--text-color);
        font-size: 1.2rem;
        /* Increased text size */
        line-height: 1.8;
        margin-bottom: 1.5rem;
}

.btn-l {
        display: inline-block;
        background-color: var(--primary-color);
        color: var(--white-color);
        text-decoration: none;
        border: none;
        padding: 0.8rem 1.5rem;
        border-radius: 4px;
        font-weight: 500;
        transition: background-color var(--transition-speed);
}

.btn-l:hover {
        background-color: var(--accent-color);
}

.btn {
        display: inline-block;
        background-color: var(--primary-color);
        color: var(--white-color);
        text-decoration: none;
        border: none;
        padding: 0.8rem 1.5rem;
        border-radius: 4px;
        font-weight: 500;
        transition: background-color var(--transition-speed);
}

.btn:hover {
        background-color: var(--accent-color);
}

/* Responsive */
@media (max-width: 990px) {
        .mobile-navbar-view {
                display: block;
        }

        .navigation ul {
                display: none;
                /* For future hamburger menu */
        }

        .logo {
                font-size: 1.5rem;
        }

        .hero-overlay h1 {
                font-size: 2.5rem;
        }

        .hero-overlay p {
                font-size: 1.1rem;
        }
}

/* =======================
   NEWS & UPDATES SECTION
======================= */

.news-updates {
        padding: 2rem 0;
}

/* Section Heading */
.news-updates h2 {
        text-align: center;
        font-size: 2rem;
        color: var(--primary-color);
        margin-bottom: 2.5rem;
        font-weight: 600;
}

/* Tabs Wrapper */
.tabs-wrapper {
        margin-bottom: 1.5rem;
        border-bottom: 1px solid #ddd;
        /* Thin bottom border across all tabs */
}

.tabs-list {
        display: flex;
        justify-content: center;
        gap: 2rem;
        list-style: none;
        padding: 0;
        margin-bottom: -1px;
        /* So the bottom border of the active tab lines up */
}

.tab-item {
        position: relative;
        padding: 0.5rem 0;
        cursor: pointer;
        color: var(--heading-text);
        font-size: 16px;
        font-weight: 600;
        transition: color var(--transition-speed);
}

.tab-item:hover {
        color: var(--accent-color);
}

.tab-item.active {
        font-weight: 600;
        border-bottom: 4px solid var(--accent-color);
        background-color: var(--accent-color);
        color: white;
        padding: 7px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
}

/* News Container */
.news-container {
        position: relative;
        max-height: 400px;
        overflow-y: auto;
        border-radius: 4px;
        padding: 1rem;
        box-sizing: border-box;
}

/* Placeholder text when no category selected */
.placeholder-text {
        text-align: center;
        font-size: 1.1rem;
        color: #666;
}

/* News Item */
.news-item {
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px dashed #ccc;
        transition: background-color 0.3s;
}

.news-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
}

.news-item:hover {
        background-color: #fafafa;
}

.news-title a {
        font-size: 1.1rem;
        font-weight: 600;
        text-decoration: none;
        color: var(--link-color);
        transition: color var(--transition-speed);
}

.news-title a:hover {
        color: var(--accent-color);
}

.news-meta {
        margin: 0.3rem 0;
        font-size: 0.85rem;
        color: #999;
}

.news-meta span {
        display: inline-block;
        margin-right: 1rem;
}

.news-desc {
        font-size: 1rem;
        color: var(--text-color);
        line-height: 1.5;
        font-weight: 500;

}

.news-desc .ql-editor>* {
        display: none;
}

.news-desc .ql-editor>*:first-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
}

.news-desc a {
        color: var(--text-color);
        font-weight: 500;
}

.news-desc strong {
        font-weight: 400;
}

.ql-tooltip input {
        display: none;
}

/* ========== AUTO SCROLL ANIMATION (Optional) ========== */

/* If you want an automatic vertical scroll from bottom to top, 
   you can uncomment and adjust these. 
   However, this pure CSS approach doesn't allow for manual scrolling. */
/*
.news-container {
  overflow: hidden;
}
.news-container-inner {
  display: inline-block;
  animation: verticalScroll 10s linear infinite;
}
@keyframes verticalScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
*/

/* Responsive Tweak */
@media (max-width: 600px) {
        .tabs-list {
                gap: 1rem;
                flex-wrap: wrap;
                justify-content: center;
        }

        .news-container {
                max-height: 350px;
                /* Slightly bigger for mobile if needed */
        }
}

/* ========================
   VC MESSAGE SECTION
======================== */
.vc-message {
        background-color: var(--white-color);
        padding: 3rem 0;
}

.vc-message p {
        text-align: justify;
        margin-block: 16px;
}

.vc-container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2rem;
}

.vc-image img {
        width: 250px;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.vc-content {
        flex: 1;
        min-width: 300px;
}

.vc-content h2 {
        font-size: 2rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
        font-weight: 600;
}

.vc-content p {
        margin-bottom: 1rem;
        line-height: 1.6;
        font-size: 1.1rem;
}

.vc-signature {
        font-style: italic;
        color: var(--accent-color);
        margin-top: 1rem;
}

/********************************
 * Generalized Headings & Layout 
 ********************************/
.section-heading {
        /* Same style as your "News & Updates" h2, so we can reuse easily */
        text-align: center;
        font-size: 2rem;
        color: var(--primary-color);
        margin-bottom: 1.5rem;
        font-weight: 600;
}

.section-subheading {
        text-align: center;
        max-width: 800px;
        margin: 0 auto 2rem auto;
        font-size: 1.1rem;
        line-height: 1.6;
        color: var(--text-color);
}

/********************************
 * Academics Section (Tabs + Horizontal Scroll + Show All)
 ********************************/
.academics-section {
        background-color: var(--secondary-color);
        padding: 3rem 1rem;
}

.academics-container {
        max-width: 1200px;
        margin: 0 auto;
}

/* Tabs Wrapper */
.acad-tabs-wrapper {
        margin-bottom: 2rem;
        border-bottom: 1px solid #ddd;
        /* thin line below tabs */
}

.acad-tabs-list {
        display: flex;
        justify-content: center;
        gap: 2rem;
        list-style: none;
        margin: 0;
        padding: 0;
}

.acad-tab-item {
        position: relative;
        padding: 0.5rem 0;
        cursor: pointer;
        color: var(--primary-color);
        font-weight: 500;
        transition: color var(--transition-speed);
        border-bottom: 3px solid transparent;
        /* for the active underline */
}

.acad-tab-item:hover {
        color: var(--accent-color);
}

.acad-tab-item.active {
        font-weight: 600;
        color: var(--accent-color);
        border-bottom: 3px solid var(--accent-color);
}

/* Program Container */
.acad-program-container {
        display: none;
        /* hidden by default */
}

.acad-program-container.active {
        display: block;
        /* show only active tab’s container */
}

/* Horizontal Wrapper & Track */
.acad-horizontal-wrap {
        position: relative;
        margin-bottom: 1rem;
        /* space for the show-all button */
}

.acad-track {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        scroll-behavior: smooth;
        /* for arrow clicks */
        padding: 1rem 0;
        /* top & bottom spacing */
        /* Hide default scrollbar if desired: 
    scrollbar-width: none; (Firefox)
    -ms-overflow-style: none; (IE) 
  */
}

.acad-track::-webkit-scrollbar {
        display: none;
        /* hide scrollbar in Chrome/Safari if desired */
}

/* Department Cards in Horizontal */
.acad-dept-card {
        min-width: 220px;
        background-color: var(--white-color);
        border-radius: 8px;
        padding: 1rem;
        text-align: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s, box-shadow 0.3s;
        flex-shrink: 0;
        /* Prevents flex from shrinking card width */
}

.acad-dept-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.acad-dept-card img {
        width: 100%;
        height: 120px;
        object-fit: fill;
        border-radius: 4px;
        margin-bottom: 0.5rem;
}

.acad-dept-card h3 {
        margin-bottom: 0.3rem;
        font-size: 1.1rem;
        color: var(--primary-color);
        font-weight: 600;
}

.acad-dept-card p {
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
        color: var(--text-color);
}

.acad-dept-card a {
        text-decoration: none;
        color: var(--accent-color);
        font-weight: 500;
}

/* Arrow Buttons */
.acad-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: var(--white-color);
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.3rem 0.6rem;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s;
}

.acad-arrow:hover {
        background-color: var(--accent-color);
        color: var(--white-color);
}

.left-arrow {
        left: 10px;
}

.right-arrow {
        right: 10px;
}

/* Show All Button & Grid */
.acad-show-all-wrap {
        text-align: center;
        margin-bottom: 2rem;
}

.acad-btn-show-all {
        padding: 0.7rem 1.2rem;
        background-color: var(--primary-color);
        color: var(--white-color);
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1rem;
        font-weight: 500;
        transition: background-color 0.3s;
}

.acad-btn-show-all:hover {
        background-color: var(--accent-color);
}

.hidden {
        display: none !important;
}

.acad-grid-card {
        background-color: var(--white-color);
        border-radius: 8px;
        text-align: center;
        padding: 1rem;
        transition: transform 0.3s, box-shadow 0.3s;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.acad-grid-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.acad-grid-card img {
        width: 100%;
        height: 100px;
        object-fit: cover;
        border-radius: 4px;
        margin-bottom: 0.5rem;
}

.acad-grid-card h4 {
        font-size: 1rem;
        color: var(--primary-color);
        margin-bottom: 0.3rem;
        font-weight: 600;
}

.acad-grid-card a {
        text-decoration: none;
        color: var(--accent-color);
        font-weight: 500;
}

/* Responsive Tweak */
@media (max-width: 990px) {
        .acad-arrow {
                display: none;
                /* Hide arrows if you want swipe on mobile */
        }
}

.acad-all-grid .dept-list-grid {
        display: grid;
        /* 220px is an example min width; adjust to your preference */
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 0.5rem 1rem;
        list-style: none;
        margin: 0;
        padding: 0;
}

.acad-all-grid .dept-list-grid li {
        /* Basic styling for list items */
        font-size: 1rem;
        line-height: 1.5;
        margin: 0.2rem 0;
}

.acad-all-grid .dept-list-grid a {
        text-decoration: none;
        color: var(--accent-color);
        /* or var(--primary-color), up to you */
        transition: color 0.3s;
}

.acad-all-grid .dept-list-grid a:hover {
        color: var(--primary-color);
}

/* ===========================
   FADE-IN ON SCROLL
=========================== */
.fade-in-on-scroll {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* Responsive Tweak */
@media (max-width: 990px) {
        .vc-container {
                flex-direction: column;
                text-align: center;
        }

        .vc-image img {
                margin-bottom: 1rem;
        }

        .vc-content {
                min-width: auto;
        }
}

/********************************
 * CAMPUS LIFE (Index Preview)
 ********************************/
.campus-life-preview {
        background-color: var(--white-color);
        padding: 3rem 0;
        text-align: center;
}

.campus-life-container {
        max-width: 1200px;
        margin: 0 auto;
}

.campus-life-mini-gallery {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
        flex-wrap: wrap;
        justify-content: center;
}

.cl-item {
        width: calc(100% / 4 - calc(2rem / 4) - 4px);
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s, box-shadow 0.3s;
}

.cl-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

.cl-item img {
        width: 100%;
        height: 200px;
        /* or auto; up to you */
        object-fit: cover;
        display: block;
}

@media screen and (max-width: 1024px) {
        .cl-item {
                width: calc(100% / 2 - calc(2rem / 2) - 2px);
        }
}

@media screen and (max-width: 768px) {
        .cl-item {
                width: 100%;
        }
}

.btn-explore-campus {
        display: inline-block;
        background-color: var(--accent-color);
        color: var(--white-color);
        text-decoration: none;
        padding: 0.8rem 1.5rem;
        border-radius: 4px;
        font-weight: 500;
        transition: background-color var(--transition-speed);
}

.btn-explore-campus:hover {
        background-color: #d64e47;
        /* slightly darker accent on hover */
}

/********************************
 * CAMPUS LIFE PAGE - EXPANDED
 ********************************/
.campus-life-hero {
        position: relative;
        height: 60vh;
        background: url('../images/video-tour.webp') center center / cover no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
}

.campus-life-hero .hero-overlay {
        width: 100%;
        height: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: var(--white-color);
}

.campus-life-hero h1 {
        font-size: 3rem;
        margin-bottom: 0.5rem;
        font-weight: 600;
}

.campus-life-hero p {
        font-size: 1.2rem;
}

/********************************
 * SHARED HEADINGS, CONTAINERS
 ********************************/
.container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;
        /* optional side padding */
}

.cl-section-heading {
        font-size: 2rem;
        color: var(--primary-color);
        margin: 1rem;
        font-weight: 600;
        text-align: center;
}

.cl-section-subheading {
        max-width: 800px;
        margin: 0 auto 2rem auto;
        font-size: 1.1rem;
        line-height: 1.6;
        color: var(--text-color);
        text-align: center;
}

/********************************
 * FIRST MASONRY GALLERY 
   (campus-life-gallery)
 ********************************/
.campus-life-gallery {
        padding: 3rem 1rem;
        background-color: var(--white-color);
}

.cl-masonry-grid {
        columns: 4;
        column-gap: 1rem;
}

.cl-grid-item {
        display: inline-block;
        margin: 0 0 1rem;
        width: 100%;
        cursor: pointer;
        break-inside: avoid;
        transition: transform 0.3s, box-shadow 0.3s;
}

.cl-grid-item img {
        width: 100%;
        border-radius: 4px;
        display: block;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cl-grid-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/********************************
 * EVENTS & ACTIVITIES SLIDER
   (campus-life-slider)
 ********************************/
.campus-life-slider {
        padding: 3rem 1rem;
        background: var(--secondary-color);
}

.cl-horizontal-wrap {
        position: relative;
        margin-top: 2rem;
}

.cl-track {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        scroll-behavior: smooth;
        padding: 0.5rem 0;
}

.cl-track::-webkit-scrollbar {
        display: none;
}

.cl-slide {
        min-width: 250px;
        background: var(--white-color);
        border-radius: 8px;
        padding-bottom: 1rem;
        flex-shrink: 0;
        text-align: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s;
        overflow: hidden;
}

.cl-slide:hover {
        transform: translateY(-5px);
}

.cl-slide img {
        width: 100%;
        height: 140px;
        object-fit: fill;
        margin-bottom: 0.5rem;
}

.cl-slide p {
        margin: 0;
        font-size: 1rem;
        color: var(--text-color);
        line-height: 1.4;
}

/* Slider arrows */
.cl-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: var(--white-color);
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.3rem 0.6rem;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s;
}

.cl-arrow:hover {
        background-color: var(--accent-color);
        color: var(--white-color);
}

.left-arrow {
        left: 10px;
}

.right-arrow {
        right: 10px;
}

/* LIBRARY & DIGITAL RESOURCES */
.cl-library-section {
        padding: 3rem 0;
}

.cl-library-resources-grid {
        display: flex;
        gap: 1.5rem;
        margin-top: 2rem;
        flex-wrap: wrap;
        justify-content: center;
}

.cl-lib-card {
        background: var(--secondary-color);
        border-radius: 8px;
        padding: 1.5rem;
        text-align: center;
        width: calc(100% / 3 - calc(1.5rem / 3) - 8px);
        position: relative;
        overflow: hidden;
}

/* Pseudo-element now includes a background image with a dark overlay */
.cl-lib-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), var(--bg-image);
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1;
}

.cl-lib-card:hover::before {
        opacity: 1;
}

.cl-lib-card:hover .cl-lib-icon {
        opacity: 0;
}

.cl-lib-card:hover h3,
.cl-lib-card:hover p {
        color: var(--white-color);
        z-index: 2;
        position: relative;
}

.cl-lib-card:hover .cl-lib-link svg {
        fill: var(--white-color);
        transform: rotate(45deg);
}

.cl-lib-icon {
        margin-bottom: 1rem;
        transition: opacity 0.3s ease;
}

.cl-lib-icon svg {
        fill: var(--primary-color);
}

.cl-lib-card h3 {
        font-size: 1.2rem;
        color: var(--heading-text);
        margin-bottom: 0.5rem;
        transition: color 0.3s ease;
}

.cl-lib-card p {
        font-size: 1rem;
        color: var(--text-color);
        margin-bottom: 1rem;
        transition: color 0.3s ease;
}

.cl-lib-link {
        text-decoration: none;
        display: inline-block;
        margin-top: 1rem;
        transition: all 0.3s ease;
}

.cl-lib-link svg {
        fill: var(--primary-color);
        transition: all 0.3s ease;
}

@media screen and (max-width: 1024px) {
        .cl-lib-card {
                width: calc(100% / 2 - calc(1.5rem / 2) - 8px);
        }
}

@media screen and (max-width: 768px) {
        .cl-lib-card {
                width: 100%;
        }
}

/********************************
 * FACILITIES & RESOURCES
 ********************************/
.cl-facilities-section {
        background: var(--secondary-color);
        padding: 3rem 1rem;
}

.cl-facilities-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1.5rem;
        margin-top: 2rem;
}

.cl-fac-card {
        background: var(--white-color);
        border-radius: 8px;
        padding: 1rem;
        text-align: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s;
}

.cl-fac-card:hover {
        transform: translateY(-4px);
}

.cl-fac-card img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: 4px;
        margin-bottom: 1rem;
}

.cl-fac-card h3 {
        font-size: 1.2rem;
        color: var(--primary-color);
        margin-bottom: 0.5rem;
}

.cl-fac-card p {
        font-size: 1rem;
        color: var(--text-color);
}

/********************************
 * SECOND PICTURE GALLERY
   (cl-picture-gallery)
 ********************************/
.cl-picture-gallery {
        padding: 3rem 1rem;
        background: var(--white-color);
}

.cl-picture-gallery .container {
        max-width: 1200px;
        margin: 0 auto;
}

.cl-picture-gallery .cl-masonry-grid {
        columns: 4;
        column-gap: 1rem;
}

.cl-picture-gallery .cl-grid-item {
        display: inline-block;
        margin: 0 0 1rem;
        width: 100%;
        cursor: pointer;
        break-inside: avoid;
        transition: transform 0.3s, box-shadow 0.3s;
}

.cl-picture-gallery .cl-grid-item img {
        width: 100%;
        border-radius: 4px;
        display: block;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cl-picture-gallery .cl-grid-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/********************************
 * VIDEO GALLERY (cl-video-gallery)
 ********************************/
.cl-video-gallery {
        background: var(--white-color);
        padding: 3rem 1rem;
}

.cl-video-gallery .container {
        max-width: 1500px;
        margin: 0 auto;
}

.cl-video-gallery .cl-horizontal-wrap {
        position: relative;
        margin-top: 2rem;
}

.cl-video-gallery .cl-track {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        scroll-behavior: smooth;
        padding: 0.5rem 0;
}

.cl-video-gallery .cl-track::-webkit-scrollbar {
        display: none;
}

.cl-video-gallery .cl-slide {
        min-width: 250px;
        background: var(--secondary-color);
        border-radius: 8px;
        padding: 1rem;
        flex-shrink: 0;
        text-align: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s;
        cursor: pointer;
}

.cl-video-gallery .cl-slide:hover {
        transform: translateY(-4px);
}

.cl-video-gallery .cl-slide img {
        width: 100%;
        height: 140px;
        object-fit: cover;
        border-radius: 4px;
        margin-bottom: 0.5rem;
}

.cl-video-gallery .cl-slide p {
        margin: 0;
        font-size: 1rem;
        color: var(--text-color);
        line-height: 1.4;
}

/* Arrows for video gallery */
.cl-video-gallery .cl-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: var(--white-color);
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.3rem 0.6rem;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s;
}

.cl-video-gallery .cl-arrow:hover {
        background-color: var(--accent-color);
        color: var(--white-color);
}

.cl-video-gallery .left-arrow {
        left: 10px;
}

.cl-video-gallery .right-arrow {
        right: 10px;
}

/********************************
 * MODAL LIGHTBOX
 ********************************/
.cl-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
}

.hidden {
        display: none !important;
}

.cl-modal-content {
        position: relative;
        max-width: 80%;
        max-height: 80%;
        overflow: hidden;
        border-radius: 4px;
}

.cl-close {
        position: absolute;
        top: -40px;
        right: 0;
        color: #ffffff;
        font-size: 2rem;
        cursor: pointer;
        z-index: 999;
}

.cl-modal-body {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
}

.cl-modal-body img,
.cl-modal-body iframe {
        max-width: 100%;
        max-height: 100%;
        border-radius: 4px;
        background: #ffffff;
}

/********************************
 * RESPONSIVE ADJUSTMENTS
 ********************************/
@media (max-width: 992px) {
        .cl-masonry-grid {
                columns: 2;
        }

        .cl-picture-gallery .cl-masonry-grid {
                columns: 2;
        }
}

@media (max-width: 600px) {
        .cl-masonry-grid {
                columns: 1;
        }

        .cl-picture-gallery .cl-masonry-grid {
                columns: 1;
        }

        .campus-life-hero h1 {
                font-size: 2rem;
        }
}

/*************************
 * FOOTER STYLES
 *************************/
.site-footer {
        background-color: var(--footer-bg-dark);
        color: var(--white-color);
        font-size: 0.95rem;
        margin-top: 2rem;
}

/* Footer Top */
.footer-top {
        padding: 5rem 0;
        padding-top: 5.1rem;
}

.footer-container {
        margin: 0 auto;
        padding: 0 1rem;
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 2rem;
}

.footer-first-col {
        padding-right: 50px;
}

.footer-col h3 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
        font-weight: 600;
        color: var(--white-color);
}

.footer-col p {
        line-height: 1.6;
}

.footer-links {
        list-style: none;
        margin: 0;
        padding: 0;
}

.footer-links li {
        margin-bottom: 0.5rem;
}

.footer-links a {
        color: var(--white-color);
        text-decoration: none;
        transition: color 0.3s;
}

.footer-links a:hover {
        color: var(--accent-color);
}

/* Socials */
.footer-socials {
        display: flex;
        gap: 0.75rem;
        margin-top: 1rem;
}

.social-link {
        display: inline-block;
        color: var(--white-color);
        background-color: transparent;
        font-size: 1.1rem;
        width: 2rem;
        /* optional for circle shape */
        height: 2rem;
        text-align: center;
        border-radius: 50%;
        line-height: 2rem;
        transition: background-color 0.3s, color 0.3s;
}

.social-link:hover {
        background-color: var(--accent-color);
        color: var(--white-color);
}

/* Contact Info */
.footer-contact {
        list-style: none;
        margin: 0;
        padding: 0;
}

.footer-contact li {
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
}

.footer-contact i {
        font-size: 1rem;
}

/* Footer Bottom */
.footer-bottom {
        padding: 0.5rem 0;
        text-align: center;
        background-color: var(--footer-bg);
        border-top: solid 0.5pt var(--secondary-color);
}

.footer-bottom .footer-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
}

.footer-bottom p {
        margin: 0;
        color: var(--white-color);
        font-size: 12px;
}

.footer-bottom span {
        color: var(--accent-color);
}

/* Responsive Tweak */
@media (max-width: 990px) {
        .footer-container {
                grid-template-columns: 1fr;
                /* Single column on mobile */
        }

        .footer-top {
                padding-block: 2.5rem;
        }
}

.cl-slide iframe {
        /* Make the iframe adapt to the slide's size (if desired) */
        width: 100%;
        height: auto;
}


/* Masonry Grid Item Styles */
.cl-grid-item {
        position: relative;
        /* So overlay can be positioned absolutely */
        overflow: hidden;
        /* Hide the image expansion on hover */
        border-radius: 4px;
        /* Optional corner rounding */
        cursor: pointer;
        transition: transform 0.3s, box-shadow 0.3s;
        /* Already existed */
}

/* The image itself */
.cl-grid-image {
        width: 100%;
        height: auto;
        /* or a fixed height if you prefer */
        object-fit: cover;
        transition: transform 0.3s ease;
}

/* On hover, slightly zoom the image (optional) */
.cl-grid-item:hover .cl-grid-image {
        transform: scale(1.1);
}

/* The overlay container */
.cl-overlay {
        position: absolute;
        bottom: 0;
        /* Start at bottom */
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        padding: 1rem;
        text-align: center;

        /* Initially hidden or off-screen for desktop */
        opacity: 0;
        transform: translateY(100%);
        transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show overlay on hover (desktop) */
.cl-grid-item:hover .cl-overlay {
        opacity: 1;
        transform: translateY(0);
}

/* The text/title inside overlay */
.cl-title {
        font-size: 1.2rem;
        font-weight: bold;
        transition: color 0.3s ease;
}

/* On hover, accent color (optional) */
.cl-grid-item:hover .cl-title {
        color: var(--accent-color);
}

/* --------------- MOBILE VIEW --------------- */
/* Always show overlay on mobile */
@media (max-width: 990px) {
        .cl-overlay {
                opacity: 1;
                transform: translateY(0);
        }

        /* If you want the background slightly less dark on mobile, you can tweak here: */
        .cl-overlay {
                background: rgba(0, 0, 0, 0.5);
        }

        .cl-title {
                font-size: 1rem;
                /* smaller text on mobile if desired */
        }
}

/* Default (not scrolled) – nav text white */
.header .navigation a {
        color: #fff;
        /* or var(--white-color) */
        transition: color 0.3s;
}

/* When scrolled – nav text primary color */
.header.scrolled .navigation a {
        color: var(--primary-color);
        font-weight: 700;
        font-size: 18px;
}

/* Logo container */
.logo {
        display: flex;
        align-items: center;
        gap: 0.5rem;
}

/* Logo image styling */
.logo-img {
        height: 60px;
}

/********************************
 * NAVBAR BASE STYLES
 ********************************/
.header {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 999;
        transition: background-color 0.4s, box-shadow 0.4s;
        background: transparent;
        /* not scrolled */
}

.header.scrolled {
        background: var(--white-color);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

/* Container with fixed height for a stable navbar */
.nav-container {
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
        max-width: 1200px;
        padding: 0 1rem;
}

.nav-container a {
        text-decoration: none;
}

/********************************
 * LOGO
 ********************************/
.logo {
        display: flex;
        align-items: center;
        gap: 0.5rem;
}

.white-logo {
        display: inline-block;
        width: 55px;
        height: auto;
}

.color-logo {
        display: none;
        width: 60px;
        height: auto;
}

/* Switch logos when scrolled */
.header.scrolled .white-logo {
        display: none;
}

.header.scrolled .color-logo {
        display: inline-block;
}

.logo-text {
        font-size: 1.8rem;
        font-weight: 600;
        color: #fff;
        transition: color 0.3s;
}

/* When scrolled, text color is primary */
.header.scrolled .logo-text {
        color: var(--primary-color);
        text-transform: uppercase;
}

/********************************
 * NAV LINKS (Desktop)
 ********************************/

.navigation ul {
        list-style: none;
        display: flex;
        gap: 1rem;
        margin: 0;
        padding: 0;
}

/* Default (no scroll) - text is white */
.navigation a {
        text-decoration: none;
        color: #fff;
        font-size: 1rem;
        transition: color 0.3s;
}

.navigation a:hover {
        color: var(--accent-color);
}


.header.scrolled .navigation a:hover {
        color: var(--accent-color);
}

/********************************
 * HAMBURGER MENU
 ********************************/
.hamburger {
        display: none;
        /* hidden on desktop by default */
        background: none;
        border: none;
        cursor: pointer;
}

.hamburger .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background-color: #fff;
        /* default color (no scroll) */
        transition: background-color 0.3s;
}

/* When scrolled, hamburger bars become primary color */
.header.scrolled .hamburger .bar {
        background-color: var(--primary-color);
}

/* MOBILE STYLES */
@media (max-width: 990px) {

        /* Show hamburger, hide nav links in a row */
        .hamburger {
                display: block;
        }

        /* Hide the nav by default, we’ll open it via JS */
        .navigation {
                position: absolute;
                top: 70px;
                /* below the nav-container */
                left: 0;
                width: 100%;
                background-color: var(--white-color);
                border-top: 1px solid #ddd;
                display: none;
                /* hidden by default */
        }

        /* If you'd like the nav open as a column */
        .navigation ul {
                flex-direction: column;
                gap: 0;
        }

        .navigation ul li {
                border-bottom: 1px solid #eee;
        }

        .navigation ul li a {
                display: block;
                padding: 1rem 2rem;
                color: var(--primary-color);
                /* Because background is white now for mobile nav */
        }

        /* If nav is open */
        .navigation.open {
                display: block;
        }

        /* Adjust hamburger bar color when scrolled on mobile */
        .header.scrolled .hamburger .bar {
                background-color: var(--primary-color);
        }

        /* Make the default logo text color also adapt for mobile if not scrolled */
        .logo-text {
                color: #fff;
        }
}

/* CONTACT US PAGE */
.contact-hero {
        position: relative;
        height: 40vh;
        background: url('../images/contact_hero.jpg') center center / cover no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
}

.contact-hero-overlay {
        background: rgba(0, 0, 0, 0.4);
        width: 100%;
        height: 100%;
        text-align: center;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
}

.contact-info {
        background: var(--white-color);
        padding-block: 3rem;
}

.contact-container {
        max-width: 1000px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
}

.contact-details {
        text-align: left;
}

.contact-details h2 {
        font-size: 1.6rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
}

.contact-form {
        background: var(--secondary-color);
        border-radius: 8px;
        padding-block: 1.5rem;
}

.contact-form h2 {
        font-size: 1.6rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
}

.contact-form form {
        display: flex;
        flex-direction: column;
}

.contact-form input,
.contact-form textarea {
        margin-bottom: 1rem;
        padding: 0.7rem;
        border-radius: 4px;
        border: 1px solid #ccc;
}

.contact-info-footer p {
        margin-block: 10px;
}

.btn-send {
        background-color: var(--primary-color);
        color: #fff;
        padding: 0.7rem 1.2rem;
        border: none;
        border-radius: 4px;
        cursor: pointer;
}

.btn-send:hover {
        background-color: var(--accent-color);
}

@media (max-width: 990px) {
        .contact-container {
                grid-template-columns: 1fr;
        }
}



/* PARALLAX BACKGROUND AND FOUR BUTTONS SECTION */
.parallax-four-section {
        position: relative;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
}

.parallax-bg {
        background: url('../images/parallax_bg.jpg') center center / cover no-repeat fixed;
        position: absolute;
        width: 100%;
        height: 100%;
}

.parallax-overlay {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #fff;
}

.four-section-title {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
}

.four-section-subtitle {
        font-size: 1.2rem;
}

.four-buttons-container {
        position: relative;
        margin-top: auto;
        background: var(--white-color);
        padding: 3rem 1rem;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
}

.four-buttons-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 2rem;
        max-width: 1200px;
        margin: 0 auto;
}

.four-button {
        background: var(--secondary-color);
        text-align: center;
        border-radius: 8px;
        padding: 1.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s;
}

.four-button:hover {
        transform: translateY(-4px);
}

.four-btn-icon {
        display: inline-block;
        width: 50px;
        height: 50px;
        background: var(--accent-color);
        color: #fff;
        font-size: 1.8rem;
        border-radius: 50%;
        line-height: 50px;
        margin-bottom: 0.5rem;
}

.four-btn-text {
        font-size: 1.4rem;
        color: var(--primary-color);
        margin-bottom: 0.5rem;
        font-weight: 600;
}

.sub-list {
        list-style: none;
        padding: 0;
        margin: 0;
        color: var(--text-color);
        font-size: 0.95rem;
        margin-top: 0.5rem;
}

.sub-list li {
        margin-bottom: 0.3rem;
}

@media (max-width: 990px) {
        .four-buttons-container {
                grid-template-columns: 1fr 1fr;
        }

        .parallax-overlay {
                top: 30%;
        }
}

.top-bar {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: var(--primary-color);
        z-index: 1000;
        color: var(--white-color);
        font-size: 0.9rem;
        font-weight: 500;
}

.top-bar-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        margin: auto;
        padding: 0 1rem;
}

.top-bar-left,
.top-bar-right {
        display: flex;
        align-items: center;
}

.contact-item {
        margin-right: 1rem;
}

.social-icons a {
        color: var(--white-color);
        margin-right: 0.5rem;
        text-decoration: none;
}

.social-icons a:hover {
        color: var(--white-color);
}

.top-bar-menu {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;
}

.top-bar-menu li {
        margin-right: 1rem;
}

.top-bar-menu li a {
        color: var(--white-color);
        text-decoration: none;
        font-weight: 500;
}

.top-bar-menu li a:hover {
        color: var(--white-color);
}

.top-bar .apply-now-btn {
        border-radius: 0px;
}

.apply-now-btn:hover {
        background-color: var(--accent-color-light);
}

.text-container .apply-now-btn a {
        color: var(--white-color);
}

.text-container .apply-now-btn a:hover {
        text-decoration: none;
}

.header {
        position: relative;
        width: 100%;
        transition: background-color 0.4s, box-shadow 0.4s;
        background: transparent;
}

.header.scrolled {
        background: var(--white-color);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        position: fixed;
        top: 34px;
        z-index: 900;
}

.hero-overlay {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding-inline: 1.5rem;
        position: relative;
        top: 60px;
}

@media (max-width: 990px) {
        .top-bar {
                display: none;
        }

        .header.scrolled {
                top: 0;
        }

        .top-bar-inner {
                flex-direction: column;
                align-items: flex-start;
        }

        .top-bar-left,
        .top-bar-right {
                flex-direction: column;
                align-items: flex-start;
        }

        .apply-now-btn {
                width: 100%;
                text-align: center;
                margin-top: 0.5rem;
        }
}

/* Sticky Navbar under Top Bar */
.header {
        position: -webkit-sticky;
        position: sticky;
        top: 50px;
        /* height of top-bar, adjust if different */
        z-index: 900;
        transition: background-color 0.4s, box-shadow 0.4s;
        background: transparent;
}

/* Navbar styling when scrolled remains the same */
.header.scrolled {
        background: var(--white-color);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.hero-section {
        background: url(../images/hero/central-library-quest.webp) center center / cover no-repeat fixed;
        margin-top: 0;
        height: var(--hero-height);
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
}

@media (max-width:525px) {
        .hero-section {
                height: 75vh;
        }
}

/* Fixed Bottom Bar stays at bottom */
.news-bottom-bar {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: var(--primary-color);
        color: var(--white-color);
        text-align: center;
        font-size: 1.6rem;
        font-weight: 600;
        padding: 0.6rem;
        z-index: 1000;
}

.dropdown-menu {
        display: none;
        position: absolute;
        background: var(--submenu-bg);
        backdrop-filter: blur(4px);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
        list-style: none;
        padding: 0.5rem 0;
        margin: 0;
        min-width: 180px;
        z-index: 1000;
}

.dropdown:hover>.dropdown-menu {
        display: block;
}

.dropdown-submenu {
        position: relative;
}

.dropdown-submenu>.dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: 0.1rem;
}

/* Articles Section Container */
.articles-section {
        padding: 2rem;
        background-color: #f9f9f9;
}


/* Featured Article Styling */
.featured-article {
        position: relative;
        overflow: hidden;
}

.featured-article img {
        width: 100%;
        height: auto;
        display: block;
}

.featured-article .article-content {
        padding: 1rem;
        /* background: var(--white-color, #fff); */
}

.featured-article h2 {
        font-size: 2rem;
        margin: 0.5rem 0;
}

.featured-article p {
        font-size: 1rem;
        margin-bottom: 1rem;
}

/* Other Articles Grid */
.other-articles {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 1rem;
}

.article-card {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: white;
        border-radius: 10px;
}

.article-card img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;

}

.article-content {
        padding: 0.75rem 0;
        padding-top: 5px;
}

.article-content h3 {
        font-size: 1.25rem;
        margin: 0.5rem 0;
}

.article-content p {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
}

/* View More Button Styling */
.view-more {
        display: inline-block;
        display: flex;
        align-items: center;
        color: var(--accent-color);
        gap: 10px;
        text-decoration: none;
        border-radius: 4px;
        font-weight: 600;
        transition: background 0.3s;
}

.view-more svg {
        fill: var(--accent-color);
}

.view-more:hover {
        gap: 8px;
        transition: all 0.3s ease;
}

/* Responsive Design */
@media (max-width: 990px) {

        .other-articles {
                grid-template-columns: 1fr 1fr;
                grid-gap: 1rem;
        }
}

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

.video-tour-section {
        width: 100%;
        background: #000;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 65vh;
        position: relative;
        overflow: hidden;
}

.video-tour-section .tour-heading {
        color: var(--white-color);
        font-weight: 700;
        font-size: 2rem;
        text-transform: uppercase;
        margin-top: 20px;
}

.video-container {
        position: relative;
        width: 100%;
        /* max-width: 1200px; */
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
}

.video-thumbnail {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
}

.thumbnail-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.play-btn {
        position: absolute;
        z-index: 2;
        background: none;
        border: none;
        cursor: pointer;
}

.play-btn svg {
        width: 80px;
        height: 80px;
        fill: white;
        transition: transform 0.3s ease;
}

.play-btn:hover svg {
        transform: scale(1.2);
}

iframe.tour-video {
        width: 100%;
        height: 100%;
        border: none;
        position: absolute;
        top: 0;
        left: 0;
}

.display-none {
        display: none;
}

/* Featured Facilities Section */
.featured-facilities {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        width: 100%;
        height: auto;
}

.facility-item {
        position: relative;
        height: 300px;
        background-size: cover;
        background-position: center;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 1;
}

.facility-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #fff;
        z-index: 2;
}

.facility-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 15px;
        fill: #fff;
}

.facility-title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 10px;
}

.facility-details {
        font-size: 1rem;
        line-height: 1.4;
        color: var(--border-color);
}

/* Responsive Design */
@media (max-width: 1024px) {
        .featured-facilities {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media (max-width: 990px) {
        .featured-facilities {
                grid-template-columns: 1fr;
        }
}

/* How to Apply Section */
.how-to-apply-section {
        display: flex;
        width: 100%;
        height: auto;
        position: relative;
        background-color: #f9f9f9;
        overflow: hidden;
}

.content-container {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        /* Allows wrapping for responsiveness */
}

.image-container {
        width: 50%;
        height: auto;
        overflow: hidden;
}

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

.text-container {
        display: flex;
        width: 50%;
        padding: 50px 40px;
        background: linear-gradient(90deg, #fff 50%, #f5f5f5 100%);
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
}

.text-container h2 {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 20px;
        color: var(--primary-color);
}

.text-container p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 20px;
        color: #444;
}

.text-container ol {
        margin: 0 0 20px 1.5rem;
        padding: 0;
        color: #555;
}

.text-container ol li {
        margin-bottom: 10px;
}

.text-container ol li strong {
        color: var(--heading-text);
}

.text-container a {
        color: var(--link-color);
        text-decoration: none;
}

.text-container .apply-now-btn {
        color: white;
        border-radius: 0px;
}

.text-container a:hover {
        text-decoration: underline;
}

.apply-now-btn {
        background-color: var(--accent-color);
        color: #fff;
        text-decoration: none;
        padding: 12px 24px;
        border-radius: 5px;
        font-size: 1rem;
        font-weight: 500;
        transition: background-color 0.3s ease;
}

.apply-now-btn:hover {
        background-color: var(--accent-color-light);
}

/* Responsive Design */
@media (max-width: 1024px) {
        .how-to-apply-section {
                flex-direction: column;
        }

        .image-container,
        .text-container {
                width: 100%;
        }

        .text-container {
                padding: 30px 20px;
        }

        .text-container h2 {
                font-size: 1.8rem;
        }

        .text-container p,
        .text-container ol li {
                font-size: 0.95rem;
        }
}

/* Faculty Hero Section */
.faculty-hero {
        width: 100%;
        height: 400px;
        background: url('{% static "images/faculty_hero.jpg" %}') center center / cover no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        color: #fff;
}

.faculty-hero-overlay {
        background: rgba(0, 0, 0, 0.6);
        padding: 20px;
        text-align: center;
        width: 100%;
}

.faculty-hero-overlay h1 {
        font-size: 2.5rem;
        margin-bottom: 10px;
}

.faculty-hero-overlay p {
        font-size: 1.2rem;
}

/* Dean Section */
.faculty-dean {
        padding: 40px 20px;
        background: #f9f9f9;
        text-align: center;
}

.dean-container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
}

.dean-image img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        object-fit: cover;
}

.dean-details h2 {
        font-size: 1.8rem;
        color: var(--primary-color);
}

.dean-details p {
        font-size: 1.2rem;
        color: var(--accent-color);
        margin-top: 5px;
}

/* Departments Section */
.faculty-departments {
        padding: 40px 20px;
        background: #ffffff;
}

.department-container h2 {
        text-align: center;
        margin-bottom: 30px;
        font-size: 2rem;
        color: var(--primary-color);
}

.department-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
}

.department-card {
        position: relative;
        background: #f9f9f9;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.department-image img {
        width: 100%;
        height: 150px;
        object-fit: cover;
}

.department-details {
        padding: 15px;
        text-align: center;
}

.department-details h3 {
        font-size: 1.2rem;
        color: var(--primary-color);
        margin-bottom: 5px;
}

.department-details p {
        font-size: 1rem;
        font-weight: 600;
        color: #333;
        margin: 0;
}

.department-details span {
        font-size: 0.9rem;
        color: var(--accent-color);
        font-weight: bold;
        display: block;
        margin-top: 5px;
}

/* Responsive Design */
@media (max-width: 990px) {
        .dean-container {
                flex-direction: column;
                text-align: center;
        }

        .department-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }
}

.faculty-search-container {
        text-align: center;
        margin-bottom: 1.5rem;
}

#facultySearch {
        width: 100%;
        max-width: 400px;
        padding: 0.5rem;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 4px;
}

.faculty-card {
        border: 1px solid #eee;
        border-radius: 6px;
        overflow: hidden;
        background: #fafafa;
        display: flex;
        flex-direction: column;
        transition: transform 0.3s ease;
        max-width: 350px;
}

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

.faculty-card img {
        width: 100%;
        height: auto;
        object-fit: cover;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin: 0 auto;
}


.faculty-info {
        padding: 1rem;
        flex-grow: 1;
}

.faculty-name {
        margin: 0.5rem 0;
        font-size: 1.2rem;
}

.faculty-designation,
.faculty-department {
        margin: 0.25rem 0;
        color: #555;
        font-size: 0.95rem;
}

.faculty-actions {
        display: flex;
        justify-content: space-around;
        padding: 0.75rem 0;
        border-top: 1px solid #ddd;
}

.faculty-actions a {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        text-decoration: none;
        color: var(--primary-color);
        font-weight: bold;
        padding: 0.5rem 1rem;
        border: 1px solid var(--primary-color);
        border-radius: 4px;
        transition: background 0.3s, color 0.3s;
}

.faculty-actions a:hover {
        background: var(--primary-color);
        color: #fff;
}

.faculty-actions svg {
        width: 1em;
        height: 1em;
}

/* Responsive Adjustments */
@media (max-width: 480px) {
        .faculty-actions {
                flex-direction: column;
        }

        .faculty-actions a {
                width: 100%;
                justify-content: center;
                margin-bottom: 0.5rem;
        }
}

/* Hero Section */
.teacher-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: url('{% static "images/hero-bg.jpg" %}') center / cover no-repeat;
        height: 400px;
        padding: 20px;
        color: #fff;
}

.teacher-hero .hero-left img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
}

.hero-right h1 {
        font-size: 2.5rem;
        margin-bottom: 10px;
}

.hero-right .social-icons a {
        color: #fff;
        margin-right: 10px;
}

/* Education & Experience Section */
.teacher-edu-exp {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 40px 20px;
        background: #f9f9f9;
}

.teacher-edu-exp h2 {
        font-size: 1.5rem;
        color: #333;
}

.teacher-edu-exp ul {
        list-style: none;
        padding: 0;
}

/* Statistics Section */
.teacher-stats {
        padding: 40px 20px;
        background: #fff;
}

.teacher-stats h2 {
        text-align: center;
        margin-bottom: 20px;
}

/* Projects Section */
.teacher-projects {
        padding: 40px 20px;
        background: #f9f9f9;
}

.projects-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
}

.project-card {
        background: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.project-card .progress-bar {
        background: #ddd;
        height: 10px;
        border-radius: 5px;
        margin-top: 10px;
}

.project-card .progress {
        background: #4caf50;
        height: 100%;
}

/* Collaborators */
.teacher-collaborators .collaborators-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
}

/* Publications Section */
.teacher-publications {
        padding: 40px 20px;
}


.vision-mission-container {
        color: var(--text-color);
        background-color: var(--background-color);
}

.vision-mission-container .hero-section,
.history-container .hero-section {
        background: url(../images/hero/central-library-quest.webp) center center / cover no-repeat fixed;
        height: var(--sub-hero-height);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
}

.vision-mission-container .hero-section .overlay,
.history-container .hero-section .overlay {
        background: rgba(0, 0, 0, 0);
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
}

.hero-title {
        font-size: 3rem;
        color: var(--white-color);
        font-weight: 700;
        text-transform: uppercase;
}

.content-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        padding-block: 4rem;
}

.vision-box,
.mission-box {
        background: var(--secondary-color);
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vision-box:hover,
.mission-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.section-title {
        font-size: 2rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 1rem;
        text-transform: uppercase;
}

.section-text {
        font-size: 1.2rem;
        line-height: 1.6;
}

@media (max-width: 768px) {
        .content-section {
                grid-template-columns: 1fr;
                padding-block: 2rem;
        }

        .hero-title {
                font-size: 2.5rem;
        }
}

.campus-overview {
        background: var(--light-gray);
        padding-block: 3rem;
        text-align: left;
}

.section-title {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 1rem;
        color: var(--primary-color);
}

.overview-content p {
        font-size: 1.2rem;
        line-height: 1.8;
        color: var(--text-color);
        text-align: justify;
        margin-block: 16px;
}

.timeline-icon {
        font-size: 2rem;
        color: var(--accent-color);
        margin-bottom: 1rem;
}

.timeline-content {
        text-align: left;
}

@media (max-width: 768px) {
        .campus-overview {
                padding-block: 2rem;
        }

        .section-title {
                font-size: 1.2rem !important;
        }

        .section-text {
                font-size: 0.9rem;
        }


        .overview-content p {
                font-size: 0.9rem;
        }
}

.timeline {
        position: relative;
        max-width: 1200px;
        margin: 3rem auto;
}

.timeline::after {
        content: "";
        position: absolute;
        width: 6px;
        background: var(--accent-color);
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
}

.timeline-item {
        position: relative;
        width: 50%;
        padding: 1.5rem 2rem;
        box-sizing: border-box;
}

.timeline-item.left {
        left: 0;
        text-align: right;
}

.timeline-item.right {
        left: 50%;
        text-align: left;
}

.timeline-content {
        background: var(--white);
        padding: 1.5rem;
        border-radius: 10px;
        box-shadow: var(--shadow);
        position: relative;
        transition: transform 0.3s ease-in-out;
        display: flex;
        gap: 20px;
        align-items: flex-start;
}

.timeline-item.left .timeline-content {
        transform: translateX(-20px);
}

.timeline-item.right .timeline-content {
        transform: translateX(20px);
}

.timeline-item:hover .timeline-content {
        transform: translateX(0);
}

.timeline-icon {
        font-size: 1.8rem;
        color: var(--primary-color);
        background: var(--white);
        padding: 10px;
        border-radius: 50%;
        box-shadow: var(--shadow-light);
}

.timeline-content h3 {
        margin-bottom: 10px;
}

@media (max-width: 768px) {
        .timeline {
                margin-top: 10px;
        }

        .timeline::after {
                left: 20px;
        }

        .timeline-item {
                width: 100%;
                left: 0;
                padding-left: 20px;
                text-align: left;
        }

        .timeline-item.right {
                left: 0;
        }

        .timeline-content {
                transform: translateX(0) !important;
        }

        .timeline-icon {
                left: -30px;
        }

        .timeline-content-text p {
                font-size: 0.9rem;
        }

}

/* campus_facilities.css */
.cl-facilities-section {
        padding: 2rem 0;
        background: var(--secondary-color);
}



.cl-facilities-section .cl-section-heading {
        text-align: center;
        font-size: 2rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
        font-weight: 600;
}

.cl-facilities-section .cl-section-subheading {
        text-align: center;
        font-size: 1rem;
        color: var(--text-color);
        margin-bottom: 2rem;
}

.cl-facilities-section .cl-facilities-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.5rem;
}

.cl-facilities-grid>* {
        height: 100%;
        display: block;
}

.cl-facilities-section .cl-fac-card {
        background: #fff;
        padding: 1.5rem;
        text-align: center;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        height: 100%;
}

.cl-facilities-section .cl-fac-card i {
        font-size: 4rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
}

.cl-facilities-section .cl-fac-card h3 {
        font-size: 1.25rem;
        color: var(--primary-color);
        margin-bottom: 0.5rem;
}

.cl-facilities-section .cl-fac-card p {
        font-size: 0.9rem;
        color: var(--text-color);
}

.news-desc .ql-editor {
        pointer-events: none;
        user-select: none;
        border: none !important;
        background: transparent;
}

/* call to action */
.call-to-action-section {
        padding: 3rem 1rem;
}

.call-to-action-container {
        background: radial-gradient(circle,
                        var(--primary-color-light) 39%,
                        var(--primary-color) 100%);
        border-radius: 4px;
        color: var(--white-color);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px 50px;
        gap: 20px;
}

.call-to-action-section .section-heading {
        margin: 0px;
}

.call-to-action-section .section-heading .heading {
        color: var(--white-color);
}

.call-to-action-section p {
        font-size: 14px;
        color: var(--white-color);
        text-align: center;
        font-weight: 400;
}

.call-to-action-section a {
        background-color: var(--white-color);
        padding: 12px 25px;
        font-size: 16px;
        text-decoration: none;
        color: var(--primary-color);
        font-weight: 600;
        border-radius: 4px;
}

.call-to-action-section a:hover {
        background: var(--accent-color);
        color: var(--white-color);
}

.overview-text p,
.international-student-section p {
        text-align: justify;
}


.ql-editor li {
        margin-left: 20px;
}

.news-title {
        color: var(--primary-color);
        font-weight: 600;
}

#teacher-list-filters .form-control,
#teacher-list-filters .form-select {
        max-width: 280px;
}

.text-truncate-3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

.teacher-card .card-body {
        min-height: 180px;
}

@media (max-width: 525px) {
        .margin100 {
                margin-top: 100px;
        }
}
side-bar {
        display: flex;
}
side-bar nav{
        height: 100vh;
}
/* sidebar */
@media (max-width: 768px) {
        .sidebar-container-open {
                position: fixed;
                left: 0;
                bottom: 0;
                top: 0;
                background: #f1f1f1;
                z-index: 999;
                transform: translateX(-100%);
                transition: transform 350ms;
        }

        .sidebar-overlay {
                display: none;
                position: fixed;
                inset: 0px;
                background: #00000060;
                z-index: 999;
                backdrop-filter: blur(1px);
        }

        .sidebar-container-open.active {
                transform: translateX(0%);
                transition: transform 350ms;
        }

        .sidebar-overlay.active {
                display: block;
        }
}

.btn-apply, .download-btn{
        cursor: pointer;
}