/* Base Style for All Links */
a {
    text-decoration: none;
  
    display: inline-block;
    
}

/* Effect 1: Basic Hover with Color Change */
.a-effect-1 {
    color: #007bff;
    transition: color 0.3s ease;
}

    .a-effect-1:hover {
        color: #ff5722;
    }

/* Effect 2: Underline Animation */
.a-effect-2 {
    position: relative;
    color: #333;
    transition: color 0.3s ease;
}

    .a-effect-2::after {
        content: "";
        position: absolute;
        width: 0;
        height: 2px;
        background: #ff5722;
        bottom: 0;
        left: 0;
        transition: width 0.3s ease;
    }

    .a-effect-2:hover {
        color: #ff5722;
    }

        .a-effect-2:hover::after {
            width: 100%;
        }

/* Effect 3: Slide-In Background */
.a-effect-3 {
    position: relative;
    color: #fff;
    background: #007bff;
    padding: 10px 20px;
    border-radius: 4px;
    overflow: hidden;
}

    .a-effect-3::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: -100%;
        background: #ff5722;
        z-index: 0;
        transition: all 0.3s ease;
    }

    .a-effect-3:hover::before {
        left: 0;
    }

    .a-effect-3 span {
        position: relative;
        z-index: 1;
    }

/* Effect 4: Grow and Shrink */
.a-effect-4 {
    color: #007bff;
    transition: transform 0.3s ease, color 0.3s ease;
}

    .a-effect-4:hover {
        transform: scale(1.1);
        color: #ff5722;
    }

/* Effect 5: Bounce Animation */
.a-effect-5 {
    color: #333;
}

    .a-effect-5:hover {
        animation: bounce 0.5s ease;
    }

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Effect 6: Pulse Animation */
.a-effect-6 {
    color: #333;
}

    .a-effect-6:hover {
        animation: pulse 1s infinite;
    }

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Effect 7: Glow Effect */
.a-effect-7 {
    color: #007bff;
    transition: text-shadow 0.3s ease;
}

    .a-effect-7:hover {
        text-shadow: 0 0 10px #ff5722, 0 0 20px #ff5722, 0 0 30px #ff5722;
    }