.about .navbar .nav-link {
 color: var(--white);
}

.about-1 {
 background: var(--dark-grad), url(/img/about-bg.jpg) no-repeat 50% 50%;
 background-size: cover;
 padding: 240px 0px;
}

.about .my-border {
 height: 1px;
 width: 100%;
 background: var(--primary);
}

.masonary {
 position: relative;
}

.masonary img {
 width: 80%;
 height: auto;
 object-fit: contain;
}

.masonary .img-2 {
 transform: translate(120px, -60px);
}

.about-3 {
 background: url(/img/why-bg.jpg) no-repeat 50% 50%;
 background-size: cover;
}

.about-3 .card {
 width: 509px;
 height: 339px;
}

.about-3 .card-body {
 display: flex;
 flex-direction: column;
 justify-content: center;
}

.about-3 .about-img {
 width: 80%;
 max-width: 100%;
 height: auto;
 object-fit: contain;
}

.about .service-4 {
 background: var(--gradient);
}

.about-grid {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
}


.about .service-4 .card {
 border: unset !important;
}

.about .service-4 .card p {
 color: var(--white);
}

.about .service-4 .card1:before {
 background: var(--white);
}

.about .service-4 .card1 {
 background-color: unset;
 color: var(--white);
}

.about .service-4 .card:hover p {
 color: var(--black);
}

.about-5 {
 background: var(--dark-grad), url(/img/client-bg.png) no-repeat 50% 50%;
 background-size: cover;
 background-attachment: fixed;
}


.timeline-icon {
 width: 40px;
 height: 40px;
 border: 3px solid #fff;
}

.timeline-year {
 position: relative;
 z-index: 1;
}

.about-5 .card img {
 height: 250px;
 object-fit: cover;
}

section.bg-dark::before {
 content: "";
 position: absolute;
 inset: 0;
 background: radial-gradient(circle at 30% 50%, rgba(255, 0, 0, 0.1), transparent 70%);
}

.icon-box {
 display: flex;
 gap: 10px;
 margin: 20px 0px;
}



.icon-box svg,
.icon-box .st0 {
 fill: #AB1700;
}

.icon-box .st1 {
 fill: none;
}

.icon-text p {
 margin-bottom: 0;
}

.timeline-swiper .swiper-button-next,
.swiper-button-prev {
 color: var(--primary);
}


@media screen and (max-width: 992px) {
 .about-grid {
  grid-template-columns: 1fr;
 }

 .masonary img {
  width: 90%;
 }

 .masonary .img-2 {
  transform: translate(25px, -40px);
 }
}