/*** GENERAL ***/
    :root {
        color-scheme: light dark;
        --color-first: light-dark(#4f46e5, #155dfc);
        --color-second: light-dark(#212121, #212121);
        --color-content: light-dark(#474747, #f9f9f9);
        --color-black: light-dark(#000000, #ffffff);
        --color-black-same: light-dark(#000000, #000000);
        --color-white: light-dark(#ffffff, #000000);
        --color-white-same: light-dark(#ffffff, #ffffff);
        --color-mute:light-dark(#717182,#ececf0);
        --bg-color-muted: light-dark(#ececf0,#6f6f6f);
        --color-red: #e7000b;
        --color-red-50: #fef2f2;
        --color-red-100: #ffe2e2;
        --color-red-200: #ffc9c9;
        --color-red-500: #fb2c36; 
        --color-red-600: #e7000b;
        --color-red-700: #c10007;
        --color-orange-50: #fff7ed;
        --color-orange-100: #ffedd4;
        --color-orange-200: #ffd7a8;
        --color-orange-300: #ffb86a;
        --color-orange-600: #f54a00;
        --color-orange-700:#ca3500;
        --color-green: #10b981;
        --color-green-50:#f0fdf4; 
        --color-green-100: #dcfce7;
        --color-green-300: #7bf1a8;
        --color-green-500: #00c951;
        --color-green-600: #00a63e;
        --color-green-700: #008236;
        --color-blue-50: light-dark(#eff6ff, #bedbff);
        --color-blue-100: #dbeafe;
        --color-blue-200: #bedbff;
        --color-blue-300: #8ec5ff;
        --color-blue-500: #2b7fff;
        --color-blue-600: #155dfc;
        --color-blue-700: #1447e6;
        --color-purple:#9810fa;
        --color-purple-50: #faf5ff;
        --color-purple-100: #f3e8ff;
        --color-purple-200: #e9d4ff;
        --color-purple-500: #ad46ff;
        --color-purple-600: #9810fa;
        --color-purple-700: #8200db;
        --color-yellow-50: #fefce8;
        --color-yellow-100: #fef9c2;
        --color-yellow-200: #fff085;
        --color-yellow-300: #ffdf20;
        --color-yellow-400: #fdc700;
        --color-yellow-500: #f0b100;
        --color-yellow-600: #d08700;
        --color-gray-50: light-dark(#fbf9fa, #101828);
        --color-gray-100: light-dark(#f6f3f4, #1f2937);
        --color-gray-200: light-dark(#e5e7e9, #1f2937);
        --color-gray-300: #d1d5dc;
        --color-gray-400: #99a1af;
        --color-gray-500: light-dark(#6a7282, #f6f3f4);
        --color-gray-600: light-dark(#4a5565, #d1d5dc);
        --color-gray-700: light-dark(#364153, #d1d5dc);
        --color-gray-800: #1f2937;
        --color-gray-900: light-dark(#101828, #f6f3f4);
        --bg-light1: light-dark(#f8fafc, #212121);
        --bg-light2: light-dark(#f1f5f9, #2d2d2d);  
        --bg-light3: light-dark(#f3f3f5, #3a3a3a);
        --bg-light4: light-dark(#99a1af, #99a1af);
        --border-color: light-dark(#e5e7eb, #e5e7eb);
        --gradient1: linear-gradient(to top, rgba(2, 6, 23, 0.85), rgba(2, 6, 23, 0.45), transparent);
        --gradient2: linear-gradient(to top, rgba(2, 6, 23, 0.85), rgba(2, 6, 23, 0.4), transparent);
        --gradient3: linear-gradient(to left, rgba(13,110,253, 0.1), rgba(13,110,253, 0.3), rgba(13,110,253, 0.1));
        --font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

        /* Background Colors */
        --bg-secondary: light-dark(#f9fafb, #1f2937);
        --bg-tertiary: light-dark(#f3f4f6, #374151);

        /* Border Colors */
        --border-color: light-dark(#e5e7eb, #374151);
        --border-color-light: light-dark(#f3f4f6, #4b5563);

        /* Shadows */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        /* Shadows Dark Mode*/
        --shadow-sm-dark: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-md-dark: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
        --shadow-lg-dark: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
        --shadow-xl-dark: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
        /* Spacing */
        --spacing-xs: 0.25rem;
        --spacing-sm: 0.5rem;
        --spacing-md: 1rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
        --spacing-2xl: 3rem;
    }
    :root {
        &:has(html[data-bs-theme="light auto"]) {color-scheme: light;}
        &:has(html[data-bs-theme="dark"]) {color-scheme: dark;}
    }
    *, ::after, ::before{ box-sizing: border-box; }
    * {
        margin: 0;
        padding: 0;
        font-family: var(--font-family);
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        letter-spacing: 0;
        /*line-height: normal;*/
        color: var(--color-black);
        text-transform: none;
    }
    body{background-color: var(--bg-light1);padding-top:50px;}
    textarea{resize: none;}
    ul li {list-style: none;}
    ul.list li {list-style: disc;}
    ul.list li, ol.list-section li {padding-bottom:.2rem;}
    ul.list li:last-child, ol.list-section li:last-child{padding-bottom:0;}
    a {text-decoration: none;}
    .cursor-pointer {cursor: pointer;}
    .w-fit-content {width: fit-content !important;}
    .w-max-content {width: max-content !important;}
    .scroll-x {overflow-y: hidden;overflow-x: auto;scrollbar-width: thin;}
    .scroll-y {overflow-y: auto;overflow-x: hidden;scrollbar-width: thin;}
    .py-0-5{padding: 0.1rem}
    .max-height-300{max-height: 300px;}
    .hover-bg-gray-200:hover {
        background-color: var(--color-gray-200) !important;
        transition: background-color 0.3s ease;
    }
    .data-active-bg-black[data-active="true"] {
        background-color: var(--color-black) !important;
        color: var(--color-white) !important;
        border-color: var(--color-black) !important;
    }
    .data-active-bg-black[data-active="true"] span {
        color: var(--color-white) !important;
    }  
/*==================== BACKGROUND STYLES ======================*/    
    .bg-color-first{background-color:var(--color-first) !important;}
    .bg-color-first-same{background-color:var(--color-first-same) !important;}
    .bg-color-second{background-color:var(--color-second) !important;}
    .bg-color-second-same{background-color:var(--color-second-same) !important;}
    .bg-color-black{background-color:var(--color-black) !important;}
    .bg-color-black-same{background-color:var(--color-black-same) !important;}
    .bg-color-white {background-color: var(--color-white) !important;}
    .bg-color-white-same {background-color: var(--color-white-same) !important;}
    .bg-color-first-same{background-color:var(--color-first-same) !important;}
    .bg-color-second{background-color:var(--color-second) !important;}
    .bg-color-second-same{background-color:var(--color-second-same) !important;}
    .bg-color-black{background-color:var(--color-black) !important;}
    .bg-color-black-same{background-color:var(--color-black-same) !important;}
    .bg-color-white {background-color: var(--color-white) !important;}
    .bg-color-white-same {background-color: var(--color-white-same) !important;}
    .bg-color-mute {background-color: var(--color-mute) !important;}
    .bg-color-content{color:var(--color-content) !important;}
    /*-- red--*/
    .bg-color-red-50{background-color:var(--color-red-50) !important;}
    .bg-color-red-100{background-color:var(--color-red-100) !important;}
    .bg-color-red-200{background-color:var(--color-red-200) !important;}
    .bg-color-red-500{background-color:var(--color-red-500) !important;}
    .bg-color-red-700{background-color:var(--color-red-700) !important;}
    /*-- orange--*/
    .bg-color-orange-50{background-color:var(--color-orange-50) !important;}
    .bg-color-orange-100{background-color:var(--color-orange-100) !important;}
    .bg-color-orange-200{background-color:var(--color-orange-200) !important;}
    .bg-color-orange-300{background-color:var(--color-orange-300) !important;}
    .bg-color-orange-600{background-color:var(--color-orange-600) !important;}
    .bg-color-orange-700{background-color:var(--color-orange-700) !important;}
    /*-- green--*/
    .bg-color-green-50{background-color:var(--color-green-50) !important;}
    .bg-color-green-100{background-color:var(--color-green-100) !important;}
    .bg-color-green-300{background-color:var(--color-green-300) !important;}
    .bg-color-green-500{background-color:var(--color-green-500) !important;}
    .bg-color-green-600{background-color:var(--color-green-600) !important;}
    .bg-color-green-700{background-color:var(--color-green-700) !important;}
    /*-- blue--*/
    .bg-color-blue-50{background-color:var(--color-blue-50) !important;}
    .bg-color-blue-100{background-color:var(--color-blue-100) !important;}
    .bg-color-blue-200{background-color:var(--color-blue-200) !important;}
    .bg-color-blue-300{background-color:var(--color-blue-300) !important;}
    .bg-color-blue-500{background-color:var(--color-blue-500) !important;}
    .bg-color-blue-600{background-color:var(--color-blue-600) !important;}
    .bg-color-blue-700{background-color:var(--color-blue-700) !important;}
    /*-- purple--*/
    .bg-color-purple-50{background-color:var(--color-purple-50) !important;}
    .bg-color-purple-100{background-color:var(--color-purple-100) !important;}
    .bg-color-purple-200{background-color:var(--color-purple-200) !important;}
    .bg-color-purple-500{background-color:var(--color-purple-500) !important;}
    .bg-color-purple-600{background-color:var(--color-purple-600) !important;}
    .bg-color-purple-700{background-color:var(--color-purple-700) !important;}
    /*-- yellow --*/
    .bg-color-yellow-50{background-color:var(--color-yellow-50) !important;}
    .bg-color-yellow-100{background-color:var(--color-yellow-100) !important;}
    .bg-color-yellow-200{background-color:var(--color-yellow-200) !important;}
    .bg-color-yellow-300{background-color:var(--color-yellow-300) !important;}
    .bg-color-yellow-400{background-color:var(--color-yellow-400) !important;}
    .bg-color-yellow-500{background-color:var(--color-yellow-500) !important;}
    .bg-color-yellow-600{background-color:var(--color-yellow-600) !important;}
    /*-- gray--*/
    .bg-color-gray-50{background-color:var(--color-gray-50) !important;}
    .bg-color-gray-100{background-color:var(--color-gray-100) !important;}
    .bg-color-gray-200{background-color:var(--color-gray-200) !important;}
    .bg-color-gray-300{background-color:var(--color-gray-300) !important;}
    .bg-color-gray-400{background-color:var(--color-gray-400) !important;}
    .bg-color-gray-500{background-color:var(--color-gray-500) !important;}
    .bg-color-gray-600{background-color:var(--color-gray-600) !important;}
    .bg-color-gray-700{background-color:var(--color-gray-700) !important;}
    .bg-color-gray-900{background-color:var(--color-gray-900) !important;}
    /*-- LIGHT --*/
    .bg-light1{background-color:var(--bg-light1) !important;}
    .bg-light2{background-color:var(--bg-light2) !important;}
    .bg-light3{background-color:var(--bg-light3) !important;}
    /*-- gradient --*/
    .bg-gradient-purple-blue-50{background: linear-gradient(to left,var(--color-purple-50),var(--color-blue-50));}
    .bg-gradient-purple-blue-600{background: linear-gradient(to left,var(--color-purple-600),var(--color-blue-600));}
    .bg-gradient-blue-purple-600{background: linear-gradient(140deg, var(--color-blue-600) 3%, var(--color-purple-600));}
    .bg-gradient-blue-white-50{background: linear-gradient(to left,var(--color-blue-50),var(--color-white));}    
    html[data-bs-theme=dark] .bg-gradient-purple-blue-50{background: linear-gradient(to left,var(--color-purple-700),var(--color-blue-700));}
    html[data-bs-theme=dark] .bg-gradient-purple-blue-50{background: linear-gradient(to left,var(--color-purple-700),var(--color-blue-700));}
/*==================== COLOR STYLES ===========================*/
    .color-first{color:var( --color-first) !important;}
    .color-first-same{color:var( --color-first-same) !important;}
    .color-second{color:var(--color-second) !important;}
    .color-second-same{color:var(--color-second-same) !important;}
    .color-black{color:var(--color-black) !important;}
    .color-black-same{color:var(--color-black-same) !important;}
    .color-white{color:var(--color-white) !important;}
    .color-white-same{color:var(--color-white-same) !important;}
    .color-mute {color: var(--color-mute) !important;}
    .color-content{color:var(--color-content) !important;}
    /*-- red--*/
    .color-red-50{color:var(--color-red-50) !important;}
    .color-red-100{color:var(--color-red-100) !important;}
    .color-red-200{color:var(--color-red-200) !important;}
    .color-red-500{color:var(--color-red-500) !important;}
    .color-red-700{color:var(--color-red-700) !important;}
    /*-- orange--*/
    .color-orange-50{color:var(--color-orange-50) !important;}
    .color-orange-100{color:var(--color-orange-100) !important;}
    .color-orange-200{color:var(--color-orange-200) !important;}
    .color-orange-300{color:var(--color-orange-300) !important;}
    .color-orange-600{color:var(--color-orange-600) !important;}
    .color-orange-700{color:var(--color-orange-700) !important;}
    /*-- green--*/
    .color-green-50{color:var(--color-green-50) !important;}
    .color-green-100{color:var(--color-green-100) !important;}
    .color-green-300{color:var(--color-green-300) !important;}
    .color-green-500{color:var(--color-green-500) !important;}
    .color-green-600{color:var(--color-green-600) !important;}
    .color-green-700{color:var(--color-green-700) !important;}
    /*-- blue--*/
    .color-blue-50{color:var(--color-blue-50) !important;}
    .color-blue-100{color:var(--color-blue-100) !important;}
    .color-blue-200{color:var(--color-blue-200) !important;}
    .color-blue-300{color:var(--color-blue-300) !important;}
    .color-blue-500{color:var(--color-blue-500) !important;}
    .color-blue-600{color:var(--color-blue-600) !important;}
    .color-blue-700{color:var(--color-blue-700) !important;}
    /*-- purple--*/
    .color-purple-50{color:var(--color-purple-50) !important;}
    .color-purple-100{color:var(--color-purple-100) !important;}
    .color-purple-200{color:var(--color-purple-200) !important;}
    .color-purple-500{color:var(--color-purple-500) !important;}
    .color-purple-600{color:var(--color-purple-600) !important;}
    .color-purple-700{color:var(--color-purple-700) !important;}
    /*-- yellow--*/
    .color-yellow-50{color:var(--color-yellow-50) !important;}
    .color-yellow-100{color:var(--color-yellow-100) !important;}
    .color-yellow-200{color:var(--color-yellow-200) !important;}
    .color-yellow-300{color:var(--color-yellow-300) !important;}
    .color-yellow-400{color:var(--color-yellow-400) !important;}
    .color-yellow-500{color:var(--color-yellow-500) !important;}
    .color-yellow-600{color:var(--color-yellow-600) !important;}
    /*-- gray--*/
    .color-gray-50{color:var(--color-gray-50) !important;}
    .color-gray-100{color:var(--color-gray-100) !important;}
    .color-gray-200{color:var(--color-gray-200) !important;}
    .color-gray-300{color:var(--color-gray-300) !important;}
    .color-gray-400{color:var(--color-gray-400) !important;}
    .color-gray-500{color:var(--color-gray-500) !important;}
    .color-gray-600{color:var(--color-gray-600) !important;}
    .color-gray-700{color:var(--color-gray-700) !important;}
    .color-gray-800{color:var(--color-gray-800) !important;}
    .color-gray-900{color:var(--color-gray-900) !important;}
    .text-success {color: var(--color-green-600);}
    .text-error {color: var(--color-red-600);}
/*color end*/ 
/*gradient color*/
    .gradient-1 {background: var(--gradient1);}
    .gradient-2 {background: var(--gradient2);}
    .gradient-3 {background: var(--gradient3);}
    .gradient-blue {background: linear-gradient(135deg, #e0edff 0%, #ffffff 60%); border: none;}
    .gradient-blue-rtl {background: linear-gradient(270deg, #e0edff 0%, #ffffff 60%); border: none;}
    .gradient-blue-mid {background: linear-gradient(270deg, #ffffff 0%, #e0edff 50%, #ffffff 100%); border: none;}
    .bg-gradient-purple-1 {background:linear-gradient(135deg, var(--color-first), var(--color-purple)) !important;}
    .bg-gradient-first-second {background: linear-gradient(135deg, var(--color-first), var(--color-second)) !important;}
    .gradient-border {position: relative;background: #fff;border-radius: 14px;z-index: 0;}
    .gradient-border::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1.5px; /* border thickness */
        border-radius: inherit;
        background: linear-gradient(135deg, #1880FF, #61A8FE, #4EBA6F);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: -1;
    }
    /*dark mode gradient color*/
    html[data-bs-theme=dark] .gradient-blue {background: linear-gradient(135deg, #1f1f1f 0%, #373737 60%);}
    html[data-bs-theme=dark] .gradient-blue-rtl {background: linear-gradient(270deg, #1f1f1f 0%, #373737 60%); border: none;}
    html[data-bs-theme=dark] .gradient-blue-mid {background: linear-gradient(270deg, #373737 0%, #1f1f1f 50%, #373737 100%); border: none;}
/*gradient color end*/
/*HEADING STYLE*/
    .mainHeading{
        font-size:2.5rem;
        font-weight:700;
        line-height:1.2;
    }
    .largeHeading{
        font-size:2.2rem;
        font-weight:600;
        line-height:1.3;
    }
    .subHeading {
        font-size: 1.4rem;
        font-weight: 500;
        line-height: 1.6;
    }
    .thirdHeading {
        font-size: 1.2rem;
        font-weight: 400;
        line-height: 1.5;
    }
    p, ul li, ol li {
        font-weight: 400;
        color: var(--color-content);
        font-size: 1rem;
        line-height: 1.6;
    }
/*HEADING STYLE*/
/* FONT SIZE */
    .text-xxxl {font-size: 4.5rem !important;line-height: 1.3 !important;}
    .text-xxl {font-size: 1.5rem !important;line-height: 1.3 !important;}
    .text-xl {font-size: 1.25rem !important;line-height:1.5;}
    .text-lg {font-size: 1.125rem !important;line-height:1.2;}
    .text-md {font-size: 1rem !important;line-height: normal;}
    .text-sm {font-size: 0.875rem !important;}
    .text-xs {font-size: 0.75rem !important;line-height: normal;}
    .text-xxs {font-size: 0.65rem !important;line-height: normal;}
/* FONT WIGHT */
    .fw-400 {font-weight: 400 !important;}
    .fw-500 {font-weight: 500 !important;}
    .fw-600 {font-weight: 600 !important;}
    .fw-700 {font-weight: 700 !important;}
/*BUTTON STYLE*/
    .button-style,input[type=submit].button-style{
        cursor: pointer;
        padding: 10px 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        font-size: 1rem;
        font-weight:600;
        letter-spacing: 0px;
        border: 0;
        border-radius: 5px;
        text-transform: capitalize;
        outline: none !important;
        box-shadow: none !important;
    }
    .button-style.button-sm{padding: 4px 12px;font-size:0.875rem;gap: 4px;min-height: 32px;}
    .btn-outline-first {color: var(--color-first);border: 1px solid var(--color-first);background-color: transparent}
    .btn-outline-first:hover, .btn-first:hover, .btn-first {color: var(--color-white-same);background-color: var(--color-first);}
    .btn-outline-second, .btn-outline-second-same {color: var(--color-second);border: 1px solid var(--color-second);background-color: transparent !important;}
    .btn-outline-second:hover, .btn-second:hover, .btn-second {color: var(--color-white-same);border: 1px solid var(--color-second);
        background-color: var(--color-second);}
    .btn-outline-white {color: var(--color-white);border: 1px solid var(--color-white);
        background-color: transparent !important;}
    .btn-outline-black {color: var(--color-black);border: 1px solid var(--color-black);
        background-color: transparent !important;}        
    .btn-outline-gray-600 {color: var(--color-gray-600);border: 1px solid var(--color-gray-600);
        background-color: transparent !important;}
    .btn-outline-white-same {color: var(--color-white-same);border: 1px solid var(--color-white-same);
        background-color: transparent !important;}
    .btn-white{background-color: var(--color-white-same); color: var(--color-black-same);} 
    .btn-black{background-color: var(--color-black); color: var(--color-white);}  
    .no-bg-btn {
        padding: 0;
        margin: 0;
        border: none;
        background-color: transparent;
        outline: none !important;
        box-shadow: none !important;
    }    
    .btn-check:checked + label,label.btn-outline-gray-600:hover{color: var(--color-blue-600);
        border: 1px solid var(--color-blue-600);
        background-color: var(--color-blue-100) !important;
    }   
/*BUTTON STYLE end*/
/*TEXT LIMIT STYLE*/
    .text-limit-1, .text-limit-2, .text-limit-3, .text-limit-4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    }
    .text-limit-1 {-webkit-line-clamp: 1;white-space: nowrap;}
    .text-limit-2 {-webkit-line-clamp: 2;}
    .text-limit-3 {-webkit-line-clamp: 3;}
    .text-limit-4 {-webkit-line-clamp: 4;}
/*TEXT LIMIT STYLE end*/
/*form fields*/
    input.form-control::placeholder, select.form-select::placeholder, textarea.form-control::placeholder {color: var(--color-content);font-size: 1rem;font-weight: 400;}
    input.form-control, select.form-select, textarea.form-control {caret-color: var(--color-first);color: var(--color-black);font-size: 1rem;
        font-weight: 400;outline: none !important;box-shadow: none !important;border-radius: 8px;}
    .input-border {border: 1px solid var(--border-color);transition: all 0.5s;}
    input.form-control:focus, select.form-select:focus, textarea.form-control:focus,.input-border:hover, 
    .input-border:focus, .input-border.active {border-color: var(--color-first);}
    input.form-control,select.form-select {min-height: 40px;}
    .form-check-input:checked{background-color: var(--color-first);border-color: var(--color-first);}
    .form-control.is-valid,
    .was-validated .form-control:valid,
    .form-control.is-invalid,
    .was-validated .form-control:invalid{background-image:none;}
    .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"], 
    .was-validated .form-select:valid:not([multiple]):not([size]),
    .was-validated .form-select:invalid:not([multiple]):not([size]){--bs-form-select-bg-icon: none !important;}
/*form fields end*/
/* BORDER COLOR STYLES */
    .border-color-gray{border-color: var(--color-border) !important;}
    .border-color-first{border-color:var(--color-first) !important;}
    .border-color-first-same{border-color:var(--color-first-same) !important;}
    .border-color-second{border-color:var(--color-second) !important;}
    .border-color-second-same{border-color:var(--color-second-same) !important;}
    .border-color-black{border-color:var(--color-black) !important;}
    .border-color-black-same{border-color:var(--color-black-same) !important;}
    .border-color-white {border-color: var(--color-white) !important;}
    .border-color-white-same {border-color: var(--color-white-same) !important;}
    .border-color-first-same{border-color:var(--color-first-same) !important;}
    .border-color-second{border-color:var(--color-second) !important;}
    .border-color-second-same{border-color:var(--color-second-same) !important;}
    .border-color-black{border-color:var(--color-black) !important;}
    .border-color-black-same{border-color:var(--color-black-same) !important;}
    .border-color-white {border-color: var(--color-white) !important;}
    .border-color-white-same {border-color: var(--color-white-same) !important;}
    .border-color-mute {border-color: var(--color-mute) !important;}
    /*-- red--*/
    .border-color-red-50{border-color:var(--color-red-50) !important;}
    .border-color-red-100{border-color:var(--color-red-100) !important;}
    .border-color-red-200{border-color:var(--color-red-200) !important;}
    .border-color-red-500{border-color:var(--color-red-500) !important;}
    .border-color-red-700{border-color:var(--color-red-700) !important;}
    /*-- orange--*/
    .border-color-orange-50{border-color:var(--color-orange-50) !important;}
    .border-color-orange-100{border-color:var(--color-orange-100) !important;}
    .border-color-orange-200{border-color:var(--color-orange-200) !important;}
    .border-color-orange-300{border-color:var(--color-orange-300) !important;}
    .border-color-orange-600{border-color:var(--color-orange-600) !important;}
    .border-color-orange-700{border-color:var(--color-orange-700) !important;}
    /*-- green--*/
    .border-color-green-50{border-color:var(--color-green-50) !important;}
    .border-color-green-100{border-color:var(--color-green-100) !important;}
    .border-color-green-300{border-color:var(--color-green-300) !important;}
    .border-color-green-500{border-color:var(--color-green-500) !important;}
    .border-color-green-600{border-color:var(--color-green-600) !important;}
    .border-color-green-700{border-color:var(--color-green-700) !important;}
    /*-- blue--*/
    .border-color-blue-50{border-color:var(--color-blue-50) !important;}
    .border-color-blue-100{border-color:var(--color-blue-100) !important;}
    .border-color-blue-200{border-color:var(--color-blue-200) !important;}
    .border-color-blue-300{border-color:var(--color-blue-300) !important;}
    .border-color-blue-500{border-color:var(--color-blue-500) !important;}
    .border-color-blue-600{border-color:var(--color-blue-600) !important;}
    .border-color-blue-700{border-color:var(--color-blue-700) !important;}
    /*-- purple--*/
    .border-color-purple-50{border-color:var(--color-purple-50) !important;}
    .border-color-purple-100{border-color:var(--color-purple-100) !important;}
    .border-color-purple-200{border-color:var(--color-purple-200) !important;}
    .border-color-purple-500{border-color:var(--color-purple-500) !important;}
    .border-color-purple-600{border-color:var(--color-purple-600) !important;}
    .border-color-purple-700{border-color:var(--color-purple-700) !important;}
    /*-- gray--*/
    .border-color-gray-50{border-color:var(--color-gray-50) !important;}
    .border-color-gray-100{border-color:var(--color-gray-100) !important;}
    .border-color-gray-200{border-color:var(--color-gray-200) !important;}
    .border-color-gray-300{border-color:var(--color-gray-300) !important;}
    .border-color-gray-400{border-color:var(--color-gray-400) !important;}
    .border-color-gray-500{border-color:var(--color-gray-500) !important;}
    .border-color-gray-600{border-color:var(--color-gray-600) !important;}
    .border-color-gray-700{border-color:var(--color-gray-700) !important;}
    .border-color-gray-900{border-color:var(--color-gray-900) !important;}
/* SVG COLOR STYLES */
    /*-- svg fill --*/  
    .svg-fill-first,.svg-fill-first path{fill:var(--color-first) !important;}    
    .svg-fill-second,.svg-fill-second path{fill:var(--color-second) !important;}    
    .svg-fill-black,.svg-fill-black path{fill:var(--color-black) !important;}
    .svg-fill-white,.svg-fill-white path {fill: var(--color-white) !important;}
    .svg-fill-light1,.svg-fill-light1 path {fill: var(--bg-light1) !important;}
    .svg-fill-light2,.svg-fill-light2 path {fill: var(--bg-light2) !important;}
    .svg-fill-light3,.svg-fill-light3 path {fill: var(--bg-light3) !important;}
    .svg-fill-light4,.svg-fill-light4 path {fill: var(--bg-light4) !important;}
    /* svg fill in light/dark mode --*/   
    .svg-fill-black-same,.svg-fill-black-same path{fill:var(--color-black-same) !important;}
    .svg-fill-white-same,.svg-fill-white-same path {fill: var(--color-white-same) !important;}   
    /*-- svg stroke --*/  
    .svg-stroke-first,.svg-stroke-first path{stroke:var(--color-first) !important;}    
    .svg-stroke-second,.svg-stroke-second path{stroke:var(--color-second) !important;}    
    .svg-stroke-black,.svg-stroke-black path{stroke:var(--color-black) !important;}
    .svg-stroke-white,.svg-stroke-white path {stroke: var(--color-white) !important;}
    .svg-stroke-light1,.svg-stroke-light1 path {stroke: var(--bg-light1) !important;}
    .svg-stroke-light2,.svg-stroke-light2 path {stroke: var(--bg-light2) !important;}
    .svg-stroke-light3,.svg-stroke-light3 path {stroke: var(--bg-light3) !important;}
    .svg-stroke-light4,.svg-stroke-light4 path {stroke: var(--bg-light4) !important;}
    /* svg stroke in light/dark mode --*/   
    .svg-stroke-black-same,.svg-stroke-black-same path{stroke:var(--color-black-same) !important;}
    .svg-stroke-white-same,.svg-stroke-white-same path {stroke: var(--color-white-same) !important;}
    .svg-stroke-purple-700,.svg-stroke-purple-700 path {stroke: var(--color-purple-700) !important}
    .svg-fill-purple-700,.svg-fill-purple-700 path {fill: var(--color-purple-700) !important}
    .svg-stroke-gray-500,.svg-stroke-gray-500 path {stroke: var(--color-gray-500) !important}
    .svg-fill-gray-500,.svg-fill-gray-500 path {fill: var(--color-gray-500) !important;}
    .svg-stroke-green-500,.svg-stroke-green-500 path {stroke: var(--color-green-500) !important}
    .svg-fill-red,.svg-fill-red path {fill: var(--color-red) !important;}
    .svg-stroke-red,.svg-stroke-red path {stroke: var(--color-red) !important}
    .svg-fill-green,.svg-fill-green path {fill: var(--color-green) !important;}
    .svg-stroke-green,.svg-stroke-green path {stroke: var(--color-green) !important}
    .svg-fill-green-500,.svg-fill-green-500 path {fill: var(--color-green-500) !important;}
    .svg-stroke-blue-600,.svg-stroke-blue-600 path {stroke: var(--color-blue-600) !important}
    .svg-fill-blue-600,.svg-fill-blue-600 path {fill: var(--color-blue-600) !important;}
    /* green --*/   
    .svg-fill-green-100,.svg-fill-green-100 path {fill: var(--color-green-100);}
    .svg-stroke-green-100,.svg-stroke-green-100 path {stroke: var(--color-green-100);}
    .svg-fill-green-300,.svg-fill-green-300 path { fill: var(--color-green-300);}
    .svg-stroke-green-300,.svg-stroke-green-300 path {stroke: var(--color-green-300);}
    .svg-fill-green-500,
    .svg-fill-green-500 path {
        fill: var(--color-green-500);
    }

    .svg-stroke-green-500,
    .svg-stroke-green-500 path {
        stroke: var(--color-green-500);
    }

    .svg-fill-green-700,
    .svg-fill-green-700 path {
        fill: var(--color-green-700);
    }

    .svg-stroke-green-700,
    .svg-stroke-green-700 path {
        stroke: var(--color-green-700);
    }
    /* svg red --*/   
    .svg-fill-red-100,
    .svg-fill-red-100 path {
        fill: var(--color-red-100);
    }

    .svg-stroke-red-100,
    .svg-stroke-red-100 path {
        stroke: var(--color-red-100);
    }

    .svg-fill-red-300,
    .svg-fill-red-300 path {
        fill: var(--color-red-300);
    }

    .svg-stroke-red-300,
    .svg-stroke-red-300 path {
        stroke: var(--color-red-300);
    }

    .svg-fill-red-500,
    .svg-fill-red-500 path {
        fill: var(--color-red-500);
    }

    .svg-stroke-red-500,
    .svg-stroke-red-500 path {
        stroke: var(--color-red-500);
    }

    .svg-fill-red-700,
    .svg-fill-red-700 path {
        fill: var(--color-red-700);
    }

    .svg-stroke-red-700,
    .svg-stroke-red-700 path {
        stroke: var(--color-red-700);
    }
    /* svg orange --*/   
    .svg-fill-orange-100,
    .svg-fill-orange-100 path {
        fill: var(--color-orange-100);
    }

    .svg-stroke-orange-100,
    .svg-stroke-orange-100 path {
        stroke: var(--color-orange-100);
    }

    .svg-fill-orange-300,
    .svg-fill-orange-300 path {
        fill: var(--color-orange-300);
    }

    .svg-stroke-orange-300,
    .svg-stroke-orange-300 path {
        stroke: var(--color-orange-300);
    }

    .svg-fill-orange-600,
    .svg-fill-orange-600 path {
        fill: var(--color-orange-600);
    }

    .svg-stroke-orange-600,
    .svg-stroke-orange-600 path {
        stroke: var(--color-orange-600);
    }

    .svg-fill-orange-700,
    .svg-fill-orange-700 path {
        fill: var(--color-orange-700);
    }

    .svg-stroke-orange-700,
    .svg-stroke-orange-700 path {
        stroke: var(--color-orange-700);
    }
    /* svg purple --*/   
    .svg-fill-purple-50,
    .svg-fill-purple-50 path {
        fill: var(--color-purple-50);
    }

    .svg-stroke-purple-50,
    .svg-stroke-purple-50 path {
        stroke: var(--color-purple-50);
    }
    .svg-fill-purple-100,
    .svg-fill-purple-100 path {
        fill: var(--color-purple-100);
    }

    .svg-stroke-purple-100,
    .svg-stroke-purple-100 path {
        stroke: var(--color-purple-100);
    }
    .svg-fill-purple-200,
    .svg-fill-purple-200 path {
        fill: var(--color-purple-200);
    }

    .svg-stroke-purple-200,
    .svg-stroke-purple-200 path {
        stroke: var(--color-purple-200);
    }

    .svg-fill-purple-500,
    .svg-fill-purple-500 path {
        fill: var(--color-purple-500);
    }

    .svg-stroke-purple-500,
    .svg-stroke-purple-500 path {
        stroke: var(--color-purple-500);
    }

    .svg-fill-purple-600,
    .svg-fill-purple-600 path {
        fill: var(--color-purple-600);
    }

    .svg-stroke-purple-600,
    .svg-stroke-purple-600 path {
        stroke: var(--color-purple-600);
    }

    .svg-fill-purple-700,
    .svg-fill-purple-700 path {
        fill: var(--color-purple-700);
    }

    .svg-stroke-purple-700,
    .svg-stroke-purple-700 path {
        stroke: var(--color-purple-700);
    }
    /* svg yellow --*/   
    .svg-fill-yellow-50,
    .svg-fill-yellow-50 path {
        fill: var(--color-yellow-50);
    }

    .svg-stroke-yellow-50,
    .svg-stroke-yellow-50 path {
        stroke: var(--color-yellow-50);
    }
    .svg-fill-yellow-100,
    .svg-fill-yellow-100 path {
        fill: var(--color-yellow-100);
    }

    .svg-stroke-yellow-100,
    .svg-stroke-yellow-100 path {
        stroke: var(--color-yellow-100);
    }
    .svg-fill-yellow-200,
    .svg-fill-yellow-200 path {
        fill: var(--color-yellow-200);
    }

    .svg-stroke-yellow-200,
    .svg-stroke-yellow-200 path {
        stroke: var(--color-yellow-200);
    }

    .svg-fill-yellow-300,
    .svg-fill-yellow-300 path {
        fill: var(--color-yellow-300);
    }

    .svg-stroke-yellow-300,
    .svg-stroke-yellow-300 path {
        stroke: var(--color-yellow-300);
    }

    .svg-fill-yellow-400,
    .svg-fill-yellow-400 path {
        fill: var(--color-yellow-400);
    }

    .svg-stroke-yellow-400,
    .svg-stroke-yellow-400 path {
        stroke: var(--color-yellow-400);
    }

    .svg-fill-yellow-500,
    .svg-fill-yellow-500 path {
        fill: var(--color-yellow-500);
    }

    .svg-stroke-yellow-500,
    .svg-stroke-yellow-500 path {
        stroke: var(--color-yellow-500);
    }
    .svg-fill-yellow-600,
    .svg-fill-yellow-600 path {
        fill: var(--color-yellow-600);
    }

    .svg-stroke-yellow-600,
    .svg-stroke-yellow-600 path {
        stroke: var(--color-yellow-600);
    }
    /* svg gray --*/   
    .svg-fill-gray-50,
    .svg-fill-gray-50 path {
        fill: var(--color-gray-50);
    }

    .svg-stroke-gray-50,
    .svg-stroke-gray-50 path {
        stroke: var(--color-gray-50);
    }
    .svg-fill-gray-100,
    .svg-fill-gray-100 path {
        fill: var(--color-gray-100);
    }

    .svg-stroke-gray-100,
    .svg-stroke-gray-100 path {
        stroke: var(--color-gray-100);
    }
    .svg-fill-gray-200,
    .svg-fill-gray-200 path {
        fill: var(--color-gray-200);
    }

    .svg-stroke-gray-200,
    .svg-stroke-gray-200 path {
        stroke: var(--color-gray-200);
    }
    .svg-fill-gray-300,
    .svg-fill-gray-300 path {
        fill: var(--color-gray-300);
    }

    .svg-stroke-gray-300,
    .svg-stroke-gray-300 path {
        stroke: var(--color-gray-300);
    }

    .svg-fill-gray-500,
    .svg-fill-gray-500 path {
        fill: var(--color-gray-500);
    }
    .svg-fill-gray-400,
    .svg-fill-gray-400 path {
        fill: var(--color-gray-400);
    }

    .svg-stroke-gray-400,
    .svg-stroke-gray-400 path {
        stroke: var(--color-gray-400);
    }
    .svg-fill-gray-500,
    .svg-fill-gray-500 path {
        fill: var(--color-gray-500);
    }
    .svg-stroke-gray-500,
    .svg-stroke-gray-500 path {
        stroke: var(--color-gray-500);
    }
    .svg-fill-gray-600,
    .svg-fill-gray-600 path {
        fill: var(--color-gray-600);
    }
    .svg-stroke-gray-600,
    .svg-stroke-gray-600 path {
        stroke: var(--color-gray-600);
    }
    .svg-fill-gray-700,
    .svg-fill-gray-700 path {
        fill: var(--color-gray-700);
    }
    .svg-stroke-gray-700,
    .svg-stroke-gray-700 path {
        stroke: var(--color-gray-700);
    }
    .svg-fill-gray-800,
    .svg-fill-gray-800 path {
        fill: var(--color-gray-800);
    }
    .svg-stroke-gray-800,
    .svg-stroke-gray-800 path {
        stroke: var(--color-gray-800);
    }
    .svg-fill-gray-900,
    .svg-fill-gray-900 path {
        fill: var(--color-gray-900);
    }
    .svg-stroke-gray-900,
    .svg-stroke-gray-900 path {
        stroke: var(--color-gray-900);
    }
/* SVG SIZES STYLES */    
    .iconSize-8 {width: 8px;height: 8px;}    
    .iconSize-10 {width: 10px;height: 10px;}    
    .iconSize-12 {width: 12px;height: 12px;}    
    .iconSize-14 {width: 14px;height: 14px;}    
    .iconSize-15 {width: 15px;height: 15px;}    
    .iconSize-16 {width: 16px;height: 16px;}    
    .iconSize-18 {width: 18px;height: 18px;}    
    .iconSize-20 {width: 20px;height: 20px;}    
    .iconSize-22 {width: 22px;height: 22px;}    
    .iconSize-24 {width: 24px;height: 24px;}    
    .iconSize-25 {width: 25px;height: 25px;}    
    .iconSize-28 {width: 28px;height: 28px;}    
    .iconSize-30 {width: 30px;height: 30px;}
    .iconSize-32 {width: 32px;height: 32px;}    
    .iconSize-34 {width: 34px;height: 34px;}    
    .iconSize-35 {width: 35px;height: 35px;}    
    .iconSize-36 {width: 36px;height: 36px;}    
    .iconSize-38 {width: 38px;height: 38px;}    
    .iconSize-40 {width: 40px;height: 40px;}    
    .iconSize-42 {width: 42px;height: 42px;}    
    .iconSize-44 {width: 44px;height: 44px;}    
    .iconSize-45 {width: 45px;height: 45px;}    
    .iconSize-48 {width: 48px;height: 48px;}    
    .iconSize-50 {width: 50px;height: 50px;}    
    .iconSize-80 {width: 80px;height: 80px;}    
    .iconSize-100 {width: 100px;height: 100px;}    
    .iconSize-150 {width: 150px;height: 150px;}    
    .iconSize-200 {width: 200px;height: 200px;} 
/*TICKR BAR */    
    .ticker-bar span{ white-space:nowrap; }
    .ticker-bar  span{font-size: 0.8rem}
/*STOCK CARD */    
    .stock-card p{line-height: 1.1}
    .stock-card .card-header { background: transparent; font-weight: 700; }
    .gain {color: var(--color-green); font-weight: 600; }
    .loss { color: var(--color-red);font-weight: 600;}
    .table tbody tr:hover {background-color: var(--bg-light2);cursor: pointer;}
/*ARTCILE NEWS */
    .article-card {min-height: 480px;overflow: hidden;}
    .article-card img,.article-small-card img {width: 100%;height: 100%;object-fit: cover;}
    .article-card-overlay {position: absolute;inset: 0;top: 0;background: var(--gradient1);}
    .article-card-content {position: absolute;bottom: 0;padding: 2rem;color: var(--color-white-same);}
    .saved-article-button{position: absolute;top: 5px;right: 5px;z-index: 1000;width: 30px;height: 30px}
/* SUB SECTION NEWS */
    .article-card.article-small-card {min-height: 240px;max-height: 240px;}
    .article-card.article-small-card .article-card-content{padding: 1rem}
/* latest-announcements-table */
    .latest-announcements-table tr{background: var(--color-gray-100);border: 0;margin: 5px 0;
        border-radius: 5px;position: relative;}
    .latest-announcements-table td{padding: .2rem .5rem; background: transparent;border: 0}   
    .latest-announcements-table{border-collapse: separate;border-spacing: 0 5px;white-space: nowrap;}
/* SAVED AND READ ARTICLES */
    .remove-article-button{display: none;opacity: 0}
    .articles-card-body .articles-card:hover .remove-article-button{display: inline-block;opacity: 1}
/* HERO : INVESTMENT */
    .hero-investment {
        position: relative;
        min-height: 100vh;
        padding: 80px 0 40px;
        background:
        radial-gradient(600px 400px at 10% 10%, rgba(13,110,253,0.15), transparent 60%),
        radial-gradient(500px 350px at 90% 80%, rgba(25,135,84,0.12), transparent 60%),
        var(--color-black);
        overflow: hidden;
    }
    .hero-investment * {
        color: var(--color-white);
    }
    .hero-investment .hero-inner {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 24px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 64px;
        align-items: center;
        position: relative;
        z-index: 2;
    }
    /* LEFT CONTENT */
        .hero-investment .hero-left {
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        .hero-investment .hero-title {
            font-size: 4.2rem;
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -0.02em;
        }

        .hero-investment .hero-highlight {
            font-size: 3.5rem;
            background: linear-gradient(90deg, #1880FF, #61A8FE, #B0F1C4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-investment .hero-cta {
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .hero-investment .hero-btn {
            padding: 14px 40px;
            font-size: 1.05rem;
            font-weight: 700;
            border-radius: 999px;
            background: linear-gradient(135deg, #FFD36A, #FFB703);
            color: #000;
        }

        .hero-investment .hero-btn:hover {
            transform: translateY(-2px) scale(1.02);
        }

        .hero-investment .hero-meta {
            font-size: 0.75rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            opacity: 0.8;
            position: relative;
            padding-left: 56px;
        }

        .hero-investment .hero-meta::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 40px;
            height: 1px;
            background: rgba(255,255,255,0.4);
        }

    /* RIGHT CARDS */
        .hero-investment .hero-cards {
            position: relative;
            height: 560px;
        }

        .hero-investment .hero-card {
            position: absolute;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 18px;
            padding: 24px;
            width: 220px;
            height: 220px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 14px;
            text-align: center;
            backdrop-filter: blur(12px);
        }

        .hero-investment .hero-card h3 {
            font-size: 1rem;
            font-weight: 600;
            color: #fff;
        }

    /* ICONS */
        .hero-investment .card-icon {
            width: 72px;
            height: 72px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
        }

    /* MUTUAL FUNDS */
        .hero-investment .card-mf {
            top: 0;
            left: 40px;
        }
        .hero-investment .mf-icon {
            background: rgba(13,110,253,0.2);
        }

    /* STOCKS */
        .hero-investment .card-stocks {
            top: 80px;
            right: 0;
            width: 200px;
            height: 200px;
            opacity: 0.9;
        }
        .hero-investment .stock-icon {
            background: rgba(16,185,129,0.2);
        }

    /* F&O */
        .hero-investment .card-fo {
            bottom: 80px;
            left: 120px;
            width: 260px;
            height: 180px;
        }
        .hero-investment .fo-icon {
            background: rgba(24,128,255,0.25);
        }

        .hero-investment .badge-weekly {
            position: absolute;
            top: 12px;
            right: 12px;
            font-size: 0.6rem;
            font-weight: 700;
            padding: 4px 8px;
            border-radius: 6px;
            background: rgba(0,0,0,0.6);
            border: 1px solid var(--color-first);
            color: var(--color-first);
        }

    /* IPO */
        .hero-investment .card-ipo {
            bottom: 0;
            right: 20px;
            width: 200px;
            height: 200px;
        }

        .hero-investment .ipo-text {
            font-size: 2rem;
            font-weight: 800;
            letter-spacing: -0.05em;
            color: #FFD36A;
            text-shadow: 0 0 12px rgba(255,211,106,0.6);
        }

    /* GLOW EFFECT */
        .hero-investment .glow {
            box-shadow:
                0 0 40px rgba(24,128,255,0.15),
                inset 0 0 20px rgba(24,128,255,0.15);
        }
/* MARKET SNAPSHOT STYLES */
    .market-card {
        position: relative;
        transition: all var(--transition-fast);
        border: 2px solid var(--color-gray-200);
    }
    .market-card:hover {box-shadow: var(--shadow-md);border-color: var(--color-blue-200);}
    .info-icon, .star-icon {cursor: pointer;}
    .market-chart {height: 60px;position: relative;}
    .market-chart svg {width: 100%;height: 100%;}
    .chart-area {opacity: 0.1;}
    .chart-line {fill: none;stroke-width: 2;}
    .positive .chart-line {stroke: var(--color-green-600);}
    .positive .chart-area {fill: var(--color-green-600);}
    .negative .chart-line {stroke: var(--color-red-600);}
    .negative .chart-area {fill: var(--color-red-600);}
    .stock-progress-bar{height: 5px}
    .signal-hold {color:var(--color-orange-700);}
    .signal-sell {color: var(--color-red-700);}
    .signal-buy {color: var(--color-green-700);}
    .volume-badge,.momentum-badge {padding: 0.15rem 0.425rem;}
    .custom-font-size-tooltip{font-size: 0.7rem;}
/* UPGRADE BANNER STYLES */
    .upgrade-icon {width: 48px;height: 48px;background-color: rgba(255, 255, 255, 0.2);}
    .upgrade-text {color: var(--color-white-same);}
/* FOR YOU PAGE STYLES */
    .signals-list li {position: relative;padding-left: 20px; font-size: 0.8rem;color: var(--color-gray-600);}
    .signals-list li:before{
        position: absolute;
        content: '';
        width: 5px;height: 5px;
        background: var(--color-blue-500);
        border-radius: 50%;
        left: 0;
        top: 8px;
    }
    .accordion-button:not(.collapsed){background:transparent;box-shadow: none;}
    .accordion-button:focus{box-shadow: none;}
    .showchat{
        width: 100%;
        height: 300px;
        overflow-y:auto;
        scrollbar-width: thin;
    }
    .showchat::-webkit-scrollbar,
    .showchat::-webkit-scrollbar-thumb {overflow:visible;border-radius: 4px;}
    .showchat .msg-chat-box{
        position: relative;
        width: auto;
        margin: .5rem;
        max-width: 70%;
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        position: relative;
    }
    .showchat .left-chat-box{float: left;padding-left: 45px}
    .showchat .right-chat-box{float: right;padding-right: 50px}
    .chat-name{position: absolute;top: 0;width: 40px;height: 40px}
    .showchat .msg-chat-box.left-chat-box .chat-name{left: 0;}
    .showchat .msg-chat-box.right-chat-box .chat-name{right: 0;}
    .showchat .msg-chat-box .chat-box-content{
        padding:5px 10px;
        border-radius:10px;
        color: var(--color-black);        
        width: auto;
    }
    .showchat .msg-chat-box.left-chat-box .chat-box-content{background-color: var(--color-gray-200);}
    .showchat .msg-chat-box.right-chat-box .chat-box-content{background-color: var(--color-first);}
    .showchat .msg-chat-box.left-chat-box .chat-box-content p,
    .showchat .msg-chat-box.left-chat-box .chat-box-content span,
    .showchat .msg-chat-box.left-chat-box .chat-box-content label,
    .showchat .msg-chat-box.left-chat-box .chat-box-content strong,
    .showchat .msg-chat-box.left-chat-box .chat-box-content b{color: var(--color-black);margin-bottom: 0;
        font-size: 0.85rem;}    
    .showchat .msg-chat-box.right-chat-box .chat-box-content p,
    .showchat .msg-chat-box.right-chat-box .chat-box-content span,
    .showchat .msg-chat-box.right-chat-box .chat-box-content label,
    .showchat .msg-chat-box.right-chat-box .chat-box-content strong,
    .showchat .msg-chat-box.right-chat-box .chat-box-content b{color: var(--color-white-same);margin-bottom: 0;
        font-size: 0.85rem;}
    .chat-input-box{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .chat-input-box .input-box-field{ width: 94%; background-color:var(--color-gray-200); border: 0; }
    .chat-input-box .submit-chat-button{width: 5%;background: var(--color-black);border: 0;min-height: 44px}
    .chat-input-box .submit-chat-button.opacity-75{cursor: not-allowed;}   
    .chat-input-box .input-box-field:focus + .submit-chat-button i{color:#251b9e;}
    .chat-list-buttons-block{display: flex;flex-wrap: wrap;}
    .chat-list-buttons-block .chat-list-button{
        background: var(--color-blue-100);
        padding: 6px;
        color:var(--color-blue-700);
        margin: 5px;
        font-size: 1rem;
        border: 0;
        border-radius: 10px;
        text-align: left;
    }
/* WATCHLIST PAGE STYLES */    
    .watchlist-main .watchlist-btn[data-active="true"] svg {
        fill: var(--color-blue-500);
        stroke: var(--color-blue-500);;
    }
    .WatchlistModal .btn-custome-check{
        border: 1px solid var(--color-gray-200);
        max-width: 122px;
    }
    .preset-card,.topic-chip { transition: all 0.2s; }
    .preset-card:hover { border-color: var(--color-blue-500) !important; }
    .preset-card.active { border-color: var(--color-first) !important; border-width: 2px; }
    .form-check-input:checked {
        background-color: var(--color-first);
        border-color: var(--color-first);
    }
    .topic-chip.selected {
        color: var(--color-white-same) !important;
        border-color: transparent;
        background-color: var(--color-first);
    }
    .topic-chip.selected * { color: var(--color-white-same) !important; }
    .topic-chip.unselected {
        background-color: var(--color-gray-100);
        color: var(--color-gray-700);
    }
    .topic-chip svg,.topic-chip.unselected svg{ display: none;} 
    .topic-chip.selected svg{display: block !important;} 
    input[type="range"].rangeSlider {
        -webkit-appearance: none;
        appearance: none;
        height: 6px;
    }
    input[type="range"].rangeSlider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--color-first);
        cursor: pointer;
        border: 3px solid  var(--color-white);
        box-shadow: 0 0 0 1px var(--color-first);
    }
    input[type="range"].rangeSlider::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--color-first);
        cursor: pointer;
        border: 3px solid var(--color-white);
        box-shadow: 0 0 0 1px var(--color-first);
    }
    input[type="range"].rangeSlider::-moz-range-progress {
        background-color: var(--color-first);
        height: 6px;
        border-radius: 3px;
    }
    input[type="range"].rangeSlider::-moz-range-track {
        background-color: var(--color-gray-200);
        height: 6px;
        border-radius: 3px;
    }
    .btn-check:checked + label.market-chip-btn{
        background-color: var(--color-first) !important;
        color: var(--color-white-same);
    }
/* LOGIN FLOW PAGES STYLES */ 
    #login-nav-tab.nav-tabs .nav-item .nav-link{color: var(--color-black);}
    #login-nav-tab.nav-tabs .nav-item.show .nav-link,
    #login-nav-tab.nav-tabs .nav-link.active{background-color: var(--color-blue-100);
        color: var(--color-blue-700);
    }
    .login-form-section .color-bar-area{
        display: flex;
        align-items: center;
    }
    .login-form-section .color-bar-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 20px;
    }
    .login-form-section .color-bar-area .color-bar {
        width: 52px;
        height: 5px;
        border-radius: 25px;
        margin-right: 10px;
    }
    .login-form-section .color-bar-area .color-bar1 {background-color: var(--color-red);}
    .login-form-section .color-bar-area .color-bar2 {background-color: var(--color-orange-600);}
    .login-form-section .color-bar-area .color-bar3 {background-color: var(--color-gray-700);}
    .my-alert{
        text-align: center;
        width: 100%;
        border-radius: 5px;
        border: 1px solid;
        padding: 16px 32px;
        margin: 20px 0 0 0;
    }
    .alert-success {
        color: var(--color-green-700);
        border-color: var(--color-green-500);
        background-color: var(--color-green-100);
    }
    .alert-error {
        color: var(--color-red-700);
        border-color: var(--color-red-500);
        background-color: var(--color-red-100);
    }
    .error-text {color: var(--color-red) !important;}
    .error-input, .error-input::placeholder {color: var(--color-red) !important;border: 1px solid var(--color-red) !important;}
    .success-text {margin: 32px 0 0 0;}
    .iti {width: 100%}
    .iti__search-input-wrapper{height: 40px;}
    .iti__search-input,.iti__search-input:focus{border: 0;outline: 0;box-shadow: 0;}
    .iti__search-input{padding-left: 40px !important;}
    /*.form-label {font-size:0.85rem;color: var(--color-white-same) !important;margin-bottom: 4px;}*/
    .form-required {color: red !important;font-weight: 600;}
    .form-check {display: flex;gap: 8px;}
    .form-check-input:hover,.form-check-input:focus{box-shadow: none;}
    .form-check-input:checked { background-color: var(--color-first); border-color: var(--color-first); }
    .form-check-input {width: 1.2em;height: 1.2em;border-width: 2px;}
    /*Phone no input*/
        ul.iti__country-list li:before {display: none;}
        .iti__search-input {padding: 4px 12px;}
        .iti__search-input::placeholder, .iti__selected-dial-code {color: var(--color-black);font-weight: 500;}
        .iti__search-input, .iti__dropdown-content {color: var(--color-content);background-color: var(--color-white);}
        .iti__country-name, .iti__dial-code {font-size: 14px;color: var(--color-content);margin-bottom: 0;}
    /*Phone no input end*/
/* ARTICLE PAGE STYLES */
    .filter-topic .btn-check +.btn{border: 1px solid var(--color-black);font-size: 0.8rem;
        padding:0.15rem 0.5rem; 
    }
    .filter-topic .btn-check:checked+.btn,.filter-topic .btn.active,.filter-topic .btn.show, 
    .filter-topic .btn:first-child:active,.filter-topic  :not(.btn-check)+.btn:active{
        background-color: var(--color-black) !important;color: var(--color-white);
    }
    .arrow-icon { transition: transform 0.6s ease;}
    .ai-summary-content {display: none;}
    /* Rotated state */
    .arrow-rotate {
      transform: rotate(-180deg);
    }
/* ARTICLE DETAILS PAGE STYLES */
    .article-details-content h1,.article-details-content h2,.article-details-content h3,
    .article-details-content h4,.article-details-content h5,.article-details-content h6{
        color: var(--color-black);
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.2;
        margin: 8px 0 20px 0;
    }
    .article-details-content p, .article-details-content p span, .article-details-content span p, 
    .article-details-content p strong, .article-details-content span, .article-details-content a, 
    .article-details-content p a, .article-details-content ul li, .article-details-content ul li strong, 
    .article-details-content ul li a, .article-details-content ul li a strong, .article-details-content ol li, 
    .article-details-content ol li strong, .article-details-content ol li a, 
    .article-details-content ol li a strong, .sitemapList ul li {
        color: var(--color-black);
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 0px;
    }
    .article-details-content strong, .article-details-content b {font-weight: 600;}
    .article-details-content ol{padding-left: 15px}
    .article-details-content ul{padding-left: 15px}
    .article-details-content ul li{list-style:disc;}
    .article-details-content li{margin-bottom: 10px !important;}
    .article-details-content a, .article-details-content p a, .article-details-content ul li a, 
    .article-details-content ol li a, .article-details-content span a{color: var(--color-first);}
    .article-details-content img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border-radius: 16px;
    }
    /*** AUTHOR ***/
    .author-details .author-txt{margin-left: 10px;width: 80%;}
    .author-details .author-img,.author-details .author-txt{clear: both;}
    .author-details .author-img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        margin: 0 0 0 0;
    }
    .author-details .author-txt span{color: var(--color-gray-900);}
    .author-details .author-txt a{color: var(--color-first);}
    .seperatorLine{border-right: 1px solid var(--color-gray-900); padding-right: 5px;margin-right: 5px}
/* FAQ PAGE STYLES */
    #accordionFaqs .accordion-button:not(.collapsed) {background-color:var(--color-white);}
    #accordionFaqs .accordion-collapse.collapse, .accordion-button, .accordion-item, .accordion-header { border: none; outline: none; }
    #accordionFaqs .accordion-button:focus {border: none;outline: none;box-shadow: none;}
    #accordionFaqs .accordion-item,.accordion-button{background-color: var(--color-white);color: var(--color-black);}
    #accordionFaqs .accordion-item,.accordion-button{background-color: var(--color-white);color: var(--color-black);}    
/* COMPARE PAGE STYLES */
    @media (max-width: 767px) {
        .stock-table .sticky-col {
            position: sticky;
            left: 0;
            background-color: var(--bg-light3);
            z-index: 10;
            box-shadow: var(--shadow-sm);        
        }
    }
    button:focus:not(:focus-visible) {outline: 0;box-shadow: none;}
    .small-placeholder::placeholder ,.small-placeholder::-webkit-input-placeholder,
    .small-placeholder:-ms-input-placeholder { font-size: 0.8rem; color: var(--color-black-same);}  
    table.stock-table tbody tr:last-child {
        border: 0;
        border-color: transparent;
    }
    .search-result-item {
        transition: background-color 0.2s;
    }
    .search-result-item:hover {
        background-color:var(--color-gray-100)  !important;
    }
    [data-bs-theme="dark"] .search-result-item:hover {
        background-color: var(--bg-light3) !important;
        color: var(--color-white-same) !important;
    }
    /*[data-bs-theme=dark] .btn-close {filter: none !important;}  */
/* MARKET DETAILS PAGE STYLES */
    .order-book-row-fill {position: relative;}
    .order-book-row-fill .bg-green,.order-book-row-fill .bg-red{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 0;
    }
    .order-book-row-fill .bg-green {background-color: var(--color-green-50);}
    .order-book-row-fill .bg-red {background-color: var(--color-red-50);}
    .order-book-content {position: relative;z-index: 1;background: transparent;}
    .order-book-content .col-4 {color: inherit;}
/* ================= RESPONSIVE ================= */
    @media screen and (max-width: 991px) {
        .hero-investment .hero-inner {
            grid-template-columns: 1fr;
            gap: 48px;
        }

        .hero-investment .hero-cards {
            height: 480px;
        }

        .hero-investment .hero-title {
            font-size: 2.4rem;
        }
    }

    @media screen and (max-width: 767px) {
        .hero-investment {
            padding: 60px 0 32px;
        }

        .hero-investment .hero-title {
            font-size: 1.9rem;
        }

        .hero-investment .hero-meta {
            display: none;
        }

        .hero-investment .hero-cards {
            height: 420px;
        }

        .hero-investment .hero-footer {
            flex-direction: column;
            gap: 8px;
            text-align: center;
        }
    }

/* ================= NEWSLETTER ================= *
    .site-newsletter {
        background: linear-gradient(
            135deg,
            var(--color-first),
            var(--color-second)
        );
        color: #fff;
    }

    .site-newsletter__title {
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 1.2;
        color: #fff;
        margin-bottom: 12px;
    }

    .site-newsletter__desc {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.85);
        max-width: 520px;
    }

    .site-newsletter__form {
        display: flex;
        gap: 12px;
        background: var(--color-white);
        padding: 8px;
        border-radius: 14px;
        box-shadow: var(--shadow);
    }

    .site-newsletter__form input {
        flex: 1;
        border: none;
    }

    .site-newsletter__form button {
        white-space: nowrap;
    }
/*................... HOME PAGE END ...................*/
/*========== @media screen  ================================*/
    @media screen and (max-width: 1024px) {
        *{font-size: 15px}
        .mainHeading{font-size:2.3rem;}
        .largeHeading{font-size:2rem;}
        .subHeading {font-size: 1.2rem;}
        .thirdHeading {font-size: 1.1rem;}
    }
    @media screen and (max-width: 992px) {
        body{padding-top:75px;}
        .mainHeading{font-size:2.1rem;}
        .largeHeading{font-size:1.8rem;}
        .subHeading {font-size: 1.1rem;}
        .thirdHeading {font-size: 1rem;}
        /*Home*/
        .article-card {min-height: 420px;}
        .article-small-card {height: 200px;}       
        .site-footer__right {
            border-left: none;
            padding-left: 0;
        }
        .site-newsletter__form {
            flex-direction: column;
        }
        .site-newsletter__form button {
            width: 100%;
        }
        .remove-article-button{display: inline-block;opacity:1}
    }
    @media screen and (max-width: 768px) {
        *{font-size: 14px}
        .article-card-content{padding: 1rem}
        .chat-input-box .input-box-field{ width: 80%; min-height: 35px}
        .chat-input-box .submit-chat-button{width: 15%;min-height: 35px}
        .chat-input-box .submit-chat-button svg{width: 20px;height: 20px}
    }
    @media screen and (max-width: 575px) {
        body{padding-top:85px;}
        .mainHeading {font-size:1.8rem;}
        .largeHeading {font-size: 1.5rem;}
        .subHeading {font-size: 1.1rem;}
        .thirdHeading {font-size: 1rem;}
        .button-style, input[type=submit].button-style{padding: 5px 20px;font-size: 0.9rem}
        .general-tabs-nav .nav-link,.general-tabs-nav .nav-link.text-sm{font-size: 0.8rem !important}
        .general-tabs-nav .nav-link svg{display: none;}
        .latest-announcements-table th.text-md{font-size: 0.8rem !important}
    }
[data-bs-theme="dark"] .stock-card svg.svg-stroke-gray-500, 
[data-bs-theme="dark"] .stock-card svg.watchlist-off.svg-stroke-gray-500 path{stroke: var(--color-gray-900) !important;}
[data-bs-theme="dark"] .trending-divident-stocks-section .stock-card svg.svg-stroke-gray-500, 
[data-bs-theme="dark"] .trending-divident-stocks-section .stock-card svg.watchlist-off.svg-stroke-gray-500 path{
    stroke: var(--color-gray-500) !important;
}
[data-bs-theme="dark"] .watchlist-section .stock-card .color-gray-800,
[data-bs-theme="dark"] .trending-divident-stocks-section .stock-card .color-gray-800{color: #f6f3f4 !important;}
[data-bs-theme="dark"] .market-details-section .color-gray-800{color: var(--color-gray-300) !important;}