/* Mulish */
@font-face {
  font-family: 'Mulish';
  src: url('../fonts/Mulish/Mulish-Light.woff2') format('woff2'),
    url('../fonts/Mulish/Mulish-Light.woff') format('woff'),
    url('../fonts/Mulish/Mulish-Light.svg') format('svg'),
    url('../fonts/Mulish/Mulish-Light.eot') format('eot');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../fonts/Mulish/Mulish-Regular.woff2') format('woff2'),
    url('../fonts/Mulish/Mulish-Regular.woff') format('woff'),
    url('../fonts/Mulish/Mulish-Regular.svg') format('svg'),
    url('../fonts/Mulish/Mulish-Regular.eot') format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../fonts/Mulish/Mulish-Medium.woff2') format('woff2'),
    url('../fonts/Mulish/Mulish-Medium.woff') format('woff'),
    url('../fonts/Mulish/Mulish-Medium.svg') format('svg'),
    url('../fonts/Mulish/Mulish-Medium.eot') format('eot');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../fonts/Mulish/Mulish-Bold.woff2') format('woff2'),
    url('../fonts/Mulish/Mulish-Bold.woff') format('woff'),
    url('../fonts/Mulish/Mulish-Bold.svg') format('svg'),
    url('../fonts/Mulish/Mulish-Bold.eot') format('eot');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('../fonts/Mulish/Mulish-Black.woff2') format('woff2'),
    url('../fonts/Mulish/Mulish-Black.woff') format('woff'),
    url('../fonts/Mulish/Mulish-Black.svg') format('svg'),
    url('../fonts/Mulish/Mulish-Black.eot') format('eot');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Barlow */
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow/Barlow-Light.woff2') format('woff2'),
    url('../fonts/Barlow/Barlow-Light.woff') format('woff'),
    url('../fonts/Barlow/Barlow-Light.svg') format('svg'),
    url('../fonts/Barlow/Barlow-Light.eot') format('eot');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow/Barlow-Regular.woff2') format('woff2'),
    url('../fonts/Barlow/Barlow-Regular.woff') format('woff'),
    url('../fonts/Barlow/Barlow-Regular.svg') format('svg'),
    url('../fonts/Barlow/Barlow-Regular.eot') format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow/Barlow-Medium.woff2') format('woff2'),
    url('../fonts/Barlow/Barlow-Medium.woff') format('woff'),
    url('../fonts/Barlow/Barlow-Medium.svg') format('svg'),
    url('../fonts/Barlow/Barlow-Medium.eot') format('eot');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow/Barlow-Bold.woff2') format('woff2'),
    url('../fonts/Barlow/Barlow-Bold.woff') format('woff'),
    url('../fonts/Barlow/Barlow-Bold.svg') format('svg'),
    url('../fonts/Barlow/Barlow-Bold.eot') format('eot');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow/Barlow-Black.woff2') format('woff2'),
    url('../fonts/Barlow/Barlow-Black.woff') format('woff'),
    url('../fonts/Barlow/Barlow-Black.svg') format('svg'),
    url('../fonts/Barlow/Barlow-Black.eot') format('eot');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
:root {
    --primary-color: #3d1152;
    --secondary-color: #E5E5E5;
    --text-color: #333333;
    --primary-font: 'Mulish', sans-serif;
    --secondary-font: 'Barlow', sans-serif;
}
html, body {
    height:100%;
    font-weight:400;
    font-family: var(--primary-font);
    margin: 0;
    padding:0;
    position: relative;
    color: var(--text-color);
    background-color: var(--secondary-color);
}
h1,h2,h3,h4,h5,h6 {
    font-weight: 500;
    font-family: var(--secondary-font);
    padding: 1rem 0;
    margin: 0;
}
.rounded-4 {
    border-radius: 1rem !important;
}
/* header */
header {
    background-color: var(--primary-color);
    color: #fff;
}
.logo-img {
    width:320px;
}
/* body */
.body-wrapper {
    position: relative;
    overflow: hidden;
}
.body-wrapper::before {
    content: '';
    position: absolute;
    inset: -20px;
    background-image: url('../images/bg.png');
    background-size: cover;
    background-position: center;
    /* filter: blur(1px); */
    transform: scaleX(-1);
    z-index: 0;
}
.body-wrapper > * {
    position: relative;
    z-index: 1;
}
.wrapper-center {
   height: calc(100vh - 128px);
}
.login-card {
    width: 100%;
    max-width: 1024px;
    height: auto;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.login-panel-wrap {
    /* width:320px; */
    margin: 0 auto;
}
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: color-mix(in srgb, var(--primary-color) 80%, white);
    border-color: color-mix(in srgb, var(--primary-color) 80%, white);
}
.btn-primary:hover i {
    /* move the icon slightly to the right on hover */
    transform: translateX(4px);
}