/* Custom CSS */
body {
    font-family: 'Inter', sans-serif;
    color: #333;
    /* Default text color */
}

html {
    scroll-behavior: smooth;
    /* Smooth scrolling */
}


.hero-section {
    background-image: url('../images/service/forest.avif');

    background-size: cover;
    background-position: center;
    color: #fff;
    padding-top: 8rem;

    padding-bottom: 8rem;
    min-height: 600px;

    display: flex;
    align-items: center;
    
background-color: rgba(0, 0, 0, 0.5) !important;
}






.hero-content h1 {
    font-size: 3.5rem;
    /* Large heading for "About Us" */
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.hero-content p {
    font-size: 1.25rem;
    line-height: 1.6;
    max-width: 700px;
    /* Limit paragraph width for readability */
}

/* Our Story Section */
.our-story-section {
    padding: 4rem 0;
    /* Padding for the section */

}

.our-story-section h2 {
    font-size: 3.5rem;
    font-weight: 700;
    color: rgb(0, 115, 54);
    /* Blue heading color */
    margin-bottom: 2rem;
    text-align: center;
    /* Center the heading */
}

.our-story-section p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.our-story-section ul {
    list-style: disc;
    /* Bullet points */
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.our-story-section ul li {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

/* Catchment Farm Advisors Section */
.cfa-section {
    padding: 4rem 0;
    background-color: #fff;
    /* White background for this section */
}

.cfa-section h2 {
    font-size: 3.5rem;
    font-weight: 700;

    color: rgb(0, 115, 54);
    margin-bottom: 3rem;
    text-align: center;
}

.cfa-card {
    display: flex;
    align-items: flex-start;
    /* Align items to the top */
    margin-bottom: 2rem;
    padding: 1.5rem;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    /* More rounded corners */
    background-color: #f8f9fa;
    /* Light background for cards */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
    /* Subtle shadow */
}

.cfa-card img {
    width: 120px;
    /* Fixed width for advisor image */
    height: 120px;
    /* Fixed height for advisor image */
    border-radius: 0.5rem;
    /* Rounded corners for image */
    object-fit: cover;
    /* Ensure image covers the area */
    margin-right: 1.5rem;
    flex-shrink: 0;
    /* Prevent image from shrinking */
}

.cfa-card-content h3 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
}

.cfa-card-content p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.cfa-contact-info {
    font-size: 1rem;
    font-weight: 500;
    color: #007bff;
    /* Blue for contact info */
}

.cfa-contact-info a {
    color: #007bff;
    text-decoration: none;
}

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

/* Connect with Team Section */
.connect-section {
    padding: 4rem 0;

    text-align: center;
}

.connect-section h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: rgb(0, 115, 54);
    /* Green heading */
    margin-bottom: 1.5rem;
}

.connect-section p {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 2rem auto;
    /* Center paragraph and add bottom margin */
}

.btn-connect {
    background-color: rgb(0, 115, 54);
    /* Green button */
    color: #fff;
    border-radius: 0.5rem;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-connect:hover {
    background-color: #218838;
    /* Darker green on hover */
}

/* Our Committee Section */
.committee-section {
    padding: 4rem 0;

}

.committee-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: rgb(0, 115, 54);
    /* Green heading */
    margin-bottom: 1.5rem;
    text-align: center;
}

.committee-section p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    text-align: center;
}

.committee-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;
}

.committee-role {
    flex: 1;
    min-width: 250px;
    /* Minimum width for each column */
    padding: 0 1rem;
}

.committee-role h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: rgb(0, 115, 54);
    /* Green for roles */
    margin-bottom: 1rem;
}

.committee-role ul {
    list-style: none;
    /* Remove default list bullets */
    padding: 0;
}

.committee-role ul li {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .navbar-main .navbar-collapse {
        background-color: #fff;
        /* White background for collapsed nav */
        padding: 1rem;
        border-radius: 0.5rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .05);

        position: relative;
        top: -100vh;
        left: 0;
        width: 100%;
        height: 100vh;
        /* background-color: #e0f2f7; */
        transition: top 0.3s ease-in-out;
        z-index: 1040;
        display: flex;
        flex-direction: column;
        padding: 20px;
        align-items: flex-start;
        justify-content: flex-start;
        overflow-y: auto;


    }


  .dropdown-toggle::after {
    margin-left: auto;
    vertical-align:middle ;
    /* align-self: baseline; */
}

    .navbar-main .nav-link {
        margin-left: 0;
        padding: 0.5rem 0;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .hero-section {
        padding-top: 6rem;
        /* Adjust padding for smaller screens */
        padding-bottom: 6rem;
    }

    .our-story-section h2,
    .cfa-section h2,
    .connect-section h2,
    .committee-section h2 {
        font-size: 2rem;
    }

    .our-story-section p,
    .our-story-section ul li,
    .cfa-card-content p,
    .cfa-contact-info,
    .connect-section p,
    .committee-role ul li {
        font-size: 1rem;
    }

    .cfa-card {
        flex-direction: column;
        /* Stack image and text on small screens */
        align-items: center;
        text-align: center;
    }

    .cfa-card img {
        margin-right: 0;
        margin-bottom: 1rem;
        /* Add space below image */
    }

    .committee-list {
        flex-direction: column;
        /* Stack columns on small screens */
        align-items: center;
    }

    .committee-role {
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .committee-role h3 {
        text-align: center;
    }

    .committee-role ul {
        text-align: center;
    }
}

.profile-card {
    max-width: 900px;
    margin: 2rem auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact a {
    text-decoration: none;
    color: rgb(0, 115, 54);
    ;
    font-weight: 500;
}

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

































/* Footer container */
.footer-container {
    background-color: #396e3c;
    ;
    /* bg-green-800 */
    color: #ffffff;
    /* text-white */
    padding: 2rem 1rem;
    /* py-16 px-4 */
    position: relative;
    overflow: hidden;
    height: 248px;
}

/* Abstract blue shape - now using a background image */
.abstract-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    /* Ensure it's behind text */
    /* Background image properties */
    background-image: url('../images/footer/footer1.avif');
    /* Placeholder image URL */
    background-size: cover;
    /* Cover the entire area */
    background-position: left center;
    /* Position it to the left */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    height: 248px;
    ;

}

/* Responsive adjustments for abstract shape background position */
@media (max-width: 767px) {
    .abstract-shape {
       top: 257px;
        left: 0;
      
        width: 100%;

        background-image: url(../images/footer/footer2.avif);
    }
    .footer-container {
        height: 50vh ;
    }
    .temp{
        display: none !important;
    }

    .left-section {
        margin-top: 0rem !important;
        margin-bottom: 1rem !important;
    }
    .right-section {
       text-align: center !important;
    }

     .right-section>div>p {
       color: #fff !important;
       letter-spacing: 1px !important;
       font-size: 1.4rem !important;
    }

       .footer-content-wrapper {
        gap: 0rem !important;
    }
}


/* testing here  */


.footer-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* allow content to stack on small screens */
    position: relative;
    z-index: 1;
    padding: 1rem;
    gap: 1rem;
}

.left-section,
.right-section {
    flex: 1 1 300px; /* Grow/shrink, minimum 300px */
}

.footer-container {
    background-color: #396e3c;
    color: #ffffff;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
    min-height: 248px;
    height: auto;
}


.abstract-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: 0;
    background-image: url('../images/footer/footer1.avif');
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .abstract-shape {
         top: auto;              /* Remove top positioning */
        bottom: 0;              /* Pin to bottom */
        width: 100%;            /* Full width */
        height: 200px;          /* Adjust height */
       
        opacity: 1.4;
    }

    .footer-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }

    .left-section,
    .right-section {
        width: 100%;
        text-align: center;
    }

    .temp {
        display: none !important;
    }

    .left-section,
.right-section {
    flex: 1 1 100px; /* Grow/shrink, minimum 300px */
}
}



.hover-link svg {
    width: 32px;
    height: 32px;
}

.hover-link strong {
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .hover-link strong {
        font-size: 1.25rem;
    }

    .hover-link svg {
        width: 24px;
        height: 24px;
    }

      .temp {
        display: none !important;
    }

    .contact-info-group>div>div{
        text-align: justify !important;
    }
}












/* testing finish here  */





 .email-link {
          
           
            border-radius: 3px;
            display: inline-block; /* To make padding and background apply nicely */
            text-decoration: none; /* Remove underline */
            color: inherit; /* Inherit text color */
        }

 .email-link:hover {
            text-decoration: none; /* Keep no underline on hover */
            color: white ; /* Keep text color on hover */
        }



/* Main content wrapper */
.footer-content-wrapper {
    max-width: 1280px;
    /* Equivalent to Tailwind's default container max-width for xl */
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    /* flex-col */
    align-items: center;
    /* items-center */
    justify-content: space-between;
    /* justify-between */
    position: relative;
    z-index: 10;
}

/* Responsive adjustments for main content wrapper */
@media (min-width: 768px) {
    .footer-content-wrapper {
        flex-direction: row;
        /* md:flex-row */
    }
}

/* Left section */
.left-section {
    text-align: center;
    /* text-center */
    margin-bottom: 2rem;
    /* mb-8 */
    width: 100%;
    /* Default to full width on small screens */
}

/* Responsive adjustments for left section */
@media (min-width: 768px) {
    .left-section {
        width: 50%;
        /* md:w-1/2 */
        text-align: left;
        /* md:text-left */
        margin-bottom: 0;
        /* md:mb-0 */
    }
}

/* Headings */
.left-section h2 {
    font-size: 2.25rem;
    /* text-4xl */
    line-height: 2.5rem;
    font-weight: 700;
    /* font-bold */
    margin-bottom: 0.5rem;
    /* mb-2 */
    border-radius: 0.5rem;
    /* rounded-lg */
}

.left-section h3 {
    font-size: 1.875rem;
    /* text-3xl (approx) */
    line-height: 2.25rem;
    font-weight: 600;
    /* font-semibold */
    border-radius: 0.5rem;
    /* rounded-lg */
}

/* Responsive adjustments for headings */
@media (min-width: 768px) {
    .left-section h2 {
        font-size: 3rem;
        /* md:text-5xl */
        line-height: 1;
    }

    .left-section h3 {
        font-size: 2.25rem;
        /* md:text-3xl */
    }
}

/* Right section */
.right-section {
    text-align: left;
    /* text-center */
    width: 100%;
    /* Default to full width on small screens */
}

/* Responsive adjustments for right section */
@media (min-width: 768px) {
    .right-section {
        width: 50%;
        /* md:w-1/2 */
        text-align: left;
        /* md:text-right */
    }
}

/* Paragraphs */
.right-section p {
    font-size: 1.125rem;
    /* text-lg */
    line-height: 1.75rem;
    margin-bottom: 1rem;
    /* mb-4 */
    border-radius: 0.5rem;
    /* rounded-lg */
}

/* Button */
.contact-button {
    background-color: #2563eb;
    /* bg-blue-600 */
    color: #ffffff;
    /* text-white */
    font-weight: 700;
    /* font-bold */
    padding: 0.75rem 1.5rem;
    /* py-3 px-6 */
    border-radius: 9999px;
    /* rounded-full */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* shadow-lg */
    display: flex;
    /* flex */
    align-items: center;
    /* items-center */
    justify-content: center;
    /* justify-center */
    margin-left: auto;
    /* mx-auto */
    margin-right: auto;
    /* mx-auto */
    transition: all 0.3s ease-in-out;
    /* transition duration-300 ease-in-out */
    border: none;
    /* Remove default button border */
    cursor: pointer;
}

.contact-button:hover {
    background-color: #1d4ed8;
    /* hover:bg-blue-700 */
    transform: scale(1.05);
    /* hover:scale-105 */
}

/* Responsive adjustments for button */
@media (min-width: 768px) {
    .contact-button {
        justify-content: flex-end;
        /* md:justify-end */
        margin-left: auto;
        /* md:mx-0 (effectively, since it's right-aligned) */
        margin-right: 0;
    }
}

/* Button SVG icon */
.contact-button svg {
    width: 1.5rem;
    /* w-6 */
    height: 1.5rem;
    /* h-6 */
    margin-right: 0.5rem;
    /* mr-2 */
}

/* Placeholder content for scrolling */
.placeholder-content {
    min-height: 100vh;
    /* min-h-screen */
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-content p {
    color: #4b5563;
    /* text-gray-600 */
    font-size: 1.25rem;
    /* text-xl */
}



.hover-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: white;
    /* default color */
    text-decoration: none;
}


.hover-link svg {
    transition: color 0.2s ease;
    fill: currentColor;
    /* important for dynamic color */
}

.hover-link:hover {
    color: #FFBE0B !important;
    /* changes both text and svg fill */
}




/* ddhf */

.foot {
    margin-top: auto;
    /* Pushes the footer to the bottom */
    background-color: #2d3134;
    /* Dark background color */
    color: #ccc;
    /* Light text color */
    padding: 2rem 1rem;
    /* Padding top/bottom and left/right */

    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -2px rgba(0, 0, 0, 0.06);
    /* Shadow effect */
}

.footer-heading {
    font-weight: 600;
    /* Semi-bold */
    color: #fff;
    /* White text for headings */
    margin-bottom: 0.5rem;
    /* Space below heading */
}

.social-icon-circle {
    background-color: #4a5568;
    /* Darker gray for circle background */
    border-radius: 50%;
    /* Make it a circle */
    padding: 0.5rem;
    /* Padding inside the circle */
    display: inline-flex;
    /* Use flex for centering icon */
    align-items: center;
    /* Center icon vertically */
    justify-content: center;
    /* Center icon horizontally */
    width: 2.5rem;
    /* Fixed width for circle */
    height: 2.5rem;
    /* Fixed height for circle */
    transition: all 0.3s ease;
    /* Smooth transition for hover effects */
}

.social-icon-circle:hover {
    background-color: #3182ce;
    /* Blue on hover */
    color: #fff;
    /* White icon on hover */
}

.logo-placeholder {
    width: 8rem;
    /* Fixed width for logo */
    height: 3rem;
    /* Fixed height for logo */

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 0.875rem;
    /* Small font size */
    font-weight: bold;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 991.98px) {

    /* Equivalent to Bootstrap's lg breakpoint */
    .footer-content-wrapper {
        flex-direction: column;
        /* Stack items vertically on smaller screens */
        align-items: flex-start !important;
        /* Align items to start */
        gap: 2rem;
        /* Space between sections */
    }

    .contact-info-group {
        flex-direction: column;
        /* Stack contact info vertically */
        gap: 2rem;
        /* Space between contact details */
    }

    .social-copyright-group {
        align-items: flex-start !important;
        /* Align social/copyright to start */
    }

    .text-right-on-lg {
        text-align: left !important;
        /* Align copyright text to left on smaller screens */
    }
}

p {
    margin: 0px !important;
}







/*Navlink*/

.btn-news {
    border: 1px solid #006837;
    color: #006837;
    font-weight: bold;
    margin-right: 1rem;
}

.btn-contact {
    background-color: #006837;
    color: white;
    font-weight: bold;
}

.nav-link {
    font-weight: 600;
    color: #006837 !important;
}

.nav-link.active {
    color: #28a9e0 !important;
}

.logo-img {
    height: 60px;
}

nav {
    padding: 0.5rem 1rem;
    background-color: #fff;
}

/* Dropdown background and text color */
.dropdown-menu {
    background-color: white;
}

.dropdown-menu .dropdown-item {
    color: green;
}

/* Hover effect: keep background white, bold green text */
.dropdown-menu .dropdown-item:hover {
    background-color: #f8f9fa;
    /* light gray on hover */
    /* color: darkgreen;
    font-weight: 600; */
    color: #00B8E0 !important;
}

.navbar .dropdown-menu {
    padding: 0;
    background-color: #ffffff !important;
    transition: none !important;
    color: green !important;
    border: none !important;
    border-radius: 0px !important;
}

ul>li>a {
    color: #007336 !important;
    font-weight: 700 !important;
    font-style: normal;
    font-size: 15px !important;
    line-height: 1.6rem !important;
}

.dropdown-toggle::after {
    display: none ;
    /* Hide the default caret */
}

.nav-link:hover {
    color: #00B8E0 !important;
}

.news {
    border-radius: 0px;
    border: 1px solid green;
    color: green;
    padding-right: 2rem;
    padding-left: 2rem;
    padding-top: 10px;
    padding-bottom: 10px;
    letter-spacing: 1px;
    vertical-align: bottom !important;
}

.ct {
    border-radius: 0px;
    background-color: green;
    color: white;

    letter-spacing: 1px;
    padding-right: 2rem;
    padding-left: 2rem;
    padding-top: 10px;
    padding-bottom: 10px;

}

.ct:hover {
    background-color: #00B8E0;
    ;
    color: white;
}

.btn-outline-primary:hover {
    background: none !important;
    color: #00B8E0 !important;
    border: 1px solid #00B8E0 !important;
}

.btn-primary:hover {
    border: none !important;
}

.news:hover {
    background: none !important;
    color: #00B8E0 !important;
    border: 1px solid #00B8E0 !important;
}


.section-container {
    padding: 40px 0;
}

.content-block {
    background-color: #fff;
    padding: 20px;


    margin-bottom: 20px;
    background-color: rgb(243, 243, 243);

}

.content-block h3 {
    color: #28a745;
    /* Bootstrap success green */
    margin-bottom: 15px;
    font-size: 1.6rem;
    font-weight: bold;
}

.content-block p {

    margin-bottom: 0;
    line-height: revert;
}

.image-container {
    margin-bottom: 20px;
}

.image-container img {
    width: 100%;
    /* height: auto; */
    height: 100%;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.smaller-image-container {
    margin-bottom: 30px;
}

.smaller-image-container img {
    width: 100%;
    height: auto;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Adjust for smaller images on the left, if they are meant to be smaller */
@media (min-width: 768px) {
    .col-md-5 img {
        max-width: 100%;
        /* Ensure images don't overflow their column */
    }
}




/* About Pager */



.hero-section-about {
    background-image: url('../images/about/About.avif');
    /* Placeholder background image */
    background-size: cover;
    background-position: center;
    color: #fff;
    padding-top: 8rem;
    /* Adjust padding to account for nav height */
    padding-bottom: 8rem;
    min-height: 600px;
    /* Minimum height for the hero section */
    display: flex;
    align-items: center;
    /* Vertically center content */
}

.hero-content h1 {
    font-size: 3.5rem;
    /* Large heading for "About Us" */
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.hero-content p {
    font-size: 1.25rem;
    line-height: 1.6;
    max-width: 700px;
    /* Limit paragraph width for readability */
}

/* Our Story Section */
.our-story-section {
    padding: 4rem 0;
    /* Padding for the section */

}

.our-story-section h2 {
    font-size: 3.5rem;
    font-weight: 700;
    color: rgb(0, 115, 54);
    /* Blue heading color */
    margin-bottom: 2rem;
    text-align: center;
    /* Center the heading */
}

.our-story-section p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.our-story-section ul {
    list-style: disc;
    /* Bullet points */
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.our-story-section ul li {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

/* Catchment Farm Advisors Section */
.cfa-section {
    padding: 4rem 0;
    background-color: #fff;
    /* White background for this section */
}

.cfa-section h2 {
    font-size: 3.5rem;
    font-weight: 700;

    color: rgb(0, 115, 54);
    margin-bottom: 3rem;
    text-align: center;
}

.cfa-card {
    display: flex;
    align-items: flex-start;
    /* Align items to the top */
    margin-bottom: 2rem;
    padding: 1.5rem;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    /* More rounded corners */
    background-color: #f8f9fa;
    /* Light background for cards */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
    /* Subtle shadow */
}

.cfa-card img {
    width: 120px;
    /* Fixed width for advisor image */
    height: 120px;
    /* Fixed height for advisor image */
    border-radius: 0.5rem;
    /* Rounded corners for image */
    object-fit: cover;
    /* Ensure image covers the area */
    margin-right: 1.5rem;
    flex-shrink: 0;
    /* Prevent image from shrinking */
}

.cfa-card-content h3 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
}

.cfa-card-content p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.cfa-contact-info {
    font-size: 1rem;
    font-weight: 500;
    color: #007bff;
    /* Blue for contact info */
}

.cfa-contact-info a {
    color: #007bff;
    text-decoration: none;
}

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

/* Connect with Team Section */
.connect-section {
    padding: 4rem 0;

    text-align: center;
}

.connect-section h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: rgb(0, 115, 54);
    /* Green heading */
    margin-bottom: 1.5rem;
}

.connect-section p {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 2rem auto;
    /* Center paragraph and add bottom margin */
}

.btn-connect {
    background-color: rgb(0, 115, 54);
    /* Green button */
    color: #fff;
    border-radius: 0.5rem;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-connect:hover {
    background-color: #218838;
    /* Darker green on hover */
}

/* Our Committee Section */
.committee-section {
    padding: 4rem 0;

}

.committee-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: rgb(0, 115, 54);
    /* Green heading */
    margin-bottom: 1.5rem;
    text-align: center;
}

.committee-section p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    text-align: center;
}

.committee-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;
}

.committee-role {
    flex: 1;
    min-width: 250px;
    /* Minimum width for each column */
    padding: 0 1rem;
    text-align: center;
    /* Center text in each role */
}

.committee-role h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: rgb(0, 115, 54);
    /* Green for roles */
    margin-bottom: 1rem;
}

.committee-role ul {
    list-style: none;
    /* Remove default list bullets */
    padding: 0;
}

.committee-role ul li {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .navbar-main .navbar-collapse {
        background-color: #fff;
        /* White background for collapsed nav */
        padding: 1rem;
        border-radius: 0.5rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
    }

    .navbar-main .nav-link {
        margin-left: 0;
        padding: 0.5rem 0;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .hero-section-about {
        padding-top: 6rem;
        /* Adjust padding for smaller screens */
        padding-bottom: 6rem;
    }

    .our-story-section h2,
    .cfa-section h2,
    .connect-section h2,
    .committee-section h2 {
        font-size: 2rem;
    }

    .our-story-section p,
    .our-story-section ul li,
    .cfa-card-content p,
    .cfa-contact-info,
    .connect-section p,
    .committee-role ul li {
        font-size: 1rem;
    }

    .cfa-card {
        flex-direction: column;
        /* Stack image and text on small screens */
        align-items: center;
        text-align: center;
    }

    .cfa-card img {
        margin-right: 0;
        margin-bottom: 1rem;
        /* Add space below image */
    }

    .committee-list {
        flex-direction: column;
        /* Stack columns on small screens */
        align-items: center;
    }

    .committee-role {
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .committee-role h3 {
        text-align: center;
    }

    .committee-role ul {
        text-align: center;
    }
}

.profile-card {
    max-width: 900px;
    margin: 2rem auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact a {
    text-decoration: none;
    color: rgb(0, 115, 54);
    ;
    font-weight: 500;
}

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









.navbar-toggler {
    position: relative;
    height: 60px;
    width: 60px;
    border: none;
    cursor: pointer;
    outline: none;
}

.navbar-toggler .menu-icon-bar {
    position: absolute;
    left: 15px;
    right: 15px;
    height: 2px;
    /* background-color: #fff; */
    opacity: 0;
    -webkit-transform: translateY(-1px);
    -ms-transform: translateY(-1px);
    transform: translateY(-1px);
    transition: all 0.3s ease-in;
    background-color: rgb(22, 70, 22) !important;
}

.navbar-toggler .menu-icon-bar:first-child {
    opacity: 1;
    -webkit-transform: translateY(-1px) rotate(45deg);
    -ms-sform: translateY(-1px) rotate(45deg);
    transform: translateY(-1px) rotate(45deg);
}

.navbar-toggler .menu-icon-bar:last-child {
    opacity: 1;
    -webkit-transform: translateY(-1px) rotate(135deg);
    -ms-sform: translateY(-1px) rotate(135deg);
    transform: translateY(-1px) rotate(135deg);
}

.navbar-toggler.collapsed .menu-icon-bar {
    opacity: 1;
}

.navbar .navbar-toggler.collapsed .menu-icon-bar:first-child {
    -webkit-transform: translateY(-7px) rotate(0);
    -ms-sform: translateY(-7px) rotate(0);
    transform: translateY(-7px) rotate(0);
}

.navbar-toggler.collapsed .menu-icon-bar:last-child {
    -webkit-transform: translateY(5px) rotate(0);
    -ms-sform: translateY(5px) rotate(0);
    transform: translateY(5px) rotate(0);
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none !important;
}

























.mobile-nav{
    display: none;
}


/* Mobile view styles */
@media (max-width: 991.98px) {
    .navbar-collapse {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: white;
        z-index: 1000;
        padding: 10px;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }
    
    .navbar-collapse.show {
        transform: translateX(0);
    }
    
    /* Hide buttons in mobile view */
    .navbar-collapse .mb-2 {
        display: none;
    }
    
    /* Adjust nav links for mobile */
    .navbar-nav {
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 60px;
        justify-content: start !important;
    }
    
    .nav-item {
        width: 100%;
    }
    
    .nav-link, .dropdown-item {
        padding: 10px 0;
        display: flex !important;
        font-size: 1.1rem;
    }
    
    .dropdown-menu {
        position: static !important;
        border: none;
        padding-left: 20px;
    }
    
    /* Close button style */
    .close-menu {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 1.5rem;
        background: none;
        border: none;
        cursor: pointer;
        color: #007336;
    }
    
    /* Adjust logo size for mobile */
    .navbar-brand .AKxYR5 {
        width: 150px !important;
        height: auto !important;
    }



   .dropdown-toggle::after {
        display: flex !important;
      
    margin-left: auto;
  
    /* align-self: baseline; */
}

}

/* Hamburger menu styles */
.navbar-toggler {
    position: relative;
    height: 40px;
    width: 40px;
    border: none;
    cursor: pointer;
    outline: none;
    z-index: 1001;
    background: transparent;
}

.navbar-toggler .menu-icon-bar {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    background-color: #007336 !important;
    transition: all 0.3s ease-in;
}

.navbar-toggler .menu-icon-bar:nth-child(1) {
    top: 12px;
}

.navbar-toggler .menu-icon-bar:nth-child(2) {
    top: 19px;
}

.navbar-toggler .menu-icon-bar:nth-child(3) {
    top: 26px;
}

.navbar-toggler:not(.collapsed) .menu-icon-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.navbar-toggler:not(.collapsed) .menu-icon-bar:nth-child(2) {
    opacity: 0;
}

.navbar-toggler:not(.collapsed) .menu-icon-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Add backdrop when menu is open */
.menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
    display: none;
}

.menu-open .menu-backdrop {
    display: block;
}


@media (max-width: 991.98px) {
    .navbar-nav {
        flex-direction: column !important;
        gap: 15px !important;
        margin-top: 60px;
        width: 100%;
        height: 100vh;
    }


    /*home page*/
.main-image-wrapper >img{
   
    width: inherit !important;
    
    height: auto !important;}

    .overlay-image-wrapper>img{
        width: 270px !important;
    height: inherit !important;

    }

    .overlay-image-wrapper {
    position: absolute;
    bottom: -151px;
    right: 36% !important;
    width: 50%;
    /* max-width: 500px; */
}

.text-section {
    margin-top: 150px !important;
}
h1{
    font-size: 30px !important;
}

.mobile-nav{
    display: block !important;
}

.mobile{
    display: none !important;
}
}



@media (max-width: 767px) {
  .contact-info-group {
    flex-direction: column;
  }

  .flex-shrink-0{
    display: flex !important;
    flex-direction: column;
  }
  .logo-placeholder {
    order: -1 !important;
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
  }

      .social-copyright-group {
        align-items: center !important;
    }
.text-right-on-lg {
        text-align: center !important;
    }

    .align-items-center{
        margin-top: 1rem !important;
        margin-bottom: 1rem !important; 
    }
    
}
.btn-primary:focus, .btn-primary.focus {
    box-shadow: none !important;
    outline: none !important;
}

.btn:focus, .btn.focus {
   box-shadow: none !important;
    outline: none !important; 
}