/**
 * Hero short Block Styles
 *
 * @package TekCreative
 * @since 2.0.0
 */

.hero-short-001 {
  position: relative;
  z-index: 10;
  background-size: cover;
  background-position: center
}

.hero-short-001::after {
  position: absolute;
  top: 0px;
  height: 50%;
  width: 100%;
  background-image: linear-gradient(180deg, #17281D 0%, #17281D00 100%);
  --tw-content: '';
  content: var(--tw-content)
}

.hero-short-001 + section {
  padding-top: 11rem
}

.hero-short-001__container {
  position: relative;
  z-index: 1;
  height: 20vh
}

.hero-short-001__image-wrap {
  position: absolute;
  bottom: 0px;
  left: 50%;
  z-index: 10;
  display: flex;
  max-width: calc(100vw - 40px);
  --tw-translate-x: -50%;
  --tw-translate-y: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(252 252 252 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(244 241 234 / var(--tw-bg-opacity, 1));
  padding-top: 5rem;
  padding-bottom: 5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  --tw-shadow: 0px 12px 16px -4px #21222226;
  --tw-shadow-colored: 0px 12px 16px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.hero-short-001__image {
  max-height: 5rem;
  max-width: 18rem;
  -o-object-fit: contain;
     object-fit: contain
}