#card-section .card-container {
    display: flex;
    justify-content: flex-start;
    /* Align the cards to the left */
    gap: 80px;
    /* Remove any gap between the cards */
    margin: 20px;
    /* Ensure no external margin is added */
}

#card-section .card {
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
    /* Default gradient color */
    border-radius: 8px;
    width: 12%;
    /* Small width for each card */
    padding: 10px 10px;
    /* Reduced padding */
    display: flex;
    align-items: center;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    /* Smaller shadow for small cards */
    transition: transform 0.3s ease;
    cursor: pointer;
    min-width: 120px;
    /* Ensures the card doesn't shrink too small */
    height: 70px;
    /* Limit height to fit content comfortably */
    margin: 0;
    /* Remove margin */
}

#card-section .card:hover {
    transform: scale(1.05);
    /* Hover effect */
}

#card-section .card:nth-child(1) {
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    /* Water Quality card */
}

#card-section .card:nth-child(2) {
    background: linear-gradient(135deg, #00b4db, #0083b0);

}

#card-section .card:nth-child(3) {
    background: linear-gradient(135deg, #ff512f, #dd2476);
    /* Liquid Waste card */
}

#card-section .card-content {
    display: flex;
    align-items: center;
    width: 100%;
}

#card-section .icon-container {
    color: white;
    font-size: 20px;
    /* Smaller icon size */
    margin-right: 8px;
    /* Reduced space between icon and text */
}

#card-section .text-container {
    flex-grow: 1;
}

#card-section .card-link {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    /* Smaller font size */
    transition: color 0.3s ease;
}

#card-section .card-link:hover {
    color: #f0f0f0;
}

/* Responsive Adjustment: Stack cards on smaller screens */
@media (max-width: 768px) {
    #card-section .card {
        width: 100%;
        /* Cards will stack vertically */
        margin-bottom: 10px;
    }
}

.gradient-4 {
    background: linear-gradient(45deg, #fff, #f5f5f5);
    border: 1px solid #e4e2e2ed !important;
    font-weight: lighter !important;
}

.gradient-5 {
    background: linear-gradient(45deg, #bb5ffb, #ffc14c);
}

.gradient-6 {
    background: linear-gradient(45deg, #29d2e3, #f94cff);
}

.gradient-7 {
    background: linear-gradient(45deg, #3adf54, #f26868);
}

.gradient-8 {
    /* background: linear-gradient(45deg, #0cdf86, #077db7); */
    background: linear-gradient(45deg, #0d603d, #16cc99);
}





/* Event Card Styling */
.event-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(52, 70, 94, 0.36);
    transition: all 0.3s ease-in-out;
    background-color: #fff;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Image Styling */
.event-card-img {
    width: 100%;
    height: 180px;
    /* Adjusted for better proportion */
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    position: relative;
}

/* Date Badge */
.event-date-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgb(226, 106, 106);
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 12px;
    border-radius: 50px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 10;
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.event-date-badge.slow-blink {
    animation: blinker 2s linear infinite;
}

/* Card Body */
/* Card Body */
.event-card-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    background: linear-gradient(to bottom, rgb(236, 239, 240), rgba(226, 229, 231, 0.25));
    /* Water-themed blue gradient */
    border-radius: 0 0 12px 12px;
}


/* Headline */
.event-headline {
    font-size: 18px;
    /* Adjusted font size for better visibility */
    font-weight: bold;
    color: #ffffff;
    /* White color for text to make it stand out */
    background-color: rgb(41, 39, 39);
    /* Deep blue with a bit of transparency */
    padding: 1px 10px;
    border-radius: 15px;
    text-align: center;
    margin-bottom: 15px;

}

/* Description */
.event-card-text {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* District & Date */
.event-district,
.event-date-full {
    font-size: 12px;
    color: #777;
}

/* Button */
.event-btn {
    background-color: rgba(77, 151, 230, 0.66);
    color: white;
    padding: 8px 16px;
    border-radius: 25px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.event-btn:hover {
    background-color: #0056b3;
}

/* Adjustments for Mobile and Tablets */
@media (max-width: 768px) {
    .event-card-img {
        height: 150px;
    }

    .event-card-body {
        padding: 15px;
        height: 240px;
    }

    .event-headline {
        font-size: 16px;
    }

    .event-card-text {
        font-size: 12px;
    }
}


/* Highlighted Announcement Heading */
.announcement-heading {
    font-size: 20px;
    /* Increase font size for better visibility */
    font-weight: bold;
    color: #fff;
    /* White text */
    background-color: rgba(73, 154, 240, 0.98);
    /* Vibrant blue */
    padding: 12px 25px;
    /* Add more padding for emphasis */
    border-radius: 5px;
    text-align: center;
    margin-bottom: 15px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    /* Add subtle shadow for depth */
}

.announcement-heading:hover {
    background-color: #0056b3;
    cursor: pointer;
}

/* Style for the announcements card */
#whatsNewCard {
    background: linear-gradient(135deg, rgb(187, 240, 247), rgb(255, 255, 255));
    /* Water blue gradient */
    border: 1px solid #ddd;
    border-radius: 10px;
    /* Slightly more rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Softer shadow for better depth */
    overflow: hidden;
    height: 450px;
    /* Increase height for more space */
    margin: 15px;
    /* Add margin for separation */
    transition: transform 0.3s ease-in-out;
    /* Smooth hover effect */
}


#whatsNewCard:hover {
    transform: scale(1.03);
    /* Slightly scale up card on hover */
}

/* Container for text scrolling effect */
#whatsNewTextContainer {
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Animating the text */
#whatsNewText {
    position: absolute;
    width: 100%;
    animation: scrollText 16s linear infinite;
    animation-play-state: running;
}

/* Keyframes for scrolling effect */
@keyframes scrollText {
    0% {
        top: 100%;
    }

    50% {
        top: 0%;
    }

    100% {
        top: -100%;
    }
}

/* Styling for each individual announcement (card-like effect) */
#whatsNewText p {
    background-color: rgba(0, 0, 0, 0.05);
    /* Soft background for each announcement */
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
    color: #333;
    /* Darker text for readability */
    font-size: 14px;
    font-family: 'Helvetica Neue', sans-serif;
    transition: background-color 0.3s ease, transform 0.3s ease;
    /* Smooth transition for hover effect */
}

/* Hover effect for announcements */
#whatsNewText p:hover {
    background-color: rgba(73, 154, 240, 0.15);
    /* Change background on hover */
    transform: translateX(5px);
    /* Slight slide effect */
}

/* Ensure links within announcements are styled properly */
#whatsNewText a {
    text-decoration: none;
    color: rgb(37, 37, 36);
    /* Dark gray for link color */
    font-weight: bold;
    transition: color 0.3s ease, text-decoration 0.3s ease;
    /* Smooth transitions */
}

/* Hover effect for links */
#whatsNewText a:hover {
    color: rgba(73, 154, 240, 1);
    /* Blue color on hover */
    text-decoration: underline;
    /* Underline on hover */
}

/* Pause animation on hover */
#whatsNewText:hover {
    animation-play-state: paused;
    /* Pause animation when hovering */
}



/* Poster Carousel Styling */
.carousel-inner1 {
    display: flex;
    /* Align items in a row */
    width: 100%;
    overflow: hidden;
    height: 600px;
    /* Adjusted height for the entire carousel */
}

.carousel-item {
    display: flex;
    /* Use flexbox to arrange the posters side by side */
    flex-direction: row;
    /* Ensure the posters align in a horizontal row */
    width: 100%;
}

.carousel-item-container {
    display: flex;
    justify-content: space-between;
    /* Distribute posters evenly */
    gap: 10px;
    /* Space between posters */
    width: 100%;
    padding: 10px;
}

/* Poster Item Styling */
.carousel-item-img {
    flex: 1;
    height: 100%;
    flex-basis: 50%;
    /* Adjust for the number of posters */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container for images to standardize the height and width */
.carousel-item-img .image-container {
    width: 800px;
    /* Fixed width */
    height: 600px;
    /* Adjusted height for the image container */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Hide anything that overflows */
    border-radius: 8px;
    background-color: #f4f4f4;
}

/* Poster Image Styling */
.carousel-item-img img {
    width: 750px;
    /* Ensure the image takes up the full width of the container */
    height: 550px;
    /* Ensure the image takes up the full height of the container */
    object-fit: fill;
    /* Ensure the entire image fits within the container */
    border-radius: 8px;
    /* Optional: rounded corners for the image */
}

/* Optional: Remove shadow effect */
.carousel-item,
.carousel-item img {
    box-shadow: none;
    /* Remove shadow effect */
}

/* Carousel Control Styling */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5);
    /* Make controls more visible */
    border-radius: 50%;
}

.carousel-control-prev,
.carousel-control-next {
    font-size: 1.5rem;
    /* Make the controls smaller */
}




/* Unique styling for Mission Life Posters Carousel */


/* New class for Mission Life Poster image container */
.mission-life-poster-container {
    width: 400px;
    /* Fixed width for Mission Life Posters */
    height: 400px;
    /* Fixed height for Mission Life Posters */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Hide anything that overflows */
    border-radius: 8px;
    /* Optional: Rounded corners for the container */
    background-color: #f4f4f4;
    /* Light background for contrast */
    border: 5px solid black;
    /* Black border */



}

/* New Poster Image Styling (set to 200px by 200px) */
.mission-life-poster-container img {
    width: 100%;
    /* Ensures the image fills the container width */
    height: 100%;
    /* Ensures the image fills the container height */
    object-fit: fill;
    /* Ensures the image maintains its aspect ratio */
    border-radius: 8px;
    /* Optional: rounded corners for the image */


}


.mission-life-carousel-inner {
    display: flex;
    /* Align items in a row */
    width: 100%;
    overflow: hidden;
    height: 600px;
    /* Adjusted height for the entire carousel */
}




/* Mission Life Poster Carousel Styling for Owl Carousel */
.owl-carousel .item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-item-img {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Optional: Customize navigation arrows */
.owl-prev,
.owl-next {
    background-color: rgba(0, 0, 0, 0.5);
    /* Make the navigation arrows darker */
    border-radius: 50%;
    color: #fff;
    padding: 10px;
}

/* Optional: Customize dots */
.owl-dots .owl-dot {
    background-color: rgba(231, 222, 222, 0.3);
    /* Dots background color */
}

.owl-dots .owl-dot.active {
    background-color: rgba(247, 242, 242, 0.7);
    /* Active dot color */
}





/* Add Flexbox to center the logo */
.logo-container {
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    text-align: center;
    /* Ensure the image is centered in the container */
}

.logo {
    max-width: 100%;
    /* Ensures the image scales responsively */
    height: 130px;
    /* Maintain the aspect ratio */
}



/* Custom news card styles */
.home-card {
    border: 1px solid #ccc;
    border-radius: 8px !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    background-color: #fff;
}

.home-card-img {
    border-radius: 8px;
    max-height: 80px;
    width: 100%;
    object-fit: cover;
}

.home-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
}

.card-img-top {
    height: 200px;
    object-fit: cover;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.nav-tabs .nav-link {
    color: var(--secondary);
    border: none;
    padding: 0.75rem 1.25rem;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--primary);
    background-color: var(--accent);
}

.nav-tabs .nav-link.active {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    background-color: transparent;
}

.card-item {
    transition: opacity 0.3s ease;
}

.badge {
    font-size: 0.8rem;
    padding: 0.5em 0.8em;
}

@media (max-width: 600px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }


}

.card-link {
    text-decoration: none;
    /* Remove underline */
    color: inherit;
    /* Inherit color from parent (e.g., text color of the card) */
}

/* Optional: If you want to change the color of the link text */


.read-more {
    font-weight: bold;
    /* Make text bold */
    font-size: 1.2rem;
    /* Adjust the font size to be the same as the context text */
    cursor: pointer;
    /* Change cursor to indicate it's clickable */
}

/* Custom Badge Colors for Categories */
.badge-success {
    background-color: #28a745;
    /* Green for State */
}

.badge-danger {
    background-color: #dc3545;
    /* Red for National */
}

.badge-primary {
    background-color: rgba(116, 173, 235, 0.8);
    /* Blue for International */
}


.badge-info {
    background-color: #17a2b8;
    /* Light blue background */
    color: white;
    /* Text color */
}

/* Optionally, adjust positioning */
.badge-info {
    margin-left: 8px;
    /* Adjust space between the category and the date badge */
}

/* Hide submenus by default */

/* Submenu Styling */
.submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 200px;
    background-color: #add8e6;
    /* Light Blue */
    border: 1px solid #000000;
    /* Black Border */
    border-radius: 5px;
}

/* Submenu Items */
.dropdown-item {
    color: #000000 !important;
    /* Black Text */
    font-weight: 600;
}

/* Submenu Hover Effect */
.dropdown-item:hover {
    background-color: #87ceeb !important;
    /* Slightly Darker Blue */
    color: #ffffff !important;
    /* White Text */
}

.dropdown-submenu {
    position: relative;
}


/* Submenu Arrow */
.dropdown-submenu>a:after {
    content: "\f0da";
    /* Unicode for right arrow */
    float: right;
    margin-right: 10px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* Show submenu on hover */
.dropdown-submenu:hover>.submenu {
    display: block;
}

.topbar-height {
    height: 45px;
}
.modal-bg-overlay {
    background: rgba(9, 30, 62, 0.7);
}
.input-h-55 {
    height: 55px;
}

.hidden {
    display: none;
}

.logo-spacing {
    margin-top: 20px;
    margin-bottom: 20px;
}

.logo-size {
    max-width: 250%;
    height: 125px;
}
.footer-bg {
    background: #061429;
}

.footer-height {
    height: 75px;
}

.chart-container {
    width: 100%;
    height: 500px;
}