.about-us {
    width: 100%;
}
.about-us .container {
    flex-direction: column;
    align-items: center;
    justify-content: end;
}
.about-us .about-box::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.116);
    left: 0;
    backdrop-filter: blur(9px);
}
.about-us .about-box::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 140px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, var(--transparent-white), transparent);
}
.about-us .about-box2::after {
    top: -88%;
    background: linear-gradient(to top, var(--transparent-white), transparent);
}
.about-us .about-boxes {
    height: 360px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.about-us .about-boxes .about-box-container {
    position: relative;
    width: 340px;
    height: 150px;
    z-index: 99999;
}
.about-us .about-boxes .about-box-container1 {
    transform: translateX(-200%);
}
.about-us .about-boxes .about-box-container2 {
    top: 0;
    margin: 0;
}
.about-us .about-boxes .about-box-container3 {
    transform: translateX(200%);
}

.about-us .about-boxes .about-box-container .circle{
    position: absolute;
    top: 101%;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background-color: white;
    border-radius: 50%;
    z-index: 9;
}
.about-us .about-boxes .about-box-container2 .circle { 
    top: -2%;
}
.about-us .about-boxes .about-box-container .about-box {
    z-index: 9999;
}
.about-us .about-box {
    width: 100%;
    height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 15px;
    z-index: 999999;
}
.about-us .about-box .p2 {
    display: none;
}
.about-us .about-box p {
    width: 95%;
    z-index: 9999999;
}
.about-us .about-circles {
    width: 90%;
    height: 100%;
    margin: auto;
    bottom: -10px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.about-us .about-circles .row {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin: auto;
}
.about-us .about-circles .row2 {
    width: 38%;
}
.about-us .about-circles .about-cirlce-container {
    width: 55px;
    height: 55px;
    background: linear-gradient(45deg, var(--transparent-white), transparent, transparent, transparent);
    border-radius: 50%;
    position: relative;
    opacity: 0;
    transform: translateY(-60px);
}
.about-us .about-circles .about-cirlce-container::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 250px;
    top: 100%;
    left: 50%;
    background: linear-gradient(to bottom, var(--transparent-white), transparent);
    z-index: 999999;
}
.about-us .about-circles .row2 .about-cirlce-container::before {
    height: 100px;
}
.about-us .about-circles .row2 .about-cirlce-container3 {
    top: -0px;
    left: -30px;
}
.about-us .about-circles .row2 .about-cirlce-container4{
    top: -70px;
}

.about-us .about-circles .row2 .about-cirlce-container3::before,
.about-us .about-circles .row2 .about-cirlce-container4::before {
    height: 150px;
    width: 3px;
}
.about-us .about-circles .about-cirlce-container img {
    width: 40px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 
@media (max-width: 950px) {
    .about-box-container3 {
        display: none;
    }
}
@media (max-width: 700px) {
    .about-us {
        margin-bottom: 30px;
    }
    .about-us .about-circles {
        display: none;
    }
    .about-us .about-box::before {
        border: none;
        backdrop-filter: blur(0px);
    }
    .about-us .about-boxes {
        width: 90%;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
    }
    .about-us .about-boxes .about-box-container {
        width: auto;
        position: absolute;
        text-align: center;
    }
    .about-us .about-boxes .about-box-container2 {
        right: 20px;
        top: 250px;
    }
    .about-box-container3 {
        display: none;
    }
    .about-us .about-box {
        width: 210px;
        height: 155px;
        padding: 0 13px;
    }
    .about-us p {
        width: 90%;
    }
    .about-us .about-box .p1 {
        display: none;
    }
    .about-us .about-box .p2 {
        display: block;
        width: 100%;
    }
}