/* AboutBoggler Page Styles */

.about-hero-section {
  background: linear-gradient(180deg, #f7fafc 0%, #e3f0ff 100%);
  padding: 48px 0 32px 0;
  position: relative;
  overflow: hidden;
}

.about-hero-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
}

.about-hero-text {
  flex: 1 1 340px;
  min-width: 320px;
  max-width: 500px;
}

.about-hero-text h1 {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: #1a2340;
}

.about-hero-text p {
  font-size: 1.15rem;
  margin-bottom: 10px;
  color: #2d3a4d;
}

.boggler-cta-container {
  margin: 24px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.boggler-cta-container button {
  background: #25d366;
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 28px 12px 18px;
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  transition: background 0.2s;
}
.boggler-cta-container button:hover {
  background: #1ebe5d;
}
.boggler-cta-container .cta-subtext {
  font-size: 0.95rem;
  color: #6b7a90;
  margin-top: 4px;
}

.about-hero-globe {
  flex: 1 1 260px;
  min-width: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-divider {
  text-align: center;
  color: #b5c6e0;
  font-size: 2.2rem;
  margin: 36px 0 18px 0;
  letter-spacing: 0.2em;
}

.main-body-section.about {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(30,50,90,0.06);
  margin: 32px auto;
  max-width: 900px;
  padding: 36px 28px 32px 28px;
  position: relative;
}

.main-body-section.about h2 {
  font-size: 2rem;
  color: #1a2340;
  margin-bottom: 18px;
}

.main-body-section.about ul {
  margin: 12px 0 18px 24px;
  padding: 0;
  color: #2d3a4d;
}

.main-body-section.about ul li {
  margin-bottom: 6px;
  font-size: 1.08rem;
}

.about-how-section {
  background: #f7fafc;
  border: 1px solid #e3f0ff;
}

.about-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  margin: 32px 0 18px 0;
  flex-wrap: wrap;
}

.about-step {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(30,50,90,0.07);
  padding: 22px 18px 18px 18px;
  min-width: 180px;
  max-width: 220px;
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.about-step .icon {
  margin-bottom: 10px;
}
.about-step .icon img {
  width: 38px;
  height: 38px;
}
.about-step strong {
  font-size: 1.1rem;
  color: #1a2340;
  margin-bottom: 6px;
}
.about-step p {
  font-size: 1rem;
  color: #2d3a4d;
}

.about-step-arrow {
  width: 32px;
  height: 32px;
  background: url('../img/arrow-right.svg') center center no-repeat;
  background-size: 24px 24px;
  align-self: center;
  margin: 0 8px;
}

.about-steps-done {
  text-align: center;
  font-size: 1.1rem;
  color: #1a2340;
  margin-top: 18px;
}

.about-footer-cta {
  background: #e3f0ff;
  border: 1px solid #c7e0ff;
  border-radius: 18px;
  margin-bottom: 48px;
  padding-bottom: 36px;
}

.fixed-cloud-1, .fixed-cloud-2 {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.fixed-cloud-1 {
  top: 0;
  left: 0;
  width: 120px;
  opacity: 0.7;
}
.fixed-cloud-2 {
  top: 0;
  right: 0;
  width: 120px;
  opacity: 0.7;
}

@media (max-width: 900px) {
  .about-hero-content {
    flex-direction: column;
    gap: 32px;
  }
  .main-body-section.about {
    padding: 24px 8vw 24px 8vw;
  }
}

@media (max-width: 600px) {
  .about-hero-section {
    padding: 24px 0 16px 0;
  }
  .about-hero-text h1 {
    font-size: 2rem;
  }
  .main-body-section.about h2 {
    font-size: 1.3rem;
  }
  .about-step {
    min-width: 140px;
    max-width: 180px;
    padding: 14px 8px 12px 8px;
  }
  .about-step .icon img {
    width: 28px;
    height: 28px;
  }
  .fixed-cloud-1, .fixed-cloud-2 {
    width: 70px;
  }
}