@font-face {
  font-family: 'Helvetica';
  font-style: normal;
  font-weight: normal;
  src: url('../woff/helvetica.woff') format('woff');
  }

  @font-face {
    font-family: 'Helveticabold';
    font-style: normal;
    font-weight: normal;
    src: url('../woff/helvetica-bold.woff') format('woff');
    }
    

:root {
    --helvetica: "Helvetica", sans-serif;
    --helveticabold: "Helveticabold", sans-serif;
    --drkblu: #132649;
    --grey: #666666;
    --lgtgrey: #f5f5f5;
    --white: #FFF;
    --font45: 30px;
    --font20: 18px;
    --font30: 30px;
    --lineheight30: 30px;
    --lineheight30: 25px;
  }

  body {
    font-size:16px;
    font-family: var(--helvetica);
    margin: 0px;
    padding: 0px;
   /* overflow-x: hidden;*/
}

.container {
    max-width: 1200px;
}

.header {
  background-color: #132649; 
  padding: 20px 0px;
}

.white {
  color: var(--white);
}

.lgtgrey {
  background-color: var(--lgtgrey);
}

section.about, section.network, section.key, section.sust, section.future, section.env, section.banner, section.previouse{
  margin: 50px 0px 0px 0px;  
}

h2 {
  font-family: var(--helveticabold);
  color: var(--drkblu);
  font-size: var(--font45);
  padding-bottom: 30px;
}

.about p{
  font-family: var(--helvetica);
  color: var(--grey);
  font-size: var(--font20);
  line-height: var(--lineheight30);
}

.blbox {
  background-color: #923088;
  border-radius: 20px;
  padding: 20px 30px;
}

.wtbox {
  background-color: var(--white);
  border-radius: 20px;
  padding: 20px;
}
.height570 {
  height: 570px;
}

.wtbox img {
  width: 100%;
  height: 425px;
  object-fit: contain;
}
.network p {
  font-family: var(--helvetica);
  color: var(--white);
  font-size: var(--font20);
  line-height: var(--lineheight25);
  margin: 0px; 
  padding: 10px 0px 0px 0px;
}

.network p.bold {
  font-family: var(--helveticabold);
  color: var(--white);
  font-size: var(--font30);
  line-height: var(--lineheight30);
  margin: 0px; 
  padding: 10px 0px 0px 0px;
}

.blbox h3 {
  color: #FFF;
  text-align: right;
  font-size: 16px;
  padding-top: 10px;
}

.pad0 {
  padding: 0px;
}

.imgtxt {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.key, .future, .env {
  padding: 50px 0px;
}
.key img {
  border-radius: 20px;
}
.padtop30 {
  padding-top: 30px;
}

.marginbtm30 {
  margin-bottom: 30px;
}

a.orangelink {
  color: #E86020;
  font-size: 24px;
  padding-top: 20px;
  display: inline-block;
  text-decoration: underline;
}

.sust p.bold {
  font-family: var(--helveticabold);
  color: #59595B;
  font-size: var(--font20);
  line-height: var(--lineheight30);
  margin: 0px;
  padding-bottom: 5px; 
}


.sust .smallbold {
  font-family: var(--helveticabold);
  color: #898989;
  font-size: 16px;
}

.sust .imghold {
  width: 92px; float: left;
}
.sust .conthold {
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  padding-left: 20px;
}

.sust ul {
  margin-left: 50px;
}

.sust li {
  font-size: 16px;
  color: #59595B;
  padding-bottom: 10px;
  list-style: none;
  display: flex;
  gap: 10px;
  align-items: flex-start;
} 

.sust li img {padding-top: 8px;}

.sust li:before {
 /* content: url('../images/arrow-right.svg');
  width: 14px;
  height: 7px;
  padding-right: 10px;*/
}

.sust .brdbtm {
  border-bottom: 0.5px solid #000000;
  padding-bottom: 30px;
  margin-bottom: 50px;
}

.future p{
  font-family: var(--helvetica);
  color: var(--grey);
  font-size: var(--font20);
  line-height: var(--lineheight30);
}

.future ul {
  margin: 20px 0px 20px 0px;
  padding: 0px;
}

.future li {
  font-family: var(--helveticabold);
  color: var(--drkblu);
  font-size: var(--font20);
  line-height: var(--lineheight30);
  list-style: none;
  padding-bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;

}

.future li img {
  padding-top: 5px;
}
.env .box {
  border-radius: 90px;
  padding: 20px 30px;
  height: 100%;
  height: 172px;
}
.env .blbg {
  background: #19335D;
}

.env .orgbg {
  background: #F39A21;
}

.env .redbg {
  background: #F15626;
}


.env h3 {
  font-family: var(--helveticabold);
  font-size: var(--font20);
  color: var(--white);
  padding: 0px 0px 10px 70px;
}

.env p {
  font-size: 16px;
  color: var(--white);
  line-height: 20px;
  font-family: var(--helvetica);
}

.env .contbg {
  display: flex; 
  align-items: center; 
  gap: 20px;

}

a.download {
  background: #3B3374;
  border-radius: 30px;
  font-family: var(--helvetica);
  font-size: var(--font20);
  color: var(--white);
  padding: 20px 40px;
  display: inline-block;
  margin: 50px 0px;
  text-decoration: none;
}

.marbtm30 {
  margin-bottom: 30px;
}

.hidedesktop {
  display: none;
}

.topimghold img{
  height: 600px;
  object-fit: cover;
}

.bannerimg {
  border-radius: 10px;
  filter: drop-shadow(0px 0px 2px #000000);
}

.previouse {
  padding-bottom: 50px;
}

.previouse .greybg {
  background: #F5F5F5; 
  border-radius: 15px; 
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mb20 {
  margin-bottom: 20px;
}

.previouse .greybg h3 {
  font-size: var(--font20);
  font-family: var(--helveticabold);
  color: #132649;
  padding-bottom: 10px;
}

.previouse .greybg a {
  color: #E86020;
  font-size: 16px;
  text-decoration: underline;
}

@media only screen and (max-width: 1024px) {
  :root {
    --helvetica: "Helvetica", sans-serif;
    --helveticabold: "Helveticabold", sans-serif;
    --drkblu: #132649;
    --grey: #666666;
    --lgtgrey: #f5f5f5;
    --white: #FFF;
    --font45: 22px;
    --font20: 16px;
    --font30: 30px;
    --lineheight30: 30px;
    --lineheight30: 25px;
  }
  .env .col-md-4 {
    width: 50%;
  }
  .env .box {
    min-height: auto;
  }
  .env .imghold img {
    height: 50px;
  }

  .env .orgbg {
    min-height: 118px;
  }

  .topimghold img {
    height: auto;
  }

} 
@media only screen and (max-width: 768px) { 
  .env .col-md-4 {
    width: 50%;
  }
  .conthold img {
    width: 60px;
  }
  .sust .imghold {
    float: none;
  }
  .sust .conthold {
    display: block;
    padding-left: 0px;
  }
  .sust .text-right {
    padding-top: 20px;
  }
  .sust ul {
    margin-left: 0px;
  }
  .header  {
    padding: 5px;
  }
  header {
    display: block;
  }
  .header  img {
    text-align: left !important;
    height: 42px;
  }
}
@media only screen and (max-width: 600px) {
  .blbox h3 {
    text-align: left;
    padding-top: 20px;
  }
  .hidemobile {
    display: none;
  }
  .hidedesktop {
    display: block;
  }
  .network .brdbottom {
    padding-bottom: 20px; margin-bottom: 20px; border-bottom: 0.5px solid #FFF;
  }
  .key img {
    margin-bottom: 20px;
  }
  .key img:last-child {
    margin-bottom: 0px;
  }
  a.orangelink {
    font-size: 20px;
  }
  .sust .imghold {
    float: none;
  }
  .sust .conthold {
    display: block;
    padding-left: 0px;
  }
  .sust .text-right {
    padding-top: 20px;
  }
  .sust ul {
    margin-left: 0px;
  }
  .conthold img {
    width: 60px;
  }
  .env .marbtm30 {
    margin-bottom: 30px;
  }
  .env .box {
    height: auto;
  }
  .env .col-md-4 {
    width: 100%;
  }
}