.text-sm
	font-size: .875rem !important

.line-height-lg
	line-height: 1.5

.for-desk-show	
	display: block
	.navbar-brand
			display: none

.for-new-swipe-menu
	display: none


.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

.row-grid > [class*="col-"] + [class*="col-"]
	margin-top: 3rem

@include media-breakpoint-up(xl)
	.row.row-grid > [class*="col-lg-"] + [class*="col-lg-"]
		margin-top: 0

@include media-breakpoint-up(md)
	.row.row-grid > [class*="col-md-"] + [class*="col-md-"]
		margin-top: 0

@include media-breakpoint-up(sm)
	.row.row-grid > [class*="col-sm-"] + [class*="col-sm-"]
		margin-top: 0

[class*="link-underline-"]
	padding-bottom: 8px
	position: relative

	&:after
		content: ''
		position: absolute
		left: 0
		bottom: 0
		width: 100%
		height: 3px
		@include border-radius($rounded-pill)
		transition: all .2s cubic-bezier(.77, 0, .2, 2.25)

	&:hover
		&:after
			width: calc(100% + 8px)
			left: -4px

@each $color, $value in $theme-colors
	.link-underline-#{$color}
		@include link-underline-variant($value)
	@include bg-soft-variant(".bg-soft-#{$color}", theme-color-level($color, -11))


.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


.circle-button
	display: block
	background-color: #F16D16
	height: 150px
	width: 150px
	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: 999
	top: 45%
	transition: all 350ms 0s cubic-bezier(0.165, 0.84, 0.19, 0.95)
	overflow: hidden
	transform-origin: center
	transform: rotate(-15deg)
	box-shadow: -5px 20px 20px 0
	color: #A24302

.home-hero-block[data-scroll=in] .circle-button
	opacity: 1
	transform: rotate(-15deg)

.circle-button
	&:hover.blue
		background-color: #fff
		border: 1px solid #F16D16
		color: #A24302
		text-decoration: none
		> span
			color: #F16D16 
	> span
		width: 100%
		max-width: 130px
		margin: 10px 10px 10px
		color: #fff

@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
	.cluster-post-title
		font-size: 45px

@media (min-width:992px)
	.d-lg-block
		display: block !important

	.align-items-stretch
		display: -ms-flexbox !important
		display: flex !important
		-ms-flex-align: stretch !important
		align-items: stretch !important
	.cluster-post-full-image img
		width: 100%
		height: 100%
		margin: 0
		object-fit: cover
		object-position: center
	.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)
	.INDpositionLeft 
		#INDmenu-btn
			top: 70% !important
	#Brand-Assets .modal-dialog
		width: 100%
		max-width: 100%
	.for-desk-show
		display: none
		.navbar-brand
			display: none
	.for-new-swipe-menu
		display: block
		position: fixed
		bottom: 0
		left: 0
		right: 0
		z-index: 999999
		backdrop-filter: blur(20px)
		.navbar-header
			width: 100%
		.for-swipe-display
			background-color: #fff
			border-top-right-radius: 30px
			border-top-left-radius: 30px
			h2
				font-size: 20px
				margin-bottom: 0
			p
				font-size: 14px
				margin-bottom: 0

		.in
			height: 100vh
			border-top-right-radius: 30px
			border-top-left-radius: 30px
			transition: .5s ease-in-out
			padding: 14px 18px
			.for-swipe-outer
				display: flex
				align-items: center
				justify-content: center
				padding: 50px 0
				background-color: #fff
				margin-top: 134px
				border-radius: 40px
				.for-swipe-style
					text-align: center
					padding: 14px 0
					margin-left: 0 !important
					a
						color: #000
						text-decoration: none
		.navbar-header
			width: 100%
			button
				border: none
				outline: none
				background-color: transparent
				width: 100%
				border-top-right-radius: 30px
				border-top-left-radius: 30px
				box-shadow: 0px -18px 21px -18px rgba(97, 97, 97, 1)
				&[aria-expanded="true"]
					.close_product_nav
						display: inline-block
						margin: 15px 15px 0 0
						position: absolute
						right: 25px
						top: 174px
						width: 22px
					.for-swipe-display
						display: none
					body
						overflow: hidden												
				&[aria-expanded="false"]
					.close_product_nav
						display: none

					.for-swipe-display
						display: block

					body
						overflow: auto																	
	.product-detail
		.navbar-brand
			.navbar-brand-logo
				display: none
	.for-swipe-none
		display: none
	.changed-text
		display: block
	.over-hidden
		overflow: hidden
	.for-bottom-swipe
		position: fixed
		z-index: 9999999999
		bottom: 0
		width: 100%

	.for-bottom-swipe
		button
			width: 100%
			text-align: right
			padding-right: 0
		.swite_up
			box-shadow: rgba(0, 0, 0, 0.15) 0px -4px 22px
			background-color: #fff
			width: 100% 
			text-align: center
			border-radius: 26px 26px 0 0
			color: #000
			font-style: normal
			font-weight: 400
			color: #000
			display: block
			padding: 10px
			.swite_up_title
				font-size: 18px
				font-weight: 500
				margin-bottom: 6px
			.swite_up_title
				font-size: 13px
					
	.hub-navbar-toggler
		padding-right: 15px !important
	.navbar-brand
		margin-left: 15px !important						

	.hide-scroll
		overflow: hidden
	.for-height
		justify-content: center
		height: calc( 100vh - 50px )
		position: fixed
		top: 0
		bottom: 0
		left: 0
		right: 0
		z-index: 999
		height: 100%
		text-align: center

	.product-detail-navbar
		position: absolute !important
		z-index: 9999 !important
		width: 100% 
		bottom: 0
		border-radius: 26px 26px 0 0
		overflow: hidden
		left: 0
		text-align: center
	.circle-button
		height: 40px !important
		right: -90px !important
		box-shadow: none !important
		border-radius: 7px !important
		transform: rotate(-90deg) !important
		width: 220px !important
		>span
			max-width: unset !important

	.column_inverse
    	flex-direction: column-reverse
	.alta-header
		.topbar
			padding-right: 15px !important
			font-size: 0.65rem !important
			.ml-4
				margin-left: 14px !important
		.navbar
			.navbar-collapse
				.navbar-nav
					height: calc(100vh - 96px)
    				text-align: center !important
					align-items: center
					justify-content: center
					.nav-item
						.nav-link
							padding: 0
							margin-bottom: 15px
						&:last-child
							.nav-link
								padding: 0
								margin-bottom: 0
	.alta_banner
		padding: 15px
		height: auto
		h1
			font-size: 1.5rem
			margin-top: 70px
			text-align: center
		h2
			font-size: 0.9rem
			text-align: center
		.carousel
			.carousel-inner
				border-radius: 20px
				p
					font-size: 1.2rem
					height: 500px
				img
					height: 480px
					border-radius: 20px
				video
					border-radius: 20px
					width: auto
					height: 480px
	
 		#custCarousel 
			.carousel-indicators
				margin: 0 !important
				overflow-x: auto
				align-items: center
				max-width: 100%
				left: 0
				right: 0
				bottom: -40px
				padding: 0 8px
				justify-content: start
				li
					a
						padding: 10px 20px !important
						font-size: 12px !important
						line-height: 1.2
						width: auto
						align-items: center
						display: flex !important
						height: 40px
						justify-content: center
						white-space: nowrap
	.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.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: 1rem


.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

.card
	position: relative
	margin-bottom: 30px
	box-shadow: 0 12px 15px rgba(140,152,164,.1)

.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
		font-family: '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
	.cs-blog-navigation-wrap 
		a 
			span 
				font-size: 11px 
		li 
			margin-right: 0.8rem 

.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
	.btn-green
		color: #ffffff
		background-color: #5bbce4
		border-color: #f8f9fa

.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: #B51700

.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-family: "Font Awesome 5 Free"
		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


.col-carousel
	margin: 70px 0

.owl-prev span, .owl-next span
	color: #FFF

.owl-prev span:hover, .owl-next span:hover
	color: #8199A3

.owl-prev, .owl-next
	position: absolute
	top: 0
	height: 100%

.owl-prev
	left: 7px

.owl-next
	right: 7px

button
	&:focus, &:active
		outline: none
.owl-carousel .owl-nav
	.owl-prev:hover, .owl-next:hover
		background-color: transparent !important
		color: #fff
.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
	font-family: Arial, Helvetica, sans-serif
	border-radius: 100%
	background-color: #E15847

	&::before
		content: "X"
		position: absolute
		font-family: Arial, Helvetica, sans-serif
		font-weight: bolder
		font-family: cursive
		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

.mauticform-message
	margin-bottom: 10px
	color: #fff !important
	text-align: center !important
	font-size: 30px !important

.careers-img
	width: 100%
	height: 500px

.navbar-nav
	white-space: nowrap !important

.fa-check
	color: #8BC349

.fa-times
	color: #CB5649

.active:hover
	background-color: transparent !important

.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
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-quote' viewBox='0 0 16 16'%3E%3Cpath d='M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 9 7.558V11a1 1 0 0 0 1 1h2Zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 3 7.558V11a1 1 0 0 0 1 1h2Z'/%3E%3C/svg%3E")
		content: "";
		margin-right: 5px
		top: -4px
		left: 0
		height: 18px
		width: 16px
		display: inline-flex
		background-repeat: no-repeat
		filter: invert(1)

	&:after
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-quote' viewBox='0 0 16 16'%3E%3Cpath d='M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 9 7.558V11a1 1 0 0 0 1 1h2Zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 3 7.558V11a1 1 0 0 0 1 1h2Z'/%3E%3C/svg%3E")
		content: "";
		margin-left: 5px
		position: relative
		bottom: -4px
		right: 0
		height: 18px
		width: 16px
		display: inline-flex
		background-repeat: no-repeat
		filter: invert(1)
		rotate: 180deg
.h2-email
	font-size: 2rem

.testimonial-img
	width: 80px
	height: 80px

.height350
	height: 25rem

.client_icon
	width: 150px !important
	height: 150px !important
#Brand-Assets
	.about_mdl_btn
		height: 100%
		display: inline-block
		cursor: pointer
	img
		border-radius: 10px
		max-width: 100%
	frame 
		border-radius: 10px
		max-width: 100%
	.modal-dialog
		width: 950px
		max-width: 950px
		.modal-body
			padding: 2px
			border-radius: 10px
			overflow: hidden
			text-align: center
		img
			max-width: 100%
		frame
			max-width: 100%
.upper_cercle
	width: 190px
	height: 190px
	border-radius: 50%
	text-align: center
	background-size: cover
	background-position: bottom center
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px