:root {
  --primary-color: #ffae00;
  --secondary-color: #f8f8f8;
  --tertiary-color: #8d8d8d;
}

/* About banner section  */
.about-banner-sec {
  position: relative;
  padding-top: 144px;
  padding-bottom: 128px;
  background: url("../assets/Banner.png");
  background-position: center;
  background-size: cover;
}
.about-banner-content {
  position: relative;
}
.outlined {
  font-size: 130px;
  color: transparent;
  -webkit-text-stroke: 2px gray;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 0.8;
}
.outlined > span {
  display: block;
}

.aboutUs {
  display: block;
  color: #3b2a00;
  -webkit-text-stroke: black;
  font-size: 250px;
  text-align: right;
}

.about-banner-img {
  max-width: 982px;
}
.about-banner-img > img {
  width: 100%;
  object-fit: contain;
}
.about-multicar-img {
  max-width: 1360px;
  width: 90%;
  object-fit: contain;
  position: absolute;
  bottom: -74px;
  left: 50%;
  transform: translateX(-50%);
}

/* About Us section */
.abt-top {
  text-align: center;
  margin-bottom: 88px;
}
.abt-top > div {
  margin-bottom: 6px;
}
.abt-top > p {
  max-width: 668px;
  margin: 0 auto;
}
.abt-img {
  max-width: 625px;
}
.abt-img > img {
  width: 100%;
  object-fit: contain;
}

.abt-content > div.heads {
  font-size: 30px;
  margin-bottom: 20px;
  color: var(--primary-color);
}
.abt-content > h2.cmn-heading {
  font-size: 40px;
  max-width: 424px;
  margin-bottom: 40px;
}
.abt-content > p {
  max-width: 530px;
  font-size: 14px;
}
.abt-sec {
  padding-top: 120px;
}
@media screen and (max-width: 1200px) {
  /*About Us section */
  .abt-sec .col-50 {
    width: 100%;
  }

  .abt-img {
    margin: 0 auto 30px;
  }
  .abt-content > div.heads {
    text-align: center;
  }
  .abt-content > p,
  .abt-content > h2.cmn-heading {
    max-width: 100%;
    text-align: center;
  }
}
@media screen and (max-width: 992px) {
  .outlined {
    font-size: 100px;
    text-align: left;
  }
  .aboutUs {
    font-size: 205px;
  }
  .about-multicar-img {
    bottom: -58px;
  }

  /* About us section */
  .abt-content > div.heads {
    margin-bottom: 15px;
  }
  .abt-top > h1,
  .abt-content > h2.cmn-heading {
    margin-bottom: 25px;
  }
}
@media screen and (max-width: 576px) {
  .abt-top > h1,
  .abt-content > h2.cmn-heading {
    font-size: 35px;
  }
  .abt-top {
    margin-bottom: 50px;
  }
  .abt-sec {
    padding-top: 60px;
  }
}
@media screen and (max-width: 768px) {
  .outlined {
    font-size: 80px;
  }
  .aboutUs {
    font-size: 145px;
  }

  .about-banner-sec {
    padding-bottom: 120px;
  }
}
@media screen and (max-width: 576px) {
  .outlined {
    font-size: 47px;
  }
  .aboutUs {
    font-size: 96px;
  }
  .about-multicar-img {
    bottom: -31px;
  }
}

@media screen and (max-width: 420px) {
  .abt-top > h1,
  .abt-content > h2.cmn-heading {
    font-size: 24px;
  }
  .abt-content > h1.cmn-heading {
    margin-bottom: 30px;
  }
  .abt-content > div.heads {
    font-size: 20px;
  }
  .aboutUs {
    font-size: 60px;
  }
  .about-banner-sec {
    padding-bottom: 60px;
  }
}
@media screen and (max-width: 320px) {
  .outlined {
    font-size: 37px;
  }
}