@use "../abstracts/" as *;

.container-wrapper {
  max-width: 1760px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 0;
  @include xxl {
    max-width: 96%;
  }
  @include xl {
    max-width: 96%;
  }
  @include xl-down {
    max-width: 92%;
  }
  @include sm-down {
    max-width: 92%;
  }
}

.section-title {
  margin-bottom: 60px;
  @include lg-down {
    margin-bottom: 50px;
  }

  @include sm-down {
    margin-bottom: 45px;
  }
  h3 {
    font-size: 72px;
    font-weight: 600;
    line-height: 1.1;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
    > span {
      inset-block-start: 20px;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      @include square(45px);
      @include lg-down {
        @include square(35px);
      }
      @include sm-down {
        @include square(25px);
      }
    }
    @include sxxl-down {
      font-size: 60px;
    }
    @include lg {
      font-size: 45px;
    }

    @include md {
      font-size: 42px;
    }

    @include sm {
      font-size: 42px;
    }

    @include sm-down {
      font-size: 32px;
    }
  }
  p {
    font-size: 16px;
    color: $text-secondary;
    -webkit-margin-before: 20px;
            margin-block-start: 20px;
  }

  &:is(.title-fluid) {
    @include flex($align: start, $justify: space-between, $gap: 100px);
    @include lg {
      @include flex($gap: 50px);
    }

    @include lg-down {
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      @include flex($gap: 30px);
    }

    &:has(.title-left, .title-right) {
      .title-left {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 42%;
                flex: 0 0 42%;
        @include lg {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 50%;
                  flex: 0 0 50%;
        }
        @include lg-down {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 100%;
                  flex: 0 0 100%;
        }
      }
      .title-right {
        @include flex($direction: column, $justify: end);
        p {
          -webkit-margin-after: 25px;
                  margin-block-end: 25px;
        }
      }
    }
  }

  &:is(.title-secondary) {
    > h3 {
      color: $text-ternary;
    }
    > p {
      color: $text-ternary;
      opacity: 0.8;
    }
  }
}

.cursor-pointer {
  cursor: pointer;
}
.card-height-100 {
  height: 100%;
}
.w-fit-content {
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
}
.w-max-content {
  width: -webkit-max-content !important;
  width: -moz-max-content !important;
  width: max-content !important;
}

.space-wrap {
  white-space: wrap;
}
.space-nowrap {
  white-space: nowrap;
}

.w-max-content {
  width: -webkit-max-content !important;
  width: -moz-max-content !important;
  width: max-content !important;
}

.apex-charts {
  min-height: 100px !important;
}
.apex-charts .apexcharts-canvas {
  margin: 0 auto;
}

// Colors Start
.text-primary {
  color: $color-primary !important;
}

.text-gradient {
  background: $text-gradient;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-secondary {
  color: $color-secondary !important;
}

.text-dark {
  color: $text-primary !important;
}

.text-light {
  color: $text-light !important;
}

.text-danger {
  color: $color-danger !important;
}

.text-success {
  color: $color-success !important;
}

.text-warning {
  color: $color-warning !important;
}

.text-info {
  color: $color-info !important;
}

.bg--primary {
  background-color: $color-primary !important;
}

.bg--gradient {
  background: $color-gradient !important;
}

.bg--primary-soft {
  background-color: $color-primary-soft !important;
}

.bg--secondary {
  background-color: $color-secondary !important;
}

.bg--secondary-soft {
  background-color: $color-secondary-soft !important;
}

.bg--transparent {
  background-color: transparent !important;
}
.bg--danger {
  background-color: $color-danger !important;
}

.bg--success {
  background-color: $color-success !important;
}

.bg--warning {
  background-color: $color-warning !important;
}

.bg--info {
  background-color: $color-info !important;
}
.card-bg {
  background-color: $card-bg !important;
}

.bg--danger-light {
  background-color: $color-danger-light !important;
}

.bg--success-light {
  background-color: $color-success-light !important;
}

.bg--warning-light {
  background-color: $color-warning-light !important;
}

.bg--info-light {
  background-color: $color-info-light !important;
}

.bg--primary {
  background-color: $color-primary !important;
}

.bg--primary-light {
  background-color: $color-primary-soft !important;
}

.bg--dark {
  background: $color-dark !important;
}

.bg--dark-light {
  background-color: $color-dark-light !important;
}

// Spacing Start

// Padding
.pt-130 {
  -webkit-padding-before: 130px;
          padding-block-start: 130px;
  @include lg {
    -webkit-padding-before: 100px;
            padding-block-start: 100px;
  }

  @include lg-down {
    -webkit-padding-before: 80px;
            padding-block-start: 80px;
  }
}

.pt-120 {
  -webkit-padding-before: 120px;
          padding-block-start: 120px;
}
.pt-110 {
  -webkit-padding-before: 110px;
          padding-block-start: 110px;
}
.pt-100 {
  -webkit-padding-before: 100px;
          padding-block-start: 100px;
}
.pt-90 {
  -webkit-padding-before: 90px;
          padding-block-start: 90px;
}
.pt-80 {
  -webkit-padding-before: 80px;
          padding-block-start: 80px;
}
.pt-70 {
  -webkit-padding-before: 70px;
          padding-block-start: 70px;
}

.pt-60 {
  -webkit-padding-before: 60px;
          padding-block-start: 60px;
}
.pt-50 {
  -webkit-padding-before: 50px;
          padding-block-start: 50px;
}
.pt-40 {
  -webkit-padding-before: 40px;
          padding-block-start: 40px;
}
.pt-30 {
  -webkit-padding-before: 30px;
          padding-block-start: 30px;
}
.pt-20 {
  -webkit-padding-before: 20px;
          padding-block-start: 20px;
}
.pt-10 {
  -webkit-padding-before: 10px;
          padding-block-start: 10px;
}

.pb-130 {
  -webkit-padding-after: 130px;
          padding-block-end: 130px;
  @include lg {
    -webkit-padding-after: 100px;
            padding-block-end: 100px;
  }
  @include lg-down {
    -webkit-padding-after: 80px;
            padding-block-end: 80px;
  }
}

.pb-120 {
  -webkit-padding-after: 120px;
          padding-block-end: 120px;
}
.pb-110 {
  -webkit-padding-after: 110px;
          padding-block-end: 110px;
}
.pb-100 {
  -webkit-padding-after: 100px;
          padding-block-end: 100px;
}

.pb-90 {
  -webkit-padding-after: 90px;
          padding-block-end: 90px;
}
.pb-80 {
  -webkit-padding-after: 80px;
          padding-block-end: 80px;
}

.pb-70 {
  -webkit-padding-after: 70px;
          padding-block-end: 70px;
}
.pb-60 {
  -webkit-padding-after: 60px;
          padding-block-end: 60px;
}
.pb-50 {
  -webkit-padding-after: 50px;
          padding-block-end: 50px;
}

.pb-40 {
  -webkit-padding-after: 40px;
          padding-block-end: 40px;
}

.pb-30 {
  -webkit-padding-after: 30px;
          padding-block-end: 30px;
}

.pb-20 {
  -webkit-padding-after: 20px;
          padding-block-end: 20px;
}

.pb-10 {
  -webkit-padding-after: 10px;
          padding-block-end: 10px;
}

// Margin
.mb-130 {
  -webkit-margin-after: 130px;
          margin-block-end: 130px;
  @include lg {
    -webkit-margin-after: 100px;
            margin-block-end: 100px;
  }
  @include lg-down {
    -webkit-margin-after: 80px;
            margin-block-end: 80px;
  }
}
.mb-120 {
  -webkit-margin-after: 120px;
          margin-block-end: 120px;
}
.mb-110 {
  -webkit-margin-after: 110px;
          margin-block-end: 110px;
}
.mb-100 {
  -webkit-margin-after: 100px;
          margin-block-end: 100px;
}
.mb-90 {
  -webkit-margin-after: 90px;
          margin-block-end: 90px;
}
.mb-80 {
  -webkit-margin-after: 80px;
          margin-block-end: 80px;
}
.mb-70 {
  -webkit-margin-after: 70px;
          margin-block-end: 70px;
}
.mb-60 {
  -webkit-margin-after: 60px;
          margin-block-end: 60px;
}
.mb-50 {
  -webkit-margin-after: 50px;
          margin-block-end: 50px;
}

.mb-40 {
  -webkit-margin-after: 40px;
          margin-block-end: 40px;
}

.mb-30 {
  -webkit-margin-after: 30px;
          margin-block-end: 30px;
}

.mb-20 {
  -webkit-margin-after: 20px;
          margin-block-end: 20px;
}

.mb-10 {
  -webkit-margin-after: 10px;
          margin-block-end: 10px;
}

.mt-130 {
  -webkit-margin-before: 130px;
          margin-block-start: 130px;
  @include lg {
    -webkit-margin-before: 100px;
            margin-block-start: 100px;
  }
  @include lg-down {
    -webkit-margin-before: 80px;
            margin-block-start: 80px;
  }
}
.mt-120 {
  -webkit-margin-before: 120px;
          margin-block-start: 120px;
}

.mt-110 {
  -webkit-margin-before: 110px;
          margin-block-start: 110px;
}
.mt-100 {
  -webkit-margin-before: 100px;
          margin-block-start: 100px;
}
.mt-90 {
  -webkit-margin-before: 90px;
          margin-block-start: 90px;
}
.mt-80 {
  -webkit-margin-before: 80px;
          margin-block-start: 80px;
}
.mt-70 {
  -webkit-margin-before: 70px;
          margin-block-start: 70px;
}
.mt-60 {
  -webkit-margin-before: 60px;
          margin-block-start: 60px;
}
.mt-50 {
  -webkit-margin-before: 50px;
          margin-block-start: 50px;
}
.mt-40 {
  -webkit-margin-before: 40px;
          margin-block-start: 40px;
}
.mt-30 {
  -webkit-margin-before: 30px;
          margin-block-start: 30px;
}
.mt-20 {
  -webkit-margin-before: 20px;
          margin-block-start: 20px;
}
.mt-10 {
  -webkit-margin-before: 10px;
          margin-block-start: 10px;
}