* {
    scroll-behavior: smooth;
}

html,
body {
    overflow-x: hidden;
    font-family: 'Archivo Black';
}

@keyframes customBounce {
    30% {
        transform: scale(1.2);
    }

    40%,
    60% {
        transform: rotate(-20deg) scale(1.2);
    }

    50% {
        transform: rotate(20deg) scale(1.2);
    }

    70% {
        transform: rotate(0deg) scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.about-logos {
    animation: customBounce 1.5s infinite;
}

.w-full button:hover .svgg path {
    fill: black;
}

body {
    background-color: #8b4513 !important; /* Ocean blue */
}

/* Coin Rain Animation */
@keyframes coinRain {
    0% {
        transform: translateY(-100px);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

.coin {
    position: absolute;
    top: -10px;
    pointer-events: none;
    opacity: 0.8;
    z-index: 9999;
    animation: coinRain linear infinite;
}

.coin-image {
    width: 40px;  /* Adjust coin size */
    height: auto;
}


/* Hero Section background color */
#hero {
    background-color: rgb(249, 4, 4) !important; /* Set Hero background to Yellow */
    position: relative;
}

/* Blue background for the About section */
#about {
    background-color: #052db1; /* Blue background */
    position: relative;
}

/* Green background for the Tokenomics section */
#tokenomics {
    background-color: #2f9e44; /* Green background */
}

/* Orange background for the Partners section */
#partners {
    background-color: #f4a261; /* Orange background */
}

/* Brown background for the Social section */
#social {
    background-color: #8b4513; /* Brown background */
    margin-bottom: 0; /* Remove any bottom margin */
}

/* Remove the gap between the Social section and Footer */
footer {
    margin-top: 0; /* Ensure the footer has no top margin */
}