/* Button styling */
button.bt1 {
    position: relative; /* Make the button a positioned element */
    background: linear-gradient(45deg, #0bec4b, #ffcc70, #fd01b5); /* Multicolor gradient background */
    color: #0c0000; /* White text */
    border: none; /* Remove border */
    padding: 12px 20px; /* Button padding */
    border-radius: 50px; /* Fully rounded corners */
    font-size: 18px; /* Larger font size */
    font-weight: bold; /* Bold text */
    cursor: pointer; /* Pointer cursor on hover */
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 1.5px; /* Increased spacing between letters */
    box-shadow: 0 8px 15px rgb(6, 6, 250); /* Shadow for depth */
    transition: all 0.4s ease; /* Smooth transition for hover effects */
    z-index: 1; /* Ensure button is above the pseudo-element */
    animation: fadeIn 1s ease-in-out; /* Add fade-in animation on load */
}

/* Gradient animation for the button */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Animate gradient shift */
button.bt1 {
    background-size: 200% 200%;
    animation: gradientShift 3s infinite;
}

/* Pseudo-element for the overlay effect */
button.bt1::before {
    content: ""; /* Empty content for pseudo-element */
    position: absolute; /* Position relative to button */
    top: -100%; /* Cover the area above the button */
    left: -20px; /* Extend to the left for full coverage */
    right: -20px; /* Extend to the right for full coverage */
    bottom: 0; /* Align with button */
    background: linear-gradient(45deg, rgb(83, 232, 180), rgba(246, 6, 6, 1.0)); /* Colorful overlay */
    z-index: -1; /* Place below the button */
    opacity: 1; /* Initially invisible */
    transition: opacity 0.4s ease; /* Smooth transition for opacity */
}

/* Hover effect: Make the overlay visible */
button.bt1:hover::before {
    opacity: 1; /* Show overlay */
}

/* Hover effect: Scale and brighten button */
button.bt1:hover {
    transform: scale(1.1); /* Slightly enlarge the button */
    filter: brightness(1.2); /* Make button colors brighter */
}

/* Add pulsing effect on hover */
button.bt1:hover {
    animation: pulse 0.6s infinite alternate; /* Pulse effect */
}

@keyframes pulse {
    from {
        transform: scale(1.1);
    }
    to {
        transform: scale(1.15);
    }
}

/* Fade-in animation for the button on load */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}