:root, [data-theme="default"] {
--text-color:#383143;
--secondary-color:#333333;
--primary-color:#f44336;
--success-color:#2196f3;
--danger-color:#00bcd4;
--warning-color:#4caf50;
--info-color:#673ab7;
--light-color:#ffffff;
--dark-color:#fff;
--grey-color:#f0f2f2;
--overlay-color:rgba(0, 0, 0, 0.63);
}


@supports (--css: variables) {
  [data-theme="dark"] {
--text-color:#979ba9;
--secondary-color:#3f51b5;
--primary-color:#3f51b5;
--success-color:#2196f3;
--danger-color:#00bcd4;
--warning-color:#4caf50;
--info-color:#673ab7;
--light-color:#ffffff;
--dark-color:#000000;
--grey-color:#1c1e25;
--overlay-color:rgba(0, 0, 0, 0.63);

  
  }
  }


    // Global Variables


    // Colors

    $text-color:var(--text-color);
    $secondary-color:var(--secondary-color);
    $primary-color: var(--primary-color);	
    $success-color:var(--success-color);
    $danger-color:var(--danger-color);
    $warning-color:var(--warning-color);
    $info-color:var(--info-color);	
    $light-color:var(--light-color);
    $dark-color:var(--dark-color);
    $grey-color:var(--grey-color);
    $overlay-color:var(--overlay-color);
	
    // Spacing 
	
    $sectionspace: (30,60,90); 
    $innerspace: (30, 40,50,60); 
    $sides: (top, bottom, left, right);
    $sides2: (top, bottom);

    // Typography

    $font-family-base:            'Open Sans', sans-serif; 
    $font-size-base:              1.6 !default; 
    $small-font-size:             14px ; 
    $font-weight-light:           300;
    $font-weight-normal:          400 !default;
    $font-weight-medium:          600 ;
    $font-weight-semi:            700 ;
    $font-weight-bold:            800 !default;
    $line-height-base:            1.8 !default;
    $h1-font-size:                $font-size-base * 2.75;
    $h2-font-size:                $font-size-base * 2.25;
    $h3-font-size:                $font-size-base * 2;
    $h4-font-size:                $font-size-base * 1.75;
    $h5-font-size:                $font-size-base * 1.5;
    $h6-font-size:                $font-size-base * 1.25;
 

    $headings-font-family:        'Patua One', cursive; 
    $headings-line-height:        1.3 !default;
    $big-font1:                   $font-size-base * 3.25;
    $big-font2:                   $font-size-base * 2.75;
    $big-font3:                   $font-size-base * 2.5;
	
	
    // Component
	
    $border:                      1px solid #d6d6d6 ;
    $box-shadow:                  0 0 20px 5px rgba(62, 60, 85, 0.06)  !default;
   
    $transition-base:             all 500ms ease !default;
    $border-radius:     5px;
    $box-radius:        5px;
    $round-radius:      100%;


    // Responsive Layout

    $desktop-device: 1195px !default;
    $laptop-device: 991px;
    $tablet-device: 768px;
    $mobile-device: 575px;