html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Full height for the page */
    box-sizing: border-box;
}





/* Contact Us Section */
.contact-us-section2 {
    background-color: #CDE4EC; /* Background color */
    background-image: url('../img/contact-banner.png'); /* Path to your image */
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center; /* Centers the image */
    height: 500px; /* Set a fixed height to make the section larger */
    display: flex; /* Flexbox for centering content */
    align-items: center; /* Vertically center the text */
    justify-content: center; /* Horizontally center the text */
    text-align: center; /* Center the heading */
    padding: 0 20px; /* Add padding for side spacing */
    color: #00338E; /* Text color */
}
.contact-us-section2 h1 {
    font-size: 4em; /* Larger font size for the heading */
    margin: 0; /* Remove default margin */
    text-align: left;
}

/* Container to center and control width */
.contact-details-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align top of the two sections */
    padding: 50px 20px;
    background-color: #F5F5F5; /* Light background */
    max-width: 1200px; /* Maximum width for the container */
    margin: 0 auto; /* Center the container */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
}

/* Left side: Contact Details */
.contact-details {
    width: 100%; /* Takes up nearly half of the section */
    padding-right: 20px;
}

.contact-details p {
    font-size: 1.1em;
    line-height: 1.6em;
    /* color: #333; */
}

.contact-details a {
    color: #00338E;
    text-decoration: none;
}

.contact-details a:hover {
    text-decoration: underline;
}

/* Right side: Contact Us Form */
.contact-form {
    width: 48%; /* Slightly smaller than the left side */
    padding: 20px;
    background-color: white;
    border: 2px solid #00338E; /* Border around the contact form */
    border-radius: 10px; /* Rounded corners */
    box-sizing: border-box; /* Ensure padding is included in width calculation */
}

.contact-form p {
    font-size: 1.1em;
    /* color: #333; */
}

.contact-btn {
    display: block;
    width: 100%; /* Full width buttons */
    padding: 15px;
    margin: 15px 0;
    background-color: #00338E;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-btn:hover {
    background-color: #002070;
}

/* Disclaimer Text */
.disclaimer {
    margin-top: 20px;
    font-size: 0.9em;
    /* color: #666; */
}

.disclaimer a {
    color: #00338E;
    text-decoration: none;
}

.disclaimer a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-details, .contact-form {
        width: 100%; /* Stack the content vertically on smaller screens */
    }

    .contact-details {
        padding-right: 0;
        margin-bottom: 30px; /* Add space between stacked sections */
    }
}

/* Modal Container */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.7); /* Dark background with transparency */
    font-family: 'Arial', sans-serif;
}

/* Modal Content */
.modal-content {
    background-color: white;
    margin: 5% auto; /* Centered horizontally */
    padding: 30px;
    border-radius: 15px; /* Rounded corners */
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: fadeInModal 0.3s ease; /* Smooth fade-in animation */
}

/* Modal Fade-in Animation */
@keyframes fadeInModal {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Close Button (X) */
.close {
    color: #333;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: #555;
}

/* Modal Header with Icon */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.modal-icon {
    font-size: 2.5em;
    color: #00338E;
    margin-right: 15px;
}

.modal-header h2 {
    font-size: 1.8em;
    color: #00338E;
    margin: 0;
}

/* Modal Description */
.modal-description {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 20px;
}

/* Form Styles */
.modal-content label {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    display: block;
}

.modal-content input, .modal-content textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #CCC;
    border-radius: 5px;
    font-size: 1em;
}

.modal-content textarea {
    resize: vertical; /* Allow resizing only vertically */
}

/* Modal Button */
.modal-btn {
    background-color: #00338E;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    width: 100%;
    text-align: center;
    transition: background-color 0.3s ease;
}

.modal-btn:hover {
    background-color: #002070;
}

/* Disclaimer Text */
.modal-disclaimer {
    font-size: 0.85em;
    color: #777;
    margin-top: 15px;
}

/* Icon Font (use FontAwesome or similar icon library) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');




/* NEWS and UPDATES styling */
.news-updates-section {
    text-align: center; /* Center-align the title and content */
    padding: 50px 20px; /* Add padding around the section */
    background-color: white; /* Set white background */
}

.news-updates-section h1 {
    font-size: 3em; /* Font size for the title */
    color: #00338E; /* Title color */
    margin-bottom: 20px;
}

.news-updates-section p {
    font-size: 1.2em; /* Font size for the description text */
    color: #333; /* Text color */
    margin-bottom: 40px;
}

/* Grid Layout for News Items */
.news-grid {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping of items into new rows */
    justify-content: space-between; /* Evenly spaces out columns */
    gap: 26px; /* Add space between grid items */
}

.news-item {
    background-color: #FFFFFF; /* White background for the news item */
    /* border: 2px solid #0054A5;  */
    padding: 20px; /* Add padding inside the box */
    width: calc(33.333% - 20px); /* Set the width of each item to one-third of the container */
    box-sizing: border-box; /* Ensures padding and border are included in the width */
    margin-bottom: 20px; /* Space between rows */
}

/* Ensuring images have the same height */
.news-image {
    width: 100%; /* Make the image take full width */
    height: 400px; /* Fixed height for all images */
    object-fit: cover; /* Ensures the image scales to fit while maintaining aspect ratio */
    margin-bottom: 20px;
}

.read-more {
    display: inline-block;
    padding: 10px 20px;
    color: #0054A5; /* Link color */
    text-decoration: none; /* Remove underline */
    font-weight: bold;
    border: 2px solid #0054A5; /* Border around the "Read more" link */
    border-radius: 5px; /* Rounded edges for the button */
    transition: background-color 0.3s ease, color 0.3s ease; /* Add hover effects */
}

.read-more:hover {
    background-color: #0054A5; /* Blue background on hover */
    color: white; /* White text on hover */
}

/* Responsive design */
@media (max-width: 768px) {
    .news-item {
        width: calc(50% - 20px); /* Two columns on smaller screens */
    }
}

@media (max-width: 480px) {
    .news-item {
        width: 100%; /* Full width on very small screens */
    }
}




/* image slider news */









/* End NEWS and UPDATES styling */




/* Payments */

/* First Banner styling */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.banner-cover {
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: space-between; /* Image and text on opposite sides */
    background-color: #F5F5F5 !important;
    height: 100vh; /* Full viewport height */
    position: relative;
}

.banner-payment {
    position: relative;
    width: 100%;
    height: 600px;
    background-image: url('../img/payment-image.png'); /* Ensure correct path */
    background-size: contain; /* Scale the image to fit without repeating */
    background-position: center right; /* Align the image to the right */
    background-repeat: no-repeat; /* Ensure the image doesn’t repeat */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Keep text on the left */
    padding: 20px;
}

.payment-text {
    width: 40%; /* Text occupies 40% of the container */
    z-index: 2;
    text-align: left; /* Ensure text alignment on the left */
}

.payment-text h1 {
    font-size: 3em; /* Larger text size */
    color: #00338E;
}

.payment-text-link {
    text-decoration: none;
}

.pay-button {
    border: 2px solid #F5F5F5; /* Border color matches background */
    padding: 10px 20px;
    font-size: 1.2em;
    font-weight: bold;
    background-color: #00338E;
    color: white;
    border-radius: 25px; /* Rounded edges */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth hover transition */
}

.pay-button:hover {
    background-color: #002070; /* Darker blue on hover */
}

/* Second Section: Payment Channels */
.payment-channels-section {
    text-align: center; /* Center the text and image */
    padding: 50px 0; /* Add some spacing around the section */
    background-color: #FFF; /* Background color for the second section */
}

.payment-channels-section h2 {
    font-size: 2.5em;
    color: #00338E;
    margin-bottom: 10px;
}

.payment-channels-section p {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 20px;
}

.payment-channels-image {
    width: 100%; /* Full width of the container */
    max-width: 900px; /* Increase the max width to make the image larger */
    height: auto; /* Maintain the aspect ratio */
    margin: 0 auto; /* Center the image */
}

/* Responsive design */
@media (max-width: 768px) {
    .banner-cover {
        flex-direction: column; /* Stack image and text vertically on smaller screens */
        height: auto;
    }

    .banner-payment {
        width: 100%; /* Image takes full width on small screens */
        height: 50vh; /* Adjust image height for smaller screens */
        background-position: center; /* Center the image */
    }

    .payment-text {
        width: 100%; /* Text takes full width */
        text-align: center;
    }

    .payment-text h1 {
        font-size: 2em; /* Adjust text size for smaller screens */
    }

    .payment-channels-section h2 {
        font-size: 2em; /* Adjust heading size for smaller screens */
    }

    .payment-channels-image {
        width: 100%; /* Image takes full width on small screens */
        max-width: 100%;
    }
}


/* end of payment */




/* Our Partners */


.our-partners-container {
    display: flex;
    justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Centers the content vertically */
    flex-direction: column; /* Stacks the .our-partners and .our-partners2 vertically */
    width: 100%; /* Ensures full width of the container */
    text-align: center;
}

.our-partners {
    color: #0054A5;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    padding-top: 50px;
}

.our-partners2 {
    color: #0054A5;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.partner-box {
    width: 100%;
    height: 200px;
    background-color: #f0f0f0; /* Light gray background */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    border: 2px solid #0054A5; /* Blue border */
    border-radius: 8px; /* Optional: to make the corners rounded */
}

.partner-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensures the image fits nicely */
}

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
    .partner-box {
        height: 150px; /* Adjust height for smaller screens */
    }
}


/* Full-width gray background for testimonials */
.full-width-testimonials {
    width: 100%;
    background-color: #e0e0e0; /* Light gray background */
    padding: 50px 0; /* Space above and below */
}

/* Individual testimonial items */
.testimonial-item {
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

/* Testimonial image styling with blue border and white background */
.testimonial-image-box {
    width: 100%;
    max-width: 300px; /* Set a max-width to maintain the same size */
    height: 200px; /* Fixed height to maintain uniformity */
    background-color: white; /* White background for the image box */
    border: 2px solid #0054A5; /* Blue border */
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ensures image fits within the box */
    margin: 0 auto; /* Center image box in the column */
}

.testimonial-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Ensures image fills the box uniformly */
    border-radius: 8px; /* Image keeps rounded corners */
}

/* Testimonial content */
.testimonial-content-box {
    padding-left: 20px;
}

.testimonial-title {
    color: #0054A5;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.testimonial-text {
    font-size: 1.2rem;
    color: #333;
    line-height: 1.6;
}

/* Responsive layout adjustments */
@media (max-width: 768px) {
    .testimonial-title {
        font-size: 1.5rem;
    }

    .testimonial-text {
        font-size: 1rem;
    }

    .testimonial-image-box {
        max-width: 100%; /* Adjust the width for smaller screens */
        height: 150px; /* Reduce height for smaller screens */
    }
}

/* End of Our Partners */


/* explore our plan */

/* General Section Styling */
.container {
    /* margin-top: 40px; */
    /* position: relative; */
}

/* Line Divider between Sections */
.section-divider {
    width: 100%;
    border-top: 2px solid #e5e5e5;
    margin: 50px 0;
}

/* MEMORIAL PLANS SECTION */
/* Styles for the h1 */
h1 {
    color: #0054A5;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Styles for Memorial Plans */
.memorial-paragraph {
    width: 75%;
    margin: 0 0 20px 0;
    text-align: justify;
}

/* Adjust the toggle sections for Memorial Plans */
.memorial-fund-container {
    background-color: white;
    border-radius: 50px;
    padding: 20px;
    width: 75%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    border: 2px solid #0054A5;
}

.memorial-fund-text {
    font-size: 28px;
    font-weight: bold;
    color: #0054A5;
}

.plus-sign {
    font-size: 28px;
    font-weight: bold;
    color: #0054A5;
    margin-right: 10px;
}

/* Description section styles for Memorial Plans */
.memorial-description {
    width: 75%;
    margin: 20px 0;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Right side background image for Memorial Plans */
.right-background {
    background-image: url('/assets/img/emplore-our-plans-banner.png');
    background-size: cover;
    background-position: center right;
    height: 100vh;
    position: absolute;
    right: 0;
    top: 20;
    width: 50vw;
    z-index: -1;
}

.left-content {
    position: relative;
    z-index: 10;
    width: 50vw;
}

/* PENSION PLANS SECTION */
.pension-section-background {
    background-color: #F5F5F5; /* Set background color for the whole section */
    width: 100vw; /* Ensure full width */
    min-height: 100vh; /* Full height */
    display: flex;
    position: relative;
    margin: 0;
    padding: 0;
}

.pension-section {
    position: relative;
    min-height: 100vh; /* Ensure section covers full height */
    z-index: 10; /* Content stays above the background */
}

.pension-right-background {
    background-image: url('/assets/img/pension-plans.png');
    background-size: cover;
    background-position: 20% center;
    height: 100vh;
    position: absolute;
    right: 0;
    top: 0;
    width: 50vw;
    z-index: -1;
}

.pension-left-background {
    background-image: url('/assets/img/pension-plans.png');
    background-size: cover;
    background-position: -80px center; /* Move the image 10px to the left */
    height: 100vh; /* Set to full viewport height */
    width: 50vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Ensure the image is layered behind content */
}


.pension-right-content {
    position: relative;
    z-index: 10;
    width: 50vw;
    padding-right: 20px;
    margin: 0 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    text-align: right;
    padding-top: 50px;
}

.pension-paragraph {
    width: 75%;
    text-align: right;
    margin-bottom: 20px;
}

/* Adjust the toggle sections for Pension Plans */
.pension-fund-container {
    background-color: white;
    border-radius: 50px;
    padding: 20px;
    width: 65%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    border: 2px solid #0054A5;
}

.pension-fund-text {
    font-size: 28px;
    font-weight: bold;
    color: #0054A5;
}

.plus-sign {
    font-size: 28px;
    font-weight: bold;
    color: #0054A5;
    margin-right: 10px;
}

/* Description section styles for Pension Plans */
.pension-description {
    width: 65%;
    margin: 20px 0;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
}

/* MEDIA QUERIES FOR RESPONSIVENESS */
@media (max-width: 768px) {
    /* Stacking content on smaller screens */
    .left-content,
    .right-background,
    .pension-right-background,
    .pension-left-background,
    .pension-right-content {
        width: 100vw; /* Full-width layout on mobile */
        position: relative;
        text-align: center;
    }

    /* Adjust image height for mobile */
    .right-background,
    .pension-right-background,
    .pension-left-background {
        height: 50vh;
        background-position: center center;
    }

    /* Adjust text and container spacing */
    .pension-right-content {
        padding-right: 0;
        align-items: center;
    }

    /* Resize text and elements for mobile */
    h1 {
        font-size: 1.8rem;
    }

    .memorial-fund-text,
    .pension-fund-text,
    .plus-sign {
        font-size: 22px;
    }

    .pension-paragraph,
    .memorial-paragraph {
        width: 90%;
    }

    .pension-fund-container,
    .memorial-fund-container {
        width: 65%;
    }
}

/* EDUCATION PLANS */

/* EDUCATION PLANS SECTION */
.education-section-background {
    background-color: #FFFFFF; /* Set background color for the whole section */
    width: 100vw; /* Ensure full width */
    min-height: 100vh; /* Full height */
    display: flex;
    position: relative;
    margin: 0;
    padding: 0;
}

.education-section {
    position: relative;
    min-height: 100vh; /* Ensure section covers full height */
    z-index: 10; /* Content stays above the background */
}

.education-right-background {
    background-image: url('/assets/img/educ-plans3.jpg'); /* Replace with actual image path */
    background-size: cover;
    background-position: center right;
    height: 100vh; /* Set to full viewport height */
    width: 50vw;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1; /* Ensure the image is layered behind content */
}

.education-left-content {
    position: relative;
    z-index: 10;
    width: 50vw;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    padding-top: 50px;
}

.education-paragraph {
    width: 65%;
    text-align: left;
    margin-bottom: 20px;
}

/* Adjust the toggle sections for Education Plans */
.education-fund-container {
    background-color: white;
    border-radius: 50px;
    padding: 20px;
    width: 65%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    border: 2px solid #0054A5;
}

.education-fund-text {
    font-size: 28px;
    font-weight: bold;
    color: #0054A5;
}

.plus-sign {
    font-size: 28px;
    font-weight: bold;
    color: #0054A5;
    margin-right: 10px;
}

/* Description section styles for Education Plans */
.education-description {
    width: 65%;
    margin: 20px 0;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
}

/* MEDIA QUERIES FOR RESPONSIVENESS */
@media (max-width: 768px) {
    .education-left-content,
    .education-right-background {
        width: 100vw; /* Full-width layout on mobile */
        position: relative;
        text-align: center;
    }

    /* Adjust image height for mobile */
    .education-right-background {
        height: 50vh;
        background-position: center center;
    }

    /* Adjust text and container spacing */
    .education-left-content {
        padding-left: 0;
        align-items: center;
    }

    /* Resize text and elements for mobile */
    h1 {
        font-size: 1.8rem;
    }

    .education-fund-text,
    .plus-sign {
        font-size: 22px;
    }

    .education-paragraph {
        width: 65%;
    }

    .education-fund-container {
        width: 65%;
    }
}

/* Inquire Now button styling */
.inquire-now-btn {
    background-color: #0054A5;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
    font-size: 16px;
}

.inquire-now-btn:hover {
    background-color: #003b78; /* Darker shade on hover */
}


/* who we are */

/* Banner wrapper */
.banner-wrapper {
    background-image: url('/assets/img/whoweare-banner.png'); /* Path to your banner image */
    background-size: contain; /* Make the background image smaller, maintaining aspect ratio */
    background-position: right center; /* Move the image to the right side */
    background-repeat: no-repeat; /* Prevent the background from repeating */
    padding-top: 20px; /* Reduce the padding to minimize space */
    padding-bottom: 20px; /* Reduce the padding to minimize space */
    height: auto; /* Ensure height adjusts with content */
}

/* H2 inside the half-width-content */
.half-width-content h2 {
    color: #0054A5;
    font-size: 2.5rem;
    font-weight: bold;
    text-align: left; /* Keep the h2 aligned to the left */
}

/* Style for the content inside the banner */
.half-width-content {
    max-width: 50%; /* Limit the content width to half of the page */
    text-align: left;
    padding-right: 20px; /* Optional: Add some padding to the right */
    padding-bottom: 20px; /* Padding at the bottom for spacing */
}

/* Paragraph styling inside half-width-content */
.half-width-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: #000;
}

/* Style for the second content section */
.half-width-content2 {
    max-width: 50%;
    text-align: left;
    padding-right: 20px;
}

/* Paragraph styling inside half-width-content2 */
.half-width-content2 p {
    font-size: 1rem;
    line-height: 1.6;
    color: #000;
}

/* Add a vertical line before each paragraph */
.lined-text {
    position: relative;
    padding-left: 20px; /* Space between the line and the text */
    margin-bottom: 20px; /* Space between paragraphs */
}

/* Styling for the vertical line before each paragraph */
.lined-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px; /* Thickness of the line */
    background-color: #0054A5; /* Color of the line */
}

/* Strong tag color for emphasis */
strong {
    color: #000; /* Change text color to black */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .half-width-content, .half-width-content2 {
        max-width: 100%; /* Make content full width on smaller screens */
        padding-right: 0; /* Remove right padding on smaller screens */
    }

    .half-width-content h2 {
        font-size: 2rem; /* Reduce font size for headings on smaller screens */
    }

    .half-width-content p, .half-width-content2 p {
        font-size: 0.9rem; /* Adjust paragraph font size for smaller screens */
    }
}

@media (max-width: 576px) {
    .half-width-content h2 {
        font-size: 1.8rem; /* Smaller heading size for very small screens */
    }

    .half-width-content p, .half-width-content2 p {
        font-size: 0.85rem; /* Smaller paragraph font size */
    }
}

/* Vision and Mission Section Styling */
.vision-mission-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 40px auto; /* Center the whole section */
    background-color: white;
    border: 4px solid #0054A5; /* Blue border */
    border-radius: 50px; /* Oval shape */
    padding: 40px;
    max-width: 65%; /* Occupy 65% of the screen width */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slight shadow */
    text-align: center; /* Center the text */
    position: relative; /* Ensure vertical divider works properly */
}

.vision-content, .mission-content {
    width: 45%; /* Each section takes up 45% of the available space */
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center content vertically and horizontally */
}

.vision-mission-title {
    color: #0054A5; /* Blue color for titles */
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.vision-content p, .mission-content p {
    font-size: 1rem;
    color: #000;
    line-height: 1.6;
}

/* Vertical Black Divider */
.vertical-divider {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 80%; /* Ensure the divider takes up most of the height */
    width: 2px;
    background-color: black; /* Black color for the vertical line */
    margin: 0 auto;
    z-index: 1;
}

@media (max-width: 768px) {
    .vision-mission-wrapper {
        flex-direction: column; /* Stack vertically on smaller screens */
        padding: 20px;
        max-width: 90%; /* Expand to 90% width on smaller screens */
    }

    .vertical-divider {
        display: none; /* Remove vertical line on smaller screens */
    }

    .vision-content, .mission-content {
        width: 100%; /* Full width for each section on small screens */
        text-align: center; /* Keep text centered on small screens */
    }
}

/* Second Banner and Slider styling */
.banner2 {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('../img/banner-2.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner2-text {
    color: #0054A5;
    font-size: 2.5rem;
    font-weight: bold;
    text-align: left;
    line-height: 1.1;
    position: absolute;
    right: 0;
    padding-right: 20px;
    width: 50%;
    top: 30%; /* Move the text higher (adjust the value as needed) */
}

.banner2-text p {
    color: black;
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
}

.banner3-text {
    color: #0054A5;
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center; /* Center the heading horizontally */
    line-height: 1.1;
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Ensure text and paragraph are stacked vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    height: 30vh; /* Adjust height based on content */
    width: 100%; /* Full width */
    margin: 0 auto; /* Center horizontally */
    padding: 10px; /* Add padding for better spacing */
    margin-bottom: -40px; /* Minimize space between WHO WE ARE and WHAT WE DO */
}

.banner3-text p {
    color: black;
    font-size: 15px;
    line-height: 1.5;
    text-align: center; /* Center the paragraph text */
    width: 100%; /* Make the paragraph take full width of the container */
    max-width: none; /* Remove the previous width limit */
    font-weight: normal; /* Ensure the text is not bold */
}


/* Company Profile Section */
.company-profile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    background-color: #0054A5;
}

/* Custom Container for Company Profile */
.container-profile {
    text-align: center;
}

/* View Our Company Profile Button Style */
.view-company-profile {
    background-color: transparent;
    border: 2px solid white;
    padding: 10px 30px;
    border-radius: 50px;
    display: inline-block;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Add hover effect for the button */
.view-company-profile:hover {
    background-color: white;
    color: #0054A5;
}



/* Board Members Grid */
/* Board Members Grid */
.board-members {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns by default */
    gap: 150px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* Center the board members section horizontally */
    justify-items: center; /* Center items in their cells */
}

/* Adjust the number of columns based on screen size */
@media (min-width: 600px) {
    .board-members {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for medium-sized screens */
    }
}

@media (min-width: 900px) {
    .board-members {
        grid-template-columns: repeat(4, 1fr); /* 4 columns for larger screens */
    }
}

@media (min-width: 1200px) {
    .board-members {
        grid-template-columns: repeat(5, 1fr); /* 5 columns for extra-large screens */
    }
}

/* Custom behavior for last row if there are fewer than 4 items */
.board-members > .member:nth-last-child(3),
.board-members > .member:nth-last-child(2),
.board-members > .member:last-child {
    grid-column: span 1; /* Ensure last items span only one column */
    justify-self: center; /* Center the last 3 items in the grid */
}

/* Independent Directors Grid - Always centered */
.independent-directors {
    display: flex;
    justify-content: center; /* Align all items to the center */
    gap: 150px;
    width: 100%;
    max-width: 1000px;
    margin-bottom: 20px;
}

/* Adjust for smaller screens */
@media (max-width: 900px) {
    .independent-directors {
        flex-wrap: wrap;
        justify-content: center; /* Center all directors in a single line */
    }
}

/* Individual Board Member */


.independent-directors2 {
    display: flex;
    justify-content: center; /* Align all items to the center */
    gap: 165px;
    width: 100%;
    max-width: 1000px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .independent-directors2 {
        flex-wrap: wrap;
        justify-content: center; /* Center all directors in a single line */
    }
}




/* Placeholder for member's picture with white border */

.picture {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: gray; /* Placeholder color */
    margin: 0 auto 8px;
    border: 2px solid white; /* White border added to the picture */
}

.member p strong {
    display: block; /* Ensures each name is on a single line */
    font-size: 12px; /* Adjust as needed */
    white-space: nowrap; /* Prevents breaking within names */
    margin-bottom: 0px;
    color: white;
}

.member p {
    font-size: 12px;
    color: white;
    text-align: center;
    white-space: normal; /* Allow wrapping for titles */
}

.member p span {
    display: block; /* Separate each part of the title */
    color: white;
}
.picture img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Matches the container's style */
    object-fit: cover; /* Ensures the image fills the container proportionally */
}






/* who we are end */



/* Header styling */
.navbar {
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 15px 0; /* Padding for top and bottom */
    position: fixed; /* Makes the navbar fixed at the top */
    top: 0; /* Sticks to the top of the viewport */
    width: 100%; /* Full width */
    z-index: 1000; /* Keeps the header on top of other content */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

/* Add margin to the top of the page to prevent content from hiding under the fixed navbar */
body {
    padding-top: 80px; /* Adjust according to the navbar height */
}

/* Navbar links */
.navbar .nav-link {
    color: #00338E !important;
    padding: 10px 15px; /* Adds padding to each link for better spacing */
    font-weight: 500; /* Slightly bolder text for links */
    transition: color 0.3s ease, background-color 0.3s ease; /* Smooth hover transition */
}

/* Active link styling */
.navbar .nav-link.active {
    background-color: #00AB4F; /* Active background color */
    color: white !important; /* White text for active link */
    border-radius: 20px; /* Rounded corners for active link */
}

/* Hover effect for nav links */
.navbar .nav-link:hover {
    color: #00AB4F !important;
    background-color: rgba(0, 171, 79, 0.1); /* Adds slight background on hover */
    border-radius: 20px;
}

/* Navbar brand */
.navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: #00338E;
}

/* Navbar collapsible button for mobile view */
.navbar-toggler {
    border-color: #00338E;
}

.navbar-toggler-icon {
    color: #00338E;
}
/* Dropdown styling to match the navbar links */
.navbar .dropdown-toggle {
    color: #00338E !important; /* Same color as other nav links */
    padding: 10px 15px;
    font-weight: 500;
    transition: color 0.3s ease, background-color 0.3s ease;
    border-radius: 20px; /* Match the primary nav link roundness */
}

/* Styling for the dropdown items */
.navbar .dropdown-menu {
    background-color: white; /* Background for the dropdown menu */
    border-radius: 20px; /* Rounded corners for the entire dropdown menu */
    border: 1px solid rgba(0, 171, 79, 0.1); /* Subtle border */
    display: none; /* Hide dropdown by default */
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
}

/* Rounder corners for each dropdown item */
.navbar .dropdown-item {
    color: #00338E !important; /* Dropdown link color */
    border-radius: 20px; /* Round each dropdown item */
}

.navbar .dropdown-item:hover {
    color: #00AB4F !important; /* Hover effect for dropdown items */
    background-color: rgba(0, 171, 79, 0.1); /* Background hover effect */
}

/* Active state for the dropdown item */
.navbar .dropdown-item.active {
    background-color: #00AB4F;
    color: white !important;
    border-radius: 20px; /* Match rounded corners */
}

/* Show the dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
}

/* Mobile view handling */
@media (max-width: 992px) {
    .navbar .dropdown-menu {
        display: block;
        position: static;
        float: none;
    }

    .nav-item.dropdown:hover .dropdown-menu {
        display: none; /* Disable hover dropdown for mobile */
    }
}




/* First Banner styling */
.banner {
    position: relative;
    width: 100%;
    height: 600px;
    background-image: url('../img/banner-1.png'); /* Ensure correct path */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner .container {
    position: relative;
    z-index: 2;
}

.banner-text {
    color: white;
    font-size: 3.5rem;
    font-weight: bold;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    text-align: left;
    line-height: 1.1;
}

/* Ensure full width of the banner background */
.banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    z-index: 1;
    opacity: 0.5;
}


/* Text Slider styling */
.slider {
    position: absolute;
    top: 85vh;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    background-color: white;
    z-index: 3;
    box-shadow: 10px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 50px; /* Added margin-bottom */
    border: 5px solid #00338E; /* Add border width, style, and color */
    text-align: center !important;
}


.slider-wrapper {
    display: flex;
    overflow: hidden;
}

.slide {
    display: none;
    padding: 20px;
    text-align: center;
    font-size: 1.2rem;
}

.slide.active {
    display: block;
}

/* Left and Right arrows for text slider */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    padding: 16px;
    color: black;
    font-weight: 900; /* Make the arrows bolder */
    font-size: 30px; /* Increase the font size */
    user-select: none;
    text-decoration: none; /* Remove the underscore */
    background-color: white; /* White circular background */
    border-radius: 50%; /* Circular shape */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.next {
    right: 0;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Circle indicators for text slider */
.slider-indicators {
    text-align: center;
    position: relative;
    margin-top: 15px;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot.active {
    background-color: #00338E;
}

.dot:hover {
    background-color: #717171;
}





/* New Image Slider styling */
.image-slider-container {
    position: relative;
    width: 100%; /* Full width */
    margin: 50px auto;
    text-align: center;
    overflow: hidden;
}

.image-slider-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.image-slide {
    opacity: 0.5;
    filter: blur(2px);
    transition: transform 0.5s ease, filter 0.5s ease;
}

.image-slide.active {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.2); /* Larger size for active image */
}

.image-slide img {
    width: 200px; /* Smaller size for unselected images */
    max-width: 100%;
    border-radius: 10px;
}

.image-slide.active img {
    width: 300px; /* Larger size for the active image */
}

/* Left and Right arrows for image slider */

.image-slider-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%; /* Ensure wrapper takes full width */
    transition: transform 0.5s ease;
}

.image-slide {
    opacity: 0.5;
    filter: blur(2px);
    transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
    transform: scale(0.8); /* Smaller size for left and right */
    position: absolute;
}

.image-slide.active {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.1); /* Full size for the active image */
    position: relative;
    z-index: 1; /* Bring active image in front */
}

.image-slide.left, .image-slide.right {
    transform: scale(1); /* Smaller size for side images */
    z-index: 0; /* Ensure side images are behind the active one */
}

.image-slide.left {
    transform: translateX(-190px) scale(1); /* Position left */
}

.image-slide.right {
    transform: translateX(190px) scale(1); /* Position right */
}
/* Arrow key styling beside the images, black color with circular white background */
.image-prev, .image-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    padding: 10px;
    background-color: white; /* White circular background */
    color: black; /* Black arrow color */
    border-radius: 50%; /* Circular shape */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 2;
    user-select: none;
    border: none; /* No border */
}

.image-next {
    right: 10px; /* Adjust to position closer to the image */
}

.image-prev {
    left: 10px; /* Adjust to position closer to the image */
}

.image-prev:hover, .image-next:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Slight hover effect */
    color: black; /* Keep arrow color black on hover */
}


/* Left and Right arrows for image slider */
.image-prev, .image-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    padding: 10px;
    background-color: white; /* White circular background */
    color: black; /* Black arrow color */
    border-radius: 50%; /* Circular shape */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 2;
    user-select: none;
    border: none; /* No border */
}

/* Position the arrows closer to the images */
.image-next, .image-prev {
    cursor: pointer;
    position: absolute;
    top: 50%; /* Center vertically */
    padding: 16px;
    color: black;
    font-weight: 900; /* Make arrows bold */
    font-size: 28px; /* Increase font size for more prominence */
    user-select: none;
    text-decoration: none; /* Remove any text decoration */
    background-color: white; /* White circular background */
    border-radius: 50%; /* Circular shape */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* Set the circle size */
    height: 50px; /* Set the circle size */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
}

/* Positioning */
.image-next {
    right: calc(50% - 310px); /* Positioning next arrow */
}

.image-prev {
    left: calc(50% - 310px); /* Positioning prev arrow */
}

/* Hover effect */



.image-slider-text {
    width: 100%; /* Full width */
    background-color: #00338E; /* Background color */
    color: white; /* Text color to make it readable */
    padding: 20px; /* Add some padding for spacing */
    box-sizing: border-box; /* Ensure padding is included in width */
    text-align: center; /* Center the text */
    margin-top: 20px; /* Space above the text */
}

#image-text {
    font-size: 1.2rem; /* Adjust font size */
}


/* contact us */
.contact-us-section {
    background-color: #00AB4F; /* Background color */
    color: white; /* Text color */
    padding: 40px 20px; /* Padding for the section */
    text-align: left; /* Center the text */
    width: 100%; /* Full width */
}

.contact-us-section .container {
    max-width: 1200px; /* Limit the max width of the content */
    margin: 0 auto; /* Center the content */
}

.contact-us-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: white; /* Ensure the heading is white */
}

.contact-us-section p {
    font-size: 1.2rem;
    margin-bottom: 10px;
    line-height: 1.5;
}

.contact-us-section a {
    color: white; /* Ensure links are white */
    text-decoration: underline;
}

.contact-us-section a:hover {
    color: #ccc; /* Slight hover effect for links */
}


/* Philplans section styling */
/* Philplans section styling */
.philplans-section {
    background-color: #00338E; /* Background color */
    color: white; /* Text color */
    padding: 40px 20px; /* Padding for spacing */
    text-align: left;
    width: 100%;
}

.philplans-section .container {
    max-width: 1200px; /* Limit the max width of the content */
    margin: 0 auto; /* Center the content */
    display: flex; /* Use flexbox to align content */
    justify-content: space-between; /* Space between the info and follow-us */
    align-items: flex-start; /* Align content to the top */
}

.philplans-section p {
    font-size: 0.8rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.philplans-section a {
    color: white; /* White text for links */
    text-decoration: underline;
}

.philplans-section a:hover {
    color: #ccc; /* Hover effect for links */
}

/* Follow us section */
.follow-us {
    display: flex;
    flex-direction: column; /* Stack "Follow us" text and icons vertically */
    align-items: flex-end; /* Align content to the right */
}

.follow-us span {
    font-size: 1.2rem;
    margin-bottom: 10px; /* Space below "Follow us:" */
    color: white;
}

/* Align social media icons on one line */
.social-icons {
    display: flex;
    justify-content: flex-end; /* Ensure icons are aligned to the right */
}

.social-icon {
    width: 30px;
    height: 30px;
    margin-left: 10px; /* Space between icons */
    transition: transform 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.2); /* Slight zoom effect on hover */
}


.social-icon:hover {
    transform: scale(1.2); /* Slight zoom effect on hover */
}




/* Remove any default margin or padding for the footer */
/* Footer styling */
footer {
    background-color: #00338E; /* Optional: If you want a darker background for contrast */
    color: white; /* Set default text color for the footer */
}

footer a {
    color: white; /* Ensure all links in the footer are white */
    text-decoration: underline; /* Optional: Add underline for links */
}

footer a:hover {
    color: #ccc; /* Optional: Lighter color on hover for better visibility */
}

footer h2, footer p, footer strong {
    color: white; /* Ensure all text (including strong tags) are white */
}

footer .social-icons img {
    width: 30px; /* Adjust size of social media icons */
    height: 30px;
    margin-left: 10px;
}

footer .follow-us span {
    color: white; /* Ensure 'Follow us' text is white */
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

footer .container {
    padding: 20px 0; /* Add padding to the footer content */
}

/* Align text after the strong tag */
.contact-us-section p {
    margin: 0 0 10px; /* Adds space between paragraphs */
    line-height: 1.5;  /* Improve readability */
}

.contact-us-section p strong {
    display: inline-block;
    min-width: 200px; /* Adjust this width as needed */
}

.contact-us-section a {
    color: white;
    text-decoration: underline;
}

.contact-us-section a:hover {
    color: #ccc;
}






/* FAQ Container */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff; /* Pure white background for the FAQ section */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); /* Softer shadow for more elegance */
}

/* FAQ Categories */
.faq-categories {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.faq-categories li {
    margin-bottom: 25px;
}

/* FAQ Category Button */
.faq-category-btn {
    background-color: #e7e7e7; /* Soft gray background */
    color: #333333; /* Dark gray text for a modern look */
    border: none;
    padding: 15px 20px; /* More padding for a spacious feel */
    font-size: 18px;
    font-weight: 500; /* Slightly bolder text */
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-radius: 8px; /* Rounder corners for a modern style */
    display: flex;
    justify-content: space-between; /* Moves the + and - to the right */
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition on hover */
}

/* Hover and Active States for Category Button */
.faq-category-btn:hover {
    background-color: #d1d1d1; /* Darker gray on hover */
    color: #000; /* Darker text on hover for contrast */
}

.faq-category-btn:focus {
    outline: none;
}

.faq-category-btn.active {
    background-color: #c7c7c7; /* Even darker gray when active */
}

/* Toggle the "+" and "-" */
.faq-category-btn::after {
    content: "+";
    font-size: 20px; /* Larger toggle icon */
    transition: transform 0.3s ease; /* Smooth transition when rotating */
}

.faq-category-btn.active::after {
    content: "-";
}

/* FAQ Questions */
.faq-questions {
    display: none; /* Initially hide questions */
    margin-top: 15px;
    padding-left: 20px;
    border-left: 3px solid #e0e0e0; /* Left border to visually separate the questions */
    padding-left: 25px; /* Padding to match border */
}

/* FAQ Question Button */
.faq-question-btn {
    background: none;
    border: none;
    color: #444444; /* Darker shade of gray */
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 10px;
    text-align: left;
    width: 100%;
    transition: color 0.3s ease; /* Smooth transition on hover */
}

/* Hover Effect for FAQ Questions */
.faq-question-btn:hover {
    color: #007bff; /* Accent color on hover */
}

/* FAQ Answer */
.faq-answer {
    display: none; /* Initially hide answers */
    margin-top: 10px;
    background-color: #f9f9f9; /* Light gray background for answers */
    padding: 15px;
    border-radius: 8px; /* Softer corners */
    color: #333333;
    font-size: 15px;
    line-height: 1.6; /* Improve readability */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
}

/* Style for open answers */
.faq-answer.open {
    display: block;
}


.scroll-link {
    text-decoration: none; /* Removes underline */
    color: inherit; /* Ensures the link inherits color from `.centered-paragraph` */
}

.centered-paragraph {
    width: 70%;
    margin: 0 auto;
    padding: 20px;
    border: 3px solid #333; /* Thicker border */
    border-radius: 15px; /* Rounded corners */
    text-align: center;
    background-color: #fff; /* Background color */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    font-weight: 500; /* Slightly bolder font weight */
}

.button-container {
    text-align: center;
    margin-top: 20px;
}

.custom-button {
    background-color: #00AB4F; /* Green background */
    color: #fff; /* White text */
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 25px; /* Rounded corners */
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease; /* Optional: smooth hover effect */
}

.custom-button:hover {
    background-color: #00893d; /* Darker green on hover */
}