@font-face {
  font-family: "PlusJakartaSansRegular";
  src: url("../font/PlusJakartaSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "PlusJakartaSansMedium";
  src: url("../font/PlusJakartaSans-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "PlusJakartaSansSemiBold";
  src: url("../font/PlusJakartaSans-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "PlusJakartaSansBold";
  src: url("../font/PlusJakartaSans-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "ManropeSemiBold";
  src: url("../font/Manrope-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "ManropeMedium";
  src: url("../font/Manrope-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "ManropeBold";
  src: url("../font/Manrope-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "InterRegular";
  src: url("../font/Inter_18pt-Regular.ttf") format("truetype");
}
:root {
  --font-family-regular: PlusJakartaSansRegular, serif;
  --font-family-regularI: InterRegular, serif;
  --font-family-medium: PlusJakartaSansMedium, serif;
  --font-family-mediumM: ManropeMedium, serif;
  --font-family-semibold: PlusJakartaSansSemiBold, serif;
  --font-family-bold: PlusJakartaSansBold, serif;
  --font-family-boldM: ManropeBold, serif;
  --font-family-semiboldM: ManropeSemiBold, serif;
  --main-bg-clr: #ffffff;
  --border-line-clr: #f2f3f5;
  --nav-link-bg: #f0f3f5;
  --link-clr: rgb(62, 76, 89);

  --offcanvas-bg-clr: #f3f4f6;

  --form-control-text-clr: #000929;
  --form-control-bg-clr: #f8f9fd;

  --size: 2rem;
  --icon-clr: #000929;

  --dark-variant: 0, 0, 0;
  --dark: rgba(var(--dark-variant), 1);

  --white-variant: 255, 255, 255;
  --white: rgba(var(--white-variant), 1);

  --primary-clr-variant: 0, 7, 186;
  --primary-clr: rgba(var(--primary-clr-variant), 1);
  --primary-clr-dark: rgb(57, 50, 123);

  /* themes */
  --hero-bg-clr: rgba(247, 247, 253, 1);
  --page-bg-variant: rgba(250, 250, 250, 1); /* Add a default value */
  --section-bg-1: 221, 241, 233;
  --section-bg-2: 250, 255, 252;
  --main-text-clr: rgba(0, 9, 41, 1);
  --subtext-clr: rgba(108, 114, 127, 1);
  --border-clr: rgba(var(--dark-variant), 0.12);
  --nav-link-action: var(--primary-clr);
  --icon-clr: rgba(0, 9, 41, 1);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  letter-spacing: 0.2px;
  outline: none;
  font-family: var(--font-family);
  image-rendering: optimizequality;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
span:not(:has(img, .img-fluid)) {
  image-rendering: pixelated;
  text-rendering: geometricPrecision;
}
ul,
li,
p {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
a {
  will-change: background-color, color;
  transition: 300ms ease-in-out;
  transition-property: background-color;
  text-decoration: none;
}
button {
  background-color: transparent;
  border: none;
}
:is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
}
*:not(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-family-regular);
}
*:not(*:not(h1, h2, h3, h4, h5, h6, b, strong)) {
  font-family: var(--font-family-bold);
}
svg {
  --size: 1.4rem;
  aspect-ratio: 1/1;
  width: var(--size);
  height: var(--size);
  user-select: none;
  pointer-events: none;
}
html::-webkit-scrollbar {
  width: 5px;
}
::selection {
  background-color: rgba(var(--primary-clr-variant), 0.2);
  color: var(--primary-clr-dark);
}
:is(.modal, .offcanvas) .btn-close {
  box-shadow: 0 0 0 0.25rem transparent;
}
:is(.modal, .offcanvas) .btn-close:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-clr-variant), 0.25);
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: var(--primary-clr);
  border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.form-control:focus {
  box-shadow: none;
}
[class*="col-"] {
  transition: width 300ms ease-in-out;
  will-change: width;
}
.form-check-input[type="radio"],
.form-check-input[type="checkbox"] {
  transition: 300ms ease-in-out;
}
.form-check-input[type="radio"]:focus,
.form-check-input[type="checkbox"]:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-clr-variant), 0.25);
}
.form-check-input:checked[type="radio"]:checked,
.form-check-input:checked[type="checkbox"]:checked {
  background-color: var(--primary-clr);
  border-color: var(--primary-clr);
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-calendar-picker-indicator {
  display: none;
}
figure {
  margin: 0;
}
.v-main {
  overflow-x: hidden;
}
.v-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}