/*=====================================================
ABOUT SECTION
=====================================================*/

.about {
  padding: 120px 0;

  background: #fff;

  position: relative;
}

.about-container {
  width: min(92%, 1320px);

  margin: auto;

  display: grid;

  grid-template-columns: 1.05fr 0.95fr;

  gap: 70px;

  align-items: center;
}

/*=========================================
LEFT
=========================================*/

.section-badge {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 8px 18px;

  border-radius: 40px;

  background: #eef4ff;

  border: 1px solid #c7d2fe;

  color: #2563eb;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 28px;
}

.about-left h2 {
  font-size: 62px;

  line-height: 1.1;

  font-weight: 800;

  color: #0f172a;

  margin-bottom: 28px;
}

.about-left h2 span {
  display: block;

  background: linear-gradient(90deg, #2563eb, #7c3aed);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;
}

.about-text {
  margin-bottom: 22px;
}

.about-left p {
  color: #64748b;

  line-height: 1.9;

  font-size: 17px;
}

/*=========================================
CHECK LIST
=========================================*/

.about-list {
  margin: 40px 0;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 18px 30px;
}

.about-list div {
  display: flex;

  align-items: flex-start;

  gap: 10px;

  color: #475569;

  font-size: 15px;

  line-height: 1.7;
}

.about-list i {
  color: #10b981;

  margin-top: 4px;
}

/*=========================================
BOTTOM CARDS
=========================================*/

.about-small-cards {
  display: flex;

  gap: 18px;
}

.small-card {
  flex: 1;

  background: #fff;

  border: 1px solid #edf2f7;

  border-radius: 18px;

  padding: 24px;

  text-align: center;

  transition: 0.35s;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.small-card:hover {
  transform: translateY(-6px);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.small-card:nth-child(1) {
  background: #eef4ff;
}

.small-card:nth-child(2) {
  background: #ecfdf5;
}

.small-card:nth-child(3) {
  background: #fff7ed;
}

.small-card h3 {
  margin: 0;

  font-size: 36px;

  font-weight: 800;

  color: #2563eb;
}

.small-card span {
  display: block;

  margin-top: 10px;

  color: #64748b;

  font-size: 14px;
}

/*=========================================
RIGHT
=========================================*/

.stats-grid {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

  gap: 14px;
}

.stat-card {
  background: #fff;

  border-radius: 22px;

  border: 1px solid #edf2f7;

  padding: 28px;

  text-align: center;

  transition: 0.35s;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.stat-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.stat-card i {
  width: 60px;

  height: 60px;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: auto auto 18px;

  border-radius: 18px;

  font-size: 26px;
}

/* Icon Colors */

.stat-card:nth-child(1) i {
  background: #eef4ff;
  color: #2563eb;
}

.stat-card:nth-child(2) i {
  background: #f3e8ff;
  color: #7c3aed;
}

.stat-card:nth-child(3) i {
  background: #ecfeff;
  color: #0891b2;
}

.stat-card:nth-child(4) i {
  background: #dcfce7;
  color: #16a34a;
}

.stat-card:nth-child(5) i {
  background: #fff7ed;
  color: #f59e0b;
}

.stat-card:nth-child(6) i {
  background: #fee2e2;
  color: #ef4444;
}

.stat-card h3 {
  margin: 0;

  font-size: 38px;

  color: #2563eb;
}

.stat-card span {
  display: block;

  margin-top: 8px;

  color: #64748b;

  font-size: 14px;
}

/*=========================================
BOTTOM BANNER
=========================================*/

.about-banner {
  margin-top: 28px;

  height: 180px;

  border-radius: 24px;

  overflow: hidden;

  position: relative;

  background:
    linear-gradient(rgba(37, 99, 235, 0.72), rgba(124, 58, 237, 0.72)),
    url("../images/about/team.jpg") center/cover;
}

.about-banner .overlay {
  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  color: #fff;
}

.about-banner h3 {
  margin: 0;

  font-size: 32px;

  font-weight: 700;
}

.about-banner p {
  margin-top: 10px;

  opacity: 0.9;
}