/** @format */

.about-two-col-green {
  position: relative;
  background-color: #1b3137;
  padding: 100px 0 120px 0;
}

.about-two-col-green svg {
  width: 100%;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
}

.about-two-col-green h2,
.about-two-col-green p {
  color: #fff;
}

.about-two-col-green::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 0;
  height: 0;

  /* Triangle using borders */
  border-left: 100vw solid transparent;
  border-top: 100px solid #1b3137;

  /* Flip horizontally */
  transform: scaleY(-1);
}

.about-two-col-green .inner {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: flex;
  flex-direction: column;
  grid-gap: 30px;
  gap: 30px;
}

.about-two-col-green .inner .left-side {
  position: relative;
}

.about-two-col-green .inner .left-side::before {
  content: '';
  position: absolute;
  background: #7fc242;
  height: 10px;
  width: 100%;
  right: calc(100% + 20px);
  top: 17px;
}

.about-two-col-green .inner .left-side h2 {
  color: #fff;
  font-family: Outfit;
  font-size: 32px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}

.about-two-col-green .inner .left-side span {
  color: #7fc242;
  font-family: Outfit;
  font-weight: 700;
}

@media screen and (min-width: 1025px) {
  .about-two-col-green {
    /* padding-top: 230px; */
    padding-top: 100px;
  }

  .about-two-col-green .inner {
    flex-direction: row;
    grid-gap: 110px;
    gap: 110px;
  }

  .about-two-col-green .inner .left-side h2 {
    font-size: 40px;
  }

  .about-two-col-green .inner .left-side {
    flex: 1;
  }

  .about-two-col-green .inner .left-side ::before {
    top: 20px;
  }
}

@media screen and (min-width: 1921px) {
  .about-two-col-green .inner .left-side::before {
    width: 50px;
  }
}