/*--------------------------------------------------------------
## Global Styling
--------------------------------------------------------------*/

a {
  color: inherit;
}

.link {
  text-decoration: none;
}

.underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

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

.uppercase {
  text-transform: uppercase;
}

.overflow {
  overflow: hidden;
}

.white {
  color: #fff;
}

.op-50 {
  opacity: 0.5;
}

.pointer {
  cursor: pointer;
}

.pointer-none {
  pointer-events: none;
}

.hidden {
  display: none;
}

.f-16 {
  font-size: 16px;
}

.f-18 {
  font-size: 18px;
}

.ul-link {
  text-decoration: underline;
}

.ul-hover {
  &:hover {
    text-decoration: underline;
  }
}

.inline {
  display: inline-block;
}

/* ------------ Grid Styles ------------ */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.center-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
}

/* ------------ Flex Styles ------------ */

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

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

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

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

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

.space-between {
  justify-content: space-between;
}

.block {
  display: block;
}

/* ------------ Gap Styles ------------ */

.gap-1 {
  gap: 0.25em;
}

.gap-8 {
  gap: 8px;
}

.gap-10 {
  gap: 10px;
}

.gap-20 {
  gap: 20px;
}

.gap-40 {
  gap: 40px;
}

.gap-60 {
  gap: 60px;
}

.gap-120 {
  gap: 120px;
}

.row-60 {
  row-gap: 60px;
}

/* ------------ Margin Styles ------------ */

.m0 {
  margin: 0px;
}

.m20 {
  margin: 20px;
}

.m30 {
  margin: 30px;
}

.ma {
  margin: auto;
}

.mla {
  margin-left: auto;
}

.mra {
  margin-right: auto;
}

.mta {
  margin-top: auto;
}

.mba {
  margin-bottom: auto;
}

.mth {
  margin-top: 80px;
  @media (max-width: 768px) {
    margin-top: 65px;
  }
}

.mb0 {
  margin-bottom: 0px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb60 {
  margin-bottom: 60px;
}

.mb80 {
  margin-bottom: 80px;
}

.mb100 {
  margin-bottom: 100px;
  @media (max-width: 768px) {
    margin-bottom: 70px;
  }
}

.ml20 {
  margin-left: 20px;
}

.ml40 {
  margin-left: 40px;
}

.mln40 {
  margin-left: -40px;
}

.mr20 {
  margin-right: 20px;
}

.mr40 {
  margin-right: 40px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mt40 {
  margin-top: 40px;
}

.mt60 {
  margin-top: 60px;
}

/* ------------ Padding Styles ------------ */

.p0 {
  padding: 0px;
}

.p20 {
  padding: 20px;
}

.p40 {
  padding: 40px;
  @media (max-width: 768px) {
    padding: 20px;
  }
}

.pt0 {
  padding-top: 0px;
}

.pt10 {
  padding-top: 10px;
}

.pt20 {
  padding-top: 20px;
}

.pt40 {
  padding-top: 40px;
}

.pb0 {
  padding-bottom: 0px;
}

.pb10 {
  padding-bottom: 10px;
}

.pb20 {
  padding-bottom: 20px;
}

.pb40 {
  padding-bottom: 40px;
}

.pb60 {
  padding-bottom: 60px;
}

.pb80 {
  padding-bottom: 80px;
}

.pl40 {
  padding-left: 40px;
}

/* ------------ Position Styles ------------ */

.pos-rel {
  position: relative;
}

.sticky {
  position: sticky;
  top: 0;
}

.top-100 {
  top: 100px;
}

.top-140 {
  top: 140px;
}

/* ------------ Z-Index Styles ------------ */

.z-2 {
  z-index: 2;
}

/* ------------ BG Styles ------------ */

.bg-grey {
  background-color: #f9f9f9;
}

.bg-pink {
  background-color: #fec3c3;
}

.bg-white {
  background-color: #fff;
}

/* ------------ Image Styles ------------ */

div.bg-image,
.bg-image {
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
}

/* ------------ Spacer Styles ------------ */

.spacer {
  height: 100px;
}

/* ------------ Ratio Styles ------------ */

.ratio-1-2 {
  width: 100%;
  aspect-ratio: 1 / 2;
}

.ratio-2-1 {
  width: 100%;
  aspect-ratio: 2 / 1;
}

.ratio-3-4 {
  width: 100%;
  aspect-ratio: 3 / 4;
}

.ratio-4-5 {
  width: 100%;
  aspect-ratio: 4/5;
}

.ratio-16-9 {
  width: 100%;
  aspect-ratio: 16/9;
}

/* ------------ Width Styles ------------ */

.w-50 {
  width: 50%;
}

.w-100 {
  width: 100%;
}

/* ------------ Height Styles ------------ */

.h-100 {
  height: 100%;
}

.h-100vh {
  height: 100vh;
}

.h-100vha {
  height: calc(100vh - 180px);
}

/* ------------ Border Styles ------------ */

.bb1 {
  border-bottom: 1px solid #000;
}

.b-grey {
  border-color: #d8d8d8;
}

/* ------------ Max Styles ------------ */
.max-300 {
  max-width: 300px;
}

.max-450 {
  max-width: 450px;
}

.max-500 {
  max-width: 500px;
}

.max-550 {
  max-width: 550px;
}

.max-600 {
  max-width: 600px;
}

.max-650 {
  max-width: 650px;
}

.max-750 {
  max-width: 750px;
}

.max-1200 {
  max-width: 1200px;
}

.max-1500 {
  max-width: 1500px;
}

.max-1600 {
  max-width: 1600px;
}

/* ------------ Mobile Styles ------------ */

.m-hide {
  @media (max-width: 768px) {
    display: none;
  }
}

.m-show {
  display: none;
  @media (max-width: 768px) {
    display: inherit;
  }
}

.m-wrap {
  @media (max-width: 768px) {
    flex-wrap: wrap;
  }
}

.m-50 {
  @media (max-width: 768px) {
    width: 50%;
  }
}

.m-100 {
  @media (max-width: 768px) {
    width: 100%;
  }
}

.m-m0 {
  @media (max-width: 768px) {
    margin: 0px;
  }
}

.m-mt20 {
  @media (max-width: 768px) {
    margin-top: 20px;
  }
}

.m-mt40 {
  @media (max-width: 768px) {
    margin-top: 40px;
  }
}

.m-mb0 {
  @media (max-width: 768px) {
    margin-bottom: 0px;
  }
}

.m-mb20 {
  @media (max-width: 768px) {
    margin-bottom: 20px;
  }
}

.m-mb40 {
  @media (max-width: 768px) {
    margin-bottom: 40px;
  }
}

.m-p0 {
  @media (max-width: 768px) {
    padding: 0px;
  }
}

.m-p20 {
  @media (max-width: 768px) {
    padding: 20px;
  }
}

.m-pb0 {
  @media (max-width: 768px) {
    padding-bottom: 0px;
  }
}

.m-pt0 {
  @media (max-width: 768px) {
    padding-top: 0px;
  }
}

.m-pt40 {
  @media (max-width: 768px) {
    padding-top: 40px;
  }
}

.m-pb20 {
  @media (max-width: 768px) {
    padding-bottom: 20px;
  }
}

.m-ratio-8-5 {
  @media (max-width: 768px) {
    aspect-ratio: 8/5;
  }
}

.m-grid-1 {
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.m-gap-20 {
  @media (max-width: 768px) {
    gap: 20px;
  }
}

.m-gap-40 {
  @media (max-width: 768px) {
    gap: 40px;
  }
}

.m-grid-2 {
  @media (max-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.m-bb1 {
  @media (max-width: 768px) {
    border-bottom: 1px solid #000;
  }
}

.m-bt1 {
  @media (max-width: 768px) {
    border-top: 1px solid #000;
  }
}

.m-no-col {
  @media (max-width: 768px) {
    flex-direction: row;
  }
}

.m-top-0 {
  @media (max-width: 768px) {
    top: 0px;
  }
}

.m-col {
  @media (max-width: 768px) {
    flex-direction: column;
  }
}

.m-reverse {
  @media (max-width: 768px) {
    flex-direction: row-reverse;
  }
}

.m-center {
  @media (max-width: 768px) {
    text-align: center;
  }
}

.m-justify-center {
  @media (max-width: 768px) {
    justify-content: center;
  }
}

.m-mx20 {
  @media (max-width: 768px) {
    margin-inline: 20px;
  }
}