.bg-soft-primary {
  background-color: #f9faf9 !important;
}
.display-1,.display-3 {
    line-height: normal !important;
}
.border-30{
    border-radius: 30px !important;
}
.btn-group-lg > .btn, .btn-lg {
  padding-top: 0.45rem !important;
  padding-bottom: .45rem !important;
}
.btn, .lg-sub-html p, .nav-link, .nav-link p, .navbar .btn-sm {
  font-size: .8rem !important;
}
.btn {
  padding-top: 0.4rem !important;
  padding-bottom: .45rem !important;
}

.timeline .timeline-item .timeline-marker::before {
  background: #b4ccff;
}

.gradient-8 {
  background-image: linear-gradient(0deg,#313044,#313044) !important;
}

.btn-main {
  background-color: #313044;
  color: #fff;
  border: 1px solid #313044;
  border-radius: 0.5rem;
  padding: 0.6rem 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-main:hover {
  background-color: #b4ccff;
  border-color: #b4ccff;
  color: #313044;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(180, 204, 255, 0.3);
}

.btn-main:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(180, 204, 255, 0.5);
}

.btn-main:active {
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(49, 48, 68, 0.2);
}

.btn-main:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}
.btn-main-outline {
  background: transparent;
  border: 1px solid #b4ccff;
  color: #b4ccff !important;
  transition: all 0.25s ease;
}

.btn-main-outline:hover {
  background-color: #313044;
  color: #fff;
  border-color: #313044;
}
.wrapper-border {
  /* border-bottom: 1px solid rgba(164,174,198,.2); */
  border-top: 1px solid rgba(164,174,198,.2);
}
[class*=" icn-"], [class*=" uil-"], [class^="icn-"], [class^="uil-"]{
  font-size: 28px !important;
}
.footer.bg-dark, footer.bg-dark{
  background: #313044 !important;
}
.list-unstyled {
  padding-left: 0;
  padding-right: 0 !important;
  list-style: none;
}

.footer .link-dark:hover, .text-reset a:hover, a.text-reset:hover {
  color: #FFF !important;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.3;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="5" height="5" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23313044" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
}