/* ----- About Page ----- */
 /* About Intro Section*/

 #about-intro .container {
     display: flex;
     align-content: center;
     justify-content: center;
     padding-top: 9%;
     padding-bottom: 9%;
 }

 #about-intro .intro-content {
     height: auto;
     width: 65%;
     /*change width to 75% for mobile*/
     position: relative;
     padding-left: 30px;
 }

 #about-intro .intro-content::before {
     content: '';
     position: absolute;
     width: 4px;
     background-color: var(--light-blue);
     /* height: 414px; */
     border-radius: 6.5px;
     left: -15%;
     top: 0%;
     bottom: 30%;
     /* top: -8%;
bottom: -8%; */
     /*set left to -10% for mobile*/
 }

 #about-intro .intro-content h2 {
     padding-bottom: 18px;
 }

 #about-intro .intro-content p:last-of-type {
     margin-bottom: 0;
 }

 /* About Carousel */
#about-carousel-section{
    position: relative;
}

#about-carousel-section .about-carousel {
    padding-top: 60px;
    padding-bottom: 60px;
}

#about-carousel-section .about-carousel .tns-item{
    max-width: 1200px;
    height: auto;
    /* transition: 0.3s; */
    padding-top: 20px;
    padding-bottom: 20px;
    opacity: 0.6;
    transition: opacity 0.1s, left 0.4s;
}

.about-carousel .is-centered {
    opacity: 1 !important;
    transform: scale(1.05);
}
#about-carousel-section .about-carousel img:hover {
    opacity: 1;
}

#about-carousel-section .tns-prev,
#about-carousel-section .tns-next{
    position: absolute;
    color: inherit;
    background: none;
    border: none;
    z-index: 100;
}

#about-carousel-section .tns-prev i,
#about-carousel-section .tns-next i {
    font-size: 2.5rem;
    color: var(--light-grey);  /* Use your light-grey variable */
}


#about-carousel-section .tns-prev {
   left: 8%;
   top: 30%;
   bottom: 30%;
}


#about-carousel-section .tns-next {
   right: 8%;
   top: 30%;
   bottom: 30%;
}

/* About Quote Section */

 #about-quote {
     min-height: 300px;
     background-color: white;
 }

 #about-quote .about-quote-box {
     display: flex;
     align-items: center;
     width: 100%;
     height: 100%;
     background: linear-gradient(270.55deg, rgba(243, 243, 243, 0) 9.36%, #F3F3F3 102.59%);
     padding-top: 2em;
     padding-bottom: 2em;
 }

 #about-quote h2 {
     width: 60%;
     margin: auto;
     text-align: center;
     font-size: 48px;
     line-height: 58px;
     font-weight: bold;
 }

 #about-quote .row {
     margin-top: 2em;
 }

 /* Lead Team Section */

 #lead-team {
     height: auto;
     background-color: var(--light-grey);
     padding-top: 9%;
     padding-bottom: 7%;
 }

 #lead-team .row {
     display: flex;
     justify-content: space-between;
 }

 #lead-team .row:last-of-type {
     justify-content: start;
 }

 .team-intro {
     width: 60%;
     margin: auto;
     padding: 0;
     text-align: center;
 }

 .team-intro .blue-line {
     width: 170px;
     margin-top: 20px;
     margin-bottom: 40px;
 }

 .team-intro h3 {
     padding-bottom: 125px;
 }

 .team-member {
     margin-bottom: 20px;
 }

 #lead-team .wrapper {
     margin: auto;
     width: 280px;
     height: 270px;
 }

 #lead-team .team-member-details {
     margin: auto;
     width: 280px;
 }

 .team-member-details {
     position: relative;
 }

 i.read-bio-expand {
     position: absolute;
     right: 0;
     top: 52px;
     font-size: 24px;
     padding-right: 5px;
     color: var(--light-blue);
     cursor: pointer;
 }

 .team-member img {
     max-width: 100%;
     min-height: 100%;
     object-fit: cover;
     object-position: 50% 50%;
 }

 .team-member h4 {
     color: var(--light-blue);
     font-weight: bold;
     padding-top: 18px;
     font-size: 20px;
 }

 .team-member h5.position {
     font-size: 18px;
 }

 .team-member .blue-line {
     width: 130px;
     margin-bottom: 15px;
     height: 3px;
 }

 .member-profile.expanded {
     display: block;
 }

 .member-profile {
     display: none;
 }

 .member-profile p i {
     padding-right: 10px;
 }

 .member-profile a {
     color: var(--dark-blue);
     text-decoration: none;
     cursor: pointer;
 }

 .member-profile a:hover {
     color: var(--light-blue);
 }