.mcd-clock-landing
	img
		max-width: 100%
	h2
		margin: 0 0 1rem
		color: #232020
		font-family: 'Poppins', sans-serif
		font-size: 2.625rem
		font-style: normal
		font-weight: 600
		@include desktop
			font-size: 2rem
		@include phone
			font-size: 2rem
	.container
		max-width: 85%
		margin: 0 auto
		@include desktop
			max-width: 1270px
		@include phone
			max-width: 100%
	.mcd-logo-container
		width: 100%
		.mcd-clock-logo
			max-width: 80%
			@include phone
				margin: 1rem 0
				max-width: 100%
	.hero-left
		@include phone
			width: 100% !important
	.mcd-clock-button
		padding: 1rem 2rem
		background: #E50001
		color: #fff
		border-radius: 13px
		font-weight: 700
		margin: auto
		text-decoration: none
		display: inline-flex
		position: relative
		&:hover
			background: #ff0000
			color: #fff
	.mcd-clock-hero
		background-size: 100% 100%
		justify-content: space-around !important
		padding-top: 3rem
		@include phone
			flex-direction: column
			justify-content: unset
		h1
			color: #232020
			font-family: 'Poppins', sans-serif
			font-size: 2.625rem
			font-style: normal
			font-weight: 600
			margin: 3rem 0 2rem
			@include desktop
				font-size: 2rem
			@include phone
				font-size: 2rem
			span
				font-weight: 800
				color: #E50001
		.mcd-hero-img
			position: absolute
			width: 325px
			bottom: 85px
			z-index: 99
			left: 50%
			margin-left: -9.5rem
			@include desktop
				width: 280px
				bottom: 77px
				left: 50%
				margin-left: -9rem
			@include phone
				position: relative
				width: 100%
				bottom: unset
				z-index: unset
				left: unset
				margin-left: unset
				margin-bottom: -2rem
		.mcd-hero-img2
			max-width: 100%
			margin: 0 auto
			margin-bottom: -5rem
			width: 70%
		.custom-mcd-form
			width: 100% !important
			border-radius: 25px !important
			background: #E50001 !important
			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) !important		
			padding: 1rem 1.5rem 0	
			text-align: center
			position: relative
			z-index: 1
			.mauticform-page-wrapper
				display: flex !important
				flex-wrap: wrap
				justify-content: space-between
				.mauticform-errormsg
					color: #430202
					margin-top: 0
					text-align: left
				.mauticform-row
					margin-bottom: 10px
				label
					color: #fff
					font-size: 0.8rem
					font-weight: normal
					text-align: left
				.mauticform-button
					border-radius: 10.357px
					background-color: #F2BD00 !important
					border-color: #F2BD00 !important
					color: #FFF
					font-family: Ubuntu
					font-size: 23.599px
					font-style: normal
					font-weight: 700
					letter-spacing: 0.118px	
					border: none
					padding: .6rem 3rem	
					margin-top: 0 !important
					&:hover
						background-color: #f7ca03 !important	
				.mauticform-field-13
					display: flex
					align-items: center
					justify-content: center			
				textarea
					height: 42px
				.mauticform-helpmessage
					display: none
				.mauticform-field-1,.mauticform-field-2,.mauticform-field-3,.mauticform-field-4
					width: 49%
				.mauticform-field-5
					width: 39%
				.mauticform-field-6
					width: 59%
				.mauticform-field-7
					width: 34%
				.mauticform-field-8
					width: 29%
				.mauticform-field-9
					width: 34%
				.mauticform-field-10
					width: 52%
				.mauticform-field-11
					width: 46%
				.mauticform-field-12
					width: 100%
					text-align: center
		h3
			text-align: center
			color: #fff
			@include desktop
				font-size: 1.4rem
			@include desktop
				font-size: 1.2rem
	.mcd-clock-second
		margin: -10rem 0 -5rem
		z-index: 9
		@include phone
			margin: 6rem 0 0
		.row
			@include phone
				flex-direction: column-reverse
		img
			max-width: 100%
		h2
			margin-top: 6rem
			@include desktop
				margin-top: 7rem
			@include phone
				margin-top: 2rem
	.mcd-clock-third
		background-size: 100% 100% !important
		background-repeat: no-repeat !important
		margin-top: 0 !important
		z-index: 10
		position: relative
		@include phone
			background-size: 250% 118% !important
			padding: 2rem 0px
			background-position: center bottom
		h2
			color: #fff
		p
			color: #fff
		img
			max-width: 100%
	.mcd-clock-fourth
		.row
			@include phone
				flex-direction: column-reverse
				img
					max-width: 100%
					@include desktop
						max-width: 85%
					@include phone
						margin-bottom: 2rem
	.mcd-clock-fifth
		background-size: 100% 100% !important
		background-repeat: no-repeat !important
		margin-top: 0 !important
		z-index: 10
		position: relative
		@include phone
			background-size: 250% 118% !important
			padding: 2rem 0px
			background-position: center bottom
		img
			max-width: 100%
		h2
			color: #fff
			span
				color: #E50001
		p
			color: #fff
	.mcd-clock-sixth
		text-align: center
		padding-top: 5rem
		margin-bottom: -2.8dvw
		img
			max-width: 100%
			width: 100%
		p
			width: 80%
			margin: 0 auto 2rem
	.mcd-clock-seventh
		padding: 5rem 0 4rem
		h2
			text-align: center
		.mcd-clock-button
			bottom: -5.5rem
			z-index: 9
			position: relative
		img
			max-width: 100%
		.mcd-how-works-similar
			display: flex
			align-items: center
			margin-top: 1.5rem
			.mcd-custom-circle 
				background-color: #E50001
				width: 80px
				height: 80px
				border-radius: 50%
				display: flex
				align-items: center
				justify-content: center
				margin-right: 1rem
				p 
					color: #F2BD00
					font-family: 'Poppins', sans-serif
					font-size: 2.625rem
					font-style: normal
					font-weight: 600
					margin-bottom: 0
			.mcd-custom-description
				width: calc( 100% - 110px)
				p 
					color: #232020
					font-family: 'Poppins', sans-serif
					font-size: 1.1rem
					font-style: normal
					font-weight: 300
					margin-bottom: 1rem
	.mcd-clock-eight
		@include phone
			padding-top: 4rem
		img
			max-width: 100%
			margin: 2rem 0 -2rem 0
			@include desktop
				margin: 2rem 0 -3.39rem 0
			@include phone
				margin: 2rem 0 -1.5rem
		.mcd-clock-button
			margin-top: 1rem