/* 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) !important;
}

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

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

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

.bg-primary-gradient {
  background: linear-gradient(to bottom, var(--color-primary), var(--color-primary-light)) !important;
}

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

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

.bg-secondary-gradient {
  background: linear-gradient(to bottom, var(--color-secondary), 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;
}

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

.row-border-top-left::before {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 100px;
  height: 100px;
  border-top: 6px solid var(--color-primary-light);
  border-left: 6px solid var(--color-primary-light);
  content: "";
}

.row-border-bottom-right::before {
  position: absolute;
  bottom: -15px;
  right: -15px;
  width: 100px;
  height: 100px;
  border-bottom: 6px solid var(--color-primary-light);
  border-right: 6px solid var(--color-primary-light);
  content: "";
}