body{
    font-family: Syne;
    background-color: #0D131B;
    opacity: 0;
    animation: load 0.5s ease-in-out 0.4s forwards;
}

.para{
  opacity: 0;
  animation: para 0.4s ease-in-out 0.6s forwards;
}

.one{
  opacity: 0;
  animation: para 0.4s ease-in-out 0.4s forwards;
}

.two{
  opacity: 0;
  animation: para 0.4s ease-in-out 0.9s forwards;
}

.three{
  opacity: 0;
  animation: para 0.4s ease-in-out 1.3s forwards;
}

.four{
  opacity: 0;
  animation: para 0.4s ease-in-out 1.6s forwards;
}

.five{
  opacity: 0;
  animation: para 0.4s ease-in-out 2.1s forwards;
}


.txtshad{
  text-shadow: 0px 12px 13px rgba(0, 0, 0, 0.4);
}

.ellipse{
    height: 250px;
    width: 250px;
}
.bottt{
    z-index: -9999;
}


.croppp{
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
  object-fit: cover;
}

.centrrr{
  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}


.toppp{
    z-index: 9999;
}

.syne{
    font-family: Syne;
}

.blu{
    color: #6383A9;
}


/*HP Classics --- */

    
  /*Scrollbar customized*/

  ::-webkit-scrollbar-track {
    visibility: hidden;
    background-color: transparent;
    overflow: overlay;
    width: 5px;
    z-index: 100;
  }

  ::-webkit-scrollbar {
    visibility: hidden;
    width: 5px;
    height: 5px;
    overflow: overlay;
    z-index: 100;
  }

  ::-webkit-scrollbar-thumb {
    visibility: visible;
    width: 3px;
    background-color: rgba(255, 255, 255, 0.337);
    border-radius: 100px;
    overflow: overlay;
    z-index: 150;
  }


  .pc{
    visibility: visible;
    display: flex;
  }

  .mob{
    visibility: hidden;
    display: none;
  }

  .scaleup{
    transition: scale 0.2s;
    transition-timing-function: ease-in-out;
    cursor: pointer;
  }
  .scaleup:hover{
    scale: 105%;
  }

  .hide{
    display: none;
    visibility: hidden;
  }

/*--- HP Classics */




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

    /*HP Classics --- */
    .mob{
      visibility: visible;
      display:flex;
    }
    .pc{
      visibility: hidden;
      display: none;
    }
    /*--- HP Classics */
  
  }

@keyframes load {
  0%{
    opacity: 0;
  }

  100%{
    opacity: 1;
  }
}

@keyframes para {
  0%{
    opacity: 0;
    transform: translateY(20px);
  }

  100%{
    opacity: 1;
    transform: translateY(0px);
  }
}