www/src/static/css/style.css

/* General/Utilities */

body{
  background-color: #1a1a1a;
  max-width: 1920px;
  /*
  background-image: url("/Images/xl-grid-quarter-opacity.svg");
  background-size: contain;
  */
}

/*
.hero-container{
  background-image: url("/Images/x-large-grid-hero.svg");
  background-size: auto;
  background-color: #1a1a1a;
}
*/

.container{
  max-width: 1920px;
  padding:0px;
}

@media only screen and (min-width: 1280px) {

  .container{
    padding: 128px 150px 10px 150px;
  }

  /* M5 Spacers (Bootstrap Utilities)*/

  .m-5{
    margin: 225px !important;
  }
  .mb-5{
    margin-bottom: 225px !important;
  }
  .mt-5{
    margin-top: 225px !important;
  }
  .ms-5{
    margin-left: 225px !important;
  }
  .me-5{
    margin-right: 225px !important;
  }
}

/* Navbar General */

div.container-fluid.top-nav{
  padding-left: 0px !important;
}

.navbar{
  background-color: #1a1a1a !important;
  height: 80px;
  border-bottom: 2px solid #949494;
}

.nav-logo{
  width: 78px;
  transition: 0.2s ease-in-out;
}

.nav-logo:hover{
  transform: scale(0.9);
}

.nav-item{
  font-family: "pp-neue-machina", sans-serif;
  text-transform: uppercase;
}

/* Brand Colors */

  /* Type Colors */

  .teal{
    color:#00ffd0;
  }

  .black{
    color: #1a1a1a;
  }

  .dark-gray{
    color: #4d4d4d;
  }

  .grid-gray{
    color: #949494;
  }

  .light-gray{
    color: #e1e1e1;
  }

  .white{
    color: #ffffff;
  }

  .purple{
    color: #8000ff;
  }

  .orange{
    color: #ff4100;
  }

  /* Background Colors */

  .teal-bg{
    background-color:#00ffd0;
  }

  .black-bg{
    background-color: #1a1a1a;
  }

  .dark-gray-bg{
    background-color: #4d4d4d;
  }

  .grid-gray-bg{
    background-color: #949494;
  }

  .light-gray-bg{
    background-color: #e1e1e1;
  }

  .white-bg{
    background-color: #ffffff;
  }

  .purple-bg{
    background-color: #8000ff;
  }

  .orange-bg{
    background-color: #ff4100;
  }

/* General Typography */

@font-face {
  font-family: "pp-neue-machina";
  src: url("/fonts/PPNeueMachina-InktrapLight.woff");
}

@font-face {
  font-family: "sono";
  src: url("/fonts/Sono-Light.woff2");
}

h1{
  font-family: "pp-neue-machina", sans-serif;
  color:#00ffd0;
  text-transform:uppercase;
}

h2{
  font-family: "pp-neue-machina", sans-serif;
  color:#00ffd0;
}

h3{
  font-family: "pp-neue-machina", sans-serif;
  color:#00ffd0;
}

h4{
  font-family: "pp-neue-machina", sans-serif;
  color:#00ffd0;
}

p{
  font-family: "sono", sans-serif;
  color: #ffffff;
}

li{
  font-family: "sono", sans-serif;
  color: #ffffff;
}

/* Breakpoint-Specific Typography */


@media only screen and (min-width: 1280px) {

  h1{
    font-size: 13.25rem;
    line-height: 14rem;
  }

  h2{
    font-size: 6rem;
    line-height: 7rem;
    margin-bottom: 37px;
  }

  h3{
    font-size: 80px;
    line-height: 80px;
    margin-bottom: 75px;
  }

  h4{
    font-size: 38px;
    line-height: 45px;
  }

  .lead{
    font-size: 28px !important;
    line-height: 29px !important;
    margin-bottom: 40px;
  }

  p{
    font-size: 20px;
  }

}

/* Spacers & Dividers */

hr{
  border-bottom: 2px solid #949494 !important;
  opacity: 1;
  margin: 0px !important;
}

/* Homepage */

@media only screen and (min-width: 1280px) {

  .hero-section{
    margin-bottom: 75px;
  }

  .impact-section{
    margin-bottom:115px;
  }

  .about-block{
    padding: 80px 160px; !important;
    margin: -200px 150px 0px 150px;;
    position: relative;
    top:200px;
  }

  .package_before{
    padding-bottom: 225px !important;
  }

  .statistics{
    padding-bottom: 225px;
  }

  .partners{
    padding-bottom: 225px;
  }

}

/* Package Display Section */

.grid-square{
  margin-bottom: 20px;
  height:320px;
  background-color: gray;
  width: 100%;
}

.package-label{
  font-size: 14px;
  float:left;
  padding: 10px 0px;
}

.detail-btn{
  float:right;
}

/* Footer Styling */

.footer-email{
  font-family: "pp-neue-machina", sans-serif;
  text-transform: uppercase;
  font-size: 38px;
  line-height: 38px;
  padding: 35px 0px;
  background: none;
  border: none;
}

.social-box{
  border-radius: 0px !important;
  border: 2px solid #949494;
  background-color: none;
}

.list-group{
  border-radius: 0px !important;
}

.list-group-item{
  background-color: #1a1a1a !important;
  padding: 20px;
  font-size: 28px;
  color: #fff;
  font-family: "pp-neue-machina", sans-serif;
  text-transform: uppercase;
  border-bottom: 2px solid #949494;
  transition: 0.2s ease-in-out;
}

.list-group-item:hover{
  padding-left: 40px;
  background-color: #00ffd0 !important;
  box-shadow: inset 0px 0px 0px 7px #1a1a1a !important;
  color: #1a1a1a !important;
}

.footer-content{
  padding-right: 100px;
}