:root {
  --main-bg-color: #F5F7FF;
  --primary-color: #4B49AC;
  --secondary-color: #7da0fa;
  --secondary-color-hover: #5988ff;
  --secondary-color-transparent: #7da0fa61;
  --graycolor: #3f3f3f;
  --bs-secondary-color: rgba(255, 255, 255, 0.75);
}

.header{
  background: var(--primary-color);
  color: #f1f1f1;
  box-shadow: 0px 14px 20px 0px #b3bbdb;
}

.header .navbar-dark .navbar-nav .nav-link {
    color: rgb(255, 255, 255);
}

.footer {
  background: var(--graycolor);
  color: #f1f1f1;
  box-shadow: 0px -14px 20px 0px #b3bbdb;
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary:hover {
    color: white;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-secondary {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.btn-outline-secondary:hover {
    color: white;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-secondary {
    color: #fff;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-secondary:hover {
    color: #fff;
    background-color: var(--secondary-color-hover);
    border-color: var(--secondary-color-hover);
}