* {
    scrollbar-width: none;
}

/* html {
    scroll-behavior: smooth;
} */

*::-webkit-media-controls-panel {
    display: none!important;
    -webkit-appearance: none;
  }
  
  /* Old shadow dom for play button */
  
  *::-webkit-media-controls-play-button {
    display: none!important;
    -webkit-appearance: none;
  }
  
  /* New shadow dom for play button */
  
  /* This one works! */
  
  *::-webkit-media-controls-start-playback-button {
    display: none!important;
    -webkit-appearance: none;
  }

body {
    width: 100%;
    overflow-x: hidden !important;
}

::-webkit-scrollbar {
    display: none;
}

.nunito {
    font-family: "Nunito", sans-serif;
}

.monts {
    font-family: "Montserrat", sans-serif;
}

.raleway {
    font-family: 'Raleway', sans-serif;
}

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

.stickyNav {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 9999 !important;
    background: rgba(0, 0, 0, 0.68);
}

.hero-bg {
   background-image: radial-gradient(circle closest-corner at 60% 50%,
            #ffd54f39 41%,
            #0c0c0c);
}

.bg-pinkgrad {
    background-color: #a946ff74;
    background-image: linear-gradient(60deg, #B68044, #39A097);
}

.text-yellowgrad {
    background-color: #ffd70074;
    background-image: linear-gradient(60deg, #FF8C00, #FFD700, #FFD700);
    -webkit-background-clip: text;
    /* For Safari and older versions of Chrome */
    -moz-background-clip: text;
    /* For Firefox */
    background-clip: text;
    color: transparent;
}

.backersMobile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 100vw;
    overflow: hidden;
}

.scroll-parent {
    position: relative;
    height: 100%;
    width: 100vw;
    overflow-x: hidden;
}

.scroll-element a {
    width: 100%;
    /* margin-left: 20px; */
    color: #73ffdaa9;
}

.primary {
    animation: primary 20s linear infinite;
}

.scroll-element {
    width: 200vw;
    position: absolute;
    left: 0%;
    top: 0%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

@keyframes primary {
    from {
        left: 0%;
    }

    to {
        left: -100%;
    }
}

/* MEDIA QUERIES FOR SCROLL ANIMATION */
@media (max-width: 639px) {
    .scroll-element {
        width: 400vw;
    }

    .primary {
        animation: primary 20s linear infinite;
    }

    @keyframes primary {
        from {
            left: 0%;
        }

        to {
            left: -200%;
        }
    }
}

.center-btn {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%,-50%);
}


.roadCont {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 30%;
    gap: 40px;
    overflow-x: auto !important;
}

/* MEDIA QUERIES */
@media (max-width: 1170px) {
    .roadCont {
        gap: 0px !important;
        grid-auto-columns: 85%;
    }
}

@media (max-width: 700px) {
    /* .roadCont {
        display: flex;
        flex-direction: column; 
        align-items: start;
        justify-content: center;
        gap: 50px;
        margin-left: 20px;
    } */
}

.arrows {
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    margin: 10px;
}