body{
    margin: 0px;
    padding: 0px;
  }
  nav {
      background-color: rgb(131, 35, 145);
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
    }
    
    .logo {
      font-size: 1.5rem;
    }
    
    ul {
      display: flex;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    ul li {
      margin-right: 20px;
    }
    
    ul li a {
      color: white;
      text-decoration: none;
      transition: color 0.3s;
    }
    
    ul li a:hover {
      color: lightgreen;
    }
    
    .checkbtn {
      font-size: 30px;
      color: white;
      cursor: pointer;
      display: none;
    }
    
    #check {
      display: none;
    }
    
    @media (max-width: 768px) {
      .checkbtn {
          display: block;
          order: 1;
          margin-right: 20px;
          cursor: pointer; /* Ensures the button appears clickable */
        
      }
    
      nav ul {
        z-index: 10;
          position:fixed;
          top: 80px;
          right: -100%;
          background-color: rgb(131, 35, 145);
          width: 100%;
          height: 100vh;
          display: flex;
          flex-direction: column;
          /* justify-content: center; */
          align-items: center;
          transition: right 0.3s ease; /* Improved transition */
      }
  
      .carousel{
        z-index: 2;
      }
      ul li {
          margin: 20px 0;
      }
  
      ul li a {
          font-size: 20px;
          color: white; /* Ensures visibility */
          text-decoration: none; /* Removes underline */
          transition: color 0.3s ease; /* Smooth hover effect */
      }
  
      ul li a:hover {
          color: #00ff00; /* Adds a hover effect */
      }
  
      #check:checked ~ ul {
          right: 0;
      }
  }