.cursor {
    margin-top: 50px;
    font-weight: bold;
    animation: blink 0.8s infinite;
    
  }
  
  @keyframes blink {
    50% {
        opacity: 0;
    }
  }
  .title {
    text-align: center;
    font-size: 2.5rem;
    margin-top: 30px;
    margin-bottom: 30px;
    color: #0cceff;
    font-family: "Century Schoolbook", "Georgia", serif;
  }
  .main-title{
    text-align: center;
    font-size: 3.5rem;
    margin-top: 5px;  
    margin-bottom: 20px;
    color: white;
    font-family: "Century Schoolbook", "Georgia", serif;
  }
  .maintitle{
    text-align: center;
    font-size: 4.5rem;
    margin-bottom: 10px;
    margin-top: 5px;
    color: #0cceff;
    font-family: "Century Schoolbook", "Georgia", serif;
  }
  .main-blob {
    display: flex;
    margin-top: 270px;
    width: 100vw; 
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: block;
    position: relative;
    margin-top: -250px;
    top: 40%;
    /* transform: translateY(-200px); */
    width: 400px;
    height: 400px;
    
    border-radius: 48% 52% 68% 32%/42% 28% 72% 58%;
    background: linear-gradient(to right, #03bcff,  #010dfb,  #0cceff, #0077ff, #0ccfed);
    background-size: 500% 100%;
    animation: blobber 30s 0s linear infinite, cobler 30s 0s linear infinite alternate;
  }
  .main-blob:after {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    background-color: #000;
    background-image: url('assets/images/logo2.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    mix-blend-mode: multiply;
    animation: blobber 30s 0s ease-in-out infinite, wobbler 15s 0s linear infinite alternate;
  }
  
  @keyframes blobber {
    0% {
      border-radius: 48% 52% 68% 32%/42% 28% 72% 58%;
    }
    5% {
      border-radius: 48% 52% 41% 59%/66% 37% 63% 34%;
    }
    10% {
      border-radius: 69% 31% 71% 29%/67% 31% 69% 33%;
    }
    15% {
      border-radius: 60% 40% 71% 29%/63% 65% 35% 37%;
    }
    20% {
      border-radius: 61% 39% 51% 49%/57% 58% 42% 43%;
    }
    25% {
      border-radius: 66% 34% 25% 75%/47% 30% 70% 53%;
    }
    30% {
      border-radius: 32% 68% 38% 62%/65% 60% 40% 35%;
    }
    35% {
      border-radius: 63% 37% 41% 59%/35% 38% 62% 65%;
    }
    40% {
      border-radius: 57% 43% 49% 51%/55% 71% 29% 45%;
    }
    45% {
      border-radius: 47% 53% 34% 66%/65% 36% 64% 35%;
    }
    50% {
      border-radius: 44% 56% 32% 68%/69% 26% 74% 31%;
    }
    55% {
      border-radius: 28% 72% 37% 63%/71% 44% 56% 29%;
    }
    60% {
      border-radius: 38% 62% 35% 65%/74% 53% 47% 26%;
    }
    65% {
      border-radius: 73% 27% 46% 54%/54% 47% 53% 46%;
    }
    70% {
      border-radius: 75% 25% 47% 53%/49% 53% 47% 51%;
    }
    75% {
      border-radius: 62% 38% 43% 57%/55% 60% 40% 45%;
    }
    80% {
      border-radius: 41% 59% 65% 35%/73% 50% 50% 27%;
    }
    85% {
      border-radius: 55% 45% 57% 43%/73% 61% 39% 27%;
    }
    90% {
      border-radius: 74% 26% 33% 67%/40% 65% 35% 60%;
    }
    95% {
      border-radius: 58% 42% 57% 43%/53% 45% 55% 47%;
    }
    100% {
      border-radius: 48% 52% 68% 32%/42% 28% 72% 58%;
    }
  }
  @keyframes cobler {
    0% {
      background-position: 0% 0%;
    }
    100% {
      background-position: 100% 0%;
    }
  }
  @keyframes wobbler {
    0% {
      transform: rotateZ(8deg);
    }
    100% {
      transform: rotateZ(-8deg);
    }
  }
  .main {
    display: flex;
    margin-top: 270px;
    width: 100vw; 
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
  } 

  /* Mobile Styles */
@media (max-width: 600px) {
    .main {
      margin-top: 150px;
      
      flex-direction: column;
      
    }
  
   
    .main-title{
        text-align: center;
        font-size: 26px;
        margin-top: 5px;  
        margin-bottom: 20px;
        color: #0cceff;
      }
      .maintitle{
        text-align: center;
        font-size: 30px;
        margin-bottom: 10px;
        margin-top: 5px;
        color: #0cceff;
      }
    
  
    .title {
      font-size: 1.8rem;
      margin: 15px 0;
    }
  
    .main-blob {
      width: 250px;
      height: 250px;
      margin-top: -150px;
      /* overflow-x: hidden; */
    }
  
    .cursor {
      font-size: 1rem;
      margin-top: 30px;
    }
  }
  
  /* Tablet Styles */
  @media (min-width: 601px) and (max-width: 1024px) {
    .main {
      margin-top: 200px;
      padding: 0 40px;
    }
  
    .main-title {
      font-size: 2.8rem;
      margin-top: 10px;
      margin-bottom: 20px;
    }
  
    .maintitle {
      font-size: 3.2rem;
      margin-bottom: 15px;
    }
  
    .title {
      font-size: 2.2rem;
      margin: 20px 0;
    }
  
    .main-blob {
      width: 200px;
      height: 200px;
      margin-top: -180px;
    }
  
    .cursor {
      font-size: 1.2rem;
      margin-top: 40px;
    }
  }
  

  @media (max-width: 600px) {
    
  
   
    
}