html {
    background-color: #090E15;
    color: #ffffff;
    /* max-width:100%; */
}
body{
  font-family: "Inter", sans-serif;
  overflow-x: hidden ;
  width: 100%;
  box-sizing: border-box;
  /* position: relative; */
}

div {
    font-weight: 100;
    /* transform: scale(0.2); */
    transition: transform 0.2s;
   }


.overlay-section{
    margin-top: 20%;
    text-align:center;
    position: relative;
    z-index: 1;
}



.label-01 {
    letter-spacing: .2rem;
    font-size: .9rem;
    color: #03a9f4;
    font-weight: 500;
    height: 2rem;
}

.title {
    color:#fff;
}

.modifed-subtitle-width {
    margin:auto;
}

.description{
  color:#fff;
  font-weight: 500;
  padding-bottom: 10px;
}
/* Had to implement this to override Bulma's default. */
strong {
  color:#fff;
}


  .animejs-container {
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* z-index: 2; */
    /* width: 100%; */
    /* height: 100vh; */
    opacity: .3;
  }

  .animation-wrapper {
    width: 50%;
  }
  
  .sphere-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20%;
    height: 50%;
    margin: -4% 0 0 -10%;
  }
  
  .sphere path {
    fill: url(#sphereGradient);
    stroke-width: 1px;
    stroke: rgba(80,80,80,.35);
    backface-visibility: hidden;
  }
  
  @media (min-width: 500px) {
    .sphere path {
      stroke-width: .4px;
    }
  }



.video-section-01 {
  padding: 5% 0 5% 0;
  margin: 30% 0 30% 0;
  position:relative;
  z-index:1;
  display:block;
  text-align:center;
  background: linear-gradient(180deg,#0b0b0c 0%,#131318 100%);
}

.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

.section-header-01 {
  color:#fff;
  text-align:center;
  font-weight:600;
  padding: 5% 0 2% 0;
}
.vouches{
  padding: 0 0 0 0;
}

figcaption {
  font-weight: 400;
  color:#ffffff;
}


.call-to-action-01 {
  padding: 5% 0 5% 0;
  text-align: center;
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait) { 

    .overlay-section{
        margin-top: 50%;
        text-align:center;
    }
    .figure-mobile {
      margin:auto;
    }
    .modifed-subtitle-width {
      width: 80%;
    }

 }