body {
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
      color: #fff;
      scroll-behavior: smooth;
    }

    .navbar {
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(10px);
    }

    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
    }

    /* UNIQUE HERO DESIGN */
    .unique-hero {
      position: relative;
      padding-top: 120px;
    }

    .hero-bg-shape {
      position: absolute;
      top: -150px;
      right: -150px;
      width: 450px;
      height: 450px;
      background: radial-gradient(circle, #00ffd5, transparent 70%);
      filter: blur(80px);
      animation: floatShape 8s ease-in-out infinite;
    }

    @keyframes floatShape {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(40px); }
    }

    .hero-title {
      font-size: 5rem;
      font-weight: 700;
    }

    .hero-subtitle {
      color: #00ffd5;
      margin-top: 10px;
    }

    .hero-desc {
      max-width: 500px;
      margin: 15px 0 25px;
      opacity: 0.9;
    }

    .hero-card {
      background: rgba(255,255,255,0.05);
      border-radius: 25px;
      padding: 30px;
      backdrop-filter: blur(12px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.5);
      display: inline-block;
      animation: floatCard 6s ease-in-out infinite;
    }

    @keyframes floatCard {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
    }

    .hero-img {
      width: 260px;
      border-radius: 50%;
      border: 6px solid #00ffd5;
      box-shadow: 0 0 30px rgba(0,255,213,0.6);
    }

    .hero h1 {
      font-size: 2.6rem;
      font-weight: 700;
    }

    .hero span {
      color: #00ffd5;
    }

    .btn-glow {
      background: #00ffd5;
      color: #000;
      border-radius: 30px;
      padding: 12px 30px;
      box-shadow: 0 0 20px #00ffd5;
      transition: 0.3s;
    }

    .btn-glow:hover {
      transform: scale(1.05);
      box-shadow: 0 0 35px #00ffd5;
    }

    section {
      padding: 80px 0;
    }
.project-card {
background: rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
transition: 0.4s ease;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}


.project-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}


.project-card img {
object-fit: cover;
height: 220px;
width: 100%;
}


.project-content {
padding: 20px;
}


.project-content p {
flex-grow: 1;
}


.project-content a {
align-self: flex-start;
}
    .skill {
      background: #00ffd5;
      color: #000;
      padding: 8px 15px;
      border-radius: 20px;
      margin: 6px;
      display: inline-block;
      font-weight: 600;
    }

    footer {
      background: #000;
      padding: 40px 0;
      text-align: center;
    }

    /* Resume Modal scroll */
    .modal-body {
      max-height: 70vh;
      overflow-y: auto;
    }
    .modal-content {
      background: #1c1c1c;
      color: #fff;
      border-radius: 15px;
    }

    /* NAVBAR MENU EFFECTS */
    .nav-custom {
      color: #fff !important;
      position: relative;
      font-weight: 500;
      transition: 0.3s ease;
      padding: 8px 5px;
    }

    .nav-custom::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -5px;
      width: 0;
      height: 2px;
      background: #00ffd5;
      transition: width 0.3s ease;
    }

    .nav-custom:hover {
      color: #00ffd5 !important;
      transform: translateY(-2px);
    }

    .nav-custom:hover::after {
      width: 100%;
    }

    .nav-custom.active {
      color: #00ffd5 !important;
      text-shadow: 0 0 10px #00ffd5;
    }

    .nav-custom.active::after {
      width: 100%;
    }

    .text-center .skill:hover{
background-color: #fff;
    }
    .about_section{
        background-color: #3a545f;
    }
    .about_section ul li{
        list-style-type: none;
    }

    @media (max-width: 768px) {
        .navbar-toggler{
            background-color: #fff;
        }
    }