@media (max-width: 768px) {
      #menu-icon {
        display: block;
      }

      .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.9);
        border-top: 1px solid #00ffee;
        display: none;
        flex-direction: column;
        padding: 20px 0;
        backdrop-filter: blur(10px);
              -webkit-backdrop-filter:blur(10px);

      }

      .navbar a {
        margin: 10px 0;
        text-align: center;
        padding: 10px;
        font-size: 1.1rem;
      }

      .navbar.active {
        display: flex;
      }
      
      .home {
        flex-direction: column;
        text-align: center;
        padding: 120px 8% 60px;
      }
      
      .home-content {
            justify-content: center;
          order: 1; 
          max-width: 100%;
      }
      .content-main{
  max-width: 100%;
}
      
      .home-logo-mobile {
          display: block; 
          order: 2; 
      }
      
      .about {
          flex-direction: column;
          text-align: center;
              justify-content: center;

      }
.about-content {
width: 100%;
}

      .about-img img {
          width: 80vw;
          max-width: 300px;
      }
      
      .hobbies-box {
          flex-basis: 100%; 
      }

      .input-box input {
        width: 100%;
      }

      section {
        padding: 80px 5% 40px;
      }

      .home-content h1 {
        font-size: 2.5rem;
      }

      .home-content h3 {
        font-size: 1.5rem;
      }
    }

    @media (max-width: 480px) {
      .header {
        padding: 15px 5%;
      }

      .logo {
        font-size: 1.5rem;
      }

      .home-content h1 {
        font-size: 2rem;
      }

      .home-logo-mobile img {
        width: 250px;
      }

      .heading {
        font-size: 1.8rem;
      }
    }

    /* Mobile Navigation */
@media (max-width: 1199px) {
}
@media (max-width: 768px) {
  .home-img img {
        margin-top: 20%;
    box-shadow: 0 0 25px rgba(0, 255, 238, 0.6);
    outline: 3px solid rgba(0, 255, 238, 0.5);
    outline-offset: -6px;
  }
}

/* 🖥️ No glow on desktop */
@media (min-width: 769px) {
  .home-img img {
    box-shadow: none;
    outline: none;
  }
}

@media (min-width: 769px) {
  .about-img img:hover {
    filter: drop-shadow(0 0 8px rgba(0, 255, 238, 0.6))
            drop-shadow(0 0 5px rgba(0, 255, 238, 0.3));

  }
}

@media (max-width: 768px) {
  .about-img img {
    filter: drop-shadow(0 0 8px rgba(255, 68, 68, 0.541))
            drop-shadow(0 0 15px rgba(255, 68, 68, 0.295));
  }
}


@media screen and ( max-height: 600px ){
    .card{
        height: fit-content !important;  
        img { display: none; }
    } 
    .acc-card{
      height: 180px !important; 
    }
    .card, .accents { top: 30%; }
    .accents {
        .light { 
            top: 124px; bottom: 0;
            &.sm { top: 42px; }
        }
    }
}
@media (max-width: 768px) {

  .card {
    width: 90%;
    height: auto;
    padding: 20px;
  }

  .acc-card {
    width: 92%;
    height: auto;
  }

  .light, .light.sm {
    top: 55%;
  }
}

@media (max-width: 480px) {
  .card h2 {
    font-size: 1.1rem;
  }
  .card p {
    font-size: 0.9rem;
  }
  button {
    font-size: 0.9rem;
  }
  .light {
    width: 220px;
    height: 220px;
  }
  .light.sm {
    width: 160px;
    height: 160px;
  }
}
@media (max-width: 500px) {
 .project-box img {
  display: none;
}
.project-layer {
  opacity: 1;
}
.project-box {
  height: 450px;

}
.project {
  padding: 50px 6%;
  
}
}