:root {
    --about-yellow: #FFF100;    
}


.aboutIntro {
  padding: .44rem 0 1.08rem;
  background-color: #181818;
  background-image: url(../images/about-content-bg.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.aboutIntro h1{
    margin-top: 0.46rem;
    color: #FFF;
    font-family: Poppins;
    font-size: clamp(22px, .36rem, 46px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
     line-height: 1.28;
}

.aboutIntroGrid {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 8.3rem);
  gap: .7rem;
  align-items: start;
  margin-top: 0.74rem;
}
.aboutIntroGrid .aboutIntroLeft{
    position: sticky;
    top: -1rem;
}
.aboutPhoto {
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 5;
  border-radius: .4rem;
}

.aboutPhoto img {
  border-radius: inherit;
}

.aboutStats {
  margin-top: .28rem;
}

.aboutStat {
  display: grid;
  grid-template-columns: .46rem minmax(0, 1fr) 1.8rem;
  align-items: center;
  min-height: 1.06rem;
  border-bottom: .01rem solid rgba(255, 255, 255, .2);
  padding-right: 0.67rem;
}

.aboutStatIcon {
  position: relative;
  width: .36rem;
  height: .36rem;
}

.aboutStat strong {
  color: var(--about-yellow);
  font-size: clamp(30px, .46rem, 46px);
  font-weight: 700;
  line-height: 1;
}

.aboutStat strong b {
  font-size: clamp(18px, .28rem, 28px);
  font-weight: 400;
  color: var(--about-yellow);
}

.aboutStat p {
  color: #fff;
  font-size: clamp(14px, .2rem, 20px);
  text-align: right;
}

.aboutReasonList {
  display: grid;
  gap: .24rem;
}

.aboutReason {
  display: flex;
  align-items: center;
  gap: .37rem;
  min-height: 1.37rem;
  padding: .2rem .52rem .2rem .17rem;
  border: .01rem solid #313131;
  border-radius: .2rem;
  background: rgba(0, 0, 0, .5);
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}

.aboutReason span {
  flex: 0 0 .94rem;
  color: transparent;
  font-size: clamp(44px, .66rem, 66px);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: .01rem rgba(255, 255, 255, .18);
}

.aboutReason p {
  color: #fff;
  font-size: clamp(14px, .2rem, 20px);
  font-weight: 500;
  line-height: 1.45;
}
.aboutReason p a{
    color: var(--about-yellow);
    width: fit-content;
    display: inline-block;
}
.aboutReason.active,
.aboutReason:hover,
.aboutReason:focus-within {
  border-color: rgba(255, 241, 0, .4);
  background: rgba(0, 0, 0, .68);
  transform: translateX(-.08rem);
}

.aboutReason.active p,
.aboutReason:hover p,
.aboutReason:focus-within p{
  color: var(--about-yellow);
}
.aboutReason.active span,
.aboutReason:hover span,
.aboutReason:focus-within span{
  -webkit-text-stroke: .01rem var(--about-yellow);
}



.aboutService {
  position: relative;
  min-height: 8.6rem;
  overflow: hidden;
  background: #0d1118;
}

.aboutService>img {
  width: 100%;
  height: 8.6rem;
  object-fit: cover;
}

.aboutService::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .06));
}

.aboutServicePanel {
  position: absolute;
  z-index: 2;
  left: max(.3rem, calc((100vw - 16rem) / 2));
  bottom: 0;
  width: min(11.8rem, 72vw);
  min-height: 6rem;
  padding: 1.24rem 0.2rem 0.4rem 1.8rem;
  border-radius: 0 .6rem 0 0;
  background: rgba(6, 6, 6, .81);
  margin-left: -1.8rem;
}

.aboutServicePanel p {
  color: rgba(255, 255, 255, .76);
  font-size: clamp(13px, .16rem, 16px);
}

.aboutServicePanel h2 {
  max-width: 7.8rem;
  margin-top: .14rem;
  color: #fff;
  font-size: clamp(20px, .36rem, 36px);
  font-weight: 700;
  line-height: 1.28;
}

.aboutServicePanel .aboutview{
  display: grid;
  gap: .22rem;
  margin-top: .64rem;
  color: #fff;
  font-size: clamp(15px, .18rem, 18px);
}

.aboutWhy {
  min-height: 8.25rem;
  padding: .73rem 0 1.2rem;
  background-image: url(../images/about-why-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.aboutWhy .sectionTitle h2 {
  color: #111;
  text-transform: uppercase;
  font-size: clamp(24px, .58rem, 58px);
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
}

.aboutWhy .sectionTitle p {
font-size: clamp(12px, .18rem, 18px);
  color: rgba(0, 0, 0, .72);
  text-align: center;
}

.aboutWhyList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .56rem;
  margin-top: .82rem;
}

.aboutWhyCard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 4.45rem;
  padding: .7rem .45rem .45rem;
  border-radius: .08rem;
  background: #171717;
  text-align: center;
  transition: transform .28s ease, box-shadow .28s ease;
}

.aboutWhyBg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .28s ease, transform .35s ease;
}

.aboutWhyCard::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: '';
  background: rgba(0, 0, 0, .66);
  opacity: 0;
  transition: opacity .28s ease;
}

.aboutWhyCard>*:not(.aboutWhyBg) {
  position: relative;
  z-index: 2;
}

.aboutWhyCard:hover,
.aboutWhyCard:focus-visible,
.aboutWhyCard.is-active {
  transform: translateY(-.12rem);
  box-shadow: 0 .18rem .28rem rgba(100, 39, 0, .32);
}

.aboutWhyCard:hover .aboutWhyBg,
.aboutWhyCard:hover::before,
.aboutWhyCard:focus-visible .aboutWhyBg,
.aboutWhyCard:focus-visible::before,
.aboutWhyCard.is-active .aboutWhyBg,
.aboutWhyCard.is-active::before {
  opacity: 1;
}

.aboutWhyCard:hover::before,
.aboutWhyCard:focus-visible::before,
.aboutWhyCard.is-active::before {
  z-index: 2;
}

.aboutWhyCard:hover .aboutWhyBg,
.aboutWhyCard:focus-visible .aboutWhyBg,
.aboutWhyCard.is-active .aboutWhyBg {
  transform: scale(1.04);
}

.aboutWhyIcon {
  display: grid;
  height: .8rem;
  place-items: center;
}

.aboutWhyIcon img {
  display: block;
  width: .8rem;
  height: .8rem;
  object-fit: contain;
}

.aboutWhyCard h3 {
  margin: .25rem 0 .28rem;
  color: #fff;
  font-size: clamp(16px, .24rem, 24px);
  font-weight: 700;
}

.aboutWhyCard p {
  color: rgba(255, 255, 255, .64);
  font-size: clamp(12px, .16rem, 16px);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .aboutHero {
    height: 3.8rem;
  }

  .aboutHeroPrev {
    left: .14rem;
  }

  .aboutHeroNext {
    right: .14rem;
  }

  .aboutIntro {
    padding: .3rem 0 .58rem;
  }

  .aboutBreadcrumb {
    margin-bottom: .3rem;
  }

  .aboutIntroGrid,
  .aboutWhyList {
    grid-template-columns: 1fr;
  }

  .aboutIntroGrid {
    gap: .36rem;
  }
.aboutIntroGrid .aboutIntroLeft{
    position: inherit;
}
  .aboutPhoto {
    width: 100%;
    height: 3.2rem;
  }

  .aboutStat {
    grid-template-columns: .42rem 1fr;
    gap: .12rem;
    padding: .18rem 0;
  }

  .aboutStat p {
    grid-column: 2;
    text-align: left;
  }

  .aboutReason {
    gap: .18rem;
    min-height: 1.1rem;
    padding: .18rem;
    border-radius: .14rem;
  }

  .aboutReason span {
    flex-basis: .62rem;
  }

  .aboutService {
    min-height: 6.8rem;
  }

  .aboutService>img {
    height: 6.8rem;
  }

  .aboutServicePanel {
    left: 0;
    min-height: 0;
    padding: .42rem 3%;
    border-radius: .24rem .24rem 0 0;
    width: 100%;
    margin: 0;
  }

  .aboutServicePanel ul {
    margin-top: .32rem;
  }

  .aboutWhy {
    padding: .48rem 0 .72rem;
  }

  .aboutWhyList {
    gap: .18rem;
    margin-top: .42rem;
  }

  .aboutWhyCard {
    min-height: 3.4rem;
    padding: .38rem .22rem;
  }
}