@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Kalam:wght@300;400;700&family=Playfair+Display:wght@400;500;700&family=Roboto:wght@400;500;700&family=Sacramento&display=swap');

:root {
  --playfair: "Playfair Display", serif;
  --ibm: "IBM Plex Sans", sans-serif;
  --kalam: 'Kalam', cursive;
  --roboto: 'Roboto', sans-serif;
  --sacramento: 'Sacramento', cursive;

  --h_title: #1d2746;
  --p_color: #3d3d4e;
  --black_25: #f9f9f9;
  --black_50: #e8e6e6;
  --black_100: #ccccce;
  --black_150: #c8ccd0;
  --black_200: #b9b9ba;
  --black_300: #9d9ca0;
  --black_350: #9199a1;
  --black_400: #8a898d;
  --black_500: #747376;
  --black_600: #5c5b5e;
  --black_700: #464547;
  --black_750: #2f3337;
  --black_800: #242729;
  --black_900: #17161a;
  --brand_dot1: #e52392;;
  --brand_dot2: #2689ca;
  --brand_dot3: #64b875;
  --brand_color: #ef4953;
    --brand_color_50: #fde9ea;
    --brand_color_100: #fbd6d8;
    --brand_color_200: #f8b0b5;
    --brand_color_300: #f58a92;
    --brand_color_400: #f2646f;
    --brand_color_500: #ef4953;
    --brand_color_600: #d93f4a;

  --baseColor2: #4a6ee0;
  --hover3: #c6e7f7;
  --clr-black: #000000;
  --white: #ffffff;
  --white_100: #F5F5F5;
}

$container-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1170px,
  xxl: 1170px,
  ) !default;

// Responsive Variables
$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1441px,
  ) !default;

$columns: 12 !default;
$gutter-width: 30px;

// Font Family

$font: var(--ff-roboto
);
$global-font: $font;

//Heading H1 Responsive Font Size
$min_width: 20rem;
$max_width: 75rem;
$h1_min_font: 2rem;
$h1_max_font: 3.75rem;

//Heading H2 Responsive Font Size
$h2_min_font: 2rem;
$h2_max_font: 3rem;

//Heading H3 Responsive Font Size
$h3_min_font: 1.375rem;
$h3_max_font: 1.5rem;

//Heading H4 Responsive Font Size
$h4_min_font: 1rem;
$h4_max_font: 1.125rem;

// Global Font Size
$global-font-size: var(--fs-15);

// Global Color

// Colors ---------------
$black: var(--clr-black) !default;
$white: var(--white) !default;

$global-color: $black !default;

/*font Variables*/
$playfair: var(--playfair);
$ibm: var(--ibm);

$h_title: var(--h_title);
$p_color: var(--p_color);
$black_25: var(--black_25);
$black_50: var(--black_50);
$black_100: var(--black_100);
$black_150: var(--black_150);
$black_200: var(--black_200);
$black_300: var(--black_300);
$black_350: var(--black_350);
$black_400: var(--black_400);
$black_500: var(--black_500);
$black_600: var(--black_600);
$black_700: var(--black_700);
$black_750: var(--black_750);
$black_800: var(--black_800);
$black_900: var(--black_900);
$brand_color: var(--brand_color);
$brand_50: var(--brand_color_50);
$brand_100: var(--brand_color_100);
$brand_200: var(--brand_color_200);
$brand_300: var(--brand_color_300);
$brand_400: var(--brand_color_400);
$brand_500: var(--brand_color_500);
$brand_600: var(--brand_color_600);
$baseColor2: var(--baseColor2);
$hover3: var(--hover3);

$webkit: true !default;
$moz: false !default;
$ms: false !default;
$o: false !default;