.about .hero {
  height: 534px;
}

.about .hero p {
  width: 342px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #ffffff;
  margin-bottom: 55px;
}

.about .cta-demo {
  padding: 15px 32px;
  gap: 10px;
  background: linear-gradient(276.49deg, #ecb903 0.2%, #dc9d0d 100%);
  border-radius: 100px;
  color: #ffffff;
}

.about .kamapay {
  padding: 88px 0 120px;
}

.about .kamapay .container {
  display: flex;
  align-items: center;
  gap: 102px;
}

.about .kamapay img {
  height: 425px;
}

.about .kamapay .right .text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 40px;
  gap: 8px;
  width: 546px;
  max-height: 204px;
  background: linear-gradient(276.49deg, #ecb903 0.2%, #dc9d0d 100%);
  border-radius: 20px;
}

.about .kamapay .right .text-wrapper p {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #ffffff;

  flex: none;
  order: 0;
  flex-grow: 0;
}

.vision {
  background-color: #242424;
  height: 412px;
  position: relative;
  overflow: visible;
}

.vision .container {
  display: flex;
}

.vision h2 {
  font-style: normal;
  font-weight: 700;
  font-size: 64px;
  line-height: 68px;
  color: #ffffff;
}

.vision .left p {
  width: 465px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #ffffff;
}

.vision .right img {
  position: absolute;
  z-index: 3;
  bottom: 0;
}

.values {
  padding-top: 112px;
}