@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');



@font-face {
    font-family: 'Sofia Pro';
    src: url("./fonts/Sofia\ Pro\ Regular\ Az.woff2") format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* Inter font */
.inter-fonts {
    font-family: "Inter", sans-serif !important;
}

/* Instrument font */
.instrument-fonts {
    font-family: "Instrument Sans", serif;
}

.robboto-fonts {
    font-family: "Roboto", serif;
}

/* Sofia Pro font */
.sofia-fonts {
    font-family: 'Sofia Pro', sans-serif !important;
}

.colfaxfont {
    font-family: 'Colfax', sans-serif !important;
}

/* animations */
/* Define the blink keyframes */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    0% {
        opacity: 0;
    }
}

@keyframes blinktwo {

    0%,
    100% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }
}

/* Create a custom class for blinking animation */
.animate-blink {
    animation: blink 2s infinite;
}

.animate-blinktwo {
    animation: blinktwo 2s infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

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

.animate-marquee {
    animation: marquee 5s linear infinite;
}

@keyframes marquee2 {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0%);
    }
}

.animate-marquee2 {
    animation: marquee2 50s linear infinite;
}


@keyframes borderSmoke {
    0% {
        border-color: #00E5FF;
        box-shadow: 0 0 5px #00E5FF;
    }

    25% {
        border-color: #00E5FF;
        box-shadow: 0 0 10px #00E5FF;
    }

    50% {
        border-color: #00E5FF;
        box-shadow: 0 0 15px #00E5FF;
    }

    75% {
        border-color: #00E5FF;
        box-shadow: 0 0 10px #00E5FF;
    }

    100% {
        border-color: #00E5FF;
        box-shadow: 0 0 5px #00E5FF;
    }
}

.border-animation {
    /* border: 4px solid; */
    border-radius: 20px;
    animation: borderSmoke 3s infinite linear;
}

.king-card {
    position: relative;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
    /* To prevent animation overflow */
}

/* Creating animated border effect */
.king-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 101%;
    border-radius: inherit;
    /* Ensures border follows parent's radius */
    border: 4px solid transparent;
    animation: borderAnimation 3s infinite linear;

    /* Masking trick for rounded corners */
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
}

.king-card2 {
    position: relative;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
    /* To prevent animation overflow */
}

/* Creating animated border effect */
.king-card2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 101%;
    border-radius: inherit;
    /* Ensures border follows parent's radius */
    border: 4px solid transparent;
    animation: borderAnimation2 3s infinite linear;

    /* Masking trick for rounded corners */
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
}

.king-card3 {
    position: relative;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
    /* To prevent animation overflow */
}

/* Creating animated border effect */
.king-card3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 101%;
    border-radius: inherit;
    /* Ensures border follows parent's radius */
    border: 4px solid transparent;
    animation: borderAnimation3 3s infinite linear;

    /* Masking trick for rounded corners */
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
}

@keyframes borderAnimation {
    0% {
        border-image-source: linear-gradient(to right, #00E5FF, transparent);
        border-image-slice: 1;
    }

    25% {
        border-image-source: linear-gradient(to bottom, #00E5FF, transparent);
        border-image-slice: 1;
    }

    50% {
        border-image-source: linear-gradient(to left, #00E5FF, transparent);
        border-image-slice: 1;
    }

    75% {
        border-image-source: linear-gradient(to top, #00E5FF, transparent);
        border-image-slice: 1;
    }

    100% {
        border-image-source: linear-gradient(to right, #00E5FF, transparent);
        border-image-slice: 1;
    }
}

@keyframes borderAnimation2 {
    0% {
        border-image-source: linear-gradient(to right, #39FF14, transparent);
        border-image-slice: 1;
    }

    25% {
        border-image-source: linear-gradient(to bottom, #39FF14, transparent);
        border-image-slice: 1;
    }

    50% {
        border-image-source: linear-gradient(to left, #39FF14, transparent);
        border-image-slice: 1;
    }

    75% {
        border-image-source: linear-gradient(to top, #39FF14, transparent);
        border-image-slice: 1;
    }

    100% {
        border-image-source: linear-gradient(to right, #39FF14, transparent);
        border-image-slice: 1;
    }
}

@keyframes borderAnimation3 {
    0% {
        border-image-source: linear-gradient(to right, #5A00FA, transparent);
        border-image-slice: 1;
    }

    25% {
        border-image-source: linear-gradient(to bottom, #5A00FA, transparent);
        border-image-slice: 1;
    }

    50% {
        border-image-source: linear-gradient(to left, #5A00FA, transparent);
        border-image-slice: 1;
    }

    75% {
        border-image-source: linear-gradient(to top, #5A00FA, transparent);
        border-image-slice: 1;
    }

    100% {
        border-image-source: linear-gradient(to right, #5A00FA, transparent);
        border-image-slice: 1;
    }
}

/* animations */

.active {
    color: #FFB92D !important;
    border-bottom: 1px solid #FFB92D !important;
}

.activetwo {
    background-color: #FFB92D !important;
    /* color: black; */
}

.grap-down #dropdownHoverButton {
    box-shadow: 0px 8px 16px 0px #FF971D26;
}

.list-disc-yellow li::marker {
    color: yellow;
    font-size: 20px;
}

/* Hide scrollbar for Chrome, Safari and Edge */
#profile ::-webkit-scrollbar {
    display: none !important;
}

#settingss ::-webkit-scrollbar {
    display: none !important;
}

.inner-head {
    background: linear-gradient(180deg, #151515 37%, #343434 100%);
}

.how-cards {
    box-shadow: 0px 4px 54px 0px #000000F2;
}




/* Light mode (default) */
:root {
    --background-color: #181A20;
    --text-color: white;
    --btn-bg: #2B3139;
    --btn-text: white;
    --btn-color: white;
    --hover-color: #FFB92D;
    --black-color: white;
    --lightblue-color: #1E2329;
    --extralightblue-color: #1e23297c;
    --white-color: white;
    --paggi-color: white;
    --faqbutn-color: #181A20;
    --earningToday-color: #1E2329;
    --drawer-right-color: #1E2329;
    --save-bttns: #EAECEF;
    --back-bttns: #1E2329;
    --save-bttns-color: black;
    --gray-bg: transparent;
    --how-work-modl: #353535;
    --gridient-color: linear-gradient(180deg, #151515 37%, #343434 100%);
--searchcolor: #181A20;

}

/* Dark mode styles */
.dark-mode {
    --background-color: white;
    --text-color: black;
    --btn-color: black;
    --btn-bg: #EAECEF;
    --btn-text: black;
    --black-color: #00000;
    --lightblue-color: #EAECEF;
    --white-color: white;
    --extralightblue-color: #1e23297c;
    --paggi-color: #EAECEF;
    --faqbutn-color: #EAECEF;
    --earningToday-color: #EAECEF;
    --drawer-right-color: #EAECEF;
    --save-bttns: #1E2329;
    --back-bttns: #EAECEF;
    --save-bttns-color: white;
    --gray-bg: #EAECEF;
    --how-work-modl: #EAECEF;
    --gridient-color: linear-gradient(180deg, #ffffff 20%, #343434 100%);
    --searchcolor: #cacaca8a;

}

.theme-btn {
    background-color: var(--btn-bg);
    color: var(--btn-color);
    margin: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: all 0.3s ease;
}

/* a {
    color: var(--text-color);
    transition: color 0.3s ease;

} */
.navtwo ul li a:hover {
    color: var(--hover-color);

}

#dropdown ul li a:hover {
    color: white;

}


.login-head ul {
    background-color: #EAECEF;
    transition: color 0.3s ease;
}

.login-head ul a {
    color: black;

    transition: color 0.3s ease;
}

.navtwo {
    border-color: 2px solid red !important;
}

.theme-btn {
    background-color: var(--btn-bg) !important;
    color: var(--btn-text) !important;
}

.theme-btn a {
    color: var(--btn-text) !important;
    border-color: var(--btn-border) !important;
}

.theme-btn a:hover {
    color: #FFB92D !important;
    /* Hover color remains same */
}


.table-main-sec {
    background-color: var(--btn-bg);
    color: var(--btn-color);
}


.table-main-se {
    border-radius: 14px !important;
}

.select-drop {
    background-color: var(--lightblue-color);
    color: var(--btn-text);
}

.animation-text,
.trending-text {
    color: var(--btn-text);

}

.tabs-list li {
    background-color: #1E2329;
    color: var(--btn-text);
}

.tabs-list li a {
    color: var(--white-color);
}


.quick-linkbtn {
    background-color: var(--lightblue-color);
}

.curvimge {
    background-color: var(--lightblue-color);
    color: var(--btn-text);

}

.pagination-sec button {
    background-color: var(--paggi-color);

}

.pagination-sec button:hover {
    background-color: #FFB92D;

}

.headings {
    color: var(--btn-text);
}

.faqbutn {
    background-color: var(--faqbutn-color);
    color: var(--btn-text);
}

.EarningToday-sec {
    background-color: var(--earningToday-color);
    color: var(--btn-color);
}


#drawer-right-1 {
    background-color: var(--drawer-right-color);
}

.save-bttns button {
    background-color: var(--save-bttns);
    color: var(--save-bttns-color);

}


.qucikmodl {
    background-color: var(--drawer-right-color);
    color: var(--btn-color);
}

.back-bttns button {
    background-color: var(--back-bttns);
    color: var(--btn-color);
    box-shadow: 0 2px 4px var(--btn-color);

}

.gray-bg {
    background-color: var(--gray-bg);
}


.how-work-modl {
    background-color: var(--how-work-modl);
}

#close-modal {
    color: var(--btn-color);
}

.modal-container {
    background-color: var(--how-work-modl);
    color: var(--btn-color);
}


html body .bg-gray-900 {
    background-color: transparent !important;
}

.gridient-color {
    background-image: var(--gridient-color);
}


.UserGuide {
    background-color: var(--lightblue-color);
    color: var(--btn-color);
}

.searchcolor{
    background-color: var(--searchcolor);
}