:root {
  --bs-heading-color: var(--beforce-blue);  
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  --bs-gutter-x: 1.75rem;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: auto;
}

@media (min-width: 576px) {
  .container,.container-sm {
      max-width: 560px
  }
}

@media (min-width: 768px) {
  .container,.container-md,.container-sm {
      max-width: 750px
  }
}

@media (min-width: 992px) {
  .container,.container-lg,.container-md,.container-sm {
      max-width: 960px
  }
}

@media (min-width: 1200px) {
  .container,.container-lg,.container-md,.container-sm,.container-xl {
      max-width: 1140px
  }
}

@media (min-width: 1400px) {
  .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
      max-width: 1470px;
  }
}

.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-heading-color);
}

.h1,h1 {
  font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
  .h1,h1 {
    font-size: 3rem;
  }
}

.h2,h2 {
  font-size: calc(1.325rem + .9vw)
}

@media (min-width: 1200px) {
  .h2,h2 {
      font-size:2.5rem;
  }
}

.h3,h3 {
  font-size: calc(1.3rem + .6vw)
}

@media (min-width: 1200px) {
  .h3,h3 {
      font-size:1.75rem
  }
}

.h4,h4 {
  font-size: calc(1.275rem + .3vw)
}

@media (min-width: 1200px) {
  .h4,h4 {
      font-size:1.5rem
  }
}

.h5,h5 {
  font-size: 1.125rem;
  color: var(--beforce-blue);
}

.h6,h6 {
  font-size: 1rem
}

.px-1 {
  padding-right: .5rem!important;
  padding-left: .5rem!important
}

.px-2 {
  padding-right: .75rem!important;
  padding-left: .75rem!important
}

.px-3 {
  padding-right: 1.5rem!important;
  padding-left: 1.5rem!important
}

.px-4 {
  padding-right: 2.75rem!important;
  padding-left: 2.75rem!important
}

.px-5 {
  padding-right: 5rem!important;
  padding-left: 5rem!important
}

.py-1 {
  padding-top: .5rem!important;
  padding-bottom: .5rem!important
}

.py-2 {
  padding-top: .75rem!important;
  padding-bottom: .75rem!important
}

.py-3 {
  padding-top: 1.5rem!important;
  padding-bottom: 1.5rem!important
}

.py-4 {
  padding-top: 2.75rem!important;
  padding-bottom: 2.75rem!important
}

.py-5 {
  padding-top: 5rem!important;
  padding-bottom: 5rem!important
}


/* button component */
.btn {
  font-weight: 600;
  border-radius: 30px;
}

.btn-primary {
  border-color: #318DB3;
  background-color: #318DB3;
  border: 1px solid transparent;
}

.btn-primary:hover {
  color: #318DB3;
  background-color: #fff;
  border: 1px solid #318DB3;
}

.btn-secondary {
  background-color: #fff;
  border: 1px solid #318DB3;
  color: #318DB3;
}

.btn-secondary:hover {
  color: #fff;
  border: 1px solid #fff;
  background-color: #318DB3;
}

.btn-group-lg > .btn,
.btn-lg {
  --bs-btn-padding-y: 1rem;
  --bs-btn-padding-x: 2rem;
  --bs-btn-font-size: 1.75rem;
  --bs-btn-border-radius: var(--bs-border-radius-lg);
  font-weight: 500;
}

.btn-group-lg > .btn:hover,
.btn-lg:hover {
  border: 1px solid white;
}

.btn-no-hover:hover {
  color: #fff;
  background-color: #318DB3;
  border-color: #318DB3;
  pointer-events: none;
  cursor: default;
}