/* ==========================================================================
   Layout containers
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container-width) + (var(--container-padding) * 2));
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container-fluid {
  width: 100%;
  padding-inline: var(--container-padding);
}

/* ==========================================================================
   Display
   ========================================================================== */
.d-block {
  display: block;
}
.d-inline-block {
  display: inline-block;
}
.d-flex {
  display: flex;
}
.d-inline-flex {
  display: inline-flex;
}
.d-grid {
  display: grid;
}
.d-none {
  display: none;
}

/* ==========================================================================
   Flexbox
   ========================================================================== */
.flex-container {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.wrap {
  flex-wrap: wrap;
}
.nowrap {
  flex-wrap: nowrap;
}

.align-items-start {
  align-items: flex-start;
}
.align-items-center {
  align-items: center;
}
.align-items-end {
  align-items: flex-end;
}
.align-items-stretch {
  align-items: stretch;
}

.justify-content-start {
  justify-content: flex-start;
}
.justify-content-center {
  justify-content: center;
}
.justify-content-end {
  justify-content: flex-end;
}
.justify-content-between {
  justify-content: space-between;
}
.justify-content-around {
  justify-content: space-around;
}

.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.flex-grow-0 {
  flex-grow: 0;
}

/* ==========================================================================
   Grid
   ========================================================================== */
.grid {
  display: grid;
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid-5 {
  grid-template-columns: repeat(5, 1fr);
}
.grid-6 {
  grid-template-columns: repeat(6, 1fr);
}

/* ==========================================================================
   Gap
   ========================================================================== */
.gap-0 {
  gap: 0;
}
.gap-4 {
  gap: var(--space-4);
}
.gap-8 {
  gap: var(--space-8);
}
.gap-10 {
  gap: var(--space-10);
}
.gap-12 {
  gap: var(--space-12);
}
.gap-16 {
  gap: var(--space-16);
}
.gap-20 {
  gap: var(--space-20);
}
.gap-24 {
  gap: var(--space-24);
}
.gap-30 {
  gap: var(--space-30);
}
.gap-40 {
  gap: var(--space-40);
}

/* ==========================================================================
   Width / Height
   ========================================================================== */
.w-100 {
  width: 100%;
}
.w-auto {
  width: auto;
}
.h-100 {
  height: 100%;
}
.h-auto {
  height: auto;
}
.mw-100 {
  max-width: 100%;
}

/* ==========================================================================
   Position
   ========================================================================== */
.position-relative {
  position: relative;
}
.position-absolute {
  position: absolute;
}
.position-fixed {
  position: fixed;
}
.position-sticky {
  position: sticky;
}
.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* ==========================================================================
   Overflow
   ========================================================================== */
.overflow-hidden {
  overflow: hidden;
}
.overflow-auto {
  overflow: auto;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}

/* ==========================================================================
   Visibility
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

/* ==========================================================================
   Text alignment / helpers
   ========================================================================== */
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}
.text-white {
  color: var(--white);
}
.text-nowrap {
  white-space: nowrap;
}

/* ==========================================================================
   Spacing helpers
   ========================================================================== */
.m-0 {
  margin: 0;
}
.p-0 {
  padding: 0;
}
.mb-100 {
  margin-bottom: 100px;
}

/* ==========================================================================
   Background image helper
   ========================================================================== */
.bgimg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  max-width: inherit;
  max-height: 100%;
  object-fit: cover;
  overflow: hidden;
  z-index: -1;
}
/* RESPONSIVE  MEDIA QUERY */
@media (max-width: 1599.98px) {
}
@media (max-width: 1439.98px) {
  .mb-90 {
    margin-bottom: 80px;
  }
  .mb-100 {
    margin-bottom: 80px;
  }
  .pt-pb100 {
    padding: 80px 0;
  }
  .mb-150 {
    margin-bottom: 80px;
  }
  .pb-100 {
    padding-bottom: 80px;
  }
}
@media (max-width: 1199.98px) {
  .mb-80 {
    margin-bottom: 60px;
  }
  .pt-pb100 {
    padding: 60px 0;
  }
  .pt-pb80 {
    padding: 60px 0;
  }
  .mb-150 {
    margin-bottom: 60px;
  }
  .pb-100 {
    padding-bottom: 60px;
  }
}
@media (max-width: 991.98px) {
  .mb-70 {
    margin-bottom: 60px;
  }
  .mb-80 {
    margin-bottom: 60px;
  }
  .mb-90 {
    margin-bottom: 60px;
  }
  .mb-100 {
    margin-bottom: 60px;
  }
  .pt-pb100 {
    padding: 60px 0;
  }
  .pt-pb80 {
    padding: 60px 0;
  }
  .pt-pb70 {
    padding: 60px 0;
  }
}

@media (max-width: 767.98px) {
  .mb-100 {
    margin-bottom: 40px;
  }
}

@media (max-width: 575.98px) {
  .mb-50 {
    margin-bottom: 40px;
  }
  .mb-60 {
    margin-bottom: 40px;
  }
  .mb-70 {
    margin-bottom: 40px;
  }
  .mb-80 {
    margin-bottom: 40px;
  }
  .mb-90 {
    margin-bottom: 40px;
  }
  .mb-100 {
    margin-bottom: 40px;
  }

  .pt-pb100 {
    padding: 40px 0;
  }
  .pt-pb80 {
    padding: 40px 0;
  }
  .pt-pb70 {
    padding: 40px 0;
  }
  .pt-pb60 {
    padding: 40px 0;
  }
  .mb-150 {
    margin-bottom: 40px;
  }
  .pb-100 {
    padding-bottom: 40px;
  }

  .container-fluid {
    padding: 0 15px;
  }
}