/**  Loading screen  **/


 /* CSS for the loading screen */
 .loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display:flex;
    justify-content: center;
    align-items: center;
   


    
   
   
    
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}



#txt{
   display:flex;

   bottom:100px;
   align-items:center;
   justify-content:center;
   flex:1;
   font-family:sans-serif;
   letter-spacing:3.5px;
   font-size:30px;
   font-weight:700;
   position:absolute;
   transform-style:preserve-3d;
   perspective:100px;
   -webkit-transform-style:preserve-3d;
   -webkit-perspective:100px;
}
#txt>b{
   height:45px;
   color:#979c9f;
   background: #fff;
   background-clip:text;
   text-decoration-color:transparent;
   -webkit-background-clip:text;
   -webkit-text-fill-color:transparent;
   transform-origin:bottom;
   transform:rotateX(-85deg);
   -webkit-transform-origin:bottom;
   -webkit-transform:rotateX(-85deg);
   animation:getUp 7s infinite;
}
#txt>b:nth-child(2){
   animation-delay:.15s;
}
#txt>b:nth-child(3){
   animation-delay:.25s;
}
#txt>b:nth-child(4){
   animation-delay:.40s;
}
#txt>b:nth-child(5){
   animation-delay:.55s;
}
#txt>b:nth-child(6){
   animation-delay:.65s;
}
#txt>b:nth-child(7){
   animation-delay:.75s;
}
#txt>b:nth-child(8){
   animation-delay:.80s;
}
@keyframes getUp{
   10%,50%{
      transform:rotateX(0);
   }
   0%,60%,100%{
      transform:rotateX(-85deg);
   }
}


.dot-container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 50px;
 }
 
 .dot {
   width: 16px;
   height: 16px;
   background-color: #3498db;
   border-radius: 50%;
   margin: 0 6px;
   animation: bounce 1s infinite alternate;
 }
 
 .bounce-dot1 {
   animation-delay: 0.1s;
 }
 
 .bounce-dot2 {
   animation-delay: 0.2s;
 }
 
 .bounce-dot3 {
   animation-delay: 0.3s;
 }
 
 @keyframes bounce {
   0% {
     transform: translateY(0);
   }
   100% {
     transform: translateY(-10px);
   }
 }