/* styles.css */

/* ===== HORIZONTAL SCROLL PREVENTION SYSTEM ===== */
/* Global box-sizing reset and overflow control */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    max-width: 100%;
}

/* Prevent any element from causing horizontal overflow */
/* * {
    max-width: 100%;
} */



/* ===== RESPONSIVE DESIGN SYSTEM ===== */
/* CSS Variables for consistent breakpoints and responsive design */
:root {
    /* Breakpoint system */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1550px;
    
    /* Responsive font scaling */
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    
    /* Responsive spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Container padding responsive */
    --container-padding-mobile: 1rem;
    --container-padding-tablet: 2rem;
    --container-padding-desktop: 3rem;
}

/* Improved responsive typography scale */
html {
    font-size: 14px; /* Base font size */
}

@media (max-width: 480px) {
    html {
        font-size: 12px; /* Smaller base for very small screens */
    }
}

@media (min-width: 1550px) {
    html {
        font-size: 16px; /* Larger base for large screens */
    }
}

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


/* Improved focus indicators */
:focus {
    outline: none;
    outline-offset: 0;
}

/* Enhanced button focus states */
.btn:focus,
.nav-link:focus,
.accordion-button:focus {
    box-shadow: none;
    outline: none;
}

/* Better color contrast for important text */
.text-gold {
    color: #D4941E; /* Darker gold for better contrast */
}

/* Improved link accessibility */
a:not(.btn):not(.nav-link) {
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:not(.btn):not(.nav-link):hover,
a:not(.btn):not(.nav-link):focus {
    text-decoration-thickness: 2px;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== INDUSTRIAL 4.0 PERFORMANCE OPTIMIZATION ===== */

/* GPU-Accelerated Animations */
.btn-poster::before,
.btn-poster-news::before,
.btn-outline-index-card::before,
.accordion-button::before {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimized particle system performance */
#particle-canvas {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    pointer-events: none;
}

/* Lazy loading images with Industrial 4.0 placeholder */
img.lazy {
    opacity: 0;
    transition: opacity var(--transition-base);
    background: 
        linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%),
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            rgba(168, 85, 247, 0.05) 1px,
            transparent 2px,
            transparent 20px
        );
}

img.loaded {
    opacity: 1;
}

/* Industrial loading animation */
img[data-src] {
    background: 
        linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-elevated) 50%, var(--bg-surface) 75%),
        repeating-linear-gradient(
            45deg,
            var(--bg-secondary) 0px,
            var(--bg-secondary) 10px,
            var(--primary-color) 10px,
            var(--primary-color) 12px
        );
    background-size: 200% 100%, 20px 20px;
    animation: industrial-loading 2s infinite;
}

@keyframes industrial-loading {
    0% {
        background-position: 200% 0, 0 0;
    }
    100% {
        background-position: -200% 0, 20px 20px;
    }
}

/* Optimized news ticker using CSS animations */
.news-ticker.optimized .news-list {
    animation: scroll-industrial-news 25s linear infinite;
}

.news-ticker.optimized .news-card {
    transition: none;
}

@keyframes scroll-industrial-news {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-280px);
    }
}

/* Critical resource loading indicator */
.js-loaded .critical-resource {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--transition-base);
}

.critical-resource {
    visibility: hidden;
    opacity: 0;
}

/* Improved carousel performance with Industrial 4.0 styling */
.carousel-item img {
    will-change: transform;
    backface-visibility: hidden;
    border-radius: var(--border-radius-industrial);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    #particle-canvas {
        display: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #b366ff;
        --secondary-color: #ffcc33;
        --text-primary: #ffffff;
        --text-secondary: #e0e0e0;
        --border-primary: rgba(255, 255, 255, 0.3);
        --bg-primary: #000000;
        --bg-secondary: #1a1a1a;
    }
}

/* Focus management for better accessibility */
.navbar-custom .nav-link:focus-visible,
.btn:focus-visible,
.accordion-button:focus-visible {
    outline: none;
    outline-offset: 0;
    box-shadow: none;
}

/* Print styles for Industrial 4.0 theme */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    .datathon-banner,
    .navbar-custom,
    #sticky-footer,
    .news-ticker,
    #particle-canvas {
        display: none !important;
    }
    
    .datathon-card,
    .important-dates {
        border: 2px solid #000 !important;
        box-shadow: none !important;
        background: white !important;
        color: black !important;
    }
}

/* ===== BASE STYLES ===== */

/* Base styles */
html, body {
    height: 100%;
    margin: 0;
    scroll-behavior: smooth;
}

body {
    font-family: 'Basel Grotesk', sans-serif;
}

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: hidden;
    max-width: 100%;
}

/* Font face import */
@font-face {
    font-family: 'Basel Grotesk';
    src: local('fonts/BaselGrotesk-Regular.otf');
}

/* Industrial 4.0 Navbar Styles */
.navbar-custom {
    border-bottom: 2px solid var(--border-primary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 40px var(--primary-glow);
    min-height: 80px;
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
}

/* Override overflow to allow dropdowns to be visible */
.navbar-custom .container-fluid {
    overflow: visible !important;
}

/* Background element to prevent dropdown clipping */
.navbar-custom::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: -1;
}

/* Circuit line decoration */
.navbar-custom::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--circuit-line);
    animation: circuit-flow 3s linear infinite;
}

@keyframes circuit-flow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.navbar-custom .navbar-brand {
    padding: 5px 100px;
    position: relative;
}

.navbar-custom .navbar-brand::after {
    content: '';
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--neon-blue), transparent);
    box-shadow: 0 0 10px var(--neon-blue-glow);
}

.navbar-custom .navbar-brand img {
    max-height: 70px;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
    transition: filter var(--transition-base);
}

.navbar-custom .navbar-brand img:hover {
    filter: drop-shadow(0 0 15px var(--secondary-glow));
}

.navbar-custom .navbar-nav {
    align-items: center;
}

.navbar-custom .nav-item {
    padding: 0 10px;
    position: relative;
}

.navbar-custom .nav-link {
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9rem;
    padding: 12px 16px !important;
    border: 1px solid transparent;
    border-radius: var(--border-radius-industrial);
    transition: var(--transition-glow), color var(--transition-base), transform var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.navbar-custom .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent);
    transition: left var(--transition-base);
}

.navbar-custom .nav-link:hover::before,
.navbar-custom .nav-link:focus::before {
    left: 100%;
}

.navbar-custom .nav-link:hover {
    color: var(--secondary-color);
    border-color: var(--border-primary);
    box-shadow: var(--glow-primary);
    transform: translateY(-1px);
    text-shadow: 0 0 10px var(--secondary-glow);
}

.navbar-custom .nav-link:focus {
    color: var(--secondary-color);
    border-color: var(--border-primary);
    box-shadow: none;
    transform: translateY(-1px);
    text-shadow: 0 0 10px var(--secondary-glow);
    outline: none;
}

.navbar-custom .navbar-toggler {
    border: 2px solid var(--border-primary);
    border-radius: var(--border-radius-industrial);
    margin-left: auto;
    padding: 8px 12px;
    transition: var(--transition-glow);
}

.navbar-custom .navbar-toggler:hover {
    border-color: var(--primary-color);
    box-shadow: var(--glow-primary);
}

.navbar-custom .navbar-toggler:focus {
    border-color: var(--primary-color);
    box-shadow: none;
    outline: none;
}
.navbar-logo-large {
    display: block; /* Show large logo by default */
}

.navbar-logo-small {
    display: none; /* Hide small logo by default */
}
.navbar-custom .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='%23fff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-no-wrap {
    white-space: nowrap;
}

/* Legacy offcanvas styles - updated for enhanced dropdown system */
.offcanvas-body .nav-link:not(.dropdown-menu .nav-link) {
    color: var(--text-primary);
    font-weight: 500;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.offcanvas-body .nav-link:not(.dropdown-menu .nav-link)::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent);
    transition: left var(--transition-base);
}

.offcanvas-body .nav-link:not(.dropdown-menu .nav-link):hover::before {
    left: 100%;
}

.offcanvas-body .nav-link:not(.dropdown-menu .nav-link):hover {
    color: var(--secondary-color);
    background: rgba(26, 26, 46, 0.3);
    border: 1px solid var(--border-primary);
    transform: translateX(3px);
    text-shadow: 0 0 10px var(--secondary-glow);
}


/* Adjustments for mobile */
@media (max-width: 991px) {
    .navbar-custom .navbar-nav {
        flex-direction: column; /* Stack the nav items vertically */
        width: 100%; /* Force the nav items to fit the container width */
        overflow-x: auto;
        white-space: nowrap;
    }

    .navbar-custom .navbar-nav .nav-item {
        padding: 10px 0; /* Adjust padding for mobile view */
        width: 100%; /* Each nav item should take the full width */
    }


    .navbar-logo-large {
        display: none; /* Hide large logo on small screens */
    }

    .navbar-logo-small {
        display: block; /* Show small logo on small screens */
    }


    .navbar-no-wrap {
        white-space: nowrap;
    }


}
/* Improved navbar responsive breakpoints */
@media (max-width: 1550px) { /* More reasonable breakpoint for navbar collapse */
    .navbar-custom .navbar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        padding-left: 0;
        padding-right: 0;
        gap: var(--spacing-xs);
    }

    .navbar-custom .navbar-nav .nav-item {
        padding: var(--spacing-xs);
    }



    .navbar-custom .nav-link {
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .navbar-custom .navbar-brand {
        padding-left: var(--spacing-md);
    }

    .offcanvas-body .nav-link:not(.dropdown-menu .nav-link) {
        white-space: normal;
        line-height: 1.4;
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--font-size-base);
    }
    
    .navbar-custom .dropdown-menu .nav-link {
        padding: var(--spacing-sm) var(--spacing-md);
        white-space: normal;
        font-size: var(--font-size-sm);
    }

    .navbar-custom .dropdown-menu.show {
        display: block;
    }
    
    .navbar-no-wrap {
        white-space: nowrap;
    }
}

/* carousel */
.carousel-item img {
    height: 610px; /* Adjust to the desired fixed height */
    object-fit: cover; /* This will cover the area, potentially cropping the image */
    width: 100%; /* Ensure the width is always 100% of the carousel */
}

/* Page content and footer */
#page-content {
    flex: 1 0 auto;
}

/* Industrial 4.0 Footer */
#sticky-footer {
    flex-shrink: 0;
    background: 
        linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(168, 85, 247, 0.02) 1px,
            transparent 2px,
            transparent 20px
        );
    border-top: 2px solid var(--border-primary);
    color: var(--text-secondary);
    position: relative;
    box-shadow: 
        0 -4px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#sticky-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--circuit-line);
    animation: circuit-flow 4s linear infinite reverse;
}

#sticky-footer a {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-base);
    position: relative;
}

#sticky-footer a::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--secondary-color);
    transition: width var(--transition-base);
}

#sticky-footer a:hover,
#sticky-footer a:focus {
    color: var(--text-primary);
    text-shadow: 0 0 10px var(--secondary-glow);
}

#sticky-footer a:hover::before {
    width: 100%;
    box-shadow: 0 0 5px var(--secondary-glow);
}

#sticky-footer small {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

/* Industrial 4.0 Color Utility Classes */
.bg-purple {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.text-purple {
    color: var(--primary-color);
    text-shadow: 0 0 10px var(--primary-glow);
}

.text-white {
    color: var(--text-primary);
}

.bg-gold {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--warning-orange) 100%);
}

.text-gold {
    color: var(--secondary-color);
    font-weight: 600;
    text-shadow: 0 0 10px var(--secondary-glow);
}

/* Logo styles */
.logo-background {
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.logo-background.purple {
    background-color: #7D2882;
}

.logo-image {
    height: 300px;
    width: auto;
    display: block;
}

/* Improved responsive container system */
.container-fluid {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
    overflow-x: hidden;
    max-width: 100%;
}

@media (min-width: 768px) {
    .container-fluid {
        padding-left: var(--container-padding-tablet);
        padding-right: var(--container-padding-tablet);
    }
}

@media (min-width: 1550px) {
    .container-fluid {
        padding-left: var(--container-padding-desktop);
        padding-right: var(--container-padding-desktop);
    }
}

/* Prizes */
.prizes-section {
    background-color: #874f9e;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.secondary-school-prizes-section {
    background-color: #F0AA23;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.prizes-header {
    color: #ffefc1;
    font-size: 2rem;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.secondary-school-prizes-header {
    color: #874f9e;
    font-size: 2rem;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.prizes-list {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap; /* Wrap items for better responsiveness */
}

.prize-item {
    text-align: center;
    padding: 1rem;
    flex-basis: calc(33.333% - 2rem); /* Three items per row with gap */
    margin: 1rem 0;
}

.prize-title {
    font-size: 1.5rem;
    color: #fb8500;
    margin-bottom: 0.5rem;
}
.secondary-school-prize-title {
    font-size: 1.5rem;
    color: #023047;
    margin-bottom: 0.5rem;
}
.prize-amount {
    font-size: 1.75rem; /* Slightly larger to highlight prize amount */
    font-weight: bold;
    color: #d4af37;
}

.prize-icon {
    font-size: 3rem; /* Larger emoji icons */
    line-height: 1; /* Adjust line height to align icons */
    margin-top: 0.5rem;
}

/* Specific styles for different prize levels */
.prize-item.champion .prize-amount {
    color: #FFD700; /* Standard gold color */
}

.prize-item.first-runner-up .prize-amount {
    color: #C0C0C0; /* Standard silver color */
}

.prize-item.second-runner-up .prize-amount {
    color: #CD7F32; /* Standard bronze color */
}


@media (max-width: 768px) {
    .prizes-list {
        gap: 1rem;
    }
    .prize-item {
        flex-basis: 100%; /* Full width items on small screens */
    }
}
/* organizer/sponsors icons */
.section-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, transparent, #ccc, transparent);
    margin: 20px 0;
}

/* Icons Section */
.icons-section {
    text-align: center;
    padding: 20px;
}

.icon-container {
    margin-bottom: 30px;
}

.section-title {
    font-size: 22px;
    color: #F0AA23;
    margin-bottom: 20px;
}

.icon {
    max-width: 450px; /* Adjust the size of the icons */
    margin: 20px 20px;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    border-radius: 10px; /* Rounded corners for the icons */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}
.icon-founding {
    max-width: 450px; /* Adjust the size of the icons */
    margin: 20px 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    border-radius: 10px; /* Rounded corners for the icons */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */

}
.supporting-icon {
    width: 228px; /* Adjust the size as needed */
    height: 128px;
}

.icon:hover {
    transform: scale(1.1); /* Slightly enlarge icons on hover */
}

@media (max-width: 768px) {
    .icon {
        max-width: 250px; /* Larger icons for larger screens */
    }
}

/* Style for Register dropdown */
.dropdown-menu a.nav-link {
    white-space: nowrap; /* Prevent text from wrapping */
    /* Add other styling as needed */
}

.dropdown-menu a.nav-link {
    color: #F0AA23; /* Set the text color */
    font-size: 16px; /* Set the font size */
}

/* ===== ENHANCED OFFCANVAS SYSTEM ===== */
/* Industrial 4.0 Offcanvas Header */
.offcanvas-header {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-bottom: 3px solid var(--border-primary);
    padding: 2rem !important;
}

.offcanvas-title {
    color: var(--secondary-color) !important;
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px var(--secondary-glow);
}

.offcanvas-header .btn-close {
    background: var(--secondary-color);
    border-radius: 50%;
    opacity: 1;
    width: 32px;
    height: 32px;
    position: relative;
    transition: var(--transition-base);
}

.offcanvas-header .btn-close:hover {
    background: var(--primary-color);
    transform: scale(1.1);
    box-shadow: 0 0 15px var(--primary-glow);
}

.offcanvas {
    background: var(--bg-primary);
    border-left: 2px solid var(--border-primary);
}

/* ===== ENHANCED OFFCANVAS DROPDOWN MENU STYLES ===== */
/* Industrial 4.0 Offcanvas Dropdown System */
.offcanvas-body .dropdown-menu {
    position: static !important;
    transform: none !important;
    border: 2px solid var(--border-primary);
    border-radius: var(--border-radius-industrial);
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3), 
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    width: 100% !important;
    max-height: none !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.offcanvas-body .dropdown-menu .nav-link {
    color: var(--text-primary);
    font-size: 1.1rem !important;
    font-weight: 600;
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid var(--border-subtle);
    transition: var(--transition-base);
    position: relative;
    white-space: normal;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.offcanvas-body .dropdown-menu .nav-link::before {
    content: '▶ ';
    color: var(--secondary-color);
    font-size: 0.8em;
    margin-right: 0.5rem;
    transition: var(--transition-base);
    text-shadow: 0 0 10px var(--secondary-glow);
}

.offcanvas-body .dropdown-menu .nav-link:hover,
.offcanvas-body .dropdown-menu .nav-link:focus {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    color: var(--text-inverse);
    transform: translateX(5px);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-left: 3px solid var(--neon-blue);
}

.offcanvas-body .dropdown-menu .nav-link:hover::before {
    color: var(--text-inverse);
    transform: translateX(3px);
    text-shadow: none;
}

.offcanvas-body .dropdown-menu .nav-link:last-child {
    border-bottom: none;
}

/* Enhanced offcanvas body layout */
.offcanvas-body {
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem !important;
    color: var(--text-primary);
}

/* Enhanced dropdown toggle in offcanvas */
.offcanvas-body .dropdown-toggle::after {
    margin-left: auto;
    font-size: 1.2em;
    transition: transform var(--transition-base);
}

.offcanvas-body .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.offcanvas-body .dropdown-toggle {
    position: relative;
    overflow: hidden;
}

.offcanvas-body .dropdown-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent);
    transition: left var(--transition-base);
}

.offcanvas-body .dropdown-toggle:hover::before {
    left: 100%;
}

/* Mobile-first dropdown improvements */
@media (max-width: 991.98px) {
    .navbar-custom .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }
    
    .navbar-custom .dropdown-menu .nav-link {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
        border-radius: var(--border-radius-sm);
        margin: 0.25rem 0;
        background: rgba(26, 26, 46, 0.3);
        border: 1px solid var(--border-subtle);
    }
    
    .navbar-custom .dropdown-menu .nav-link:hover {
        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
        transform: translateX(2px);
    }
}

/* Responsive font sizing for optimal readability */
@media (max-width: 767px) {
    .offcanvas-body .dropdown-menu .nav-link {
        font-size: 1rem !important;
        padding: 0.875rem 1.25rem !important;
    }
    
    .offcanvas-body {
        padding: 1rem !important;
    }
}

@media (max-width: 576px) {
    .offcanvas-body .dropdown-menu .nav-link {
        font-size: 0.95rem !important;
        padding: 0.75rem 1rem !important;
    }
}

/* Desktop dropdown enhancements for consistency */
@media (min-width: 992px) {
    .navbar-custom .dropdown-menu {
        background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
        border: 2px solid var(--border-primary);
        border-radius: var(--border-radius-industrial);
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
        min-width: 280px;
    }
    
    .navbar-custom .dropdown-menu .nav-link {
        color: var(--text-primary) !important;
        font-size: 0.95rem !important;
        font-weight: 600;
        padding: 0.75rem 1.25rem !important;
        border-bottom: 1px solid var(--border-subtle);
        transition: var(--transition-base);
    }
    
    .navbar-custom .dropdown-menu .nav-link::before {
        content: '▶ ';
        color: var(--secondary-color);
        font-size: 0.8em;
        margin-right: 0.5rem;
        transition: var(--transition-base);
    }
    
    .navbar-custom .dropdown-menu .nav-link:hover {
        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
        color: var(--text-inverse) !important;
        transform: translateX(3px);
    }
    
    .navbar-custom .dropdown-menu .nav-link:hover::before {
        color: var(--text-inverse);
        transform: translateX(2px);
    }
    
    .navbar-custom .dropdown-menu .nav-link:last-child {
        border-bottom: none;
    }
}

/* Enhanced dropdown divider styling */
.dropdown-divider {
    border-top: 1px solid var(--border-primary) !important;
    margin: 0.5rem 0 !important;
    opacity: 0.6;
}

.offcanvas-body .dropdown-divider {
    border-top: 2px solid var(--border-primary) !important;
    margin: 0.75rem 0 !important;
    position: relative;
}

.offcanvas-body .dropdown-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 2px;
    background: var(--secondary-color);
    box-shadow: 0 0 10px var(--secondary-glow);
}

/* Primary and secondary color variables */
:root {
    --primary-color: #7D2882; /* Primary color */
    --secondary-color: #F0AA23; /* Secondary color */
}

/* New content and winners table/card styles */
.new-content {
    background-color: var(--primary-color);
    color: #fff;
    padding: 20px;
    border-radius: 9px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    margin-bottom: 20px; /* Space from content below */

}
.new-content h3 {
    margin-bottom: 35px; /* Adjust the value as needed */
}
.new-content p {
    line-height: 1.6; /* Adjust the value as needed for line spacing */
    margin-top: 10px; /* Adjust the value as needed for space above paragraphs */
    margin-bottom: 10px; /* Adjust the value as needed for space below paragraphs */
}
.winners-table {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    padding: 20px;
    border-radius: 9px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    margin-bottom: 20px; /* Space from content below */
}

/* Card-like table styles */
.table-card {
    border: 0;
    border-radius: 15px;
    overflow: hidden;
}

.table-card thead {
    background-color: var(--primary-color);
    color: #fff;
}

.table-card tbody {
    background-color: #fff;
}

.table-card th,
.table-card td {
    padding: 15px;
    border-bottom: 1px solid #ddd; /* Add a subtle border to separate rows */
}

/* Last row of table shouldn't have a bottom border */
.table-card tr:last-child th,
.table-card tr:last-child td {
    border-bottom: 0;
}

/* Adjust text alignment and font-weight for readability */
.table-card th {
    text-align: left;
    font-weight: 500;
}

.table-card td {
    text-align: center;
    font-weight: 400;
}
/* Ensures that both columns are flex containers */
.row.d-flex {
    display: flex;
}

/* Ensures that both cards expand to fill the available space */
.flex-fill {
    display: flex;
    flex-direction: column;
}

/* Additional styling for the table title */
.table-title {
    margin-bottom: 1rem;
    color: #fff;
}

/* Make the table header stand out */
.table-card thead th {
    background-color: var(--primary-color);
    color: #fff;
    font-size: 1.1em;
}

/* Style for table body to contrast with the header */
.table-card tbody td {
    color: var(--primary-color);
    font-size: 1em;
}

/* Ensure the table is responsive */
.table-responsive {
    overflow-x: auto;
}




/* Ensure tables are responsive */
@media (max-width: 768px) {
    .table-card th,
    .table-card td {
        padding: 10px; /* Smaller padding on smaller screens */
        font-size: 0.9em; /* Smaller font size on smaller screens */
    }
}


/* Industrial 4.0 Button Variants */
.btn-poster {
    --bs-btn-color: var(--text-inverse);
    --bs-btn-bg: var(--secondary-color);
    --bs-btn-border-color: var(--secondary-color);
    --bs-btn-hover-color: var(--text-inverse);
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: 168, 85, 247;
    --bs-btn-active-color: var(--text-inverse);
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
    --bs-btn-disabled-color: var(--text-muted);
    --bs-btn-disabled-bg: var(--bg-surface);
    --bs-btn-disabled-border-color: var(--border-subtle);
    
    border-radius: var(--border-radius-industrial);
    font-family: var(--font-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
    transition: var(--transition-glow);
}

.btn-poster::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left var(--transition-base);
}

.btn-poster:hover::before {
    left: 100%;
}

.btn-poster-news {
    --bs-btn-color: var(--text-inverse);
    --bs-btn-bg: var(--secondary-color);
    --bs-btn-border-color: var(--border-primary);
    --bs-btn-hover-color: var(--text-inverse);
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: 168, 85, 247;
    --bs-btn-active-color: var(--text-inverse);
    --bs-btn-active-bg: var(--secondary-color);
    --bs-btn-active-border-color: var(--secondary-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
    --bs-btn-disabled-color: var(--text-muted);
    --bs-btn-disabled-bg: var(--bg-surface);
    --bs-btn-disabled-border-color: var(--border-subtle);
    
    border-radius: var(--border-radius-industrial);
    font-family: var(--font-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
    transition: var(--transition-glow);
}

.btn-poster-news::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left var(--transition-base);
}

.btn-poster-news:hover::before {
    left: 100%;
}
.btn-poster-larger {
    font-weight: bold;
    padding: 10px 20px;  /* Larger padding */
    font-size: 17px;     /* Larger font size */
    width: 250px;        /* Specific width */
    margin: 20px auto;   /* Top/bottom margin and auto horizontal margins */
    display: block;      /* Block display to respect width and centering */
}
.poster-icon {
    display: flex; /* Enable Flexbox */
    align-items: center; /* Center items vertically */
    justify-content: center;
}

.poster-icon .bi {
    margin-right: 8px; /* Add space between icon and text */
}

/*.poster-button-text {*/
/*    display: block; !* Optional, ensures the text is treated as a block-level element *!*/
/*}*/

/* Industrial 4.0 Accordion System */
.accordion-icon {
    margin-right: 12px;
    filter: drop-shadow(0 0 5px var(--neon-blue-glow));
}

.accordion-button {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-industrial) !important;
    font-family: var(--font-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1.25rem 1.5rem;
    position: relative;
    transition: var(--transition-glow), background var(--transition-base);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.accordion-button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-color);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.accordion-button.collapsed {
    color: var(--text-primary);
}

.accordion-button.collapsed::before {
    opacity: 0.5;
}

.accordion-button:focus {
    border-color: var(--primary-color);
    box-shadow: 
        0 0 0 0.25rem var(--primary-glow),
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 3;
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--text-inverse);
    border-color: var(--secondary-color);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.3),
        0 0 25px var(--primary-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* .accordion-button:not(.collapsed)::before {
    opacity: 1;
    background: var(--neon-blue);
    box-shadow: 0 0 10px var(--neon-blue-glow);
} */

.accordion-button::after {
    color: currentColor;
    filter: none;
    font-size: 1.2em;
    transition: transform var(--transition-base);
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

.accordion-flush .accordion-collapse {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-top: none;
    border-radius: 0 0 var(--border-radius-industrial) var(--border-radius-industrial);
}

.accordion-body h5 {
    color: #7D2882; /* Purple text for FAQ questions */
    margin-bottom: 0.5rem;
}

.accordion-body p {
    font-size: 0.95rem; /* Slightly smaller font size for FAQ answers */
    color: #333; /* Dark text for better readability */
    margin-bottom: 1rem;
}
/* Contact Us specific content styles */
.contact-us-content {
    background-color: #ffffff; /* Clean white background */
    color: #333; /* Dark gray for readable text */
    padding: 20px; /* Add some padding */
    border-top: 2px solid #F0AA23; /* Accent border that matches the active header color */
}

.contact-us-content-header-style {
    font-size: 1.25em; /* Example font size */
    font-weight: bold; /* Bold font weight */
    color: #333; /* Dark gray color */
    margin-bottom: 5px; /* Spacing below the header */
    /* Add other properties to match the accordion style */
}
.contact-us-content ul {
    list-style-type: none; /* Remove default list style */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}


.contact-us-content li {
    padding: 10px 0; /* Top and bottom padding for each list item */
    border-bottom: 1px solid #eee; /* Subtle separator for each item */
}

.contact-us-content li:last-child {
    border-bottom: none; /* No border for the last item */
}

.contact-us-content li strong {
    color: #7D2882; /* Primary color for emphasis, same as link color */
    font-weight: 600; /* Slightly bolder font for the labels */
    display: block; /* Make the label block to underline the whole line */
    margin-bottom: 5px; /* Space between label and link/address */
}

.contact-us-content a {
    color: #F0AA23; /* Primary color for links */
    text-decoration: none; /* No underline */
    transition: color 0.2s ease-in-out; /* Smooth transition for color changes */
}

.contact-us-content a:hover,
.contact-us-content a:focus {
    color: rgba(125, 40, 130, 0.55); /* Active header color for link hover/focus */
    text-decoration: underline; /* Underline for better user experience */
}
/* Specific styles for the address */
.contact-us-content li.address {
    white-space: pre-line; /* Respects newlines and spaces in the address text */
}
/* Specific styles for the address to make it italic and bold */
.contact-us-content-italic-bold {
    font-style: italic; /* Makes text italic */
    /*font-weight: bold; !* Makes text bold *!*/
    display: inline-block;
    max-width: 300px;
    color: #F0AA23;
}
/*FAQ*/
.faq-accordion-body {
    background-color: #fff; /* White background for the content area */
}

.faq-question {
    padding: 1rem 10px; /* Add padding to top and bottom for each question */
    border-bottom: 1px solid #eee; /* Solid light purple bottom border for division */
}

/* Remove the bottom border for the last question to avoid double lines */
.faq-question:last-child {
    border-bottom: none;
}
.faq-question:hover {
    background-color: #eeeeee; /* Darker shade of purple */
}

.faq-question h5 {
    color: #7D2882; /* Purple text for FAQ questions */
    margin-bottom: 0.5rem; /* Space between question and answer */
}

.faq-question p {
    color: #333333; /* Slightly darker purple for answers */
    margin-bottom: 0.5rem; /* Space after answer before next question */
}


.important-info {
    font-weight: bold;
    color: #F0AA23; /* This is a red color for important info */
}

.date-info {
    font-style: italic;
    text-decoration: underline;
}

/* Industrial 4.0 Datathon Card System */

.datathon-card {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-tertiary) 100%);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-industrial);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: var(--transition-glow), transform var(--transition-base);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 100%;
    box-sizing: border-box;
}

/* Industrial card decoration */
.datathon-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--neon-blue), var(--primary-color), var(--neon-green));
    opacity: 0.6;
}

.datathon-card::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    background: var(--neon-green);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--neon-green-glow);
    animation: pulse-indicator 2s infinite;
}

@keyframes pulse-indicator {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.datathon-card .card-body {
    flex-grow: 1;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

.datathon-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--primary-color);
    box-shadow: 
        0 16px 40px rgba(0, 0, 0, 0.4),
        0 0 40px var(--primary-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* Adjust title size and margin for better hierarchy */
.datathon-card h2{
    font-size: 1.75rem; /* Adjust font size as needed */
    margin-bottom: 1rem;
}
/* This will ensure the list takes up all available space and pushes the button to the bottom */
.datathon-card .list-group {
    flex-grow: 1; /* Allows list-group to expand and fill available space */
    overflow-y: auto; /* Adds scroll to list if it's too long */
}

/* Use a pseudo-element to add a decorative line under the title */
.datathon-card h2::after{
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background-color: #F0AA23;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem; /* Space between the line and text */
}

/* Industrial 4.0 Important Dates Card */
.important-dates {
    background: 
        linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%),
        radial-gradient(circle at top right, rgba(168, 85, 247, 0.1) 0%, transparent 60%);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-industrial);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

/* Industrial data panel header */
.important-dates .card-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-bottom: 2px solid var(--border-primary);
    text-align: center;
    padding: 1.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.important-dates .card-header::before {
    content: '[ ';
    color: var(--text-inverse);
    font-family: var(--font-mono);
    font-weight: 900;
    font-size: 1.2em;
}

.important-dates .card-header::after {
    content: ' ]';
    color: var(--text-inverse);
    font-family: var(--font-mono);
    font-weight: 900;
    font-size: 1.2em;
}

.important-dates .card-header h3 {
    margin: 0;
    color: var(--text-inverse);
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Data terminal style list items */
.important-dates .list-group-item {
    background: rgba(26, 26, 46, 0.3);
    color: var(--text-primary);
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    padding: 1rem 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    position: relative;
    transition: background var(--transition-base), box-shadow var(--transition-base);
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.4;
}

.important-dates .list-group-item div {
    margin-top: 0.25rem;
}

.important-dates .list-group-item::before {
    content: '> ';
    color: var(--neon-green);
    font-weight: 900;
    margin-right: 0.5rem;
}

.important-dates .list-group-item strong {
    color: var(--secondary-color);
    text-shadow: 0 0 10px var(--secondary-glow);
}

.important-dates .list-group-item:hover {
    background: rgba(168, 85, 247, 0.1);
    box-shadow: inset 3px 0 0 0 var(--primary-color);
}

.important-dates .list-group-item:last-child {
    border-bottom: none;
}
/* Industrial 4.0 Button System */
.btn-outline-index-card {
    color: var(--text-inverse);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius-industrial);
    padding: 15px 24px;
    margin-top: 28px;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: var(--transition-glow), transform var(--transition-base);
    cursor: pointer;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Industrial button scan effect */
.btn-outline-index-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left var(--transition-slow);
}

.btn-outline-index-card::after {
    content: '◢◣';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-inverse);
    font-size: 0.8em;
    opacity: 0.7;
}

.btn-outline-index-card:hover, 
.btn-outline-index-card:focus {
    transform: translateY(-3px);
    border-color: var(--secondary-color);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.3),
        0 0 30px var(--primary-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    outline: none;
    text-shadow: 0 0 10px var(--text-inverse);
}

.btn-outline-index-card:hover::before {
    left: 100%;
}

.btn-outline-index-card:active {
    transform: translateY(-1px);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.4),
        0 0 20px var(--primary-glow),
        inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Style adjustments for better spacing and readability */
.list-group-item {
    padding: 0.75rem 1.25rem;
}

.datathon-card-body {
    padding: 2rem;
}

.datathon-card-title {
    margin-bottom: 1rem;
}
/* Industrial 4.0 Banner Styles */

.datathon-banner {
    background: 
        linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%),
        radial-gradient(ellipse at center, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px); 
    padding: 2rem 2rem 140px 2rem; 
    text-align: center;
    overflow: hidden;
    border-bottom: 1px solid var(--border-primary);

    margin-top: 0;
}

/* Industrial geometric background elements */
.datathon-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(30deg, transparent 40%, rgba(6, 182, 212, 0.03) 50%, transparent 60%),
        linear-gradient(-30deg, transparent 40%, rgba(16, 185, 129, 0.03) 50%, transparent 60%);
    pointer-events: none;
}

/* Animated circuit pattern */
.datathon-banner::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 10%;
    width: 250px;
    height: 250px;
    background: 
        conic-gradient(from 0deg, transparent, var(--neon-blue), transparent),
        conic-gradient(from 90deg, transparent, var(--neon-green), transparent);
    border-radius: 50%;
    animation: rotate-circuit 15s linear infinite;
    pointer-events: none;
    box-shadow: 0 0 45px var(--neon-blue-glow);
}

@keyframes rotate-circuit {
    0% {
        transform: rotate(0deg);
        opacity: 0.15;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0.15;
    }
}

.banner-title {
    margin: 0;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    color: var(--secondary-color);
    font-weight: 900;
    font-family: var(--font-primary);
    letter-spacing: -0.02em;
    text-shadow: 
        0 0 20px var(--secondary-glow),
        0 0 40px var(--secondary-glow),
        0 4px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
    margin-bottom: 1.5rem;
}

/* Industrial title decoration */
.banner-title::before {
    content: '◢ ';
    color: var(--neon-blue);
    font-size: 0.8em;
    margin-right: 0.2em;
    text-shadow: 0 0 15px var(--neon-blue-glow);
}

.banner-title::after {
    content: ' ◣';
    color: var(--neon-green);
    font-size: 0.8em;
    margin-left: 0.2em;
    text-shadow: 0 0 15px var(--neon-green-glow);
}

.banner-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    color: var(--text-secondary);
    font-weight: 600;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 
        0 0 10px rgba(203, 213, 225, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    padding: 0 1rem;
}

/* Typing animation effect for subtitle */
.banner-subtitle::before {
    content: '> ';
    color: var(--primary-color);
    font-weight: 900;
    animation: pulse-cursor 1.5s infinite;
}

@keyframes pulse-cursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

/* Industrial 4.0 Scroll Indicator Arrow */
.scroll-indicator {
    position: absolute;
    bottom: 50px; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 1040; /* Lower than offcanvas (1045) to prevent overlap */
    cursor: pointer;
    opacity: 1;
    transition: opacity var(--transition-base), transform var(--transition-base);
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
}

/* Hide scroll indicator when offcanvas is open */
.scroll-indicator.hidden-by-offcanvas {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(20px);
}

/* Ensure scroll indicator stays below offcanvas backdrop */
.offcanvas-backdrop ~ * .scroll-indicator {
    z-index: 1030;
}

.scroll-arrow {
    width: 30px;
    height: 50px;
    border: 2px solid var(--secondary-color);
    border-radius: 20px;
    position: relative;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(251, 191, 36, 0.1));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 
        0 0 20px var(--secondary-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: var(--transition-glow);
    margin: 0 auto;
    display: block;
}

.scroll-arrow::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--secondary-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--secondary-glow);
    animation: scroll-bounce 2s infinite;
}

.scroll-arrow::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--neon-blue);
    border-bottom: 2px solid var(--neon-blue);
    animation: arrow-pulse 2s infinite;
}

@keyframes scroll-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    40% {
        transform: translateX(-50%) translateY(10px);
        opacity: 0.7;
    }
    60% {
        transform: translateX(-50%) translateY(5px);
        opacity: 0.9;
    }
}

@keyframes arrow-pulse {
    0%, 100% {
        opacity: 0.6;
        transform: translateX(-50%) rotate(45deg) scale(0.8);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) rotate(45deg) scale(1.2);
        box-shadow: 0 0 15px var(--neon-blue-glow);
    }
}

.scroll-indicator:hover .scroll-arrow {
    border-color: var(--neon-blue);
    box-shadow: 
        0 0 30px var(--neon-blue-glow),
        0 0 50px var(--secondary-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.scroll-indicator:hover .scroll-arrow::before {
    background: var(--neon-green);
    box-shadow: 0 0 15px var(--neon-green-glow);
    animation-duration: 1s;
}

.scroll-indicator:hover .scroll-arrow::after {
    border-color: var(--neon-green);
    animation-duration: 1s;
}

/* Alternative text indicator */
.scroll-text {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.9;
    animation: text-fade 3s infinite;
    text-shadow: 0 0 10px rgba(203, 213, 225, 0.3);
    white-space: nowrap;
    margin-top: 15px;
    text-align: center;
    width: 100%;
}

@keyframes text-fade {
    0%, 50%, 100% { opacity: 0.8; }
    25%, 75% { opacity: 0.4; }
}


.datathon-banner .scroll-indicator {
    animation: fade-in-bounce 1.5s ease-out 0.5s both; 
}

@keyframes fade-in-bounce {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(30px) scale(0.9);
    }
    60% {
        opacity: 0.8;
        transform: translateX(-50%) translateY(-5px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}
/* Industrial 4.0 Responsive Optimizations */
@media (max-width: 768px) {
    .banner-title {
        font-size: clamp(2rem, 6vw, 3rem);
    }

    .banner-subtitle {
        font-size: clamp(0.95rem, 3vw, 1.3rem);
        padding: 0 0.5rem;
    }

    .datathon-banner {
        min-height: calc(85vh - 60px); 
        padding: 1.5rem 1.5rem 120px 1.5rem; 
    }
    
    .datathon-banner::after {
        width: 150px;
        height: 150px;
        top: 15%;
        right: 5%;
    }
    
    .datathon-card {
        margin-bottom: 1.5rem;
    }
    
    .important-dates .card-header {
        padding: 1rem 0.5rem;
    }
    
    .important-dates .list-group-item {
        padding: 0.75rem 1rem;
        font-size: 0.8rem;
    }
    
    .btn-outline-index-card {
        font-size: 1rem;
        padding: 12px 20px;
    }
    
    .news-ticker {
        height: 60px;
    }
    
    .news-card {
        height: 40px;
        margin: 5px;
    }
    
    .news-card a {
        padding: 8px 10px 8px 20px;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .banner-title {
        font-size: clamp(1.5rem, 8vw, 2.5rem);
        margin-bottom: 1rem;
    }

    .banner-subtitle {
        font-size: clamp(0.85rem, 4vw, 1.1rem);
        line-height: 1.5;
        padding: 0 0.25rem;
    }
    
    .datathon-banner {
        min-height: calc(75vh - 40px); 
        padding: 1rem 1rem 100px 1rem; 
    }
    
    .datathon-banner::after {
        width: 100px;
        height: 100px;
        opacity: 0.05;
    }
    
    .datathon-card .card-body {
        padding: 1.5rem;
    }
    
    .accordion-button {
        padding: 1rem;
        font-size: 0.85rem;
    }
    
    .accordion-icon {
        margin-right: 8px;
        width: 20px;
        height: 20px;
    }
    
    .important-dates .card-header h3 {
        font-size: 1rem;
    }
    
    .news-ticker::before {
        font-size: 0.6rem;
        top: 3px;
        left: 10px;
    }
    
    .scroll-indicator {
        bottom: 35px; 
        min-height: 70px; 
    }
    
    .scroll-arrow {
        width: 25px;
        height: 40px;
        margin: 0 auto;
    }
    
    .scroll-arrow::before {
        width: 5px;
        height: 5px;
        top: 6px;
    }
    
    .scroll-arrow::after {
        width: 6px;
        height: 6px;
        bottom: 6px;
    }
    
    .scroll-text {
        font-size: 0.65rem;
        margin-top: 12px;
    }

}
.venue-info {
    margin-top: 2em; /* Space above the venue info */
    padding: 1.3em;
    background-color: #f8f9fa; /* Light background to make it stand out */
    border-left: 4px solid #F0AA23; /* Left border to highlight it as important */
    display: flex; /* Use flexbox for centering */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center children vertically */
    margin-bottom: 0.5em;
}

.venue-title {
    color: #333; /* Dark text for the title */
    font-size: 1.5rem; /* Slightly larger than normal text */
    margin: 0; /* Remove default margin */

}

.venue-address {
    color: #555; /* Slightly lighter text for the address */
    font-size: 1rem;
    margin: 0; /* Remove default margin */
}
/* New styles for the Teacher Nomination card */
.teacher-card {
    border: 2px solid #7D2882; /* Matching the purple theme */
    background-color: #f8f9fa; /* A lighter background */
}

.teacher-card .card-body {
    position: relative;
    padding-left: 16px; /* Make space for the icon */
}

/* Datathon Cards */
.rule-card {
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.rule-card .card-header {
    background-color: #7D2882;
    color: #ffffff;
    font-size: 1.25rem;
    border-bottom: none;
}

.rule-card .card-body {
    background-color: #ffffff;
    color: #333333;
    border-top: 3px solid #F0AA23; /* Gold line for visual separation */
    padding: 1.5rem;
}

/* Ensure the rules are easily readable */
.rule-card .card-body p {
    font-size: 1rem;
    margin-bottom: 0.5rem; /* Spacing between paragraphs */
}

/* Optional: Add a hover effect for interaction */
.rule-card:hover {
    transform: translateY(-3px);
    transition: transform 0.3s ease-in-out;
}
.link-important {
    color: #eeaa02;
    text-decoration: underline;
    font-weight: bold;
}


.badge-deadline {
    background-color: #dc3545; /* Bootstrap danger color for high importance */
    color: white;
    padding: 0.5em 1em;
    border-radius: 10px;
    font-weight: bold;
}
.email-special-case {
    font-weight: bold;
    color: #eeaa02; /* Bootstrap 'btn-danger' color for emphasis */
}
.badge-important-date {
    background-color: #28a745; /* Bootstrap success color for significant dates */
    color: white;
    padding: 0.5em 1em;
    border-radius: 10px;
    font-weight: bold;
}

.rules-nav {
    background-color: #f8f9fa; /* Light gray background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    display: flex;
    overflow-x: auto; /* Allows scrolling on small screens */
    white-space: nowrap; /* Keeps the text in one line */
    justify-content: start;
}

.rules-nav .nav-link {
    color: #7D2882;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: 0.25rem; /* Slightly rounded corners for the links */
    transition: color 0.3s, background-color 0.3s; /* Smooth transition for hover effects */
    padding: 0.5rem 0.75rem; /* Adjust padding as per design */
    font-size: 0.9rem; /* Smaller font size for reduced navbar */
    margin-right: 0.25rem; /* Reduced margin */
    flex-shrink: 0; /* Prevents nav items from shrinking */
}

.rules-nav .nav-link:hover {
    color: #ffffff; /* Light text color on hover/focus */
    background-color: #F0AA23; /* Purple background on hover/focus */
    text-decoration: none; /* Remove the underline from links */
}

.rules-nav .nav-link:focus {
    color: #ffffff; /* Light text color on focus */
    background-color: transparent; /* Remove yellow background on focus */
    text-decoration: none; /* Remove the underline from links */
    outline: none; /* Remove outline */
}

/* Active link highlighting */
.rules-nav .nav-link.active {
    background-color: #F0AA23; /* Gold background for the active link */
    color: #ffffff; /* Light text color for the active link */
}

/* Ensure that the active state styling overrides the hover state */
.rules-nav .nav-link.active:hover {
    color: #ffffff;
    background-color: #F0AA23;
}

/* Ensure the links are positioned in the center on larger screens */
/* Styles for medium screens (tablets, small desktops) */
@media (min-width: 768px) {
    .rules-nav {
        justify-content: center;
    }
    .rules-nav .nav-link {
        font-size: 0.9rem; /* Adjust font size for medium screens if necessary */
    }
}

/* Improved responsive rules navigation */
@media (max-width: 992px) {
    .rules-nav .nav-link {
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
        margin-right: var(--spacing-xs);
    }
}

@media (max-width: 576px) {
    .rules-nav .nav-link {
        font-size: 0.8rem;
        padding: 0.15rem 0.4rem;
        margin-right: 0.15rem;
    }
}
#eligibility {
    margin-top: 0.6rem; /* Adjust the value as needed */
}
/* Custom badge styles */
.badge-custom {
    background-color: #F0AA23; /* Replace with your primary color */
    color: #ffffff; /* Replace with a contrasting color, e.g., white or a light color for legibility */
    padding: 0.25em 0.5em;
    border-radius: 0.25rem;
    font-size: 0.75em;
    font-weight: bold;
    vertical-align: baseline;
    margin-left: 0.5em; /* Adds space between the badge and preceding text */
}
/* news styles */
/*.news-container {*/
/*    max-width: 1200px; !* Adjust as needed *!*/
/*    margin: auto;*/
/*    padding: 0 15px; !* For some breathing room *!*/
/*}*/

/* Industrial 4.0 News Ticker - LED Display Style */
.news-ticker {
    width: 100%;
    height: 70px;
    overflow: hidden;
    position: relative;
    background: 
        linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(6, 182, 212, 0.05) 1px,
            transparent 2px,
            transparent 10px
        );
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-industrial);
    box-shadow: 
        inset 0 2px 10px rgba(0, 0, 0, 0.3),
        0 0 20px var(--primary-glow);
}

.news-ticker::before {
    content: 'NEWS FEED';
    position: absolute;
    left: 1.5rem;
    top: 30%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--neon-green);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    z-index: 2;
    text-shadow: 0 0 10px var(--neon-green-glow);
}



.news-list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.news-card {
    background: linear-gradient(90deg, var(--bg-surface), var(--bg-elevated));
    margin: 10px;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--secondary-color);
    transition: var(--transition-base);
    border-radius: var(--border-radius-sm);
    height: 50px;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}



.news-card a {
    color: var(--text-primary);
    text-decoration: none;
    display: block;
    padding: 13px 15px 13px 25px;
    height: 100%;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--transition-base);
    position: relative;
    z-index: 1;
}

.news-card a::before {
    content: '>> ';
    color: var(--neon-blue);
    font-weight: 900;
    margin-right: 5px;
    display: inline-block;
}

.news-card a:hover {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    color: var(--text-inverse);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.news-card:hover {
    border-left-color: var(--neon-blue);
    transform: translateX(5px);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        0 0 20px var(--neon-blue-glow);
}

/*.news-link {*/
/*    position: relative;*/
/*    !*font-weight: bold; !* Make it bold to stand out *!*!*/
/*}*/

/*.news-link .badge {*/
/*    position: absolute;*/
/*    top: -6px;*/
/*    right: -11px;*/
/*    padding: 3px 9px; !* Adjust padding to your preference *!*/
/*    border-radius: 10px; !* Rounded corners for the badge *!*/
/*    background-color: #F0AA23; !* Red background to draw attention *!*/
/*    color: white; !* White text for contrast *!*/
/*    font-size: 0.75em; !* Smaller font size for the badge *!*/
/*}*/
/* Default styles */
.news-link {
    display: inline-flex; /* Use flexbox for positioning */
    align-items: center; /* Center badge vertically */
    justify-content: center; /* Center text horizontally (if you want) */
    position: relative;
    padding-right: 30px; /* Give enough padding to not overlap the badge */
}

.news-link .badge {
    position: absolute;
    top: -5px; /* Aligns the top edge of the badge with the top edge of .nav-link */
    right: -11px; /* Aligns the right edge of the badge with the right edge of .nav-link */
    padding: 3px 9px; /* Adjust padding to your preference */
    border-radius: 10px; /* Rounded corners for the badge */
    background-color: #F0AA23; /* Background color for the badge */
    color: white; /* Text color for the badge */
    font-size: 0.75em; /* Font size for the badge */
    margin-left: 10px; /* Fixed space between text and badge */
}

/* Responsive styles with media queries */
@media (max-width: 767px) {
    .news-link {
        padding-right: 20px; /* Adjust padding for smaller screens if needed */
        /* Since you're using flexbox, you might need to adjust justifications if the layout changes */
    }

    .news-link .badge {
        top: -6px; /* Adjust top position for mobile if needed */
        right: -20px; /* Adjust right position for mobile if needed */
        padding: 3px 7px; /* Slightly adjust padding for mobile */
        font-size: 0.85em; /* Adjust font size for better readability on mobile */
    }
    .news-card a {
        font-size: 0.9em; /* Smaller font size for mobile devices */
    }
}
@media (max-width: 991.5px){
    .news-link {
        padding-right: 20px; /* Adjust padding for smaller screens if needed */
        /* Since you're using flexbox, you might need to adjust justifications if the layout changes */
    }

    .news-link .badge {
        top: -6px; /* Adjust top position for mobile if needed */
        right: -20px; /* Adjust right position for mobile if needed */
        padding: 3px 7px; /* Slightly adjust padding for mobile */
        font-size: 0.85em; /* Adjust font size for better readability on mobile */
    }
    .news-card a {
        font-size: 0.7em; /* Slightly larger font size for tablets */
    }
}
:root {
    --news-primary-color: #7D2882;
    --news-secondary-color: #F0AA23;
    --news-text-color: #333333;
    --news-background-color: #FFFFFF;
}

body {
    color: var(--news-text-color);
    background-color: var(--news-background-color);
}

.news-container {
    padding: 20px 0;
}
.news-article:first-of-type {
    margin-top: 20px;
}
.news-article {
    margin-bottom: 30px;
    padding: 20px;
    border-left: 5px solid var(--news-primary-color);
    background-color: #f9f9f9;
}

.news-article h4 {
    color: var(--news-primary-color);
    margin-bottom: 10px;
}
.news-article .carousel-caption p {
    color: #ffffff;
}
.news-article p {
    font-size: 1.05rem; /* Larger font size; adjust as needed */
    color: var(--news-text-color);
    text-align: justify; /* For a clean look, you can justify the text */
}

.news-article .news-date {
    color: var(--news-secondary-color);
    font-style: italic;
}

.news-article:hover {
    background-color: var(--news-secondary-color);
    /*cursor: pointer;*/
}

.news-article:hover h3,
.news-article:hover .news-date {
    color: var(--news-text-color);
}

.news-heading {
    color: var(--news-primary-color);
}
.highlighted-date {
    background-color: var(--news-secondary-color); /* Secondary color background */
    color: var(--news-background-color); /* White text for contrast */
    padding: 2px 6px; /* Padding around the date text */
    border-radius: 3px; /* Optional: rounded corners for the highlight */
    font-weight: bold; /* Optional: make the date bold */
}

.section-title {
    margin-top: 30px;
    margin-bottom: 15px;
}
.winner-table {
    margin-bottom: 30px;
}
.winner-table th {
    width: 33%;
}
.winner-table thead th {
    border-bottom: 2px solid #dee2e6;
}
.winner-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}
.team-member {
    font-weight: bold;
}

.league-title {
    font-weight: bold;
    background-color: #e9ecef;
    vertical-align: middle;
    text-align: center;
}
.team-member {
    font-size: 0.9em;
    color: #F0AA23;
}
.highlight-text {
    color: #ffffff;
}

/* ===== INDUSTRIAL 4.0 DESIGN SYSTEM ===== */
/* CSS Variables for Industrial 4.0 Tech Aesthetic */
:root {
    /* Breakpoint system */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1550px;
    
    /* Industrial 4.0 Color System */
    /* Primary Dark Theme Colors */
    --bg-primary: #0a0a0f;          /* Deep tech black */
    --bg-secondary: #1a1a2e;        /* Dark blue-gray */
    --bg-tertiary: #1e1e2e;         /* Surface level 1 */
    --bg-surface: #2a2a3e;          /* Surface level 2 */
    --bg-elevated: #3a3a4e;         /* Surface level 3 */
    
    /* Enhanced Brand Colors with Neon Effect */
    --primary-color: #a855f7;       /* Enhanced purple with neon feel */
    --primary-glow: rgba(168, 85, 247, 0.4);
    --secondary-color: #fbbf24;     /* Enhanced tech gold */
    --secondary-glow: rgba(251, 191, 36, 0.4);
    
    /* Industrial Accent Colors */
    --neon-blue: #06b6d4;
    --neon-blue-glow: rgba(6, 182, 212, 0.4);
    --neon-green: #10b981;
    --neon-green-glow: rgba(16, 185, 129, 0.4);
    --warning-orange: #f97316;
    --warning-orange-glow: rgba(249, 115, 22, 0.4);
    
    /* Text Colors for Dark Theme */
    --text-primary: #f8fafc;        /* Primary text - almost white */
    --text-secondary: #cbd5e1;      /* Secondary text - light gray */
    --text-muted: #94a3b8;          /* Muted text - medium gray */
    --text-inverse: #0f172a;        /* Inverse text - dark */
    
    /* Border and Outline Colors */
    --border-primary: rgba(168, 85, 247, 0.2);
    --border-secondary: rgba(251, 191, 36, 0.2);
    --border-subtle: rgba(255, 255, 255, 0.1);
    --border-focus: var(--primary-color);
    
    /* Industrial Effect Colors */
    --glow-primary: 0 0 20px var(--primary-glow);
    --glow-secondary: 0 0 20px var(--secondary-glow);
    --glow-accent: 0 0 15px var(--neon-blue-glow);
    --circuit-line: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
    
    /* Responsive font scaling */
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    
    /* Typography Stack */
    --font-primary: 'Basel Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
    
    /* Responsive spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Container padding responsive */
    --container-padding-mobile: 1rem;
    --container-padding-tablet: 2rem;
    --container-padding-desktop: 3rem;

    
    /* Industrial Animation Variables */
    --transition-fast: 0.15s ease-out;
    --transition-base: 0.3s ease-out;
    --transition-slow: 0.5s ease-out;
    --transition-glow: box-shadow 0.3s ease-out, border-color 0.3s ease-out;
    
    /* Industrial Geometry */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-industrial: 0 8px 0 8px; /* Cut corners industrial style */
    
    /* Z-index system */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* Dark Theme Base Styles */
html {
    font-size: 14px;
    scroll-behavior: smooth;
}

@media (max-width: 480px) {
    html {
        font-size: 12px;
    }
}

@media (min-width: 1550px) {
    html {
        font-size: 16px;
    }
}

/* Industrial Dark Theme Body */
body {
    font-family: var(--font-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Industrial Background Pattern */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 50%, rgba(168, 85, 247, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(16, 185, 129, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Enhanced Scrollbar for Industrial Theme */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
    border: 1px solid var(--border-subtle);
}

::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: var(--transition-base);
}

html:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: 1px solid var(--border-primary);
}

html:hover::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--secondary-color), var(--neon-blue));
    box-shadow: var(--glow-secondary);
    border-color: var(--secondary-color);
}

::-webkit-scrollbar-corner {
    background: var(--bg-secondary);
}

/* Industrial scrollbar track pattern */
::-webkit-scrollbar-track:before {
    content: '';
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        rgba(168, 85, 247, 0.1) 1px,
        transparent 2px,
        transparent 10px
    );
}

/* Fallback for Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color var(--transition-base);
}

html:hover {
    scrollbar-color: var(--primary-color) var(--bg-secondary);
}

/* Auto-hide scrollbar on smaller screens */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
}

/* ===== INDUSTRIAL 4.0 REGISTRATION FORM STYLES ===== */
/* Enhanced registration form container with industrial design */
.registration-form-container {
    background: 
        linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%),
        radial-gradient(circle at top right, rgba(168, 85, 247, 0.08) 0%, transparent 60%),
        radial-gradient(circle at bottom left, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-industrial);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 40px var(--primary-glow);
    position: relative;
    overflow: hidden;
    margin: 2rem 0;
    padding: 2.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}



/* Tech status indicator */
/* .registration-form-container::after {
    content: '';
    position: absolute;
    top: 15px;
    right: 15px;
    width: 8px;
    height: 8px;
    background: var(--neon-green);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--neon-green-glow);
    animation: pulse-status 2s infinite;
} */

/* Enhanced embedded form styling */
.registration-form-container #mf_placeholder {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius-md);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
    padding: 1rem;
    min-height: 500px;
}

/* Loading state for embedded form */
.registration-form-container #mf_placeholder:empty::before {
    content: 'Loading Registration Form...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    animation: loading-pulse 1.5s infinite;
}

/* Circuit pattern overlay */
.registration-form-container .form-pattern-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            rgba(168, 85, 247, 0.02) 1px,
            transparent 2px,
            transparent 40px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            rgba(6, 182, 212, 0.02) 1px,
            transparent 2px,
            transparent 40px
        );
    pointer-events: none;
    z-index: 0;
}

/* Form header enhancement */
.registration-form-container h2 {
    position: relative;
    z-index: 2;
    text-shadow: 0 0 20px var(--secondary-glow);
}

.registration-form-container p {
    position: relative;
    z-index: 2;
    color: var(--text-secondary);
}

/* Animation keyframes */
@keyframes pulse-status {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1); 
        box-shadow: 0 0 15px var(--neon-green-glow);
    }
    50% { 
        opacity: 0.6; 
        transform: scale(0.8); 
        box-shadow: 0 0 25px var(--neon-green-glow);
    }
}

@keyframes loading-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Responsive adjustments for registration form */
@media (max-width: 768px) {
    .registration-form-container {
        margin: 1rem 0;
        padding: 1.5rem;
    }
    
    .registration-form-container #mf_placeholder {
        padding: 0.75rem;
        min-height: 400px;
    }
}

@media (max-width: 480px) {
    .registration-form-container {
        margin: 0.5rem 0;
        padding: 1rem;
        border-radius: var(--border-radius-md);
    }
    
    .registration-form-container #mf_placeholder {
        padding: 0.5rem;
        min-height: 350px;
    }
}

/* Enhanced hover state */
.registration-form-container:hover {
    border-color: var(--secondary-color);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 50px var(--primary-glow),
        0 0 80px var(--secondary-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    transition: var(--transition-glow), transform var(--transition-base);
}

/* Section styling compatibility */
.registration-form-container .container.my-5 {
    padding: 0;
    margin: 0;
}

/* Ensure form text remains readable */
.registration-form-container iframe {
    background: rgba(255, 255, 255, 0.98) !important;
    border-radius: var(--border-radius-sm);
}

/* ===== INDUSTRIAL 4.0 CONTENT CONTAINER STYLES ===== */
/* Enhanced content container with industrial design for pages like rundown and news */
.content-container {
    background: 
        linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%),
        radial-gradient(circle at top right, rgba(168, 85, 247, 0.06) 0%, transparent 60%),
        radial-gradient(circle at bottom left, rgba(6, 182, 212, 0.04) 0%, transparent 50%);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-industrial);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 30px var(--primary-glow);
    position: relative;
    margin: 2rem 0;
    padding: 2.5rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Tech status indicator for content pages */
/* .content-container::after {
    content: '';
    position: absolute;
    top: 15px;
    right: 15px;
    width: 6px;
    height: 6px;
    background: var(--neon-blue);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--neon-blue-glow);
    animation: pulse-status 2.5s infinite;
} */

/* Content pattern overlay */
.content-container .content-pattern-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            rgba(168, 85, 247, 0.015) 1px,
            transparent 2px,
            transparent 50px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            rgba(6, 182, 212, 0.015) 1px,
            transparent 2px,
            transparent 50px
        );
    pointer-events: none;
    z-index: 0;
}

/* Content header and text enhancement */
.content-container h2 {
    position: relative;
    z-index: 2;
    text-shadow: 0 0 15px var(--secondary-glow);
}

.content-container .venue-info,
.content-container .card,
.content-container .news-article {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius-md);
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Special styling for venue info */
.content-container .venue-info {
    border-left: 4px solid var(--secondary-color);
    background: rgba(251, 191, 36, 0.05);
}

/* Enhanced card styling within content container */
.content-container .card {
    border: 1px solid var(--border-subtle);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.content-container .card-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
    border-bottom: 2px solid var(--border-primary);
    color: var(--text-inverse) !important;
}

/* News article enhancement */
.content-container .news-article {
    border-left: 3px solid var(--primary-color);
    transition: var(--transition-base);
    color: #1a1a1a; /* Set text color to dark for readability on white background */
}

.content-container .news-article p,
.content-container .news-article li,
.content-container .news-article ul,
.content-container .news-article strong {
    color: #1a1a1a; /* Ensure all text elements in news articles are dark */
}

.content-container .news-article:hover {
    transform: translateX(3px);
    border-left-color: var(--secondary-color);
    box-shadow: 
        0 6px 25px rgba(0, 0, 0, 0.15),
        0 0 20px var(--secondary-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Table styling within content container */
.content-container .table {
    background: rgba(255, 255, 255, 0.98);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.content-container .table thead th {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Responsive adjustments for content container */
@media (max-width: 768px) {
    .content-container {
        margin: 1rem 0;
        padding: 1.5rem;
    }
    
    .content-container .venue-info,
    .content-container .card,
    .content-container .news-article {
        padding: 1rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .content-container {
        margin: 0.5rem 0;
        padding: 1rem;
        border-radius: var(--border-radius-md);
    }
    
    .content-container .venue-info,
    .content-container .card,
    .content-container .news-article {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
}

/* Enhanced hover state for content container */
.content-container:hover {
    border-color: var(--secondary-color);
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.4),
        0 0 40px var(--primary-glow),
        0 0 60px var(--secondary-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    transition: var(--transition-glow), transform var(--transition-base);
}

/* ===== RUNDOWN PAGE OPTIMIZATION ===== */
/* Enhanced rundown page styling for better readability and simplified structure */

/* Simplified venue info with high contrast */
.content-container .venue-info {
    background: rgba(255, 255, 255, 0.98) !important;
    border-left: 4px solid var(--secondary-color);
    border-radius: var(--border-radius-md);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.content-container .venue-info .venue-title {
    color: #2d3748 !important; /* Dark gray for high contrast */
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    text-shadow: none;
}

.content-container .venue-info .venue-address {
    color: #4a5568 !important; /* Medium gray for good readability */
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    text-shadow: none;
}

/* Simplified rundown table container */
.rundown-table-container {
    background: rgba(255, 255, 255, 0.98) !important;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Enhanced table header */
.rundown-table-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
    color: #ffffff !important;
    padding: 1rem 1.5rem;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    border: none;
}

/* Optimized table styling for better readability */
.content-container .rundown-table {
    width: 100%;
    margin: 0;
    background: transparent;
    color: #2d3748 !important;
    font-size: 0.95rem;
    border-collapse: collapse;
}

.content-container .rundown-table thead th {
    background: rgba(45, 55, 72, 0.95) !important;
    color: #ffffff !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 0.75rem;
    border: none;
    font-size: 0.9rem;
    text-shadow: none;
}

.content-container .rundown-table tbody td {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #2d3748 !important;
    padding: 0.875rem 0.75rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    font-weight: 500;
    line-height: 1.4;
    text-shadow: none;
}

.content-container .rundown-table tbody tr:nth-child(even) td {
    background: rgba(247, 250, 252, 0.95) !important;
}

.content-container .rundown-table tbody tr:hover td {
    background: rgba(237, 242, 247, 0.98) !important;
    color: #1a202c !important;
    transform: translateX(2px);
    transition: all var(--transition-fast);
}

/* Date column styling for better visual hierarchy */
.content-container .rundown-table tbody td:first-child {
    font-weight: 700;
    color: var(--primary-color) !important;
    background: rgba(248, 250, 252, 0.98) !important;
}

/* Time column styling */
.content-container .rundown-table tbody td:nth-child(2) {
    font-family: var(--font-mono);
    font-weight: 600;
    color: #4a5568 !important;
}

/* Event column styling */
.content-container .rundown-table tbody td:last-child {
    color: #2d3748 !important;
    font-weight: 500;
}

/* Responsive improvements for rundown table */
@media (max-width: 768px) {
    .content-container .venue-info {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .content-container .venue-info .venue-title {
        font-size: 1.25rem;
    }
    
    .content-container .venue-info .venue-address {
        font-size: 0.9rem;
    }
    
    .rundown-table-header {
        padding: 0.75rem 1rem;
        font-size: 1.1rem;
    }
    
    .content-container .rundown-table thead th,
    .content-container .rundown-table tbody td {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .content-container .venue-info {
        padding: 0.75rem;
    }
    
    .content-container .venue-info .venue-title {
        font-size: 1.1rem;
    }
    
    .content-container .venue-info .venue-address {
        font-size: 0.85rem;
    }
    
    .rundown-table-header {
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
    }
    
    .content-container .rundown-table thead th,
    .content-container .rundown-table tbody td {
        padding: 0.5rem 0.375rem;
        font-size: 0.8rem;
    }
}

/* Ensure all anchor targets have proper scroll offset */
[id] {
    scroll-margin-top: 150px; /* Provides offset for both fixed navbars */
}

/* Additional offset for rule cards to ensure better positioning */
.rule-card[id] {
    scroll-margin-top: 160px;
}

/* Highlight effect for scrolled-to section */
.rule-card.rule-card-highlight {
    animation: highlight-effect 3s ease-out;
}

@keyframes highlight-effect {
    0% {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Start with normal shadow */
    }
    40% {
        box-shadow: 0 0 30px 10px rgba(251, 191, 36, 0.7); /* Intense gold glow */
        border-color: #F0AA23;
    }
    100% {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* End with normal shadow */
    }
}

/* ... existing code ... */
.rule-card .card-body {
    background-color: #ffffff;
    color: #333333;
    border-top: 3px solid #F0AA23; /* Gold line for visual separation */
    padding: 1.5rem;
}

/* Ensure the rules are easily readable */
.rule-card .card-body p {
    font-size: 1rem;
    margin-bottom: 0.5rem; /* Spacing between paragraphs */
}

/* Optional: Add a hover effect for interaction */
.rule-card:hover {
    transform: translateY(-3px);
    transition: transform 0.3s ease-in-out;
}

.rules-nav {
    background-color: #f8f9fa; /* Light gray background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    display: flex;
    overflow-x: auto; /* Allows scrolling on small screens */
    white-space: nowrap; /* Keeps the text in one line */
    justify-content: start;
}

/* ... existing styles for .rules-nav .nav-link ... */

.rules-nav .nav-link.active:hover {
    color: #ffffff;
    background-color: #F0AA23;
}

/* --- INDUSTRY 4.0 UI FOR RULES PAGES --- */
.content-container .rules-nav {
    background: rgba(10, 10, 15, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-primary);
    box-shadow: none;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.content-container .rules-nav .nav-link {
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--border-radius-sm);
    transition: color 0.3s, background-color 0.3s, text-shadow 0.3s;
}

.content-container .rules-nav .nav-link:hover {
    color: var(--secondary-color);
    background-color: rgba(251, 191, 36, 0.1);
    text-shadow: 0 0 10px var(--secondary-glow);
}

.content-container .rules-nav .nav-link.active {
    color: #ffffff;
    background-color: var(--secondary-color);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.content-container .rule-card {
    background: rgba(26, 26, 46, 0.5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-md);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.content-container .rule-card .card-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
    border-bottom: 2px solid var(--border-primary);
    color: var(--text-inverse) !important;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.content-container .rule-card .card-body {
    background: transparent;
    color: var(--text-primary);
    border-top: none;
    line-height: 1.8;
}

.content-container .rule-card .card-body ol,
.content-container .rule-card .card-body ul,
.content-container .rule-card .card-body p {
    color: var(--text-secondary);
}

.content-container .rule-card .card-body strong {
    color: var(--text-primary);
}

.content-container .rule-card .card-body .link-important {
    color: var(--secondary-color);
    text-shadow: 0 0 8px var(--secondary-glow);
}
/* Ensure the links are positioned in the center on larger screens */
/* Styles for medium screens (tablets, small desktops) */
@media (min-width: 768px) {
    .rules-nav {
        justify-content: center;
    }
    .rules-nav .nav-link {
        font-size: 0.9rem; /* Adjust font size for medium screens if necessary */
    }
}

/* Make rules navigation sticky below main navbar */
.rules-nav-wrapper {
    position: sticky;
    top: 80px;
    z-index: 1019;
    background: rgba(10, 10, 15, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.section-title {
    font-size: 22px;
    color: #F0AA23;
    margin-bottom: 20px;
}

.logo-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    overflow-x: auto;
    padding-top: 1.5rem; /* provide vertical room for hover scaling */
    padding-bottom: 0.9rem;
}

/* Dynamic alignment based on scrollability */
.logo-grid.is-scrollable {
    justify-content: flex-start;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.logo-grid.is-scrollable .logo-card {
    scroll-snap-align: start;
}

.logo-grid.is-centered {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    scroll-snap-type: none;
}

.logo-card {
    background-color: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-subtle);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 280px;
    height: 160px;
    transition: all 0.3s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-card:hover {
    transform: translateY(-5px) scale(1.05);
    border-color: var(--secondary-color);
    box-shadow: 0 12px 24px rgba(0,0,0,0.2), 0 0 25px var(--secondary-glow);
}

.logo-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Organiser logo - larger size */
.organiser-logo-card {
    background-color: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 15px;
    padding: 1rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-subtle);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 220px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.organiser-logo-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--secondary-color);
    box-shadow: 0 16px 32px rgba(0,0,0,0.3), 0 0 30px var(--secondary-glow);
}

/* White background container for logos */
.logo-white-bg {
    background-color: white;
    border-radius: 8px;
    padding: 1.25rem; /* extra padding so enlarged logos are not clipped */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo-white-bg img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Medium screens: ensure horizontal scroller exposes first logo fully */
@media (min-width: 769px) and (max-width: 1399.98px) {
    .logo-grid {
        justify-content: flex-start; 
        padding-left: 0.75rem; 
        padding-right: 0.75rem; 
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .logo-card {
        scroll-snap-align: start;
    }
}

/* Organiser section special styling */
.organiser-section {
    margin-bottom: 3rem;
}

.organiser-section .section-title {
    font-size: 26px;
    margin-bottom: 25px;
    text-align: center;
}

/* Funding and Supporting sections styling */
.funding-section, .supporting-section {
    margin-bottom: 2.5rem;
}

.funding-section .section-title, .supporting-section .section-title {
    font-size: 24px;
    margin-bottom: 22px;
    text-align: center;
}

@media (max-width: 768px) {
    .logo-card {
        width: 220px;
        height: 130px;
        padding: 0.75rem;
    }
    
    .organiser-logo-card {
        width: 360px;
        height: 200px;
        padding: 1.5rem;
    }
    
    .organiser-section .section-title {
        font-size: 24px;
    }
    
    .funding-section .section-title, .supporting-section .section-title {
        font-size: 22px;
    }

    .logo-grid {
        gap: 1rem;
        justify-content: flex-start;
        padding-left: 0.75rem; 
        padding-right: 0.75rem; 
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity; 
    }

    .logo-card { 
        scroll-snap-align: start; 
    }
}

@media (max-width: 480px) {
    .logo-card {
        width: 180px;
        height: 110px;
        padding: 0.5rem;
    }
    
    .organiser-logo-card {
        width: 100%;
        height: 160px;
        padding: 1rem;
    }
    
    .organiser-section .section-title {
        font-size: 22px;
    }
    
    .funding-section .section-title, .supporting-section .section-title {
        font-size: 20px;
    }
    
    .logo-white-bg {
        padding: 0.75rem; /* increase padding on small screens too */
    }
    
    .logo-grid {
        gap: 0.75rem;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-left: 0.75rem; 
        padding-right: 0.75rem; 
        scroll-snap-type: x proximity;
        scroll-padding-left: 0.75rem;
        scroll-padding-right: 0.75rem;
    }

    .logo-card { 
        scroll-snap-align: start; 
    }
}


/*
.icon {
    max-width: 450px; 
    margin: 20px 20px;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
    border-radius: 10px; 
    transition: transform 0.3s ease; 
}
.icon-founding {
    max-width: 450px; 
    margin: 20px 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
    border-radius: 10px; 
    transition: transform 0.3s ease; 

}
.supporting-icon {
    width: 228px; 
    height: 128px;
}

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

@media (max-width: 768px) {
    .icon {
        max-width: 250px; 
    }
}
*/

/* Style for Register dropdown */
.dropdown-menu a.nav-link {
    white-space: nowrap; /* Prevent text from wrapping */
    /* Add other styling as needed */
}