/*----------------------------------------------------

Version: 1.0
Date Created: January 10, 2022
Author: Invexa
Website: www.invexa.xyz
Licence: Invexa Licence

----------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Archivo:ital,wght@0,100..900;1,100..900&family=Bebas+Neue&family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
@import url(https://fonts.bunny.net/css?family=audiowide:400);

@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Fira+Code:wght@300..700&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Outfit:wght@100..900&family=Share+Tech+Mono&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Special+Gothic+Expanded+One&display=swap');

@font-face {
    font-family: GT-America-Mono-Medium-Trial;
    font-style: normal;
    font-weight: 400;
    src: url("../img/fonts/GT-Cinetype-Regular-Italic.woff2");
}

:root {
    --trans-dur: 0.25s;
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1.65);
    --delay: 0s;
    --sidebar-width: 220px;
    --sidebar-sm-width: 60px;
    --color-data-up: #17e105;
    --color-data-down: #dc3545;
    --color-dark: #212529;

    --preset-1: rgb(13, 110, 253);
    --pulseSize: 14px;
    --white: #fff;
    --dark: #000000;
    --pulseBlue: #0d6efd;
    --transparentBlue: rgba(13, 109, 253, 0);

    /*gsap highlights color*/
    --color-text: hsl(48, 100%, 52%);
    --color-text-highlight: hsl(115, 96%, 45%);
    --bg-color-highlight: hsl(45, 100%, 57%);

    /*main font*/
    --global-font: "Outfit", sans-serif;
    --secondary-font: "Archivo", serif !important;
    --font-mono: "DM Mono", monospace;

    --font-1: "Bebas Neue", sans-serif !important;

    background: none;
    --transparent: #ffffff00;

    /*global color*/
    --color-primary-50: #030712;
    --color-primary-100: #111827;
    /*--primary text, level text --*/
    --color-primary-200: #1f2937;
    --color-primary-300: #374151;
    /*--table text, thead text --*/
    --color-primary-400: #4b5563;
    --color-primary-500: #6b7280;
    /*--thead text, form-select text, info text --*/
    --color-primary-600: #9ca3af;
    --color-primary-700: #d1d5db;
    /*--meta --*/
    --color-primary-800: #e5e7eb;
    --color-primary-900: #f3f4f6;
    --color-primary-950: #f9fafb;
    --dl-reverse: #121212;
    /*--This function inverts the color of background section. --*/

    /*bs color*/
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bd-callout-code-color: #ab296a;

    /*surface color*/
    --color-shockingly-green: #0ae448;
    --color-just-black: #0e100f;
    --color-surface-white: #fffce1;
    --color-pink: #fec5fb;
    --color-shockingly-pink: #f100cb;
    --color-orangey: #ff8709;
    --color-lilac: #9d95ff;
    --color-lt-green: #abff84;
    --color-blue: #00bae2;
    --color-grey: gray;
    --color-surface75: #bbbaa6;
    --color-surface50: #7c7c6f;
    --color-surface25: #42433d;
    --gradient-macha: linear-gradient(114.41deg, #0ae448 20.74%, #abff84 65.5%);
    --gradient-orange-crush: linear-gradient(111.45deg, #ff8709 19.42%, #f7bdf8 73.08%);
    --gradient-lipstick: linear-gradient(165.72deg, #f7bdf8 21.15%, #cd237f 81.93%);
    --gradient-purple-haze: linear-gradient(153.58deg, #f7bdf8 32.25%, #2f3cc0 92.68%);
    --gradient-skyfall: linear-gradient(131.77deg, #0a157a 30.82%, #15bfe4 81.82%);
    --gradient-emerald-city: linear-gradient(166.9deg, #0ae448 53.19%, #0085d0 107.69%);
    --gradient-summer-fair: linear-gradient(144.02deg, #00bae2 4.56%, #f7bdf8 72.98%);
    --color-core-green: #dfffd1;
    --color-core-green-lt: #f3ffee;
    --color-core-gradient: radial-gradient(89.08% 84.62% at 16.54% 78.46%, #fbfefa 0%, #c9f6b4 39.58%, #abff84 77.6%, #2fee65 100%);
    --color-core-heading-gradient: linear-gradient(180deg, #d6ffc3, rgba(214, 255, 195, 0)), #f3ffee;
    --color-core-intro-gradient: linear-gradient(144.5deg, #e8ffdd 65.09%, #7dea7b 122.73%), linear-gradient(311.31deg, #7ef89e 36.08%, #e5ffd9 106.98%);
    --color-text-purple: #d2ceff;
    --color-text-purple-lt: #dfdcff;
    --color-text-gradient: radial-gradient(129.03% 100% at 120.97% 81.45%, #dfdcff 27.08%, #a69eff 100%);
    --color-svg-tangerine: #ffe3c7;
    --color-svg-tangerine-lt: #fff0e0;
    --color-svg-gradient: radial-gradient(70.77% 70.77% at 0% 70.77%, #ffd9b0 0%, #fd9f3b 80.73%, #ff8709 100%);
    --color-svg-heading-gradient: linear-gradient(180deg, #ffbd77, rgba(254, 197, 251, 0)), #ffe4c7;
    --color-ui-blue: #bef3fe;
    --color-ui-blue-lt: #e1faff;
    --color-ui-blue-codeblk: #f6feff;
    --color-ui-text-gradient: linear-gradient(168.89deg, #fec5fb -21.3%, #00bae2 89.88%);
    --color-ui-code-blocktext-gradient: linear-gradient(142.91deg, #cef6ff 18.75%, #a6efff 54.93%);
    --color-ui-gradient: radial-gradient(78.77% 78.77% at 71.71% 30.77%, #f0fcff 0%, #9bedff 67.21%, #98ecff 76.04%, #5be1ff 84.9%, #00bae2 94.79%);
    --color-ui-gradient-background: linear-gradient(137.1deg, #ecfcff 27.5%, #a6efff 94.09%);
    --color-ui-gradient-flip-background: radial-gradient(140% 190% at 117.54% 131.12%, #f0fcff 0%, #9bedff 25.52%, #98ecff 42.71%, #5be1ff 60.94%, #00bae2 94.79%);
    --color-scroll-pink: #ffd7fd;
    --color-scroll-pink-lt: #ffe9fe;
    --color-scroll-gradient: linear-gradient(317.42deg, #ffe9fe 10.4%, #ff96f9 83.03%);
    --club-gradient: linear-gradient(153deg, #d2ffe4 1.53%, #0ae448 74.91%, #00c237 96.25%);


    /*alert color*/
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --purple: 102, 16, 242;
    --pink: 214, 51, 132;
    --blue: 13, 110, 253;

    /*theme color*/
    --brand-color: #f7a600;
    --brand-hover-color: #ffb11a;
    --brand-color-secondary: #ecffe3;
    --brand-color-emphasis: #0E1603;
    --brand-hover-bg: #f0f2f4;
    --icon-color: #0E1603;

    --card-color: #fefdf9;
    /*--all card --*/
    --card-hover-bg: #f0f2f4;
    --border-color: #3d3d3d1d;
    /*--card border color --*/
    --color-bg: #f7f7f7;
    /*--template background --*/
    --blur-color: #ffffff6f;
    /*--blur color --*/
    --tab-bg-color: #f3f4f6;
    /*--all tab background color --*/
    --color-input-field: #f1f3f5;
    /*--search, input box --*/

    /*color preset*/
    --prest-1: #dc3545;
    --prest-1-active: #c92939;
    --card-custom: #fff;
    --affiliate-card: linear-gradient(90deg, #ffffff 0%, #f7a50013 100%);
    --box-bg-color: #ffffff7d;
    --affi-btn: #f7a600;
    --affi-btn-color: #fff;
    --card-row: #fff;
    --vip-card-bg: #fff;
    --vip-card-text: #f7a600;
    --light-bg-bg: #fff;
    --affiliated-bg-image: none;
    --style-1: linear-gradient(90deg, #33b88c 99.11%, #96fad9 31.51%, #3ba380 65.84%, #33b88c 99.79%);
    --style-2: linear-gradient(90deg, #e5b08a 99.11%, #ffe1cc 33.34%, #ce8050 65.51%, #e5b08a 99.79%);
    --style-3: linear-gradient(90deg, #96b8da 99.11%, #e4f0fc 33.34%, #6e98c1 66.03%, #95b8db 99.79%);

    --border: #000;
    --svg-col: #f7a600 !important;

    --refrel-bg: #f3f3f3;
    /* --affi-card: #f7a600;
    --card-custom: #fff;
    --affiliate-card: #f9f9f9;
    --box-bg-color: #ffffff7d;
    --affi-btn: #f7a600;
    --affi-btn-color: #fff; */
}

body.theme-dark,
html.theme-dark body {
    /*gsap highlights color*/
    --color-text: hsl(56, 100%, 57%);
    --color-text-highlight: hsl(233, 100%, 53%);

    /*global color*/
    --color-primary-50: #f9fafb;
    --color-primary-100: #f3f4f6;
    /*--primary text, level text --*/
    --color-primary-200: #e5e7eb;
    --color-primary-300: #d1d5db;
    /*--table text, thead text --*/
    --color-primary-400: #9ca3af;
    --color-primary-500: #6b7280;
    /*--thead text, form-select text, info text --*/
    --color-primary-600: #4b5563;
    --color-primary-700: #374151;
    /*--meta --*/
    --color-primary-800: #1f2937;
    --color-primary-900: #111827;
    --color-primary-950: #030712;
    --dl-reverse: #ffffff;
    /*--This function inverts the color of background section. --*/

    /*bs color*/
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: inherit;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg: #664d03;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;

    /*theme color*/
    /* --brand-color: #0ae448; */
    --bs-btn-hover-bg: #ffb11a;
    --brand-color: #f7a600;
    --brand-color-secondary: #0ae44813;
    --brand-hover-bg: hsla(0, 0%, 100%, 0.020);
    --icon-color: #f7a600;

    --card-color: #0e100f;
    /*--all card --*/
    --card-hover-bg: #171717;
    --border-color: #ffffff0c;
    /*--card border color --*/
    --color-bg: #181a20;
    /*--template background --*/
    --blur-color: #00000000;
    /*--blur color --*/
    --tab-bg-color: #030507;
    /*--all tab background color --*/
    --color-input-field: #1b1b1b;
    /*--search, input box --*/
    --card-custom: radial-gradient(124.02% 143.87% at -3.44% 0, #322b23 0, #16171a 36.38%);
    --affiliate-card: #0e100f;
    --box-bg-color: #00000000;
    --affi-btn: #00000000;
    --affi-btn-color: #f7a600;
    --card-row: #171717;
    --vip-card-bg: #2c2217;
    --vip-card-text: transparent;
    --light-bg-bg: #0e100f;
    --affiliated-bg-image: url('../img/bg/weekly_bg.avif');
    --style-1: linear-gradient(90deg, #33b88c .11%, #96fad9 31.51%, #3ba380 65.84%, #33b88c 99.79%);
    --style-2: linear-gradient(90deg, #e5b08a .11%, #ffe1cc 33.34%, #ce8050 65.51%, #e5b08a 99.79%);
    --style-3: linear-gradient(90deg, #96b8da .11%, #e4f0fc 33.34%, #6e98c1 66.03%, #95b8db 99.79%);

    --border: #f7a600;
    --svg-col: #fff !important;

    --refrel-bg: #16171a;
    /* --affi-card: transparent; */
    /* --card-custom: radial-gradient(124.02% 143.87% at -3.44% 0, #322b23 0, #16171a 36.38%);
    --affiliate-card: #0e100f;
    --box-bg-color: #00000000;
    --affi-btn: #00000000;
    --affi-btn-color: #f7a600; */
}


.preset-1 .menu-button-text,
.icon-wrap {
    color: var(--prest-1) !important;
}


.theme-dark body {
    background: var(--color-bg);
}

.theme-light body {
    background: var(--color-bg);
}

.theme-dark,
.theme-light h1,
.theme-dark,
.theme-light h2,
.theme-dark,
.theme-light h3,
.theme-dark,
.theme-light h4,
.theme-dark,
.theme-light h5,
.theme-dark,
.theme-light h6 {
    color: var(--color-primary-100);
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 50px;
}

.grayscale-100 {
    color: var(--color-primary-100) !important;
}

.grayscale-1000 {
    background: linear-gradient(90deg, rgb(255, 153, 0) 0%, rgb(255, 106, 89) 51.93%) text;
    -webkit-text-fill-color: transparent;
}

.grayscale-200 {
    color: var(--color-primary-200) !important;
}

.grayscale-300 {
    color: var(--color-primary-300) !important;
}

.grayscale-400 {
    color: var(--color-primary-400) !important;
}

.grayscale-500 {
    color: var(--color-primary-500) !important;
}

.grayscale-600 {
    color: var(--color-primary-600) !important;
}

/*global fonts*/
body {
    overscroll-behavior: none;
    overflow-x: hidden;
    font-family: var(--global-font) !important;
    font-size: 15px;
    text-decoration: none;
    line-height: 26px;
}

h1,
.h1 {
    font-family: var(--global-font) !important;
    font-size: 3.75rem;
    /* 3.75rem (60px) */
    line-height: 1.2;
    /* 1 (60px) */
    font-weight: 800;
}

h2,
.h2 {
    font-family: var(--global-font) !important;
    font-size: 3rem;
    /* 3rem (48px) */
    line-height: 1.2;
    /* 1 (48px) */
    font-weight: 800;
}

h3,
.heading-3,
.h3 {
    font-family: var(--global-font) !important;
    font-size: 2.25rem;
    /* 2.25rem (36px) */
    line-height: calc(2.5 / 2.25);
    /* calc(2.5 / 2.25) (40px) */
    font-weight: 800;
}

h4,
.heading-4,
.h4 {
    font-family: var(--global-font) !important;
    font-size: 1.875rem;
    /* 1.875rem (30px) */
    line-height: calc(2.25 / 1.875);
    /* calc(2.25 / 1.875) (36px) */
    font-weight: 700;
}

h5,
.heading-5,
.h5 {
    font-family: var(--global-font) !important;
    font-size: 1.25rem !important;
    /* 1.25rem (20px) */
    line-height: calc(1.75 / 1.25);
    /* calc(1.75 / 1.25) (28px) */
    font-weight: 700;
}

h6,
.heading-6,
.h6 {
    font-family: var(--global-font) !important;
    font-size: 1rem;
    /* 1rem (16px) */
    line-height: calc(1.5 / 1);
    /* calc(1.5 / 1) (23px) */
    font-weight: 600;
}

.text-sm {
    font-size: 0.875rem !important;
    /* 0.875rem (14px) */
    line-height: calc(1.25 / 0.875);
    /* calc(1.25 / 0.875) (20px) */
    font-weight: 500;
}

.text-xs {
    font-size: 0.75rem !important;
    /* 0.75rem (12px) */
    line-height: calc(1 / 0.75);
    /* calc(1 / 0.75) (12px) */
}

.meta {
    font-family: var(--global-font);
    font-size: 0.8125rem;
    /* 0.8125rem (13px) */
    text-transform: uppercase !important;
    letter-spacing: 1px;
    line-height: calc(1 / 0.75);
    /* calc(1 / 0.75) (12px) */
    font-weight: 500;
}

.meta-2 {
    font-family: var(--global-font);
    font-size: 0.8125rem;
    text-transform: capitalize !important;
    letter-spacing: 1px;
    line-height: calc(1 / 0.75);
    font-weight: 600;
}

p {
    /* font-family: var(--secondary-font) !important; */
    color: var(--color-primary-300) !important;
    font-size: 0.938rem;
    /* 0.938rem (15px) */
    line-height: calc(1.5 / 1);
    /* calc(1.5 / 1) (23px) */
}

a {
    text-decoration: none !important;
}


.current-promotions #subscribed {
    font-weight: 600;
    font-size: 30px;
    line-height: 120%;
    text-align: center;
    background: linear-gradient(90deg, rgb(255, 153, 0) 0%, rgb(255, 106, 89) 51.93%) text;
    -webkit-text-fill-color: transparent;
}

.current-promotions #subscribeForm input {
    background-color: var(--card-color);
    border: 2px solid var(--brand-color);
    border-radius: 2px;
    box-shadow: 4px 5px 5px var(--color-dark);
    padding: 5px 10px;
    width: 80%;
    color: #ffffff;
}

/* responsive fonts */
@media screen and (max-width: 675px) {
    .current-promotions #subscribeForm input {
        max-width: 220px;
    }

    h1,
    .h1 {
        font-family: var(--global-font);
        font-size: 2.5rem;
        /* 2.5rem (60px) */
        line-height: 1.3;
        /* 1.3 (60px) */
        font-weight: 800;
    }

    h2,
    .h2 {
        font-family: var(--global-font);
        font-size: 2rem !important;
        /* 2rem (32px) */
        line-height: 1.12;
        /* 1 (48px) */
        font-weight: 800;
    }

    h3,
    .h3 {
        font-family: var(--global-font);
        font-size: 2.25rem !important;
        /* 2.25rem (36px) */
        line-height: calc(2.5 / 2.25);
        /* calc(2.5 / 2.25) (40px) */
        font-weight: 800;
    }

    h4,
    .h4 {
        font-family: var(--global-font);
        font-size: 1.875rem !important;
        /* 1.875rem (30px) */
        line-height: calc(2.25 / 1.875) !important;
        /* calc(2.25 / 1.875) (36px) */
        font-weight: 800 !important;
    }

    h4.grayscale-1000 {
        font-size: 1.375rem !important
    }

    h5,
    .h5 {
        font-family: var(--global-font);
        font-size: 0.938rem !important;
        /* 0.938rem (15px) */
        line-height: calc(1.5 / 1);
        /* calc(1.5 / 1) (23px) */
        font-weight: 600 !important;
    }

    h6,
    .h6 {
        font-family: var(--global-font);
        font-size: 0.8125rem !important;
        /* 0.8125rem (13px) */
        line-height: calc(1.25 / 0.875);
        /* calc(1.25 / 0.875) (20px) */
        font-weight: 600 !important;
    }

    .special-advantage h6 {
        font-size: 1rem !important;
    }

    .text-sm {
        font-size: 0.8125rem !important;
        /* 0.8125rem (13px) */
        line-height: calc(1.25 / 0.875);
        /* calc(1.25 / 0.875) (20px) */
        font-weight: 600 !important;
    }

    .text-truncate.h6 {
        max-width: 106px;
    }

    .text-truncate.h5 {
        max-width: 128px;
    }

    .text-truncate.h4 {
        max-width: 200px;
    }

    .text-truncate.tt-1 {
        max-width: 180px;
    }

    .text-truncate.tt-2 {
        max-width: 120px !important;
    }

    .text-truncate.tt-3 {
        max-width: 70px;
    }

    .auth-buttons {
        margin-right: 10px
    }

    .auth-buttons .btn-primary.register {
        display: none !important;
    }
}

.nav-link {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 15px;
    color: var(--color-primary-300);
    font-weight: 600;
    border: none !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-link svg {
    width: 16px;
    height: 16px;
}

.text-bg-dark {
    color: var(--color-primary-100) !important;
    background-color: var(--card-color) !important;
}

/* responsive */
@media screen and (max-width: 575px) {


    .bs5-hero h1 {
        font-size: 30px !important;
        line-height: 40px !important;
    }

    .fs-5 {
        font-size: 16px !important;
        line-height: 32px;
    }

    .fs-6 {
        font-size: 15px !important;
        line-height: 24px;
    }

}

.text-primary {
    --bs-text-opacity: 1;
    color: var(--brand-color) !important;
}

/* Indicator */
.pulse {
    width: var(--pulseSize);
    height: var(--pulseSize);
    border-radius: 50%;
    background: var(--pulseBlue);
    box-shadow: 0 0 0 var(--pulseBlue);
    animation: pulsing 2s infinite;
    transition: all 0.2s;
    cursor: pointer;
}

.pulse:hover {
    --blue: rgba(209, 167, 160, 0.65);
    --transparentBlue: rgba(209, 167, 160, 0);
}

@keyframes pulsing {
    from {
        box-shadow: 0 0 0 0 var(--pulseBlue);
    }

    70% {
        box-shadow: 0 0 0 var(--pulseSize) var(--transparentBlue);
    }

    to {
        box-shadow: 0 0 0 0 var(--transparentBlue);
    }
}

.bg-1 {
    border: 0px;
    background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%) !important;
}

/* logo size */
.brand-logo .logo-lg img {
    height: 68px !important;
}

.brand-logo .logo-md img {
    height: 48px !important;
}

.brand-logo .logo-sm img {
    height: 24px !important;
}

.brand-logo.snork img {
    height: 42px !important;
}

.theme-light .brand-logo .light {
    display: none;
}

.theme-dark .brand-logo .dark {
    display: none;
}

.circle {
    border-radius: 50px !important;
}

.circle img {
    border: 2px solid var(--color-primary-800);
    border-radius: 50% !important;
}

.redius {
    border-radius: 10px !important;
}

@media screen and (max-width: 1160px) {
    .hidesmscreen {
        display: none !important;
    }

    .brand-logo img {
        /*height: 26px !important;*/
    }
}

@media screen and (max-width: 800px) {
    .disable-sm-screen {
        display: none !important;
    }

    .brand-logo img {
        /*height: 32px !important;*/
    }
}

.dark-logo {
    color: var(--color-primary-100);
    transition: all 1s ease-out;
}

.light-logo {
    color: var(--color-primary-100);
    transition: all 1s ease-out;
}

.theme-dark .light-logo {
    display: none;
}

.theme-light .dark-logo {
    display: none;
}

.sr-only {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

input:checked~.toggle span {
    left: 2em;
    background-color: #adb5bd;
}

input:checked~.toggle {
    background-color: #ffffff;
}

.form-switch .form-check-input {
    padding: 10px 20px;
}

.user-settings {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.user-settings svg {
    width: 18px;
    flex-shrink: 0;
}

.social a {
    padding: 4px 6px;
    border-radius: 6px;
    background: var(--color-bg);
}

.social a:hover {
    background: var(--color-primary-800);
    transition: all 0.3s ease;
}

.anim {
    animation: bottom 0.8s both;
}

.animation-element {
    opacity: 0;
}

.animation-element.in-view {
    opacity: 1;
    transition: 1s ease-in-out;
    transition-delay: 0.2s;
}

.object-circle img {
    position: absolute;
    top: 40%;
    left: 10%;
}

.object-circle svg {
    position: absolute;
    top: 44%;
    left: 12%;
    bottom: 0;
}

.infinite-rotate {
    animation-name: rotate;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border-radius: 50%;
}

@keyframes rotate {
    from {
        transform: rotate(-360deg);
    }

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

.star-z {
    z-index: -1;
}


/*--- input group ---*/
.input-group-text {
    color: var(--color-primary-300);
    text-align: center;
    font-size: 13px;
    white-space: nowrap;
    background-color: var(--color-input-field);
    border: 1px solid var(--color-input-field);
    border-radius: 6px;
}

.form-control {
    color: var(--color-primary-100);
    border: 1px solid var(--color-input-field);
    border-radius: 8px;
    background: var(--color-input-field);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn {
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
}

.btn-primary {
    /* global button */
    --bs-btn-color: var(--brand-color-emphasis);
    --bs-btn-bg: var(--brand-color);
    --bs-btn-border-color: var(--brand-color);
    --bs-btn-hover-color: var(--brand-color-emphasis);
    --bs-btn-hover-bg: var(--brand-hover-color);
    --bs-btn-hover-border-color: var(--brand-hover-color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--brand-color-emphasis);
    --bs-btn-active-bg: var(--brand-hover-color);
    --bs-btn-active-border-color: var(--brand-hover-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-primary-950);
    --bs-btn-disabled-bg: #fcd535;
    --bs-btn-disabled-border-color: #fcd535;
}

.btn-lg {
    font-size: 16px;
    font-weight: 500;
}

.menu-links .active {
    color: var(--theme-color);
}


/*--- Mobile menu ---*/
#mobile_menu {
    --width: 250px;
    display: none;
}

#mobile_menu.meme-nav {
    --width: 250px;
    border-radius: 6px;
    border: 2px solid var(--color-primary-900);
    padding: 4px 8px;
    display: block !important;
    background: var(--color-input-field);
}

#mobile_menu.meme-nav svg {
    color: var(--color-primary-100);
    transition: all 0.3s;
}

#mobile_menu.meme-nav svg:hover {
    color: var(--brand-color);
}

#mobile_menu li#close-icon {
    display: flex;
    justify-content: end;
    padding-top: 20px;
}

#mobile_menu li#close-icon svg {
    cursor: pointer;
}

.card-bs {
    overflow: hidden;
    border-radius: 6px;
    background: var(--card-color);
    transition: all 0.5s ease;
}

.card-bs-tabs {
    color: var(--color-primary-100);
    border-radius: 6px;
    background-color: var(--tab-bg-color);
    transition: all 0.5s;
}

.card-active {
    background: var(--card-hover-bg) !important;
    transition: all 0.5s ease;
}

.card-bs-tabs .form-select {
    color: var(--color-primary-500) !important;
    background-color: var(--tab-bg-color) !important;
}

/*---- Scrollbar ----*/
::-webkit-scrollbar {
    display: visible;
    background: transparent;
    width: 4px;
    height: 6px;
    border-radius: 100px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--brand-color);
    border: solid rgba(0, 0, 0, 0) 2px;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-color);
}

/*--- Nav ---*/
.nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--brand-color);
    --bs-nav-link-hover-color: var(--brand-hover-color);
    --bs-nav-link-disabled-color: var(--bs-secondary-color);
    --bs-nav-underline-link-active-color: var(--bs-emphasis-color);
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-link {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 15px;
    color: var(--color-primary-300);
    font-weight: 600;
    border: none !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-underline {
    --bs-nav-underline-gap: 1rem;
    --bs-nav-underline-border-width: 0.125rem;
    --bs-nav-underline-link-active-color: var(--brand-color);
    gap: var(--bs-nav-underline-gap);
}

.transparent-menu-bg {
    padding-left: 10px;
    padding-right: 4px;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(50px);
    z-index: 99;
}

.theme-light .transparent-menu-bg {
    padding-left: 10px;
    padding-right: 4px;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    background: rgb(255, 255, 255);
    backdrop-filter: blur(50px);
    z-index: 99;
}

.nav:hover,
.nav-link:hover,
.nav-link:active,
.nav-link:focus {
    color: var(--brand-color) !important;
}

.nav-link svg {
    width: 16px;
    height: 16px;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--brand-color-emphasis) !important;
    background: var(--gradient-macha);
    border: none !important;
}

.nav-link.lg {
    padding: 2px 14px;
    border-radius: 6px !important;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #adb5bd;
}

.navbar-toggler {
    color: var(--color-primary-400);
}

.input-group> :not(:first-child):not(.dropdown-menu):not(.form-control):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: calc(var(--bs-border-width) * -1);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}


.theme-dark .card-4 {
    background: #000000;
}

.text-lg {
    color: var(--color-primary-100);
    font-size: 180px !important;
    font-weight: 700 !important;
    line-height: 13rem !important;
}

.text-md {
    font-size: 60px !important;
    line-height: 70px !important;
}

.text-xl {
    color: var(--color-primary-100);
    font-size: 80px !important;
    font-weight: 700;
    line-height: 90px !important;
}

/*card border*/
.border-dark {
    border-color: var(--color-primary-100) !important;
}

.border-top {
    border-color: var(--border-color) !important;
}

/*card hover style*/
.card {
    overflow: hidden;
    padding: 10px;
    border-radius: 20px;
    border: var(--bs-card-border-width) solid var(--border-color);
    background: var(--card-color);
    transition: all 0.4s ease;
}

.card-right-blog {
    overflow: hidden;
    border: var(--bs-card-border-width) solid var(--border-color);
    background: var(--card-color);
    transition: all 0.4s ease;
}

/*style 1*/
.animation-1 {
    transform: translateY(2px);
    transition: 0.3s;
}

.animation-1:hover {
    transform: translateY(-2px);
    /*card hover effect*/
}

/*style 2*/
.animation-2 {
    transform: perspective(800px) rotateY(calc(1deg * var(--_i, -1)));
    outline-offset: 0.1em;
    transition: 0.3s;
}

.animation-2:hover {
    transform: translate3d(0, 2px, 0);
    /*card hover effect*/
}

/*style 3*/
.card-transform-x {
    transform: rotate(-3deg);
}

.card-transform-x:hover {
    transform: perspective(500px) rotateY(calc(3deg * var(--_i, -1)));
    outline-offset: 0.1em;
    transition: 0.3s;
}

.card-transform-y {
    transform: rotate(3deg);
}

.card-transform-xy {
    transform: rotate(-3deg);
}

/*countdown*/
.countdown {
    color: var(--color-primary-500);
    /*time/date font color*/
    font-size: 14px;
    font-weight: 600;
}

.disable {
    color: var(--color-primary-600) !important;
    /*disable text with color*/
    cursor: not-allowed;
    /*disable cursor*/
}

.disabled-hover {
    transform: none !important;
    /*disable hover animation*/
}

/*media size (svg)*/
.svg-s1 svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/*image/media contol*/
.avater {
    width: 48px;
    height: 48px;
    border-radius: 50px;
    border: 2px solid var(--color-primary-100);
}

.avater.xl {
    width: 64px;
    height: 64px;
}

/*resonsive*/
@media only screen and (max-width:668px) {

    /*small devices (phones, 600px and down)*/
    .avater.xl {
        width: 48px;
        height: 48px;
        border-radius: 50px;
        border: 2px solid #fff5f5;
    }
}

/*placeholder*/
.placeholder {
    font-size: 12px !important;
    display: inline-block;
    min-height: 1em;
    vertical-align: middle;
    cursor: wait;
    background-color: currentcolor;
    opacity: 0.5;
    border-radius: 6px;
}


/*resonsive*/
@media only screen and (max-width:668px) {


    .image-wrapper-object {
        width: 180px;
        margin-top: -10px;
    }
}

.card-bg {
    border: none !important;
    background: var(--card-color) !important;
}


.card-border {
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.card.card-border {
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

/*resonsive*/
@media only screen and (max-width:750px) {


    .text-lg {
        font-size: 64px !important;
        line-height: 90px !important;
    }

    .text-md {
        font-size: 60px !important;
        font-weight: 900;
        line-height: 60px !important;
    }

    .text-xl {
        font-size: 60px !important;
        line-height: 60px !important;
    }

    .big-text {
        font-size: 70px !important;
        line-height: 60px !important;
    }

    .image-wrapper-hero {
        width: 100%;
        margin-top: -120px;
        z-index: 1;
    }
}

/*-- grid control --*/
.grid {
    display: grid !important;
}

.grid-col-2 {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}

.grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.grid-col-4 {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}

.grid-col-5 {
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
}

.grid-col-6 {
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px;
}

.grid-col-7 {
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 10px;
}

.grid-col-8 {
    grid-template-columns: repeat(8, 1fr);
    grid-gap: 10px;
}

/*-- responsive --*/
@media screen and (max-width: 900px) {
    .grid-col-3 {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 10px;
    }

    .grid-sm {
        grid-template-columns: repeat(1, 1fr) !important;
        grid-gap: 10px;
    }

    .grid-col-4,
    .grid-col-5,
    .grid-col-6,
    .grid-col-7,
    .grid-col-8 {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
    }

    .nft-grid,
    .grid-col-2 {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .drops-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media screen and (max-width: 1400px) {
    .nft-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .drops-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*-card-*/
.nft-card {
    position: relative;
    background: var(--card-color);
    padding: 6px;
    border-radius: 9px;
    transition: all 0.5s ease;
    cursor: pointer;
}

/*-card hover-*/
.nft-card:hover {
    background: var(--card-hover-bg);
    /* background color */
    z-index: 99;
}

.nft-card:hover>.nft-data {
    background: var(--card-color);
    /* background color */
}

.nft-card:hover .bid-btn {
    transform: translate(-50%, -50%) scale(1);
}

.link-secondary {
    color: var(--color-primary-400);
    transition: all 0.5s ease;
}

.link-secondary:hover {
    color: var(--color-primary-100) !important;
    transition: all 0.5s ease;
}

.nft-card-head {
    /* product img */
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.product-img {
    object-fit: cover;
    transition: all 0.5s ease;
}

.nft-card:hover .product-img {
    transform: scale(1.03);
    opacity: 0.6;
}


/*-- responsive --*/
@media screen and (max-width: 900px) {
    .nft-card:hover .root-btns {
        bottom: 44%;
    }

    .nft-card-name.classic {
        position: relative;
        bottom: 42px;
        left: 0px;
        right: 0px;
    }
}

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

.wrapper-flex.mb {
    margin-bottom: 15px;
}

.wrapper-flex .last-bid {
    color: var(--color-data-up);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.wrapper-flex .react {
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
    transition: all 0.25s ease;
}

.wrapper-flex .react:hover {
    color: var(--color-data-up);
}

.wrapper-flex .react ion-icon {
    --ionicon-stroke-width: 50px;
    font-size: 14px;
    margin-right: 3px;
}

.wrapper-flex .react span {
    font-size: 12px;
}

.bid-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bid-info .img-box {
    display: flex;
    padding-left: 10px;
}

.bid-info .img-box img {
    width: 28px;
    border-radius: 50%;
    margin-right: 0;
    margin-left: -10px;
    border: 2px solid var(--color-primary-800);
}

.img-box.lg img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-right: 0;
    margin-left: -30px;
    border: 4px solid var(--color-primary-800) !important;
    transition: all 0.25s ease;
}

.img-box.lg img:hover {
    border-radius: 50%;
    margin-left: -20px;
}

.img-box.md img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin-right: 0;
    margin-left: -25px;
    border: 4px solid var(--color-primary-800) !important;
    transition: all 0.25s ease;
}

.img-box.md img:hover {
    border-radius: 50%;
    margin-left: -20px;
}

.bid-info .img-box.sm img {
    width: 24px;
    border-radius: 50%;
    border: 2px solid var(--color-primary-800);
}

.bid-info a {
    color: var(--color-primary-500);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.25s ease;
}

.bid-info a:hover {
    color: var(--brand-color);
}



/* number of copy */
.input-number {
    display: flex;
    position: relative;
    width: auto;
    height: 40px;
    background-color: transparent;
    overflow: hidden;
    border-radius: 20px;
    margin: 2px;
}

.input-number input {
    position: absolute;
    left: 25%;
    padding-left: 10px;
    display: inline-block;
    background-color: var(--card-color);
    height: 100%;
    width: 44%;
    border: 1px solid var(--card-color);
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: var(--brand-color);
    letter-spacing: -1px;
}

.input-number button {
    display: inline-block;
    width: 50px;
    height: 100%;
    background-color: transparent;
    border: none;
    color: var(--color-primary-400);
    font-size: 20px;
    cursor: pointer;
    background-color: var(--color-input-field);
    transition: background-color 0.2s ease;
}

.input-number button:nth-of-type(1) {
    padding-right: 20px;
}

.input-number button:nth-of-type(2) {
    padding-left: 20px;
}

.input-number button:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.verticle-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.properties-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

/* responsive */
@media screen and (max-width: 1000px) {
    .properties-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
    }

    .user-wrapper img {
        width: auto !important;
    }
}


@media screen and (max-width: 1400px) {

    .wrapper-4w2m {
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
    }

}


/* responsive */
@media screen and (max-width: 1000px) {
    .slider-wrapper {
        display: block;
        height: auto;
    }
}

.hero-wrap {
    position: relative;
    overflow: hidden;
    height: 320px;
    background: var(--color-input-field);
}

.hero-wrap img {
    width: 100%;
    height: auto;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 0.5s ease;
}

.hero-wrap img:hover {
    transform: scale(1.01);
}

/* carousel style*/
.carousel-wrap {
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--border-color);
}

.carousel-indicators [data-bs-target] {
    background-color: var(--color-primary-500);
    border: 0;
    border-radius: 10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: 0.5;
    transition: opacity 0.6sease;
}

.carousel-indicators .active {
    opacity: 1;
}

.carousel-indicators {
    padding: 0;
    margin-right: 15%;
    margin-bottom: 0;
    margin-left: 15%;
}

.carousel-thumbnails img {
    width: 100px;
    height: auto;
    cursor: pointer;
}

.carousel-thumbnails.lg img {
    width: 188px;
    height: auto;
    cursor: pointer;
}

.carousel-thumbnails .active {
    border: 1px solid var(--color-primary-50);
    opacity: 1;
}

.img-thumbnail {
    background-color: transparent;
    border: var(--bs-border-width) solid var(--color-primary-700);
    border-radius: none;
    max-width: 100%;
    height: auto;
    transition: opacity 0.6sease;
}

.img-thumbnail:not(.active) {
    filter: grayscale(100%);

}

.img-thumbnail:hover {
    filter: grayscale(0);
}

.product-images {
    overflow: hidden;
    width: 100%;
    height: auto;
    cursor: pointer;
}

.carousel-prev,
.carousel-next {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--brand-color);
    background: var(--brand-color-secondary);
}

.ml-auto {
    margin-left: auto !important;
}

.menu-xl {
    min-width: 24rem;
}

.menu-xxl {
    min-width: 40rem;
}



.fa {
    font-size: 1rem !important;
    color: var(--color-primary-400);
}

.front-input {
    /* max-width: 430px; */
    max-width: 510px;
    position: relative;
    padding: 6px;
    border: 1px solid var(--brand-color);
    border-radius: 8px;
}

.form-control {
    color: var(--color-primary-100);
    border: 1px solid var(--color-input-field);
    border-radius: 8px;
    background: var(--color-input-field);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    color: var(--color-primary-100);
    border-color: var(--border-color) !important;
    background: var(--color-input-field);
    box-shadow: none !important;
}

/*--- Modal ---*/
.modal .modal-content {
    border: none;
    background-color: var(--color-bg);
}

.modal-lg {
    width: 98vw;
    max-width: none;
    height: 54vw;
    margin: 0;
}

.modal-h {
    max-height: 500px;
    overflow-y: scroll;
}

/*-- responsive --*/
@media (max-width: 767px) {
    .modal-lg {
        width: 100vw !important;
        max-width: none;
        height: 100% !important;
        margin: 0;
    }

    .modal-h {
        max-height: 300px;
        overflow-y: scroll;
    }
}

.modal-header .btn-close {
    padding: 14px;
    border-radius: 50%;
    background: var(--tab-bg-color);
    color: var(--brand-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-top {
    margin-top: 125px;
}

.modal-header {
    display: flex;
    align-items: center;
    padding: 20px 10px;
    color: var(--color-primary-100);
    border-bottom: 1px solid var(--border-color);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    /* background: var(--brand-color-secondary); */
}

.text-bg-bs {
    color: var(--color-primary-500) !important;
    background-color: var(--card-color) !important;
}

.text-bg-bs2 {
    background-color: var(--card-color) !important;
}



.heading {
    position: absolute;
    top: 50vh;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}

#content {
    overflow: visible;
    width: 100%;
}

/* SIDEBAR NAV
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*-- gsap sidebar menu --*/
.nav-row-right {
    grid-column-gap: .625rem;
    grid-row-gap: .625rem;
    pointer-events: auto;
    justify-content: flex-end;
    align-items: center;
    display: flex;
}

.cloneable {
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    --menu-padding: 2em;
}

.osmo.aside {
    z-index: 100;
    width: 100%;
    height: 100vh;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: fixed;
    inset: 0%;
}

.overlay {
    z-index: 0;
    cursor: pointer;
    background-color: #13131366;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
}

.menu {
    padding-bottom: var(--menu-padding);
    grid-column-gap: 5em;
    grid-row-gap: 5em;
    padding-top: calc(3 * var(--menu-padding));
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 35em;
    height: 100%;
    margin-left: auto;
    position: relative;
    overflow: auto;
}

.menu-bg {
    z-index: 0;
    position: absolute;
    inset: 0%;
}

.menu-inner {
    z-index: 1;
    grid-column-gap: 5em;
    grid-row-gap: 5em;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
    display: flex;
    position: relative;
    overflow: auto;
}

/* menu background color */
.bg-panel {
    z-index: 0;
    background-color: var(--color-primary-900);
    border-top-left-radius: 1.25em;
    border-bottom-left-radius: 1.25em;
    position: absolute;
    inset: 0%;
}

.bg-panel.first {
    background-color: var(--brand-color);
}

.menu-list {
    flex-flow: column;
    width: 100%;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
}

.menu-list-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.menu-list .menu-list-item.auth {
    margin: 10px 30px;
}

.menu-list .menu-list-item.auth .btn {
    width: 100%;
}

.menu-link-heading {
    text-shadow: 0px 1em 0px var(--color-primary-900);
}

.menu-link {
    padding-top: .75em;
    padding-bottom: .75em;
    padding-left: var(--menu-padding);
    grid-column-gap: .75em;
    grid-row-gap: .75em;
    width: 100%;
    text-decoration: none;
    display: flex;
}

.menu-link-heading {
    z-index: 1;
    text-transform: uppercase;
    font-size: 32px;
    font-weight: 700;
    /* line-height: .75; */
    transition: transform .55s cubic-bezier(.65, .05, 0, 1);
    position: relative;
    color: var(--color-primary-300);
    font-family: var(--global-fonts);
}

.eyebrow {
    z-index: 1;
    color: var(--brand-color) !important;
    text-transform: uppercase;
    font-weight: 400;
    position: relative;
}

.menu-link-bg {
    z-index: 0;
    background-color: var(--color-primary-100);
    transform-origin: 50% 100%;
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.65, .05, 0, 1);
    position: absolute;
    inset: 0%;
    transform: scale3d(1, 0, 1);
}

.menu-details {
    padding-left: var(--menu-padding);
    grid-column-gap: 1.25em;
    grid-row-gap: 1.25em;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
}

.socials-row {
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
    flex-flow: row;
    display: flex;
}

.menu-button {
    grid-column-gap: .625em;
    grid-row-gap: .625em;
    background-color: #0000;
    justify-content: flex-end;
    align-items: center;
    margin: -1em;
    padding: 1em;
    display: flex;
    border: none;
}

.menu-button-icon {
    width: 1em;
    height: 1em;
}

.menu-button-text {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-end;
    height: 1.325em;
    display: flex;
    overflow: hidden;
    color: var(--brand-color);
}

.icon-wrap {
    color: var(--brand-color) !important;
    transition: transform .4s cubic-bezier(.65, .05, 0, 1);
}

@media (hover:hover) {

    /* Menu toggle button*/
    .menu-button:hover .icon-wrap {
        transform: rotate(90deg);
    }

    /* Menu Large Links */
    .menu-link:hover .menu-link-heading {
        transform: translate(0px, -1em);
        transition-delay: 0.1s;
    }

    .menu-link:hover .menu-link-bg {
        transform: scale(1, 1)
    }

}

.osmo-icon-svg {
    width: 8em;
}

@media screen and (max-width: 767px) {
    .cloneable {
        --menu-padding: 1em;
    }

    .nav-logo-row {
        grid-column-gap: 2.5em;
        grid-row-gap: 2.5em;
        width: auto;
    }

    .nav-row-right {
        grid-column-gap: 0rem;
        grid-row-gap: 0rem;
    }

    .menu {
        padding-top: calc(6 * var(--menu-padding));
        width: 100%;
    }

    .bg-panel {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .menu-list-item {
        height: 2.5em;
    }

    .socials-row {
        grid-column-gap: 1em;
        grid-row-gap: 1em;
    }
}

@media screen and (max-width: 479px) {
    .menu {
        padding-top: calc(7 * var(--menu-padding));
        padding-bottom: calc(2 * var(--menu-padding));
    }
}

/* DARK & LIGHT MODE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*dark/light mode control*/
.panel {
    width: 60px;
    left: inherit;
}

.dl-reverse {
    border-color: var(--card-color) !important;
    color: #0052fe !important;
    background: var(--dl-reverse);
}

.mode {
    position: relative;
}

.sun,
.moon {
    font-size: 1rem;
    width: fit-content;
    height: fit-content;
}

.moon {
    position: absolute;
    inset: 1;
}

.sun-logo {
    opacity: 0;
    transform: translateY(20%) rotateZ(50deg);
    transition: all 1s ease-out;
}

.moon-logo {
    opacity: 1;
    transform: translateY(0) rotateZ(0deg);
    transition: all 1s ease-out;
}

.animate-moon {
    opacity: 0;
    transform: translateY(20%) rotateZ(100deg);
}

.animate-sun {
    opacity: 1;
    transform: translateY(0%) rotateZ(0deg);
}

.animate-moon path {
    fill: #F7A600;
}

.animate-sun path {
    fill: white;
}

.theme-light .light-logo svg {
    fill: #F7A600;
}

/* cookies */
.cookies-allert {
    position: fixed;
    left: 15px;
    bottom: 50px;
    padding: 2rem;
    max-width: 360px;
    cursor: pointer;
    border-radius: 24px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    background: #ffffff;
    text-align: center;
    color: #FFFFFF;
    font-family: var(--secondary-font) !important;
}

.cookies-allert h4,
.cookies-allert span {
    color: #000000;
    font-family: var(--secondary-font) !important;
}

.cookies-allert img {
    width: 20% !important;
    display: block;
    margin: auto;
}

.cookieButton {
    display: flex;
    height: 55px;
    line-height: 55px;
    color: #fff;
    font-size: 17px;
    padding: 0 2rem;
    align-items: center;
    width: 100%;
    border-radius: 24px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    justify-content: center;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    font-family: var(--secondary-font) !important;
}

.cookieButton:hover {
    color: #fff;
}

.cookieClose {
    color: #2d2d2d;
    text-decoration: none;
    transition: all 0.01s ease-in-out;
    border: none;
    border-bottom: 1px solid #f7a600;
    background: transparent;
}

.cookieClose:hover {
    border-bottom: 3px solid rgba(3, 3, 3, 0.3);
}

.cookies-allert .seemoreButton {
    text-decoration: underline;
    display: inline-block;
    font-size: 14px;
    color: var(--primary);
    font-family: var(--secondary-font) !important;
}

.card-bg-1 {
    padding: 1px;
    border-radius: 9px;
    background-image: linear-gradient(rgb(247, 166, 0), transparent);
}

.card-bg-3 {
    background: var(--card-custom) !important;
}

.card-bg-1 div {
    border-radius: 9px;
}

.text-small {
    color: #b07131 !important;
    font-size: 12px;
    font-weight: 400;
}

.sub-text {
    color: #adb1b8;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    margin-bottom: 4px;
}

.dotted-border {
    height: 2px;
    border-bottom: 2px dotted #25282c;
}

.time-counter {
    border-radius: 2px;
    background: rgba(192, 210, 231, .12);
    padding: 0 4px;
    height: 25px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
}

.time-counter1 {
    border-radius: 2px;
    background: rgba(192, 210, 231, 0.158);
    padding: 0 8px;
    height: 48px;
    width: 60px;
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    line-height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.time-counter-promotion {
    border-radius: 2px;
    background: rgba(192, 210, 231, 0.158);
    padding: 0 8px;
    height: 30px;
    width: 30px;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    line-height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.time-conunter-text {
    margin: 16px 0px;
    color: rgb(129, 133, 140);
    font-size: 18px;
    /*font-weight: 600;*/
    line-height: 24px;
}

.time-conunter-text-promotion {
    margin: 0px 0px;
    color: rgb(129, 133, 140);
    font-size: 15px;
    /* font-weight: 600; */
    line-height: 24px;
}

.time-text {
    color: rgb(129, 133, 140);
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    padding-left: 3px;
    padding-right: 3px;
}

.time-text-promotion {
    color: rgb(129, 133, 140);
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
    padding-left: 1px;
    padding-right: 1px;
}

.outgoing {
    color: var(--dark);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    height: 24px;
    padding: 0px 6px;
    border-radius: 4px;
    background: var(--brand-color);
    margin-top: 6px;
    white-space: nowrap;
}

.outgoing-position {
    position: absolute;
    right: 19px;
    top: 0px;
    z-index: 1;
}

.outgoing2 {
    color: rgb(32, 178, 108);
    padding: 2px 4px;
    border-radius: 4px;
    background-color: rgba(32, 178, 108, 0.12);
    font-size: 12px;
    scale: 0.83;
    transform-origin: left center;
    font-weight: 500;
    margin-bottom: 4px;
    width: fit-content;
}

.bottom-margin {
    bottom: -17px;
}

.carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 1000px !important;
    background-color: var(--brand-color);
    border: 2px solid var(--brand-color);
}

.image-rounded {
    border-radius: 9px;
}

.about-invexa-fav {
    background: #ffffff !important;
    padding: 10px;
    transform: rotate(25deg);
    right: 38px;
    top: -52px
}

.hr-line {
    width: 100%;
    height: 2px;
    background-color: var(--brand-color);
    border-radius: 8px;
}

.style-margin {
    padding-top: 24px;
}

.outer {
    position: relative;
}

.back-counting {
    position: absolute;
    margin-top: -11px;
    margin-left: -11px;
    font-size: 18px;
    color: #000000;
    opacity: .8;
    background: #f7a600;
    width: 45px;
    height: 44px;
    border-radius: 9px 0px 32px 0px !important;
    display: flex;
    justify-content: center;
    align-items: center;

}

.heading-color {
    color: var(--brand-color);
}

.card-angle {
    border-radius: 90px 0px 90px 0px;
}

.card-bg-2 {
    padding: 1px;
    border-radius: 90px 0px 90px 0px;
    background-image: linear-gradient(rgb(247, 166, 0), transparent);
}

.marquee-container {
    width: 100%;
    background: linear-gradient(96.76deg, #ffefcd 4.59%, #ffca63 38.25%, #fde4b1 93.08%);
    padding: 15px 0;
    height: 52px;
}

marquee {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #121214;
}

.front-input {
    /*max-width: 430px;*/
    max-width: 510px;
    position: relative;
    padding: 6px;
    border: 1px solid var(--brand-color);
    border-radius: 8px;
}

.front-input-2 {
    width: 100%;
    padding: 6px;
    border: 1px solid var(--brand-color);
    border-radius: 8px;
}

.front-input-inner {
    position: absolute;
    right: 6px;
    margin-top: -35px;
}

.text-color {
    color: var(--brand-color) !important;
}

.margin-left {
    margin-left: 6px;
}

.image {
    max-width: 360px;
}

.image-promotion {
    max-width: 220px;
}

.image-2 {
    width: 176px;
    height: 96px;
}

@media only screen and (max-width: 420px) {

    .custom-card-button {
        width: 80px;
        height: 32px;
        padding: 0px 0px !important;
        font-size: 12px;
    }
}


/* affiliate markeeting */


/* commission section */
.custom-bg {
    background-image: url('../img/bg/commission.png');
    background-size: cover;
    background-position: center;
    /* background-color: #f5f7fa; */
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;
}

/* end commission section */

/* Becomming affiliate easy */
.box-3 {
    max-width: 300px;
}

.arrow-box {
    text-align: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.arrow-box {
    --ant-display: block;
}

@media only screen and (max-width: 992px) {

    .box-3 {
        max-width: 100%;
    }

    .arrow-box img {
        transform: rotate(90deg);
        width: 80px;
        height: 100px;
    }
}



@media only screen and (max-width: 992px) {

    .table-info {
        min-width: 270px;
    }
}

.btns.active button {
    background-color: #f7a600;
    color: #fff;
    border-radius: 4px;
}

.img-container {
    aspect-ratio: 3 / 2;
    width: 153px;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-name-w {
    width: max-content !important;
}

.overflow-list {
    overflow-x: auto;
    height: 60px;
    width: 100%;
    margin: 20px 0;
    padding: 0px;
}



/* scroller */
.blog-category-scroll-wrapper {
    position: relative;
    overflow: hidden;
}

.overflow-list {
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
    padding: 5px 34px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.overflow-list::-webkit-scrollbar {
    display: none;
}

.scroll-btn {
    position: absolute;
    top: 53.1%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: #f7a600;
    color: white;
    border: none;
    font-size: 20px;
    padding: 5px 8px;
    cursor: pointer;
    border-radius: 4px;
}

.prev-btn {
    left: 0;
}

.next-btn {
    right: 0;
}

.text-hover a:hover {
    color: #f7a600 !important;
}

code {
    color: var(--brand-color) !important;
}

/* scroller */

.relative {
    position: relative;
    z-index: 0;
}

.svg-set {
    position: absolute;
    top: -21px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    padding: 6px;
    border: 2px solid var(--border);
    border-radius: 100px;
    color: var(--svg-col);
}

.pt-40 {
    padding-top: 40px !important;
}

.mt-60 {
    margin-top: 60px;
}

.blog-height {
    height: fit-content;
}

p {
    font-weight: 400 !important;
    font-size: 1rem !important;
    line-height: 26px !important;
    font-family: var(--global-font) !important;
}

/* referal page */
.reward-image {
    max-width: 80px;
    height: auto;
}

/* invite more earn more */
.card-color {
    border-radius: 12px;
    background: var(--refrel-bg);
    padding: 16px;
    cursor: pointer;
}

.shadow {
    display: none;
}

.card-color:hover .shadow {
    max-width: 80px;
    display: block;
    margin-top: -40px;
}

.img-right {
    max-width: 105px;
    height: auto;
}



.w-15 {
    width: 15%;
}

.modal-backdrop {
    --bs-backdrop-zindex: 0;
}

.text-justify {
    text-align: justify;
}

.tp-widget-wrapper {
    text-align: left !important;
}

.trustpilot {
    position: relative;
}

.trustpilot-inner {
    position: absolute !important;
    left: -60px;
}

/* flip card */
.flip-card {
    background-color: transparent;
    width: 100%;
    height: 100%;
    perspective: 1000px;

}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 400px;
    text-align: center;
    transition: transform 0.9s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-top: 1px solid #f7a600;
    border-bottom: 1px solid #f7a600;
    border-radius: 30px 0px 30px 0px;
    padding: 20px;
}

.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-top: 1px solid #f7a600;
    border-bottom: 1px solid #f7a600;
    border-radius: 0px 30px 0px 30px;
    padding: 20px;
}

.flip-card-front {
    background-color: var(--card-color);
    color: var(--color-primary-100);
}

.flip-card-back {
    background-color: var(--card-color);
    color: var(--color-primary-100);
    transform: rotateY(180deg);
}

.bots {
    width: 110px;
    height: 110px;
}

.text-width {
    width: 100%;
}

.why-choose .card-bg-1 svg {
    margin-top: 1rem !important;
}

.wallet svg {
    width: 28px;
    flex-shrink: 0;
}

.form-control::placeholder {
    color: var(--color-primary-500);
}

.icon-col {
    color: var(--icon-color) !important;
}