@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    box-sizing: border-box;
    list-style-type: none;
    scroll-behavior: smooth;
    text-decoration: none;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-Black.ttf');
    font-weight: 900;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-Bold.ttf');
    font-weight: 700;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-ExtraBold.ttf');
    font-weight: 800;

}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-Heavy.ttf');
    font-weight: 900;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-Light.ttf');
    font-weight: 300;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-Medium.ttf');
    font-weight: 500;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-SemiBold.ttf');
    font-weight: 600;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-Thin.ttf');
    font-weight: 100;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/gilroy/Gilroy-UltraLight.ttf');
    font-weight: 200;
}

.font-gilroy {
    font-family: 'Gilroy', sans-serif;
}

.font-inter {
    font-family: "Inter", sans-serif;
}

button {
    cursor: pointer;
}

nav.active-bar ul.side-bar {
    right: 0 !important;
}

nav.active-bar #menuBtn img.active {
    display: block !important;
}

nav.active-bar #menuBtn img.default {
    display: none !important;
}

.box {
    position: relative;
}

.box::before {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 0;
    border-radius: 10px;
    padding: 1px;
    background: linear-gradient(90deg, #4020C1 0%, #8432D6 100%);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.early-gain-card {
    position: relative;
}

#donutChart {
    width: 100% !important;
    height: 100% !important;
}

.early-gain-card::before {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 0;
    z-index: 11;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(90deg, #4020C1 0%, #8432D6 100%);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.what-we-hunt-card {
    position: relative;
}

.what-we-hunt-card::before {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 0;
    border-radius: 10px;
    padding: 1px;
    background: linear-gradient(90deg, #4020C1 0%, #8432D6 100%);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.bg-early-image {
    background-image: url(../images/webp/bg-earn-early.webp);
    background-size: cover;
    background-position: center;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.shadow-company {
    box-shadow: 0px 2px 6px 0px #98A4B31A;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 9999px;
    background: linear-gradient(to right, #6a11cb, #2575fc);
    outline: none;
}

/* Background before JS update */
input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 9999px;
}

input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 9999px;
}

/* Thumb (dot) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: linear-gradient(90deg, #4020C1 0%, #8432D6 100%);
    border: 6px solid #ffffff;
    outline: 4px solid #0F0F0F4D;
    cursor: pointer;
    margin-top: -8px;
}

input[type="range"]::-moz-range-thumb {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: linear-gradient(90deg, #4020C1 0%, #8432D6 100%);
    border: 6px solid #ffffff;
    outline: 4px solid #0F0F0F4D;
    cursor: pointer;
}


::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 60px;
    background: linear-gradient(90deg, #4020C1 0%, #8432D6 100%);
}
::selection {
    background: yellow;
    color: black;
}
.move-x {
    animation: move-x 20s linear infinite;
}

.move-rotate {
    animation: rotate-z 1s linear alternate infinite;
}

@keyframes move-x {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes rotate-z {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(10deg);
    }
}

#onFire .swiper-slide {
    opacity: 40%;
}

#onFire .swiper-slide-active {
    opacity: 100%;
}

#onFire .swiper-slide-next {
    opacity: 100%;
}

#onFire .swiper-slide-prev {
    opacity: 100%;
}

@media (max-width:1396px) {
    #onFire .swiper-slide {
        opacity: 40%;
    }

    #onFire .swiper-slide-active {
        opacity: 100%;
    }

    #onFire .swiper-slide-next {
        opacity: 100%;
    }

    #onFire .swiper-slide-prev {
        opacity: 100%;
    }
}

@media (max-width:1280px) {
    #onFire .swiper-slide {
        opacity: 100%;
    }

    #onFire .swiper-slide-active {
        opacity: 100%;
    }

    #onFire .swiper-slide-next {
        opacity: 40%;
    }

    #onFire .swiper-slide-prev {
        opacity: 40%;
    }
}