.our-story, .our-values, .team, .milestones {
    & .tag {text-align: center;}
    & h2 {margin-top: 10px;text-align: center;margin-bottom: 30px;}
}
.our-story {
    & .tabs {display: flex;gap: 30px;}
    & .banner {
        align-self: stretch;
        width: 35%;
        background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);        
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 17px;
        & svg {height: 50px !important;width: auto;}
    }
    & .text {
        flex: 1;
        & h3 {font-weight: 500;font-size: 22px;}
        & p {margin-top: 20px;}
    }
}

.our-values {
    & .tabs {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }
    & .tab {
        width: calc(25% - 63px);
        background: #f9fafb;
        padding: 20px;
        border-radius: 17px;
        & img {height: 70px;width: auto;display: flex;}
        & h3 {font-weight: 500;font-size: 18px;margin-top: 20px;}
        & p {margin-top: 10px;font-size: 15px; line-height: 1.5;}
    }
}

.team {
    /* background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%); */
    padding: 30px 0;
    margin: 60px 0;
    & .child {max-width: 970px;margin-right: auto;margin-left: auto;}
    & .people {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        margin-top: 30px;
    }
    & .profile {
        width: calc(33.33% - 22px);
        background-color: #fff;
        overflow: hidden;
        border-radius: 17px;
        border: 1px solid #cfcfcf;
        & .image {
            height: auto;
            aspect-ratio: 1.5/1;
            width: 100%;
            background-color: #7cdcf7;
            & svg {
                fill: var(--blue-color);
                height: 100%;
                width: auto;
                display: flex;
                justify-self: center;
            }
        }
        & p.name {
            margin-top: 20px;
            font-weight: 600;
            font-size: 18px;
            padding: 0 20px;
            text-align: center;
        }
        & p.post {font-size: 14px;padding: 5px 20px 20px 20px;color: #353535;text-align: center;}
    }
}

.milestones .child {
    max-width: 970px;
    margin-left: auto;
    margin-right: auto;
}

/* Timeline Section */
.timeline {position: relative;}
.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #00BDF2 0%, #00BDF2 100%);
    transform: translateX(-50%);
}
.timeline-item {display: flex;margin-bottom: 20px;position: relative;}
.timeline-item:nth-child(even) {flex-direction: row-reverse;}
.timeline-content {width: 43%;background: #f9fafb;padding: 20px;border-radius: 17px;position: relative;}
.timeline-item:nth-child(odd) .timeline-content {margin-right: auto;}
.timeline-item:nth-child(even) .timeline-content {margin-left: auto;}
.timeline-year {
    font-size: 28px;
    font-weight: 500;
    color: #00BDF2;
    margin-bottom: 10px;
}
.timeline-title {
    font-size: 18px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 10px;
}
.timeline-text {font-size: 15px;color: #6b7280;line-height: 1.5;}
.timeline-dot {
    position: absolute;
    left: 50%;
    top: 30px;
    width: 15px;
    height: 15px;
    background: #00BDF2;
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 0 8px white, 0 0 0 10px #00BDF2;
}

.partnership {
    height: 300px;
    max-width: 770px;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(135deg, #1e40af 0%, #00BDF2 100%);
    border-radius: 17px;
    text-align: center;
    padding: 30px;
    & h2 {font-size: 2.5rem;font-weight: 800;margin-bottom: 20px;}    
}

/* Responsive */
@media (max-width: 1090px) {
    .our-story .banner svg {height: 40px !important;}
    .our-values .tabs, .team .people {gap: 20px;}
    .our-values .tab {width: calc(33.33% - 54px);}
    .team .child {max-width: calc(100% - 60px);margin-left: 30px;margin-right: 30px;}
    .team .profile {width: calc(33.33% - 16px);}
}

@media (max-width: 1030px) {
    .milestones .child {width: calc(100% - 60px);margin-left: 30px;margin-right: 30px;}
}

@media (max-width: 920px) {
    .our-story .banner svg {height: 40px !important;}
    .our-values .tabs, .team .people {gap: 20px;}
    .our-values .tab {width: calc(50% - 50px);}
    .team .child {max-width: calc(100% - 60px);margin-left: 30px;margin-right: 30px;}
    .team .profile {width: calc(33.33% - 16px);}
    .our-story .tabs .banner {align-self: flex-start;aspect-ratio: 1/1;}
}

@media (max-width: 840px) {
    .our-story .banner {width: 140px;& svg {height: 24px !important;}}    
    .team .profile {width: calc(50% - 12px);}
    .our-story .tabs {gap: 20px;}
}

@media (max-width: 740px) {
    .timeline::before,.timeline-dot {left: 18px;}
    .timeline-item {flex-direction: row !important;}
    .timeline-content {margin-left: 50px !important;width: 100%;}
}