h1
    @include phone
      font-size: 40px
    position: relative
    font-weight: 900
    font-size: 56px

.card-section
  position: relative
  background: #f8f3f3
  padding: 3rem

.card-section
	@include phone
		padding: 1rem

.buying-testimonial
	.cards
		@include phone
			width: 100%
			display: flex !important
			height: auto
			justify-content: space-between
			gap: unset
			padding: 1rem !important
		@include tablet
			width: 100%
			height: auto
		width: 100%
		min-height: 400px
		div
			@include phone
				display: none
	.content
		@include phone
			width: 100%
			min-height: 300px
		@include tablet
			width: 100%
			min-height: 350px
		width: 100%
		min-height: 400px

.buying-testimonial
	@include phone
		flex-direction: column
		row-gap: 2rem

.buying-testimonial
  display: flex
  margin: 0 auto
  column-gap: 2rem

  h1
    grid-column: span 12
    text-transform: capitalize
    text-align: center
    font-size: 52px
    font-weight: 700
    margin: 0 0 3rem 0

  .cards
    grid-column: span 12
    display: grid
    padding: 2rem 0
    border-radius: 25px 0px
    background: #fff
    box-shadow: 0px 4px 22px -2px RGBA(0,0,0,0.14)
    gap: 1rem

    .industry-card
      cursor: pointer
      display: grid
      grid-template-columns: auto 1fr
      column-gap: 2.188rem
      align-items: center
      transition: 0.3s
      position: relative
      padding: 0 2rem

      img
        display: block
        width: 3.35rem
        height: 3.35rem
        border-radius: 50%
        filter: grayscale(1)
        transition: 0.5s

      > div
        h3
          text-transform: capitalize
          font-size: 1.025rem

        p
          text-transform: capitalize
          color: #767676
          font-size: 0.9rem

      &:hover
        color: #92278F

      &.active
        position: relative
        background-image: linear-gradient(113deg, #92278F 0%, #7c32f1ff 100%)
        color: white

      svg
        transition: 0.2s linear all
        fill: black !important

      &.active
        svg
          fill: white !important

        &::after
          content: "\25B6"
          color: white
          font-size: 1.3rem
          position: absolute
          right: 5%
          transition: 0.2s linear all

  .content
    position: relative
    border-radius: 25px
    background: #fff
    box-shadow: 0px 4px 22px -2px RGBA(0,0,0,0.14)

    .contentBox
      position: absolute
      width: 100%
      height: 100%
      padding: 4rem
      display: flex

      .text
        padding-bottom: 2rem

.industry-card
	&.active
		&::after
			@include phone
				display: none

.industry-card
	@include phone
		padding: 0 !important
		column-gap: unset !important
		grid-template-columns: unset
		border-radius: 50%
	svg
		@include phone
			width: 30px
			height: 30px

.contentBox
	@include phone
		padding: 3rem 1rem !important

.features__container
  position: relative
  background: white

.feature
  display: flex
  padding: 1rem 0

.feature
	@include phone
		flex-direction: column
		padding: 0

.feature
	.left
		display: flex
		justify-content: center
		align-items: center
		img
			max-width: 100%
	.right
		@include phone
			padding: 0 12px 2rem 12px
		display: flex
		justify-content: center
		align-items: center
		img
			max-width: 100%

.feature__text-container
	h1
		@include phone
			font-size: 41px
		font-size: 48px

.feature
	img
		max-width: 100%
		@include phone
			width: 100%

.feature__text-container
	@include phone
		padding: 2rem 12px 4rem 12px

.feature__text-icon
	@include phone
		width: 5rem !important
		height: 5rem


.is-feature-reversed
  flex-direction: row-reverse

.is-feature-reversed
	@include phone
		flex-direction: column

.coming-soon__container
  background: #f8f3f3

.testimonial-section
  display: flex
  flex-direction: column
  gap: 8rem
  justify-content: center
  align-items: center
  padding: 4rem 0
  overflow: hidden
  @include phone
    padding: 4rem 8px
    gap: 0 !important
  h2
    margin: 0
    font-weight: 700
    text-align: center

.testimonial__container
  display: flex
  gap: 2rem

.testimonial__item
  position: relative
  height: 474.8795166015625px
  border-radius: 25px 0px 25px 0px
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  padding: 2rem
  text-align: center
  box-shadow: 0px 4px 22px -2px RGBA(0,0,0,0.14)
  transition: .2s linear all
  @include phone
    height: auto !important
    border-radius: 12px !important
    margin-top: 2rem !important
    height: auto !important
    img
        width: 25% !important
        height: auto !important
  h3
    font-style: italic
  h2
    font-size: 30px
  img
    position: absolute
    top: -45px
    height: 6rem
    @include phone
      position: unset !important
.testimonial__item
	&:hover
		transform: scale(1.1)
.owl-stage-outer
	overflow: unset !important
.owl-carousel
	.owl-item
		img
			width: auto
			height: 10rem
.saving-section
  padding: 2rem 130px
  background: #f8f3f3
  display: flex
  justify-content: center
  align-items: center
  gap: 4rem
@media screen and (min-width: 61.25rem)
  .buying-testimonial .content .contentBox
    align-items: center
@media screen and (min-width: 61.25rem)
  .buying-testimonial .content .contentBox .text
    padding-bottom: 0
.card-features__container
  display: flex
  flex-direction: column
  gap: 1rem
  opacity: 0
  transition: 0.2s linear all
.card-features__item
  width: 320px
  min-height: 70px
  border-radius: 0px 15px 0px 15px
  display: flex
  flex-direction: row
  gap: 1rem
  align-items: center
  padding: 1rem 1rem 1rem 1rem
.card-features__item
	svg
		width: 3rem
		height: 5rem
	img
		width: 2rem
		height: 2rem
.card-features_item-text
	display: flex
	flex-direction: column
	margin: 0
	color: white
	font-weight: 500
	gap: 1.3rem
	h4
		margin: 0
	p
		margin: 0
.card-features__image
  right: 40px
  opacity: 0
  max-width: 50%
  transition: 0.2s linear all
  position: absolute
.card-features__image
	@include phone
		display: none
.buying-testimonial .content .contentBox
  h3
    transition: 0.3s
    opacity: 0
    margin-bottom: 3rem
    font-size: 25px
    text-align: unset
  span svg
    width: 1.25rem
    color: #eca633
  &.active
    h2
      opacity: 1
      transition-delay: 0.3s
    .card-features__image
      opacity: 1
      transition-delay: 0.5s
    .card-features__container
      opacity: 1
      transition-delay: 0.4s
.text-sm
	font-size: .875rem !important
.card
	border-radius: 1.25rem
.line-height-lg
	line-height: 1.5
.owl-item
	background-color: #fff
	border-radius: 25px
.top-img-pos
	width: 100%
.top-img-pos
	img
		width: 100%
		border-radius: 25px
.see-btn
	a
		width: 100%
		padding: 6px 15px
		border: 2px solid #942193
		color: #942193
		background-color: #fff
		border-radius: 25px
		transition: .5s ease-in-out
		text-align: center
		display: inline-block
.see-btn
	a:hover
		background-color: #942193
		color: #fff
.for-btn-width
	width: 100%

.for-btn-width
	a
		background-color: #942193
		color: #fff
		border: 2px solid #942193
		font-size: 0.8rem
		transition: .5s ease-in-out
		border-radius: 25px !important
		padding: 8px 10px

.for-btn-width
	a:hover
		background-color: #fff
		color: #942193



.img
	max-width: 100%
	-webkit-transition: all 0.3s ease-out 0s
	-o-transition: all 0.3s ease-out 0s
	transition: all 0.3s ease-out 0s

a,
.btn
	-webkit-transition: all 0.3s ease-out 0s
	-o-transition: all 0.3s ease-out 0s
	transition: all 0.3s ease-out 0s
	&:hover,
	&:focus
		text-decoration: none
		outline: none

textarea
	outline: 0

button,
input,
input,
textarea
	&:focus
		outline: 0

a
	&.text-white-50
		&:hover,
		&:focus
			color: #FFF !important

.row-grid + .row-grid
	margin-top: 3rem


.space-2
	padding-top: 4rem !important
	padding-bottom: 4rem !important

.space-top-2
	padding-top: 4rem !important

.space-bottom-2
	padding-bottom: 4rem !important

.space-3
	padding-top: 8rem !important
	padding-bottom: 8rem !important

.space-top-3
	padding-top: 8rem !important

.space-bottom-3
	padding-bottom: 8rem !important

.space-4
	padding-top: 12.5rem !important
	padding-bottom: 12.5rem !important

.space-top-4
	padding-top: 12.5rem !important

.space-bottom-4
	padding-bottom: 12.5rem !important

@media(min-width:576px)
	.space-sm-2
		padding-top: 4rem !important
		padding-bottom: 4rem !important

	.space-top-sm-2
		padding-top: 4rem !important

	.space-bottom-sm-2
		padding-bottom: 4rem !important

	.space-sm-3
		padding-top: 8rem !important
		padding-bottom: 8rem !important

	.space-top-sm-3
		padding-top: 8rem !important

	.space-bottom-sm-3
		padding-bottom: 8rem !important

	.space-sm-4
		padding-top: 12.5rem !important
		padding-bottom: 12.5rem !important

	.space-top-sm-4
		padding-top: 12.5rem !important

	.space-bottom-sm-4
		padding-bottom: 12.5rem !important


@media(min-width:768px)
	.space-md-2
		padding-top: 4rem !important
		padding-bottom: 4rem !important

	.space-top-md-2
		padding-top: 4rem !important

	.space-bottom-md-2
		padding-bottom: 4rem !important

	.space-md-3
		padding-top: 8rem !important
		padding-bottom: 8rem !important

	.space-top-md-3
		padding-top: 8rem !important

	.space-bottom-md-3
		padding-bottom: 8rem !important

	.space-md-4
		padding-top: 12.5rem !important
		padding-bottom: 12.5rem !important

	.space-top-md-4
		padding-top: 12.5rem !important

	.space-bottom-md-4
		padding-bottom: 12.5rem !important


@media(min-width:992px)
	.space-lg-2
		padding-top: 4rem !important
		padding-bottom: 4rem !important

	.space-top-lg-2
		padding-top: 4rem !important

	.space-bottom-lg-2
		padding-bottom: 4rem !important

	.space-lg-3
		padding-top: 8rem !important
		padding-bottom: 8rem !important
	.space-top-lg-3
		padding-top: 8rem !important

	.space-bottom-lg-3
		padding-bottom: 8rem !important

	.space-lg-4
		padding-top: 12.5rem !important
		padding-bottom: 12.5rem !important

	.space-top-lg-4
		padding-top: 12.5rem !important

	.space-bottom-lg-4
		padding-bottom: 12.5rem !important


@media(min-width:1200px)
	.space-top-xl-2
		padding-top: 4rem !important

	.space-xl-2
		padding-top: 4rem !important
		padding-bottom: 4rem !important

	.space-bottom-xl-2
		padding-bottom: 4rem !important

	.space-top-xl-3
		padding-top: 8rem !important

	.space-xl-3
		padding-top: 8rem !important
		padding-bottom: 8rem !important

	.space-bottom-xl-3
		padding-bottom: 8rem !important

	.space-top-xl-4
		padding-top: 12.5rem !important

	.space-xl-4
		padding-top: 12.5rem !important
		padding-bottom: 12.5rem !important

	.space-bottom-xl-4
		padding-bottom: 12.5rem !important

.text-black-75
	color: rgba($black, .75) !important

.text-white-75
	color: rgba($white, .75) !important

.bg-custom-light
	background-color: #EBF8F5

.bg-custom-primary
	background-image: linear-gradient(to right, #5c9bf0, #4ca9f4, #44b5f5, #48c1f4, #56ccf2)

.bg-custom-teal
	background-image: linear-gradient(to bottom, #e93c59, #e62878, #d8289a, #ba3abc, #874fd9)

.bg-custom-teal-1
	background-image: linear-gradient(to right, #e55c8b, #e25897, #dc55a5, #d455b3, #c857c1)

.bg-custom-1
	background-color: #F27E7E

.bg-custom-2
	background-color: #AB8FF1

.bg-custom-3
	background-color: #FEC7C0

.bg-custom-4
	background-color: #E8EFFF

.bg-custom-5
	background-color: #FFF1D5

.bg-custom-6
	background-color: #BCEBF5

.mask-custom
	margin-top: 27rem
	height: 190px

.bg-custom-green
	background-image: linear-gradient(to bottom, #3bba98, #49cba7, #57dcb6, #64edc5, #72ffd5)

.bg-teal
	background-color: $teal

.bg-indigo
	background-color: $indigo

.min-h-270rem
	min-height: 16.875rem

.min-h-300rem
	min-height: 18.75rem

.min-h-380rem
	min-height: 23.75rem

.min-h-420rem
	min-height: 35.75rem

.box-max-width
	max-width: 37.75rem

.max-h-420rem
	max-height:  35.75rem

.height-700
	height: 700px

@media (max-width: 991.98px)
	.height-700
		height: 500px

.bg-cover
	position: relative
	background-repeat: no-repeat

.bg-size-cover
	background: no-repeat center center/cover

.bg-size-contain
	background-size: contain

.hub-section.schedule-demo
	margin-bottom: -2rem
	margin-top: -2rem
	max-width: 1320px
	margin-left: auto
	margin-right: auto

.hub-section.topliccluster_section
	margin-top: 9rem

.footer-space
	padding-top: 4rem
	padding-bottom: 4rem
	.nav-link
		padding: .25rem 1rem

.hub-section.schedule-demo + .hub-section .footer-space
	padding-top: 9rem

.feather
	width: 1em
	height: 1em
	fill: none
	stroke: currentcolor
	stroke-width: 3px
	stroke-linecap: round
	stroke-linejoin: round
.feather-fill
	fill: currentcolor
.btn-icon
	position: relative
	display: inline-flex
	flex-shrink: 0
	justify-content: center
	align-items: center
	font-size: 1rem
	font-weight: 400
	width: 3.125rem
	height: 3.125rem
	padding: 0
	&.btn-xs
		font-size: .85rem
		width: 2rem
		height: 2rem

.btn-icon
	.btn-inner-text
		&:not(:first-child)
			margin-left: .5em

.btn-icon
	.btn-inner-text
		&:not(:last-child)
			margin-right: .5em


.btn-soft-light
	color:  #f7faff
	background-color: rgba(247,250,255,.1)
	border-color: transparent
	&.active,
	&:active,
	&:focus,
	&:hover
		color: #1e2022
		background-color: #f7faff
		box-shadow: rgba(247,250,255,.1)

.btn-white
	color: #273444
	background-color: #FFF
	border-color: #FFF
	box-shadow: none
	&:hover
		color: #273444
		background-color: #ececec
		border-color: #e6e6e6

.btn-white:focus,
.btn-white.focus
	box-shadow: none, 0 0 0 rgba(255, 255, 255, 0.35)

.btn-white.disabled,
.btn-white:disabled
	color: #273444
	background-color: #FFF
	border-color: #FFF

.btn-white:not(:disabled):not(.disabled):active,
.btn-white:not(:disabled):not(.disabled).active,
.show > .btn-white.dropdown-toggle
	color: #273444
	background-color: #e6e6e6
	border-color: #dfdfdf

.btn-white:not(:disabled):not(.disabled):active:focus,
.btn-white:not(:disabled):not(.disabled).active:focus,
.show > .btn-white.dropdown-toggle:focus
	box-shadow: 0 0 0 rgba(255, 255, 255, 0.35)

.btn-link-white
	font-weight: 400
	color: rgba(255, 255, 255, 0.75)
	text-decoration: none
	&:hover
		color: #FFF
		text-decoration: none

.display-md
	font-size:  7.5rem
	line-height: 1

.display-xl
	font-size:  10rem
	line-height: 1

.hub-section
	position: relative
	padding-top: 1rem
	padding-bottom: 0
	margin: 2rem 0

.hub-section-xl
	padding-top: 9rem
	padding-bottom: 9rem

.hub-section-lg
	padding-top: 6rem
	padding-bottom: 6rem

.hub-section-sm
	padding-top: 2rem
	padding-bottom: 2rem

.bg-gird-1
	background-color: #442463
	opacity: 0.25

.bg-gird-2
	background-color: #442463
	opacity: 0.78

.bg-gird-3
	background-color: #adb7bf
	opacity: 0.78

.bg-gird-4
	background-color: #64a944
	opacity: 0.25

.bg-gird-5
	background-color: #64a944
	opacity: 0.25


.back_office
	.bg-gird-1
		background-color: rgba(0, 197, 156, 1)
		opacity: 0.4

	.bg-gird-2
		background-color: rgba(44, 68, 132, 1)
		opacity: 0.4

	.bg-gird-3
		background-color: rgba(255, 98, 72, 1)
		opacity: 0.4

	.bg-gird-4
		background-color: rgba(242, 131, 0, 1)
		opacity: 0.4

.workforce_management
	.bg-gird-1
		background-color: rgba(253, 82, 129, 1)
		opacity: 0.25

	.bg-gird-2
		background-color: rgba(0, 198, 255, 1)
		opacity: 0.5

	.bg-gird-5
		background-color: rgba(44, 68, 132,1)
		opacity: 0.5

.food_management
	.bg-gird-1
		background-color: rgba(255, 98, 72, 1)
		opacity: 0.25

	.bg-gird-2
		background-color: #442463
		opacity: 0.5

	.bg-gird-3
		background-color: rgba(232, 186, 0, 1)
		opacity: 0.5

	.bg-gird-4
		background-color: rgba(118, 116, 235, 0.5)

.accounting_cash
	.bg-gird-1
		background-color: rgba(253, 82, 129, 0.25)

	.bg-gird-3
		background-color: rgba(60,149,87,0.5)

	.bg-gird-4
		background-color: rgba(232, 186, 0, 0.75)

	.bg-gird-5
		background-color: rgba(253, 82, 129, 0.75)

.food_safety
	.bg-gird-1
		background-color: #FD5281
		opacity: 0.25

	.bg-gird-2
		background-color: #00F180
		opacity: 0.4

	.bg-gird-3
		background-color: #2C4484
		opacity: 0.4

	.bg-gird-4
		background-color: #E8BA00
		opacity: 0.4

	.bg-gird-5
		background-color: #00D16D
		opacity: 0.4


.bg-gird-primary
	background-color: rgba($primary, .25)

.bg-gird-purple
	background-color: rgba($purple, .75)

.bg-gird-black
	background-color: rgba($black, .5)

.bg-gird-success
	background-color: rgba($success, .5)

.bg-gird-success1
	background-color: rgba($success, .5)

.bg-white-opacity
	background-color: rgba($white, .5)

.bg-dark-opacity
	background-color: rgba($dark, .5)

.bg-purple-opacity
	background-color: rgba($purple, .5)

.bg-danger-opacity
	background-color: rgba($danger, .5)

.bg-warning-opacity
	background-color: rgba($warning, .5)

.bg-success-opacity
	background-color: rgba($success, .5)

.bg-primary-opacity
	background-color: rgba($primary, .5)

.border-opacity-15
	border: 15px solid rgba($white, .5)

.border-left-opacity-15
	border-left: 15px solid rgba($white, .5)

.border-right-opacity-15
	border-right: 15px solid rgba($white, .5)

.border-bottom-opacity-15
	border-bottom: 15px solid rgba($white, .5)

@include media-breakpoint-up(md)
	.border-md-top-0
		border-top: 0 !important

	.border-md-right-0
		border-right: 0 !important

	.border-md-bottom-0
		border-bottom: 0 !important

	.border-md-left-0
		border-left: 0 !important

@include media-breakpoint-up(xl)
	.border-xl-top-0
		border-top: 0 !important

	.border-xl-right-0
		border-right: 0 !important

	.border-xl-bottom-0
		border-bottom: 0 !important

	.border-xl-left-0
		border-left: 0 !important

.mask
	position: absolute
	top: 0
	left: 0
	width: 100%
	height: 100%
	-webkit-transition: all 0.2s ease
	-o-transition: all 0.2s ease
	transition: all 0.2s ease

.opacity-4
	opacity: 0.4

.opacity-5
	opacity: 0.5

.opacity-6
	opacity: 0.6

.opacity-7
	opacity: 0.7

.opacity-8
	opacity: 0.8

.bg-light
	.card
		position: relative
		margin-bottom: 30px
		background-color: #f2f2f2
		border: none

.for-navigation-btns
	.owl-nav
		position: absolute
		display: flex
		align-items: center
		width: 100%
		justify-content: space-between
		top: 33%
		span
			font-size: 3rem
		.owl-prev
			left: -25px
		.owl-next
			right: -25px
	.owl-dots
		text-align: center
		margin-top: 2rem

.for-navigation-btns
	.product-bundletitle
		font-size: 1.5rem

.alta-hero-section
	letter-spacing: .075rem
	position: relative
	width: 100%
	overflow: hidden
	background-position: center
	background-repeat: no-repeat
	background-size: cover
	.hero-btn-group
		display: none
	.learn-more
		&:hover
			.hero-btn-group
				display: block

.client
	text-align: center
	.client-logo
		width: 100%
		max-width: 6rem
		height: auto
		margin-left: auto
		margin-right: auto

	.client-logo-1
		width: 100%
		max-width: 8rem
		height: auto
		margin-left: auto
		margin-right: auto

@include media-breakpoint-up(xl)
	.client
		text-align: right

.parallax,
.jarallax
	position: relative
	z-index: 0
	.parallax-img,
	.jarallax-img
		position: absolute
		object-fit: cover
		top: 0
		left: 0
		width: 100%
		height: 100%
		z-index: -1

.icon-shape
	display: inline-flex
	width: 2.5rem
	height: 2.5rem
	text-align: center
	vertical-align: middle
	border-radius: .375rem
	align-items: center
	justify-content: center

.avatar
	position: relative
	display: inline-block
	width: 8rem
	height: 8rem
	border-radius: .3125rem
	overflow: hidden
	border: 1px solid #EEE

.avatar-img
	max-width: 100%
	height: 100%
	border-radius: .3125rem

.article-content
	font-size: 1.2rem
	line-height: 1.6
	ol li,
	ul li
		margin-bottom: .75rem
		font-size: 1.2rem
		line-height: 1.6

.article-sticky-nav
	top: 25px
	.card-body
		max-height: calc(100vh - 120px)
		overflow-y: auto
	.nav-link
		color: $secondary
		position: relative
		&::before
			content: ""
			position: absolute
			top: 0
			bottom: 0
			left: -1.8rem
			border-right: 2px solid transparent
			-webkit-transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out
			-o-transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out
			transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out
	.current
		.nav-link
			color: $primary
			&::before
				border-color: $primary

.sticky-footer
	a.card
		background-size: cover
		background-position: center
		border-radius: 0
		border: 0
		margin: 0
		position: relative
		/*padding: 1.5rem*/
		color: #FFF
		font-weight: 400
		img
			&.position-absolute
				right: 0
				top: 0
		.icon-shape
			font-size: 1.25rem
			background-color: #FFF
		&.first-child
			.icon-shape
				color: #E8945B
			.mask
				background-color: rgba(#E8945B, .75)
		&.second-child
			.icon-shape
				color: #97C45B
			.mask
				background-color: rgba(#97C45B, .75)
		&.last-child
			.icon-shape
				color: #44bde5
			.mask
				background-color: rgba(#44bde5, .75)


@media (min-width: 576px)
	.alta-hero-section
		min-height: 367px

@media (min-width: 768px)
	.alta-hero-section
		height: 550px

	.max-w-270rem
		max-width: 37.875rem

@media (min-width: 992px)
	.alta-hero-section
		height: 550px
	.max-width-75
		max-width: 75%
	.max-width-50
		max-width: 50%
	.pl-lg-6, .px-lg-6
		padding-left: 5rem !important
	.pr-lg-6, .px-lg-6
		padding-right: 5rem !important

@media (min-width: 1200px)
	.alta-hero-section
		height: 550px

.padding-wrap-lg-both
	padding-top: 60px
	padding-bottom: 60px

.hub-section
	.carousel-inner
		cursor: move
		position: absolute
		top: 100px
		width: 260px
		right: 0
		height: 490px
		text-align: center
		margin: 0 auto
		left: 0

	ul
		&.timeline
			list-style-type: none
			position: relative
			&:before
				content: ' '
				background: #d4d9df
				display: inline-block
				position: absolute
				left: 29px
				width: 2px
				height: 100%
				z-index: 400
			& > li
				margin: 20px 0
				padding-left: 20px
				&:before
					content: ' '
					background: white
					display: inline-block
					position: absolute
					border-radius: 50%
					border: 3px solid #22c0e8
					left: 20px
					width: 20px
					height: 20px
					z-index: 400
				&:active
					color: $black
					font-weight: 250

.mauticform-errormsg
	width: 100%
	margin-top: .25rem
	font-size: 80%
	color: #fff

.landing-page-hero
	.cta-signup-form
		background: #fff
		max-width: 400px
		margin: 0 auto
		.cta-headline
			background: #444
			color: #fff
			text-transform: uppercase
			padding: 15px 30px
			font-weight: 600
			letter-spacing: 1px
		.cta-innner
			padding: 0 30px 20px
		ul
			list-style: none

.feature-service
	text-align: center

	> div
		padding: 30px 30px 0
		overflow: hidden
		&:nth-child(2n+1)
			background: #f8f9fa
	i
		display: inline-block
		font-size: 35px
		margin-bottom: 20px
		padding: 10px
		color: #212529
	h4
		margin-top: 0

.landing-page-hero
	.cta-signup-form
		background: #fff
		max-width: 400px
		margin: 0 auto
		.cta-headline
			background: #444
			color: #fff
			text-transform: uppercase
			padding: 15px 30px
			font-weight: 600
			letter-spacing: 1px
		.cta-innner
			padding: 0 30px 20px
		ul
			list-style: none

.support-video-tutorials
	background-color: #F5F5F5

.read-next-card1
	background-color: #ffffff
	margin-top: 10px
	padding: 0rem 0rem
	margin-right: -10px
	&.sticky-top
		top: 30px
		z-index: 1
	.read-next-card-header-sitetitle
		display: block
		font-size: 1rem
		line-height: 1em
		opacity: .8
		color: #000
		margin-bottom: 30px
	.read-next-card-header-title
		margin: 0
		padding: 0 20px
		color: #fff
		font-size: 1.5rem
		line-height: 1.2
	.read-next-card-header
		position: relative
		z-index: 50
		text-align: center
	.read-next-divider
		position: relative
		display: flex
		justify-content: center
		height: 40px
		svg
			width: 20px
			fill: transparent
			stroke: #fff
	.read-next-card-content
		max-height: calc(100vh - 250px)
		overflow-y: auto
		position: relative
		flex-grow: 1
		display: flex
		ul
			display: flex
			flex-direction: column
			margin: 0
			width: 100%
			padding: 0
			text-align: left
			list-style: none
			li
				padding: 0
				a
					text-decoration: none
					background: transparent
					display: block
					padding: 10px
					font-weight: bold
					font-size: 1.25rem
					line-height: 1.5
					color: #2C3039
					transition: 0.25s
					vertical-align: top
					transition: opacity .3s ease
					&:hover
						text-decoration: none
						color: #ffa300
						background: none
.read-next-card
	margin-top: 10px
	margin-right: -10px
	&.sticky-top
		top: 30px
	.read-next-card-header-sitetitle
		display: block
		font-size: 1rem
		line-height: 1em
		opacity: .8
		color: #ffffff
		margin-bottom: 30px
	.read-next-card-header-title
		margin: 0
		padding: 0 20px
		color: #fff
		font-size: 1.5rem
		line-height: 1.2
	.read-next-card-header
		position: relative
		z-index: 50
		text-align: center
	.read-next-divider
		position: relative
		display: flex
		justify-content: center
		height: 40px
		svg
			width: 20px
			fill: transparent
			stroke: #fff
	.read-next-card-content
		max-height: calc(100vh - 250px)
		overflow-y: auto
		position: relative
		z-index: 50
		flex-grow: 1
		display: flex
		ul
			display: flex
			flex-direction: column
			margin: 0 auto
			padding: 0
			text-align: center
			list-style: none
			li
				padding: 0
				a
					text-decoration: none
					background-color: transparent
					display: block
					padding: 10px
					border-bottom: 1px solid rgba(0,0,0,0.1)
					color: #ffffff
					font-size: .95rem
					vertical-align: top
					transition: opacity .3s ease
					&:hover
						text-decoration: none
						background: none
						color: #f5f5f5
.topic-link
	font-size: 14px
	line-height: 18px
	color: #000000
	i[class^="fa"]
		margin-right: 0
		margin-left: 7px
		font-size: 13px

.topic-link:after
	background: #19c17e
	background: -webkit-linear-gradient(135deg,#19c17e 30%,#1837a5 100%)
	background: linear-gradient(135deg,#19c17e 30%,#1837a5 100%)

.inner
	overflow: hidden

.inner img
	transition: all 0.8s ease

.inner:hover img
	transform: scale(1.2)

.card-img-caption
	border-top-left-radius: calc(.25rem - 1px)
	border-top-right-radius: calc(.25rem - 1px)

.card-img-caption .card-img-top
	z-index: 0

.card-img-caption .card-text
	text-align: center
	position: absolute
	z-index: 1
	opacity: 0.8
	margin-top: 20px
	margin-left: 10px
	background-color: #000
	a
		font-size: 12px
		padding: 2px 5px 2px 5px
		decoration: none
		color: #fff

.fancy-date
	a
		-webkit-flex-flow: column nowrap
		-moz-flex-flow: column nowrap
		-ms-flex-flow: column nowrap
		flex-flow: column nowrap
		min-height: 80px
		min-width: 42px
		padding: 2px 0
		top: 10px
		right: 10px
		left: auto
		position: absolute
		display: flex
		align-items: center
		z-index: 30
		-webkit-box-sizing: border-box
		box-sizing: border-box
		text-decoration: none
		background: #ffffff
		color: #000000
	span
		display: block
	.entry-month
		margin-bottom: 2px
	.entry-year
		margin-top: 2px
	.entry-date
		border-top: 2px solid #000
		border-bottom: 2px solid #000

.card-custom
	.card-body
		padding: 0.75rem
	.card-title
		margin-bottom: 0.25rem

.text-cutsom-gray
	color: #514f4f
.height-img-cus
	max-height: 500px !important
	@include tablet
		max-height: 350px !important
	@include phone
		max-height: 100% !important
		height: auto !important
.fixed-top	ul	li	a
	font-size: 0.9rem !important
.food-saftey-button
	.btn-green
		color: #ffffff
		background-color: #5bbce4
		border-color: #f8f9fa
.integration-nav
	font-size : 86%


.circle-button
	display: block
	background-color: #92278F !important
	height: 9.375rem
	width: 9.375rem
	border-radius: 50% 50%
	display: -webkit- flex
	display: flex
	-webkit-flex-direction: column
	flex-direction: column
	-webkit-align-items: center
	align-items: center
	-webkit-justify-content: center
	justify-content: center
	text-align: center
	position: fixed
	right: 30px
	z-index: 99
	top: 45%
	transform: rotate(-15deg)
	box-shadow: -5px 20px 20px 0
	transition: all 350ms 0s cubic-bezier(0.165, 0.84, 0.19, 0.95)
	overflow: hidden
	transform-origin: center
	color: #a388cd
.home-hero-block[data-scroll=in] .circle-button
	opacity: 1
	transform: rotate(-15deg)

.circle-button
	&:hover.blue
		background-color: #faf7f0
		border: 1px solid #92278F
		text-decoration: none

		> span
			color: #fff

	> span
		width: 100%
		max-width: 8.125rem
		margin: 10px 10px 10px
		color: #fff

.sitemap-font
	font-size: 1.1rem
	color: #0076BF


.topic-heading
	color: #0076BF
	font-size: 18px

.sitemap-font-heading
	font-size: 1.5rem


.navbar-nav
	.nav-item
		&.active
			&:hover
				background-color: transparent


.zoom-img
	margin: 80px 0px
	transform: scale(1.2)
	transform-origin: center center

.about-letter::first-letter
	color: black
	font-size: 370%
	padding: 0px 3px 0px 0px
	float: left
	line-height: 52px

.bg-custom-red-1
	background-color: #6929cf

.bbb-wrapper
	margin-top: 50px
	margin-bottom: 50px

.fl-wrap
	float: left
	width: 100%
	position: relative

.bbb-wrapper .subcribe-form
	p
		color: #fff
		font-size: 14px

	form
		max-width: 450px
		margin: 15px 0px
		position: relative

	.mauticform-page-wrapper
		display: block !important
		flex-wrap: wrap
		margin-right: -15px
		margin-left: -15px
		align-items: flex-end
		flex-direction: column
		input
			width: 100%
			height: 48px
			background: #fff
			border: none
			outline: none
			border-radius: 1px
			padding: 0 30px
			.mauticform-errormsg
				color: #fff !important

.subscribe-message
	color: #fff
	float: left
	margin-top: 10px
	text-align: left
	font-weight: 500
	line-height: 19px

.color-bg
	background: #B51700

#subscribe-button:hover
	background: #B51700
	color: #fff

.hub-section-subscribe
	padding-top: 2rem
	padding-bottom: 0rem

.about-link-text
	font-size: 1.2rem
	&:hover
		text-decoration: underline


.testimonial .description
	&:before, &:after
		font-weight: 900
		font-size: 30px
		color: #6c319a
		position: relative

	&:before
		content: "\f10d"
		margin-right: 5px
		top: -5px
		left: 0

	&:after
		content: "\f10e"
		margin-left: 5px
		position: relative
		bottom: -5px
		right: 0
.btn-primary1
	background-color: #6a1b9a !important
	&:hover, &:active, &:visited
		background-color: #6a1b9a !important

.navTabButton
	border-top-left-radius: 100px
	border-top-right-radius: 100px
	box-shadow: 0 0 5px silver
	text-decoration: none
	color: silver

.navBarPricingTabs
	border-bottom: 2px solid
	border-color: #8ECFCA
	box-shadow: 0 5px 5px #b4b4b4
	z-index: 1

.navTabButton.active
	box-shadow: none
	background-color: #45bc2d
	color: #fff
	box-shadow: inset 0 -2px 0px #45bc2d, 0 4px 0px #45bc2d

.zIndex-0
	z-index: 0


.switch
	position: relative
	display: inline-block
	width: 100px
	height: 50px

	input
		width: 0
		height: 0
		opacity: 0

.slider
	position: absolute
	cursor: pointer
	top: 0
	left: 0
	right: 0
	bottom: 0
	background: #fff
	transition: 0.4s
	border-radius: 34px
	box-shadow: -1px 1px 6px 0px rgba(0, 0, 0, 0.68)

	&:before
		content: ""
		position: absolute
		height: 40px
		width: 40px
		background: #656464e8
		left: 6px
		bottom: 5px
		border-radius: 50%
		transition: 0.3s cubic-bezier(0.42, 0, 0, 1.68)
		transform: translateX(0px)

input:checked + .slider
	background-color: #9BBC4C

	&:before
		transform: translateX(45px)
		background: #656464e8

.tableStandardBtn
	border-top-left-radius: 100px
	border-top-right-radius: 100px
	box-shadow: 0 0 5px silver
	background-color: #9BBC4C
	text-decoration: none
	color: #fff
	width: 100%
	display: block

.icoTick
	width: 35px
	height: 35px
	position: relative
	display: block
	margin: auto
	border-radius: 100%
	background-color: #9BBC4C

	&::before
		content: " "
		width: 10px
		height: 20px
		border-right: 4px solid #fff
		border-bottom: 4px solid #fff
		position: absolute
		left: 50%
		top: 45%
		transform: translate(-50%, -50%) rotate(45deg)

.icoCross
	width: 35px
	height: 35px
	position: relative
	display: block
	margin: auto
	border-radius: 100%
	background-color: #E15847

	&::before
		content: "X"
		position: absolute
		font-weight: bolder
		line-height: 1
		color: #fff
		font-size: 22px
		left: 50%
		top: 50%
		transform: translate(-50%, -50%)

.icoWarning
	width: 35px
	height: 35px
	position: relative
	display: block
	margin: auto
	border-radius: 100%
	background-color: #F6BF34

	&::before
		content: "!"
		position: absolute
		font-weight: bolder
		font-family: emoji
		line-height: 1
		color: #fff
		font-size: 30px
		left: 50%
		top: 50%
		transform: translate(-50%, -50%)


.roiPricingBadge
	background-color: #000
	width: 120%
	margin-left: 50%
	transform: translate(-50%)

.pricing-main
	table
		thead tr.headerRow th:nth-child(1), tbody tr td:nth-child(1)
			padding: 20px 0
			border-right: 1px solid silver

		thead tr.headerRow th
			&:nth-child(2), &:nth-child(3), &:nth-child(4)
				border-top: 2px solid silver

			&:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4)
				border-bottom: 2px solid silver

		tbody tr td
			&:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4)
				border-bottom: 2px solid silver

		thead tr.headerRow th
			&:nth-child(2), &:nth-child(3), &:nth-child(4)
				display: flex
				align-items: center
				justify-content: center
				border-right: 1px solid silver

		tbody tr td
			&:nth-child(2), &:nth-child(3), &:nth-child(4)
				display: flex
				align-items: center
				justify-content: center
				border-right: 1px solid silver

		thead tr.headerRow th:nth-child(3), tbody tr td:nth-child(3)
			box-shadow: 6px 0px 6px -5px #000, -6px 0px 6px -5px #000


.careers-img
	width: 100%
	min-height: 500px
	@include tablet
		min-height: 350px
	@include phone
		min-height: auto
		height: auto

.navbar-nav
	white-space: nowrap !important

.fa-check
	color: #8BC349

.fa-times
	color: #CB5649

.for-double-btns
	background-color: #fff
	padding: 0 0 0 15px
	align-items: center
	justify-content: space-between !important
	border-radius: 25px !important
	width: 250px
	span
		font-size: 15px
		padding-left: 20px
		padding-right: 20px
	.for-colord
		background-color: #942193
		color: #fff
		padding: 7px 30px
		border-radius: 25px
		font-size: 15px
		width: 50%

.testimonial-temp-pic
	width: 45px !important
	height: 45px
	border-radius: 50%
	object-fit: cover

.designation
	font-size: 0.84rem
	font-weight: 600

.alta-roi-bg
	background-color: #8bc349

.free-itemlist
	.list-group-item
		position: relative
		display: block
		padding: 0.5rem 2rem
		background-color: #fff
		border: none
.freetabTick
	width: 25px
	height: 25px
	position: relative
	display: inline-block
	margin: auto
	border-radius: 100%
	background-color: #9BBC4C
	margin-right: 5px

	&::before
		content: " "
		width: 9px
		height: 15px
		border-right: 4px solid #fff
		border-bottom: 4px solid #fff
		position: absolute
		left: 50%
		top: 45%
		transform: translate(-50%, -50%) rotate(45deg)

.freetab-service
	.list-group-item
		position: relative
		display: block
		padding: 0.5rem 2rem
		background-color: #fff
		border: none



.mauticform-button-wrapper .mauticform-button
	display: inline-block !important
	font-weight: 600
	color: #fff !important
	text-align: center
	vertical-align: middle
	user-select: none
	background-color: #64a944 !important
	border: 1px solid #64a944 !important
	padding: 0.75rem 1.75rem !important
	font-size: 1rem !important
	line-height: 1.25
	margin-top: 16px !important
	border-radius: 0.375rem
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out

.toggle-withoutbg
	bottom: 0
	right: 0
	width: 60px
	height: 60px
	background-color: transparent
	font-weight: bold
.toggle-withbg
	bottom: 0
	right: 0
	width: 60px
	height: 60px
	font-weight: bold


.product-testimonial .description
	&:before, &:after
		font-weight: 700
		font-weight: 600
		font-size: 25px
		color: #ffffff
		position: relative

	&:before
		content: "\f10d"
		margin-right: 5px
		top: -4px
		left: 0

	&:after
		content: "\f10e"
		margin-left: 5px
		position: relative
		bottom: -4px
		right: 0

.h2-email
	font-size: 2rem
#nav-shopping-cart-Content
	background-color: white !important
	padding: 0 30px
.quoteText
	p
		position: relative
		height: 80%
		&::before
			content: "\201C"
			font-size: 60px
			color: var(--theme-color)
			position: absolute
			top: -40px
			left: -30px

		&::after
			content: "\201D"
			font-size: 60px
			color: var(--theme-color)
			position: absolute
			bottom: 0
			right: -30px

.quoteText
	background-color: #f2f2f2
    border-radius: 25px
    padding: 36px 0

.quoteText
	p
		width: 80%
    	margin: 0

#cc_Review_slider
.owl-carousel .owl-item
	border-radius: 16px
	img
		display: block
		width: auto
	.active
		&:hover
			background-color: #fff !important
#cc_Review_sliderTwo
.owl-carousel .owl-item
	border-radius: 16px
	img
		display: block
		width: auto
	.active
		&:hover
			background-color: #fff !important
#cc_second_slider
.owl-carousel
	.owl-item
		border-radius: 16px
		img
			display: block
			width: auto
	.active
		&:hover
			background-color: #fff !important
.cc_flag_bg
	right: -80px
	letter-spacing: 0
	position: absolute
	text-align: center
	top: 40px
	transform: rotate(36.04deg)
	width: 310px
	background: linear-gradient(90deg, #6A00D3 0%, #DB00FF 100%);
	font-style: normal
	color: #fff
	font-size: 1.1rem
	padding: 0.313rem

.hub-section
	.container
		.card-custom
			.card
				margin: 0.5rem

.product_footer
	@include phone
		flex-direction: column
		gap: 3rem
	display: flex
	padding: 3rem 0
	.left
		display: flex
		justify-content: center
		align-items: center

.make-profits
	@include phone
		flex-direction: column
	display: flex
	justify-content: center
	align-items: center
	color: white
	padding: 3rem 0
	margin-top: 3rem !important
	h1
		position: relative
		font-size: 74px
		max-width: 486px
		text-align: center
		&::after
			@include phone
				bottom: -50%
				right: 20%
			content: ''
			position: absolute
			bottom: -75%
			right: 0
			height: 100px
			width: 50%
			border: solid 5px white
			border-color: white transparent transparent transparent
			border-radius: 50%

.eBook_thankyou
	margin: 5rem 0
	h1
		font-size: 2rem
		font-weight: normal
	h2
		font-weight: normal
	p
		color: #212529
	a
		border-radius: 25px
		padding: 8px 30px
		border: 1px solid #92278F
		color: #92278F
		&:hover
			background-color: #92278F
			color: #fff
.asw-menu-btn
	bottom: 90px !important
	width: 45px !important
	height: 45px !important