#particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.container {
    max-width: 1024px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.brand-logo {
    cursor: pointer
}

.header {
    padding: 32px 24px
}

.end-item {
    position: relative;
    color: #fff;
    padding: 12px 36px;
    border-radius: 4px;
    font-size: 18px;
    background: linear-gradient(90deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #ff2400);
    background-size: 600%600%;
    animation: gradientBG 5s ease infinite
}

.baner-img {
    background: linear-gradient(90deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #ff2400);
    background-size: 600%600%;
    animation: gradientBG 5s ease infinite
}

.end-item::after,
.button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1)translate(-50%);
    transform-origin: 50%50%
}

.end-item:hover::after,
.button:hover::after {
    animation: ripple 1s ease-out
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 1
    }

    20% {
        transform: scale(25, 25);
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: scale(40, 40)
    }
}




.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes pulse {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.animate-pulse {
    animation-timing-function: ease-in-out;
    animation: pulse 2s infinite;
}


.sks-image {
    animation: float 6s ease-in-out infinite
}

@keyframes float {
    0% {
        transform: translateY(0px)rotate(0deg)
    }

    50% {
        transform: translateY(-20px)rotate(2deg)
    }

    100% {
        transform: translateY(0px)rotate(0deg)
    }
}

.button-group {
    display: flex;
    align-items: center;
    justify-content: center
}

.button {
    position: relative;
    width: 40%;
    height: 66px;
    border-radius: 4px;
    font-size: 18px;
    color: #fff;
}

.btn-1 {
    background: linear-gradient(90deg, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #ff2400, #ff2400, #e81d1d);
    background-size: 600%600%;
    animation: gradientBG 5s ease infinite, floatReverse 5s ease-in-out infinite
}

.btn-2 {
    background: linear-gradient(90deg, #1de840, #1ddde8, #2b1de8, #dd00f3, #ff2400, #ff2400, #e81d1d, #e8b71d, #e3e81d);
    background-size: 600%600%;
    animation: gradientBG 5s ease infinite, floatFast 5s ease-in-out infinite
}

.btn-3 {
    background: linear-gradient(90deg, #2b1de8, #dd00f3, #ff2400, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8);
    background-size: 600%600%;
    animation: gradientBG 5s ease infinite, floatSlow 5s ease-in-out infinite
}

.btn-4 {
    background: linear-gradient(90deg, #ff2400, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3);
    background-size: 600%600%;
    animation: gradientBG 5s ease infinite, floatDiagonal 5s ease-in-out infinite
}

@keyframes floatReverse {
    0% {
        transform: translateY(0px)rotate(0deg)
    }

    50% {
        transform: translateY(-15px)rotate(-2deg)
    }

    100% {
        transform: translateY(0px)rotate(0deg)
    }
}

@keyframes floatSlow {
    0% {
        transform: translateY(0px)
    }

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

    100% {
        transform: translateY(0px)
    }
}

@keyframes floatFast {
    0% {
        transform: translateY(0px)
    }

    50% {
        transform: translateY(-25px)
    }

    100% {
        transform: translateY(0px)
    }
}

@keyframes floatDiagonal {
    0% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(5px, -10px)
    }

    50% {
        transform: translate(0, -20px)
    }

    75% {
        transform: translate(-5px, -10px)
    }

    100% {
        transform: translate(0, 0)
    }
}

@keyframes floatBounce {

    0%,
    100% {
        transform: translateY(0)
    }

    25% {
        transform: translateY(-15px)rotate(1deg)
    }

    75% {
        transform: translateY(-5px)rotate(-1deg)
    }
}

@keyframes gradientBG {
    0% {
        background-position: 0%50%
    }

    50% {
        background-position: 100%50%
    }

    100% {
        background-position: 0%50%
    }
}

.baner-img {
    display: flex;
    align-items: center;
    justify-content: center
}

/* .footer {
    align-items: center;
    justify-content: space-between
} */

/* .footer-right-item {
    display: flex;
    align-items: center;
    justify-content: center
} */



.text-align{
    text-align: center;
}


.item-box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    transition: all 0.3s ease;
}


@media screen and (min-width: 1024px) {
    .item-box {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .text-align{
        text-align: end;
    }
}