.about-hero article {
    max-width: 100%;
}


.story-section {
    padding-block: 75px 50px;
}

.story-section .container {
    max-width: 1100px;
}

.story-img {
    gap: .6rem;
    display: flex;
}

.story-img img {
    width: 135px;
    box-shadow: 0px 16px 20px rgba(0,0,0,10%),
    0 0 8px rgba(0,0,0,7%);
    border-radius: 16px;
}

.story-img img:nth-child(2) {
    margin-top: -50px;
    height: max-content;
    display: inline-block;
}

.values-section .container {
    max-width: 1550px;
}

.values-box {
    background: var(--primary-color);
    padding-block: 2.5rem 5.6rem;
    border-radius: var(--second-radius);
}

.values-box h2 {
    color: var(--white-color);
    text-align: center;
    margin-bottom: 3.125rem;
}

.values-grid {
    max-width: 950px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, 280px);
    justify-content: center;
    gap: 2.5rem;
}

.values-grid .box {
    background: rgba(255,255,255,20%);
    text-align: center;
    padding: 1.25rem;
    border-radius: var(--primary-radius);
}

.values-grid h3 {
    font-size: 1.25rem;
    color: var(--white-color);
    font-weight: var(--font-bold);
    margin-bottom: .625rem;
}

.values-grid p {
    font-size: .9rem;
    color: var(--white-color);
}

.values-grid .icon-box {
    margin-bottom: 1.5rem;
}

.values-grid .icon-box img {
    width: 65px;
    height: 65px;
    object-fit: contain;
}
.team-section {
    padding-block: 100px;
}

.team-section h2 {
    text-align: center;
    margin-bottom: 3.125rem;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,220px);
    gap: 2rem;
    justify-content: center;
    max-width: 1000px;
    margin-inline: auto;
}

.team-grid > *:nth-child(1) {
grid-column: span 2;
    text-align: end !important;
    max-width: 220px;
    margin-left: auto;
}
.team-grid > *:nth-child(1) *, 
.team-grid > *:nth-child(2) *{ 
    text-align: center !important; 
}
.team-grid > *:nth-child(2) {
   grid-column: span 2;
    text-align: end !important;
    max-width: 220px;
    margin-right: auto;
}
.team-grid > *:nth-child(1) > img,
.team-grid > *:nth-child(2) > img {
    width: 220px !important;
}
.team-grid .item {
    text-align: center;
}

.team-grid .item > img {
    width: 100%;
}

.team-name {
    margin-bottom: 0;
    margin-top: 1.5rem;
    font-size: 1.25rem;
    font-weight: var(--font-bold);
}

.team-grid .item > img {
    border-radius: var(--primary-radius);
    height: 330px;
    object-fit: cover;
}

.team-social {
    justify-content: center;
    list-style: none;
    display: flex;
    gap: 1rem;
    padding: 0;
    margin: 0;
}

.team-social img {
    width: 20px;
}

.team-detail-flex {
    display: flex;
    margin-bottom: 1.5rem;
    align-items: center;
    gap: 1.5rem;
}

.btn-close {
    --bs-btn-close-opacity: 1;
    box-shadow: none !important;
}

.team-detail {
    display: none;
}

.team-detail-flex img {
    border-radius: 16px;
}

#teamModal .modal-header {
    padding-right: 25px;
    padding-top: 25px;
    border-color: transparent !important;
}

#teamModal .modal-body {
    padding-inline: 1.5rem;
}

#teamModal .modal-content {
    border-radius: var(--primary-radius);
}

.wrapper-flex {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.wrapper-flex h2 {
    font-size: clamp(1.8rem,2.5vw,2rem);
}

.mission-and-vision .container {
    max-width: 1000px;
}

.mission-content h2 {
    color: var(--primary-color);
}
.vision-content h2 {
    color: var(--white-color);
}
.mission-content {
    box-shadow: 0 4px 55px rgba(0,0,0,10%);
    border-radius: var(--primary-radius);
    background: #FDFDFD;
    padding: 10px 30px;
    color: var(--primary-color);
}

.vision-content {
    border-radius: var(--primary-radius);
    background: var(--primary-color);
    padding: 10px 30px;
    color: var(--white-color);
}

.mission-icon {
    background: var(--primary-color);
}

.vision-icon {
    background: var(--white-color);
    box-shadow: 0 4px 55px rgba(0,0,0,10%);
}

.mission-and-vision .icon-box {
    min-width: 85px;
    min-height: 85px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width:992px) {
    .story-section {
        padding-block: 50px;
    }

    .team-grid > *:nth-child(1) {
        grid-column: span 1;
        text-align: center !important;
    }
    .team-grid > *:nth-child(2) {
        grid-column: span 1;
        text-align: center !important;
    }


}

@media (max-width:768px) {
    .team-grid {
        grid-template-columns: repeat(auto-fill,160px);
    }
    .team-grid > *:nth-child(1) > img,
.team-grid > *:nth-child(2) > img {
    width: 100% !important;
}
}

@media (max-width:500px) {
    .team-grid .item > img {
        height: 200px;
    }
    .mission-and-vision .icon-box {
        display: none;
    }
    .values-box {
        padding-block: 2.5rem;
    }
    .team-section h2,
    .values-box h2 {
        margin-bottom: 2rem;
    }
    #teamModal .team-name {
        margin-top: 0;
    }
    .team-detail-flex {
        text-align: center;
        flex-direction: column;
    }
}