:root {

  /* Fonts */
  --font-default: 'Plus Jakarta Sans';
  --font-primary: 'Plus Jakarta Sans';
  --font-secondary: 'Plus Jakarta Sans';

  /* =========================================================
     BRAND COLORS ONLY
     Primary  : #261857
     Secondary: #FD2388
  ========================================================== */

  /* RGB Values */
  --color-primary-rgb: 38, 24, 87;
  --color-secondary-rgb: 253, 35, 136;

  /* Main Colors */
  --color-primary: rgba(var(--color-primary-rgb), 1);
  --color-secondary: rgba(var(--color-secondary-rgb), 1);

  /* Transparent Variants */
  --color-primary-5: rgba(var(--color-primary-rgb), .05);
  --color-primary-10: rgba(var(--color-primary-rgb), .10);
  --color-primary-15: rgba(var(--color-primary-rgb), .15);
  --color-primary-20: rgba(var(--color-primary-rgb), .20);
  --color-primary-30: rgba(var(--color-primary-rgb), .30);
  --color-primary-40: rgba(var(--color-primary-rgb), .40);
  --color-primary-50: rgba(var(--color-primary-rgb), .50);
  --color-primary-60: rgba(var(--color-primary-rgb), .60);
  --color-primary-70: rgba(var(--color-primary-rgb), .70);
  --color-primary-80: rgba(var(--color-primary-rgb), .80);
  --color-primary-90: rgba(var(--color-primary-rgb), .90);

  --color-secondary-5: rgba(var(--color-secondary-rgb), .05);
  --color-secondary-10: rgba(var(--color-secondary-rgb), .10);
  --color-secondary-15: rgba(var(--color-secondary-rgb), .15);
  --color-secondary-20: rgba(var(--color-secondary-rgb), .20);
  --color-secondary-30: rgba(var(--color-secondary-rgb), .30);
  --color-secondary-40: rgba(var(--color-secondary-rgb), .40);
  --color-secondary-50: rgba(var(--color-secondary-rgb), .50);
  --color-secondary-60: rgba(var(--color-secondary-rgb), .60);
  --color-secondary-70: rgba(var(--color-secondary-rgb), .70);
  --color-secondary-80: rgba(var(--color-secondary-rgb), .80);
  --color-secondary-90: rgba(var(--color-secondary-rgb), .90);

  /* Core Theme */
  --color-default: rgba(var(--color-primary-rgb), 1);
  --color-default-rgb: var(--color-primary-rgb);

  --color-links: rgba(var(--color-primary-rgb), 1);
  --color-links-hover: rgba(var(--color-secondary-rgb), 1);

  --color-white: rgba(255,255,255,1);
  --color-black: rgba(0,0,0,1);

  --color-body-bg: rgba(248,249,252,1);

  /* Gradients */
  --gradient-primary: linear-gradient(
      135deg,
      rgba(var(--color-primary-rgb),1),
      rgba(var(--color-primary-rgb),.85)
  );

  --gradient-secondary: linear-gradient(
      135deg,
      rgba(var(--color-secondary-rgb),1),
      rgba(var(--color-secondary-rgb),.85)
  );

  --gradient-brand: linear-gradient(
      135deg,
      rgba(var(--color-primary-rgb),1),
      rgba(var(--color-secondary-rgb),1)
  );

  /* Shadows */
  --shadow-primary-sm: 0 5px 15px rgba(var(--color-primary-rgb), .08);
  --shadow-primary: 0 10px 30px rgba(var(--color-primary-rgb), .12);
  --shadow-primary-lg: 0 20px 50px rgba(var(--color-primary-rgb), .18);

  --shadow-secondary-sm: 0 5px 15px rgba(var(--color-secondary-rgb), .10);
  --shadow-secondary: 0 10px 30px rgba(var(--color-secondary-rgb), .16);
  --shadow-secondary-lg: 0 20px 50px rgba(var(--color-secondary-rgb), .22);

  /* Borders */
  --border-primary: 1px solid rgba(var(--color-primary-rgb), .08);
  --border-secondary: 1px solid rgba(var(--color-secondary-rgb), .12);

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
}

/* =========================================================
   BOOTSTRAP OVERRIDES
========================================================= */

:root {

  --bs-primary: rgba(var(--color-primary-rgb), 1);
  --bs-secondary: rgba(var(--color-secondary-rgb), 1);

  --bs-primary-rgb: var(--color-primary-rgb);
  --bs-secondary-rgb: var(--color-secondary-rgb);

  --bs-body-color: rgba(var(--color-primary-rgb), 1);
  --bs-body-color-rgb: var(--color-primary-rgb);

  --bs-body-bg: var(--color-body-bg);

  --bs-white-rgb: 255,255,255;
  --bs-black-rgb: 0,0,0;

  --bs-font-sans-serif: var(--font-default);
  --bs-body-font-family: var(--font-default);

  --bs-border-radius: 18px;
  --bs-border-radius-sm: 12px;
  --bs-border-radius-lg: 24px;

  --bs-gradient: linear-gradient(
      180deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,0)
  );
}

/* =========================================================
   TEXT COLORS
========================================================= */

.color-primary{
  color: rgba(var(--color-primary-rgb),1) !important;
}

.color-secondary{
  color: rgba(var(--color-secondary-rgb),1) !important;
}

.color-white{
  color: rgba(255,255,255,1) !important;
}

/* =========================================================
   BACKGROUNDS
========================================================= */

.bg-primary{
  background-color: rgba(var(--color-primary-rgb),1) !important;
}

.bg-secondary{
  background-color: rgba(var(--color-secondary-rgb),1) !important;
}

.bg-primary-soft{
  background-color: rgba(var(--color-primary-rgb),.08) !important;
}

.bg-secondary-soft{
  background-color: rgba(var(--color-secondary-rgb),.08) !important;
}

.bg-gradient-primary{
  background: var(--gradient-primary) !important;
}

.bg-gradient-secondary{
  background: var(--gradient-secondary) !important;
}

.bg-gradient-brand{
  background: var(--gradient-brand) !important;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn-primary{
  background: rgba(var(--color-primary-rgb),1) !important;
  border-color: rgba(var(--color-primary-rgb),1) !important;
  box-shadow: var(--shadow-primary-sm);
}

.btn-primary:hover{
  background: rgba(var(--color-primary-rgb),.92) !important;
  border-color: rgba(var(--color-primary-rgb),.92) !important;
}

.btn-secondary{
  background: rgba(var(--color-secondary-rgb),1) !important;
  border-color: rgba(var(--color-secondary-rgb),1) !important;
  box-shadow: var(--shadow-secondary-sm);
}

.btn-secondary:hover{
  background: rgba(var(--color-secondary-rgb),.92) !important;
  border-color: rgba(var(--color-secondary-rgb),.92) !important;
}

/* =========================================================
   OUTLINE BUTTONS
========================================================= */

.btn-outline-primary{
  color: rgba(var(--color-primary-rgb),1) !important;
  border: 1.5px solid rgba(var(--color-primary-rgb),1) !important;
  background: transparent !important;
  transition: all .3s ease;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active{
  background: rgba(var(--color-primary-rgb),1) !important;
  border-color: rgba(var(--color-primary-rgb),1) !important;
  color: rgba(255,255,255,1) !important;
  box-shadow: var(--shadow-primary-sm);
}

.btn-outline-secondary{
  color: rgba(var(--color-secondary-rgb),1) !important;
  border: 1.5px solid rgba(var(--color-secondary-rgb),1) !important;
  background: transparent !important;
  transition: all .3s ease;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active{
  background: rgba(var(--color-secondary-rgb),1) !important;
  border-color: rgba(var(--color-secondary-rgb),1) !important;
  color: rgba(255,255,255,1) !important;
  box-shadow: var(--shadow-secondary-sm);
}

/* =========================================================
   LINKS
========================================================= */

a{
  color: rgba(var(--color-primary-rgb),1);
  transition: .3s ease;
}

a:hover{
  color: rgba(var(--color-secondary-rgb),1);
}

/* =========================================================
   CARDS
========================================================= */

.card{
  border: var(--border-primary);
  box-shadow: var(--shadow-primary-sm);
  border-radius: var(--radius-lg);
}

/* =========================================================
   FORMS
========================================================= */

.form-control{
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--color-primary-rgb), .08);
}

.form-control:focus{
  border-color: rgba(var(--color-secondary-rgb), .45);
  box-shadow: 0 0 0 .2rem rgba(var(--color-secondary-rgb), .12);
}