html {
    scroll-behavior: smooth;
}
body {
    font-family: Vazirmatn, sans-serif;
}
@keyframes gradientCycle {
    0% {
        background: linear-gradient(
            to right,
            #38a169,
            #4299e1
        ); /* from-green-500 to-blue-500 */
    }
    25% {
        background: linear-gradient(
            to right,
            #4299e1,
            #5a67d8
        ); /* from-blue-500 to-indigo-600 */
    }
    50% {
        background: linear-gradient(
            to right,
            #9ae6b4,
            #90cdf4
        ); /* lighter shades */
    }
    75% {
        background: linear-gradient(
            to right,
            #38a169,
            #4299e1
        ); /* back to original */
    }
    100% {
        background: linear-gradient(
            to right,
            #4299e1,
            #5a67d8
        ); /* from-blue-500 to-indigo-600 */
    }
}

.gradient-animation {
    animation: gradientCycle 10s ease infinite;
}

.custom-scrollbar::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}

.custom-scrollbar {
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    scrollbar-width: none; /* For Firefox */
}

.bg-candy-orange {
    background: linear-gradient(137.64deg, #ff9e80 0, #ffc9ab 97.97%);
    box-shadow:
        -4px -20px 20px rgba(0, 0, 0, 0.08),
        11px 12px 20px rgba(0, 0, 0, 0.05),
        11px 9px 15px rgba(0, 0, 0, 0.05),
        inset 2px 2px 3px rgba(255, 255, 255, 0.42) !important;
}
.bg-candy-green {
    background: linear-gradient(145deg, #80c1b7 0, #8fceca 97.97%) !important;
    box-shadow:
        -4px -20px 20px rgba(0, 0, 0, 0.08),
        11px 12px 20px rgba(0, 0, 0, 0.05),
        11px 9px 15px rgba(0, 0, 0, 0.05),
        inset 2px 2px 3px rgba(255, 255, 255, 0.42) !important;
}
.bg-candy-pink {
    background: linear-gradient(
        137.64deg,
        #ffa2a2 0,
        #ffbab6 97.97%
    ) !important;
    box-shadow:
        -4px -20px 20px rgba(0, 0, 0, 0.08),
        11px 12px 20px rgba(0, 0, 0, 0.05),
        11px 9px 15px rgba(0, 0, 0, 0.05),
        inset 2px 2px 3px rgba(255, 255, 255, 0.42) !important;
}