/*=====================
  2.1  Reset CSS start
==========================*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  &[type="number"] {
    appearance: textfield;

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
    }
  }
}

.custom-container {
  padding: 0 20px;

  @media (max-width: 600px) {
    padding: 0 calc(15px + (20 - 15) * ((100vw - 320px) / (600 - 320)));
  }
}

section,
.section-t-space {
  padding-top: 25px;

  @media (max-width: 600px) {
    padding-top: calc(20px + (25 - 20) * ((100vw - 320px) / (600 - 320)));
  }
}

.section-b-space {
  padding-bottom: 25px;

  @media (max-width: 600px) {
    padding-bottom: calc(20px + (25 - 20) * ((100vw - 320px) / (600 - 320)));
  }
}

.section-lg-t-space {
  padding-top: 100px;
}

.section-lg-b-space {
  padding-bottom: 100px;
}

.panel-space {
  padding-top: 100px !important;
}

.white-color {
  color: rgba(var(--white), 1) !important;
}

.theme-color {
  color: rgba(var(--theme-color), 1) !important;
}

.content-color {
  color: rgba(var(--content-color), 1) !important;
}

.title-color {
  color: rgba(var(--title-color), 1) !important;
}

.success-color {
  color: rgba(var(--success-color), 1) !important;
}

.secondary-color {
  color: rgba(var(--secondary-color), 1) !important;
}

.error-color {
  color: rgba(var(--error-color), 1) !important;
}

.theme-bg {
  background-color: rgba(var(--theme-color), 1) !important;
}

.accent-color {
  color: rgba(var(--accent-color), 1) !important;
}

.success-bg {
  background-color: rgba(var(--success-color), 1) !important;
}

.error-bg {
  background-color: rgba(var(--error-color), 1) !important;
}

.box-background {
  background-color: rgba(var(--box-bg), 1) !important;
}

.white-background {
  background-color: rgba(var(--white), 1) !important;
}

.px-20 {
  padding-inline: 20px !important;
}

.mx-20 {
  margin-inline: 20px !important;
}

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

.swiper {
  [dir="rtl"] & {
    direction: ltr;

    .swiper-slide {
      > * {
        direction: rtl;
      }
    }
  }
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"] {
  [dir="rtl"] & {
    text-align: right;
  }
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-spacing {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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