.row {
  --col-gap: 2rem;
  --row-gap: 2rem;
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--col-gap) / 2 * -1) calc(var(--row-gap) * -1);
}

.col {
  width: 100%;
  padding: 0 calc(var(--col-gap) / 2);
  margin-bottom: var(--row-gap);
}

.col-11 {
  width: calc(11 / 12 * 100%);
}

.col-10 {
  width: calc(10 / 12 * 100%);
}

.col-9 {
  width: calc(9 / 12 * 100%);
}

.col-8 {
  width: calc(8 / 12 * 100%);
}

.col-7 {
  width: calc(7 / 12 * 100%);
}

.col-6 {
  width: 50%;
}

.col-5 {
  width: calc(5 / 12 * 100%);
}

.col-4 {
  width: calc(4 / 12 * 100%);
}

.col-3 {
  width: calc(3 / 12 * 100%);
}

.col-2 {
  width: calc(2 / 12 * 100%);
}

.col-1 {
  width: calc(1 / 12 * 100%);
}

@media (max-width: 1150px) {
  .col-4 {
    width: 50%;
  }
}

@media (max-width: 1024px) {
  .row.x1 {
    flex-direction: column-reverse;
  }
  .col-6 {
    width: 100%;
  }
 
}
@media (max-width: 768px) {
  .col-4 {
    width: 100%;
  }
}

.h-full {
  height: 100%;
}

.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.gap-1 {
  gap: 0.4rem;
}
.gap-2 {
  gap: 0.8rem;
}
.p-1 {
  padding: 0.4rem;
}
.p-2 {
  padding: 0.8rem;
}
.p-4 {
  padding: 1.6rem;
}
.p-6 {
  padding: 2.4rem;
}
.p-8 {
  padding: 3.2rem;
}
.pb-4{
  padding-bottom:4rem;
}
.text-center {
  text-align: center;
}
.c-white {
  color: #fff;
}
.fw-4 {
  font-weight: 400;
}
.fw-6 {
  font-weight: 600;
}
.w-24 {
  width: 24px;
}
.object-contain {
  object-fit: contain;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.mb-0 {
  margin-bottom: 0;
}
.mt-2 {
  margin-top: 2rem;
}
.mt-3 {
  margin-top: 3rem;
}
.mt-4 {
  margin-top: 4rem;
}

.pt-3 {
  padding-top: 3rem;
}
.pt-4 {
  padding-top: 4rem;
}
.pt-5 {
  padding-top: 5rem;
}
.pt-6 {
  padding-top: 6rem;
}
.pb-3 {
  padding-bottom: 3rem;
}

.relative {
  position: relative;
}
.pointer-none {
  pointer-events: none;
}
.z-1 {
  z-index: 1;
}

@media (max-width: 1024px) {
  .pt-6 {
    padding-top: 3rem;
  }
  .p-6 {
    padding: 1.2rem;
  }
}