/* Root variables for the website */
:root {
    /* Background colors */

    /* Landing page and Hero Section */
    --hero-bg: #1717e7;
    --hero-section-primary: #c6e2ff; 
    --hero-section-secondary: #75E6DA;
    --hero-section-tertiary: #ffffff;
    --hero-text-primary: #ffffff;
    --hero-text-secondary: #003366;
    --hero-text-tertiary: #004477;

    /* Hero Text Color */
    --hero-text-black: #1d1d1d;
    --text-pitch-black: #000000;


    /* Product Pages Pallette */
    --productPageBackground: #000;
    --productPageBackgroundContrast: #111;
    --productPageText: #1d1d1d;
    --productPageTextWhite: #fff;

    --pages-background-secondary: #75E6DA;
    --pages-background-tertiary: #e0efff;

    /* blue */
    --website-bg-color: #1717e7;
    --blue: #2c5491;
    --light-blue: #c6e2ff; 
    --v-light-blue: #e0efff; 
    --vv-light-blue: #f9fcff;
    --dark-blue: #003366;

    /* Form colors */
    --form-light-color: #fdfdfd;
    
    /* Greyscale colors */
    --dark: #342E37;
    --dspro-bgcolor: rgba(19, 27, 38, 1);
    --grey: #eeeeee;
    --light-grey: #eeeeee;
    --dark-grey: #e1e1e1;
    --darkergrey: #999999;

    /* Basic colors */
    --white: #ffffff;
    --light: #F9F9F9;

    /* Additional colors */
    --red: #DB504A;
    --yellow: #FFCE26;
    --light-yellow: #FFF2C6;
    --orange: #FD7238;
    --light-orange: #FFE0D3;

    /* Layout dimensions */
    --sidebar-width: 180px;


    /* Border size */
    --bbsize: 2px;

    /* Demand Side Pages */
    --brand-bg: #1717e7;
    --brand-font: #ffffff;
    --brand-line: #F9F9F9; 

    /* Default Font Size */
    font-size: 16px;

    /* Default fonts */
    --default-font-family: "Noto Sans", sans-serif; /* Set your preferred font family */
    --default-font-size: 16px;
    --default-line-height: 1.5;
    --default-font-weight: 400;
    --default-font-optical-sizing: auto;
    --default-font-variation-settings: "wdth" 100;

    --font-size-xs: 0.75rem;  /* Extra Small (12px) */
    --font-size-sm: 0.875rem; /* Small (14px) */
    --font-size-md: 1rem;     /* Medium (16px, default size) */
    --font-size-lg: 1.25rem;  /* Large (20px) */
    --font-size-xl: 1.5rem;   /* Extra Large (24px) */
    --font-size-2xl: 2rem;    /* Extra Extra Large (32px) */
    --font-size-3xl: 3rem;    /* 3XL (48px) */
    --font-size-4xl: 4rem;    /* 4XL (64px) */
    --font-size-5xl: 5rem;    /* 5XL (80px) */
    --font-size-8xl: 8rem;    /* 8XL (144px) */
    --font-size-10xl: 10rem;    /* 5XL (160px) */

    --hero-font-landing: "Noto Sans", sans-serif; 


}

body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: var(--font-size-md);
  font-family: var(--default-font-family);
}