//
// Variables
// --------------------------------------------------


// Import Bootstrap functions to use inside variables values
@import '../../../../node_modules/bootstrap/scss/functions';


//== Colors
//
// Gray and brand colors to use across the Theme.

// Grayscale
$white:                 #fff !default;
$gray-100:              #f8fafc !default;
$gray-200:              #f8f9fa !default;
$gray-300:              #e2e8f0 !default;
$gray-400:              #c0c0c5 !default;
$gray-500:              #94a3b8 !default;
$gray-600:              #575757 !default;
$gray-700:            	#071c4d !default;
$gray-800:              #0b163f !default;
$gray-900:              #010e2b !default;
$black:                 #0c0800 !default;

// Brand colors
$primary:               #175cff !default;
$accent:                #077765 !default;
$secondary:             $gray-400 !default;
$info:		            #50b5ff !default;
$success:               #5cc9a7 !default;
$warning:               #ffb116 !default;
$danger:                #f25767 !default;
$light:                 $white !default;
$dark:                  $gray-800 !default;

// Adding new color to default Bootstrap's $theme-colors map
$theme-colors: (
        'primary':    $primary,
        'accent':     $accent,
        "secondary":  $secondary,
        "success":    $success,
        "info":       $info,
        "warning":    $warning,
        "danger":     $danger,
        "light":      $light,
        "dark":       $dark
) !default;

// Faded colors map
$theme-faded-colors: (
        'primary':    rgba($primary, .09),
        'accent':     rgba($accent, .09),
        "success":    rgba($success, .09),
        "info":       rgba($info, .09),
        "warning":    rgba($warning, .09),
        "danger":     rgba($danger, .09),
        "light":      rgba($light, .09),
        "dark":       rgba($dark, .09)
) !default;

// Social brand colors
$facebook:      #3b5999;
$twitter:       #1da1f2;
$google:        #dd4b39;
$instagram:     #e4405f;
$pinterest:     #bd081c;
$youtube:       #cd201f;
$slack:         #3aaf85;
$dribbble:      #ea4c89;
$github:        #222222;
$dropbox:       #1E90FF;
$twitch:        #4B367C;
$paypal:        #ecb32c;
$behance:       #0057ff;
$reddit:        #E84422;
$figma:         #FF7262;
$zapier:        #FD4A01;
$drive:          #FFCF63;
$webflow:        #4353FF;

$brand-colors: ();
$brand-colors: map-merge((
        "facebook":     $facebook,
        "twitter":      $twitter,
        "google":       $google,
        "instagram":    $instagram,
        "pinterest":    $pinterest,
        "youtube":      $youtube,
        "slack":        $slack,
        "dribbble":     $dribbble,
        "dropbox":      $dropbox,
        "twitch":       $twitch,
        "paypal":       $paypal,
        "behance":      $behance,
        "reddit" :      $reddit,
        "github":       $github
), $brand-colors);

// Options
//
// Modifying Bootstrap global options

$enable-shadows:          false !default;
$enable-negative-margins: true !default;
$enable-smooth-scroll:    false !default;


// Spacing

$spacer: 1rem !default;
$grid-gutter-width: 1.5rem !default;

// Modifying default Bootstrap's $spacers map
$spacers: (
        0: 0,
        1: $spacer * .25,
        2: $spacer * .5,
        3: $spacer,
        4: $spacer * 1.5,
        5: $spacer * 3,
        10: ($spacer * 10),
        'grid-gutter': $grid-gutter-width
) !default;


// Body

$body-color:            $gray-600 !default;


// Lists

$list-style-color:      $accent !default;


// Links

$link-color:              $primary !default;
$link-decoration:         none !default;
$link-hover-color:        darken($link-color, 10%) !default;
$link-hover-decoration:   none !default;
$link-transition:         color .25s ease-in-out !default;
$link-shade-percentage:   0% !default;

//transition
$transition-base:          all .3s ease-in-out !default;


// Components
//
// Define common padding and border radius sizes and more.

$border-width:                1px !default;
$border-color:                rgba($dark, .12) !default;
$border-light-color:          rgba($white, .12) !default;

// Border colors map
$border-colors: (
        'primary':    rgba($primary, .35),
        'accent':     rgba($accent, .35),
        "success":    rgba($success, .35),
        "info":       rgba($info, .35),
        "warning":    rgba($warning, .35),
        "danger":     rgba($danger, .35),
        "light":      $border-light-color,
        "dark":       rgba($dark, .35)
) !default;

$border-radius:               .3125rem !default;
$border-radius-lg:            .4375rem !default;
$border-radius-sm:            .25rem !default;

$box-shadow:                  0 .25rem 0.5625rem -.0625rem rgba($black, .03), 0 .275rem 1.25rem -.0625rem rgba($black, .05) !default;
$box-shadow-lg:               0 .3rem 1.525rem -.375rem rgba($black, .1) !default;
$box-shadow-sm:               0 .125rem 0.3rem -.0625rem rgba($black, .03), 0 .275rem .75rem -.0625rem rgba($black, .06) !default;
$box-shadow-inset:            inset 0 1px 2px transparent !default;


$caret-width:                 .275rem !default;

$component-active-bg:         $primary !default;


// Fonts
//
// Font, line-height, and color for body text, headings, and more.

$path-to-fonts:               'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Poppins:wght@400;500;600;700;800&display=swap' !default;

$font-family-sans-serif:      'Open Sans', sans-serif !default;
$font-family-monospace:       'Poppins', sans-serif !default;


$headings-color:              $gray-800 !default;

$font-size-base:              1rem !default;
$font-size-xl:                ($font-size-base * 1.625) !default;
$font-size-lg:                ($font-size-base * 1.125) !default;
$font-size-md:                ($font-size-base * .9375) !default;
$font-size-sm:                ($font-size-base * .875) !default;
$font-size-ms:                ($font-size-base * .8125) !default;
$font-size-xs:                ($font-size-base * .75) !default;

$h1-font-size:                $font-size-base * 2.5 !default;
$h2-font-size:                $font-size-base * 2 !default;
$h3-font-size:                $font-size-base * 1.75 !default;
$h4-font-size:                $font-size-base * 1.5 !default;
$h5-font-size:                $font-size-base * 1.25 !default;
$h6-font-size:                $font-size-base * 1.0625 !default;

// Modifying default Bootstrap's $font-sizes map
$font-sizes: (
        1: $h1-font-size,
        2: $h2-font-size,
        3: $h3-font-size,
        4: $h4-font-size,
        5: $h5-font-size,
        6: $h6-font-size,
        'xl':   $font-size-xl,
        'lg':   $font-size-lg,
        'base': $font-size-base,
        'md':   $font-size-md,
        'sm':   $font-size-sm,
        'ms':   $font-size-ms,
        'xs':   $font-size-xs
) !default;

//lead
$lead-font-weight:            400 !default;


$font-weight-medium-light:    500 !default;
$font-weight-medium:          600 !default;
$font-weight-semibold:        700 !default;
$font-weight-bold:            800 !default;

$headings-font-family:        $font-family-monospace !default;
$headings-margin-bottom:      ($spacer * .625) !default;
$headings-font-weight:        $font-weight-medium !default;

$line-height-base:            1.75 !default;
$line-height-lg:              1.5 !default;
$line-height-sm:              1.5 !default;

$display-font-sizes: (
        1: 5rem,
        2: 4.5rem,
        3: 4rem,
        4: 3.5rem,
        5: 3rem,
        6: 2.5rem,
        404: 10rem
) !default;

$display-font-weight:         $headings-font-weight !default;

$small-font-size:             .8em !default;


$hr-margin-y:                 0 !default;
$hr-color:                    $border-color !default;
$hr-opacity:                  1 !default;

$text-shadow:                 0 .0625rem rgba($black, .5) !default;
$text-muted:                  $gray-500 !default;


$blockquote-font-size:        $font-size-base !default;
$blockquote-footer-font-size: $font-size-sm !default;


// Buttons + Forms

$input-btn-padding-y:               .625rem !default;
$input-btn-padding-x:               1rem !default;
$input-btn-padding-y-sm:            .425rem !default;
$input-btn-padding-x-sm:            .75rem !default;
$input-btn-padding-y-lg:            .75rem !default;
$input-btn-padding-x-lg:            1.25rem !default;
$input-btn-focus-width:             0 !default;

$input-btn-font-size:               ($font-size-base * .9375) !default;
$input-btn-font-size-sm:            ($font-size-base * .8125) !default;
$input-btn-font-size-lg:            ($font-size-base * 1.0625) !default;


$input-border-color:                $border-color !default;
$input-focus-border-color:          $primary !default;
$input-border-radius:               0.375rem !default;
$input-padding-y:                   0.65rem !default;
$form-select-padding-y:             $input-padding-y !default;

// Buttons
$btn-font-family:                   $font-family-monospace !default;
$btn-padding-x:                     1.75rem !default;
$btn-padding-y:                     .65rem !default;
$btn-padding-x-sm:                  1rem !default;
$btn-padding-x-lg:                  1.5rem !default;
$btn-white-space:                   nowrap !default;
$btn-border-radius:                 .375rem !default;

$btn-dark-color:                    $white !default;
$btn-light-color:                   $gray-700 !default;
$btn-font-weight:                   $font-weight-medium-light !default;
$btn-box-shadow:                    unset !default;

$btn-icon-size:                     2.75rem !default;
$btn-icon-sm-size:                  2.25rem !default;
$btn-icon-lg-size:                  3.25rem !default;
$btn-icon-xl-size:                  4.55rem !default;

$btn-transition:                    color .25s ease-in-out, background-color .25s ease-in-out, border-color .25s ease-in-out, box-shadow .2s ease-in-out !default;

$btn-focus-box-shadow:              unset !default;
$btn-active-box-shadow:             unset !default;

$btn-pill-border-radius:            ($font-size-base * $line-height-base + $input-btn-padding-y * 2 + .125) !default;
$btn-pill-border-radius-sm:         ($font-size-sm * $line-height-sm + $input-btn-padding-y-sm * 2 + .125) !default;
$btn-pill-border-radius-lg:         ($font-size-lg * $line-height-lg + $input-btn-padding-y-lg * 2 + .125) !default;

// Social buttons
$btn-social-border-width:             $border-width !default;
$btn-social-transition:               border-color .25s ease-in-out, background-color .25s ease-in-out, color .25s ease-in-out, box-shadow .25s ease-in-out !default;

$btn-social-size:                     2.25rem !default;
$btn-social-size-sm:                  1.75rem !default;
$btn-social-size-lg:                  2.75rem !default;

$btn-social-font-size:                $font-size-sm !default;
$btn-social-font-size-sm:             $font-size-xs !default;
$btn-social-font-size-lg:             $font-size-base !default;

$btn-social-border-radius:            $border-radius !default;
$btn-social-border-radius-sm:         $border-radius-sm !default;
$btn-social-border-radius-lg:         $border-radius !default;

$btn-social-dark-color:               $gray-700 !default;
$btn-social-dark-hover-color:         $white !default;
$btn-social-dark-border-color:        $border-color !default;
$btn-social-dark-bg:                  $gray-200 !default;

$btn-social-light-color:              $white !default;
$btn-social-light-border-color:       $border-light-color !default;
$btn-social-light-bg:                 rgba($white, .08) !default;
$btn-social-light-hover-bg:           $white !default;


/************ Insurance Home ***********/ 
$ins-primary: #00E1BE;
$ins-secondary: #003478;
$ins-warning: #F5CD4B;
$ins-text: #5C6A7C;
$ins-shadow: 20px 20px 80px rgba(53, 58, 97, 0.1);
$ins-border-color: #DEF8F6;
$telegram-bg: #0091C8;
$discord-bg: #5865F2;
$ins-placeholder: #E4E4E4;
$ins-light-color: #FAFAFA;
$ins-color-primary-light: #E7FDF9;
$ins-warning-shape: #FAF1CF;
$ins-color-secondary-light: #DAF4F8;


/*********** marketing home *************/ 
$mk-primary: #2B0996; 
$mk-secondary: #FF724B;
$mk-black: #222222;
$mk-primary-gradient: linear-gradient(43.97deg, #2B0996 12.53%, rgba(98, 98, 239, 0.3) 70.44%);
$mk-secondary-gradient: linear-gradient(60.66deg, rgba(255, 88, 0, 0.2) -8.14%, rgba(255, 88, 0, 0) 80.43%);
$mk-border: #E7E7E7;
$mk-blue: #05D7E6;
$mk-blue-deep: #188BFE;
$mk-shadow: 13.836px 23.06px 64.5679px rgba(23, 0, 117, 0.1);
$mk-primary-light-color: #FFE3DB;
$mk-placeholder-color: #ADADAD;
$mk-star: #FF9D4D;

/********** crm demo **************/ 
$crm-secondary: #093A3E;
$crm-primary: #EF3D3D;
$crm-bg-light: #E3F4FF;
$crm-bg-yellow-light: #FFFCF5;
$crm-bg-light-green: #DBFBE2;
$crm-blue: #4CD9ED;
$crm-yellow: #FF9D4D;
$crm-placeholder: #D7D7D7;
$crm-shadow: 10px 10px 50px rgba(2, 0, 91, 0.1);

/************** help desk demo ************/ 
$hd-light-gradient: linear-gradient(28deg, #FBF1F7 14.12%, rgba(255, 255, 255, 0) 61.6%, #FBF1F7 103.81%);
$hd-light-gradient-2: linear-gradient(100deg, rgba(255,255,255,0.1), rgba(255, 144, 151, 1));
$hd-primary: #FF3D55;
$hd-secondary: #6672FB;
$hd-border-color: #CFCFCF;
$hd-bg: #FBF1F7;
$hd-success: #0EE74B;
$hd-light-bg: #FAFBFF;
$hd-shadow: 10px 10px 50px rgba(2, 0, 91, 0.05);
$hd-cta-bg: #FBE8EE;
$hd-dark: #222222;

/**************** digital marketing demo *****************/ 
$dg-warning-color: #FFBE3D;
$dg-primary-color: #EF3D3D;
$dg-primary-gradient: linear-gradient(29.91deg, #FF1111 5.01%, #FF4747 89.4%);
$dg-heading-color: #313146;
$dg-text-color: #666666;
$dg-border-color: #D7D7D7;
$dg-box-shadow: 14.3045px 23.8408px 66.7541px rgba(2, 0, 91, 0.1);
$dg-color-1: #3BBEFF;
$dg-shadow-1: 20px 20px 60px #D9F2FF;
$dg-color-2: linear-gradient(96.49deg, #0082F8 0%, #3C10F2 101.82%);
$dg-shadow-2: 20px 20px 60px #D2E2FF;
$dg-color-3: linear-gradient(98.93deg, #2ACE93 7.76%, #9CE842 100%);
$dg-shadow-3: 20px 20px 60px #D2FFEA;
$dg-color-4: linear-gradient(275.81deg, #FFAC12 -1.99%, #FF30C5 99.35%);
$dg-shadow-4: 20px 20px 60px #FFDDE8;
$dg-meta-color: #EAEAEA;
$dg-color-5: linear-gradient(224.13deg, #00FFF0 -8.75%, #008FF7 111.08%);
$dg-section-bg: #F1F2FA;
$dg-placeholder-color: #D9D9D9;
$dg-layout-bg: #FAFBFF;

/************* software company demo ************/ 
$sc-primary-gradient: linear-gradient(101.61deg, #002D97 3.52%, #0639AF 97.73%);
$sc-box-shadow: 4px 4px 25px rgba(160, 160, 160, 0.1);
$sc-hover-shadow: 0 4px 20px rgba(2, 0, 91, 0.1);
$sc-border-color: #DBD4FF;
$sc-icon-bg: #ECEBFF;

/********************** shape gradients ****************/ 
$sc-shape-gradient: linear-gradient(189.84deg, rgba(98, 98, 239, 0.2) -115.69%, rgba(98, 98, 239, 0) 66.95%);