@font-face {
    font-family: 'inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/thefreespins/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/thefreespins/fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/thefreespins/fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/thefreespins/fonts/Inter-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/thefreespins/fonts/Inter-ExtraBold.woff2') format('woff2');
}
@font-face {
    font-family: 'inter';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/thefreespins/fonts/Inter-Black.woff2') format('woff2');
}

@font-face {
    font-family: 'interItalic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/thefreespins/fonts/Inter_BoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'sfPro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/thefreespins/fonts/SFProText-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'sfPro';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/thefreespins/fonts/SFProText-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'sfPro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/thefreespins/fonts/SFProText-Semibold.woff2') format('woff2');
}
@font-face {
    font-family: 'sfPro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/thefreespins/fonts/SFProText-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'dmSans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/thefreespins/fonts/DMSans-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'dmSans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/thefreespins/fonts/DMSans-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'dmSans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/thefreespins/fonts/DMSans-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'dmSans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/thefreespins/fonts/DMSans-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'bebasNeue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/thefreespins/fonts/BebasNeue-Regular.woff2') format('woff2');
}

/* Custom Utilities */
    .bg-purple-gradient {
        position: relative;
    }

    .bg-purple-gradient::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.33), rgba(76, 0, 255, 0.33)),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 50.22%, #000000 100%);
        z-index: -1;
        border-radius: 10px;
        pointer-events: none;
    }

    .bg-purple {
        position: relative;
    }

    .bg-purple::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(76, 0, 255, 0.33);
        z-index: -1;
        border-radius: 10px;
        pointer-events: none;
    }

    .bg-dark-gradient {
        position: relative;
    }

    .bg-dark-gradient::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50.22%, #000000 100%);
        z-index: -1;
        border-radius: 10px;
        pointer-events: none;
    }

    .border-gradient-blue {
        position: relative;
        border-radius: 10px;
        background: transparent;
    }

    .border-gradient-blue::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 10px;
        padding: 1px;
        background: linear-gradient(148.73deg, #214568 0%, #0A1622 100%);
        -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
        mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
    .border-gradient-blue-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 10px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(148.73deg, #214568 0%, #0A1622 100%) border-box;
    }

    .border-gradient-cian-rounded-custom {
        border: 1px solid transparent;
        border-radius: 10px;
        background:
                linear-gradient(to bottom, #3D6893, #0A1622) padding-box,
                linear-gradient(148.73deg, #6DAAE5 0%, #0D1C27 100%) border-box;
    }

    .border-gradient-green-rounded {
        border: 1px solid transparent;
        border-radius: 10px;
        background:
                linear-gradient(var(--bg-color, #0A1622), var(--bg-color, #0A1622)) padding-box,
                linear-gradient(148.73deg, #0EDB2D 0%, #0A1622 100%) border-box;
    }

    .border-gradient-white-rounded {
        border: 1px solid transparent;
        border-radius: 10px;
        background:
                linear-gradient(var(--bg-color, #0A1622), var(--bg-color, #0A1622)) padding-box,
                linear-gradient(148.73deg, #FFFFFF 0%, #0A1622 100%) border-box;
    }
    .border-gradient-white-second-rounded {
        border: 1px solid transparent;
        border-radius: 10px;
        background:
                linear-gradient(var(--bg-color, #0A1622), var(--bg-color, #0A1622)) padding-box,
                linear-gradient(91.91deg, #FFFFFF 6.26%, #0E1D28 95.62%) border-box;
    }

    .border-gradient-light-blue-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 10px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(148.73deg, #01E7D5 0%, #0A1622 100%) border-box;
    }

    .border-gradient-dark-orange-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 10px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(148.73deg, #FFE100 0%, #BC0000 100%) border-box;
    }
    .border-gradient-dark-yellow-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 10px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(173.73deg, #FFE100 5.44%, #461500 94.56%) border-box;
    }

    .border-gradient-yellow-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 10px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(148.73deg, #FFD901 0%, #0A1622 100%) border-box;
    }

    .border-gradient-silver-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 10px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(148.73deg, #CFCFCF 0%, #0A1622 100%) border-box;
    }

    .border-gradient-bronze-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 10px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(148.73deg, #DA812E 0%, #0A1622 100%) border-box;
    }

    .border-gradient-cherry-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 10px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(148.73deg, #7C1362 0%, #400146 100%) border-box;
    }

    .border-gradient-orange-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 10px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(148.73deg, #FF7700 0%, #0A1622 100%) border-box;
    }

    .border-gradient-white-red-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 999px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(180deg, #FFFFFF 0%, #FF0000 100%) border-box;
    }

    .border-gradient-white-blue-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 999px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(180deg, #FFFFFF 0%, #00C9FF 100%) border-box;
    }
    .border-gradient-white-dark-blue-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 999px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(180deg, #FFFFFF 0%, #0095FF 100%) border-box;
    }
    .border-gradient-white-deep-blue-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 999px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(180deg, #FFFFFF 0%, #0043FF 100%) border-box;
    }
    .border-gradient-white-purple-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 999px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(180deg, #FFFFFF 0%, #D400FF 100%) border-box;
    }
    .border-gradient-white-gold-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 999px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(180deg, #FFFFFF 0%, #FFB52B 100%) border-box;
    }
    .border-gradient-white-dark-yellow-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 999px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(180deg, #FFFFFF 0%, #D0A03A 100%) border-box;
    }

    .border-gradient-white-green-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 999px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(180deg, #FFFFFF 0%, #2CE209 100%) border-box;
    }

    .border-gradient-neon-blue-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 5px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(148.73deg, #00FFFF 0%, #0A1622 100%) border-box;
    }
    .border-gradient-dark-purple-rounded {
        --bg-color: #0A1622;
        border: 1px solid transparent;
        border-radius: 5px;
        background:
                linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(148.73deg, #8056FF 0%, #0A1622 100%) border-box;
    }

    /*Shadows*/
    .shadow-orange {
        box-shadow: 0px 5px 30px 0px #FFC30099;
    }
    .shadow-cyan {
        box-shadow: 0px 5px 30px 0px #00FFD4;
    }
    .shadow-neon-purple {
        box-shadow: 0px 5px 30px 0px #8D0BFF;
    }
    .shadow-purple {
        box-shadow: 0px 5px 30px 0px #CC00FF;
    }
    .shadow-purple-dark {
        box-shadow: 0px 0px 20px 0px #CC00FF80;
    }

    /*Scrollbar*/
    .custom-scrollbar-purple::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
    .custom-scrollbar-purple::-webkit-scrollbar-track {
        background: #1D3446;
        border-radius: 10px;
    }
    .custom-scrollbar-purple::-webkit-scrollbar-thumb {
        background: #8D0BFF;
        border-radius: 10px;
    }