/* variables */
:root {
  --bs-body-bg: #F6F7F9;

  /* brand colors */
  --bs-primary: #CFFC51;
  --bs-secondary: #D9D9D9;
  --bs-light: #F6F7F9;
  --bs-dark: #222325;
  --bs-light-gray: #E2E4E9;
  --bs-black: #121317;
  --bs-primary-rgb: 207,252,81;
  --bs-secondary-rgb: 217,217,217;
  --bs-light-rgb: 246,247,249;
  --bs-dark-rgb: 34,35,37;
  --bs-light-gray-rgb: 226,228,233;

  --gradient-bg: linear-gradient(70deg, rgba(214,227,251,.4) 20%, rgba(207,252,81,.2) 100%);
  --gradient-blue-bg: linear-gradient(170deg, rgba(0, 161, 155, 0.7) 50%, rgba(57, 144, 206, 1) 100%);
  

  /* link colors */
  --bs-link-color: #0C5EFE;
  --bs-link-hover-color: #0a42b3;

  /* fonts */
  --bs-body-font-family: 'Plus Jakarta Sans', sans-serif;
  --bs-heading-color: var(--bs-black);
  --bs-body-color: #5E5D69;

  --bs-border-radius: 0.625rem;
}

@media (min-width: 992px) {
  .container-fluid {
    --bs-gutter-x: 6rem;
  }
}
@media (min-width: 1200px) {
  .container-fluid {
    --bs-gutter-x: 10.25rem;
  }
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  color: var(--bs-heading-color);
  line-height: 1.3;
}

.form-control,
.form-select {
  /* background-color: var(--bs-body-bg); */
  border-radius: var(--bs-border-radius-xl);
  border-color: var(--bs-border-color-translucent);
}
.form-select.btn-dark {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.input-group-text {
	/* background-color: var(--bs-body-bg); */
	border-radius: var(--bs-border-radius-xl);
	border-color: var(--bs-border-color-translucent);
}

.btn {
  --bs-btn-border-width: 2px;
  --bs-btn-border-radius: var(--bs-border-radius-2xl);
  --bs-btn-font-weight: 600;
  text-transform: uppercase;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active {
  --bs-btn-font-weight: 800;
}
.btn-group-sm > .btn, .btn-sm {
  --bs-btn-padding-y: 0.625rem;
  --bs-btn-padding-x: 1.875rem;
  --bs-btn-font-size: clamp(0.75rem, 0.6899rem + 0.1923vw, 0.875rem);
}
.btn-group-lg > .btn, .btn-lg {
  --bs-btn-padding-y: 0.6rem;
  --bs-btn-padding-x: 2rem;
  --bs-btn-font-size: 1rem;
}
.btn-primary {
  --bs-btn-color: var(--bs-black);
  --bs-btn-bg: rgba(var(--bs-primary-rgb),.5);
  --bs-btn-border-color: rgba(var(--bs-primary-rgb),.5);
  --bs-btn-hover-color: var(--bs-black);
  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb),1);
  --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb),1);
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: var(--bs-black);
  --bs-btn-active-bg: rgba(var(--bs-primary-rgb),1);
  --bs-btn-active-border-color: rgba(var(--bs-primary-rgb),1);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-black);
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;

  --bs-btn-border-width: 0;
  /* background: linear-gradient(70deg, rgba(214,227,251,.5) 10%, rgba(207,252,81,.5) 75%) !important; */
  /* transition: all .3s ease-in-out !important; */
  position: relative;
  overflow: hidden;
  > * {
    position: relative;
    z-index: 2;
  }
  &::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    background: linear-gradient(70deg, rgba(214,227,251,1) 25%, rgba(var(--bs-primary-rgb),0) 80%);
    opacity: 0;
    transition: all .2s ease-in-out;
  }
  &:hover {
    /* background: linear-gradient(70deg, rgba(214,227,251,.5) 10%, rgba(207,252,81,1) 75%) !important; */
    &::after {
      width: 75%;
      opacity: 1;
    }
  }
}
.btn-light {
  --bs-btn-color: var(--bs-black);
  --bs-btn-bg: var(--bs-body-bg);
  --bs-btn-border-color: var(--bs-black);
  --bs-btn-hover-color: var(--bs-black);
  --bs-btn-hover-bg: var(--bs-body-bg);
  --bs-btn-hover-border-color: var(--bs-black);
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: var(--bs-black);
  --bs-btn-active-bg: var(--bs-body-bg);
  --bs-btn-active-border-color: var(--bs-black);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-black);
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}
.btn-light-outline {
  --bs-btn-color: var(--bs-light);
  --bs-btn-bg: rgba(0,0,0,0);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-color: var(--bs-light);
  --bs-btn-hover-bg: rgba(0,0,0,0);
  --bs-btn-hover-border-color: var(--bs-light);
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: var(--bs-light);
  --bs-btn-active-bg: rgba(0,0,0,0);
  --bs-btn-active-border-color: var(--bs-light);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-black);
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}
.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-black);
  --bs-btn-border-color: var(--bs-black);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-dark);
  --bs-btn-hover-border-color: var(--bs-dark);
  --bs-btn-focus-shadow-rgb: 66,70,73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-dark);
  --bs-btn-active-border-color: var(--bs-dark);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-black);
  --bs-btn-disabled-border-color: var(--bs-black);
}
.btn-info {
  --bs-btn-color: var(--bs-black);
  --bs-btn-bg: rgba(214,227,251,.6);
  --bs-btn-border-color: rgba(214,227,251,.6);
  --bs-btn-hover-color: var(--bs-black);
  --bs-btn-hover-bg: rgba(214,227,251,1);
  --bs-btn-hover-border-color: rgba(214,227,251,1);
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: var(--bs-black);
  --bs-btn-active-bg: rgba(214,227,251,1);
  --bs-btn-active-border-color: rgba(214,227,251,1);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-black);
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}

@media (max-width: 575px) {
  .btn-group-sm > .btn, .btn-sm {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1.25rem;
  }
}

.modal-backdrop {
  --bs-backdrop-opacity: 0.8;
}