* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    min-height: 100vh;
    background: linear-gradient(152.21deg, #FFFFFF 2.47%, #F5F3B9 85.67%);
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial;

    color: #FFFFFF;
}

.bg-gradient-brown {
    border: 1px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image:
        linear-gradient(#462604, #462604),
        linear-gradient(180deg, #FFE747 0%, #AE6108 47.12%, #FFE747 100%);

}

.kkbtn {
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image:
        linear-gradient(#ffff, #ffff),
        linear-gradient(180deg, #FAFAFC 44.23%, #AA5906 100%);
}

.bg-img {
    background-image: url("../../assets/images/banner.png");
    background-size: 100% 100%;
    background-position: top left;
    background-repeat: no-repeat;
}


.kkbtn {
    opacity: 0;
}

@media (max-width: 768px) {
    .bg-img {
        background-image: url("../../assets/images/banner-mobile.png");
        background-position: 100% 45%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .kkbtn {
        opacity: 1;
    }


}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }

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

@keyframes appearFromCenter {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.slideIn {
    animation: slideInFromLeft 0.6s ease-out forwards;
}

.appearCenter {
    animation: appearFromCenter 0.6s ease-out forwards;
}


.tile-item {
    transition: transform 0.3s ease;
}

.tile-item:hover {
    transform: scale(1.05);
}

@keyframes pulseButton {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(228, 23, 208, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(228, 23, 208, 0.6);
    }
}

.authBtn {
    animation: pulseButton 2s ease-in-out infinite;
}