
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}
body {
  font-family: ROBOTO, sans-serif;

}
.nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  background-color: #1e1f26;
  text-align: center;
  padding: 0 2em;
}
.nav h1 {
  font-family: "Josefin Sans", sans-serif;
  font-size: 5vw;
  margin: 0;
  padding-bottom: 0.5rem;
  letter-spacing: 0.3rem;
  color: #ffffff;
  transition: all 0.3s ease;
  z-index: 3;
}
h1:hover {
  transform: translate3d(0, -10px, 22px);
  color: #ffc005;
}
h3.span {
  font-size: 2vw;
  letter-spacing: 0.15rem;
  font-family: ROBOTO, sans-serif;
  font-weight: 300;
  color: #ffb5b5;
  z-index: 4;
}
span:hover {
  color: #ffc005;
  font-weight: 500;
  font-size: 2.2vw;
}
.background {
  position: absolute;
  height: 100vh;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: auto;
}
@media (min-width: 800px) {
  .nav h1 {
    font-size: 5vw;
  }
  .nav h2 {
    font-size: 3vw;
  }
}
@media screen only (min-width: 360px) {
  .nav h1 {
    font-size: 8vw;
  }
  .nav h2 {
    font-size: 2vw;
    letter-spacing: 0.2vw;
  }
}
.background {
  position: absolute;
  height: 100vh;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
.loader span {
  color: #faebd7;
  text-shadow: 0 0 0 #ff9c9c;
  -webkit-animation: loading 1s ease-in-out infinite alternate;
}
@-webkit-keyframes loading {
  to {
    text-shadow: 20px 0 70px #ffc005;
    color: #ffc005;
  }
}
.loader span:nth-child(2) {
  -webkit-animation-delay: 0.1s;
}
.loader span:nth-child(3) {
  -webkit-animation-delay: 0.2s;
}
.loader span:nth-child(4) {
  -webkit-animation-delay: 0.3s;
}
.loader span:nth-child(5) {
  -webkit-animation-delay: 0.4s;
}
.loader span:nth-child(6) {
  -webkit-animation-delay: 0.5s;
}
.loader span:nth-child(7) {
  -webkit-animation-delay: 0.6s;
}
.loader span:nth-child(8) {
  -webkit-animation-delay: 0.7s;
}
.loader span:nth-child(9) {
  -webkit-animation-delay: 0.8s;
}
.loader span:nth-child(10) {
  -webkit-animation-delay: 0.9s;
}
.loader span:nth-child(11) {
  -webkit-animation-delay: 1s;
}
.loader span:nth-child(12) {
  -webkit-animation-delay: 1.1s;
}
.loader span:nth-child(13) {
  -webkit-animation-delay: 1.2s;
}
.loader span:nth-child(14) {
  -webkit-animation-delay: 1.3s;
}
.loader span:nth-child(15) {
  -webkit-animation-delay: 1.4s;
}
.loader span:nth-child(16) {
  -webkit-animation-delay: 1.5s;
}
.loader span:nth-child(17) {
  -webkit-animation-delay: 1.6s;
}
.loader span:nth-child(18) {
  -webkit-animation-delay: 1.7s;
}
.loader span:nth-child(19) {
  -webkit-animation-delay: 1.8s;
}
.loader span:nth-child(20) {
  -webkit-animation-delay: 1.9s;
}
.loader span:nth-child(21) {
  -webkit-animation-delay: 2s;
}
.loader span:nth-child(22) {
  -webkit-animation-delay: 2.1s;
}





/*new*/
header {
      width: 100%;
      /*height: 100vh;*/
      z-index: 10;
      position: relative;
}

.content {
      width: 94%;
      margin: 4em auto;
      font-size: 20px;
      line-height: 1.5em;
      text-align: justify;
}

.logo {
      line-height: 2.5em;
      position: fixed;
      float: left;
      /*margin: 16px 46px;*/
     /* color: #fff;
      font-weight: bold;*/
      /*font-size: 20px;*/
      /*letter-spacing: 2px;*/
}



nav {
      position: fixed;
      width: 100%;
      line-height: 60px;
}

nav ul {
      line-height: 60px;
      list-style: none;
      background: rgba(0, 0, 0, 0);
      overflow: hidden;
      color: #fff;
      padding: 0;
      text-align: right;
      margin: 0;
      /*padding-right: 0.2em;*/
      transition: 1s;
}

nav.black ul {
      background: #000;
}

nav ul li {
      display: inline-block;
      padding: 16px 40px;;
}

nav ul li a {
      text-decoration: none;
      color: #fff;
      font-size: 16px;
}

.menu-icon {
      line-height: 2em;
      width: 100%;
      background: #000;
      text-align: right;
      box-sizing: border-box;
      padding: 15px 24px;
      cursor: pointer;
      color: #fff;
      display: none;
}

@media(max-width: 786px) {

      .logo {
            position: fixed;
            top: 0;
            margin-top: 16px;
      }

      nav ul {
            max-height: 0px;
            background: #000;
      }

      nav.black ul {
            background: #000;
      }

      .showing {
            max-height: 34em;
      }

      nav ul li {
            box-sizing: border-box;
            width: 100%;
            padding: 24px;
            text-align: center;
      }

      .menu-icon {
            display: block;
      }
      .popup{
        width: 90%;
        font-size: 0.8em;
      }
      .content {
        font-size: 1em;
      }
      img.logo-full-class{
       visibility: hidden;
      }
      img.download{
       height: 1.2em;
       margin: 0.7em;
       margin-top: 0.7em;
      }

}
@media(min-width: 787px) {
img.download{
  height: 2.5em;
  margin: 1.1em;
  margin-top: 4em;}

}


/*popup*/

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 9999;
  overflow-x: scroll;
  
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}
.popup {
  margin: 70px auto;
  padding: 20px;
  background: rgba(255, 255, 255, .15);  
  backdrop-filter: blur(5px);
  border-radius: 5px;
  width: 80%;
  position: relative;
  transition: all 2s ease-in-out;
  
  color: white;
}
/* width */
::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  color:rgba(255, 255, 255, .15); 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: white; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ffc005; 
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}
.popup .content {
  max-height: 30%;

}
img.logo-class {
  height: 3em;
  float: left;
}
img.img-main {
    height: 2.5em;
}
img.logo-full-class{
   height:5em ;
   float: left;
   margin: 0.8em;
}



#popup3 .content{
  font-size: 1.8em;
  font-family: ROBOTO, sans-serif;
  color: white;

}

.logo-full{
  height: 2em;
  position: fixed;
  float: left;
}



.hover-text {
            display: none;
            position: absolute;
            margin-top: -30px; /* Adjust this value as needed */
            margin-left: 800px; /* Adjust this value as needed */
            z-index: 1;
        }
        h3:hover + .hover-text {
            display: inline;
        }
        h3:hover {
            position: relative;
        }