@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght@800&display=swap");
:root {
  --font-size: 0.8em;
  --bg1: #f5f8f7;
  --blue: #3498db;
  --green: #2ecc71;
  --purple: #9b59b6;
  --gold: #f1c40f;
  --red: #e74c3c;
  --orange: #e67e22;
  --shadow1: 0 2px 4px #00000026, 0 3px 6px #0000001f;
  --shadow2: 0 2px 6px #00000044, 0 4px 7px #00000022;
}

html {
    width: 100%;
    height: 100%;
    background: #151519;
    font-family: 'Roboto', sans-serif;
}
body {
    width: 100%;
    height: 100%;
    background: url(img/bg.jpg) center no-repeat #151519;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    background-size: cover;
}
section img {
    width:100%;
    display: block;
}
header {
    background: #000;
    padding: 15px 0;
    border-bottom: solid 2px #1a7026;
}
header div {
    
}
header>div {
    
}
header>div>div {
    
}
header>div>div>div {
    
}
header>div>div>div>img {
    margin: auto;
    display: block;
}
section {
    margin: 55px 0;
}
.mainPromoText {
    font-size: 32px;
}
.joinusButton {
    font-weight: 800;
    margin: 20px 0;
}
.subPromoImage {
    max-width: 140px;
    display: block;
}
.subPromoText {
    font-weight: 400;
    color: #838080;
    margin: 0;
    padding: 0;
}
ul.infoGraphic {
    font-size: var(--font-size);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0;
}
ul.infoGraphic li {
    position: relative;
    width: 33.33%;
    background: var(--bg1);
    padding: 0.5em;
    z-index: 1;
    transition: all 0.2s;
    cursor: pointer;
    color: #000;
    list-style: none
}
ul.infoGraphic li .numberWrap {
  position: absolute;
  top:18px;
}
ul.infoGraphic li .number {
    font-family: "maven pro", sans-serif;
    font-size: 13em;
    font-weight: 900;
    width: 0.7em;
    text-align: center;
    position: relative;
    left: 24px;
    top: -45px;
    color: #5cb85c;
}
ul.infoGraphic li .number.fontColor1 {
  color: var(--blue);
}
ul.infoGraphic li .number.fontColor2 {
  color: var(--green);
}
ul.infoGraphic li .number.fontColor3 {
  color: var(--purple);
}
ul.infoGraphic li .number.fontColor4 {
  color: var(--gold);
}
ul.infoGraphic li .number.fontColor5 {
  color: var(--red);
}
ul.infoGraphic li .number.fontColor6 {
  color: var(--orange);
}
ul.infoGraphic li .coverWrap {
    transform: rotate(130deg);
    position: absolute;
    width: 170px;
    height: 68px;
    left: 45px;
    top: 49px;
}
ul.infoGraphic li .coverWrap .numberCover {
    position: absolute;
    background: var(--bg1);
    width: 14em;
    height: 6em;
    border-radius: 50% 50% 0 0;
    border-bottom: 3px solid #f5f8f7;
    transition: all 0.4s;
}
ul.infoGraphic li .coverWrap .numberCover::before {
  position: absolute;
  content: "";
  bottom: 5px;
  left: 4em;
  right: 4em;
  top: 5em;
  box-shadow: 0 0 30px 17px #48668577;
  border-radius: 100px/10px;
  z-index: -1;
}
ul.infoGraphic li .coverWrap .numberCover::after {
  position: absolute;
  bottom: 0;
  content: "";
  left: -10%;
  width: 120%;
  height: 150%;
  background: radial-gradient(at bottom, #48668533, transparent, transparent);
  z-index: 1;
}
ul.infoGraphic li .content {
    margin: 4em 2em 3em 12em;
  position: relative;
}
ul.infoGraphic li .content h2 {
  font-size: 1.7em;
  font-weight: 500;
  text-align: center;
  margin-bottom: 10px;
  text-transform: uppercase;
}
ul.infoGraphic li .content p {
  line-height: 1.5em;
}

ul.infoGraphic li:hover .coverWrap .numberCover {
  border-radius: 100%;
}

.icon {
  position: absolute;
  font-size: 2rem;
  text-align: center;
  top: -1.3em;
  left: 50%;
  transform: translatex(-50%);
}
.icon:before {
  color: #666;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

.iconCodepen:before {
  content: "";
}

.iconSocial:before {
  content: "";
}

.iconAirplane:before {
  content: "";
}

.iconMap:before {
  content: "";
}

.iconBulb:before {
  content: "";
}

.iconPeace:before {
  content: "";
}

.sliderBox {
  text-align: center;
}
.sliderBox .range-value {
  font-weight: 500;
  font-size: 22px;
}
@media only screen and (max-width: 991px) {
  .mainPromoText, .subPromoText {
    text-align: center;
  }
  .joinusButton {
    display: block;
    padding: 20px 0;
    font-size: 1.5em;
  }
  .subPromoImage {
    margin: auto;
  }
  .subPromoText {
  }
  ul.infoGraphic li {
    width: 100%;
  }

ul.infoGraphic li .content h2 {
  font-size: 3em;
}
ul.infoGraphic li .content p {
  font-size: 1.5em;
  text-align: center;
}
}