$primary: #ffffff; //14213d
$primary-text: #14a0e3;

$primary-text-invert: #333;

$primary-dark: black;
$primary-text-dark: #525252;

$whatsapp: rgb(37, 211, 102);
// size: 300 400 500 700
$font-primary: 'Montserrat', Helvetica, sans-serif;
$font-secondary: 'Lato', sans-serif;
// $font-third: 'Quicksand', sans-serif;
$font-third: 'Quicksand Variable Font', sans-serif;
$br: 8px;

$bg-color-primary: #fbfbfe;

// Paleta de colores

$first-color: #14213d;
$second-color: #fca311;
$third-color: #e5e5e5;
$fourth-color: #ffffff;
$fifth-color: #000000;
$sixth-color: purple;
$seven-color: #00bbf0;

$navbar-color: $primary;

// $footer-color-primary: #054177;
$footer-color-primary: #145be4;
$footer-color-second: $primary;

:root {
  /* NEW COLORS */
  --color-bg: #fbfbfe;
  --color-bg-invert: #091a28;

  --color-white: #ffffff;
  --color-white-invert: #14a0e3;

  --color-black: #091a28;
  --color-black-invert: #091a28;

  --color-carolina: #fbfbfe;
  --color-carolina-invert: #fbfbfe;
  --color-rich: #fbfbfe;
  --color-rich-invert: #fbfbfe;
  --color-blue: #fbfbfe;
  --color-blue-invert: #fbfbfe;
  /* END COLORS */

  --text-color-bg: #000;
  --white: #fff;
  --black: #000;
  --text-color-gradient: #145be4;
  --error: #ff5252;
  --info: #2196f3;
  --success: #4caf50;
  --warning: #ffc107;
  --box: 0 12px 20px -10px #{rgba(var(--primary), 0.28)}, 0 4px 20px 0 rgba(0, 0, 0, 0.12),
    0 7px 8px -5px #{rgba(var(--primary), 0.2)};
  --bg: #{$bg-color-primary};
  --first-color: #{$first-color};
  --second-color: #{$second-color};
  --third-color: #{$third-color};
  --fourth-color: #{$fourth-color};
  --fifth-color: #{$fifth-color};
  --sixth-color: #{$sixth-color};

  --button-color: 255, 255, 255;

  --title-color: #ffffff; // ---- 1
  --bg-gradient-1: #0b6ddf;
  // --bg-gradient-1: #14a0e3;
  --bg-gradient-2: #0a7bb1;
  --bg-gradient-1-200: #0f054c;
  --bg-gradient-2-200: #0a7bb1;
  // --bg-blue-100: #11b0ff;
  --bg-blue-100: #0a62c9;

  --course-bg: #ffffff; // ---- 1
  --text-color: #091a28;

  /* Services Colors */
  --text-services: #091a28;
  --bg-services: #ffffff;
  --icon-services: #091a28;

  --blog-bg: #ffffff; // ---- 1
  --blog-bg-card: #ffffff;
  --blog-text: #091a28;

  --select-color: #0a063a;
  --detail-color: 18, 151, 215;
  --collapse-items: #ffffff; // ---- 1
  --var-gradient: #14a0e3;
  --bg-scroll: rgba(0, 0, 0, 0.02);
}

.dark-mode {
  /* NEW COLORS */
  --color-bg: #091a28;
  --color-bg-invert: #fbfbfe;

  --color-white: #14a0e3;
  --color-white-invert: #ffffff;

  --color-black: #ffffff;
  --color-black-invert: #14a0e3;

  --color-carolina: #fbfbfe;
  --color-carolina-invert: #fbfbfe;
  --color-rich: #fbfbfe;
  --color-rich-invert: #fbfbfe;
  --color-blue: #fbfbfe;
  --color-blue-invert: #fbfbfe;
  /* END COLORS */

  --bg-scroll: rgba(255, 255, 255, 0.06);
  --var-gradient: #1f2d38;
  --primary: #091a28;
  --color-primary: #41b38a;
  --color-secondary: #fdf9f3;
  --text-color-bg: #fff;
  --text-color-gradient: #ffffff;
  --bg: #091a28;
  --bg-secondary: #071521;
  --border-color: #0d2538;

  --title-color: #14a0e3;
  --bg-gradient-1: #1b2331;
  --bg-gradient-2: #091a28;
  --bg-gradient-1-200: #091a28;
  --bg-gradient-2-200: #1f2d38;
  --bg-blue-100: #1f2d37;
  --button-color: 20, 160, 227;

  --text-color: #ffffff;
  --course-bg: #091a28;
  /* Services Colors Dark */
  --text-services: #14a0e3;
  --bg-services: #1f2d38;
  --icon-services: #14a0e3;

  --blog-bg: #091a28;
  --blog-bg-card: #06091f;

  --blog-text: #ffffff;

  --select-color: #1f2d38;
  --collapse-items: #071420;
}

@import 'responsive';

@mixin boxshadow-md($color) {
  // box-shadow: var(--box);
  box-shadow: 0 12px 20px -10px rgba($color, 0.28), 0 4px 20px 0 rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba($color, 0.2);
}

@mixin boxshadow-hover($color) {
  // box-shadow: var(--box);
  box-shadow: 0 12px 30px -10px rgba(darken($color, 10), 0.4), 0 4px 30px 0 rgba(0, 0, 0, 0.12),
    0 7px 8px -5px rgba(darken($color, 10), 0.4);
}
@mixin gradient-gen($color, $deg: 60deg) {
  background: $color;
  // background: linear-gradient(60deg, $color, darken($color, 10));
  background: linear-gradient($deg, $color, darken($color, 10));
}

@mixin gradient-varcss($color, $deg: 60deg) {
  background: rgba($color, 1);
  // background: linear-gradient(60deg, $color, darken($color, 10));
  background: linear-gradient($deg, rgba($color, 1), rgba($color, 1));
}

@mixin col($number) {
  width: ($number * 100% / 12);
}