/* =========================================
   HERO QUOTE (Signature)
========================================= */

.about-hero-quote{
  margin-top:.75rem;
  padding:.6rem .9rem;
  border-radius:.6rem;
  font-size:.9rem;
  font-weight:600;
  line-height:1.6;
  background:rgba(13,110,253,.06);
  border-left:3px solid #0d6efd;
  max-width:60ch;
}

html[dir="rtl"] .about-hero-quote{
  border-left:0;
  border-right:3px solid #0d6efd;
}

/* =========================================
   SECTION DOT
========================================= */

.about-section-title{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.about-section-dot{
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:#0d6efd;
  flex-shrink:0;
}

/* =========================================
   BETTER FEATURE CARD FEEL
========================================= */

.about-feature-card{
  transition:all .2s ease;
}

.about-feature-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(0,0,0,.08);
}

/* =========================================
   DARK MODE TUNING
========================================= */

body.dark .about-hero-quote{
  background:rgba(13,110,253,.15);
}

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

@media (max-width:576px){
  .about-hero-quote{
    font-size:.85rem;
  }
}