/* Vidyasagar University Website Styles - Home Page Specific */

:root {
    --primary-color: #000080;
    --secondary-color: #FFD700;
    --accent-color: #f8f9fa;
    --text-light: #ffffff;
    --text-dark: #333333;
    --border-color: #e0e0e0;
    --hover-color: rgba(0, 0, 128, 0.05);
    --gradient-primary: linear-gradient(135deg, #000080 0%, #0000b3 100%);
    --box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    --transition: all 0.3s ease;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    background-color: #f9f9f9;
}


/* Header */
.header {
    background-color: var(--accent-color);
    padding: 5px 20px 5px 20px;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.logo img {
    max-height: 80px;
    transition: var(--transition);
}

    .logo img:hover {
        transform: scale(1.05);
    }

.university-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .university-name h1 {
        color: var(--primary-color);
        font-size: 28px;
        font-weight: 700;
        margin: 0;
        letter-spacing: 0.5px;
    }

    .university-name p {
        color: var(--secondary-color);
        font-size: 16px;
        margin: 0;
    }

/* Mobile Responsive Header Styles */
@media (max-width: 767px) {
    .header .col-md-6 {
        text-align: center !important;
        margin-bottom: 15px;
    }

    .header .d-flex.align-items-center {
        justify-content: center;
        flex-direction: column;
    }

    .header .logo {
        margin-bottom: 10px;
        margin-right: 0 !important;
    }

    .header .university-name {
        text-align: center;
    }

    .header .d-flex.flex-column.align-items-end {
        align-items: center !important;
    }

    .header .text-end {
        text-align: center !important;
    }

    .header {
        padding: 15px 0;
    }

    .university-name h2 {
        font-size: 24px !important;
    }

    .university-name h1 {
        font-size: 26px !important;
    }
}

/* Navigation Styles */
.ec-nav {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.navbar {
    background-color: #1a3c80;
    padding: 0;
}

.navbar-nav .nav-item .nav-link {
    color: #fff;
    padding: 15px 17px;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
}

    .navbar-nav .nav-item .nav-link:hover,
    .navbar-nav .nav-item .nav-link:focus {
        background-color: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

/* Dropdown Menu Styles */
.dropdown-menu {
    border: none;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 10px 0;
    margin-top: 0;
    min-width: 250px;
    z-index: 1050;
}

.dropdown-item {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

    .dropdown-item:hover {
        background-color: rgba(26, 60, 128, 0.08);
        color: #1a3c80;
        padding-left: 25px;
    }

        .dropdown-item:hover::before {
            content: '';
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 4px;
            background-color: #1a3c80;
            border-radius: 50%;
        }

/* Megamenu Styles */
.mega-dropdown {
    position: static !important;
}



    .mega-dropdown .dropdown-menu .row {
        margin: 0;
    }

    .mega-dropdown .dropdown-menu .col-md-3 {
        padding: 0 15px;
    }

.mega-section-title {
    color: #1a3c80;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #FFD700;
    display: flex;
    align-items: center;
}

    .mega-section-title i {
        margin-right: 8px;
        color: #FFD700;
        font-size: 14px;
    }

.mega-link {
    display: block;
    padding: 5px 0;
    color: #555;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    padding-left: 10px;
}

    .mega-link:hover {
        color: #1a3c80;
        border-left-color: #1a3c80;
        padding-left: 15px;
        background-color: rgba(26, 60, 128, 0.05);
    }

/* Mobile Navigation */
.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    padding: 10px;
    margin: 8px 15px;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: #1a3c80;
        margin-top: 10px;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        max-height: 80vh;
        overflow-y: auto;
    }

    .dropdown-menu {
        position: static !important;
        float: none !important;
        width: auto !important;
        margin-top: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background-color: rgba(255, 255, 255, 0.05) !important;
        border-radius: 5 !important;
    }

    .dropdown-item {
        color: rgba(255, 255, 255, 0.8) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

        .dropdown-item:hover {
            background-color: rgba(255, 255, 255, 0.1) !important;
            color: #fff !important;
        }

    .mega-dropdown .dropdown-menu {
        width: auto !important;
        padding: 10px !important;
    }

    .mega-section-title {
        color: #FFD700 !important;
        border-bottom-color: rgba(255, 255, 255, 0.2) !important;
    }

    .mega-link {
        color: rgba(255, 255, 255, 0.7) !important;
        border-left-color: transparent !important;
    }

        .mega-link:hover {
            color: #FFD700 !important;
            border-left-color: #FFD700 !important;
            background-color: rgba(255, 255, 255, 0.1) !important;
        }
}

/* Carousel */
.carousel {
    box-shadow: var(--box-shadow);
    border-radius: 0 0 5px 5px;
    overflow: hidden;
}

.carousel-inner {
    max-height: 500px;
}

.video-container {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background-color: #000;
}

    .video-container iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vw;
        height: 56.25vw; /* 16:9 aspect ratio */
        min-height: 100%;
        min-width: 177.77vh; /* 16:9 aspect ratio */
        transform: translate(-50%, -50%);
    }

}

.carousel-item img {
    object-fit: cover;
    height: 500px !important; /* Reduced from 500px */
    width: 100%;
    filter: brightness(0.9);
    transition: transform 15s;
}

.carousel-item.active img {
    transform: scale(1.05);
}

.carousel-caption {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0) 100%);
    padding: 30px 20px 20px;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: left;
    border-left: 4px solid var(--secondary-color);
}

    .carousel-caption h3 {
        font-weight: 700;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        font-size: 28px;
        margin-bottom: 10px;
    }

    .carousel-caption p {
        font-size: 16px;
        max-width: 600px;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }

.carousel-indicators {
    margin-bottom: 20px;
}

    .carousel-indicators button {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: rgba(255,255,255,0.5);
        border: 2px solid transparent;
        transition: var(--transition);
    }

        .carousel-indicators button.active {
            background-color: var(--secondary-color);
            transform: scale(1.2);
        }


/* Ensure categories in Flash News have better contrast and visibility */
.flash-news-section .news-category {
    display: inline-block !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    margin-right: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

    .flash-news-section .news-category.academic,
    .flash-news-section .news-item .news-category.academic {
        background-color: #4CAF50 !important;
        color: #FFFFFF !important;
        border-color: rgba(76, 175, 80, 0.8) !important;
    }

    /* ADMISSION CATEGORY */
    .flash-news-section .news-category.admission,
    .flash-news-section .news-item .news-category.admission {
        background-color: #FF9800 !important;
        color: #FFFFFF !important;
        border-color: rgba(255, 152, 0, 0.8) !important;
    }

    /* EXAMINATION CATEGORY */
    .flash-news-section .news-category.examination,
    .flash-news-section .news-item .news-category.examination {
        background-color: #F44336 !important;
        color: #FFFFFF !important;
        border-color: rgba(244, 67, 54, 0.8) !important;
    }

    /* TENDER CATEGORY */
    .flash-news-section .news-category.tender,
    .flash-news-section .news-item .news-category.tender {
        background-color: #9C27B0 !important;
        color: #FFFFFF !important;
        border-color: rgba(156, 39, 176, 0.8) !important;
    }

    /* EVENT CATEGORY */
    .flash-news-section .news-category.event,
    .flash-news-section .news-item .news-category.event {
        background-color: #E91E63 !important;
        color: #FFFFFF !important;
        border-color: rgba(233, 30, 99, 0.8) !important;
    }

    /* NOTICE CATEGORY */
    .flash-news-section .news-category.notice,
    .flash-news-section .news-item .news-category.notice {
        background-color: #00BCD4 !important;
        color: #FFFFFF !important;
        border-color: rgba(0, 188, 212, 0.8) !important;
    }

    /* SCHOLARSHIP CATEGORY */
    .flash-news-section .news-category.scholarship,
    .flash-news-section .news-item .news-category.scholarship {
        background-color: #FFEB3B !important;
        color: #333333 !important;
        border-color: rgba(255, 235, 59, 0.8) !important;
        text-shadow: none !important;
    }

    /* NEWS CATEGORY */
    .flash-news-section .news-category.news,
    .flash-news-section .news-item .news-category.news {
        background-color: #2196F3 !important;
        color: #FFFFFF !important;
        border-color: rgba(33, 150, 243, 0.8) !important;
    }

    /* CIRCULAR CATEGORY */
    .flash-news-section .news-category.circular,
    .flash-news-section .news-item .news-category.circular {
        background-color: #673AB7 !important;
        color: #FFFFFF !important;
        border-color: rgba(103, 58, 183, 0.8) !important;
    }

    /* RESULT CATEGORY */
    .flash-news-section .news-category.result,
    .flash-news-section .news-item .news-category.result {
        background-color: #8BC34A !important;
        color: #FFFFFF !important;
        border-color: rgba(139, 195, 74, 0.8) !important;
    }

    /* ANNOUNCEMENT CATEGORY */
    .flash-news-section .news-category.announcement,
    .flash-news-section .news-item .news-category.announcement {
        background-color: #FF7043 !important;
        color: #FFFFFF !important;
        border-color: rgba(255, 112, 67, 0.8) !important;
    }

    /* URGENT CATEGORY - SPECIAL ANIMATION */
    .flash-news-section .news-category.urgent,
    .flash-news-section .news-item .news-category.urgent {
        background-color: #FF5722 !important;
        color: #FFFFFF !important;
        border-color: #FFFFFF !important;
        animation: flashUrgentPulse 1.5s infinite !important;
        box-shadow: 0 0 10px rgba(255, 87, 34, 0.8) !important;
    }

    /* Career category */
    .flash-news-section .news-category.career {
        background-color: #795548 !important; /* Brown */
        color: #FFFFFF !important;
        border-color: rgba(121, 85, 72, 0.8) !important;
    }

    /* Library category */
    .flash-news-section .news-category.library {
        background-color: #607D8B !important; /* Blue Grey */
        color: #FFFFFF !important;
        border-color: rgba(96, 125, 139, 0.8) !important;
    }

    /* GENERAL/DEFAULT CATEGORY */
    .flash-news-section .news-category.general,
    .flash-news-section .news-item .news-category.general,
    .flash-news-section .news-category:not([class*="academic"]):not([class*="admission"]):not([class*="examination"]):not([class*="tender"]):not([class*="event"]):not([class*="notice"]):not([class*="scholarship"]):not([class*="news"]):not([class*="circular"]):not([class*="result"]):not([class*="announcement"]):not([class*="urgent"]) {
        background-color: #607D8B !important;
        color: #FFFFFF !important;
        border-color: rgba(96, 125, 139, 0.8) !important;
    }

/* Flash News Section Styling */
.flash-news-section {
    background: linear-gradient(90deg, #000080 0%, #000099 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

    .flash-news-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
        opacity: 0.2;
    }

.flash-news-container {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    border-radius: 6px;
    color: #fff;
}

.flash-news-header {
    flex-shrink: 0;
    padding-right: 15px;
}

.flash-news-label {
    display: flex;
    align-items: center;
    background-color: #FFD700;
    color: #000080;
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    white-space: nowrap;
}

    .flash-news-label i {
        font-size: 16px;
        animation: pulse 1.5s infinite;
        color: red
    }

    .flash-news-label .badge.bg-success {
        background: linear-gradient(45deg, #dc3545, #c82333) !important; /* Override bg-success with red */
        color: white !important;
        font-size: 0.6em;
        padding: 2px 6px;
        border-radius: 10px;
        animation: pulse-new 2s infinite;
    }

.flash-news-content {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    padding: 0 10px;
}

.news-ticker-wrapper {
    position: relative;
    overflow: hidden;
    height: 40px;
}

/* News ticker animation */
.news-ticker {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    animation: tickerAnimation 60s linear infinite;
    position: absolute;
    top: 0;
    white-space: nowrap;
}

    .news-ticker:hover {
        animation-play-state: paused;
    }

.news-item {
    display: flex;
    align-items: center;
    padding: 0 25px;
    white-space: nowrap;
}

/* Base category styling */
.news-category {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    margin-right: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Enhanced urgent animation for Flash News */
@keyframes flashUrgentPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 3px 8px rgba(255, 87, 34, 0.8);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 5px 15px rgba(255, 87, 34, 1), 0 0 20px rgba(255, 87, 34, 0.5);
    }
}

/* Enhanced hover effects for Flash News categories */
.flash-news-section .news-category:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

/* Ensure proper spacing and visibility */
.flash-news-section .news-item {
    display: flex;
    align-items: center;
    padding: 0 25px;
    white-space: nowrap;
    position: relative;
}

    .flash-news-section .news-item .news-category {
        margin-right: 12px;
        flex-shrink: 0;
        z-index: 10;
        position: relative;
    }

/* Additional glow effect for better visibility against blue background */
.flash-news-section .news-category::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: inherit;
    border-radius: inherit;
    z-index: -1;
    filter: blur(4px);
    opacity: 0.7;
}
/* Hover effects for categories */
.news-category:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    border-color: rgba(255, 255, 255, 0.5);
}

/* Glow effect for better visibility against blue background */
.news-category::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border-radius: 5px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.news-category:hover::before {
    opacity: 1;
}

/* Special styling for high-priority categories */
.news-category.urgent,
.news-category.examination,
.news-category.admission {
    font-weight: 800;
    position: relative;
}

.news-item a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

    .news-item a:hover {
        color: #FFD700;
        text-decoration: underline;
    }

.validity-info {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

/* New Badge in Flash News */
.badge-new {
    background: linear-gradient(45deg, #dc3545, #c82333) !important; /* Changed from green to red */
    color: white !important;
    font-size: 0.7em;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 12px;
    margin-left: 6px;
    animation: pulse-new 2s infinite;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3) !important; /* Updated shadow color */
}

/* New Badge in Notice Items - Changed to RED */
.new-notice-badge {
    background: linear-gradient(45deg, #dc3545, #c82333) !important; /* Changed from green to red */
    color: white !important;
    font-size: 0.65em;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    animation: pulse-new 2s infinite;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3) !important; /* Updated shadow color */
}

/* Enhanced notice item styling for better New badge visibility - Updated for RED */
.notice-with-new-badge {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.03), rgba(200, 35, 51, 0.03)) !important; /* Changed from green to red */
    border-left: 3px solid #dc3545 !important; /* Changed from green to red */
    position: relative;
}

/* Enhanced Flash News Item Styling for Better Category Visibility */
.flash-news-container .news-item {
    display: flex;
    align-items: center;
    padding: 0 25px;
    white-space: nowrap;
    position: relative;
}

    .flash-news-container .news-item a {
        color: #fff;
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    }

        .flash-news-container .news-item a:hover {
            color: #FFD700;
            text-decoration: underline;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }

    /* Flash News specific enhancements */
    .flash-news-container .news-item.current-active {
        transition: all 0.3s ease !important;
    }

    .flash-news-container .news-item:hover {
        background: rgba(0, 123, 255, 0.05) !important;
        transform: translateX(5px) !important;
    }



/* New badge indicator in date section */
.new-badge-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
    color: #ffc107 !important;
    animation: starBlink 1.5s infinite;
}

@keyframes starBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

/* Tab badges for new notices */
.nav-tabs .nav-link .badge.bg-success {
    background: linear-gradient(45deg, #dc3545, #c82333) !important; /* Override bg-success with red */
    color: white !important;
    font-size: 0.6em;
    padding: 2px 5px;
    border-radius: 8px;
    animation: pulse-subtle 3s infinite;
}

/* Section title badge for new notices */
.section-title .badge.bg-success {
    background: linear-gradient(45deg, #dc3545, #c82333) !important; /* Override bg-success with red */
    color: white !important;
    font-size: 0.7em;
    padding: 4px 8px;
    border-radius: 12px;
    margin-left: 10px;
    animation: blinkNewBadge 2s infinite;
}

/* Pulse animations */
@keyframes pulse-new {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); /* Updated shadow color */
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(220, 53, 69, 0.1); /* Updated shadow color */
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); /* Updated shadow color */
        transform: scale(1);
    }
}

@keyframes pulse-subtle {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes sparkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
        color: #ffc107;
    }
}

/* Hover effects for new badges */
.new-notice-badge:hover {
    animation: none;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4) !important; /* Updated shadow color */
}

.badge-new:hover {
    animation: none;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4) !important; /* Updated shadow color */
}

.badge-new {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    animation: blinkNewBadge 2s infinite;
    background: linear-gradient(45deg, #28a745, #20c997) !important;
    color: white !important;
    border-radius: 0.5rem;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(40,167,69,0.3);
}

    /* Accessibility improvements */
    .new-notice-badge[title],
    .badge-new[title],
    .new-badge-indicator[title] {
        cursor: help;
    }

.flash-news-nav {
    display: flex;
    align-items: center;
    padding-left: 15px;
    flex-shrink: 0;
}

.ticker-control {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 3px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .ticker-control:hover {
        background-color: rgba(255, 215, 0, 0.8);
        color: #000080;
        transform: scale(1.1);
    }

/* Animations for Flash News */
@keyframes tickerAnimation {
    0% {
        transform: translateX(0%);
    }

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

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 102, 204, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(0, 102, 204, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 102, 204, 0);
    }
}

/* Enhanced notice item styling for better New badge visibility */
.notice-with-new-badge {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.03), rgba(32, 201, 151, 0.03)) !important;
    border-left: 3px solid #28a745 !important;
    position: relative;
}

    .notice-with-new-badge:hover {
        background: linear-gradient(to right, rgba(220, 53, 69, 0.08), rgba(255, 255, 255, 1)) !important; /* Updated hover color */
        transform: translateX(2px);
        transition: all 0.2s ease;
    }

    .notice-with-new-badge::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(to bottom, #dc3545, #c82333) !important; /* Changed from green to red */
        border-radius: 0 3px 3px 0;
    }

/* Responsive adjustments for Flash News */
@media (max-width: 768px) {
    .flash-news-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .news-category {
        font-size: 10px;
        padding: 3px 8px;
        margin-right: 8px;
    }

        .news-category:hover {
            transform: translateY(-1px) scale(1.02);
        }

    .flash-news-header {
        margin-bottom: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .flash-news-content {
        width: 100%;
        padding: 0;
    }

    .flash-news-nav {
        margin-top: 10px;
        width: 100%;
        justify-content: center;
        padding-left: 0;
    }

    .news-ticker-wrapper {
        height: 35px;
    }

    .nav-tabs .nav-link .badge.bg-success {
        display: none; /* Hide new badges on mobile tabs to save space */
    }

    .notices-section {
        padding: 20px 15px;
    }

    .notice-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .attachment-info {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .attachment-actions {
        width: 100%;
        justify-content: flex-start;
    }

        .attachment-actions .btn {
            flex: 1;
            min-width: 0;
        }

    .new-notice-badge,
    .badge-new {
        font-size: 0.55em;
        padding: 2px 5px;
    }

    .notice-with-new-badge {
        border-left-width: 2px;
    }

    .notices-section .nav-tabs {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 2px;
    }

        .notices-section .nav-tabs .nav-link {
            padding: 5px 6px;
            font-size: 0.85rem;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

    .notices-container-enhanced {
        max-height: 400px;
    }

    .notice-item-enhanced {
        padding: 0.75rem;
    }

    .attachment-filename {
        font-size: 0.85rem;
    }

    .modal-xl {
        max-width: 95%;
        margin: 1rem auto;
    }

    #attachmentPreviewContent iframe,
    #attachmentPreviewContent img {
        min-height: 300px;
    }

    .importantlink-section {
        padding: 30px 0;
    }

    .important-website-item {
        height: 100px;
    }

    .website-card {
        height: 70px;
        padding: 8px;
    }

    .website-logo {
        max-height: 40px;
    }

    .image-placeholder {
        height: 40px;
    }

        .image-placeholder i {
            font-size: 1.4rem;
            margin-bottom: 3px;
        }

        .image-placeholder span {
            font-size: 0.7rem;
        }

    .events-container-enhanced {
        grid-template-columns: 1fr;
    }

    .event-item-enhanced {
        flex-direction: column;
        text-align: center;
    }

    .event-date-badge {
        align-self: center;
    }

    .event-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* Modal Enhancements */
.modal-xl .modal-body {
    max-height: 80vh;
    overflow-y: auto;
}

/* Print styles - hide animations and badges in print */
@media print {
    .attachment-actions,
    .badge-new,
    .new-badge-indicator,
    .badge[title*="Flash"],
    .flash-badge {
        display: none !important;
    }

    .notice-attachment {
        border: 1px solid #000;
        background: none;
    }

    .attachment-filename::after {
        content: " (Attachment)";
        font-style: italic;
    }

    .notice-with-new-badge {
        background: none !important;
        border: 1px solid #dc3545 !important;
    }

    .events-carousel-nav,
    .carousel-indicators-vertical {
        display: none !important;
    }

    .event-box {
        border: 1px solid #000 !important;
        background: none !important;
        page-break-inside: avoid;
    }

    .event-new-badge-small {
        background: #000 !important;
        color: #fff !important;
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .notice-item-enhanced {
        border: 2px solid #000;
    }

    .notice-attachment {
        border: 2px solid #333;
        background: #f0f0f0;
    }

    .attachment-actions .btn {
        border-width: 2px;
        font-weight: bold;
    }

    .new-notice-badge,
    .badge-new {
        background: #dc3545 !important;
        color: #fff !important;
        border: 1px solid #fff;
    }

    .notice-with-new-badge {
        border-left-color: #dc3545 !important;
        background: rgba(220, 53, 69, 0.1) !important;
    }
}

/* Enhanced New Badge Blinking Animation */
.badge-new, .new-notice-badge {
    background: linear-gradient(45deg, #dc3545, #c82333) !important; /* Changed from green to red */
    color: white !important;
    font-weight: bold !important;
    font-size: 0.75em !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3) !important; /* Updated shadow color */
    animation: blinkNewBadge 2s infinite !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Updated animation keyframes for RED badge */
@keyframes blinkNewBadge {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3); /* Updated shadow color */
    }

    25% {
        opacity: 0.7;
        transform: scale(1.05);
        box-shadow: 0 3px 8px rgba(220, 53, 69, 0.5); /* Updated shadow color */
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.7); /* Updated shadow color */
        background: linear-gradient(45deg, #c82333, #bd2130) !important; /* Updated gradient colors */
    }

    75% {
        opacity: 0.8;
        transform: scale(1.05);
        box-shadow: 0 3px 8px rgba(220, 53, 69, 0.5); /* Updated shadow color */
    }

    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3); /* Updated shadow color */
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .notice-item-enhanced,
    .badge-new,
    .new-badge-indicator,
    .attachment-icon,
    .preview-attachment-btn {
        animation: none !important;
        transition: none !important;
    }

        .notice-item-enhanced:hover {
            transform: none;
        }

    .notice-with-new-badge:hover {
        transform: none;
        transition: none;
    }
}

/* Quick Links */
.quick-links {
    background: linear-gradient(45deg, #1a5089 0%, #0a3d70 100%);
    color: var(--text-light);
    padding: 20px 0;
    box-shadow: var(--box-shadow);
    position: relative;
}

    /* When there are 5 columns, use flexbox for better spacing */
    .quick-links .row.five-columns {
        display: flex;
        justify-content: space-evenly;
        align-items: stretch;
        gap: 15px;
    }

        .quick-links .row.five-columns > [class*="col-"],
        .quick-links .container .row.five-columns > [class*="col-"],
        .quick-links .container-fluid .row.five-columns > [class*="col-"] {
            flex: 1 1 18%;
            max-width: 18%;
            min-width: 0;
        }

    /* Add horizontal padding for better spacing */
    .quick-links .row > [class*="col-"],
    .quick-links .container > .row > [class*="col-"],
    .quick-links .container-fluid > .row > [class*="col-"] {
        padding-left: 15px;
        padding-right: 15px;
    }

    .quick-links:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
    }

    .quick-links .container,
    .quick-links .container-fluid {
        position: relative;
        z-index: 2;
    }

    .quick-links h5 {
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 15px;
        color: #ffffff;
        position: relative;
        display: inline-block;
        padding-bottom: 8px;
    }

        .quick-links h5:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 40px;
            height: 3px;
            background-color: var(--secondary-color);
        }

    .quick-links ul {
        list-style: none;
        padding-left: 0;
    }

        .quick-links ul li {
            margin-bottom: 10px;
            transition: var(--transition);
        }

            .quick-links ul li:hover {
                transform: translateX(5px);
            }

    .quick-links a {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        font-size: 15px;
        display: block;
        transition: var(--transition);
        font-weight: 500;
    }

        .quick-links a i {
            color: var(--secondary-color);
            margin-right: 8px;
            transition: var(--transition);
        }

        .quick-links a:hover {
            color: var(--secondary-color);
        }

            .quick-links a:hover i {
                transform: translateX(3px);
            }

/* Responsive adjustments */
@media (max-width: 1200px) {
    .quick-links .row.five-columns > [class*="col-"] {
        flex: 1 1 19%;
        max-width: 19%;
    }
}

@media (max-width: 992px) {
    .quick-links .row.five-columns > [class*="col-"] {
        flex: 1 1 48%;
        max-width: 48%;
    }
}

@media (max-width: 768px) {
    .quick-links .row.five-columns,
    .quick-links .container .row.five-columns,
    .quick-links .container-fluid .row.five-columns {
        flex-direction: column;
        gap: 10px;
    }

        .quick-links .row.five-columns > [class*="col-"],
        .quick-links .container .row.five-columns > [class*="col-"],
        .quick-links .container-fluid .row.five-columns > [class*="col-"] {
            flex: 1 1 100%;
            max-width: 100%;
        }
}

/* ================================================================
   NOTICES & ANNOUNCEMENTS SECTION - INTEGRATED STYLES
   ================================================================ */


/* ================================================================
   INTEGRATED NOTICES & ANNOUNCEMENTS SECTION WITH ATTACHMENTS
   ================================================================ */

/* Add missing CSS variables at the top of your CSS file */
:root {
    --primary-color: #000080;
    --secondary-color: #FFD700;
    --accent-color: #f8f9fa;
    --text-light: #ffffff;
    --text-dark: #333333;
    --border-color: #e0e0e0;
    --hover-color: rgba(0, 0, 128, 0.05);
    --gradient-primary: linear-gradient(135deg, #000080 0%, #0000b3 100%);
    --box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    --transition: all 0.3s ease;
}

/* ================================================================
   NOTICES & ANNOUNCEMENTS SECTION - UNIFIED STYLES
   ================================================================ */

/* Main notices section styling */
.notices-section {
    margin-bottom: 40px;
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-top: 4px solid var(--primary-color);
    position: relative;
    z-index: 1;
}

    .notices-section .section-title {
        color: #000080;
        margin-bottom: 10px;
        font-weight: 600;
        font-size: 2rem;
    }

    .notices-section p {
        color: #666;
        margin-bottom: 30px;
    }

    /* Enhanced Bootstrap tab navigation with improved clickability */
    .notices-section .nav-tabs {
        position: relative;
        z-index: 100;
        pointer-events: auto;
        background: transparent;
        border-bottom: 2px solid #e9ecef;
        margin-bottom: 20px;
        display: flex !important;
        flex-wrap: wrap;
        list-style: none;
        padding-left: 0;
    }

        .notices-section .nav-tabs .nav-item {
            margin-bottom: -2px;
            position: relative;
            z-index: 101;
        }

        .notices-section .nav-tabs .nav-link {
            border: none !important;
            border-bottom: 3px solid transparent !important;
            color: #666 !important;
            font-weight: 500;
            padding: 12px 20px;
            transition: all 0.3s ease;
            background: transparent !important;
            cursor: pointer !important;
            text-decoration: none !important;
            border-radius: 0 !important;
            display: block !important;
            pointer-events: auto !important;
            position: relative !important;
            z-index: 102 !important;
            user-select: none;
            outline: none;
            min-height: 44px;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }

            .notices-section .nav-tabs .nav-link:hover,
            .notices-section .nav-tabs .nav-link:focus {
                color: #000080 !important;
                background-color: rgba(0,0,128,0.05) !important;
                border-bottom-color: rgba(0,0,128,0.3) !important;
                outline: none !important;
                transform: translateY(-1px);
                cursor: pointer !important;
            }

            .notices-section .nav-tabs .nav-link.active {
                color: #000080 !important;
                border-bottom-color: #000080 !important;
                background-color: rgba(0,0,128,0.05) !important;
                font-weight: 600;
                transform: translateY(-1px);
                box-shadow: 0 2px 4px rgba(0,0,128,0.1);
            }

        .notices-section .nav-tabs .badge {
            font-size: 0.7rem;
            padding: 2px 6px;
            pointer-events: none;
            position: relative;
            z-index: 1;
        }

    /* Tab content styling */
    .notices-section .tab-content {
        min-height: 300px;
        position: relative;
        z-index: 5;
        background: transparent;
    }

    .notices-section .tab-pane {
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

        .notices-section .tab-pane.active {
            display: block !important;
            opacity: 1;
        }

        .notices-section .tab-pane.show.active {
            display: block !important;
            opacity: 1;
        }

/* ================================================================
   NOTICES & ANNOUNCEMENTS - SCROLLABLE SECTION
   ================================================================ */

/* Container for notice categories - becomes scrollable when more than 9 categories */
.notice-categories-container {
    width: 100%;
    position: relative;
}

    /* Scrollable state when more than 9 categories */
    .notice-categories-container.scrollable-notices {
        max-height: 400px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 10px;
        padding-top: 10px; /* Add this line */
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color) #f0f0f0;
    }

        /* Adjust the first row to compensate */
        .notice-categories-container.scrollable-notices > .row {
            margin-top: -4px; /* Optional: fine-tune spacing */
        }

        /* Webkit browsers (Chrome, Safari, Edge) scrollbar styling */
        .notice-categories-container.scrollable-notices::-webkit-scrollbar {
            width: 8px;
        }

        .notice-categories-container.scrollable-notices::-webkit-scrollbar-track {
            background: #f0f0f0;
            border-radius: 10px;
        }

        .notice-categories-container.scrollable-notices::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 10px;
            transition: background 0.3s ease;
        }

            .notice-categories-container.scrollable-notices::-webkit-scrollbar-thumb:hover {
                background: #000060;
            }

        /* Add a subtle gradient fade at the bottom to indicate more content */
        .notice-categories-container.scrollable-notices::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 30px;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);
            pointer-events: none;
            opacity: 1;
            transition: opacity 0.3s ease;
        }

        /* Remove or comment out this entire rule */
        .notice-categories-container.scrollable-notices::after {
            display: none !important;
        }

/* Responsive adjustments for scrollable notices */
@media (max-width: 768px) {
    .notice-categories-container.scrollable-notices {
        max-height: 350px;
    }
}

@media (max-width: 576px) {
    .notice-categories-container.scrollable-notices {
        max-height: 300px;
        padding-right: 5px;
    }

        .notice-categories-container.scrollable-notices::-webkit-scrollbar {
            width: 6px;
        }
}

/* Enhanced Notice Container */
.notices-container-enhanced {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 500px;
    overflow-y: auto;
}

/* Enhanced Notice Items */
.notice-item-enhanced {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: relative;
}

    .notice-item-enhanced:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border-color: #007bff;
        transform: translateY(-2px);
    }

    .notice-item-enhanced.notice-with-new-badge {
        border-left: 4px solid #28a745;
        background: linear-gradient(135deg, #fff 0%, #f8fff8 100%);
    }

        .notice-item-enhanced.notice-with-new-badge::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 100%;
            background: linear-gradient(to bottom, #28a745, #20c997);
            border-radius: 0 3px 3px 0;
        }

/* Notice Header Layout */
.notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.notice-date-enhanced {
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.notice-badges {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* Notice Content */
.notice-content {
    margin-bottom: 0.75rem;
}

.notice-title-enhanced {
    margin-bottom: 0.5rem;
}

.notice-link {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.4;
    transition: color 0.3s ease;
}

    .notice-link:hover {
        color: #007bff;
        text-decoration: underline;
    }

.notice-details {
    margin-bottom: 0.75rem;
}

.notice-excerpt {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Notice Footer */
.notice-footer {
    border-top: 1px solid #e9ecef;
    padding-top: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

.notice-category {
    color: #007bff;
    font-weight: 500;
}

/* ================================================================
   NOTICE CATEGORY GRADIENT LINKS - ENHANCED CLICKABILITY
   ================================================================ */

.notice-category-tab {
    margin-bottom: 8px;
    height: 100%;
    position: relative;
    z-index: 10;
}

/* Modern row gap approach */
.notice-categories-container-compact .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: 8px;
    margin-bottom: 0;
}

/* Adjust column padding to compensate */
.notice-categories-container-compact .col-md-4,
.notice-categories-container-compact .col-6 {
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin-bottom: 8px !important;
}

.notice-category-tab .category-gradient-link {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white !important;
    text-decoration: none !important;
    border-radius: 12px;
    padding: 5px 7px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25);
    border: none;
    min-height: 65px;
    font-weight: 400;
    font-size: 14px;
    gap: 8px;
    cursor: hand !important;
    pointer-events: auto !important;
    z-index: 11 !important;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

    .notice-category-tab .category-gradient-link:hover {
        transform: translateY(-4px) scale(1.02) !important;
        box-shadow: 0 12px 30px rgba(102, 126, 234, 0.35);
        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
        color: white !important;
        text-decoration: none !important;
    }

    .notice-category-tab .category-gradient-link:focus {
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25), 0 12px 30px rgba(102, 126, 234, 0.35) !important;
    }

    .notice-category-tab .category-gradient-link:active {
        transform: translateY(-3px) scale(1.01) !important;
        transition: all 0.15s ease;
    }

/* Ensure child elements don't block clicks */
.category-icon-wrapper,
.category-info,
.category-name,
.category-count,
.new-indicator {
    pointer-events: none;
    position: relative;
    z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .notice-category-tab {
        margin-bottom: 6px;
    }

    .notice-categories-container-compact .row {
        row-gap: 6px;
    }

    .notice-category-tab .category-gradient-link:hover {
        transform: translateY(-2px) scale(1.01) !important;
    }
}

@media (max-width: 576px) {
    .notice-category-tab {
        margin-bottom: 5px;
    }

    .notice-categories-container-compact .row {
        row-gap: 5px;
    }
}


/* ================================================
   ATTACHMENT STYLES - NEW SECTION
   ================================================ */

.notice-attachment {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.75rem;
    transition: all 0.3s ease;
}

    .notice-attachment:hover {
        background: #e9ecef;
        border-color: #adb5bd;
    }

.attachment-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.attachment-icon {
    font-size: 1.5rem;
    width: 2rem;
    text-align: center;
    transition: transform 0.3s ease;
}

.notice-attachment:hover .attachment-icon {
    transform: scale(1.1);
}

.attachment-details {
    flex: 1;
    min-width: 0;
}

.attachment-filename {
    font-weight: 500;
    color: #495057;
    display: block;
    word-break: break-word;
    font-size: 0.9rem;
}

.attachment-type-badge {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    padding: 0.125rem 0.375rem;
}

.attachment-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

    .attachment-actions .btn {
        font-size: 0.85rem;
        padding: 0.25rem 0.75rem;
        border-radius: 0.375rem;
        font-weight: 500;
        transition: all 0.3s ease;
    }

.preview-attachment-btn {
    background-color: #fff;
    border: 1px solid #007bff;
    color: #007bff;
}

    .preview-attachment-btn:hover {
        background-color: #007bff;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,123,255,0.3);
    }

    .preview-attachment-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    .preview-attachment-btn.loading {
        opacity: 0.6;
        cursor: not-allowed;
    }

        .preview-attachment-btn.loading::after {
            content: '';
            display: inline-block;
            width: 0.75rem;
            height: 0.75rem;
            margin-left: 0.5rem;
            border: 2px solid transparent;
            border-top-color: currentColor;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

/* Download button styling */
.attachment-actions .btn-outline-success {
    background-color: #fff;
    border-color: #28a745;
    color: #28a745;
}

    .attachment-actions .btn-outline-success:hover {
        background-color: #28a745;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(40,167,69,0.3);
    }

/* ================================================
   ATTACHMENT PREVIEW MODAL STYLES
   ================================================ */

.modal-xl {
    max-width: 1200px;
}

#attachmentPreviewModal .modal-header {
    background: linear-gradient(135deg, #000080 0%, #0000b3 100%);
    color: white;
    border-bottom: none;
}

#attachmentPreviewModal .modal-title {
    font-weight: 600;
}

#attachmentPreviewModal .btn-close {
    filter: invert(1);
}

#attachmentPreviewContent iframe,
#attachmentPreviewContent img {
    width: 100%;
    min-height: 500px;
    border: none;
    border-radius: 0.375rem;
}

#attachmentPreviewContent img {
    max-height: 80vh;
    object-fit: contain;
    background: #f8f9fa;
}

.attachment-error {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

#attachmentPreviewLoader {
    color: #6c757d;
}

    #attachmentPreviewLoader .spinner-border {
        width: 3rem;
        height: 3rem;
    }

#attachmentPreviewError {
    color: #6c757d;
}

    #attachmentPreviewError i {
        color: #ffc107;
    }

/* RESPONSIVE DESIGN with maintained clickability */
@media (max-width: 768px) {
    .notices-section {
        padding: 20px 15px;
    }

    .notice-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .attachment-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .attachment-actions {
        width: 100%;
        justify-content: flex-start;
    }

        .attachment-actions .btn {
            flex: 1;
            min-width: 0;
        }

    .notices-section .nav-tabs {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 2px;
    }

        .notices-section .nav-tabs .nav-link {
            padding: 10px 12px;
            font-size: 0.85rem;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

    .notices-container-enhanced {
        max-height: 400px;
    }

    .notice-item-enhanced {
        padding: 0.75rem;
    }

    .attachment-filename {
        font-size: 0.85rem;
    }

    .modal-xl {
        max-width: 95%;
        margin: 1rem auto;
    }

    #attachmentPreviewContent iframe,
    #attachmentPreviewContent img {
        min-height: 300px;
    }

    /* Hide new badges on mobile tabs to save space */
    .nav-tabs .nav-link .badge.bg-success {
        display: none;
    }

    .new-notice-badge,
    .badge-new {
        font-size: 0.55em;
        padding: 2px 5px;
        background: linear-gradient(45deg, #dc3545, #c82333) !important; /* Maintain red on mobile */
        animation: pulse-new 2s infinite;
    }

    .notice-with-new-badge {
        border-left-width: 2px;
        border-left-color: #dc3545 !important; /* Updated to red */
    }
}

@media (max-width: 576px) {
    .notices-section .nav-tabs .nav-link {
        padding: 8px 10px;
        font-size: 0.8rem;
        min-height: 40px;
    }

    .notices-section .section-title {
        font-size: 1.5rem;
    }

    .notice-link {
        font-size: 1rem;
    }

    .attachment-actions .btn {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }

    .attachment-icon {
        font-size: 1.25rem;
    }

    .sec-heading h2 {
        font-size: 1.5rem;
    }

    .website-card {
        height: 60px;
        padding: 5px;
    }

    .website-logo {
        max-height: 35px;
    }

    .image-placeholder i {
        font-size: 1.2rem;
    }

    .image-placeholder span {
        font-size: 0.65rem;
    }
}

/* ACCESSIBILITY ENHANCEMENTS */
.notices-section .nav-tabs .nav-link:focus {
    box-shadow: 0 0 0 2px rgba(0,0,128,0.2);
    outline: none;
}

.notices-section .nav-tabs .nav-link:focus-visible {
    box-shadow: 0 0 0 2px rgba(0,0,128,0.4);
}

.preview-attachment-btn:focus,
.attachment-actions .btn:focus {
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
    outline: none;
}

/* ANIMATION IMPROVEMENTS */
@keyframes slideInNotice {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

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

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.notice-item-enhanced {
    animation: slideInNotice 0.3s ease forwards;
}


    .notice-item-enhanced:nth-child(1) {
        animation-delay: 0.05s;
    }

    .notice-item-enhanced:nth-child(2) {
        animation-delay: 0.1s;
    }

    .notice-item-enhanced:nth-child(3) {
        animation-delay: 0.15s;
    }

    .notice-item-enhanced:nth-child(4) {
        animation-delay: 0.2s;
    }

    .notice-item-enhanced:nth-child(5) {
        animation-delay: 0.25s;
    }

/* SCROLLBAR STYLING */
.notices-container-enhanced::-webkit-scrollbar {
    width: 6px;
}

.notices-container-enhanced::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.notices-container-enhanced::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

    .notices-container-enhanced::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* ================================================
   LOADING STATES
   ================================================ */

.loading .notice-item-enhanced {
    opacity: 0.7;
    pointer-events: none;
}

.preview-attachment-btn.loading {
    opacity: 0.6;
    cursor: not-allowed;
}

    .preview-attachment-btn.loading::after {
        content: '';
        display: inline-block;
        width: 0.75rem;
        height: 0.75rem;
        margin-left: 0.5rem;
        border: 2px solid transparent;
        border-top-color: currentColor;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }



/* DEBUG STYLES - Remove after testing */
.notices-section .nav-tabs .nav-link.debug-highlight {
    background-color: rgba(255, 0, 0, 0.1) !important;
    border: 2px solid red !important;
}

/* ENSURE NO OVERLAY ISSUES */
.notices-section::before,
.notices-section::after {
    pointer-events: none;
}

/* FORCE HARDWARE ACCELERATION for smoother interactions */
.notices-section .nav-tabs .nav-link {
    will-change: transform, background-color, border-color;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.notice-item-enhanced {
    will-change: transform, box-shadow;
    backface-visibility: hidden;
}

/* ================================================================
   END NOTICES & ANNOUNCEMENTS SECTION
   ================================================================ */

/* Content Area Styles */
.main-content {
    padding: 0px 0 !important;
    background-color: #f9f9f9;
    position: relative;
}

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

.welcome-section {
    margin-bottom: 40px;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    border-top: 4px solid var(--primary-color);
}

    .welcome-section:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }

.section-title {
    color: var(--primary-color);
    position: relative;
    margin-bottom: 25px;
    padding-bottom: 15px;
    font-weight: 700;
    font-size: 26px;
}

    .section-title:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 3px;
        background-color: var(--secondary-color);
        transition: var(--transition);
    }

.welcome-section:hover .section-title:after {
    width: 80px;
}

.welcome-content {
    font-size: 16px;
    line-height: 1.8;
}

/* Vice Chancellor Section */
.vc-section {
    padding: 40px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    border-left: 4px solid var(--primary-color);
    transition: var(--transition);
}

    .vc-section:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }

    .vc-section:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 150px;
        height: 150px;
        background: radial-gradient(circle, var(--primary-color) 0%, rgba(0,0,128,0) 70%);
        opacity: 0.05;
        border-radius: 0 0 0 100%;
    }

.vc-image {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important; /* Makes it circular */
    object-fit: cover;
    border: 3px solid #FFD700 !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: var(--transition);
}

.vc-section:hover .vc-image {
    transform: scale(1.05);
}

.vc-info {
    padding-left: 20px;
}

.vc-name {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 22px;
}

.vc-designation {
    color: #666;
    font-style: italic;
    margin-bottom: 20px;
    font-size: 16px;
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
}

    .vc-designation:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 30px;
        height: 2px;
        background-color: var(--secondary-color);
    }

.vc-message {
    position: relative;
    padding-left: 20px;
    margin-top: 20px;
}

    .vc-message:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background-color: var(--secondary-color);
        border-radius: 3px;
    }

    .vc-message h3 {
        color: var(--primary-color);
        font-weight: 600;
        margin-bottom: 20px;
        font-size: 22px;
    }

.vc-quote {
    font-style: italic;
    font-size: 1.1rem;
    margin: 20px 0;
    color: #555;
    position: relative;
    padding: 15px 20px;
    background-color: rgba(0,0,128,0.02);
    border-radius: 5px;
}

    .vc-quote:before {
        content: '\201C';
        font-size: 60px;
        color: rgba(0,0,128,0.1);
        position: absolute;
        top: -15px;
        left: 5px;
        font-family: Georgia, serif;
    }

/* Vision & Mission Section */
.vision-mission {
    display: flex;
    margin-bottom: 40px;
    gap: 20px;
}

/* Equal Height using Bootstrap Grid */
.vision-mission-row {
    display: flex;
    align-items: stretch; /* Makes children equal height */
}

.vision-box, .mission-box {
    padding: 10px 20px; /* REDUCED from 15px 20px */
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.vision-box {
    border-top: 4px solid var(--primary-color);
}

.mission-box {
    border-top: 4px solid var(--secondary-color);
}

    /* Make content area expand to fill available space */
    .vision-box p:last-child,
    .mission-box p:last-child {
        flex-grow: 1;
        margin-bottom: -10px;
    }

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

.vision-mission h3 {
    color: var(--primary-color);
    font-size: 16px; /* Reduced from 18px */
    margin-bottom: 8px; /* Reduced from 10px */
    font-weight: 600;
    display: flex;
    align-items: center;
}

    .vision-mission h3 i {
        margin-right: 10px;
        background-color: rgba(0,0,128,0.1);
        color: var(--primary-color);
        width: 28px; /* Reduced from 32px */
        height: 28px; /* Reduced from 32px */
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 13px; /* Reduced from 14px */
    }

.vision-mission p {
    margin-bottom: 6px; /* Reduced from 8px */
    line-height: 1.5; /* Reduced from 1.6 */
    font-size: 0.85rem; /* Reduced from 0.9rem */
}

.vision-box p {
    margin-bottom: 5px; /* Even more compact */
}

/* Reduce button padding */
.vision-mission .btn {
    padding: 8px 20px; /* Reduced from default */
    font-size: 0.9rem; /* Slightly smaller text */
}

/* Additional adjustments for the merged vision-mission section */
.vision-mission-merged {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

    /* UPDATED: Reduce spacing in vision and mission boxes within merged section */
    .vision-mission-merged .vision-box {
        padding: 15px 25px 0px 25px; /* Reduced top/bottom padding */
    }

    .vision-mission-merged .mission-box {
        padding: 20px 25px; /* Reduced top padding */
    }

/* 🎯 NOTICES & ANNOUNCEMENTS SECTION - SPECIFIC STYLES */
.notices-section {
    margin-bottom: 40px;
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-top: 4px solid var(--primary-color);
}

    .notices-section .section-title {
        color: #000080;
        margin-bottom: 10px;
        font-weight: 600;
        font-size: 2rem;
    }

    .notices-section p {
        color: #666;
        margin-bottom: 30px;
    }

    /* 🔧 CRITICAL: Notice-Specific Tab Navigation - NO CONFLICTS */
    .notices-section .notices-nav-tabs {
        border-bottom: 2px solid #e9ecef;
        margin-bottom: 30px;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding-left: 0;
    }

        .notices-section .notices-nav-tabs .nav-item {
            margin-bottom: -2px;
        }

        .notices-section .notices-nav-tabs .nav-link {
            border: none !important;
            border-bottom: 3px solid transparent !important;
            color: #666;
            font-weight: 500;
            padding: 12px 20px;
            transition: all 0.3s ease;
            background: none !important;
            cursor: pointer;
            text-decoration: none;
            border-radius: 0 !important;
            display: block;
        }

            .notices-section .notices-nav-tabs .nav-link:hover {
                color: #000080;
                background-color: rgba(0,0,128,0.05) !important;
                border-bottom-color: rgba(0,0,128,0.3) !important;
            }

            .notices-section .notices-nav-tabs .nav-link.active {
                color: #000080 !important;
                border-bottom-color: #000080 !important;
                background-color: rgba(0,0,128,0.05) !important;
                font-weight: 600;
            }

        .notices-section .notices-nav-tabs .badge {
            font-size: 0.7rem;
            padding: 2px 6px;
        }

    /* 🔧 Tab Content - Let Bootstrap Handle Display Logic */
    .notices-section .tab-content {
        min-height: 400px;
        position: relative;
    }

    /* Notice Container and Items */
    .notices-section .notices-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .notices-section .notice-item {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 20px;
        transition: all 0.3s ease;
        position: relative;
    }

        .notices-section .notice-item:hover {
            background: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }

    .notices-section .notice-badges {
        position: absolute;
        top: 15px;
        right: 15px;
        display: flex;
        gap: 5px;
    }

        .notices-section .notice-badges .badge {
            font-size: 0.7rem;
            padding: 3px 8px;
        }

    .notices-section .new-badge {
        background-color: #28a745 !important;
    }

    .notices-section .urgent-badge {
        background-color: #dc3545 !important;
    }

    .notices-section .current-badge {
        background-color: #17a2b8 !important;
    }

    .notices-section .notice-date {
        color: #666;
        font-size: 0.9rem;
        margin-bottom: 10px;
        font-weight: 500;
    }

    .notices-section .notice-title {
        margin-bottom: 10px;
        font-size: 1.1rem;
        line-height: 1.4;
    }

        .notices-section .notice-title a {
            color: #000080;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
        }

            .notices-section .notice-title a:hover {
                color: #0056b3;
                text-decoration: underline;
            }

    .notices-section .notice-meta {
        color: #666;
        font-size: 0.85rem;
        margin-bottom: 10px;
    }

        .notices-section .notice-meta i {
            color: #000080;
            margin-right: 5px;
        }

    .notices-section .notice-excerpt,
    .notices-section .notice-content {
        color: #555;
        line-height: 1.6;
        margin-bottom: 0;
    }

    /* Empty State */
    .notices-section .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: #666;
    }

        .notices-section .empty-state i {
            color: #ddd;
            margin-bottom: 15px;
        }

        .notices-section .empty-state h5 {
            color: #999;
            margin-bottom: 8px;
            font-size: 1.1rem;
        }

        .notices-section .empty-state p {
            color: #999;
            font-size: 0.9rem;
        }

/* Quick Access Links */
.quick-access {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    border-top: 4px solid var(--primary-color);
}

    .quick-access:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }

.quick-access-header {
    background: var(--gradient-primary);
    color: white;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

    .quick-access-header:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
    }

    .quick-access-header h4 {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        position: relative;
        z-index: 1;
    }

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

    .quick-access-links li {
        border-bottom: 1px solid #f5f5f5;
        transition: var(--transition);
    }

        .quick-access-links li:last-child {
            border-bottom: none;
        }

    .quick-access-links a {
        display: block;
        padding: 11px 20px;
        color: #333;
        text-decoration: none;
        transition: var(--transition);
        font-weight: 500;
    }

        .quick-access-links a:hover {
            background-color: var(--hover-color);
            padding-left: 25px;
            color: var(--primary-color);
        }

    .quick-access-links i {
        margin-right: 10px;
        color: var(--primary-color);
        width: 20px;
        text-align: center;
        transition: var(--transition);
    }

    .quick-access-links a:hover i {
        transform: scale(1.2);
    }

/* Upcoming Events */
.upcoming-events {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--box-shadow);
    border-top: 4px solid var(--secondary-color);
    transition: var(--transition);
}

    .upcoming-events:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }

.event-item {
    display: flex;
    margin-bottom: 15px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
    background-color: #fff;
    transition: var(--transition);
}

    .event-item:hover {
        transform: translateX(5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

/* Event Date Box */
.event-date {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    padding: 4px 3px;
    border-radius: 8px;
    text-align: center;
    margin-right: 10px;
    min-width: 50px;
    max-width: 50px;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(0, 123, 255, 0.25);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
}

    .event-date::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
        transform: rotate(45deg);
        transition: transform 0.6s ease;
    }

.event-box:hover .event-date::before {
    transform: rotate(45deg) translateX(100%);
}

.event-date h5 {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.event-date b {
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    display: block !important;
    margin-top: 2px !important;
}

.event-date:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}

.event-date .day {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.event-date .month {
    font-size: 14px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.event-info {
    padding: 12px 15px;
    flex: 1;
}

.event-title {
    margin: 0 0 5px;
    font-weight: 600;
    font-size: 16px;
    color: var(--primary-color);
}

.event-location {
    font-size: 13px;
    color: #777;
    margin-bottom: 0;
}

    .event-location i {
        color: var(--secondary-color);
        margin-right: 5px;
    }

/* Dark Vice Chancellor Section */
.vc-dark-section {
    background: linear-gradient(135deg, #000080 0%, #000065 100%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
    padding: 20px !important;
    min-height: 0 !important;
    max-height: 775px !important;
    height: auto !important;
    box-sizing: border-box;
}

    .vc-dark-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        z-index: 1;
    }

    .vc-dark-section .container {
        position: relative;
        z-index: 2;
    }

    .vc-dark-section .vc-image {
        border: 5px solid #fff;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    .vc-dark-section .vc-name {
        color: #FFD700;
    }

    .vc-dark-section .vc-designation {
        color: #ffffff;
    }

        .vc-dark-section .vc-designation:after {
            background-color: #FFD700;
        }

    .vc-dark-section .vc-message {
        border-left: 3px solid #FFD700;
        background-color: rgba(255,255,255,0.05);
        padding: 20px;
        border-radius: 5px;
    }

        .vc-dark-section .vc-message:before {
            display: none;
        }

        .vc-dark-section .vc-message h3 {
            color: #FFD700;
        }

    .vc-dark-section .vc-quote {
        background-color: rgba(255,255,255,0.08);
        color: #ffffff;
        border-left: 3px solid #FFD700;
    }

        .vc-dark-section .vc-quote:before {
            color: rgba(255,255,255,0.1);
        }

    .vc-dark-section .btn-outline-warning {
        border-color: #FFD700;
        color: #FFD700;
    }

        .vc-dark-section .btn-outline-warning:hover {
            background-color: #FFD700;
            color: #000080;
        }

    .vc-dark-section .btn-warning {
        background-color: #FFD700;
        color: #000080;
        border: none;
    }

        .vc-dark-section .btn-warning:hover {
            background-color: #e6c200;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            transform: translateY(-2px);
        }



/* Quote Section Styling */
.quote-section-area {
    position: relative;
    background-color: #f9f9f9;
    overflow: hidden;
    padding: 50px 0;
}

    .quote-section-area::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000080' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        opacity: 0.7;
        z-index: 1;
    }

.quote-container {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 128, 0.1);
    background: #fff;
}

.quote-content {
    position: relative;
    background: linear-gradient(135deg, #fff 0%, #f8f8ff 100%);
}

.quote-inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quote-marks {
    position: absolute;
    top: -30px;
    left: 20px;
    font-family: 'Georgia', serif;
    font-size: 150px;
    line-height: 1;
    color: rgba(0, 0, 128, 0.07);
    z-index: 0;
}

.quote-text {
    position: relative;
    font-size: 22px;
    line-height: 1.8;
    color: #333;
    font-weight: 400;
    z-index: 2;
}

.quote-author {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.author-line {
    width: 50px;
    height: 2px;
    background-color: #FFD700;
    margin-right: 15px;
    transition: width 0.3s ease;
}

.quote-container:hover .author-line {
    width: 70px;
}

.author-name {
    font-size: 20px;
    font-weight: 600;
    color: #000080;
}

.quote-image {
    height: 100%;
    position: relative;
}

.image-container {
    position: relative;
    height: 100%;
    overflow: hidden;
}

    .image-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(0, 0, 128, 0.8) 0%, rgba(0, 0, 128, 0.6) 100%);
        opacity: 0.3;
        transition: opacity 0.3s ease;
        z-index: 1;
    }

    .image-container::before {
        display: none !important; /* Completely removes the overlay */
    }

.quote-container:hover .image-container::before {
    opacity: 0.5;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 10s ease;
}

.quote-container:hover .image-container img {
    transform: scale(1.1);
}

.quote-content::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 0;
    width: 5px;
    background: linear-gradient(to bottom, #FFD700, #f0c000);
    border-radius: 5px;
}

/* Achievement Counter Section */
.achievement-counter {
    padding: 30px 0;
    background: linear-gradient(135deg, #000080 0%, #000065 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .achievement-counter::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
    }



.counter-wrapper {
    position: relative;
    z-index: 2;
}

.counter-item {
    text-align: center;
    margin-bottom: 30px;
}

.counter-icon {
    font-size: 40px;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.counter-number {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}

.counter-text {
    font-size: 16px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}



/* Campus Facilities Card Customization for Updated Options */

/* Smart Learning Spaces */
.card-smart-learning {
    border-top-color: #2d7cff;
}

    .card-smart-learning .facility-icon {
        background: linear-gradient(135deg, #2d7cff 0%, #06beb6 100%);
    }

    .card-smart-learning .facility-content h4,
    .card-smart-learning .facility-link {
        color: #2d7cff;
    }

        .card-smart-learning .facility-link::after {
            background-color: #2d7cff;
        }

    .card-smart-learning:hover .facility-content h4 {
        color: #06beb6;
    }

    .card-smart-learning:hover .facility-link {
        color: #06beb6;
    }

/* State-of-the-Art ICT Infrastructure */
.card-ict {
    border-top-color: #0bc6e3;
}

    .card-ict .facility-icon {
        background: linear-gradient(135deg, #0bc6e3 0%, #174ea6 100%);
    }

    .card-ict .facility-content h4,
    .card-ict .facility-link {
        color: #0bc6e3;
    }

        .card-ict .facility-link::after {
            background-color: #0bc6e3;
        }

    .card-ict:hover .facility-content h4 {
        color: #174ea6;
    }

    .card-ict:hover .facility-link {
        color: #174ea6;
    }

/* Digital Academic Resources */
.card-digital-academic {
    border-top-color: #28a745;
}

    .card-digital-academic .facility-icon {
        background: linear-gradient(135deg, #28a745 0%, #aee8cc 100%);
    }

    .card-digital-academic .facility-content h4,
    .card-digital-academic .facility-link {
        color: #28a745;
    }

        .card-digital-academic .facility-link::after {
            background-color: #28a745;
        }

    .card-digital-academic:hover .facility-content h4 {
        color: #158753;
    }

    .card-digital-academic:hover .facility-link {
        color: #158753;
    }

/* Research Laboratories */
.card-research-lab {
    border-top-color: #9c27b0;
}

    .card-research-lab .facility-icon {
        background: linear-gradient(135deg, #9c27b0 0%, #ce88df 100%);
    }

    .card-research-lab .facility-content h4,
    .card-research-lab .facility-link {
        color: #9c27b0;
    }

        .card-research-lab .facility-link::after {
            background-color: #9c27b0;
        }

    .card-research-lab:hover .facility-content h4 {
        color: #ce88df;
    }

    .card-research-lab:hover .facility-link {
        color: #ce88df;
    }

/* Residential Facility */
.card-residential {
    border-top-color: #795548;
}

    .card-residential .facility-icon {
        background: linear-gradient(135deg, #795548 0%, #d7ccc8 100%);
    }

    .card-residential .facility-content h4,
    .card-residential .facility-link {
        color: #795548;
    }

        .card-residential .facility-link::after {
            background-color: #795548;
        }

    .card-residential:hover .facility-content h4 {
        color: #5d4037;
    }

    .card-residential:hover .facility-link {
        color: #5d4037;
    }

/* Medical Unit */
.card-medical-unit {
    border-top-color: #e53935;
}

    .card-medical-unit .facility-icon {
        background: linear-gradient(135deg, #e53935 0%, #fad9d6 100%);
    }

    .card-medical-unit .facility-content h4,
    .card-medical-unit .facility-link {
        color: #e53935;
    }

        .card-medical-unit .facility-link::after {
            background-color: #e53935;
        }

    .card-medical-unit:hover .facility-content h4 {
        color: #b71c1c;
    }

    .card-medical-unit:hover .facility-link {
        color: #b71c1c;
    }

/* Sports and Amenities Centre */
.card-sports {
    border-top-color: #ff9800;
}

    .card-sports .facility-icon {
        background: linear-gradient(135deg, #ff9800 0%, #ffe0b2 100%);
    }

    .card-sports .facility-content h4,
    .card-sports .facility-link {
        color: #ff9800;
    }

        .card-sports .facility-link::after {
            background-color: #ff9800;
        }

    .card-sports:hover .facility-content h4 {
        color: #f57c00;
    }

    .card-sports:hover .facility-link {
        color: #f57c00;
    }

/* Safety Infrastructure */
.card-safety {
    border-top-color: #607d8b;
}

    .card-safety .facility-icon {
        background: linear-gradient(135deg, #607d8b 0%, #b0bec5 100%);
    }

    .card-safety .facility-content h4,
    .card-safety .facility-link {
        color: #607d8b;
    }

        .card-safety .facility-link::after {
            background-color: #607d8b;
        }

    .card-safety:hover .facility-content h4 {
        color: #455a64;
    }

    .card-safety:hover .facility-link {
        color: #455a64;
    }

/* Skill Development & Innovation */
.card-skills {
    border-top-color: #ffc107;
}

    .card-skills .facility-icon {
        background: linear-gradient(135deg, #ffc107 0%, #fff8e1 100%);
    }

    .card-skills .facility-content h4,
    .card-skills .facility-link {
        color: #ffc107;
    }

        .card-skills .facility-link::after {
            background-color: #ffc107;
        }

    .card-skills:hover .facility-content h4 {
        color: #ff9800;
    }

    .card-skills:hover .facility-link {
        color: #ff9800;
    }

/* Campus Life Gallery */
.campus-gallery {
    padding: 30px 0;
    background-color: #f8f9fa;
    position: relative;
}

    .campus-gallery::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000080' fill-opacity='0.03' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
    }

.gallery-container {
    position: relative;
    z-index: 2;
}

.gallery-item {
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}

.gallery-img {
    height: 250px;
    overflow: hidden;
}

    .gallery-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s ease;
    }

.gallery-item:hover .gallery-img img {
    transform: scale(1.1);
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%);
    color: #fff;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-caption {
    transform: translateY(0);
}

.gallery-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}

.gallery-subtitle {
    font-size: 14px;
    opacity: 0.8;
}

/* ================================================================
   TESTIMONIALS SECTION - OPTIMIZED FOR OWL CAROUSEL
   ================================================================ */
.testimonials-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #f1f5f9 0%, #e9f2f9 100%);
    position: relative;
    overflow: hidden;
}

    .testimonials-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000080' fill-opacity='0.03' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
    }

    .testimonials-section .container {
        position: relative;
        z-index: 2;
    }

    .testimonials-section .section-title {
        color: var(--primary-color);
        position: relative;
        margin-bottom: 25px;
        padding-bottom: 15px;
        font-weight: 700;
        font-size: 2.5rem;
    }

        .testimonials-section .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, #007bff, #28a745);
            border-radius: 2px;
        }

    .testimonials-section .lead {
        color: #555;
        font-size: 1.1rem;
        line-height: 1.8;
        margin-bottom: 0;
    }

/* ================================================================
   TESTIMONIAL CARDS
   ================================================================ */

.testimonial-image-card {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
    height: 350px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    width: 100%;
    backface-visibility: hidden;
}

    /* ✅ HOVER EFFECT - Works for BOTH static grid and carousel */
    .testimonial-image-card:hover {
        transform: translateY(-15px); /* Only shift upward, no scale */
        box-shadow: 0 20px 40px rgba(0,0,0,0.25);
        z-index: 10;
    }

/* Image Styling */
.testimonial-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Shows full image without cropping */
    object-position: center;
    display: block;
    transition: opacity 0.3s ease;
    background: #f8f9fa;
}

/* ✅ Remove any zoom/scale effect on image hover */
.testimonial-image-card:hover .testimonial-image {
    transform: none; /* No scaling or zooming */
    opacity: 1;
}

/* No Image Placeholder */
.no-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #6c757d;
}

    .no-image-placeholder i {
        font-size: 4rem;
        margin-bottom: 15px;
        color: #dee2e6;
    }

    .no-image-placeholder p {
        font-size: 1.1rem;
        font-weight: 500;
        margin: 0;
    }

/* ================================================================
   OWL CAROUSEL CUSTOMIZATION - FIXED
   ================================================================ */

.testimonials-carousel-wrapper {
    position: relative;
    padding: 20px 50px;
}

/* ✅ FIXED: Base carousel styling without .item references */
#testimonialsCarousel.owl-carousel {
    display: block;
    position: relative;
}

#testimonialsCarousel .owl-stage-outer {
    overflow: hidden;
    position: relative;
    padding: 10px 0;
}

#testimonialsCarousel .owl-stage {
    display: flex;
    align-items: stretch;
}

/* ✅ FIXED: Direct child handling (no .item wrapper) */
#testimonialsCarousel .owl-item {
    display: flex;
    align-items: stretch;
    height: auto;
    opacity: 1;
    visibility: visible;
}

    /* ✅ FIXED: Cards are direct children of owl-item now */
    #testimonialsCarousel .owl-item .testimonial-image-card {
        margin: 0 10px;
        width: calc(100% - 20px);
        display: flex;
        flex-direction: column;
    }

        /* ✅ Ensure carousel items also shift upward */
        #testimonialsCarousel .owl-item .testimonial-image-card:hover {
            transform: translateY(-15px) !important;
            box-shadow: 0 20px 40px rgba(0,0,0,0.25) !important;
            z-index: 10 !important;
        }

/* Ensure images fill properly without zoom */
#testimonialsCarousel .testimonial-image {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    display: block;
    transform: none !important; /* Prevent any transform */
}

/* ✅ Ensure images in carousel don't zoom */
#testimonialsCarousel .owl-item .testimonial-image-card:hover .testimonial-image {
    transform: none !important; /* Force no zoom in carousel */
}

/* ================================================================
   CUSTOM NAVIGATION ARROWS
   ================================================================ */

.testimonials-carousel-wrapper .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}

    .testimonials-carousel-wrapper .owl-nav button {
        pointer-events: auto;
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
        color: white !important;
        border-radius: 50%;
        border: none;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        transition: all 0.3s ease;
        box-shadow: 0 5px 20px rgba(0, 123, 255, 0.3);
        opacity: 0.8;
    }

        .testimonials-carousel-wrapper .owl-nav button:hover {
            opacity: 1;
            transform: scale(1.1);
            box-shadow: 0 8px 30px rgba(0, 123, 255, 0.5);
        }

        .testimonials-carousel-wrapper .owl-nav button.owl-prev {
            margin-left: -25px;
        }

        .testimonials-carousel-wrapper .owl-nav button.owl-next {
            margin-right: -25px;
        }

        .testimonials-carousel-wrapper .owl-nav button span {
            line-height: 1;
        }

/* ================================================================
   CUSTOM DOTS
   ================================================================ */

.testimonials-carousel-wrapper .owl-dots {
    text-align: center;
    margin-top: 30px;
}

    .testimonials-carousel-wrapper .owl-dots button {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #dee2e6 !important;
        margin: 0 5px;
        transition: all 0.3s ease;
        border: none;
    }

        .testimonials-carousel-wrapper .owl-dots button.active {
            background: #007bff !important;
            width: 30px;
            border-radius: 6px;
            transform: scale(1.2);
        }

        .testimonials-carousel-wrapper .owl-dots button:hover {
            background: #0056b3 !important;
        }

/* ================================================================
   STATIC GRID LAYOUT (3 or fewer items)
   ================================================================ */

.testimonials-section .row .testimonial-image-card {
    margin-bottom: 20px;
}

/* ✅ Explicit hover for static grid items */
.testimonials-section .row .col-lg-4 .testimonial-image-card:hover,
.testimonials-section .row .col-md-6 .testimonial-image-card:hover {
    transform: translateY(-15px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25) !important;
    z-index: 10 !important;
    /* Remove any animation interference */
    animation: none !important;
}

/* ✅ Ensure static grid images don't zoom */
.testimonials-section .row .testimonial-image-card:hover .testimonial-image {
    transform: none !important;
}

/* ================================================================
   ANIMATIONS
   ================================================================ */

/* Remove all fade animations for static grid */
.testimonials-section .row .testimonial-image-card {
    animation: none !important; /* No animation on load */
    transition: all 0.3s ease !important; /* Smooth transition for hover */
    transform: translateY(0); /* Base position */
}

    /* Remove animation delays */
    .testimonials-section .row .testimonial-image-card:nth-child(1),
    .testimonials-section .row .testimonial-image-card:nth-child(2),
    .testimonials-section .row .testimonial-image-card:nth-child(3) {
        animation: none !important;
        animation-delay: 0s !important;
    }

/* Simple hover shift for static grid */
.testimonials-section .row .col-lg-4 .testimonial-image-card:hover,
.testimonials-section .row .col-md-6 .testimonial-image-card:hover {
    transform: translateY(-15px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25) !important;
    z-index: 10 !important;
}

/* Ensure images don't zoom on hover in static grid */
.testimonials-section .row .testimonial-image-card:hover .testimonial-image {
    transform: none !important;
}

/* Keep carousel items working smoothly */
#testimonialsCarousel .owl-item .testimonial-image-card {
    animation: none !important;
    transition: all 0.3s ease !important;
}

    /* Carousel hover effect */
    #testimonialsCarousel .owl-item .testimonial-image-card:hover {
        transform: translateY(-15px) !important;
        box-shadow: 0 20px 40px rgba(0,0,0,0.25) !important;
        z-index: 10 !important;
    }

        #testimonialsCarousel .owl-item .testimonial-image-card:hover .testimonial-image {
            transform: none !important;
        }

/* ================================================================
   OWL CAROUSEL SPECIFIC FIXES
   ================================================================ */

/* Ensure carousel initializes properly */
#testimonialsCarousel.owl-carousel.owl-loaded {
    display: block;
}

#testimonialsCarousel.owl-carousel.owl-drag .owl-item {
    touch-action: pan-y;
    user-select: none;
}

/* Fix for cloned items */
#testimonialsCarousel .owl-item.cloned .testimonial-image-card {
    height: 350px;
    display: flex;
}

/* ================================================================
   RESPONSIVE DESIGN
   ================================================================ */

@media (max-width: 991px) {
    .testimonials-section .section-title {
        font-size: 2rem;
    }

    .testimonial-image-card {
        height: 300px;
    }

    #testimonialsCarousel .owl-item .testimonial-image-card {
        height: 300px;
    }

    .testimonials-carousel-wrapper {
        padding: 20px 40px;
    }

        .testimonials-carousel-wrapper .owl-nav button {
            width: 45px;
            height: 45px;
            font-size: 18px;
        }
}

@media (max-width: 767px) {
    .testimonials-section {
        padding: 40px 0;
    }

        .testimonials-section .section-title {
            font-size: 1.75rem;
        }

        .testimonials-section .lead {
            font-size: 1rem;
        }

    .testimonial-image-card {
        height: 280px;
        margin-bottom: 20px;
    }

    #testimonialsCarousel .owl-item .testimonial-image-card {
        height: 280px;
        margin: 0 5px;
    }

    .testimonials-carousel-wrapper {
        padding: 20px 30px;
    }

        .testimonials-carousel-wrapper .owl-nav button {
            width: 40px;
            height: 40px;
            font-size: 16px;
        }

            .testimonials-carousel-wrapper .owl-nav button.owl-prev {
                margin-left: -20px;
            }

            .testimonials-carousel-wrapper .owl-nav button.owl-next {
                margin-right: -20px;
            }

    .no-image-placeholder i {
        font-size: 3rem;
    }

    .no-image-placeholder p {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .testimonial-image-card {
        height: 250px;
    }

    #testimonialsCarousel .owl-item .testimonial-image-card {
        height: 250px;
    }

    .testimonials-carousel-wrapper {
        padding: 20px 25px;
    }

        .testimonials-carousel-wrapper .owl-nav button {
            width: 35px;
            height: 35px;
            font-size: 14px;
        }

    .testimonial-view-badge {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .no-image-placeholder i {
        font-size: 2.5rem;
    }

    .no-image-placeholder p {
        font-size: 0.9rem;
    }
}

/* ================================================================
   ACCESSIBILITY
   ================================================================ */

.testimonial-image-card:focus,
.testimonial-image-card:focus-visible {
    outline: 3px solid #007bff;
    outline-offset: 5px;
}

.testimonials-carousel-wrapper .owl-nav button:focus,
.testimonials-carousel-wrapper .owl-nav button:focus-visible {
    outline: 3px solid white;
    outline-offset: 3px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .testimonial-image-card {
        border: 2px solid #000;
    }

    .testimonials-carousel-wrapper .owl-nav button {
        border: 2px solid white;
    }

    .testimonial-view-badge {
        border: 2px solid white;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .testimonial-image-card,
    .testimonial-image,
    .testimonial-view-badge,
    .testimonials-carousel-wrapper .owl-nav button {
        transition: none !important;
        animation: none !important;
    }

        .testimonial-image-card:hover {
            transform: none !important;
        }

            .testimonial-image-card:hover .testimonial-image {
                transform: none !important;
            }
}

/* ================================================================
   END OF TESTIMONIALS SECTION STYLES
   ================================================================ */

/* Enhanced Facilities Section Styling */
.facilities-section {
    padding: 30px 0;
    background-color: #f8f9fa;
    position: relative;
    overflow: hidden;
}

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

.facilities-tagline {
    max-width: 700px;
    margin: 0 auto 20px;
    color: #555;
}

.facility-cards-container {
    position: relative;
    z-index: 2;
}

.facility-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: 40px 30px 30px;
    border-top: 5px solid transparent;
    border-image: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    border-image-slice: 1;
}

    .facility-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 0;
        transition: height 0.5s ease;
        z-index: 0;
        opacity: 0;
    }

    .facility-card:hover {
        transform: translateY(-15px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }

        .facility-card:hover::before {
            height: 100%;
            opacity: 1;
        }

/* Individual card hover backgrounds */
.card-medical::before {
    background: linear-gradient(135deg, rgba(232, 244, 248, 1) 0%, rgba(200, 229, 238, 1) 100%);
}

.card-dining::before {
    background: linear-gradient(135deg, rgba(253, 244, 230, 1) 0%, rgba(246, 224, 180, 1) 100%);
}

.card-accommodation::before {
    background: linear-gradient(135deg, rgba(242, 237, 246, 1) 0%, rgba(220, 207, 232, 1) 100%);
}

.card-research::before {
    background: linear-gradient(135deg, rgba(233, 248, 240, 1) 0%, rgba(199, 232, 219, 1) 100%);
}

.card-auditorium::before {
    background: linear-gradient(135deg, rgba(249, 237, 237, 1) 0%, rgba(234, 204, 204, 1) 100%);
}

.card-library::before {
    background: linear-gradient(135deg, rgba(235, 241, 253, 1) 0%, rgba(204, 221, 248, 1) 100%);
}

/* Card icon styles */
.facility-icon {
    position: relative;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #000065 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 25px;
    transition: all 0.4s ease;
    box-shadow: 0 10px 20px rgba(0,0,128,0.15);
    z-index: 1;
}

/* Custom icon backgrounds for each card */
.card-medical .facility-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.card-dining .facility-icon {
    background: linear-gradient(135deg, #ff9a44 0%, #fc6076 100%);
}

.card-accommodation .facility-icon {
    background: linear-gradient(135deg, #a166ab 0%, #7c65b1 100%);
}

.card-research .facility-icon {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.card-auditorium .facility-icon {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.card-library .facility-icon {
    background: linear-gradient(135deg, #4481eb 0%, #04befe 100%);
}

.facility-card:hover .facility-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* Custom card border colors */
.card-medical {
    border-top-color: #4facfe;
}

.card-dining {
    border-top-color: #ff9a44;
}

.card-accommodation {
    border-top-color: #a166ab;
}

.card-research {
    border-top-color: #43e97b;
}

.card-auditorium {
    border-top-color: #fa709a;
}

.card-library {
    border-top-color: #4481eb;
}

.facility-content {
    position: relative;
    z-index: 1;
}

    .facility-content h4 {
        color: var(--primary-color);
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 15px;
        transition: color 0.3s ease;
    }

/* Custom heading colors on hover */
.card-medical:hover .facility-content h4 {
    color: #0085c7;
}

.card-dining:hover .facility-content h4 {
    color: #e66000;
}

.card-accommodation:hover .facility-content h4 {
    color: #7c3c8d;
}

.card-research:hover .facility-content h4 {
    color: #00a650;
}

.card-auditorium:hover .facility-content h4 {
    color: #d62b70;
}

.card-library:hover .facility-content h4 {
    color: #0057b8;
}

.facility-content p {
    color: #555;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.facility-card:hover .facility-content p {
    color: #333;
}

.facility-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
    display: inline-block;
}

    .facility-link::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 0;
        height: 2px;
        transition: width 0.3s ease;
    }

/* Custom link colors and hover effects */
.card-medical .facility-link {
    color: #0085c7;
}

    .card-medical .facility-link::after {
        background-color: #0085c7;
    }

.card-dining .facility-link {
    color: #e66000;
}

    .card-dining .facility-link::after {
        background-color: #e66000;
    }

.card-accommodation .facility-link {
    color: #7c3c8d;
}

    .card-accommodation .facility-link::after {
        background-color: #7c3c8d;
    }

.card-research .facility-link {
    color: #00a650;
}

    .card-research .facility-link::after {
        background-color: #00a650;
    }

.card-auditorium .facility-link {
    color: #d62b70;
}

    .card-auditorium .facility-link::after {
        background-color: #d62b70;
    }

.card-library .facility-link {
    color: #0057b8;
}

    .card-library .facility-link::after {
        background-color: #0057b8;
    }

.facility-card:hover .facility-link::after {
    width: 100%;
}

.facility-link i {
    font-size: 12px;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.facility-card:hover .facility-link i {
    transform: translateX(5px);
}

.facilities-cta {
    margin-top: 20px;
    padding: 12px 30px;
    font-weight: 600;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transition: all 0.4s ease;
}

    .facilities-cta:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    }

/* Responsive Design for Notice Tabs */
@media (max-width: 768px) {
    .notices-section {
        padding: 20px 15px;
    }

        .notices-section .notices-nav-tabs {
            flex-wrap: wrap;
            justify-content: flex-start;
        }

            .notices-section .notices-nav-tabs .nav-link {
                padding: 10px 15px;
                font-size: 0.9rem;
            }

        .notices-section .notice-item {
            padding: 15px;
        }

        .notices-section .notice-badges {
            position: static;
            margin-bottom: 10px;
            justify-content: flex-start;
        }
}

@media (max-width: 576px) {
    .notices-section .notices-nav-tabs .nav-link {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .notices-section .section-title {
        font-size: 1.5rem;
    }
}

/* General Responsive adjustments */
@media (max-width: 991px) {
    .vision-mission {
        flex-direction: column;
    }

    .vision-box {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .vc-section {
        padding: 30px;
    }

    .vc-dark-section .vc-image {
        margin-bottom: 30px;
    }

    .quote-container {
        flex-direction: column;
    }

    .quote-content,
    .quote-image {
        width: 100%;
    }

    .image-container {
        height: 300px;
    }

    .quote-text {
        font-size: 18px;
    }

    .quote-marks {
        font-size: 120px;
        top: -20px;
    }
}

@media (max-width: 768px) {
    .university-name h1 {
        font-size: 22px;
    }

    .university-name p {
        font-size: 14px;
    }


    .vc-image {
        width: 100px;
        height: 100px;
        margin: 0 auto 20px;
        display: block;
    }

    .vc-info {
        padding-left: 0;
        text-align: center;
    }

    .vc-message:before {
        display: none;
    }

    .vc-message {
        padding-left: 0;
    }

    .section-title:after {
        left: 50%;
        transform: translateX(-50%);
    }

    .image-container {
        height: auto !important;
    }

    .vc-designation:after {
        left: 50%;
        transform: translateX(-50%);
    }

    h1, h2, h3, h4, h5, h6, .text-md-start {
        text-align: center;
    }

    .quote-inner {
        padding: 30px !important;
    }

    .facility-card {
        margin-bottom: 30px;
        padding: 30px 20px 25px;
    }

    .facility-icon {
        width: 70px;
        height: 70px;
        font-size: 28px;
        margin-bottom: 20px;
    }

    .facility-content h4 {
        font-size: 20px;
    }
}

/* Extra Large Screens (1920px and above) */
@media (min-width: 1921px) {
    .video-container {
        height: 950px !important;
    }

    .carousel-inner {
        max-height: 950px !important;
    }

    .carousel-item img {
        height: 950px !important;
    }
}

/* Large Desktops (1440px - 1920px) */
@media (max-width: 1920px) {
    .video-container {
        height: 850px !important;
    }

    .carousel-inner {
        max-height: 850px !important;
    }

    .carousel-item img {
        height: 850px !important;
    }
}

/* Standard Desktops (1200px - 1439px) */
@media (max-width: 1439px) {
    .video-container {
        height: 750px !important;
    }

    .carousel-inner {
        max-height: 750px !important;
    }

    .carousel-item img {
        height: 750px !important;
    }
}

/* Small Desktops / Laptops (992px - 1199px) */
@media (max-width: 1199px) {
    .video-container {
        height: 650px !important;
    }

    .carousel-inner {
        max-height: 650px !important;
    }

    .carousel-item img {
        height: 650px !important;
    }
}

/* Tablets Landscape (768px - 991px) */
@media (max-width: 991px) {
    .video-container {
        height: 550px !important;
    }

    .carousel-inner {
        max-height: 550px !important;
    }

    .carousel-item img {
        height: 550px !important;
    }
}

/* Tablets Portrait (576px - 767px) */
@media (max-width: 767px) {
    .video-container {
        height: 450px !important;
    }

    .carousel-inner {
        max-height: 450px !important;
    }

    .carousel-item img {
        height: 450px !important;
    }
}

/* Large Phones (480px - 575px) */
@media (max-width: 575px) {
    .video-container {
        height: 350px !important;
    }

    .carousel-inner {
        max-height: 350px !important;
    }

    .carousel-item img {
        height: 350px !important;
    }
}

/* Small Phones (320px - 479px) */
@media (max-width: 479px) {
    .video-container {
        height: 280px !important;
    }

    .carousel-inner {
        max-height: 280px !important;
    }

    .carousel-item img {
        height: 280px !important;
    }
}

/* Extra Small Phones (below 320px) */
@media (max-width: 319px) {
    .video-container {
        height: 220px !important;
    }

    .carousel-inner {
        max-height: 220px !important;
    }

    .carousel-item img {
        height: 220px !important;
    }
}

@media (max-width: 576px) {
    .quote-inner {
        padding: 20px !important;
    }

    .quote-text {
        font-size: 16px;
    }

    .author-name {
        font-size: 18px;
    }

    .image-container {
        height: auto;
    }
}

/* Animation Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Flash News specific category colors */

.flash-news-section .news-category.academic {
    background-color: #4CAF50 !important;
    color: #FFFFFF !important;
    border-color: rgba(76, 175, 80, 0.8) !important;
    box-shadow: 0 3px 8px rgba(76, 175, 80, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

.flash-news-section .news-category.admission {
    background-color: #FF9800 !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 152, 0, 0.8) !important;
    box-shadow: 0 3px 8px rgba(255, 152, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

.flash-news-section .news-category.examination {
    background-color: #F44336 !important;
    color: #FFFFFF !important;
    border-color: rgba(244, 67, 54, 0.8) !important;
    box-shadow: 0 3px 8px rgba(244, 67, 54, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

.flash-news-section .news-category.tender {
    background-color: #9C27B0 !important;
    color: #FFFFFF !important;
    border-color: rgba(156, 39, 176, 0.8) !important;
    box-shadow: 0 3px 8px rgba(156, 39, 176, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

.flash-news-section .news-category.event {
    background-color: #E91E63 !important;
    color: #FFFFFF !important;
    border-color: rgba(233, 30, 99, 0.8) !important;
    box-shadow: 0 3px 8px rgba(233, 30, 99, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

.flash-news-section .news-category.notice {
    background-color: #00BCD4 !important;
    color: #FFFFFF !important;
    border-color: rgba(0, 188, 212, 0.8) !important;
    box-shadow: 0 3px 8px rgba(0, 188, 212, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

.flash-news-section .news-category.scholarship {
    background-color: #FFEB3B !important;
    color: #333333 !important;
    border-color: rgba(255, 235, 59, 0.8) !important;
    box-shadow: 0 3px 8px rgba(255, 235, 59, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
    text-shadow: none;
}

.flash-news-section .news-category.urgent {
    background-color: #FF5722 !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    box-shadow: 0 3px 8px rgba(255, 87, 34, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.5) !important;
    animation: flashUrgentPulse 1.5s infinite;
}

.flash-news-section .news-category.news {
    background-color: #2196F3 !important;
    color: #FFFFFF !important;
    border-color: rgba(33, 150, 243, 0.8) !important;
    box-shadow: 0 3px 8px rgba(33, 150, 243, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

.flash-news-section .news-category.circular {
    background-color: #673AB7 !important;
    color: #FFFFFF !important;
    border-color: rgba(103, 58, 183, 0.8) !important;
    box-shadow: 0 3px 8px rgba(103, 58, 183, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

.flash-news-section .news-category.result {
    background-color: #8BC34A !important;
    color: #FFFFFF !important;
    border-color: rgba(139, 195, 74, 0.8) !important;
    box-shadow: 0 3px 8px rgba(139, 195, 74, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

.flash-news-section .news-category.announcement {
    background-color: #FF7043 !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 112, 67, 0.8) !important;
    box-shadow: 0 3px 8px rgba(255, 112, 67, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

.flash-news-section .news-category.general {
    background-color: #607D8B !important;
    color: #FFFFFF !important;
    border-color: rgba(96, 125, 139, 0.8) !important;
    box-shadow: 0 3px 8px rgba(96, 125, 139, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

/* Menu Search Section Styles */
.menu-search-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
}

.search-container {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid #e9ecef;
}

.search-title {
    color: #2c3e50;
    font-weight: 600;
    font-size: 1.8rem;
}

.search-subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
}

.search-input-group {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.search-input {
    font-size: 1.1rem;
    padding: 15px 60px 15px 20px;
    border: 2px solid #e9ecef;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

    .search-input:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25), 0 8px 25px rgba(0,0,0,0.15);
        outline: none;
    }

.search-input-icons {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 5px;
}

.search-btn, .clear-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.search-btn {
    background: #007bff;
    color: white;
}

    .search-btn:hover {
        background: #0056b3;
        transform: scale(1.05);
    }

.clear-btn {
    background: #6c757d;
    color: white;
}

    .clear-btn:hover {
        background: #545b62;
    }

.search-loading {
    position: absolute;
    right: 55px;
    top: 50%;
    transform: translateY(-50%);
    color: #007bff;
}

/* Search Suggestions */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 5px;
}

.suggestions-header {
    padding: 10px 15px;
    border-bottom: 1px solid #f8f9fa;
    background: #f8f9fa;
    border-radius: 10px 10px 0 0;
}

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

.suggestion-item {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.2s ease;
}

    .suggestion-item:hover,
    .suggestion-item.active {
        background-color: #f8f9fa;
    }

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

.suggestion-label {
    font-weight: 500;
    color: #2c3e50;
}

.suggestion-category {
    font-size: 0.85rem;
    color: #6c757d;
    margin-left: 10px;
}

/* Search Tips */
.search-tips {
    text-align: center;
}

.search-tip {
    color: #007bff;
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.9rem;
}

    .search-tip:hover {
        background-color: #007bff;
        color: white;
    }

/* Search Results */
.search-results-container {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid #e9ecef;
}

.results-title {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Quick Results Grid */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.quick-result-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 1rem;
    transition: all 0.3s ease;
    position: relative;
}

    .quick-result-item:hover {
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transform: translateY(-2px);
    }

.result-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.result-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 1.1rem;
}

    .result-icon.navbar {
        background: #007bff;
        color: white;
    }

    .result-icon.topmenu {
        background: #28a745;
        color: white;
    }

    .result-icon.quickaccess {
        background: #ffc107;
        color: #212529;
    }

    .result-icon.footer {
        background: #6c757d;
        color: white;
    }

    .result-icon.external {
        background: #fd7e14;
        color: white;
    }

    .result-icon.page {
        background: #17a2b8;
        color: white;
    }

.result-title {
    font-weight: 600;
    margin: 0;
    font-size: 1.1rem;
}

.result-description {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.result-breadcrumb {
    font-size: 0.8rem;
    color: #adb5bd;
    margin-bottom: 0.5rem;
}

.result-badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.result-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
}

/* Sitemap Results */
.sitemap-container {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 1.5rem;
    max-height: 600px;
    overflow-y: auto;
}

.sitemap-results ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .sitemap-results ul ul {
        padding-left: 30px;
        margin-top: 10px;
    }

.sitemap-item {
    margin-bottom: 8px;
}

    .sitemap-item a {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        color: #2c3e50;
        text-decoration: none;
        border-radius: 6px;
        transition: all 0.2s ease;
    }

        .sitemap-item a:hover {
            background-color: #e9ecef;
            text-decoration: none;
            color: #007bff;
        }

    .sitemap-item.search-match > a {
        background-color: #fff3cd;
        border-left: 4px solid #ffc107;
    }

        .sitemap-item.search-match > a:hover {
            background-color: #ffeaa7;
        }

.menu-name mark {
    background-color: #ffeb3b;
    padding: 1px 3px;
    border-radius: 3px;
}

.menu-badges {
    margin-left: auto;
}

    .menu-badges .badge {
        font-size: 0.65rem;
        margin-left: 3px;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .search-container {
        padding: 1.5rem;
        margin: 0 15px;
    }

    .search-title {
        font-size: 1.5rem;
    }

    .search-input {
        font-size: 1rem;
        padding: 12px 50px 12px 15px;
    }

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

    .results-actions {
        flex-direction: column;
        gap: 10px;
    }
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.search-results-container {
    animation: fadeInUp 0.5s ease;
}

/* Loading States */
.search-input.loading {
    background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Important Websites Section Styles */
.importantlink-section {
    background: #f8f9fa;
    padding: 50px 0;
    position: relative;
}

    .importantlink-section .implink {
        position: relative;
    }

/* Section Heading */
.sec-heading {
    margin-bottom: 40px;
}

    .sec-heading h2 {
        color: #2c3e50;
        font-weight: 700;
        font-size: 2.5rem;
        margin-bottom: 0;
        position: relative;
        display: inline-block;
    }

        .sec-heading h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, #007bff, #28a745);
            border-radius: 2px;
        }

/* Wrapper for the carousel */
.important-websites-wrapper {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
}

/* Owl Carousel customization */
#importantWebsitesCarousel.owl-carousel {
    position: relative;
}

#importantWebsitesCarousel .owl-stage-outer {
    overflow: hidden;
    position: relative;
}

#importantWebsitesCarousel .owl-stage {
    display: flex;
    align-items: center;
}

#importantWebsitesCarousel .owl-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px; /* Ensure minimum height */
}

/* Individual website items */
.important-website-item {
    padding: 0 10px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.website-card {
    width: 100%;
    height: 100px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    padding: 15px;
    border: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .website-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        border-color: #007bff;
    }

    .website-card a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        text-decoration: none;
    }

/* Image container */
.website-image-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Images */
.website-logo {
    max-width: 100%;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    display: block;
}

.website-card:hover .website-logo {
    transform: scale(1.05);
}

/* Placeholder for missing images */
.image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    text-align: center;
    height: 70px;
    width: 100%;
}

    .image-placeholder i {
        font-size: 2rem;
        margin-bottom: 5px;
        color: #007bff;
    }

    .image-placeholder span {
        font-size: 0.8rem;
        font-weight: 600;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.2;
    }

/* Hide default Owl Carousel navigation and dots */
#importantWebsitesCarousel .owl-nav,
#importantWebsitesCarousel .owl-dots {
    display: none;
}

/* Ensure smooth animation */
#importantWebsitesCarousel .owl-stage {
    transition: transform 3s linear;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .website-card {
        height: 90px;
        padding: 12px;
    }

    .website-logo {
        max-height: 60px;
    }

    .image-placeholder {
        height: 60px;
    }

        .image-placeholder i {
            font-size: 1.8rem;
        }
}

@media (max-width: 992px) {
    .sec-heading h2 {
        font-size: 2rem;
    }

    .website-card {
        height: 80px;
        padding: 10px;
    }

    .website-logo {
        max-height: 50px;
    }

    .image-placeholder {
        height: 50px;
    }

        .image-placeholder i {
            font-size: 1.6rem;
        }

        .image-placeholder span {
            font-size: 0.75rem;
        }
}

/* Loading State */
.brand-items.loading .item .implink {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

/* ================================================================
   EVENTS & NOTICES SIDE BY SIDE LAYOUT - KU STYLE
   ================================================================ */

/* Container for side-by-side layout */
.events-notices-row {
    display: flex;
    align-items: stretch;
    gap: 30px;
}

/* Common box styling for both Events and Notices */
.events-box {
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.notices-box {
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.events-box {
    border-top: 4px solid #007bff;
}

.notices-box {
    border-top: 4px solid #28a745;
}

    .events-box:hover, .notices-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    }

/* Section Headers */
.events-header, .notices-header {
    margin-bottom: 20px;
}

.events-box .section-title, .notices-box .section-title {
    color: #000080;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* ================================================================
   SIMPLIFIED EVENTS CONTAINER (KU STYLE)
   ================================================================ */

.events-simple-container {
    flex-grow: 1;
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.simple-event-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding-left: 0px;
    border-left: 3px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateX(0px);
    background: transparent;
}

    .simple-event-item:hover {
        background-color: rgba(40, 167, 69, 0.03);
        padding-left: 10px;
        border-radius: 5px;
        transform: translateX(3px);
        border-left: 3px solid #28a745;
    }

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

.event-date-simple {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: 100px;
    text-align: center;
    flex-shrink: 0;
}

.event-content-simple {
    flex-grow: 1;
    min-width: 0;
}

.event-title-simple {
    margin-bottom: 5px;
}

.event-link-simple {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease !important;
}

    .event-link-simple:hover {
        color: #0056b3;
        text-decoration: underline;
    }

.event-excerpt-simple {
    color: #6c757d;
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.event-new-badge {
    background: linear-gradient(45deg, #dc3545, #c82333);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    animation: pulse-new 2s infinite;
}

/* ================================================================
   SIMPLIFIED NOTICES CONTAINER 
   ================================================================ */

.notices-simple-container {
    flex-grow: 1;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.simple-notice-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: transparent;
    padding-left: 0px;
    border-left: 3px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateX(0px);
}

    .simple-notice-item:hover {
        background-color: rgba(40, 167, 69, 0.03);
        padding-left: 10px;
        border-radius: 5px;
        transform: translateX(3px);
        border-left: 3px solid #28a745;
    }

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

    .simple-notice-item.notice-with-new-badge {
        border-left: 3px solid #dc3545;
        padding-left: 10px;
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.03), rgba(255, 255, 255, 1));
    }

.notice-date-simple {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: 85px;
    text-align: center;
    flex-shrink: 0;
}

.notice-content-simple {
    flex-grow: 1;
    min-width: 0;
}

.notice-title-simple {
    margin-bottom: 5px;
}

.notice-link-simple {
    color: #28a745;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    transition: color 0.3s ease !important;
}

    .notice-link-simple:hover {
        color: #1e7e34;
        text-decoration: underline;
    }

.notice-excerpt-simple {
    color: #6c757d;
    font-size: 0.8rem;
    line-height: 1.4;
    margin-bottom: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notice-new-badge {
    background: linear-gradient(45deg, #dc3545, #c82333);
    color: white;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 8px;
    animation: pulse-new 2s infinite;
}

.notice-urgent-badge {
    background: linear-gradient(45deg, #ff5722, #e64a19);
    color: white;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 8px;
    animation: flash-urgent 1.5s infinite;
}

/* ================================================================
   TAB NAVIGATION STYLES
   ================================================================ */

.notices-box .nav-tabs {
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 15px;
}

    .notices-box .nav-tabs .nav-item {
        margin-bottom: -2px;
    }

    .notices-box .nav-tabs .nav-link {
        border: none;
        border-bottom: 3px solid transparent;
        color: #666;
        font-weight: 500;
        padding: 8px 15px;
        transition: all 0.3s ease;
        background: none;
        cursor: pointer;
        text-decoration: none;
        border-radius: 0;
        font-size: 0.85rem;
    }

        .notices-box .nav-tabs .nav-link:hover {
            color: #000080;
            background-color: rgba(0,0,128,0.05);
            border-bottom-color: rgba(0,0,128,0.3);
        }

        .notices-box .nav-tabs .nav-link.active {
            color: #000080;
            border-bottom-color: #000080;
            background-color: rgba(0,0,128,0.05);
            font-weight: 600;
        }

    .notices-box .nav-tabs .badge {
        font-size: 0.6rem;
        padding: 1px 4px;
    }

.notices-tab-content {
    flex-grow: 1;
}

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

.events-footer, .notices-footer {
    text-align: center;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.notices-category-footer {
    text-align: center;
    margin-top: 10px;
}

    .events-footer .btn, .notices-footer .btn, .notices-category-footer .btn {
        font-size: 0.9rem;
        padding: 8px 20px;
        border-radius: 6px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

/* ================================================================
   EMPTY STATE
   ================================================================ */

.empty-state {
    padding: 30px 15px;
    text-align: center;
    color: #6c757d;
}

    .empty-state i {
        color: #ddd;
        margin-bottom: 10px;
    }

    .empty-state h6 {
        color: #999;
        margin-bottom: 5px;
        font-size: 1rem;
    }

    .empty-state p {
        color: #999;
        font-size: 0.85rem;
        margin-bottom: 0;
    }

/* ================================================================
   SCROLLBAR STYLING
   ================================================================ */

.events-simple-container::-webkit-scrollbar,
.notices-simple-container::-webkit-scrollbar {
    width: 4px;
}

.events-simple-container::-webkit-scrollbar-track,
.notices-simple-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

.events-simple-container::-webkit-scrollbar-thumb {
    background: #007bff;
    border-radius: 2px;
}

.notices-simple-container::-webkit-scrollbar-thumb {
    background: #28a745;
    border-radius: 2px;
}

.events-simple-container::-webkit-scrollbar-thumb:hover {
    background: #0056b3;
}

.notices-simple-container::-webkit-scrollbar-thumb:hover {
    background: #1e7e34;
}

/* ================================================================
   ANIMATIONS
   ================================================================ */

@keyframes pulse-new {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(220, 53, 69, 0.1);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
        transform: scale(1);
    }
}

@keyframes flash-urgent {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
        background: linear-gradient(45deg, #ff7043, #f4511e);
    }
}

/* ================================================================
   RESPONSIVE DESIGN
   ================================================================ */

@media (max-width: 991px) {
    .events-notices-row {
        flex-direction: column;
        gap: 20px;
    }

    .events-box, .notices-box {
        padding: 20px;
    }

        .events-box .section-title, .notices-box .section-title {
            font-size: 1.3rem;
            flex-direction: column;
            align-items: flex-start;
        }

    .events-simple-container, .notices-simple-container {
        max-height: 300px;
    }
}

@media (max-width: 768px) {
    .simple-event-item, .simple-notice-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .event-date-simple, .notice-date-simple {
        min-width: auto;
        align-self: flex-start;
    }

    .notices-box .nav-tabs {
        flex-wrap: wrap;
        gap: 2px;
    }

        .notices-box .nav-tabs .nav-link {
            padding: 6px 10px;
            font-size: 0.8rem;
            min-height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

    .events-simple-container, .notices-simple-container {
        max-height: 250px;
    }
}

@media (max-width: 576px) {
    .events-box, .notices-box {
        padding: 15px;
    }

        .events-box .section-title, .notices-box .section-title {
            font-size: 1.1rem;
        }

    .event-link-simple, .notice-link-simple {
        font-size: 0.85rem;
    }

    .event-excerpt-simple, .notice-excerpt-simple {
        font-size: 0.8rem;
        -webkit-line-clamp: 1;
    }
}

/* ================================================================
   MODAL FIXES
   ================================================================ */

#imagePreviewModal .modal-dialog {
    max-width: 90vw;
}

#imagePreviewModal .modal-content {
    border: none;
    border-radius: 8px;
    overflow: hidden;
}

#imagePreviewModal .modal-header {
    background: linear-gradient(135deg, #000080 0%, #0000b3 100%);
    color: white;
    border-bottom: none;
    padding: 15px 20px;
}

#imagePreviewModal .modal-title {
    font-weight: 600;
    font-size: 1.1rem;
}

#imagePreviewModal .btn-close {
    filter: invert(1);
    opacity: 0.8;
}

    #imagePreviewModal .btn-close:hover {
        opacity: 1;
    }

#previewImageContent {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    background: #f8f9fa;
}

/* Ensure all interactive elements are clickable */
.category-gradient-link,
.nav-link,
.event-preview-image,
.event-document-icon,
.event-attachment-container,
.event-image-container,
.btn {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Remove any pointer-events none that might block clicking */
.notices-section *,
.events-section *,
.notice-categories-container *,
.events-container-enhanced * {
    pointer-events: auto;
}

/* Ensure overlays don't block clicks */
.event-overlay,
.document-overlay {
    pointer-events: none !important;
}

/* Events Container */
.events-container {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e9ecef;
}

/* Button Style */
.btn-style-one {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,123,255,0.2);
}

    .btn-style-one:hover {
        background: linear-gradient(135deg, #0056b3 0%, #003d82 100%);
        color: white;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,123,255,0.3);
    }

/* Individual Event Box */
.event-box {
    display: flex !important;
    align-items: center !important;
    padding: 8px !important;
    text-decoration: none;
    color: #333;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: white;
    border: 1px solid #e9ecef;
    height: 75px !important;
    min-height: 75px !important;
    max-height: 75px !important;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    width: 100% !important;
}

    .event-box:hover {
        background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
        color: #007bff;
        text-decoration: none;
        transform: translateX(5px) scale(1.02);
        box-shadow: 0 4px 15px rgba(0, 123, 255, 0.15);
        border-color: #007bff;
    }

    .event-box::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(0,123,255,0.1), transparent);
        transition: left 0.5s ease;
    }

    .event-box:hover::before {
        left: 100%;
    }

/* Image Box - Fixed */
.img-box {
    width: 50px !important;
    height: 50px !important;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 10px;
    flex-shrink: 0;
    border: 2px solid #e9ecef;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: white;
    transition: all 0.3s ease;
}

    .img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px;
    }

.document-placeholder,
.event-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 6px;
}

/* Event Text Box */
.event-text-box {
    flex: 1;
    min-width: 0;
    padding-left: 5px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100%;
}

    .event-text-box h5 {
        margin: 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        color: inherit;
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        word-break: break-word;
        overflow: hidden;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

/* Small New Badge for Events */
.event-new-badge-small {
    background: linear-gradient(45deg, #dc3545, #c82333) !important;
    color: white !important;
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    padding: 3px 6px !important;
    border-radius: 10px !important;
    animation: pulse-new-enhanced 2.5s infinite !important;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
    position: relative;
    overflow: hidden;
}

    .event-new-badge-small::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        transition: left 0.8s ease;
    }

.event-box:hover .event-new-badge-small::before {
    left: 100%;
}


@keyframes pulse-new-enhanced {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
        transform: scale(1);
    }

    25% {
        box-shadow: 0 3px 10px rgba(220, 53, 69, 0.4);
        transform: scale(1.05);
    }

    50% {
        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.6);
        transform: scale(1.1);
        background: linear-gradient(45deg, #e74c3c, #c0392b) !important;
    }

    75% {
        box-shadow: 0 3px 10px rgba(220, 53, 69, 0.4);
        transform: scale(1.05);
    }
}

@keyframes pulse-new-small {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
        transform: scale(1);
    }
}

/* HR Separator */
.events-container hr {
    margin: 8px 0;
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #dee2e6, transparent);
}

    .events-container hr:last-of-type {
        display: none;
    }

/* Events Container Scrollbar */
.events-container::-webkit-scrollbar {
    width: 6px;
}

.events-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.events-container::-webkit-scrollbar-thumb {
    background: #007bff;
    border-radius: 3px;
}

    .events-container::-webkit-scrollbar-thumb:hover {
        background: #0056b3;
    }

/* Empty State */
.events-container .empty-state {
    text-align: center;
    padding: 40px 20px;
}

    .events-container .empty-state i {
        color: #ddd;
        margin-bottom: 15px;
    }

    .events-container .empty-state h6 {
        color: #999;
        margin-bottom: 8px;
        font-size: 1.1rem;
    }

    .events-container .empty-state p {
        color: #999;
        font-size: 0.9rem;
        margin-bottom: 0;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .events-carousel-wrapper {
        height: 320px !important;
        padding: 12px;
    }

    #eventsVerticalCarousel {
        height: 290px !important;
    }

    .event-box {
        height: 65px !important;
        min-height: 65px !important;
        max-height: 65px !important;
        padding: 6px !important;
    }

    .img-box,
    .event-date {
        width: 45px !important;
        height: 45px !important;
        margin-right: 8px;
    }

        .event-date h5 {
            font-size: 12px !important;
        }

        .event-date b {
            font-size: 8px !important;
        }

    .event-text-box h5 {
        font-size: 12px !important;
    }

    .carousel-nav-btn {
        width: 32px;
        height: 32px;
    }

        .carousel-nav-btn i {
            font-size: 12px;
        }

    .events-carousel-nav {
        right: 6px;
        gap: 4px;
    }

    .carousel-indicators-vertical {
        left: 6px;
        gap: 6px;
    }

    .indicator-dot {
        width: 6px;
        height: 6px;
    }

    .event-new-badge-small {
        font-size: 0.5rem !important;
        padding: 2px 4px !important;
    }

    .events-container {
        height: 300px !important;
    }
}

@media (max-width: 576px) {
    .events-carousel-wrapper {
        height: 280px !important;
        padding: 10px;
    }

    #eventsVerticalCarousel {
        height: 260px !important;
    }

    .event-box {
        padding: 8px 6px !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
    }

    .img-box,
    .event-date {
        width: 40px !important;
        height: 40px !important;
        margin-right: 6px;
    }

    .event-text-box h5 {
        font-size: 11px !important;
        -webkit-line-clamp: 2;
    }

    .carousel-nav-btn {
        width: 28px;
        height: 28px;
    }

        .carousel-nav-btn i {
            font-size: 10px;
        }

    .events-carousel-nav {
        right: 4px;
    }
}

/* Integration with existing Events Box */
.events-box .events-carousel-wrapper {
    margin-bottom: 20px;
    flex-grow: 1;
}

/* Hover Effect Enhancement */
.event-box:hover .event-date {
    background: linear-gradient(135deg, #0056b3 0%, #003d82 100%);
    transform: scale(1.05);
}

.event-box:hover .img-box {
    border-color: #007bff;
    transform: rotate(2deg) scale(1.05);
    box-shadow: 0 4px 12px rgba(0,123,255,0.2);
}

.event-box:focus,
.event-box:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25);
}

.indicator-dot:focus,
.indicator-dot:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Events Carousel Wrapper */
.events-carousel-wrapper {
    position: relative;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 15px;
    border: 2px solid #e9ecef;
    height: 380px !important;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

    .events-carousel-wrapper:hover {
        border-color: #007bff;
        box-shadow: 0 6px 20px rgba(0,123,255,0.15);
    }

    .events-carousel-wrapper.carousel-hovered {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 10%, #f8f9fa 100%);
    }

/* Main Carousel Container - Fixed */
#eventsVerticalCarousel {
    position: relative;
    width: 100%;
    height: 350px !important;
    overflow: hidden !important;
    border-radius: 8px;
    background: transparent;
}

    /* Remove all Owl Carousel conflicts */
    #eventsVerticalCarousel.owl-carousel,
    #eventsVerticalCarousel.owl-loaded,
    #eventsVerticalCarousel .owl-stage-outer,
    #eventsVerticalCarousel .owl-stage,
    #eventsVerticalCarousel .owl-item {
        display: block !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        transition: none !important;
    }

        /* ================================================================
   OWL CAROUSEL ENHANCEMENTS FOR VERTICAL SCROLL
   ================================================================ */

        #eventsVerticalCarousel.owl-carousel .owl-stage-outer {
            overflow: hidden !important;
            height: 100% !important;
            position: relative;
            border-radius: 8px;
        }

        #eventsVerticalCarousel.owl-carousel .owl-stage {
            display: flex !important;
            height: auto !important;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
            will-change: transform;
        }

    /* Only apply these if NOT using Owl Carousel */
    #eventsVerticalCarousel:not(.owl-loaded) {
        background: transparent;
    }

        #eventsVerticalCarousel:not(.owl-loaded) .events-track {
            position: relative;
            transition: transform 0.5s ease-in-out;
        }

    #eventsVerticalCarousel .owl-wrapper,
    #eventsVerticalCarousel .owl-wrapper-outer {
        height: 100%;
    }

    #eventsVerticalCarousel .owl-stage-outer {
        height: 100% !important;
        overflow: hidden !important;
    }

    #eventsVerticalCarousel .owl-stage {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        transition: all 0.5s ease !important;
    }

    #eventsVerticalCarousel .owl-item {
        height: auto !important;
        min-height: 80px !important;
        width: 100% !important;
        float: none !important;
        display: block !important;
        margin-bottom: 5px;
    }

/* Alternative: True Vertical Carousel Container */
.vertical-items-container {
    width: 100%;
}

    .vertical-items-container .event-carousel-item {
        width: 100%;
        height: 90px;
        margin-bottom: 0;
        border-bottom: 1px solid #e9ecef;
    }

        .vertical-items-container .event-carousel-item:last-child {
            border-bottom: none;
        }

/* Vertical Animation Classes */
.slide-in-vertical {
    animation: slideInVertical 0.5s ease forwards;
}

/* Event Carousel Item */
.event-carousel-item {
    width: 100%;
    padding: 3px;
    position: relative;
    transition: all 0.3s ease;
    border-radius: 6px;
    background: transparent;
}

    .event-carousel-item:hover {
        background: rgba(0, 123, 255, 0.03);
        transform: translateX(3px);
    }

    /* Active event highlighting */
    .event-carousel-item.active-event {
        background: rgba(0, 123, 255, 0.05);
        border-radius: 8px;
        padding: 8px 5px;
    }

        .event-carousel-item.active-event .event-box {
            border-color: #007bff;
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
        }

/* Custom Navigation Arrows */
.events-carousel-nav {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 25;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.events-carousel-wrapper:hover .events-carousel-nav {
    opacity: 1;
    right: 10px;
}

.carousel-nav-btn {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

    .carousel-nav-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .carousel-nav-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, #0056b3 0%, #003d82 100%);
        transform: scale(1.15);
        box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
    }

    .carousel-nav-btn:hover::before {
        opacity: 1;
    }

    .carousel-nav-btn:active {
        transform: scale(1.05);
        transition: transform 0.1s ease;
    }

    .carousel-nav-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        transform: none !important;
        background: #6c757d;
        box-shadow: none;
    }

    .carousel-nav-btn i {
        font-size: 14px;
        position: relative;
        z-index: 1;
        transition: transform 0.3s ease;
    }

    .carousel-nav-btn:hover i {
        transform: scale(1.1);
    }

    /* Pause/Play button specific styles */
    .carousel-nav-btn.carousel-pause {
        background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    }

        .carousel-nav-btn.carousel-pause:hover {
            background: linear-gradient(135deg, #1e7e34 0%, #155724 100%);
            box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
        }

/* Hide default Owl navigation */
#eventsVerticalCarousel .owl-nav,
#eventsVerticalCarousel .owl-dots {
    display: none !important;
}

/* Empty State */
.events-carousel-wrapper .empty-state {
    text-align: center;
    padding: 40px 20px;
}

    .events-carousel-wrapper .empty-state i {
        color: #ddd;
        margin-bottom: 15px;
    }

    .events-carousel-wrapper .empty-state h6 {
        color: #999;
        margin-bottom: 8px;
        font-size: 1.1rem;
    }

    .events-carousel-wrapper .empty-state p {
        color: #999;
        font-size: 0.9rem;
        margin-bottom: 0;
    }

@keyframes slideInVertical {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ===============================================================
   EMPTY STATE
   =============================================================== */

.empty-events-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

    .empty-events-state i {
        color: #dee2e6;
        margin-bottom: 15px;
        animation: bounce 2s infinite;
    }

    .empty-events-state h6 {
        color: #6c757d;
        margin-bottom: 8px;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .empty-events-state p {
        color: #6c757d;
        font-size: 0.9rem;
        margin-bottom: 0;
        opacity: 0.8;
    }

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* ===============================================================
   CAROUSEL HOVER EFFECTS
   =============================================================== */

.events-carousel-wrapper.carousel-hovered {
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1);
}

    .events-carousel-wrapper.carousel-hovered .carousel-nav-btn {
        opacity: 1;
        transform: translateY(-50%) scale(1.05);
    }

/* ===============================================================
   OWL CAROUSEL SPECIFIC FIXES
   =============================================================== */

/* Fix Owl Carousel conflicts when it's loaded */
#eventsVerticalCarousel.owl-loaded .owl-stage-outer {
    overflow: hidden !important;
    height: 100% !important;
}

#eventsVerticalCarousel.owl-loaded .owl-stage {
    display: flex !important;
    height: 100% !important;
    transform: translate3d(0px, 0px, 0px) !important;
}

#eventsVerticalCarousel.owl-loaded .owl-item {
    width: 100% !important;
    float: none !important;
    display: block !important;
    margin-right: 0 !important;
}

/* Hide Owl Carousel default navigation */
#eventsVerticalCarousel.owl-loaded .owl-nav,
#eventsVerticalCarousel.owl-loaded .owl-dots {
    display: none !important;
}

/* ===============================================================
   ACCESSIBILITY IMPROVEMENTS
   =============================================================== */

.event-box:focus,
.event-box:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25);
}

.event-carousel-item {
    scroll-margin: 10px;
}

.carousel-nav-btn:focus,
.carousel-nav-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 1px #007bff, 0 6px 20px rgba(0, 123, 255, 0.4);
}

.event-box:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .event-box {
        border: 2px solid #000;
    }

        .event-box:hover {
            border: 2px solid #007bff;
            background: #fff;
        }

    .carousel-nav-btn {
        border: 2px solid #fff;
    }

    .indicator-dot {
        border: 1px solid #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .event-box,
    .carousel-nav-btn,
    .event-carousel-item,
    .custom-scroll-container,
    .event-new-badge-small,
    .indicator-dot {
        transition: none !important;
        animation: none !important;
    }

    .custom-scroll-container {
        transition: none !important;
    }
}

/* Events Carousel Fixes */
#eventsVerticalCarousel.owl-carousel .owl-stage-outer {
    overflow: hidden !important;
    height: 350px !important;
}

#eventsVerticalCarousel.owl-carousel .owl-stage {
    display: flex !important;
    height: 100% !important;
    align-items: stretch !important;
}

#eventsVerticalCarousel.owl-carousel .owl-item {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    display: block !important;
    margin-right: 0 !important;
    margin-bottom: 5px !important;
    min-height: 85px;
}

.event-carousel-item {
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
}

.event-box {
    height: 100%;
    display: flex !important;
    align-items: center !important;
    flex-grow: 1;
}

/* Vertical Scroll Fallback Styles */
.vertical-scroll-container {
    width: 100%;
}

    .vertical-scroll-container .event-carousel-item {
        height: 85px;
        margin-bottom: 5px;
        border-bottom: 1px solid #eee;
    }

        .vertical-scroll-container .event-carousel-item:last-child {
            border-bottom: none;
        }

/* Swiper Vertical Carousel Styles */
#eventsVerticalSwiper {
    height: 350px !important;
    width: 100%;
}

    #eventsVerticalSwiper .swiper-wrapper {
        height: 100%;
    }

    #eventsVerticalSwiper .swiper-slide {
        height: auto !important;
        display: flex !important;
        align-items: stretch !important;
    }

/* Custom vertical scroll fallback */
.custom-vertical-scroll {
    height: 340px;
    overflow: hidden;
    position: relative;
}

    .custom-vertical-scroll .scroll-content {
        position: relative;
        transition: transform 0.6s ease;
    }

    .custom-vertical-scroll .scroll-item {
        height: 85px;
        margin-bottom: 5px;
        display: block;
    }

/* Event box adjustments for vertical layout */
.event-box {
    height: 80px !important;
    min-height: 80px;
    max-height: 80px;
    display: flex !important;
    align-items: center !important;
    padding: 8px !important;
}

.img-box {
    width: 50px !important;
    height: 50px !important;
    flex-shrink: 0;
}

.event-date {
    width: 50px !important;
    height: 50px !important;
    flex-shrink: 0;
    font-size: 0.8rem;
}

.event-text-box {
    flex: 1;
    min-width: 0;
    padding: 0 8px;
}

    .event-text-box h5 {
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

/* ================================================================
   CUSTOM VERTICAL SCROLL CONTAINER
   ================================================================ */

.custom-scroll-container {
    width: 100% !important;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform;
    position: relative;
}

    .custom-scroll-container .event-carousel-item {
        height: 85px !important;
        margin-bottom: 5px !important;
        transition: all 0.3s ease;
        border-radius: 6px;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        position: relative;
    }

        .custom-scroll-container .event-carousel-item:hover {
            background: rgba(0, 123, 255, 0.03);
            transform: translateX(3px);
        }

        .custom-scroll-container .event-carousel-item.active-event {
            background: rgba(0, 123, 255, 0.05) !important;
            border: 1px solid rgba(0, 123, 255, 0.2) !important;
            border-radius: 8px !important;
            padding-left: 8px !important;
            box-shadow: 0 3px 10px rgba(0, 123, 255, 0.1) !important;
        }

/* ================================================================
   VERTICAL POSITION INDICATORS
   ================================================================ */

.carousel-indicators-vertical {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 20;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.events-carousel-wrapper:hover .carousel-indicators-vertical {
    opacity: 1;
}

.indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

    .indicator-dot::before {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: transparent;
        transition: all 0.3s ease;
    }

    .indicator-dot:hover {
        background: #007bff;
        transform: scale(1.3);
    }

        .indicator-dot:hover::before {
            background: rgba(0, 123, 255, 0.2);
        }

    .indicator-dot.active {
        background: #007bff;
        transform: scale(1.4);
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
    }

        .indicator-dot.active::before {
            background: rgba(0, 123, 255, 0.1);
        }

/* Quick CSS addition for highlighted event */
.event-carousel-item.highlighted-event {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 193, 7, 0.1) 100%) !important;
    border: 2px solid #ffc107 !important;
    transform: scale(1.03) !important;
    box-shadow: 0 5px 20px rgba(255, 193, 7, 0.3) !important;
    animation: highlightPulse 2s ease-in-out;
}

@keyframes highlightPulse {
    0%, 100% {
        transform: scale(1.03);
    }

    50% {
        transform: scale(1.05);
    }
}

/* Upcoming Events */
.upcoming-events {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--box-shadow);
    border-top: 4px solid var(--secondary-color);
    transition: var(--transition);
}

    .upcoming-events:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }

.event-item {
    display: flex;
    margin-bottom: 15px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
    background-color: #fff;
    transition: var(--transition);
}

    .event-item:hover {
        transform: translateX(5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

.event-date {
    background: linear-gradient(135deg, var(--primary-color) 0%, #000099 100%);
    color: white;
    width: 70px;
    text-align: center;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

    .event-date:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
    }

    .event-date .day {
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
        position: relative;
        z-index: 1;
    }

    .event-date .month {
        font-size: 14px;
        text-transform: uppercase;
        position: relative;
        z-index: 1;
    }

.event-info {
    padding: 12px 15px;
    flex: 1;
}

.event-title {
    margin: 0 0 5px;
    font-weight: 600;
    font-size: 16px;
    color: var(--primary-color);
}

.event-location {
    font-size: 13px;
    color: #777;
    margin-bottom: 0;
}

    .event-location i {
        color: var(--secondary-color);
        margin-right: 5px;
    }

/* Photo Popup Modal Styles */
#photoPopupModal .modal-content {
    border: none;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#photoPopupModal .modal-header {
    border-bottom: none;
    padding: 1rem 1.5rem;
}

#photoPopupModal .carousel-item img {
    border-radius: 0;
    transition: transform 0.3s ease;
}

#photoPopupModal .carousel-control-prev,
#photoPopupModal .carousel-control-next {
    width: 5%;
    background: linear-gradient(90deg, rgba(0,0,0,0.1), transparent);
}

#photoPopupModal .carousel-control-next {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1));
}

#photoPopupModal .carousel-indicators {
    margin-bottom: 0.5rem;
}

    #photoPopupModal .carousel-indicators button {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin: 0 4px;
        background-color: rgba(255, 255, 255, 0.5);
        border: 2px solid rgba(255, 255, 255, 0.8);
    }

        #photoPopupModal .carousel-indicators button.active {
            background-color: #fff;
        }

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

    #photoPopupModal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    #photoPopupModal .carousel-item .row {
        flex-direction: column;
    }

    #photoPopupModal .carousel-item .col-md-8,
    #photoPopupModal .carousel-item .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #combinedPopupModal .image-section {
        min-height: 400px !important; /* Increased from 350px */
        max-height: 400px !important;
    }

    #combinedPopupModal .image-container {
        min-height: 350px !important; /* Increased from 250px */
        max-height: 55vh !important; /* Increased from 50vh */
    }

    .carousel-item img,
    #combinedPhotoCarousel .carousel-item,
    #combinedPhotoCarousel .carousel-inner {
        height: auto !important;
        max-height: 350px !important; /* Increased from 280px */
        min-height: 350px !important;
    }

    #combinedPhotoCarousel .popup-carousel-image {
        object-fit: contain !important;
        max-height: 330px !important; /* Increased from 260px */
        height: auto !important;
    }

    #combinedPhotoCarousel {
        height: auto !important;
        min-height: 350px; /* Increased from 250px */
    }
}

/* ================================================================
   MODAL SIZE AND LAYOUT FIXES
   ================================================================ */

/* Adjust modal size for better fit */
#combinedPopupModal .modal-dialog {
    max-width: 90vw !important; /* Reduce width slightly */
    max-height: 95vh !important;
    width: 90vw !important;
    margin: 2.5vh auto !important; /* Reduce margins */
    display: flex !important;
    flex-direction: column !important;
}

/* 3. Fix Modal Content to use flexbox properly */
#combinedPopupModal .modal-content {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    max-height: 95vh !important; /* Use viewport height instead */
    height: auto !important; /* Let content determine height */
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}
/* Remove default Bootstrap borders to avoid conflicts */
#combinedPopupModal .row.g-0 .col-md-6.border-end,
#combinedPopupModal .row.g-0 .col-md-6.border-start {
    border: none !important;
}

/* ================================================================
   IMAGE SECTION - BLUE THEMED BORDER
   ================================================================ */

/* Image section styling */


/* Blue border glow effect */
#combinedPopupModal .image-section::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #007bff, #0056b3, #007bff);
    border-radius: 18px;
    z-index: -1;
    opacity: 0.6 !important; /* Increase opacity for more visibility */
}

#combinedPopupModal .image-section::before {
    /* Glow effect should not interfere with content */
    pointer-events: none !important;
}

/* Image Section Title with Blue Theme */
#combinedPopupModal .image-section .section-divider-title {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    padding: 12px 20px;
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    border-bottom: 2px solid rgba(0, 123, 255, 0.3);
}

/* ================================================================
   FORCE RECALCULATION ON CAROUSEL EVENTS
   ================================================================ */

/* Ensure images are properly sized during carousel transitions */
#combinedPhotoCarousel.carousel.slide .carousel-item-next.carousel-item-start .popup-carousel-image,
#combinedPhotoCarousel.carousel.slide .carousel-item-prev.carousel-item-end .popup-carousel-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ================================================================
   CAROUSEL CONTROLS IMPROVEMENTS
   ================================================================ */

/* Better carousel indicators */
#combinedPopupModal .carousel-indicators {
    margin-bottom: 8px !important;
    position: absolute;
    bottom: 8px;
}

/* 12. Fix carousel controls positioning */
#combinedPhotoCarousel .carousel-control-prev,
#combinedPhotoCarousel .carousel-control-next {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    /* Ensure controls don't affect container sizing */
    height: 100% !important;
    width: 8% !important;
    z-index: 100 !important;
    /* Remove any default margins/padding */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* Fix carousel indicators z-index */
#combinedPhotoCarousel .carousel-indicators {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    /* Ensure indicators don't add to container height */
    margin: 0 !important;
    z-index: 20;
}

    #combinedPhotoCarousel .carousel-indicators button {
        z-index: 51 !important;
        opacity: 0.7;
        transition: all 0.3s ease;
    }

        #combinedPhotoCarousel .carousel-indicators button:hover,
        #combinedPhotoCarousel .carousel-indicators button.active {
            opacity: 1;
            transform: scale(1.2);
        }

/* Fix carousel container height */
#combinedPhotoCarousel {
    height: 100% !important;
    min-height: 500px !important; /* Increased from default */
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: 100%;
    overflow: hidden !important; /* Key fix for extra space */
}

    #combinedPhotoCarousel .carousel-inner {
        height: 100vh !important;
        min-height: 500px !important; /* Increased from default */
        flex-grow: 1 !important;
        width: 100%;
        overflow: hidden !important; /* Prevent overflow space */
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        position: relative;
    }

    #combinedPhotoCarousel .carousel-item {
        height: 100% !important;
        min-height: 500px !important; /* Increased from default */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: hidden !important; /* Key fix */
    }

    /* Force image containers to not have any margins or padding */
    #combinedPhotoCarousel .carousel-item,
    #combinedPhotoCarousel .photo-slide,
    #combinedPhotoCarousel .popup-image-container {
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

        /* 6. Fix carousel transition states to prevent space during slides */
        #combinedPhotoCarousel .carousel-item.active .popup-carousel-image,
        #combinedPhotoCarousel .carousel-item-next .popup-carousel-image,
        #combinedPhotoCarousel .carousel-item-prev .popup-carousel-image {
            max-width: 100% !important;
            max-height: 100% !important;
            width: auto !important;
            height: auto !important;
            object-fit: contain !important;
            margin: 0 auto !important;
        }

    #combinedPhotoCarousel.carousel.slide .carousel-item.active,
    #combinedPhotoCarousel.carousel.slide .carousel-item-next,
    #combinedPhotoCarousel.carousel.slide .carousel-item-prev {
        display: flex !important;
    }

/* Fix for images during Bootstrap carousel transitions */
.carousel-item-next.carousel-item-start,
.carousel-item-prev.carousel-item-end {
    transform: translateX(0) !important;
    /* Ensure no extra height during transitions */
    height: 100% !important;
    overflow: hidden !important;
}

.carousel-item-next:not(.carousel-item-start),
.carousel-item-prev:not(.carousel-item-end) {
}

#combinedPhotoCarousel .photo-slide {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    overflow: hidden !important; /* Prevent extra space */
    /* Remove any padding/margin */
    margin: 0 !important;
    padding: 0 !important;
}

#combinedPhotoCarousel .carousel-item .photo-slide {
    height: 100%;
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 8. Fix click overlay positioning to not add space */
#combinedPhotoCarousel .click-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* Ensure overlay doesn't add to container height */
    height: 100% !important;
    width: 100% !important;
    pointer-events: none;
    z-index: 5;
}

/* 9. Fix "click to view details" positioning */
#combinedPhotoCarousel .click-to-view-details {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    /* Fixed height to prevent layout shifts */
    height: 40px !important;
    /* Ensure it doesn't add to container height */
    z-index: 15;
    pointer-events: none;
    margin: 0 !important;
    /* Prevent any padding from affecting height */
    box-sizing: border-box !important;
}

/* Ensure the image container also uses flex centering */
#combinedPhotoCarousel .popup-image-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    position: relative;
    overflow: hidden !important; /* Critical fix */
    background: transparent !important;
    /* Remove any margins or padding that could cause space */
    margin: 0 !important;
    padding: 0 !important;
}

/* 5. Fix image sizing to prevent extra space */
#combinedPhotoCarousel .popup-carousel-image {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important; /* Let image determine width */
    height: auto !important; /* Let image determine height */
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    /* Remove any margins that could cause space */
    margin: 0 !important;
    padding: 0 !important;
    /* Ensure no extra borders or outlines */
    border: none !important;
    outline: none !important;
    /* Remove box-sizing issues */
    box-sizing: border-box !important;
}

#combinedPopupModal .image-section.no-header {
    min-height: 520px !important; /* Increased from 360px */
    max-height: 75vh !important;
}

/* Alternative fix for images that should maintain aspect ratio */
#combinedPhotoCarousel .popup-carousel-image.maintain-aspect {
    object-fit: contain !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 auto !important;
}

/* For images that should maintain aspect ratio without spaces */
#combinedPhotoCarousel .popup-carousel-image.fit-container {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Only apply flex to active items if needed for centering */
#combinedPhotoCarousel .carousel-item.active .photo-slide,
#combinedPhotoCarousel .carousel-item-next .photo-slide,
#combinedPhotoCarousel .carousel-item-prev .photo-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#combinedPopupModal .events-section {
    min-height: 350px !important; /* Reduce minimum height */
    max-height: none !important; /* Remove maximum height constraint */
    height: auto !important; /* Let content determine height */
    flex: 1 !important; /* Equal distribution */
    display: flex !important;
    flex-direction: column !important;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

#combinedPopupModal .image-section {
    /* Remove flexible height that might cause expansion */
    height: auto !important;
    min-height: 500px !important;
    max-height: 70vh !important;
    overflow: hidden !important; /* Key fix */
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
}

/* Force visibility of both sections */
#combinedPopupModal .image-section,
#combinedPopupModal .events-section {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Remove any transforms that might hide content */
#combinedPopupModal .image-section,
#combinedPopupModal .events-section {
    transform: none !important;
    transition: none !important;
}

    /* Green border glow effect */
    #combinedPopupModal .events-section::before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        background: linear-gradient(45deg, #28a745, #1e7e34, #28a745);
        border-radius: 18px;
        z-index: -1;
        opacity: 0.6 !important; /* Increase opacity for more visibility */
    }

    /* Events Section Title with Green Theme */
    #combinedPopupModal .events-section .section-divider-title {
        background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
        color: white;
        padding: 12px 20px;
        margin: 0;
        font-weight: 600;
        font-size: 1rem;
        text-align: center;
        border-top-left-radius: 9px;
        border-top-right-radius: 9px;
        border-bottom: 2px solid rgba(40, 167, 69, 0.3);
    }

/* Events Header Enhancement */
#combinedPopupModal .events-header {
    padding: 8px 15px !important; /* Reduce padding */
    background: rgba(40, 167, 69, 0.05);
    border-bottom: 1px solid rgba(40, 167, 69, 0.2);
    flex-shrink: 0 !important;
}

/* Compact events list */
#combinedPopupModal .combined-items-list {
    flex-grow: 1 !important;
    overflow-y: auto !important; /* Only this inner list scrolls if needed */
    max-height: none !important; /* Remove fixed constraint */
    padding: 10px 15px !important;
    margin-bottom: 0 !important;
}

/* 5. ENSURE FOOTER IS ALWAYS VISIBLE AND AT BOTTOM */
#combinedPopupModal .events-footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding: 6px 15px !important; /* Reduce padding */
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    min-height: 35px !important; /* Reduce height */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ================================================================
   SECTION TITLE DIVIDERS
   ================================================================ */

.section-divider-title {
    margin: 0;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.photo-section-title {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
}

.events-section-title {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    color: white;
}

.section-divider-title .section-icon {
    font-size: 1.2em;
}

.section-divider-title .badge {
    font-size: 0.75em;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ================================================================
   ENHANCED HOVER EFFECTS
   ================================================================ */

/* Remove transform effects that might interfere */
#combinedPopupModal .image-section:hover,
#combinedPopupModal .events-section:hover {
    transform: none !important;
}

    #combinedPopupModal .image-section:hover::before {
        opacity: 0.8 !important;
        animation: borderGlow 2s ease-in-out infinite alternate;
    }

    #combinedPopupModal .events-section:hover::before {
        opacity: 0.8 !important;
        animation: borderGlow 2s ease-in-out infinite alternate;
    }

/* ================================================================
   ENSURE PROPER IMAGE ASPECT RATIO
   ================================================================ */

/* Better image handling */
#combinedPopupModal .popup-image-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden; /* Prevent any overflow issues */
    background: #f8f9fa;
}

/* Default state: Hide placeholder when image is present and loading */
.popup-image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

    /* Default: Hide placeholder initially */
    .popup-image-container .popup-image-placeholder {
        display: none !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
    }

    /* Show placeholder only when image is hidden via inline style */
    .popup-image-container img[style*="display: none"],
    .popup-image-container img[style*="display:none"] {
        display: none !important;
    }

        /* Show placeholder when previous image sibling has display: none */
        .popup-image-container img[style*="display: none"] + .popup-image-placeholder,
        .popup-image-container img[style*="display:none"] + .popup-image-placeholder {
            display: flex !important;
        }

    /* Alternative approach: Use CSS classes instead of inline styles */
    .popup-image-container.image-failed .popup-image-placeholder {
        display: flex !important;
        /* Ensure placeholders don't create extra space */
        height: 100% !important;
        width: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    .popup-image-container.image-failed img {
        display: none !important;
    }

    /* Ensure successful images are always visible */
    .popup-image-container.image-loaded img {
        display: block !important;
        /* Ensure loaded images fill container properly */
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    .popup-image-container.image-loaded .popup-image-placeholder {
        display: none !important;
    }

    /* Force proper stacking */
    .popup-image-container img {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 100%;
    }

#combinedPopupModal .popup-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/* ================================================================
   MODAL ADJUSTMENTS FOR NEW LAYOUT
   ================================================================ */

/* Adjust modal body padding to accommodate section margins */
#combinedPopupModal .modal-body {
    max-height: none !important; /* Remove restrictive height constraint */
    overflow-y: visible !important; /* Remove forced scrollbar */
    padding: 10px !important; /* Reduce padding to save space */
    display: flex !important;
    flex-direction: column !important;
}

/* Increase gap between Featured Gallery and Latest Updates sections */
#combinedPopupModal .row.g-0 {
    gap: 20px !important; /* Reduce gap to save space */
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    flex: 1 !important; /* Take remaining space */
    min-height: 0 !important; /* Allow shrinking */
}

    /* Force columns to stay side by side */
    #combinedPopupModal .row.g-0 > [class*="col-"] {
        flex: 0 0 calc(45% - 12.5px) !important; /* Each section takes 45% width */
        max-width: calc(45% - 12.5px) !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

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

@media (max-width: 768px) {

    #combinedPhotoCarousel .popup-carousel-image {
        object-fit: cover !important; /* Keep cover for mobile to avoid blank space */
        min-height: 280px !important;
        height: 100% !important;
        max-height: 300px !important; /* Limit height on mobile */
    }

    #combinedPhotoCarousel .photo-slide {
        min-height: 280px !important;
    }

    #combinedPopupModal .modal-dialog {
        max-width: 95vw !important;
        width: 95vw !important;
        margin: 1vh auto !important;
    }

    /* Maintain two-column layout */
    #combinedPopupModal .row.g-0 {
        gap: 10px !important; /* Reduced gap on mobile */
        min-height: 350px !important; /* Reduced for mobile */
    }

        #combinedPopupModal .row.g-0 > [class*="col-"] {
            flex: 0 0 100% !important;
            max-width: 100% !important;
        }

        /* Remove vertical separator on mobile */
        #combinedPopupModal .row.g-0::after {
            display: none !important; /* Remove separator to save space */
        }

    /* Reduce modal padding on mobile */
    #combinedPopupModal .modal-body {
        padding: 10px !important;
    }

    /* Equal width columns */
    #combinedPopupModal .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }


    #combinedPopupModal .events-content {
        max-height: 35vh !important;
        min-height: 200px !important;
    }

    #combinedPopupModal .image-container {
        min-height: 250px !important;
        max-height: 50vh !important;
    }

    /* Adjust section margins for mobile */
    #combinedPopupModal .image-section,
    #combinedPopupModal .events-section {
        min-height: 350px !important; /* Further reduced for mobile */
        max-height: 350px !important;
    }

    /* Smaller images on mobile */
    .carousel-item img,
    #combinedPhotoCarousel .carousel-item,
    #combinedPhotoCarousel .carousel-inner {
        height: auto !important; /* Let images determine height */
        max-height: 280px !important;
        min-height: 280px !important;
    }

    #combinedPhotoCarousel .popup-carousel-image {
        object-fit: contain !important;
        max-height: 260px !important;
        height: auto !important;
    }

    #combinedPhotoCarousel {
        height: auto !important; /* Changed from fixed 280px */
        min-height: 250px;
    }

    /* Compact mobile sections */
    #combinedPopupModal .combined-items-list {
        max-height: 200px !important; /* Further reduced for mobile */
        padding: 8px 10px !important;
    }

    #combinedPopupModal .modal-body {
        padding: 15px !important; /* Reduce padding on mobile */
        max-height: 85vh !important; /* Allow more height on mobile */
    }

    /* Adjust title dividers for mobile */
    .section-divider-title {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 15px;
        font-size: 0.9rem;
    }

        .section-divider-title .badge {
            font-size: 0.7em;
        }

    #combinedPopupModal .events-header {
        padding: 8px 10px !important;
    }

    #combinedPopupModal .events-footer {
        padding: 4px 10px !important; /* More compact on mobile */
        min-height: 30px !important; /* Smaller footer on mobile */
    }

    #combinedPopupModal .section-divider-title {
        padding: 4px 10px !important;
        font-size: 0.85rem !important;
    }
}

@media (max-width: 576px) {

    #combinedPhotoCarousel .popup-carousel-image {
        min-height: 250px !important;
        height: 100% !important;
    }

    #combinedPopupModal .section-divider-title {
        font-size: 1rem !important;
        padding: 12px 15px !important;
    }

        #combinedPopupModal .section-divider-title .badge {
            font-size: 0.75em !important;
            padding: 4px 8px !important;
        }

    #combinedPopupModal .row.g-0 {
        gap: 25px !important;
    }

    #combinedPopupModal .image-section {
        min-height: 350px !important; /* Increased from 320px */
        max-height: 350px !important;
    }

    #combinedPopupModal .events-section {
        min-height: 320px !important;
        max-height: 320px !important;
    }

    #combinedPopupModal .image-container {
        max-height: 35vh !important; /* Increased from 30vh */
        min-height: 280px !important; /* Increased from 180px */
    }

    #combinedPopupModal .events-content {
        max-height: 30vh !important;
        min-height: 180px !important;
    }

    /* Smaller images */
    .carousel-item img,
    #combinedPhotoCarousel .carousel-item,
    #combinedPhotoCarousel .carousel-inner {
        height: 280px !important; /* Increased from 210px */
    }

    #combinedPopupModal .combined-items-list {
        max-height: 180px !important;
        padding: 6px 8px !important;
    }

    #combinedPopupModal .events-footer {
        padding: 5px 8px !important;
        min-height: 35px !important;
    }

        #combinedPopupModal .events-footer .btn {
            font-size: 0.75rem !important; /* Smaller buttons */
            padding: 4px 8px !important;
        }

    #combinedPhotoCarousel {
        height: 280px !important;
    }

    .section-divider-title {
        padding: 8px 12px;
        font-size: 0.85rem;
    }
}

/* 16. Force remove any remaining spacing issues */
#combinedPhotoCarousel * {
    /* Reset any inherited spacing */
    box-sizing: border-box !important;
}

/* 17. Hide placeholders properly to prevent space */
#combinedPhotoCarousel .popup-image-placeholder {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* Ensure placeholder doesn't add height when hidden */
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ================================================================
   ACCESSIBILITY ENHANCEMENTS
   ================================================================ */

/* Focus states for better accessibility */
#combinedPopupModal .image-section:focus-within,
#combinedPopupModal .events-section:focus-within {
    outline: 4px solid rgba(0, 123, 255, 0.6) !important;
    outline-offset: 3px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    #combinedPopupModal .image-section {
        border-color: #000 !important;
        border-width: 4px !important;
    }

    #combinedPopupModal .events-section {
        border-color: #000 !important;
        border-width: 4px !important;
    }

    #combinedPopupModal .section-divider-title {
        background: #000 !important;
        color: #fff !important;
    }

    #combinedPopupModal .row.g-0::after {
        background: #000 !important;
        width: 5px !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #combinedPopupModal .image-section,
    #combinedPopupModal .events-section {
        transition: none !important;
        transform: none !important;
    }

        #combinedPopupModal .image-section::before,
        #combinedPopupModal .events-section::before {
            display: none !important;
            animation: none !important;
        }

    @keyframes borderGlow {
        0%, 100% {
            opacity: 0.6;
            transform: none;
        }
    }
}

/* ================================================================
   COMPACT SECTION HEADERS
   ================================================================ */

/* Compact section title dividers */
#combinedPopupModal .section-divider-title {
    padding: 6px 15px !important; /* Reduce padding */
    font-size: 0.9rem !important; /* Slightly smaller */
    font-weight: 600 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Specific title styling */
#combinedPopupModal .photo-section-title {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    color: white !important;
    border-radius: 15px 15px 0 0 !important;
}

#combinedPopupModal .events-section-title {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
    color: white !important;
    border-radius: 15px 15px 0 0 !important;
}

#combinedPopupModal .section-divider-title .badge {
    font-size: 0.8em !important;
    padding: 6px 10px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 15px !important;
}

/* ================================================================
   VISUAL SEPARATOR ENHANCEMENTS
   ================================================================ */

/* Add a visual separator line between sections */
#combinedPopupModal .row.g-0::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 8%; /* Adjusted for proportional spacing */
    bottom: 8%; /* Adjusted for proportional spacing */
    width: 4px; /* Slightly thicker separator */
    background: linear-gradient(to bottom, transparent, rgba(108, 117, 125, 0.3), rgba(108, 117, 125, 0.7), /* Slightly more opaque */
    rgba(108, 117, 125, 0.3), transparent );
    border-radius: 2px;
    transform: translateX(-50%);
    z-index: 5;
    box-shadow: 0 0 15px rgba(108, 117, 125, 0.25); /* Enhanced shadow */
}

/* ================================================================
   IMAGE SECTION IMPROVEMENTS
   ================================================================ */

/* Compact image container */
#combinedPopupModal .image-container {
    flex-grow: 1 !important;
    overflow: hidden !important;
    height: auto !important; /* Remove fixed height */
    min-height: 500px !important; /* Minimum for usability */
    max-height: 70vh !important; /* Use viewport-relative maximum */
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    position: relative !important;
    background: #f8f9fa;
}

/* Better image display without zoom */
#combinedPopupModal .popup-carousel-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* Contain to prevent cropping */
    object-position: center !important;
    background: #f8f9fa;
    display: block !important;
}

    /* Alternative approach: Smart object-fit based on image orientation */
    #combinedPopupModal .popup-carousel-image.landscape {
        object-fit: cover !important;
    }

    #combinedPopupModal .popup-carousel-image.portrait {
        object-fit: contain !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* Remove any conflicting cover styles */
    #combinedPopupModal .popup-carousel-image.fill-container {
        object-fit: contain !important; /* Change from cover to contain */
    }

/* Image placeholder improvements */
#combinedPopupModal .popup-image-placeholder {
    background: #f8f9fa;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* ================================================================
   IMPROVE IMAGE CAPTION VISIBILITY
   ================================================================ */

/* Better caption styling - always visible */
#combinedPopupModal .photo-caption-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.75) !important; /* Stronger background */
    color: white;
    padding: 12px 15px !important;
    transform: none !important; /* Always visible */
    opacity: 1 !important; /* Always visible */
}

    #combinedPopupModal .photo-caption-overlay h6 {
        color: #fff !important;
        font-size: 0.95rem;
        margin-bottom: 4px !important;
        font-weight: 600;
    }

    #combinedPopupModal .photo-caption-overlay p {
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 0.8rem;
        margin-bottom: 0 !important;
        line-height: 1.3;
    }

#combinedPopupModal .website-link-info {
    margin-top: 8px;
}

    #combinedPopupModal .website-link-info small {
        color: #ffc107 !important;
        font-weight: 500;
    }

/* ================================================================
   ADDITIONAL VISUAL ENHANCEMENTS
   ================================================================ */
/* Add subtle animation for section borders */
#combinedPopupModal .image-section::before,
#combinedPopupModal .events-section::before {
    animation: borderGlowEnhanced 3s ease-in-out infinite alternate;
}

/* Add subtle inner borders for extra definition */
#combinedPopupModal .events-content {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important; /* Remove fixed height */
    max-height: 60vh !important; /* Use viewport-relative maximum */
    overflow: hidden !important; /* Prevent individual section overflow */
}

/* Compact event items */
#combinedPopupModal .combined-item-container {
    margin-bottom: 4px;
    padding-bottom: 4px;
    padding-left: 0px; /* Default padding */
    border-bottom: 1px solid rgba(40, 167, 69, 0.15);
    border-left: 4px solid transparent; /* Default transparent border */
    border-radius: 0; /* Default border radius */
    background: transparent; /* Default background */
    transform: translateX(0px); /* Default position */
    box-shadow: none; /* Default shadow */
    /* ADD TRANSITION TO BASE STATE - This is the key fix */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
}

    /* Enhanced hover effects for larger sections */
    #combinedPopupModal .combined-item-container:hover {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.08) 0%, rgba(255, 255, 255, 1) 100%);
        border-left: 4px solid #28a745;
        padding-left: 20px;
        border-radius: 0 10px 10px 0;
        transform: translateX(3px);
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15);
        /* Remove transition from hover state */
    }

    /* Section separator line */
    #combinedPopupModal .combined-item-container::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(40, 167, 69, 0.4), transparent);
    }

/* ================================================================
   DATE STYLING FOR COMBINED ITEMS
   ================================================================ */

.item-date-combined {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    border-radius: 6px;
    padding: 8px 12px;
    text-align: center;
    min-width: 60px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .item-date-combined .day {
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
    }

    .item-date-combined .month {
        font-size: 10px;
        text-transform: uppercase;
        margin-top: 2px;
    }

/* Force clickable links to be on top */
.popup-image-link {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
}

    /* Allow carousel controls to be clickable through the image link */
    .popup-image-link:before {
        content: '';
        position: absolute;
        top: 0;
        left: 8%; /* Match carousel control width */
        right: 8%; /* Match carousel control width */
        bottom: 0;
        z-index: 5;
        pointer-events: none; /* This allows clicking through to carousel controls */
    }

    /* Ensure images inside links are clickable */
    .popup-image-link img,
    .popup-image-link .popup-image-container {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

#combinedPhotoCarousel .popup-image-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    position: relative;
    text-decoration: none;
    /* Remove any default link spacing */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
}

/* Fix carousel control z-index to appear above clickable image links */
#combinedPhotoCarousel .carousel-control-prev,
#combinedPhotoCarousel .carousel-control-next {
    z-index: 100 !important; /* Increased from 5 to 100 */
    width: 8% !important;
    background: none;
    opacity: 0.8;
    transition: all 0.3s ease;
}

    #combinedPhotoCarousel .carousel-control-prev:hover,
    #combinedPhotoCarousel .carousel-control-next:hover {
        opacity: 1;
        z-index: 101 !important;
    }

/* Ensure carousel control icons are visible */
#combinedPhotoCarousel .carousel-control-prev-icon,
#combinedPhotoCarousel .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    padding: 15px;
    transition: all 0.3s ease;
}

/* 13. Remove any Bootstrap default spacing */
#combinedPhotoCarousel .carousel-control-prev-icon,
#combinedPhotoCarousel .carousel-control-next-icon {
    /* Remove default icon spacing */
    margin: 0 !important;
}

#combinedPhotoCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#combinedPhotoCarousel .carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(0, 123, 255, 0.8);
    transform: scale(1.1);
}
/* ================================================================
   GLOW ANIMATION
   ================================================================ */

@keyframes borderGlowEnhanced {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }

    100% {
        opacity: 0.9;
        transform: scale(1.01);
    }
}

@keyframes borderGlow {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }

    100% {
        opacity: 0.9;
        transform: scale(1.02);
    }
}

.popup-image-container img:not([style*="display: none"]) + .popup-image-placeholder {
    display: none !important;
}

/* Ensure placeholder is positioned correctly */
.popup-image-placeholder {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

/* ================================================================
   RESPONSIVE FIXES
   ================================================================ */

@media (max-width: 768px) {
    .popup-image-container .popup-image-placeholder i {
        font-size: 2rem !important;
    }

    .popup-image-container .popup-image-placeholder p {
        font-size: 0.85rem !important;
    }
}

/* ================================================================
   HIGH CONTRAST AND ACCESSIBILITY
   ================================================================ */

@media (prefers-contrast: high) {
    .popup-image-placeholder {
        background: #ffffff;
        border: 2px solid #000000;
    }

        .popup-image-placeholder .text-muted {
            color: #333333 !important;
        }
}

/* ================================================================
   LOADING STATE IMPROVEMENTS  
   ================================================================ */

.popup-image-container.loading .popup-image-placeholder {
    display: flex !important;
    /* Ensure placeholders don't create extra space */
    height: 100% !important;
    width: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.popup-image-container.loading img {
    opacity: 0.5;
}

/* ================================================================
   CLICK TO VIEW DETAILS STYLING
   ================================================================ */

/* Click to View Details text for images with website links */
.click-to-view-details {
    background: linear-gradient(0deg, rgba(0,123,255,0.9) 0%, rgba(0,123,255,0.7) 100%);
    color: white;
    text-align: center;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border-radius: 0;
    backdrop-filter: blur(2px);
    box-shadow: 0 -2px 8px rgba(0,123,255,0.3);
    z-index: 15;
    pointer-events: none; /* Prevent blocking carousel controls */
}

    .click-to-view-details small {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-weight: 600;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }

    .click-to-view-details i {
        font-size: 1em;
        color: #ffc107;
        animation: pulse-click-icon 2s infinite;
    }

/* Hover effect for the entire clickable area */
.popup-image-link:hover .click-to-view-details {
    background: linear-gradient(0deg, rgba(0,123,255,1) 0%, rgba(0,123,255,0.8) 100%);
    box-shadow: 0 -4px 12px rgba(0,123,255,0.4);
    transform: translateY(-2px);
}

    .popup-image-link:hover .click-to-view-details i {
        color: #fff;
        transform: scale(1.1);
    }

/* Animation for the click icon */
@keyframes pulse-click-icon {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Adjust photo caption position when click text is present */
.photo-caption-overlay {
    /* Default bottom position */
    bottom: 0;
}

/* When there's a click-to-view-details element, move caption up */
.popup-image-link .photo-caption-overlay {
    bottom: 40px !important; /* Move caption above the click text */
}

/* ================================================================
   RESPONSIVE DESIGN FOR CLICK TO VIEW DETAILS
   ================================================================ */

@media (max-width: 768px) {
    .click-to-view-details {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

        .click-to-view-details small {
            gap: 4px;
        }

    /* Adjust caption position for mobile */
    .popup-image-link .photo-caption-overlay {
        bottom: 35px !important;
    }

    #combinedPopupModal .image-section.no-header {
        min-width: 100%
    }
}

@media (max-width: 576px) {
    .click-to-view-details {
        padding: 5px 8px;
        font-size: 0.75rem;
    }

        .click-to-view-details i {
            font-size: 0.9em;
        }

    /* Adjust caption position for small mobile */
    .popup-image-link .photo-caption-overlay {
        bottom: 32px !important;
    }

    #combinedPopupModal .image-section.no-header {
        min-width: 100%
    }
}

/* ================================================================
   ACCESSIBILITY AND HIGH CONTRAST SUPPORT
   ================================================================ */

@media (prefers-contrast: high) {
    .click-to-view-details {
        background: #0056b3 !important;
        border: 2px solid #fff;
        color: #fff !important;
    }

        .click-to-view-details i {
            color: #ffc107 !important;
        }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .click-to-view-details,
    .click-to-view-details i {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* Focus state for accessibility */
.popup-image-link:focus .click-to-view-details,
.popup-image-link:focus-visible .click-to-view-details {
    outline: 3px solid rgba(255, 255, 255, 0.8);
    outline-offset: -3px;
}

/* Add to your CSS file */

/* When header is removed, adjust section heights */
#combinedPopupModal .image-section.no-header,
#combinedPopupModal .events-section.no-header {
    min-height: 360px !important;
    max-height: 360px !important;
    width: 100%;
}

    #combinedPopupModal .image-section.no-header .image-container {
        height: 520px !important; /* Increased from 360px */
        min-height: 520px !important;
        max-height: 75vh !important;
    }

    #combinedPopupModal .image-section.no-header .popup-carousel-image {
        max-height: 360px !important;
        height: auto !important; /* Let image maintain its aspect ratio */
        object-fit: contain !important; /* Ensure full image visibility */
    }

    /* Alternative: use object-fit: contain but center the image */
    #combinedPopupModal .image-section.no-header .popup-image-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f8f9fa;
    }


/* to remove popup modal zoom */
#combinedPopupModal .carousel-item img,
#combinedPopupModal .popup-carousel-image {
    transform: none !important;
    transition: opacity 0.3s ease !important;
}

/* ================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================ */

/* Large screens */
@media (min-width: 1200px) {
    #combinedPopupModal .modal-dialog {
        max-width: 1100px !important;
        width: 1100px !important;
    }

    #combinedPopupModal .image-container {
        max-height: 75vh !important; /* Increased from 70vh */
        min-height: 550px !important;
    }

    #combinedPhotoCarousel,
    #combinedPhotoCarousel .carousel-inner,
    #combinedPhotoCarousel .carousel-item {
        min-height: 550px !important;
    }

    #combinedPopupModal .events-content {
        max-height: 70vh !important;
    }
}

/* Medium screens */
@media (max-width: 991px) {
    #combinedPopupModal .row.g-0 {
        flex-direction: column !important;
        gap: 15px !important;
    }

        #combinedPopupModal .row.g-0 > [class*="col-"] {
            flex: none !important;
            max-width: 100% !important;
        }

    #combinedPopupModal .image-container {
        max-height: 50vh !important; /* Increased from 40vh */
        min-height: 350px !important; /* Increased from 250px */
    }

    #combinedPopupModal .events-content {
        max-height: 40vh !important;
        min-height: 250px !important;
    }

    #combinedPhotoCarousel,
    #combinedPhotoCarousel .carousel-inner,
    #combinedPhotoCarousel .carousel-item {
        min-height: 350px !important;
    }
}

/* Hide image transitions during carousel shifts */
#combinedPhotoCarousel .carousel-item {
    transition: transform 0.6s ease-in-out !important;
}

    /* Hide image scaling during transitions */
    #combinedPhotoCarousel .carousel-item:not(.active) .popup-carousel-image {
        opacity: 0 !important;
        transition: opacity 0.1s ease !important;
    }

    #combinedPhotoCarousel .carousel-item.active .popup-carousel-image {
        opacity: 1 !important;
        transition: opacity 0.3s ease 0.3s !important; /* Delay opacity until after slide transition */
    }

/* Smooth transition for carousel items */
#combinedPhotoCarousel.carousel.slide .carousel-item-next,
#combinedPhotoCarousel.carousel.slide .carousel-item-prev {
    display: block !important;
}

    #combinedPhotoCarousel.carousel.slide .carousel-item-next.carousel-item-start,
    #combinedPhotoCarousel.carousel.slide .carousel-item-prev.carousel-item-end {
        transform: translateX(0) !important;
    }

/* Ensure images are pre-sized */
#combinedPhotoCarousel .popup-carousel-image {
    transform: none !important;
    transition: opacity 0.3s ease !important; /* Only transition opacity, not size */
}

/* Prevent placeholders from showing during active carousel transitions */
#combinedPhotoCarousel.carousel.slide .popup-image-placeholder {
    display: none !important;
}

/* Only show placeholders for truly failed images, not during transitions */
.popup-image-container.image-failed:not(.transitioning) .popup-image-placeholder {
    display: flex !important;
}

.popup-image-container.image-failed:not(.transitioning) img {
    display: none !important;
}

/* Ensure images stay visible during transitions */
#combinedPhotoCarousel .carousel-item .popup-carousel-image {
    display: block !important;
    opacity: 1 !important;
}

/* Hide placeholders by default during any carousel activity */
#combinedPhotoCarousel.carousel .popup-image-placeholder {
    display: none !important;
}

/* Only show placeholder when explicitly needed and not transitioning */
.popup-image-container.image-failed.static-state .popup-image-placeholder {
    display: flex !important;
}

/* Ensure smooth transitions without showing placeholders */
#combinedPhotoCarousel .carousel-item-next .popup-carousel-image,
#combinedPhotoCarousel .carousel-item-prev .popup-carousel-image,
#combinedPhotoCarousel .carousel-item.active .popup-carousel-image {
    display: block !important;
    opacity: 1 !important;
}

/* Never show placeholders during Bootstrap carousel transitions */
#combinedPhotoCarousel .carousel-item-next .popup-image-placeholder,
#combinedPhotoCarousel .carousel-item-prev .popup-image-placeholder,
#combinedPhotoCarousel .carousel-item.active .popup-image-placeholder {
    display: none !important;
}

/* Video Container Styles */

/* Make video fill the 500px container properly */
/* Video Container Styles */

/* ================================================================
   RESPONSIVE TYPEWRITER EFFECT STYLES
   ================================================================ */

/* Base Typewriter Container */
.typewriter-container {
    overflow: hidden;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%; /* Changed from 100% for better mobile margins */
    max-width: 1200px; /* Add max-width for large screens */
    color: yellow;
    font-size: 2rem;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.0);
    z-index: 100;
    pointer-events: none;
    transition: all 0.3s ease; /* Smooth transitions for size changes */
}

    /* Loading State */
    .typewriter-container.loading {
        opacity: 0.6;
        position: relative;
    }

        .typewriter-container.loading::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30px;
            height: 30px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top-color: #ffc107;
            border-radius: 50%;
            animation: typewriter-spin 1s linear infinite;
            z-index: 1000;
        }

.typewriter-text {
    overflow: visible !important;
    border-right: .15em solid orange;
    white-space: normal !important;
    margin: 0 auto;
    font-family: 'monospace', sans-serif;
    display: inline-block;
    max-width: 100%; /* Prevent overflow */
}

@keyframes typewriter-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Ready State */
.typewriter-container.ready {
    opacity: 1;
}

    .typewriter-container.ready::before {
        display: none;
    }

/* Error State */
.typewriter-container.error {
    opacity: 0.3;
}

    .typewriter-container.error::after {
        content: '⚠️ Typewriter failed to load';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #dc3545;
        font-size: 0.9rem;
        background: rgba(0, 0, 0, 0.7);
        padding: 10px 15px;
        border-radius: 5px;
        white-space: nowrap;
        z-index: 1000;
    }

/* Animations */
@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink-caret {
    from, to {
        border-color: transparent
    }

    50% {
        border-color: orange
    }
}

/* ================================================================
   IMAGE TYPEWRITER EFFECT STYLES
   ================================================================ */

/* Typewriter container for images - same styling as videos */
.carousel-item[data-is-video="false"] .typewriter-container {
    overflow: hidden;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 1200px;
    color: yellow;
    font-size: 2rem;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.0);
    z-index: 100;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Image typewriter text */
.carousel-item[data-is-video="false"] .typewriter-text {
    overflow: visible !important;
    border-right: .15em solid orange;
    white-space: normal !important;
    margin: 0 auto;
    font-family: 'monospace', sans-serif;
    display: inline-block;
    max-width: 100%;
}

/* Loading state for image typewriter */
.carousel-item[data-is-video="false"] .typewriter-container.loading {
    opacity: 0.6;
    position: relative;
}

    .carousel-item[data-is-video="false"] .typewriter-container.loading::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30px;
        height: 30px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-top-color: #ffc107;
        border-radius: 50%;
        animation: typewriter-spin 1s linear infinite;
        z-index: 1000;
    }

/* Ready state for image typewriter */
.carousel-item[data-is-video="false"] .typewriter-container.ready {
    opacity: 1;
}

    .carousel-item[data-is-video="false"] .typewriter-container.ready::before {
        display: none;
    }

/* Error state for image typewriter */
.carousel-item[data-is-video="false"] .typewriter-container.error {
    opacity: 0.3;
}

    .carousel-item[data-is-video="false"] .typewriter-container.error::after {
        content: '⚠️ Typewriter failed to load';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #dc3545;
        font-size: 0.9rem;
        background: rgba(0, 0, 0, 0.7);
        padding: 10px 15px;
        border-radius: 5px;
        white-space: nowrap;
        z-index: 1000;
    }

/* ================================================================
   RESPONSIVE ADJUSTMENTS FOR IMAGE TYPEWRITER
   ================================================================ */

/* Tablets (768px - 991px) */
@media (max-width: 991px) {
    .carousel-item[data-is-video="false"] .typewriter-container {
        font-size: 1.5rem;
        padding: 15px;
        width: 90%;
        top: 50%;
    }

        .carousel-item[data-is-video="false"] .typewriter-container.loading::before {
            width: 25px;
            height: 25px;
            border-width: 2.5px;
        }

    .carousel-item[data-is-video="false"] .typewriter-text {
        letter-spacing: .10em;
        border-right-width: .12em;
    }
}

/* Mobile Landscape and Small Tablets (576px - 767px) */
@media (max-width: 767px) {
    .carousel-item[data-is-video="false"] .typewriter-container {
        font-size: 1.2rem;
        padding: 12px 15px;
        width: 92%;
        border-radius: 6px;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .carousel-item[data-is-video="false"] .typewriter-text {
        letter-spacing: .08em;
        border-right-width: .10em;
        line-height: 1.3;
    }
}

/* Mobile Portrait - Standard (481px - 575px) */
@media (max-width: 575px) {
    .carousel-item[data-is-video="false"] .typewriter-container {
        font-size: 1rem;
        padding: 10px 12px;
        width: 94%;
        border-radius: 5px;
        top: 50%;
    }

    .carousel-item[data-is-video="false"] .typewriter-text {
        letter-spacing: .06em;
        border-right-width: .08em;
        line-height: 1.4;
    }
}

/* Small Mobile Devices (361px - 480px) */
@media (max-width: 480px) {
    .carousel-item[data-is-video="false"] .typewriter-container {
        font-size: 0.9rem;
        padding: 8px 10px;
        width: 95%;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.35);
    }

    .carousel-item[data-is-video="false"] .typewriter-text {
        letter-spacing: .05em;
        border-right-width: .08em;
        line-height: 1.5;
        font-size: 0.95rem;
    }
}

/* Very Small Mobile Devices (320px - 360px) */
@media (max-width: 360px) {
    .carousel-item[data-is-video="false"] .typewriter-container {
        font-size: 0.75rem;
        padding: 6px 8px;
        width: 96%;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.4);
        top: 48%;
    }

    .carousel-item[data-is-video="false"] .typewriter-text {
        letter-spacing: .04em;
        border-right-width: .06em;
        line-height: 1.6;
        word-break: break-word;
        white-space: normal;
        max-width: 100%;
    }
}

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */

/* Large Tablets and Small Desktops (992px - 1199px) */
@media (max-width: 1199px) {
    .typewriter-container {
        font-size: 1.8rem;
        padding: 18px;
        width: 90%;
    }

    .typewriter-text {
        letter-spacing: .12em;
    }
}

/* Tablets (768px - 991px) */
@media (max-width: 991px) {
    .typewriter-container {
        font-size: 1.5rem;
        padding: 15px;
        width: 90%;
        top: 50%; /* Adjust vertical position */
    }

        .typewriter-container.loading::before {
            width: 25px;
            height: 25px;
            border-width: 2.5px;
        }

        .typewriter-container.error::after {
            font-size: 0.85rem;
            padding: 9px 13px;
        }

    .typewriter-text {
        letter-spacing: .10em;
        border-right-width: .12em;
    }
}

/* Mobile Landscape and Small Tablets (576px - 767px) */
@media (max-width: 767px) {
    .typewriter-container {
        font-size: 1.2rem;
        padding: 12px 15px;
        width: 92%;
        border-radius: 6px;
        background-color: rgba(0, 0, 0, 0.3); /* Slightly more opaque for readability */
    }

    .typewriter-text {
        letter-spacing: .08em;
        border-right-width: .10em;
        line-height: 1.3; /* Add line height for better readability */
    }
}

/* Mobile Portrait - Standard (481px - 575px) */
@media (max-width: 575px) {
    .typewriter-container {
        font-size: 1rem;
        padding: 10px 12px;
        width: 94%;
        border-radius: 5px;
        top: 50%;
    }

        .typewriter-container.loading::before {
            width: 20px;
            height: 20px;
            border-width: 2px;
        }

        .typewriter-container.error::after {
            font-size: 0.75rem;
            padding: 8px 12px;
        }

    .typewriter-text {
        letter-spacing: .06em;
        border-right-width: .08em;
        line-height: 1.4;
    }
}

/* Small Mobile Devices - Pixel 7, iPhone SE (361px - 480px) */
@media (max-width: 480px) {
    .typewriter-container {
        font-size: 0.9rem;
        padding: 8px 10px;
        width: 95%;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.35);
    }

    .typewriter-text {
        letter-spacing: .05em;
        border-right-width: .08em;
        line-height: 1.5;
        font-size: 0.95rem; /* Slightly adjust for readability */
    }
}

/* Very Small Mobile Devices (320px - 360px) */
@media (max-width: 360px) {
    .typewriter-container {
        font-size: 0.75rem;
        padding: 6px 8px;
        width: 96%;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.4);
        top: 48%;
    }

        .typewriter-container.loading::before {
            width: 18px;
            height: 18px;
            border-width: 2px;
        }

        .typewriter-container.error::after {
            font-size: 0.7rem;
            padding: 6px 10px;
            max-width: 90%;
            text-align: center;
        }

    .typewriter-text {
        letter-spacing: .04em;
        border-right-width: .06em;
        line-height: 1.6;
        word-break: break-word; /* Allow text to wrap if absolutely necessary */
        white-space: normal; /* Override nowrap for very small screens if needed */
        max-width: 100%;
    }
}

/* ================================================================
   LANDSCAPE ORIENTATION ADJUSTMENTS FOR IMAGE TYPEWRITER
   ================================================================ */

/* Mobile Landscape Mode */
@media (max-width: 767px) and (orientation: landscape) {
    .carousel-item[data-is-video="false"] .typewriter-container {
        font-size: 0.9rem;
        padding: 8px 12px;
        top: 45%;
        width: 80%;
    }

    .carousel-item[data-is-video="false"] .typewriter-text {
        letter-spacing: .05em;
        line-height: 1.3;
    }
}

/* Very Small Mobile Landscape */
@media (max-width: 480px) and (orientation: landscape) {
    .carousel-item[data-is-video="false"] .typewriter-container {
        font-size: 0.75rem;
        padding: 6px 10px;
        top: 42%;
        width: 75%;
    }

    .carousel-item[data-is-video="false"] .typewriter-text {
        letter-spacing: .04em;
        line-height: 1.2;
    }
}

/* ================================================================
   HIGH CONTRAST AND REDUCED MOTION FOR IMAGE TYPEWRITER
   ================================================================ */

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .carousel-item[data-is-video="false"] .typewriter-container {
        background-color: rgba(0, 0, 0, 0.8);
        border: 2px solid yellow;
    }

    .carousel-item[data-is-video="false"] .typewriter-text {
        color: yellow;
        border-right-color: orange;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .carousel-item[data-is-video="false"] .typewriter-text {
        animation: none;
        border-right: none;
        white-space: normal;
        width: auto !important;
    }

    .carousel-item[data-is-video="false"] .typewriter-container.loading::before {
        animation: none;
        border-color: #ffc107;
        border-top-color: #ffc107;
    }
}

/* ================================================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   ================================================================ */

/* Mobile Landscape Mode */
@media (max-width: 767px) and (orientation: landscape) {
    .typewriter-container {
        font-size: 0.9rem;
        padding: 8px 12px;
        top: 45%; /* Adjust position for landscape */
        width: 80%; /* Reduce width in landscape */
    }

    .typewriter-text {
        letter-spacing: .05em;
        line-height: 1.3;
    }
}

/* Very Small Mobile Landscape */
@media (max-width: 480px) and (orientation: landscape) {
    .typewriter-container {
        font-size: 0.75rem;
        padding: 6px 10px;
        top: 42%;
        width: 75%;
    }

    .typewriter-text {
        letter-spacing: .04em;
        line-height: 1.2;
    }
}

/* ================================================================
   ACCESSIBILITY & HIGH CONTRAST MODE
   ================================================================ */

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .typewriter-container {
        background-color: rgba(0, 0, 0, 0.8);
        border: 2px solid yellow;
    }

        .typewriter-container.loading::before {
            border-color: #fff;
            border-top-color: #ffc107;
            border-width: 4px;
        }

        .typewriter-container.error {
            opacity: 0.5;
        }

            .typewriter-container.error::after {
                background: rgba(0, 0, 0, 0.95);
                border: 2px solid #dc3545;
                color: #fff;
            }

    .typewriter-text {
        color: yellow;
        border-right-color: orange;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .typewriter-text {
        animation: none;
        border-right: none;
        white-space: normal;
        width: auto !important;
    }

    .typewriter-container.loading::before {
        animation: none;
        border-color: #ffc107;
        border-top-color: #ffc107;
    }
}

/* ================================================================
   SPECIFIC DEVICE TARGETING
   ================================================================ */

/* Google Pixel 7 (412px × 915px) */
@media only screen and (min-device-width: 412px) and (max-device-width: 412px) and (min-device-height: 915px) and (max-device-height: 915px) {
    .typewriter-container {
        font-size: 0.95rem;
        padding: 10px 12px;
        width: 94%;
        top: 50%;
    }

    .typewriter-text {
        letter-spacing: .05em;
        line-height: 1.4;
    }
}

/* iPhone SE (375px × 667px) */
@media only screen and (min-device-width: 375px) and (max-device-width: 375px) and (min-device-height: 667px) and (max-device-height: 667px) {
    .typewriter-container {
        font-size: 0.9rem;
        padding: 9px 11px;
        width: 94%;
    }

    .typewriter-text {
        letter-spacing: .05em;
        line-height: 1.4;
    }
}

/* iPhone 12/13/14 Pro (390px × 844px) */
@media only screen and (min-device-width: 390px) and (max-device-width: 390px) and (min-device-height: 844px) and (max-device-height: 844px) {
    .typewriter-container {
        font-size: 0.95rem;
        padding: 10px 12px;
        width: 93%;
    }

    .typewriter-text {
        letter-spacing: .05em;
        line-height: 1.4;
    }
}

/* Samsung Galaxy S21/S22 (360px × 800px) */
@media only screen and (min-device-width: 360px) and (max-device-width: 360px) and (min-device-height: 800px) and (max-device-height: 800px) {
    .typewriter-container {
        font-size: 0.85rem;
        padding: 8px 10px;
        width: 95%;
    }

    .typewriter-text {
        letter-spacing: .04em;
        line-height: 1.5;
    }
}

@media print {
    .typewriter-container.loading::before,
    .typewriter-container.error::after {
        display: none !important;
    }

    .typewriter-container {
        opacity: 1 !important;
    }
}

/* ================================================================
   FALLBACK FOR VERY LONG TEXT
   ================================================================ */

/* If text is too long, allow wrapping on smallest screens */
@media (max-width: 320px) {
    .typewriter-text {
        white-space: normal;
        word-break: break-word;
        border-right: none;
        animation: none;
    }

    .typewriter-container {
        height: auto;
        min-height: 60px;
    }
}



/* Fix for main-content overlay blocking text selection */
.main-content:before {
    pointer-events: none !important;
}

.notices-events-merged-box {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 20px;
    height: 100%;
}

.events-section-compact .events-header h3,
.notices-section-compact .notices-header h3 {
    font-size: 1.2rem; /* Reduced from 1.3rem */
    margin-bottom: 12px; /* Reduced from 15px */
    color: #333;
}

/* Reduce spacing around badges */
.events-section-compact .events-header,
.notices-section-compact .notices-header {
    margin-bottom: 12px; /* Add this to reduce spacing */
}

/* Adjust button spacing */
.events-section-compact .text-center.mt-2,
.notices-section-compact .text-center.mt-2 {
    margin-top: 10px !important; /* Reduced from default */
}

.vertical-auto-scroll-container-compact {
    max-height: 250px !important; /* Reduced from 300px */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

    .vertical-auto-scroll-container-compact::-webkit-scrollbar {
        width: 6px;
    }

    .vertical-auto-scroll-container-compact::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }


    .vertical-auto-scroll-container-compact::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

.notice-categories-container-compact {
    max-height: 360px !important; /* Reduced from 300px */
    overflow-y: scroll;
    overflow-x: hidden !important; /* Explicitly hide horizontal scroll */
    padding-top: 4px;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
    width: 100%; /* Ensure it doesn't exceed parent width */
}

    .notice-categories-container-compact::-webkit-scrollbar {
        width: 6px;
    }

    .notice-categories-container-compact::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .notice-categories-container-compact::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .vertical-auto-scroll-container-compact,
    .notice-categories-container-compact {
        max-height: 220px !important; /* Slightly reduced for mobile */
    }

    .notices-events-merged-box {
        padding: 12px; /* Further reduced padding on mobile */
    }

    .notice-categories-container-compact .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .notice-categories-container-compact .col-md-4,
    .notice-categories-container-compact .col-6 {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }
}

@media (max-width: 576px) {
    .vertical-auto-scroll-container-compact,
    .notice-categories-container-compact {
        max-height: 200px !important; /* Further reduced for small mobile */
    }
}

@media (max-width: 991px) {
    .notices-events-merged-box {
        margin-bottom: 20px;
    }
}


/* Vision & Mission Single Card Style */

.vision-mission-content h3 {
    font-weight: 600;
}

    .vision-mission-content h3 i {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

.vision-mission-single .btn-success:hover {
    background: linear-gradient(135deg, #1e7e34 0%, #155724 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(40,167,69,0.3) !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .vision-mission-single {
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .vision-mission-content {
        padding: 20px !important;
    }

    .vision-mission-single .btn-success {
        padding: 8px 20px !important;
        font-size: 0.9rem;
    }
}


/* Equal Height for Welcome and Vision-Mission Sections */
.vision-mission-row {
    display: flex;
    align-items: stretch;
}

    .vision-mission-row > .col-lg-6 {
        display: flex;
    }

.welcome-section,
.vision-mission-single {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0;
}

/* Content areas should grow to fill space */
.welcome-content,
.vision-mission-content {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
    padding-bottom: 10px !important; /* Reduce bottom padding */
}

/* Restore original padding and spacing in Vision-Mission content */
.vision-mission-content {
    padding: 30px 30px 30px 30px !important; /* Reduced bottom padding */
    gap: 15px; /* Space between vision and mission */
}

.vision-mission-single .section-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--secondary-color);
    transition: var(--transition);
}

.vision-mission-single:hover .section-title:after {
    width: 80px;
}

.vision-mission-content > div {
    border-left-color: rgba(0, 0, 128, 0.3) !important;
    margin-bottom: 0 !important; /* Remove margin since we're using gap */
}

/* Restore original font sizes */
.vision-mission-content h3 {
    color: #000080 !important;
    font-size: 18px !important;
    margin-bottom: 12px !important;
    font-weight: 600;
}

.vision-mission-content p {
    font-size: 1rem !important; /* Original size */
    line-height: 1.8 !important;
    margin-bottom: 10px !important;
}

    .vision-mission-content p:last-child {
        margin-bottom: 0 !important;
    }

/* Adjust button container padding */
.vision-mission-single .text-center {
    padding: 10px 30px 80px 30px !important; /* Reduced top padding from 0 to 10px */
    margin-top: 0 !important; /* Changed from auto */
    flex-shrink: 0;
}

/* Match Welcome section button area */
.welcome-section .text-center {
    margin-top: auto;
    flex-shrink: 0;
}

/* Vision & Mission Single Card Style */
.vision-mission-single {
    transition: var(--transition);
    border-top: 4px solid var(--primary-color);
}

    .vision-mission-single:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
    }

    .vision-mission-single .section-title {
        position: relative;
        margin-bottom: 15px !important;
        padding-bottom: 15px;
    }

.vision-mission-content h3 i {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.vision-mission-single .btn-success:hover {
    background: linear-gradient(135deg, #1e7e34 0%, #155724 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(40,167,69,0.3) !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .vision-mission-row {
        flex-direction: column;
    }

    .welcome-section,
    .vision-mission-single {
        height: auto !important;
        margin-bottom: 20px;
    }

    .vision-mission-content {
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .vision-mission-content {
        padding: 20px !important;
        gap: 15px;
    }

        .vision-mission-content h3 {
            font-size: 16px !important;
        }

        .vision-mission-content p {
            font-size: 0.9rem !important;
        }

    .vision-mission-single .text-center {
        padding: 0 20px 20px 20px !important;
    }
}

/* Blue button styling */
.vision-mission-single .btn-primary {
    background: linear-gradient(135deg, #000080 0%, #0000b3 100%) !important;
    border: none;
}

    .vision-mission-single .btn-primary:hover {
        background: linear-gradient(135deg, #0000b3 0%, #000099 100%) !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 128, 0.3) !important;
    }

/* ========================================= */
/* WB Government Schemes Section Styles     */
/* ========================================= */

.wb-govt-schemes-section {
    background: linear-gradient(135deg, #1a472a 0%, #2d5a3d 50%, #1a472a 100%);
    border-top: 3px solid #ffd700;
    border-bottom: 3px solid #ffd700;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

    /* Decorative Pattern */
    .wb-govt-schemes-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none;
    }

.govt-schemes-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    z-index: 1;
}

/* Section Label */
.schemes-label {
    flex-shrink: 0;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4a 50%, #ffd700 100%);
    color: #1a472a;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 0 25px 25px 0;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

    .schemes-label i {
        font-size: 1rem;
    }

/* Links Container */
.schemes-links-container {
    flex: 1;
    overflow: hidden;
    margin: 0 15px;
    position: relative;
}

.schemes-marquee {
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.schemes-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
}

/* Individual Scheme Links */
.scheme-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    text-decoration: none;
    padding: 6px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 4px;
    white-space: nowrap;
}

    .scheme-link:hover {
        background: rgba(255, 215, 0, 0.2);
        color: #ffd700;
        transform: translateY(-1px);
        text-decoration: none;
    }

    .scheme-link i {
        font-size: 0.8rem;
        color: #ffd700;
        transition: transform 0.3s ease;
    }

    .scheme-link:hover i {
        transform: scale(1.2);
    }

/* Divider */
.scheme-divider {
    color: rgba(255, 215, 0, 0.5);
    font-weight: 300;
    margin: 0 5px;
    user-select: none;
}

/* View All Link */
.schemes-view-all {
    flex-shrink: 0;
}

    .schemes-view-all a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
        color: #1a472a;
        padding: 6px 14px;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        border-radius: 20px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        white-space: nowrap;
    }

        .schemes-view-all a:hover {
            background: linear-gradient(135deg, #ffed4a 0%, #ffd700 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
            text-decoration: none;
        }

        .schemes-view-all a i {
            font-size: 0.7rem;
            transition: transform 0.3s ease;
        }

        .schemes-view-all a:hover i {
            transform: translateX(3px);
        }

/* ========================================= */
/* Responsive Styles                        */
/* ========================================= */

@media (max-width: 991px) {
    .schemes-label {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

        .schemes-label span {
            display: none;
        }

        .schemes-label i {
            font-size: 1.1rem;
        }

    .scheme-link {
        font-size: 0.8rem;
        padding: 5px 10px;
    }

    .schemes-view-all a {
        padding: 5px 10px;
        font-size: 0.75rem;
    }

        .schemes-view-all a span {
            display: none;
        }
}

@media (max-width: 767px) {
    .wb-govt-schemes-section {
        padding: 6px 0;
    }

    .govt-schemes-wrapper {
        padding: 0 10px;
    }

    .schemes-label {
        padding: 5px 10px;
        border-radius: 0 15px 15px 0;
    }

    .schemes-links-container {
        margin: 0 10px;
    }

    .scheme-link {
        font-size: 0.75rem;
        padding: 4px 8px;
        gap: 4px;
    }

        .scheme-link i {
            font-size: 0.7rem;
        }

    .scheme-divider {
        margin: 0 3px;
    }
}

@media (max-width: 575px) {
    .wb-govt-schemes-section {
        border-top-width: 2px;
        border-bottom-width: 2px;
    }

    .schemes-view-all {
        display: none;
    }

    .schemes-links-container {
        margin-right: 10px;
    }

    .scheme-link span {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ========================================= */
/* Accessibility & Reduced Motion           */
/* ========================================= */

@@media (prefers-reduced-motion: reduce) {
    .schemes-track {
        animation: none !important;
    }

    .schemes-marquee {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .schemes-marquee::-webkit-scrollbar {
            height: 4px;
        }

        .schemes-marquee::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
        }

        .schemes-marquee::-webkit-scrollbar-thumb {
            background: rgba(255, 215, 0, 0.5);
            border-radius: 2px;
        }
}