html, body {
   scroll-behavior: smooth;
   scroll-padding-top: 70px; /* Adjust the value based on your nav bar height */
}

/* Organization Bio Section */
.organization-bio {
    background-color: white;
    min-height: 800px;
    padding: 100px 20px 50px 20px; /* Add 100px padding at the top */
    text-align: center;
    margin-top: 60px;
}

.bio-overlay {
    max-width: 900px;
    margin: 0 auto;
}

.bio-logo {
    width: 120px;
    margin-bottom: 20px;
}

.bio-title {
    font-size: 2em;
    margin-bottom: 20px;
}

.bio-description {
    font-size: 1.3em;
    color: #555;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* Transitional Image - At the Bottom of Organization Bio */
.transitional-image {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
}

.transitional-image img {
    width: calc(120% - 20px); /* Maintain 40px cushion on both sides */
    max-width: 800px; /* Max width for larger screens */
    height: auto;
    
    transition: all 0.3s ease-in-out;
}

/* Organization Bio Section with bottom padding */
.organization-bio {
    background-color: white;
    min-height: 800px;
    padding: 50px 40px; /* Maintain 40px padding on the left and right */
    padding-bottom: 0; /* No padding on the bottom, image will act as bottom */
    text-align: center;
}


.staff-bio-section {
    background-color: white;
    min-height: 800px;
    padding: 50px 40px; /* Maintain 40px padding on the left and right */
    padding-bottom: 0; /* No padding on the bottom, image will act as bottom */
    text-align: center;
}

.staff-bio-section img {    
    width: calc(100% - 80px); /* Maintain 40px cushion on both sides */
    max-width: 500px; /* Max width for larger screens */
    height: auto;
    margin-bottom: 10px;
    transition: all 0.3s ease-in-out;
}

.staff-name {
    font-size: 2em;
    margin-bottom: 10px;
}

.staff-title {
    font-size: 1.5em;
    margin-bottom: 20px;
}


.staff-bio {
    font-size: 1.15em;
    background-color: white;
    min-height: 400px;
    padding: 0 40px; /* Maintain 40px padding on the left and right */
    padding-bottom: 0; /* No padding on the bottom, image will act as bottom */
    text-align: center;
    line-height: 1.6;
    margin-bottom: 60px;
}


@media (max-width: 768px) {

    .staff-bio-section {
        padding: 50px 10px;
    }

    .staff-title {
        font-size: 1.3em;
    }

    .staff-bio {
        padding: 0 5px;
    }
}


/* ///////////////// FOOTER ADDRESS STYLING  ////////////////// */
.footer-address p {
    text-align: center;
    margin-top: 20px;
    
    font-size: 1.5em;
}

.footer-address a {
    color: #0ae1a4;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.3em;
    
}

.footer-address a:hover {
    color: #fbff00;
    filter: drop-shadow(0 0 5px rgb(1, 1, 1));
}

.footer-copyright {
    margin-top: 30px;
   
}