html {
    scroll-behavior: smooth;
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #FAF7F2;
}
::-webkit-scrollbar-thumb {
    background: #D4B996;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #A87A54;
}
.circle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
    overflow: hidden;
}
.circle {
    position: absolute;
    border-radius: 50%;
    animation: move 20s infinite alternate ease-in-out;
    opacity: 0.15;
}
.circle-1 {
    width: 30rem;
    height: 30rem;
    top: 5%;
    left: -10%;
    animation-duration: 25s;
}
.circle-2 {
    width: 40rem;
    height: 40rem;
    bottom: -15%;
    right: -10%;
    animation-duration: 30s;
    animation-delay: 3s;
}
.circle-3 {
    width: 25rem;
    height: 25rem;
    top: 40%;
    left: 30%;
    animation-duration: 20s;
    animation-delay: 1s;
}
@keyframes move {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(50px, -30px) scale(1.1);
        opacity: 0.25;
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}