body {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
}

.hero {
    background: url('/static/images/hero-bg.jpg') no-repeat center center;
    background-size: cover;
    color: white;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
}
.hero p {
    font-size: 1.2rem;
    margin-top: 1rem;
}
.info-box {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 2rem;
}
.stats-section {
    background-color: black;
    color: white;
    padding: 2rem 0;
}
.stats-item {
    text-align: center;
}
.stats-item h3 {
    font-size: 2rem;
    font-weight: bold;
}
.stats-item i {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}
.kpi-section {
    background-color: #e9f7f9;
    padding: 3rem 0;
}
footer {
    background-color: black;
    color: white;
    padding: 1rem 2rem;
    text-align: center;
}
.image-text-section {
    padding: 4rem 0;
}
.image-text-section img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.highlighted-text {
    color: #007bff;
    font-weight: bold;
}
.teal-background {
    background-color: #e0f2f1;
    padding: 4rem 0;
    color: #333;
}
.teal-background img {
    width: 50%;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
}
.teal-background p {
    margin-top: 2rem;
    text-align: center;
    font-size: 1.1rem;
}

.navbar {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1rem;
}

.navbar-brand img {
    height: 120px;
}

.navbar-nav .nav-link {
    margin: 0 5px;
    color: #333;
    text-transform: capitalize;
    transition: color 0.3s ease;
    text-align: center;
}

.navbar-nav .nav-link:hover {
    color: #007bff;
}

.language-toggle img {
    cursor: pointer;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.language-toggle img:hover {
    transform: scale(1.2);
}

.text-center {
    text-align: center;
}

.circular-image {
    width: 150px; /* Fixed width */
    height: 150px; /* Fixed height */
    border-radius: 50%; /* Makes the image circular */
    object-fit: cover; /* Ensures the image content is not stretched */
    border: 2px solid #ddd; /* Optional: Border for aesthetics */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds shadow for better visibility */
}

.contact-container {
    background-color: #111; /* Dark background for contact info */
    color: #fff; /* White text */
    border-radius: 10px; /* Rounded corners */
    padding: 20px;
}

.contact-container h4 {
    color: #f57c00; /* Highlight color for the title */
}

.contact-container i {
    margin-right: 10px;
}

.contact-form button {
    background-color: #111; /* Dark button */
    color: #fff;
    border: none;
    transition: background-color 0.3s;
}

.contact-form button:hover {
    background-color: #f57c00; /* Hover effect */
    color: #fff;
}

.contact-banner img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: 20px;
}

.participation-tabs .nav-link {
    color: #333; /* Default text color */
    background-color: transparent; /* Transparent background */
    border: none; /* Remove border */
    font-size: 1rem; /* Adjust font size */
    font-weight: 500; /* Slightly bold */
    padding: 0.5rem 1.5rem; /* Add padding for spacing */
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.participation-tabs .nav-link.active {
    background-color: #0d0d0d; /* Dark background for active tab */
    color: #fff; /* White text for active tab */
    border-radius: 4px; /* Rounded corners */
}

.participation-tabs .nav-link:hover {
    color: #7c7c7c; /* Darker color on hover */
}

.aboutDescr {
    font-size: 0.8rem; 
    font-weight: 300;
}

/* Ensure all cards have consistent height */
.equal-height {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    position: relative; /* Required for button positioning */
}

/* Style for the Read More button */
.read-more-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: black;
    color: white;
    font-size: 0.9rem;
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
    z-index: 1; /* Ensure it stays above other elements */
}

/* Button hover effect */
.read-more-btn:hover {
    background-color: #333;
    color: #fff;
}


.home-participation {
    font-size: 1.25rem; /* Matches h5 size */
    font-weight: 400;   /* Thinner font weight */
    line-height: 2;   /* Add spacing between lines */
    margin-bottom: 1rem; /* Optional for spacing below the title */
    text-align: justify; /* Justify the text */
    text-justify: inter-word; /* Optional: improves word spacing for justification */
    padding: 2rem;
}

.home-description {
    font-weight: 400;   /* Thinner font weight */
    margin-bottom: 3rem; /* Optional for spacing below the title */
    text-align: justify; /* Justify the text */
    text-justify: inter-word; /* Optional: improves word spacing for justification */
    padding: 2rem;
}

.sponsors {
    text-align: center; /* Centers content horizontally */
    margin: 0 auto; /* Optional: Center the entire container */
    max-width: 800px; /* Optional: Limit the container width */
}

.sponsor-logos {
    display: flex;
    justify-content: center; /* Horizontally aligns the images */
    gap: 20px; /* Space between the logos */
    margin-bottom: 20px; /* Space between images and the text */
}

.sponsor-logos img {
    max-height: 100px; /* Ensures the logos have a uniform height */
    object-fit: contain; /* Maintains aspect ratio */
}

.sponsor-text {
    font-size: 1rem; /* Adjust the font size */
    line-height: 1.5; /* Improve readability */
    margin-top: 3rem;
}


.hero-text-bg {
    background-color: rgba(26, 82, 71, 0.4); /* Light green with transparency */
    padding: 20px 40px; /* Add padding inside the box */
    border-radius: 5px; /* Optional: Rounded corners */
    display: inline-block; /* Ensures the background adjusts to the text size */
    text-align: center; /* Centers text */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Optional: Add shadow for better visibility */
    width: 80%; /* Full width of the container */
    font-size: 3rem; /* Default size for larger screens */
  }


/* Adjust font size for mobile screens */
@media (max-width: 768px) { /* Targets devices with width ≤ 768px */
    .hero-text-bg {
        font-size: 2rem; /* Smaller font size for mobile */
    }
}

@media (max-width: 576px) { /* Targets devices with width ≤ 576px */
    .hero-text-bg {
        font-size: 1.8rem; /* Even smaller font size for extra small screens */
    }
}

  /* Container for the card image with 3:2 aspect ratio */
.card-img-container {
    width: 100%;
    aspect-ratio: 3 / 2; /* Ensures a fixed 3:2 aspect ratio */
    overflow: hidden; /* Crops any excess content */
    position: relative;
}

/* Styling for the image inside the container */
.card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container without distortion */
    object-position: center; /* Centers the image for a better crop */
}

/* Style for the "Read More" buttons */
.btn-primary {
    background-color: black; /* Black background for the button */
    border-color: black; /* Black border for the button */
    color: white; /* White text for contrast */
}

.btn-primary:hover {
    background-color: #333; /* Slightly lighter black for hover effect */
    border-color: #333; /* Match the border color to the hover background */
    color: white; /* Keep the text white */
}

/* Style for pagination links */
.pagination a, .pagination span {
    background-color: black; /* Black background for pagination links */
    color: white; /* White text for contrast */
    border: 1px solid black; /* Black border */
    padding: 5px 10px; /* Adjust padding as needed */
    margin: 2px; /* Spacing between links */
    text-decoration: none; /* Remove underline */
    border-radius: 3px; /* Optional: Add rounded corners */
}

.pagination a:hover {
    background-color: #333; /* Slightly lighter black for hover effect */
    color: white; /* Keep the text white */
    border-color: #333; /* Match border color */
}


/* Optional: Fine-tune image styles */
.float-start {
    max-width: 50%; /* Adjust image width as needed */
    height: auto; /* Maintain aspect ratio */
}

@media (max-width: 768px) {
    .float-start {
        float: none; /* Disable floating on smaller screens */
        margin-right: 0; /* Reset margin */
    }
}

.teacher-image {
    height: 150px; /* Adjust as needed */
    object-fit: cover; /* Ensures the image fills the dimensions without distortion */
}

.card {
    height: 100%; /* Ensures cards are of equal height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-body {
    flex-grow: 1; /* Ensures the body grows to fill space */
}

.stats-section {
    background-color: #000; /* Black background for contrast */
    color: #fff; /* White text for readability */
    padding: 50px 0;
}

.stats-item i {
    color: #fffdf7; /* Highlight color for icons */
}

.stats-item h3 {
    font-size: 2rem;
    font-weight: bold;
}

.stats-item p {
    font-size: 1rem;
}

.info-box {
    background-color: #fff; /* White background */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
    font-size: 0.9rem; /* Smaller font size */
}

.info-box h5 {
    font-weight: bold;
    color: #000; /* Title in black */
}

.info-box p {
    margin-bottom: 0.5rem;
    color: #333; /* Slightly darker text */
}

.info-box a {
    color: #333;
    text-decoration: none;
}

.info-box a:hover {
    color: #007bff; /* Highlight links on hover */
}

.align-items-stretch {
    display: flex;
    flex-wrap: wrap; /* Ensures proper alignment on smaller screens */
}

.align-items-stretch .col-md-6 {
    display: flex;
    flex-direction: column;
}

.align-items-stretch .p-4 {
    flex-grow: 1; /* Makes the black div stretch to match the height */
}

form.h-100 {
    height: 100%; /* Ensures the form fills the available space */
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures spacing between body and button */
    height: 100%; /* Makes all cards equal height */
}

.card-body {
    flex-grow: 1; /* Allows body to take up available space */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.btn-primary {
    margin-top: auto; /* Pushes the button to the bottom */
    align-self: flex-end; /* Aligns button to bottom-right corner */
}

.meeting-date-container {
    display: none; /* Hide by default */
}

.table td img {
    margin-right: 2px;
    vertical-align: middle;
}

.small-font-list {
    font-size: 0.9rem; /* Adjust the size as needed */
}

.small-font-list .list-group-item {
    font-size: 0.9rem; /* Ensure consistency for items */
}

#bioModalContent {
    font-size: 0.875rem; /* Smaller font size (14px if the root font size is 16px) */
}