body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Inter", sans-serif;
}

body h1 {
  font-size: 60px;
  line-height: 75px;
  font-weight: 700 !important;
  letter-spacing: 0.26px;
}

h2 {
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 0.37px;
  color: #101828;
}

p {
  font-size: 20px;
  font-weight: 400;
  line-height: 32.5px;
  letter-spacing: -0.45px;
  margin: 0;
  color: #4A5565;
}

h3 {
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: 0.4px;
  color: var(--color-gray-900);
  margin: 0 0 24px;
}

h4 {
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.07px;
  color: #101828;
}

h6 {
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.45px;
  color: var(--color-gray-900);
}

/* * Primary Button * */


/* ====== Buttons ====== */
.btn-primary {
  background-color: var(--color-tertiary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: #408943;
  color: #fff;
}

.btn-primary-outline {
  color: var(--color-tertiary);
  background-color: transparent;
  border: 2px solid var(--color-tertiary);
}

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

.btn-primary-outline:focus,
.btn-primary-outline:active {
  background-color: var(--color-tertiary);
  color: var(--color-white);
}

.btn-primary:focus,
.btn-primary:active {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-tertiary);
  background-color: var(--color-tertiary);
}

.btn-secondary {
  background: #2E3192;
  color: #fff;
}

.btn-secondary:focus,
.btn-secondary:active {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px #2E3192;
  background-color: #2E3192;
  color: #fff;
}

.btn-secondary-outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid #2E3192;
}

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

.btn-primary,
.btn-primary-outline,
.btn-secondary,
.btn-secondary-outline {
  padding: 12px 32px;
  border-radius: 16px;
  font-weight: 500;
  transition: all 300ms ease;
  cursor: pointer;
}

.btn-secondary-outline:focus,
.btn-secondary-outline:active {
  background-color: transparent;
  color: var(--color-primary);
}

.minc-btn-primary,
.minc-btn-success,
.minc-btn-secondary {
  border-radius: 1rem;
  font-weight: 600;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  padding: 0.75rem 1.5rem;
}

.minc-btn-primary {
  background: linear-gradient(to right, #2e3192, #24aae2);
  color: white;
  border: 0;
}

.minc-btn-primary:hover {
  background: linear-gradient(to right, #2e3192, #24aae2);
  color: white;
}

.minc-btn-success {
  background: linear-gradient(to right, #24aae2, #51a154);
  color: #fff;
  border: 0;
}

.minc-btn-secondary {
  background: #D1D5DC;
  color: #6A7282;
  border: 0;
}

body h1 {
  font-size: 60px;
  line-height: 75px;
  font-weight: 700 !important;
  letter-spacing: 0.26px;
}

p {
  font-size: 20px;
  font-weight: 400;
  line-height: 32.5px;
  letter-spacing: -0.45px;
}

.badge {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  border-radius: 10px;
}

.my-32 {
  margin-top: 32px;
}

.mb-32 {
  margin-bottom: 32px;
}

.mb-12 {
  margin-bottom: 12px;
}

.p-12 {
  padding: 12px;
}

.mb-64 {
  margin-bottom: 64px;
}

.pt-32 {
  padding-top: 32px;
}

.p-32 {
  padding: 32px;
}

.px-32 {
  padding-left: 32px;
  padding-right: 32px;
}

.my-64 {
  margin: 64px 0;
}

.my-32 {
  margin-top: 32px;
  margin-bottom: 32px;
}

.p-34 {
  padding: 34px;
}

.pt-64 {
  padding-top: 64px;
}

.p-26 {
  padding: 26px;
}

.mt-32 {
  margin-top: 32px;
}

p:empty {
  display: none;
}

.py-80 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.card-icon,
.common-icon {
  background: var(--color-secondary);
  box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-secondary) 30%, transparent);
  border-radius: 16px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.common-icon {
  padding: 16px;
  width: auto;
  height: auto;
  min-width: unset;
}

.minc-card {
  border-width: 2px;
  padding: 26px;
}

.minc-card h6 {
  margin: 16px 0 8px;
}

.minc-card p {
  font-size: 14px;
  line-height: 22.75px;
}

body .bg-info-light {
  background: #24AAE21A;
  color: #24AAE2;
  border-left-color: #24AAE2;
}

body .bg-light-primary {
  background: #2E31921A;
  color: #2E3192;
  border-left-color: #2E3192;
}

body .bg-success-light {
  background: #51A1541A;
  color: #51A154;
  border-left-color: #51A154;
}

.bg-yellow {
  background: #FEFCE8;
  border-left: 4px solid #FDC700;
  color: #364153;
  padding: 24px 28px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

.common-info-light-box {
  background: #24AAE2;
}

.bg-primary-gradient {
  border-left-color: #24AAE2;
  background: linear-gradient(90deg, rgba(36, 170, 226, 0.05) 0%, rgba(81, 161, 84, 0.05) 100%);
}

.text-primary-info {
  color: #24AAE2;
  transition: 0.2s linear all;
}

body .text-primary-info:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  color: #24AAE2;
}

.card-hover {
  transition: box-shadow 0.3s ease;
}

.card-hover:hover {
  box-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
}

body input,
select {
  border: 2px solid #E5E7EB !important;
  border-radius: 14px !important;
  padding: 16.5px 16px !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: -0.31px;
  height: 50px;
}

body input:focus,
input:focus-visible,
select:focus,
select:focus-visible {
  border-color: #24AAE2;
  outline-color: #24AAE2;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 50px;
  background-image: url('../images/down-arrow.svg');
  background-repeat: no-repeat;
  background-position: right 16px center;
  /* controls spacing */
}

label {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: #101828;
}

input[type="radio"] {
  height: unset;
}

/* table css  */

table {
  width: 100%;
  border-radius: 16px;
  border-collapse: separate;
  margin-top: 10px;
  border-bottom: 1px solid #E5E7EB;
  border-left: 1px solid #E5E7EB;
  border-right: 1px solid #E5E7EB;
}

table thead tr {
  background: linear-gradient(90deg, #2E3192 0%, #2F3A98 7.14%, #2F439D 14.29%, #304CA3 21.43%, #3054A9 28.57%, #305DAF 35.71%, #3065B4 42.86%, #306EBA 50%, #2F76C0 57.14%, #2E7FC6 64.29%, #2D87CB 71.43%, #2C90D1 78.57%, #2A99D7 85.71%, #27A1DC 92.86%, #24AAE2 100%);
  color: #fff;
}

table thead th {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  padding: 16px 24px;
}

table th,
table td {
  border: 0;
}

table tbody tr:nth-child(even) td {
  background: #F9FAFB80;
  border-bottom: 1px solid #E5E7EB;
  border-top: 1px solid #E5E7EB;
}

table tbody tr {
  background-color: #fff;
}

table tbody td {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.31px;
}

table tbody>tr:nth-child(odd)>td,
table tbody>tr:nth-child(odd)>th {
  background-color: #fff;
}

table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 16px;
}

table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 16px;
}

table thead tr th:first-child {
  border-top-left-radius: 16px;
}

table thead tr th:last-child {
  border-top-right-radius: 16px;
}
body {
  scrollbar-width: thin;
}
/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 6px; /* Adjust as needed */
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #4A5565;
}

::-webkit-scrollbar-thumb:hover {
  background: #4A5565;
}

/* custom checkbox css */
.custom-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}
body input[type="checkbox"] {
    width: 20px;
    height: 20px;
     appearance: none;
    -webkit-appearance: none;
    border: 2px solid #2E3192 !important;
    border-radius: 4px !important;
    cursor: pointer;
    position: relative;
    margin: 0;
    min-width: 20px;
    padding: 0 !important;
    min-height: 20px;
}

input:checked {
    background: #2E3192;
    border-color: #2E3192;
}

input:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox-wrapper label {
    cursor: pointer;
}
@media (max-width: 767px) {
  body h1 {
    font-size: 40px;
    line-height: 50px;
  }

  p {
    font-size: 18px;
    line-height: 28px;
  }

  h3 {
    font-size: 25px;
    line-height: 30px;
  }

  .p-32 {
    padding: 20px;
  }
}