:root {
  --mainColor: #87247f;
  --secondaryColor: #1d1868;
  --white: #f5f5f5;
  --black: #101014;
  --txt: #8f9091;
  --sectionBG: #f8f9fa;
}

.home-service {
  background-image: url("../media/imgs/service-overlay.jpg");
  background-position: center;
  background-size: cover;
  background-blend-mode: darken;
  background-color: rgba(0, 0, 0, 0.1);
  height: fit-content;
  width: inherit;
  padding: 250px 0 250px 0;
}

.side-contact {
  background-color: var(--sectionBG);
  display: none;
}

.col-md-3,
.col-md-4 {
  width: 100%;
}

.service-description {
  background-color: var(--sectionBG);
}

.swiper-slide img {
  display: block;
  width: 60%;
  height: 100%;
  object-fit: cover;
}

.carousel img {
  width: 100% !important;
  margin: auto;
  border-radius: 8px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.benfits h4 {
  font-size: 1.2rem;
}

.benfits p,
.cards p {
  color: var(--txt);
  line-height: 32px;
  font-size: 14px;
}
.cards .card {
  margin: 1em;
  border-top-right-radius: 16px;
  border-top-left-radius: 16px;
  border-top: solid 8px var(--mainColor);
}
.advantages {
  background-color: var(--sectionBG);
}

.cards i {
  margin: auto;
  font-size: 2.5em;
  color: var(--mainColor);
}