body {
    background-color: black;
    color: white;
}



.container {
        width: 100%;
        margin-inline: auto
    }

    @media (min-width:640px) {
        .container {
            max-width: 640px
        }
    }

    @media (min-width:768px) {
        .container {
            max-width: 768px
        }
    }

    @media (min-width:1024px) {
        .container {
            max-width: 1024px
        }
    }

    @media (min-width:1280px) {
        .container {
            max-width: 1240px
        }
    }

    @media (min-width:1320px) {
        .container {
            max-width: 1280px
        }
    }

    @media (min-width:1360px) {
        .container {
            max-width: 1320px
        }
    }

    @media (min-width:1480px) {
        .container {
            max-width: 1440px
        }
    }

    @media (min-width:1570px) {
        .container {
            max-width: 1530px
        }
    }

    @media (min-width:1720px) {
        .container {
            max-width: 1680px
        }
    }



/* Target the card when the parent .group is hovered */
.group:hover .magic-gradient-border {
    /* 1. Paint the dark background inside the padding area */
    /* 2. Paint the gradient underneath, stretching to the border area */
    background: linear-gradient(#1a1a1a, #1a1a1a) padding-box,
        linear-gradient(to right, #bedd00, #0095b6) border-box;

    /* Make the actual border clear so the gradient shows through */
    border-color: transparent;
}




@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
}

@keyframes imageZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

.animate-image-zoom {
    animation: imageZoom 25s linear infinite alternate;
}