* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem;  /* 24px */
  --space-7: 2rem;    /* 32px */
  --space-8: 2.5rem;  /* 40px */
  --space-9: 3rem;    /* 48px */
}
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-7 { padding: var(--space-7); }
.p-8 { padding: var(--space-8); }
.p-9 { padding: var(--space-9); }


.pt-0 { padding-top: var(--space-0); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }
.pt-7 { padding-top: var(--space-7); }
.pt-8 { padding-top: var(--space-8); }
.pt-9 { padding-top: var(--space-9); }

.pb-0 { padding-bottom: var(--space-0); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-7 { padding-bottom: var(--space-7); }
.pb-8 { padding-bottom: var(--space-8); }
.pb-9 { padding-bottom: var(--space-9); }


.pl-0 { padding-left: var(--space-0); }
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }
.pl-6 { padding-left: var(--space-6); }
.pl-7 { padding-left: var(--space-7); }
.pl-8 { padding-left: var(--space-8); }
.pl-9 { padding-left: var(--space-9); }



.pr-0 { padding-right: var(--space-0); }
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-5 { padding-right: var(--space-5); }
.pr-6 { padding-right: var(--space-6); }
.pr-7 { padding-right: var(--space-7); }
.pr-8 { padding-right: var(--space-8); }
.pr-9 { padding-right: var(--space-9); }

.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-7 { padding-left: var(--space-7); padding-right: var(--space-7); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.px-9 { padding-left: var(--space-9); padding-right: var(--space-9); }



.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-7 { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-9 { padding-top: var(--space-9); padding-bottom: var(--space-9); }



.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-7 { margin: var(--space-7); }
.m-8 { margin: var(--space-8); }
.m-9 { margin: var(--space-9); }


.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mt-9 { margin-top: var(--space-9); }



.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-9 { margin-bottom: var(--space-9); }


.ml-0 { margin-left: var(--space-0); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.ml-6 { margin-left: var(--space-6); }
.ml-7 { margin-left: var(--space-7); }
.ml-8 { margin-left: var(--space-8); }
.ml-9 { margin-left: var(--space-9); }

.mr-0 { margin-right: var(--space-0); }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5); }
.mr-6 { margin-right: var(--space-6); }
.mr-7 { margin-right: var(--space-7); }
.mr-8 { margin-right: var(--space-8); }
.mr-9 { margin-right: var(--space-9); }


.mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
.mx-7 { margin-left: var(--space-7); margin-right: var(--space-7); }
.mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
.mx-9 { margin-left: var(--space-9); margin-right: var(--space-9); }


.my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-7 { margin-top: var(--space-7); margin-bottom: var(--space-7); }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.my-9 { margin-top: var(--space-9); margin-bottom: var(--space-9); }


.m-auto  { margin: auto; }
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }


.-m-1 { margin: calc(var(--space-1) * -1); }
.-m-2 { margin: calc(var(--space-2) * -1); }
.-m-3 { margin: calc(var(--space-3) * -1); }
.-m-4 { margin: calc(var(--space-4) * -1); }
.-m-5 { margin: calc(var(--space-5) * -1); }

.gap-0 { gap: var(--space-0); }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }
.gap-8 { gap: var(--space-8); }
.gap-9 { gap: var(--space-9); }


.col-gap-0 { column-gap: var(--space-0); }
.col-gap-1 { column-gap: var(--space-1); }
.col-gap-2 { column-gap: var(--space-2); }
.col-gap-3 { column-gap: var(--space-3); }
.col-gap-4 { column-gap: var(--space-4); }
.col-gap-5 { column-gap: var(--space-5); }
.col-gap-6 { column-gap: var(--space-6); }
.col-gap-7 { column-gap: var(--space-7); }
.col-gap-8 { column-gap: var(--space-8); }
.col-gap-9 { column-gap: var(--space-9); }


.row-gap-0 { row-gap: var(--space-0); }
.row-gap-1 { row-gap: var(--space-1); }
.row-gap-2 { row-gap: var(--space-2); }
.row-gap-3 { row-gap: var(--space-3); }
.row-gap-4 { row-gap: var(--space-4); }
.row-gap-5 { row-gap: var(--space-5); }
.row-gap-6 { row-gap: var(--space-6); }
.row-gap-7 { row-gap: var(--space-7); }
.row-gap-8 { row-gap: var(--space-8); }
.row-gap-9 { row-gap: var(--space-9); }



.w-25  { width: 25%; }
.w-50  { width: 50%; }
.w-75  { width: 75%; }
.w-100 { width: 100%; }

.h-25  { height: 25%; }
.h-50  { height: 50%; }
.h-75  { height: 75%; }
.h-100 { height: 100%; }

.w-screen { width: 100vw; }
.h-screen { height: 100vh; }

.d-block {display: block;}
.d-flex {display: flex;}

/* :root {
    --padding-top-navbar:16px;
    --padding-bottom-navbar:16px;
    --padding-left-navbar:24px;
    --padding-right-navbar:24px;
} */


html  {
   font-size: 16px;
}
body {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: "Poppins", sans-serif;
  transition: background 0.3s, color 0.3s;
}
.space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.space-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.space-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.heading-content {
  font-weight: 700;
  font-size: clamp(1.1rem, 1.2vw, 1.1rem);
  line-height: clamp(1.3rem, 1.5vw, 1.3rem);
  color: var(--contentheading);
}
.secondary-heading-content {
  font-weight: 600;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: clamp(1.5rem, 1.5vw, 1.5rem);
  color: var(--contentheading);
}
.third-heading-content {
  font-weight: 600;
  font-size: clamp(0.9rem, 1.2vw, 0.9rem);
  line-height: clamp(1rem, 1.5vw, 1rem);
  color: var(--contentheading);
}
.heading-yellow {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.8rem;
  color: var(--headingyellow);
}
.yellow-text {
  color: var(--headingyellow);
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}
.text-para {
  font-weight: 400;
  line-height: 1.3rem;
  font-size: 0.90rem;
  color: var(--paracolor);
}

.text-notes {
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1rem;
  color: var(--breadcum);
}
.logout-btn {
  padding: 0.5rem 1rem;
  border-radius:3.125rem;
  background-color: var(--logoutbtn);
  border:1px solid var(--logoutbtn);
  display: flex;
  justify-content: center;
  align-items: center;
  gap:0.25rem;
  color: var(--text-color);
  font-weight: 600;
  font-size:0.875rem;
  line-height: 1rem;
}

.btn-transparent {
  color: var(--viewall);
  background: transparent;
  border: none;
  padding: 0rem;
  text-decoration: underline;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1rem;

}
.btn {
  padding: 0.25rem 0.5rem;
  border-radius:0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:0.25rem;
  font-weight: 600;
  font-size:1rem;
  line-height: 1.5rem;
  width: 100%;
  max-width: 22.375rem;
  text-transform: capitalize;
  cursor: pointer;
  min-height: 2.5rem;
}
.btn-outlined {
  color: var(--breadcumactive);
  background-color: transparent;
  border:1px solid var(--breadcumactive);
}
.btn-primary {
  color: var(--mainbg);
  background-color: var(--botttemactive);
  border: 1px solid var(--botttemactive);
}
.btn-login {
  color: var(--text-color) !important;
  background-color: var(--loginbtnbackground) !important; 
  border: 1px solid var(--loginbtnbackground) !important;
}
.breadcrumb-container {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem; 
  padding-bottom: 1rem;
}

.breadcrumb-container a,
.breadcrumb-container span {
  font-size: 0.625rem;
  line-height: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}
.breadcrumb-container a {
  color: var(--breadcum);
  text-decoration: none;
  transition: 0.2s;
}
.breadcrumb-container span {
  color: var(--breadcum);
}
.breadcrumb-container a.active {
  color: var(--breadcumactive);
}
.breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-bottom: 0rem;
  padding-left:1rem;
}
 
.breadcrumbs a,
.breadcrumbs .first,
.breadcrumbs .last,
.breadcrumbs span {
  font-size: 0.625rem;
  line-height: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}
.breadcrumbs a {
  color: var(--breadcum);
  text-decoration: none;
  transition: 0.2s;
}
.breadcrumbs li span {
  color: var(--breadcum);
}

.breadcrumbs  .last a {
  color: var(--breadcumactive);
}
.breadcrumbs > li + li:before {
  content: "/";
  width: 7px;
  margin-left: -3px;
  color: #8c959f;
}