/* MARGIN TOP BOTTOM */

.mtop-10 {
  margin-top: 1rem;
}

.mbot-10 {
  margin-bottom: 1rem;
}

.mtop-20 {
  margin-top: 2rem;
}

.mbot-20 {
  margin-bottom: 2rem;
}

.mtop-30 {
  margin-top: 3rem;
}

.mbot-30 {
  margin-bottom: 3rem;
}

.mtop-40 {
  margin-top: 4rem;
}

.mbot-40 {
  margin-bottom: 4rem;
}

.mtop-50 {
  margin-top: 5rem;
}

.mbot-50 {
  margin-bottom: 5rem;
}

.mtop-60 {
  margin-top: 6rem;
}

.mbot-60 {
  margin-bottom: 6rem;
}

.mtop-70 {
  margin-top: 7rem;
}

.mbot-70 {
  margin-bottom: 7rem;
}

.mtop-80 {
  margin-top: 8rem;
}

.mbot-80 {
  margin-bottom: 8rem;
}

.mtop-90 {
  margin-top: 9rem;
}

.mbot-90 {
  margin-bottom: 9rem;
}

.mtop-100 {
  margin-top: 10rem;
}

.mbot-100 {
  margin-bottom: 10rem;
}

.pY-100 {
  padding: 10rem 0;
}

.g-6 {
  row-gap: 6rem;
}

.g-7 {
  row-gap: 7rem;
}

/* PADDING */

.px-1 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.px-2 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.px-3 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.px-4 {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}

.px-5 {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

.px-6 {
  padding-left: 6rem !important;
  padding-right: 6rem !important;
}

.py-1 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-2 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.py-3 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.py-4 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.py-5 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.py-6 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.p-1 {
  padding: 1rem !important;
}

.p-2 {
  padding: 2rem !important;
}

.p-3 {
  padding: 3rem !important;
}

.p-4 {
  padding: 4rem !important;
}

/* BORDER RADIUS */

.br-3 {
  border-radius: 3px !important;
}

.br-4 {
  border-radius: 4px !important;
}

.br-5 {
  border-radius: 5px !important;
}

.br-6 {
  border-radius: 6px !important;
}

.br-7 {
  border-radius: 7px !important;
}

.br-8 {
  border-radius: 8px !important;
}

.br-9 {
  border-radius: 9px !important;
}

.br-10 {
  border-radius: 10px !important;
}

.br-12 {
  border-radius: 12px !important;
}

.br-15 {
  border-radius: 15px !important;
}

.br-50 {
  border-radius: 50% !important;
}

/* ----- OFFSETS ----- */

.offset-y1pos {
  transform: translateY(20rem);
  opacity: 0;
}

.offset-y2pos {
  transform: translateY(25rem);
  opacity: 0;
}
.offset-y3pos {
  transform: translateY(30rem);
  opacity: 0;
}

.offset-y0 {
  transform: translateY(0px);
  transition: 1000ms;
  opacity: 1;
}

.offset-x1pos {
  transform: translateX(20rem);
  opacity: 0;
}

.offset-x1neg {
  transform: translateX(-20rem);
  opacity: 0;
}

.offset-x0 {
  transform: translateX(0px);
  transition: 900ms;
  opacity: 1;
}

/* DIVIDERS */

.divider-short {
  display: block;
  width: 50px;
  height: 4px;
}

/* BG Colors Classes */

.bg-white {
  background-color: white !important;
}

.bg-dark {
  background-color: var(--color-dark-grey) !important;
}

.bg-light-dark {
  background-color: var(--color-light-grey) !important;
}

.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-primary-light {
  background-color: var(--color-primary-light) !important;
}

.bg-secondary {
  background-color: var(--color-secondary) !important;
}

.bg-secondary-light {
  background-color: var(--color-secondary-light) !important;
}

.bg-section-contrast {
  background-color: #f0f6ff;
}

/* Text Colors Classes */

.text-white {
  color: white !important;
}

.text-dark {
  color: var(--color-dark-grey) !important;
}

.text-dark-light {
  color: var(--color-dark-light) !important;
}

.text-dark-ultra-light {
  color: var(--color-dark-ultra-light) !important;
}

.text-light-dark {
  color: var(--color-light-grey) !important;
}

.text-primary {
  color: var(--color-primary) !important;
}

.text-primary-light {
  color: var(--color-primary-light) !important;
}

.text-secondary {
  color: var(--color-secondary) !important;
}

.text-secondary-light {
  color: var(--color-secondary-light) !important;
}

/* FONT UTILITIES */

.fs-13 {
  font-size: 13px !important;
}

.fs-14 {
  font-size: 14px !important;
}

.fs-15 {
  font-size: 15px !important;
}

.fs-16 {
  font-size: 16px !important;
}

.fs-17 {
  font-size: 17px !important;
}

.fs-18 {
  font-size: 18px !important;
}

.fs-19 {
  font-size: 19px !important;
}

.fs-20 {
  font-size: 20px !important;
}

.fs-21 {
  font-size: 21px !important;
}

.fs-22 {
  font-size: 22px !important;
}

.fs-3r {
  font-size: 3rem !important;
}

.fs-4r {
  font-size: 4rem !important;
}

.fs-5r {
  font-size: 5rem !important;
}

.fs-6r {
  font-size: 6rem !important;
}

.fw-100 {
  font-weight: 100 !important;
}

.fw-200 {
  font-weight: 200 !important;
}

.fw-300 {
  font-weight: 300 !important;
}

.fw-400 {
  font-weight: 400 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.fw-800 {
  font-weight: 800 !important;
}

.fw-900 {
  font-weight: 900 !important;
}

.ff-primary {
  font-family: var(--font-heading-primary);
}

.ff-secondary {
  font-family: var(--font-heading-secondary);
}

.img-object-fit {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.box-img-4-3 {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.box-img-16-9 {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.before-dot::before {
  content: "";
  display: inline-block;
  width: 10px;
  min-width: 10px;
  height: 10px;
  background-color: var(--color-secondary);
  margin-right: 10px;
  border-radius: 50%;
}