.breadCrumb ul {display: flex; align-items: center; gap: 5px; margin-top: 13px;}
.breadCrumb li {display: flex; align-items: center}
.breadCrumb ul a {font-size: var(--fs-base); transition: var(--transition);}
.breadCrumb ul a:hover {color: var(--c-primary);}
.breadCrumb ul > :last-child {padding-left: 16px; position: relative; color: #000;}
.breadCrumb ul > :last-child::after {width: 7px; height: 10px; background: no-repeat center / cover url('../images/icons/chevron-right.svg'); position: absolute; left: 0; top: 50%; content: ""; transform: translateY(-50%); filter: var(--_c-light-filter);} 

.about-banner .banner {height: 358px; display: flex; align-items: center; justify-content: center; background: no-repeat center / cover url("../images/home-bannerImg1.webp");  padding: 50px 55px; border-radius: 8px; margin-block: 13px 25px;}
.about-banner .banner > :first-child {font-size: calc(var(--fs-lg) + 2px); font-weight: 800; text-align: center; text-transform: uppercase; color: #fff;}

.about-content .content {margin-block: 10px 30px;}
.about-content .content > :first-child {font-size: calc(var(--fs-md) - 4px); font-weight: 800; text-transform: uppercase; margin-bottom: 5px;}
.about-content .content > :nth-child(2) {font-size: var(--fs-base);}

.about-us .bar {width: 90%; height: 4px; background-color: rgba(0, 0, 0, 0.1); position: relative; margin-block: 10px 20px;}
.about-us .bar > :first-child {width: 100%; max-width: 300px; height: 4px; position: absolute; left: 0; background-color: var(--c-primary);}
.about-us .title > :first-child {font-size: calc(var(--fs-md) - 4px); font-weight: 800; color: var(--_c-green); margin-bottom: 20px;}
.about-us .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.about-us .wrapper img {border-radius: 100%;}
.about-us .item {display: flex; flex-direction: column; align-items: start; justify-content: start;}
.about-us .item img {height: 120px;}
.about-us .item > :nth-child(2) {font-size: calc(var(--fs-base) + 2px); color: var(--c-primary); margin-top: 5px;}
.about-us .mini-bar {width: 100%; height: 3px; background-color: var(--_c-green); position: relative; margin-block: 15px 18px;}
.about-us .mini-bar > :first-child {width: 100%; max-width: 70px; height: 3px; background-color: var(--c-primary); position: absolute;}
.about-us .item > :nth-child(4) {font-size: var(--fs-xs); text-align: justify;}
.about-phara p {font-size: var(--fs-base); margin-block: 30px 60px;}

.about-content, .about-us, .about-phara :where(.container) {max-width: var(--container-size-lg); margin-inline: auto;}

@media only screen and (max-width: 991px) {
    .about-content, .about-us, .about-phara :where(.container) {max-width: var(--container-size-md);}
}
@media only screen and (max-width: 768px) {
    .about-us .bar {width: 100%;}
    .about-us .wrapper {grid-template-columns: repeat(2, 1fr);}
    .about-us .wrapper > :last-child {max-width: 500px; align-items: center; grid-column: span 2; margin-inline: auto;}
}
@media only screen and (max-width: 576px) {
    .about-us .wrapper {grid-template-columns: 1fr;}
    .about-us .wrapper .item {align-items: center;}
    .about-us .wrapper > :last-child {grid-column: unset;}
}