/* styles.css */

/* 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%;
}

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

/* Navbar styles */
.navbar-custom {
    background-color: #7D2882;
    box-shadow: 0 2px 4px rgba(0,0,0,.1); /* Adds a subtle shadow to the navbar */
    min-height: 80px; /* Fix the height of the navbar */
}

.navbar-custom .navbar-brand {
    padding: 5px 100px; /* Add some padding to center the logo vertically */
}

.navbar-custom .navbar-brand img {
    max-height: 70px; /* Maximum height for your logo, ensures it is smaller than the navbar */
    width: auto; /* Adjust width automatically to maintain aspect ratio */
}

.navbar-custom .navbar-nav {
    align-items: center; /* Center align the nav items vertically */
}

.navbar-custom .nav-item {
    padding: 0 10px; /* Proper padding between nav items */
}

.navbar-custom .nav-link {
    color: #fff;
    transition: color 0.3s ease-in-out; /* Smooth transition for hover effect */
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus {
    color: #e1bee7; /* Lighter purple for the toggler */
}

.navbar-custom .navbar-toggler {
    border-color: #d07cde; /* Lighter purple for the toggler */
    margin-left: auto; /* Push toggler to the right */
}
.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;
}

.offcanvas-body {
    background-color: #7D2882; /* Set the background color to white */
    color: white; /* Set the text color to black, if needed */
}

/* Adjust the offcanvas link color if needed */
.offcanvas-body .nav-link {
    color: white;
}


/* 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-custom .navbar-collapse {
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }
    .navbar-no-wrap {
        white-space: nowrap;
    }


}
@media (max-width: 1450px) { /* Increased breakpoint for navbar collapse */
    .navbar-custom .navbar-nav {
        flex-direction: row; /* Keep nav items in a row */
        flex-wrap: wrap; /* Allow items to wrap to the next line if space is insufficient */
        padding-left: 0; /* Remove padding if it's causing issues */
        padding-right: 0; /* Remove padding if it's causing issues */
    }

    .navbar-custom .navbar-nav .nav-item {
        padding: 5px 5px; /* Reduced padding for mobile view */
    }

    .navbar-custom .navbar-collapse {
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

    .navbar-custom .nav-link {
        font-size: 0.9rem; /* Reduce font size to save space */
    }

    .navbar-custom .navbar-brand {
        padding-left: 15px; /* Reduce padding to save space */
    }

    .offcanvas-body .nav-link {
        white-space: normal; /* Allow text wrapping in offcanvas menu */
        line-height: 1.2; /* Adjust line height for better readability when wrapped */
    }
    .navbar-custom .dropdown-menu .nav-link {
        padding: 0.25rem 1rem; /* Adjust padding for dropdown links */
        white-space: normal; /* Allow the dropdown links to wrap text */
        font-size: 0.9rem; /* Adjust font size for consistency */
    }

    .navbar-custom .dropdown-menu.show {
        display: block; /* Ensure the dropdown is shown */
    }
    .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;
}

#sticky-footer {
    flex-shrink: 0; /* Changed from 'unset' to '0' for clarity */
    background: #7D2882;
    color: #F0AA23;
}

#sticky-footer a,
#sticky-footer a:hover {
    color: inherit; /* Ensures link colors are consistent */
}

/* Color themes */
.bg-purple {
    background-color: #7D2882;
}

.text-purple {
    color: #7D2882;
}

.text-white {
    color: #fff;
}

.bg-gold {
    background-color: #F0AA23;
}

.text-gold {
    color: #F0AA23;
}

/* 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;
}

/* Container override for full-width background */
.container-fluid {
    padding-left: 50px;
    padding-right: 100px;
}

/* 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 */
}

/* 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 */
    }
}


.btn-poster {
    --bs-btn-color: #7D2882;
    --bs-btn-bg: #F0AA23;
    --bs-btn-border-color: #F0AA23;
    --bs-btn-hover-color: #7D2882;
    --bs-btn-hover-bg: #F0AA23;
    --bs-btn-hover-border-color: #F0AA23;
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #7D2882;
    --bs-btn-active-bg: #F0AA23;
    --bs-btn-active-border-color: #F0AA23;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #7D2882;
    --bs-btn-disabled-bg: #F0AA23;
    --bs-btn-disabled-border-color: #F0AA23;
}

.btn-poster-news {
    --bs-btn-color: #7D2882;
    --bs-btn-bg: #F0AA23;
    --bs-btn-border-color: #FFFFFF;
    --bs-btn-hover-color: #7D2882;
    --bs-btn-hover-bg: #FFFFFF;
    --bs-btn-hover-border-color: #FFFFFF;
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #7D2882;
    --bs-btn-active-bg: #F0AA23;
    --bs-btn-active-border-color: #F0AA23;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #7D2882;
    --bs-btn-disabled-bg: #F0AA23;
    --bs-btn-disabled-border-color: #F0AA23;
}
.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 *!*/
/*}*/

.accordion-icon {
    margin-right: 8px; /* Adjust the space to your liking */
}
.accordion-button {
    background-color: #7D2882; /* Your primary color */
    color: white ; /* Adjust text color as needed */
}
.accordion-button.collapsed {
    color: white; /* Or any color you want when the accordion is collapsed */
}
.accordion-button:focus {
    border-color: #F0AA23; /* Focus border color */
    box-shadow: 0 0 0 0.25rem rgba(240, 170, 35, 0.5); /* Focus shadow with opacity */
}

.accordion-button:not(.collapsed) {
    background-color: #F0AA23; /* Active header background color */
    color: white; /* Active header text color */
}

.accordion-button::after {
    /* Adjust the color of the icon here if needed */
    color: white;
    filter: invert(1) grayscale(100%) brightness(200%);
}

.accordion-flush .accordion-collapse {
    background-color: #e7f1ff; /* Lighter shade for the content */
}

.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;
}

/* Unique styles for the datathon card */

.datathon-card {
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    display: flex; /* Makes the card a flex container */
    flex-direction: column; /* Aligns children vertically */
}
.datathon-card .card-body {
    flex-grow: 0; /* Allows the card-body to expand and fill available space */
    /* Adjust your padding and other styles as needed */
}
.datathon-card:hover {
    transform: translateY(-5px);
}
/* 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 */
}

/* Specific styles for the 'Important Dates' card */
.important-dates {
    background-color: #7D2882; /* Purple background */
    color: #fff; /* White text */
    border: 1px solid #ffffff; /* Gold border */

}

.important-dates .card-header {
    background-color: #F0AA23; /* Gold background */
    border-bottom: 1px solid #ffffff;
    text-align: center; /* Center text horizontally */
    padding: 1rem; /* Apply equal padding on all sides, or adjust top and bottom padding as needed */
    display: flex; /* Use flex to center align items vertically */
    align-items: center; /* This will center the h3 vertically */
}

.important-dates .card-header h3 {
    margin-top: 0; /* Remove the top margin */
    margin-bottom: 0; /* Remove the bottom margin */
    color: #fff; /* Ensure the text is white */
}
/* White text in the 'Important Dates' card */
.important-dates .list-group-item {
    background-color: transparent; /* Clear background */
    color: #fff; /* White text */
}

.important-dates .list-group-item strong {
    color: #F0AA23; /* White text for strong elements */
}

/* Hover effect for items in 'Important Dates' card */
.important-dates .list-group-item:hover {
    background-color: #69206e; /* Darker shade of purple */
}
.btn-outline-index-card {
    color: #F0AA23; /* Change text color to white for contrast */
    background-color: #7D2882; /* A contrasting background color */
    border: 2px solid #7D2882; /* A matching border */
    padding: 15px 24px; /* Increase padding for a larger, more clickable area */
    margin-top: 28px; /* Space above the button */
    font-size: 1.2rem; /* Slightly larger text to grab attention */
    font-weight: bold; /* Bold font for emphasis */
    display: block; /* Ensure the button is a block element */
    width: 100%; /* Full width of the parent */
    text-align: center; /* Center the text */
    transition: background-color 0.3s, transform 0.1s; /* Smooth background color transition and a quick transform */
    cursor: pointer; /* Change the cursor to indicate it's clickable */
}

.btn-outline-index-card:hover, .btn-outline-index-card:focus {
    background-color: #9B4DA9; /* Lighten the background color on hover/focus for feedback */
    color: #ffffff; /* Keep the text color white for contrast */
    transform: translateY(-2px); /* Slight raise of the button to indicate interactivity */
    outline: none; /* Remove the outline to keep the design clean */
}

.btn-outline-index-card:active {
    transform: translateY(1px); /* Push the button down when clicked */
    background-color: #6D1C74; /* Darken the background color to indicate it's been pressed */
}

/* 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;
}
/* Banner Styles */

.datathon-banner {
    background-image: url("../img/smart_logistic_origin.png");
    background-size: 70% 80%;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff; /* Maintained white color, adjust if necessary */
    padding: 10em 3em 10em;
    text-align: center;
}

.banner-title {
    margin: 0;
    font-size: 3.5rem;
    color: #F0AA23; /* Gold color for the title */
    font-weight: bold;
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.8); /* Stronger text shadow for better readability */
}

.banner-subtitle {
    font-size: 1.3rem;
    color: #ffffff; /* White color for the subtitle, consider changing if not visible */
    font-weight: bold; /* Added bold for better readability */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); /* Stronger text shadow for better readability */
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.3); /* Adding stroke to text for browsers that support it */
    text-stroke: 1px rgba(0, 0, 0, 0.3); /* Standard property for text stroke, may not be supported everywhere */
}
@media (max-width: 768px) {
    .banner-title {
        font-size: 2rem; /* Smaller font size for smaller screens */
    }

    .banner-subtitle {
        font-size: 1rem; /* Smaller font size for smaller screens */
    }

    .datathon-banner {
        padding: 5em 1em 5em;
    }
}

/* You may also want to add another breakpoint for even smaller screens */
@media (max-width: 480px) {
    .banner-title {
        font-size: 1.5rem; /* Even smaller font size for very small screens */
    }

    .banner-subtitle {
        font-size: 0.8rem; /* Even smaller font size for very small screens */
    }
    .datathon-banner {
        padding: 2.5em 1em 2.5em;

    }
}
.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,
.rules-nav .nav-link:focus {
    color: #ffffff; /* Light text color on hover/focus */
    background-color: #F0AA23; /* Purple background on hover/focus */
    text-decoration: none; /* Remove the underline from links */
}

/* 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 */
    }
}

/* Styles for small screens (phones) */
@media (max-width: 1399px) {
    .rules-nav .nav-link {
        font-size: 0.83rem; /* Smaller font size for small screens */
        padding: 0.2rem 0.5rem; /* Adjust padding for small screens */
        margin-right: 0.25rem; /* Adjust margin for small screens */
    }
}
#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 *!*/
/*}*/

.news-ticker {
    width: 100%;
    height: 70px; /* Adjust the height to fit one news card */
    overflow: hidden;
    position: relative;
    background-color: #7D2882; /* Purple color for the ticker background */
    /*margin-bottom: 20px; !* Space below the ticker *!*/
    border-radius: 10px; /* Rounded corners for the ticker */
}

.news-list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
    display: flex; /* Use flexbox for laying out items */
    flex-direction: column; /* Stack items vertically */
}

.news-card {
    background-color: #F0AA23; /* Orange color for card background */
    margin: 10px; /* Space around cards */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Card shadow for depth */
    transition: transform 0.5s ease-in-out; /* Smooth transition for movement */
    border-radius: 5px; /* Rounded corners for cards */
    height: 50px; /* Set a fixed height for the cards */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */

}

.news-card a {
    color: #ffffff; /* Purple color for text */
    text-decoration: none;
    display: block;
    padding: 13px; /* Padding inside cards */
    height: 100%; /* Full height of the card */
    border-radius: 5px; /* Match the card's border radius */
}

.news-card a:hover {
    background-color: #ece7e7; /* A lighter shade of orange for the hover state */
    color: #7D2882; /* White text on hover */
}

/*.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-background-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: #000000;
}