/*--------------------------------------------------------------
# Font & Color Variables
--------------------------------------------------------------*/

/* Fonts */

:root {
    --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Nunito", sans-serif;
    --nav-font: "Inter", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */


:root {
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --default-color: #212529; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #2d465e; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #0d83fd; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}


/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */


:root {
    --nav-color: #212529; /* The default color of the main navmenu links */
    --nav-hover-color: #0d83fd; /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #0d83fd; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
    --background-color: #f3f9ff;
    --surface-color: #ffffff;
}

/* .dark-background {
    --background-color: #0d83fd;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #409dfd;
    --contrast-color: #ffffff;
} */

/* Color  - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

:root {

    --whitebg: #ffffff;
    --blackbg: #000000;
    --blackbg1:#23262F;
    --redbg: #9d1d27;
    --greenbg: #00AE4E;
    --lightGreenbg: #E5F7ED;
    --greybg: #E9E9E9;
    --bluebg:#2861f7;




    --border-white: #ffffff;
    --borderGrey1:#b8b8b8;





    --darkred1: #9d1d27;
    --darkred2: #9B1E26;
    --darkred3: #7e171f;
    --darkred4: #AE4632;
    --darkred5: #FF496A;
    --darkred6: #9A1B24;
    --darkred7:#d61448;

    --lightred1: #f4e8e5;

    --darkGrey1: #000000;
    --darkGrey2: #333333;
    --darkGrey3: #635b5b;
    --darkGrey4: #58595B;
    --darkGrey5: #58595B;
    --darkGrey6: #555454;
    --darkGrey7: #5f5f5f;
    --darkGrey8: #58595B;
    --darkGrey9: #686666;
    --darkGrey10: rgb(0 0 0 / 19%);
    --darkGrey11:#9d9d9d;
    --darkGrey12:#494949;
    --darkGrey13:#9d9c9c;
    --darkGrey14:#807E7E;
    --darkGrey15:#0E0E0E;

    --lightGrey1: #E5F7ED;
    --lightGrey2: #dddddd;
    --lightGrey3: #ECECEC;
    --lightGrey4: #F3F3F3;
    --lightGrey5: #e4e4e4;
    --lightGrey6: #f4f4f4;
    --lightGrey7: #dbdbde;
    --lightGrey8: #F6F6F6;
    --lightGrey9: #e5e5e5;
    --lightGrey10:#F2F2F2;
    --lightGrey11:#C9C9C9;
    --lightGrey11:#C9C9C9;
    --lightGrey12: #A8A8A8;
    --lightGrey13:#CFCFD7;
    --lightGrey14:#EFEFEF;
    --lightGrey15:#E6E6E6;
    --lightGrey16:#ededed;
    --lightGrey17:#eeeeee;
    --lightGrey18:#616161;
    --lightGrey19:#b8b8b8;
    
    
    

    
    --darkgreen1: #00AE4E;
    --darkgreen2: #307930;
    --darkgreen3: #88cd88;

    --darkYellow:#fdb917;
    --lightYellow:#BEA313;



     /* Font Weight */
     
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    
    /* Font Size */

    --fs-10: 10px;
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-17: 17px;
    --fs-18: 18px;
    --fs-19: 19px;
    --fs-20: 20px;
    --fs-21: 21px;
    --fs-22: 22px;
    --fs-23: 23px;
    --fs-24: 24px;
    --fs-25: 25px;
    --fs-26: 26px;
    --fs-27: 27px;
    --fs-28: 28px;
    --fs-29: 29px;
    --fs-30: 30px;
    --fs-31: 31px;
    --fs-32: 32px;
    --fs-33: 33px;
    --fs-34: 34px;
    --fs-35: 35px;
    
     /* line height*/

    --lh-11: 11px;
    --lh-12: 12px;
    --lh-13: 13px;
    --lh-14: 14px;
    --lh-15: 15px;
    --lh-16: 16px;
    --lh-17: 17px;
    --lh-18: 18px;
    --lh-19: 19px;
    --lh-20: 20px;
    --lh-21: 21px;
    --lh-22: 22px;
    --lh-23: 23px;
    --lh-24: 24px;
    --lh-25: 25px;
    --lh-26: 26px;
    --lh-27: 27px;
    --lh-28: 28px;
    --lh-29: 29px;
    --lh-30: 30px;
    --lh-31: 31px;
    --lh-32: 32px;
    --lh-33: 33px;
    --lh-34: 34px;
    --lh-35: 35px;
    --lh-39: 39px;
    --lh-48: 48px;
    
    /*z-index*/

    --z-ind-1:-1;
    --z-ind10:10;
    --z-ind1000:1000;
    
    /*Border Radius*/

    --rounded-0: 0px;
    --rounded-1: 1px;
    --rounded-2: 2px;
    --rounded-3: 3px;
    --rounded-4: 4px;
    --rounded-5: 5px;
    --rounded-6: 6px;
    --rounded-7: 7px;
    --rounded-8: 8px;
    --rounded-9: 9px;
    --rounded-10: 10px;
    --rounded-11: 11px;
    --rounded-12: 12px;
    --rounded-16: 16px;
    --rounded-30: 30px;
    --rounded-37: 37px;
    --rounded-50: 50%;    
    
   

}



/* Smooth scroll */


:root {
    scroll-behavior: smooth;
}


/*  All H Colors  */

.fil-he {
    color: var(--color9);
}
.ka-nam {
    background: var(--darkred1);
    color: var(--surface-color);
}

/* Home Page  */

.earn-boxactive {
    background: var(--surface-color);
}
.tren-bg {
    background: var(--lightGrey6);
}
.earnbonuspoints {
    background: var(--lightGrey4);
}
.shopyour-way{background: var(--lightred1);}
.paywith-border {
    border-top: 1px var(--lightGrey11) dashed;
}
.productslider .productdata .orpaymoresecond {
    color: var(--darkred6);
}
.orpaymorefirst {
    color: var(--lightGrey12);
}