@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {
    --bs-bg-default: 218, 254, 51;
    --bs-bg-emerald: 0, 211, 147;
    --bs-bg-orange: 255, 126, 0;
    --bs-bg-black: 0, 0, 0;
    --bs-bg-white: 255, 255, 255;
    --bs-bg-red: 255, 100, 102;
    --bs-bg-blue: 0, 164, 255;
    --bg-opacity: 1;
}

.bg-default {
    --bg-opacity: 1;
    background-color: rgba(var(--bs-bg-default), var(--bg-opacity));
}

.text-default {
    --bg-opacity: 1;
    color: rgba(var(--bs-bg-default), var(--bg-opacity));
}

.border-default {
    --bg-opacity: 1;
    border-color: rgba(var(--bs-bg-default), var(--bg-opacity));
}

.hover\:bg-default:hover {
    --bg-opacity: 1 !important;
    background-color: rgba(var(--bs-bg-default), var(--bg-opacity)) !important;
    color: rgb(var(--bs-bg-black)) !important;
}

.focus\:ring-default:focus {
    border-color: rgb(var(--bs-bg-default));
}

.hover\:bg-default-border\/10:hover {
    --bg-opacity: .1;
    background-color: rgba(var(--bs-bg-default), var(--bg-opacity));
    border-color: rgba(var(--bs-bg-default), .5);
    border-width: 1px;
}

.bg-emerald {
    --bg-opacity: 1;
    background-color: rgba(var(--bs-bg-emerald), var(--bg-opacity));
}

.text-emerald {
    --bg-opacity: 1;
    color: rgba(var(--bs-bg-emerald), var(--bg-opacity));
}

.border-emerald {
    --bg-opacity: 1;
    border-color: rgba(var(--bs-bg-emerald), var(--bg-opacity));
}

.hover\:bg-emerald\/10:hover {
    background-color: rgba(var(--bs-bg-emerald), var(--bg-opacity));
}

.bg-orange {
    --bg-opacity: 1;
    background-color: rgba(var(--bs-bg-orange), var(--bg-opacity));
}

.text-orange {
    --bg-opacity: 1;
    color: rgba(var(--bs-bg-orange), var(--bg-opacity));
}

.border-orange {
    --bg-opacity: 1;
    border-color: rgba(var(--bs-bg-orange), var(--bg-opacity));
}

.hover\:bg-orange:hover {
    --bg-opacity: 1 !important;
    background-color: rgba(var(--bs-bg-orange), var(--bg-opacity)) !important;
    color: rgb(var(--bs-bg-white)) !important;
}

.hover\:bg-orange\/10:hover {
    background-color: rgba(var(--bs-bg-orange), var(--bg-opacity));
}

.bg-black {
    --bg-opacity: 1;
    background-color: rgba(var(--bs-bg-black), var(--bg-opacity));
}

.text-black {
    --bg-opacity: 1;
    color: rgba(var(--bs-bg-black), var(--bg-opacity));
}

.border-black {
    --bg-opacity: 1;
    border-color: rgba(var(--bs-bg-black), var(--bg-opacity));
}

.hover\:bg-black:hover {
    --bg-opacity: 1 !important;
    background-color: rgba(var(--bs-bg-black), var(--bg-opacity)) !important;
    color: rgb(var(--bs-bg-default)) !important;
}

.bg-white {
    --bg-opacity: 1;
    background-color: rgba(var(--bs-bg-white), var(--bg-opacity));
}

.text-white {
    --bg-opacity: 1;
    color: rgba(var(--bs-bg-white), var(--bg-opacity));
}

.border-white {
    --bg-opacity: 1;
    border-color: rgba(var(--bs-bg-white), var(--bg-opacity));
}

.bg-red {
    --bg-opacity: 1;
    background-color: rgba(var(--bs-bg-red), var(--bg-opacity));
}

.text-red {
    --bg-opacity: 1;
    color: rgba(var(--bs-bg-red), var(--bg-opacity));
}

.border-red {
    --bg-opacity: 1;
    border-color: rgba(var(--bs-bg-red), var(--bg-opacity));
}

.bg-blue {
    --bg-opacity: 1;
    background-color: rgba(var(--bs-bg-blue), var(--bg-opacity));
}

.text-blue {
    --bg-opacity: 1;
    color: rgba(var(--bs-bg-blue), var(--bg-opacity));
}

.border-blue {
    --bg-opacity: 1;
    border-color: rgba(var(--bs-bg-blue), var(--bg-opacity));
}

.hover\:bg-blue\/10:hover {
    background-color: rgba(var(--bs-bg-blue), var(--bg-opacity));
}

.cl-opacity-10 {
    --bg-opacity: 0.1 !important;
}

.cl-opacity-25 {
    --bg-opacity: 0.25 !important;
}

.cl-opacity-50 {
    --bg-opacity: 0.5 !important;
}

.cl-opacity-100 {
    --bg-opacity: 1 !important;
}

.d-none {
    display: none !important
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis-smooth [data-lenis-prevent] {
    scroll-behavior: contain;
}

#mobile-navigation {
    opacity: 0;
    transform: translateY(-15px) scale(0.97);
    pointer-events: none;
    transition:
        opacity 0.4s ease,
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-navigation.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

#mobile-navigation a {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-navigation.open a {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

#mobile-navigation.open nav a:nth-child(1) {
    transition-delay: 0.1s;
}

#mobile-navigation.open nav a:nth-child(2) {
    transition-delay: 0.2s;
}

#mobile-navigation.open nav a:nth-child(3) {
    transition-delay: 0.3s;
}

#mobile-navigation.open nav a:nth-child(4) {
    transition-delay: 0.4s;
}

#mobile-navigation.open nav a:nth-child(5) {
    transition-delay: 0.5s;
}

#mobile-navigation.open nav a:nth-child(6) {
    transition-delay: 0.6s;
}

#mobile-navigation.open nav+div a:nth-child(1) {
    transition-delay: 0.7s;
}

#mobile-navigation.open nav+div a:nth-child(2) {
    transition-delay: 0.8s;
}

@media(min-width:80rem) {
    #mobile-navigation {
        display: none;
    }
}

.avatar-sm {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    max-width: 2.5rem;
    max-height: 2.5rem;
    border-radius: 0.4rem;
}

.avatar-xs {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
    max-width: 1.5rem;
    max-height: 1.5rem;
    border-radius: 0.4rem;
}

.avatar-sm-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 2rem;
    min-height: 2rem;
    max-width: 2rem;
    max-height: 2rem;
    border-radius: 0.4rem;
}

.avatar-sm-1\.8 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 1.8rem;
    min-height: 1.8rem;
    max-width: 1.8rem;
    max-height: 1.8rem;
    border-radius: 0.4rem;
}

.flex-wrap {
    flex-wrap: wrap;
}

.leaders-backdrop {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
}

.leaders-menu {
    top: 100%;
    left: 0;
    width: 100%;
    background-color: rgb(var(--bs-bg-black));
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    z-index: 51;
}

[role="button"] {
    cursor: pointer;
}

.leaders-card {
    width: 100%;
    border-radius: 0.4rem;
    border-top: 2px solid rgb(var(--bs-bg-default));
}

@media(min-width: 650px) {
    .leaders-card {
        width: 49%;
    }
}

@media(min-width: 768px) {
    .leaders-card {
        width: 24%;
    }
}

.row-gap-5 {
    row-gap: calc(var(--spacing) * 5);
}

.avatar-md {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

.leaders-color {
    background-color: #0d0f11;
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    position: absolute;
    right: 3px;
    bottom: -5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leaders-color span {
    background-color: rgb(var(--bs-bg-emerald));
    border-radius: 50%;
    width: .6rem;
    height: .6rem;
}

.m-0 {
    margin: 0 !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.min-w-full {
    min-width: 100%;
}

.text-nowrap {
    white-space: nowrap !important;
}

.text-stroke-0\.5 {
    -webkit-text-stroke: 0.5px;
}

.text-stroke-1 {
    -webkit-text-stroke: 1px;
}

.avatar-lg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 0.4rem;
}

.trades-card {
    width: 49%;
}

.w-48 {
    width: 48%;
}

#language-navigation {
    inset: calc(var(--spacing) * 0);
    z-index: 101;
    opacity: 0;
    transform: translateY(-15px) scale(0.97);
    pointer-events: none;
    transition:
        opacity 0.4s ease,
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#language-navigation.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

@media(min-width: 768px) {
    .trades-card {
        width: 24%;
    }

    .md\:w-48 {
        width: 48%
    }

    #language-navigation {
        inset-inline-start: auto;
        inset-inline-end: var(--spacing);
        top: 0;
        bottom: 0;
        right: 0;
        width: 400px;
   }
}

.border-t-8 {
    border-top-width: 8px;
}

.rounded-lg-b {
    border-bottom-left-radius:var(--radius-lg);
    border-bottom-right-radius:var(--radius-lg);
}

.avatar-random-lg {
    width: 20rem;
    height: auto;    
}

.language-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 10px;
}

.language-btn img {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
}

.rounded-circle {
    border-radius: 50%;
}

.nav-overflow-y::-webkit-scrollbar {
    width: 13px;
}

.nav-overflow-y::-webkit-scrollbar-track {
    background-color: transparent !important;
}

.nav-overflow-y::-webkit-scrollbar-thumb {
    background-color: #aaaaaa !important;
    border-radius: 10px;
    border: 4px solid #0f0f0f;
}

.nav-overflow-y::-webkit-scrollbar-thumb:hover {
    background-color: #cccccc !important; 
}

.skiptranslate, .goog-te-spinner-pos, .goog-te-spinner, .VIpgJd-ZVi9od-aZ2wEe-OiiCO {
    display: none !important;    
}

body {
  top: 0px !important;
  position: static !important;
}

html, body {
  margin-top: 0px !important;
  padding-top: 0px !important;
}

#language-navigation .nav-overflow-y > div {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#language-navigation.open .nav-overflow-y > div {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}