/* ENTIRE DOCUMENT */
/* Styling for the whole page */
body {
    /* Layout declarations */
    margin: 0 auto;
    /* Typography declarations */
    font-size: 62.5%;
    font-family: Bahnschrift SemiBold;
    font-weight: 300;
    color: #EDEDED;
    -webkit-font-smoothing: antialiased;
  }
  
  /* HEADER */
  .masthead {
    /* Layout declarations */
    padding: 1em 2em;
    border-top: 8px solid #EDEDED;
    text-align: center;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
                 0px 8px 13px rgba(0,0,0,0.1),
                 0px 18px 23px rgba(0,0,0,0.1);
    /* Typography declarations */
    font-size: 4em;
  }
  
  .masthead-intro {
    margin: 2em 0 0 0;
  }
  
  .masthead-heading {
    /* Typography declarations */
    font-size: 10rem;
    /* Layout declarations */
    padding: 0;
    margin: 0 0 1em;
  }
  
  /* BODY */
  /* General styling for the three sections of the body */
  section {
    /* Layout declarations */
    max-width: 50em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3em;
  }
  
  /* Gradient that runs through the body */
  .gradient {
    padding: 10em;
    /* can be treated like a fallback */
    background-color: #000000;;
    /* will be "on top", if browser supports it */
    background-image: linear-gradient(#3f3f3f, #3f3f3f);
  }
  
  /* The h2 tags are the main categories */
  h2 {
    /* Typography declarations */
    font-size: 3em;
  }
  
  /* The h3 tags are the additional questions */
  h3 {
    /* Typography declarations */
    font-style: italic;
    font-size: 2.5em;
  }
  
  /* The p tags that are descendants of the section tags are the answers */
  section p {
    /* Typography declarations */
    font-size: 2em;
    line-height: 1.3em;
  }
  
  /* This class is included in the last p tag of each section to create more space */
  .space-maker {
    /* Layout declarations */
    margin-bottom: 3em;
  }
  
  /* FOOTER */
  .content-footer {
    /* Layout declarations */
    background: #000000;
    padding: 10em;
    border-bottom: 8px solid #EDEDED;
  }
  
  .content-footer > p {
    /* Layout declarations */
    line-height: 1.3em;
    text-align: center;
    /* Typography declarations */
    font-size: 2em;
  }
  
  .social {
    /* Layout declarations */
    text-align: center;
    padding: 0;
  }
  
  .social > li {
    /* Layout declarations */
    display: inline-block;
    line-height: 1.3em;
    margin-right: 2em;
    /* Typography declarations */
    font-size: 2em;
  }
  
  a {
    /* Typography declarations */
    color: #EDEDED;
    text-decoration: none;
  }
  
  a:hover {
    /* Layout declarations */
    color: #262626;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  
  .social li:last-child {
    /* Layout declarations */
    margin-right: 0;
  }
  
  /* Responsive design */
  @media only screen and (max-width: 500px) {
    /* HEADER */
    .masthead {
      padding: 1em;
    }
    
    .masthead-intro {
      font-size: 1.5rem;
    }
    
    .masthead-heading {
      font-size: 4rem;
    }
    
    /* BODY */
    .gradient {
      padding: 5em;
    }
    
    h2 {
      font-size: 2rem;
    }
    
    h3 {
      font-size: 1.5rem;
    }
    
    section p {
      font-size: 1rem;
    }
    
    /* FOOTER */
    .content-footer {
      padding: 4em;
    }
    
    .social > li {
    /* Layout declarations */
    display: block;
    margin-right: 0;
    }
    
    a {
      line-height: 3em;
    }
    
    .content-footer p a {
      line-height: 0;
    } 
  }
  
    /* FOOTER */
  @media only screen and (max-width: 344px) {
    .content-footer p a {
      line-height: 3em;
    }
  }
  .one {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.one video {
    height: 100vh;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 1;
}
.two{
    z-index: 2;
}
.effects {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
}
.three {
    margin-top: 50px;
    font-size: 70px;
}

.ssss{
  font-size: 900%;
  font-family: Bahnschrift SemiBold;
  margin-top: 0%;
  margin-bottom: 0%;
}
.sssc{
  font-size: 250%;
  border-top: 0%;
}
.bars {
  /*   background-color:pink; */
  position: absolute;
  width: 27px;
  height: 27px;
  top: 30px;
  right: 30px;
  cursor: pointer;
  z-index: 101;
  padding-top:9px;
}

.bar {
  width: 100%;
  height: 4px;
  background-color: #fff;
  position: absolute;
}

span::before,
span::after {
  content: "";
  display: block;
  background-color: #fff;
  width: 100%;
  height: 4px;
  position: absolute;
}

.bar::before {
  transform: translateY(-9px);
}

.bar::after {
  transform: translateY(9px);
}

.bars.active .bar {
  background-color: transparent;
}

.bars.active span::before {
  animation: top-bar 1s;
  animation-fill-mode: forwards;
}

.bars.active span::after {
  animation: bottom-bar 1s;
  animation-fill-mode: forwards;
}


/* Navbar Links CSS */

#nav {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 1s;
  z-index: -1;
  overflow: hidden;
  opacity: 0;
}

#nav a {
  color: #fff;
  text-decoration: none;
  line-height: 70vw;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-indent: 50vw;
  border-radius: 50%;
  transition: all .5s;
}

#nav a:hover {
  background: #357FFD;
}

ul {
  list-style: none;
  opacity: 0.9;
}

.visible {
  z-index: 100 !important;
  opacity: 1 !important;
}

.shape-circle {
  border-radius: 50%;
  width: 20vw;
  height: 20vw;
  top: -10vw;
  right: -10vw;
  position: absolute;
  transition: all 1s ease-in-out;
  background: #2979FF;
  box-shadow: 0 0px 0px rgba(4, 26, 62, 0.5);

}

nav.visible li:first-child {
  width: 200vw;
  height: 200vw;
  top: -100vw;
  right: -100vw;
  z-index: 5;
  transition: all .5s ease-in-out;
  box-shadow: 0 0px 80px rgba(4, 26, 62, 0.5);
}

nav.visible li:nth-child(2) {
  width: 150vw;
  height: 150vw;
  top: -75vw;
  right: -75vw;
  z-index: 6;
  transition: all .6s ease-in-out;
  box-shadow: 0 0px 80px rgba(4, 26, 62, 0.5);
}

nav.visible li:nth-child(3){
  width: 100vw;
  height: 100vw;
  top: -50vw;
  right: -50vw;
  z-index: 7;
  transition: all .7s ease-in-out;
  box-shadow: 0 0px 80px rgba(4, 26, 62, 0.5);
}

nav.visible li:last-child{
  width: 50vw;
  height: 50vw;
  top: -25vw;
  right: -25vw;
  z-index: 8;
  transition: all .8s ease-in-out;
  box-shadow: 0 0px 80px rgba(4, 26, 62, 0.5);
}

nav.visible li:first-child a {
  line-height: 265vw !important;
    text-indent: 15vw !important;

}

nav.visible li:nth-child(2) a {
  line-height: 200vw !important;
  text-indent:17vw !important;
}

nav.visible li:nth-child(3) a {
  line-height: 137vw !important;
    text-indent: 17vw !important;
  
}

nav.visible li:last-child a {
  line-height: 70vw !important;
  text-indent:12vw !important;
}


/* Main Body CSS */

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}



article p {
  padding-bottom: 15px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

article a {
  color: #fff;
  text-decoration: none;
  opacity: .2;
  font-size: 12px;
}

article a:hover {
  opacity: .8;
}

@keyframes top-bar {
  50% {
    transform: translateY(0);
  }
  100% {
    transform: rotate(45deg) translateY(0);
  }
}

@keyframes bottom-bar {
  50% {
    transform: translateY(0);
  }
  100% {
    transform: rotate(-45deg) translateY(0);
  }
}


@media screen and (max-width:800px) {

 
}