header {
  height: calc(100vh - 100px);
  position: relative;
  color: var(--White, #fff);
  z-index: 2;
}
header .host {
  text-align: center;
}
header .details h1.heading {
  color: var(--Nedbank-Green, #006341);
  font-weight: bold;
  margin: 0;
  font-size: 60px;
}
header .details h2 {
  margin: 0px;
  color: var(--Nedbank-Green, #006341);
  font-size: 25px;
  font-weight: 200;
}
header .info {
  position: relative;
  width: fit-content;
  margin-left: 10%;
  color: var(--White, #fff);
  z-index: 2;
  display: flex;
  /*.details {
      h2 {
          margin: 90px auto auto 50px;
          font-size: 40px;
      }
  }*/
}
header .info .logo {
  width: 240px;
  height: auto;
  margin-top: 24px;
}
header .info .host {
  text-align: center;
  margin: 20px 30px 50px 30px;
}
header .banner {
  display: flex;
  position: absolute;
  bottom: 80px;
  left: 0;
  z-index: 3;
  height: 110px;
  width: 50%;
  min-width: fit-content;
}
header .banner .pattern__square {
  background-color: var(--Sponsor-Green, #80c342);
  width: 40%;
  background-size: auto;
  background-position: left center;
  background-repeat: no-repeat;
}
header .banner .green__square {
  background-color: var(--Nedbank-Green, #006341);
  width: 5%;
}
header .banner .square {
  height: 100%;
  min-width: fit-content;
  width: calc(60% - 66px);
  background-color: var(--White, #fff);
  display: flex;
  justify-content: flex-start;
  padding-left: 20px;
}
header .banner .square ul {
  list-style: none;
  display: flex;
  gap: 48px;
  align-items: center;
}
header .banner .square ul img {
  height: 80%;
  width: auto;
  max-width: 280px;
}
header .banner .triangle {
  border-bottom: var(--White, #fff) solid 110px;
  border-right: transparent solid 66px;
}
header .champion {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  height: 100%;
  width: auto;
}
header .vector {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
header .vector svg {
  width: 100%;
  height: 100%;
}
header .vector svg path {
  width: 100%;
  height: 100%;
}

@media (max-width: 1440px) {
  header {
    height: calc(100vh - 75px);
  }
}
@media (max-width: 1280px) {
  header .banner {
    bottom: 60px;
    height: 96px;
  }
  header .banner .details h1 {
    font-size: 50px;
  }
  header .banner .details h2 {
    font-size: 25px;
  }
  header .banner .triangle {
    border-bottom: var(--White, #fff) solid 96px;
    border-right: transparent solid 66px;
  }
}
@media (max-width: 1024px) {
  header {
    height: calc(100vh - 126px);
    display: flex;
    justify-content: center;
  }
  header .info {
    margin-left: unset;
    text-align: center;
    align-items: center;
  }
  header .info .host {
    margin: 0px;
  }
  header .info .logo {
    height: auto;
    width: 200px;
    margin-top: -20em;
  }
  header .info h2 {
    text-align: left;
  }
  header .champion {
    height: auto;
    width: 100%;
    max-height: fit-content;
    max-width: 50vw;
  }
  header .banner {
    bottom: 16px;
    width: 70%;
    height: 96px;
  }
  header .banner .triangle {
    display: flex;
  }
  header .banner .square {
    width: 70%;
    justify-content: flex-start;
  }
}
@media (max-width: 768px) {
  header .champion {
    max-width: 70vw;
  }
  header .info h2 {
    font-size: 32px;
  }
  header .banner {
    height: 80px;
  }
  header .banner .square .details h1.heading {
    color: var(--Nedbank-Green, #006341);
    font-weight: bold;
    margin: 0;
    font-size: 40px;
  }
  header .banner .square .details h2 {
    margin: 0px;
    color: var(--Nedbank-Green, #006341);
    font-size: 20px;
    font-weight: 200;
  }
  header .banner .square ul {
    gap: 24px;
    overflow-x: scroll;
    max-width: 100vw;
  }
  header .banner .square ul li {
    display: flex;
    align-items: center;
    height: 100%;
  }
  header .banner .triangle {
    border-bottom: var(--White, #fff) solid 80px;
  }
}
@media (max-width: 480px) {
  header .banner {
    height: 80px;
  }
  header .banner .pattern__square {
    display: none;
  }
  header .banner .green__square {
    display: none;
  }
  header .banner .triangle {
    border-bottom: var(--White, #fff) solid 80px;
  }
  header .champion {
    max-width: 90vw;
  }
}

/*# sourceMappingURL=header.css.map */