* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #fff;
  color: #000;
  font-family: Arial, Helvetica, sans-serif
}

body {
  overflow-x: hidden
}

.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #fff
}

.top-strip {
  width: 100%;
  height: 102px;
  background: #151515
}

.line {
  height: 35px;
  background: #151515;
  margin-left: 0
}

.line-large {
  width: 57.8%;
  margin-top: 19px
}

.line-small {
  width: 27.5%;
  height: 20px;
  margin-top: 19px
}

.layout {
  width: min(1720px, 100%);
  margin: 125px auto 0;
  padding: 0 90px 80px
}

.row {
  display: flex;
  align-items: center
}

.row-one {
  gap: 85px
}

.row-two {
  justify-content: center;
  gap: 58px;
  margin-top: 82px
}

.row-three {
  justify-content: center;
  gap: 64px;
  margin-top: 96px
}

h1,
h2 {
  margin: 0;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: .9;
  color: #000
}

h1 {
  font-size: clamp(72px, 8.6vw, 171px)
}

h2 {
  font-size: clamp(68px, 8vw, 160px)
}

.pill {
  display: block;
  border: 1.5px solid #111;
  border-radius: 42px;
  flex: 0 0 auto
}

.pill-green {
  width: 530px;
  height: 135px;
  background: #299b50
}

.pill-purple {
  width: 200px;
  height: 135px;
  background: #6a3d98
}

.pill-blue {
  width: 725px;
  height: 135px;
  background: #218998
}

@media(max-width:1200px) {
  .layout {
    padding: 0 55px 70px;
    margin-top: 90px
  }

  .row-one {
    gap: 45px
  }

  .row-two {
    gap: 35px
  }

  .row-three {
    gap: 40px
  }

  .pill-green {
    width: 34vw
  }

  .pill-blue {
    width: 42vw
  }

  .pill-purple {
    width: 14vw
  }
}

@media(max-width:820px) {
  .top-strip {
    height: 70px
  }

  .line-large {
    height: 25px;
    width: 64%;
    margin-top: 14px
  }

  .line-small {
    height: 15px;
    width: 36%;
    margin-top: 14px
  }

  .layout {
    margin-top: 70px;
    padding: 0 28px 50px
  }

  .row {
    justify-content: flex-start;
    gap: 24px
  }

  .row-two {
    justify-content: flex-start;
    margin-left: 18vw;
    margin-top: 58px
  }

  .row-three {
    justify-content: flex-start;
    margin-top: 62px
  }

  .pill {
    height: 74px;
    border-radius: 28px
  }

  .pill-green {
    width: 34vw
  }

  .pill-purple {
    width: 18vw
  }

  .pill-blue {
    width: 38vw
  }

  h1 {
    font-size: clamp(54px, 13vw, 95px)
  }

  h2 {
    font-size: clamp(50px, 12vw, 88px)
  }
}

@media(max-width:560px) {
  .layout {
    padding: 0 20px 45px;
    margin-top: 55px
  }

  .row {
    flex-wrap: wrap
  }

  .row-one,
  .row-two,
  .row-three {
    margin-left: 0;
    gap: 18px
  }

  .row-two,
  .row-three {
    margin-top: 48px
  }

  .pill {
    height: 52px;
    border-radius: 22px
  }

  .pill-green {
    width: 70vw
  }

  .pill-purple {
    width: 38vw
  }

  .pill-blue {
    width: 78vw
  }

  h1,
  h2 {
    letter-spacing: 0
  }

  .row-three {
    flex-direction: column-reverse;
    align-items: flex-start
  }
}