/* ============================= */
/* About section                 */
/* ============================= */

.about {
  margin: auto;
  padding: 80px 60px; /* top-bottom | left-right */
}

/* Layout: text + right column */
.about-content {
  display: flex;
  gap: 40px;               /* space between paragraph and right column */
  align-items: flex-start; /* align to top */
  max-width: 1200px;
  margin: 0 auto;
}

/* Left column: main paragraph */
.introduction {
  flex: 2;                 /* bigger than right column */
  font-size: 16px;
  line-height: 2;
}

/* Right column: stacked boxes */
.right-column {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;               /* spacing between boxes */
}

/* Keep all boxes flush */
.right-column .about-box,
.right-column .about-box2,
.right-column .about-box3 {
  margin: 0;
}

/* Box styles */
.about-box,
.about-box2,
.about-box3 {
  display: flex;
  gap: 10px;
  padding: 15px;
  background: #ababff;
  border-radius: 10px;
  align-items: center;
}

/* Logos/icons inside boxes */
.about-box img,
.about-box2 img,
.about-box3 img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Text inside boxes */
.about-box p,
.about-box2 p,
.about-box3 p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

/* ============================= */
/* Responsive                    */
/* ============================= */

@media (max-width: 768px) {
  .about-content {
    flex-direction: column;
    text-align: center;
  }

  .right-column {
    flex-direction: column;
    align-items: center;
  }
}