/* Global Styles */
:root {
    --primary-blue: #609EE9;
    --text-dark: #333333;
    --text-light: #666666;
    --text-white: #ffffff;
    --bg-dark-overlay: rgba(50, 40, 40, 0.85);
    /* Brownish dark overlay */
    --bg-red-overlay: rgba(100, 20, 20, 0.9);
    /* Reddish overlay for courses */
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Noto Sans SC', sans-serif;
}

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

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    line-height: 1.6;
    background-color: #fff;
    font-weight: 300;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s;
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    height: 100%;
}

/* Header */
.site-header {
    background: #fff;
    height: 100px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.03);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.mobile-menu-toggle {
    display: none;
    /* Hidden on desktop */
    background: none;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
}

.logo-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.logo-placeholder img {
    width: 100%;
    height: auto;
}

.main-nav ul {
    display: flex;
    gap: 50px;
    /* Wider spacing */
}

.main-nav a {
    font-size: 15px;
    color: #555;
    font-weight: 400;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.main-nav a.active {
    color: #A93636;
    /* Red Active Color */
    font-weight: 500;
}

.main-nav a:hover {
    color: #A93636;
}

/* Use a class to identify the mobile menu state if needed later */
.main-nav.mobile-active {
    display: block;
}


/* Hero Section */
.hero-section {
    position: relative;
    width: 100%;
    max-width: 1200px;
    /* Constrain width to leaves margins */
    margin: 0 auto 80px;
    /* Center horizontally + Bottom Spacing */
    height: 600px;
    overflow: hidden;
    background: #000;
}

.hero-carousel,
.carousel-track,
.carousel-slide {
    height: 100%;
    width: 100%;
    position: relative;
}

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

.carousel-slide.active {
    opacity: 1;
    z-index: 1;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    /* Square */
    background: rgba(0, 0, 0, 0.4);
    /* Dark semi-transparent */
    color: rgba(255, 255, 255, 0.9);
    border: none;
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    border-radius: 2px;
}

.carousel-nav:hover {
    background: rgba(0, 0, 0, 0.7);
}

.carousel-nav.prev {
    left: 0;
}

.carousel-nav.next {
    right: 0;
}

.carousel-pagination {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 8px;
}

.page-num {
    background: #fff;
    color: #333;
    font-size: 12px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 400;
    transition: all 0.3s;
    border-radius: 2px;
}

.page-num.active {
    background: #609EE9;
    /* Blue */
    color: white;
}

/* Common Section Styles */
.section {
    position: relative;
    /* Default padding, might be overridden */
    padding: 0;
}

.section-overlay-dark {
    /* Using a dark blurred nature image */
    background: linear-gradient(rgba(44, 30, 30, 0.9), rgba(44, 30, 30, 0.9)), url('img/banner/banner3.jpg');
    /* Replaced picsum */
    background-size: cover;
    padding: 80px 0;
    color: white;
}

.section-overlay-red {
    /* Using a reddish overlay on a blurred image */
    background: linear-gradient(rgba(100, 20, 20, 0.85), rgba(100, 20, 20, 0.85)), url('img/banner/banner2.jpg');
    /* Replaced picsum */
    background-size: cover;
    padding: 80px 0;
    color: white;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.section-title p {
    font-size: 16px;
    font-weight: 300;
}

.section-title.white h2,
.section-title.white p {
    color: white;
}

/* Advantage Section */
.advantage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}

.advantage-item h3 {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 500;
}

.adv-text {
    font-size: 13px;
    opacity: 0.8;
    line-height: 1.8;
}

/* Profile Section */
.profile-section {
    background: #2a1a1a;
    /* Dark fallback */
    background: linear-gradient(to bottom, #2a1a1a, #1a0a0a);
    padding: 80px 0;
    color: white;
}

.profile-content {
    display: flex;
    gap: 60px;
    align-items: center;
}

.profile-left {
    flex: 1;
}

.profile-right {
    flex: 1;
}

.profile-right p {
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.9;
    color: #ddd;
}

/* Mini Carousel in Profile */
.mini-carousel {
    position: relative;
    width: 100%;
    padding-top: 66%;
    /* Aspect ratio box */
    overflow: hidden;
    border: 5px solid rgba(255, 255, 255, 0.1);
}

.mini-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

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

.mini-slide.active {
    display: block;
}

.mini-controls .mini-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 20px;
    cursor: pointer;
    z-index: 5;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
}

.mini-prev {
    left: 10px;
}

.mini-next {
    right: 10px;
}

.mini-pagination-num {
    position: absolute;
    bottom: 10px;
    right: 10px;
    /* Aligned right inside image as per screenshot */
    display: flex;
    gap: 5px;
}

.mini-page {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 12px;
    padding: 2px 8px;
    cursor: pointer;
}

.mini-page.active {
    background: var(--primary-blue);
}


/* Courses Section */
.courses-layout {
    display: flex;
    gap: 40px;
}

.courses-left {
    flex: 0 0 50%;
}

.courses-left img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.courses-desc p {
    font-size: 13px;
    color: #eee;
    line-height: 1.8;
    text-align: justify;
}

.courses-right {
    flex: 1;
    position: relative;
}

.course-list {
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
}

.course-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}

.c-thumb {
    width: 120px;
    height: 80px;
    background: #fff;
    flex-shrink: 0;
    /* Prevent shrinking */
}

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

.c-info h4 {
    font-size: 15px;
    margin-bottom: 5px;
    font-weight: 500;
}

.c-date {
    font-size: 12px;
    color: #bbb;
}

.list-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    gap: 5px;
}

.lp-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
}

.lp-btn.active {
    background: white;
    color: #333;
}


/* Faculty Section */
.faculty-section-new {
    background: #111;
    /* Very dark */
    color: white;
    padding: 80px 0;
    text-align: center;
}

.faculty-dark-area p {
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.fd-nav {
    background: #333;
    color: white;
    border: none;
    width: 40px;
    height: 60px;
    cursor: pointer;
    display: inline-flex;
    /* Inline for this layout */
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.fd-content {
    display: inline-block;
    vertical-align: middle;
    margin: 0 40px;
}


/* Info Section */
.info-section {
    /* Using gray texture seed */
    background: linear-gradient(rgba(100, 100, 100, 0.2), rgba(100, 100, 100, 0.2)), url('img/banner/banner4.jpg');
    /* Replaced picsum */
    background-size: cover;
    padding: 80px 0;
    color: white;
}

.top-dot {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    margin: 0 auto 30px;
}

.info-list-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.info-list {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.info-list li {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 14px;
}

.info-date {
    color: #ccc;
    font-size: 12px;
}


/* Contact Section */
.contact-section {
    background: #fff;
    padding: 80px 0 40px;
    color: #333;
}

.contact-section .section-title h2 {
    color: #000;
}

.contact-section .section-title p {
    color: #000;
}

.contact-content-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.qr-block img {
    width: 120px;
    height: 120px;
}

.contact-text-block p {
    font-size: 14px;
    margin-bottom: 10px;
    color: #333;
}

/* Footer */
.site-footer {
    background: #fff;
    /* Seems white or very light */
    padding: 20px 0;
}

.mobile-only {
    display: none;
}

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

    /* Header */
    .site-header {
        height: 60px;
        padding: 0 10px;
    }

    .mobile-menu-toggle {
        display: block;
        z-index: 2001;
        /* Higher than nav */
        position: relative;
    }

    .mobile-only {
        display: block;
    }

    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: white;
        transform: translateY(-100%);
        transition: transform 0.3s ease;
        display: block;
        /* Always block, just hidden by translate */
        padding-top: 80px;
        /* Space for close button */
        z-index: 2000;
        left: 0 !important;
        /* Override previous left logic */
    }

    .main-nav.active {
        transform: translateY(0);
        left: 0;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 0;
        text-align: left;
        padding: 0 40px;
    }

    .main-nav li {
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .main-nav a {
        display: block;
        padding: 20px 0;
        font-size: 16px;
        color: #333;
        font-weight: 300;
    }

    /* Move toggle button to be on top of menu when active */
    .mobile-menu-toggle {
        display: block;
        z-index: 2001;
        /* Higher than nav */
        position: relative;
    }

    .logo-placeholder {
        width: 40px;
        height: 40px;
    }

    /* Hero */
    .hero-section {
        height: 250px;
        margin-bottom: 40px;
    }

    /* Typography adjustments */
    .section-title h2 {
        font-size: 24px;
    }

    .section-title {
        margin-bottom: 30px;
    }

    .profile-extra-img {
        margin-top: 20px;
        width: 100%;
        border-radius: 4px;
        overflow: hidden;
    }

    .profile-extra-img img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Advantage */
    /* Advantage Section Mobile */
    .advantage-section .section-overlay-dark {
        background: white;
        /* Remove dark image overlay on mobile */
        padding: 40px 0;
    }

    .advantage-section .section-title.white h2 {
        color: #5e1313;
        /* Dark Red Title */
        font-weight: 700;
    }

    .advantage-section .section-title.white p {
        color: #333;
        font-weight: 400;
        font-size: 18px;
    }

    .advantage-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .advantage-item {
        background: #f7f7f7;
        padding: 30px 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        border: 1px solid #eee;
    }

    .advantage-item i {
        font-size: 40px;
        color: #5e1313;
        /* Dark Red Icon */
        margin-bottom: 20px;
    }

    .advantage-item h3 {
        font-size: 18px;
        color: #000;
        margin-bottom: 15px;
        font-weight: 500;
    }

    .advantage-item .adv-text p {
        color: #777;
        font-size: 13px;
        margin-bottom: 0;
        line-height: 1.5;
    }

    /* Profile */
    .profile-content {
        flex-direction: column;
        gap: 20px;
    }

    /* Courses */
    .courses-layout {
        flex-direction: column;
    }

    .courses-left {
        /* Hide the big left image block as per screenshot intent (grid view) or keep it if desired? 
           Screenshot shows only grid. Let's stack it but maybe hide text to keep clean?
           The user wants UI "As shown in picture". The picture shows NO big intro text. 
           It only shows 2 rows of course cards.
           I will hide .courses-left for mobile to match the screenshot strictly.
        */
        display: none;
    }

    .course-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        border-top: none;
    }

    .course-item {
        flex-direction: column;
        background: transparent;
        /* Or card background */
        border: none;
        align-items: flex-start;
        padding: 0;
    }

    .c-thumb {
        width: 100%;
        height: 100px;
        margin-bottom: 5px;
    }

    .c-info h4 {
        font-size: 13px;
        color: white;
        /* On dark overlay */
    }

    .c-info .c-date {
        font-size: 11px;
    }

    /* Faculty */
    .faculty-dark-area p {
        font-size: 14px;
        margin: 0;
    }

    .fd-content {
        margin: 0 10px;
    }

    /* Information */
    .info-list-wrapper {
        overflow-x: auto;
    }

    .info-list {
        display: flex;
        gap: 15px;
        border-top: none;
        padding-bottom: 10px;
        /* Space for scrollbar */
    }

    .info-list li {
        flex: 0 0 150px;
        /* Fixed width cards */
        flex-direction: column;
        background: rgba(255, 255, 255, 0.1);
        padding: 15px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        justify-content: flex-start;
        gap: 10px;
        text-align: center;
        height: 100%;
        /* Uniform height */
    }

    /* Custom styling to match screenshot cards (Red/White/Image) 
       Only using CSS nth-child to simulate variety 
    */
    .info-list li:nth-child(1) {
        background: #A93636;
        /* Red */
    }

    .info-list li:nth-child(2) {
        background: #fff;
    }

    .info-list li:nth-child(2) .info-title,
    .info-list li:nth-child(2) .info-date {
        color: #333;
    }

    .info-list li:nth-child(3) {
        /* Simulate Image BG */
        background: url('img/banner/banner1.jpg');
        background-size: cover;
    }

    .info-title {
        font-size: 13px;
        font-weight: 500;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .info-date {
        margin-top: auto;
        /* Push to bottom */
    }

    /* Contact */
    .contact-content-centered {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

/* --- About Page Specific Styles --- */
.about-banner-container {
    height: 400px;
    /* Desktop Banner Height */
    position: relative;
    overflow: hidden;
}

.about-banner-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.about-banner-overlay h1 {
    font-family: var(--font-heading);
    font-size: 48px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.breadcrumb-bar {
    background: #f5f5f5;
    padding: 15px 0;
    font-size: 14px;
    color: #666;
    border-bottom: 1px solid #eee;
}

.breadcrumb-bar .container {
    display: flex;
    /* Or block */
    align-items: center;
}

.breadcrumb-bar i {
    margin-right: 5px;
}

.breadcrumb-bar a:hover {
    color: var(--primary-blue);
}

.separator {
    margin: 0 10px;
}

.about-main-content {
    padding: 60px 0;
    background: #fff;
}

.about-grid-layout {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
}

.about-images-block {
    flex: 0 0 50%;
    display: flex;
    gap: 15px;
}

.img-large {
    flex: 2;
    height: 300px;
}

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

.img-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.img-small {
    flex: 1;
    height: 142px;
    /* Half of large - gap approx */
}

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

.about-text-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-text-block p {
    font-size: 14px;
    line-height: 2;
    color: #555;
    margin-bottom: 20px;
}

.feature-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.feature-card {
    border: 1px solid #eee;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s;
}

.feature-card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-color: #ddd;
}

.feature-card h3 {
    font-weight: 400;
    color: #333;
    font-size: 18px;
}

/* Mobile Adjustments for About Page */
@media (max-width: 768px) {
    .about-banner-container {
        height: 250px;
        /* Smaller banner on mobile */
    }

    .about-banner-overlay.desktop-only,
    .breadcrumb-bar.desktop-only,
    .about-images-block.desktop-only,
    .feature-cards-grid.desktop-only {
        display: none !important;
    }

    .mobile-section-title {
        text-align: center;
        margin: 30px 0;
        display: block;
    }

    .mobile-section-title h2 {
        color: #5e1313;
        /* Dark Red to match screenshot */
        font-family: var(--font-heading);
        font-size: 24px;
        margin-bottom: 5px;
    }

    .mobile-section-title p {
        font-size: 18px;
        color: #333;
    }

    .about-grid-layout {
        flex-direction: column;
        gap: 0;
    }

    .about-text-block {
        padding: 0 10px;
    }

    .about-text-block p {
        text-align: justify;
    }
}

/* --- Courses Page Specific Styles --- */
.courses-list-section {
    padding: 40px 0;
    background: #fff;
    min-height: 500px;
}

.course-list-full {
    display: flex;
    flex-direction: column;
}

.course-list-item {
    display: flex;
    padding: 30px 0;
    border-bottom: 1px dashed #eee;
    gap: 30px;
}

.course-list-item:last-child {
    border-bottom: none;
}

.c-thumb-large {
    width: 260px;
    height: 160px;
    flex-shrink: 0;
    overflow: hidden;
    /* border-radius: 4px; Optional based on design */
}

.c-thumb-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.course-list-item:hover .c-thumb-large img {
    transform: scale(1.05);
}

.c-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Align text vertically */
}

.c-details h3 {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin-bottom: 20px;
}

.c-meta {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 20px;
}

.c-views i {
    margin-right: 5px;
}

.list-pagination.centered {
    margin-top: 40px;
    justify-content: center;
    display: flex;
    gap: 5px;
}

.lp-btn.disabled {
    background: #f5f5f5;
    color: #ccc;
    cursor: not-allowed;
    border-color: #eee;
}

/* Footer specific for course page */
.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    color: #ccc;
    font-size: 13px;
    margin-bottom: 10px;
    border-bottom: 1px solid #444;
    padding-bottom: 15px;
    width: 100%;
}

/* Mobile Adjustments for Courses Page */
@media (max-width: 768px) {
    .course-list-item {
        flex-direction: column;
        gap: 15px;
        padding: 20px 0;
    }

    .c-thumb-large {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }

    .c-details h3 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .mobile-hide {
        display: none !important;
    }
}

/* --- Faculty Page Specific Styles --- */
.faculty-list-section {
    padding: 40px 0;
    background: #fff;
    min-height: 500px;
}

.faculty-list-full {
    display: flex;
    flex-direction: column;
}

.faculty-list-item {
    display: flex;
    padding: 30px 0;
    border-bottom: 1px dashed #eee;
    gap: 30px;
}

.faculty-list-item:last-child {
    border-bottom: none;
}

.f-thumb-large {
    width: 260px;
    height: 160px;
    flex-shrink: 0;
    overflow: hidden;
    /* border-radius: 4px; */
}

.f-thumb-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.faculty-list-item:hover .f-thumb-large img {
    transform: scale(1.05);
}

.f-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Align text vertically */
}

.f-details h3 {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin-bottom: 20px;
}

.f-meta {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 20px;
}

.f-views i {
    margin-right: 5px;
}

/* Mobile Adjustments for Faculty Page */
@media (max-width: 768px) {
    .faculty-list-item {
        flex-direction: column;
        gap: 15px;
        padding: 20px 0;
    }

    .f-thumb-large {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        /* Maintain aspect ratio */
    }

    .f-details h3 {
        font-size: 16px;
        margin-bottom: 10px;
    }
}

/* --- Faculty Detail Page --- */
.faculty-detail-page .breadcrumb-bar {
    padding: 15px 0;
    font-size: 14px;
    color: #666;
    background-color: transparent;
    /* Or white depending on design*/
}

.faculty-detail-section {
    padding: 40px 0 80px;
    background: #fff;
    min-height: 600px;
}

.faculty-article {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    /* Center title */
}

.faculty-article h1 {
    font-size: 28px;
    font-weight: 500;
    color: #333;
    margin-bottom: 20px;
}

.article-meta {
    font-size: 12px;
    color: #999;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
    gap: 20px;
}

.favorite-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.article-content {
    text-align: left;
    /* Reset alignment for content */
    font-size: 16px;
    line-height: 1.8;
    color: #444;
}

.article-content p {
    margin-bottom: 20px;
}

/* Navigation */
.article-navigation {
    max-width: 900px;
    margin: 60px auto 0;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #666;
    padding-top: 30px;
    /* border-top: 1px dashed #eee; */
}

.article-navigation a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-navigation a:hover {
    color: #bfa05d;
}

@media (max-width: 768px) {
    .faculty-article h1 {
        font-size: 24px;
    }

    .article-meta {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 30px;
    }

    .article-navigation {
        flex-direction: column;
        gap: 20px;
    }
}

/* --- News Page --- */
.banner-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    color: #fff;
    z-index: 10;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.banner-text-overlay h2 {
    font-size: 32px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-family: 'Oswald', sans-serif;
}

.banner-text-overlay h3 {
    font-size: 24px;
    font-weight: 300;
}

.news-section {
    padding: 60px 0;
    background: #fff;
}

.news-list {
    max-width: 1000px;
    margin: 0 auto;
}

.news-item {
    display: flex;
    padding: 30px 0;
    border-bottom: 1px dashed #eee;
    gap: 30px;
    align-items: flex-start;
}

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

.news-thumb {
    width: 240px;
    /* Adjust based on your images aspect ratio */
    height: 160px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f5f5;
}

.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-item:hover .news-thumb img {
    transform: scale(1.05);
}

.news-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-top: 5px;
}

.news-content h3 {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 15px;
}

.news-content h3 a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.news-content h3 a:hover {
    color: #bfa05d;
}

.news-meta {
    font-size: 14px;
    color: #999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

@media (max-width: 768px) {
    .banner-text-overlay h2 {
        font-size: 24px;
    }

    .banner-text-overlay h3 {
        font-size: 18px;
    }

    .news-item {
        flex-direction: column;
        gap: 15px;
        padding: 20px 0;
    }

    .news-thumb {
        width: 100%;
        height: 200px;
    }

    .news-content h3 {
        font-size: 16px;
    }
}

/* Link Wrappers for Index Page */
.c-link {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.c-link:hover h4 {
    color: #609EE9;
    /* Primary Blue Hover */
}

/* On mobile, course item flex direction is column, so c-link needs to follow */
@media (max-width: 768px) {
    .c-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

.info-link {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: inherit;
    text-decoration: none;
    align-items: center;
}

.info-link:hover .info-title {
    text-decoration: underline;
}

.course-block-link {
    display: flex;
    width: 100%;
    color: inherit;
    text-decoration: none;
    gap: 20px;
    align-items: flex-start;
}

.course-block-link:hover h3 {
    color: #609EE9;
}

@media (max-width: 768px) {
    .course-block-link {
        flex-direction: column;
        gap: 10px;
    }
}

/* Contact Page Specific Styles */
.contact-page-section {
    padding: 60px 0;
    min-height: 600px;
}

.contact-map {
    width: 100%;
    height: 400px;
    background: #fbf8f0;
    /* Light yellow placeholder per screenshot */
    margin-bottom: 40px;
    border: 1px solid #eee;
    z-index: 1;
    /* Ensure map is below nav if sticky */
}

.contact-card-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 20px 0;
}

.cc-qr img {
    width: 120px;
    height: 120px;
    display: block;
}

.cc-text p {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.6;
}

.footer-copyright {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 15px;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .contact-card-bottom {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .contact-map {
        height: 300px;
    }
}