* {
  padding: 0;
  margin: 0;
}

:root {
  /*72px*/
  --font-size-xxxl: 4.5rem;
  /*64px*/
  --font-size-xxl: 4rem;
  /*48px*/
  --font-size-xl: 3rem;
  /*32px*/
  --font-size-l: 2rem;
  /*28px*/
  --font-size-md: 1.75rem;
  /*24px*/
  --font-size-s: 1.5rem;
  /*20px*/
  --font-size-xs: 1.25rem;
  /*16px*/
  --font-size-xxs: 1rem;
  /*14px*/
  --font-size-xxxs: 0.875rem;
}

.text-center {
  text-align: center;
}

.v-text-rl{
  writing-mode: sideways-rl;
}
.v-text-lr{
  writing-mode: sideways-lr;
}

/* Utility Classes */
.p-abs {
  position: absolute;
}

.p-rel {
  position: relative !important;
}

.p-fix {
  position: fixed;
}

/*#region Flex*/
.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column {
  flex-direction: column;
}

.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.align-end {
  align-items: end;
}

.justify-end {
  justify-content: end;
}

.justify-space{
  justify-content: space-evenly;
}
.justify-between{
  justify-content: space-between;
}
/* #endregion */

.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.center-v {
  top: 50%;
  transform: translateY(-50%);
}

.center-h {
  left: 50%;
  transform: translateX(-50%);
}

.gap-8 {
  gap: 8px;
}

.gap-16 {
  gap: 16px;
}

.gap-24 {
  gap: 24px;
}

.border-box {
  box-sizing: border-box;
}

/*Width And Height*/
.full-view {
  height: 100vh !important;
  width: 100vw !important;
}

.h-a {
  height: auto;
}

.h-fill {
  height: -webkit-fill-available !important;
}

.h-100 {
  height: 100%;
}

.h-fill-view {
  height: 100vh !important;
}

.w-fill {
  width: -webkit-fill-available;
}

.w-100 {
  width: 100%;
}

.w-fill-view {
  width: 100vw !important;
}

.w-50 {
  width: 50%;
}

.w-3 {
  width: 33%;
}

.all-caps {
  text-transform: uppercase;
}

.capital {
  text-transform: capitalize;
}

.fit {
  object-fit: contain;
}

.hidden-scroll::-webkit-scrollbar {
  display: none;
}