﻿body {
}
#galleryCarousel .carousel-inner1 .carousel-item {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align items at the top */
    flex-direction: column; /* Stack items vertically */
    padding: 10px; /* Add padding around the item */
}

.carousel-item {
    width: 300px; /* Set a fixed width for the card */
    height: 300px; /* Set a fixed height for the card */
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center items horizontally */
    overflow: hidden; /* Hide overflow to maintain uniformity */
    margin: 10px; /* Add some margin around the card */
    border-radius: 10px; /* Optional: Add border radius */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add shadow */
}

    .carousel-item img {
        width: 100%; /* Make image take the full width of the card */
        height: 100%; /* Make image take the full height of the card */
        object-fit: cover; /* Cover the area while maintaining aspect ratio */
        border-radius: 10px; /* Optional: Add border radius to the image */
    }

    .carousel-item .details {
        text-align: center; /* Center the text */
        font-size: 16px; /* Adjust font size */
        color: #333; /* Change text color */
        padding: 10px; /* Add padding around the details */
        flex-grow: 1; /* Allow details to take up remaining space */
    }
.carousel-inner1 {
    justify-content: center;
    display: flex;
    align-items: center;
}
/*event css*/
.carousel-inner {
    display: flex;
}
.carousel-item {
    display: flex;
    padding: 10px; /* Optional: Adjust padding as needed */
}

    .carousel-item img {
        width: 100px; /* Set a more reasonable width for the image */
        height: auto; /* Maintain aspect ratio */
        margin-right: 20px; /* Space between the image and details */
    }

.details {
    flex-grow: 1; /* Allow details to take up remaining space */
    color: #333; /* Adjust text color */
}

    .details h5 {
        font-size: 1.5rem; /* Adjust font size for event name */
        margin: 0; /* Remove default margin */
        color: #fa9300;
        font-size:24px;
    }

    .details p {
        margin: 5px 0; /* Space between paragraphs */
        font-size: 1rem; /* Adjust font size for description and date */
        color: #b10819;
    }

.carousel-item2 {
    display: flex;
    padding: 10px;
    width : 400px;
    height: 350px;
}
.image-holder {
    width: 40%;
    margin: auto;
}
.details {
    width: 60%;
    margin: auto;
    padding-left :10px;
}

.member-cards {
    display: flex; /* Enable flexbox layout */
    justify-content: space-between; /* Space between items */
    flex-wrap: wrap; /* Allow items to wrap if necessary */
    padding: 20px; /* Padding around the container */
}

.member-card {
    flex: 0 1 calc(25% - 20px); /* Each card takes up 25% of the width minus margin */
    background-color: #fa9300; /* White background for cards */
    border: 1px solid #ddd; /* Light border */
    border-radius: 8px; /* Rounded corners */
    margin: 10px; /* Space around cards */
    text-align: center; /* Center align text */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    height: 300px; /* Set a fixed height for the card */
}

.ser-po-icon {
    display: block;
    width: 100%;
    height: 150px; /* Fixed height for images */
    background-size: cover; /* Cover the area */
    background-position: center; /* Center the image */
    border-top-left-radius: 8px; /* Rounded corners */
    border-top-right-radius: 8px; /* Rounded corners */
    
    margin-top: 38px !important;
    margin-bottom: 27px !important;
}
    .member-card:hover {
        transform: scale(1.05); /* Slight zoom on hover */
    }


h3 {
    margin: 10px 0; /* Space around the heading */
    font-size: 1.2em; /* Font size for heading */
    color: #000000 !important;
    font-size: 17px !important; 
    font-weight: 400 !important;
}

p {
    color: #666; /* Gray color for description */
    font-size: 0.9em; /* Font size for description */
    margin-bottom: 15px; /* Space below the paragraph */
}
.modal-content img {
    width: 100%;
    height: auto;
    text-align: center;
}
/*.image-holder img {
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

    .image-holder img:hover {
        transform: scale(1.2);*/ 
       /*/ box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow for better appearance */
        /*cursor: pointer; 
    }*/
    