/* ABOUT INTRO
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.about-intro-visual {
   position: relative;
   overflow: hidden;
   border-radius: 10px;
}

.about-intro-visual > img {
   width: 100%;
   min-height: 520px;
   display: block;
   object-fit: cover;
}

.about-intro-tag {
   position: absolute;
   right: 0;
   bottom: 0;
   display: flex;
   gap: 1px;
   color: var(--clr-white);
   background: var(--clr-secondary);
}

.about-intro-tag span {
   padding: 14px 18px;
   font-weight: 700;
}


/* OUR ROLE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.about-role { background: var(--clr-light); }

.role-statement {
   padding: 30px;
   background: var(--clr-white);
   border-radius: 10px;
   box-shadow: 0 10px 30px rgba(14, 32, 87, .07);
}

.role-statement > div {
   display: flex;
   align-items: center;
   gap: 18px;
}

.role-statement span {
   color: var(--clr-secondary);
   font-family: var(--font-heading);
   font-size: 1.4rem;
   font-weight: 700;
}

.role-statement > i {
   display: block;
   margin: 18px 0 18px 9px;
   color: var(--clr-secondary);
}


/* WHO WE SERVE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.about-audiences { background: var(--clr-white); }


/* WHY ASIAON
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.about-why { background: var(--clr-light); }


/* RESPONSIVE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media (max-width: 991.98px) {
   .about-intro-visual > img { min-height: 430px; }
}

@media (max-width: 575.98px) {
   .about-intro-tag {
      left: 0;
      right: 0;
      justify-content: center;
   }

   .about-intro-tag span { padding: 12px 8px; font-size: .8rem; }
   .about-intro-visual > img { min-height: 380px; }
   .role-statement { padding: 24px 20px; }
}