@media (max-width: 800px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Urbanist", sans-serif;
        scrollbar-width: none; 
        -ms-overflow-style: none; 
    }
    
    html, body {
        cursor: default;
    }
    
    body {
        overflow-x: hidden;
        overflow-y: scroll;
        background-color: #01040a;
    }

    
    .main-box {
        display: none;
      }
    
    footer {
        display: none;
    }

    .mobile-screen {
        color: white;
    }

    
.mobile-screen {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
  
  .mobile-screen-head {
    padding: 40px;
    z-index: 9;
  }
  
  .mobile-screen-header {
    color: white;
    font-size: 2.75rem;
    line-height: 3.5rem;
    text-align: center;
    z-index: 1;
    border-radius: 10px;
  }
  
  .mobile-screen-header2 {
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.5rem;
    padding-top: 70px;
  }
  
  #banner {
    opacity: 25%;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    z-index: 0;
    top: 0;
    left: 0;
    position: absolute;
  }
  
  #banner div {
    z-index: 0;
  }

  #canvas {
    z-index: 0;
    top: 0;
    left: 0;
  }
  

  #cursor-border {
    display: none;
  }

  .card-mob {
    width: fit-content;
    height: fit-content;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 25px;
    gap: 20px;

  }
  
  /* for all social containers*/
  .socialContainer {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: rgb(44, 44, 44);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition-duration: 1s;
  }
  /* instagram*/
  .containerOne:hover {
    background-color: #d62976;
    transition-duration: 0.3s;
  }
  /* twitter*/
  .containerTwo:hover {
    background-color: #00acee;
    transition-duration: 0.3s;
  }
  /* linkdin*/
  .containerThree:hover {
    background-color: #0072b1;
    transition-duration: 0.3s;
  }
  /* Whatsapp*/
  .containerFour:hover {
    background-color: #128c7e;
    transition-duration: 0.3s;
  }
  
  .socialContainer:active {
    transform: scale(0.9);
    transition-duration: 0.3s;
  }
  
  .socialSvg {
    width: 17px;
  }
  
  .socialSvg path {
    fill: rgb(255, 255, 255);
  }
  
  .socialContainer:hover .socialSvg {
    animation: slide-in-top 0.3s both;
  }
  
  @keyframes slide-in-top {
    0% {
      transform: translateY(-50px);
      opacity: 0;
    }
  
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  

}



@media (max-width: 400px) {
    .mobile-screen-head {
        padding:  20px 60px 0 60px;
      }
      
      .mobile-screen-header {
        color: white;
        font-size: 2rem;
        line-height: 3.5rem;
        text-align: center;
        z-index: 1;
        border-radius: 10px;
      }
      
      .mobile-screen-header2 {
        text-align: center;
        font-size: 1rem;
        padding-top: 40px;
      }
      
}