main{
    background:
            linear-gradient(
                    90deg,
                    rgba(142, 247, 255, 0.9),
                    rgba(13, 173, 176, 0.7),
                    rgba(247, 0, 255, 0.1)
            ),
            url("../../../assets/images/bg1.png");
    background-size: cover; /* Optional: to cover the entire element */
    background-position: center; /* Center the image */

}

.text-border {
    color: white; /* Main text color */
    text-shadow:
            1px 1px 0 rgba(0, 0, 0, 0.5),
            -1px -1px 0 rgba(0, 0, 0, 0.5),
            1px -1px 0 rgba(0, 0, 0, 0.5),
            -1px 1px 0 rgba(0, 0, 0, 0.5);
}

/* Custom styles for animations */
.fade-in {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;           /* Start with opacity 0 */
        transform: translateY(40px) ; /* Start 40px below its original position */
    }
    100% {
        opacity: 1;           /* End with full opacity */
        transform: translateY(0); /* End at its original position */
    }
}