/* =========================
   ABOUT US - SECTION 01 HERO
========================= */

.about-hero { 
  width: 100%; 
  background: #f7f7f5; 
  padding: 56px 24px; 
  box-sizing: border-box; 
  font-family: Arial, Helvetica, sans-serif; 
} 
 
.about-hero * {
  box-sizing: border-box;
}

.about-hero .about-hero-inner { 
  max-width: 1360px; 
  margin: 0 auto; 
  display: grid; 
  grid-template-columns: 0.9fr 1.1fr; 
  align-items: center; 
  gap: 54px; 
} 
 
.about-hero .about-copy { 
  max-width: 560px; 
} 


/* =========================
   EYEBROW
========================= */

.about-hero .about-eyebrow { 
  display: inline-block; 
  margin-bottom: 18px; 
  color: #2475df; 
  font-size: 17px; 
  line-height: 1.2; 
  font-weight: 700; 
  letter-spacing: 1.4px; 
  text-transform: uppercase; 
} 


/* =========================
   TITLE
========================= */

.about-hero h1 { 
  margin: 0 0 22px; 
  color: #0b2345; 
  font-size: 21px !important; 
  line-height: 1.12; 
  font-weight: 700; 
  letter-spacing: -0.8px; 
} 


/* =========================
   DESCRIPTION
========================= */

.about-hero .about-desc { 
  margin: 0; 
  max-width: 540px; 
  color: #5f6b7a; 
  font-size: 17px; 
  line-height: 1.75; 
} 


/* =========================
   TAGS
========================= */

.about-hero .about-tags { 
  margin-top: 28px; 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  flex-wrap: wrap; 
} 
 
.about-hero .about-tags span { 
  color: #0b2345; 
  font-size: 14px; 
  font-weight: 600; 
} 
 
.about-hero .about-tags i { 
  color: #9aa8b7; 
  font-style: normal; 
  font-size: 13px; 
} 


/* =========================
   IMAGE
========================= */

.about-hero .about-image-wrap { 
  width: 100%; 
  position: relative; 
} 
 
.about-hero .about-image-wrap::before { 
  content: ""; 
  position: absolute; 
  width: 85%; 
  height: 85%; 
  right: -14px; 
  bottom: -14px; 
  background: #dfe8f3; 
  border-radius: 12px; 
  z-index: 0; 
} 
 
.about-hero .about-image { 
  position: relative; 
  z-index: 1; 
  width: 100%; 
  aspect-ratio: 16 / 9; 
  overflow: hidden; 
  border-radius: 10px; 
  background: #e9edf1; 
} 
 
.about-hero .about-image img { 
  width: 100%; 
  height: 100%; 
  display: block; 
  object-fit: cover; 
  object-position: center center; 
} 


/* =========================
   TABLET
========================= */

@media (max-width: 992px) { 

  .about-hero { 
    padding: 46px 22px; 
  } 
 
  .about-hero .about-hero-inner { 
    grid-template-columns: 1fr; 
    gap: 34px; 
  } 
 
  .about-hero .about-copy { 
    max-width: 720px; 
  } 
 
  .about-hero h1 { 
    font-size: 21px !important; 
  } 
 
  .about-hero .about-image { 
    aspect-ratio: 16 / 8.8; 
  } 
 
  .about-hero .about-image-wrap::before { 
    right: -10px; 
    bottom: -10px; 
  } 
} 


/* =========================
   MOBILE
========================= */

@media (max-width: 640px) { 

  .about-hero { 
    padding: 38px 18px 42px; 
  } 
 
  .about-hero .about-eyebrow { 
    margin-bottom: 14px; 
    font-size: 14px; 
    letter-spacing: 1.2px; 
  } 
 
  .about-hero h1 { 
    margin-bottom: 18px; 
    font-size: 21px !important; 
    line-height: 1.16; 
  } 
 
  .about-hero .about-desc { 
    font-size: 15px; 
    line-height: 1.7; 
  } 
 
  .about-hero .about-tags { 
    margin-top: 22px; 
    gap: 8px; 
  } 
 
  .about-hero .about-tags span { 
    font-size: 13px; 
  } 
 
  .about-hero .about-image { 
    aspect-ratio: 4 / 3; 
    border-radius: 8px; 
  } 
 
  .about-hero .about-image-wrap::before { 
    display: none; 
  } 
}