html {
            scroll-behavior: smooth;
        }
        /* .profile-img {
            background-image: url('images/img2.jpg');
            background-size: cover;
            background-position: top;
        } */
        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 100, 0.1);
        }
        .skill-badge:hover {
            transform: scale(1.1);
        }
        .nav-link {
            position: relative;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #2563eb;
            transition: width 0.3s ease;
        }
        .nav-link:hover::after {
            width: 100%;
        }
        .active::after {
            width: 100%;
        }
        /* .about-img{
           background-image: url('images/img3.jpg');
            background-size: cover;
            background-position: top;   
        } */
        /* Smooth rolling transition between images */
.profile-rotator {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: top;
    animation: rollIn 1s ease forwards;
}

@keyframes rollOut {
    0% { opacity: 1; transform: rotate(0deg) scale(1); }
    100% { opacity: 0; transform: rotate(120deg) scale(0.8); }
}

@keyframes rollIn {
    0% { opacity: 0; transform: rotate(-120deg) scale(0.8); }
    100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
/* Bounce animation */
@keyframes bounceOnce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-10px); }
  50% { transform: translateY(0); }
  70% { transform: translateY(-6px); }
}

/* Buttons begging to be clicked */
.beg-btn {
  display: inline-block;
  animation-name: bounceOnce;
  animation-duration: 0.9s;
  animation-fill-mode: forwards; /* keep end position */
  animation-iteration-count: 3;  /* three times */
}

/* Sequential animation using delay */
#viewWorkBtn {
  animation-delay: 0s;
}

#getInTouchBtn {
  animation-delay: 1s; /* starts after first button finishes */
}