@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:wght@300;400;500;700&display=swap')
.mcd-alta-logo-section
	width: 80%
	@include phone
		width: 100%
	img
		max-width: 100%
.mcd-app-icons
	width: 100%
	display: flex
	align-items: center
	a
		&:hover
			filter: drop-shadow(2px 4px 6px black)
	@include phone 
		flex-direction: column
		background-size: 130% 110%
		background-position: center top
	.android
		max-width: 100%
		width: 180px
		@include phone 
			margin-top: 1rem
	.ios-store
		max-width: 100%
		width: 180px
		@include phone 
			margin-top: 1rem
			margin-bottom: 2rem
	.android-sm
		max-width: 100%
		width: 100px
		// @include phone 
		// 	margin-top: 1rem
	.ios-store-sm
		max-width: 100%
		width: 100px
		// @include phone 
		// 	margin-top: 1rem
.mcd-custom-full-container
	max-width: 1920px
	margin: 0 auto
.mcd-custom-container
	max-width: 90%
	margin: 0 auto
.mcd-main-hero-section
	background-size: 100% 100%
	background-repeat: no-repeat
	padding-top: 3rem
	padding-bottom: 3rem
	@include desktop
		padding-bottom: 8rem
	@include phone
		background-size: 100% 110%
	.mcd-custom-full-container
		padding: 0 3rem
		@include phone
			padding: 0
	.container
		max-width: 85%
		@include desktop
			max-width: 95%
		.mcd-mobile-logo
			max-width: 100%
	.mcd-main-hero-left
		width: 80%
		@include desktop
			width: 95%
		@include phone
			width: 100%
		h1
			color: #232020
			font-family: 'Poppins', sans-serif
			font-size: 2.625rem
			font-style: normal
			font-weight: 600
			margin-top: 3rem
			@include desktop
				font-size: 2rem
			@include phone
				font-size: 2rem
				text-align: center
		p
			color: #232020
			font-family: 'Poppins', sans-serif
			font-size: 1.25rem
			font-style: normal
			font-weight: 300
			line-height: normal
			span
				font-weight: 600
	.mcd-main-hero-right
		width: 77%
		text-align: right
		position: relative
		.second-section-logo
			position: absolute
			height: 74px
			width: 74px
			right: 21%
			bottom: -3rem
		@include desktop
			margin: 0 auto
			margin-left: 0
		@include phone
			margin: 0 auto
			width: 100%
			text-align: center
		img
			width: 90%
		.hero_animate
			position: absolute
			bottom: 0
			right: 26%
			width: unset
			height: 88%
			border-radius: 30px

.mcd-mobile-second
	margin-top: 5rem
	@include desktop
		margin-top: 0
	.container
		max-width: 85%
		@include desktop
			max-width: 95%
		@include phone
			.row
				flex-direction: column-reverse
	.mcd-mobile-second-left
		width: 100%
		img
			width: 100%
	.mcd-mobile-second-right
		width: 100%
		margin: 0 auto
		margin-right: 0
		h2
			color: #232020
			text-align: right
			font-family: 'Poppins', sans-serif
			font-size: 2.625rem
			font-style: normal
			font-weight: 600		
			width: 70%
			margin: 0 auto
			margin-right: 0
			margin-bottom: 2rem
			@include desktop
				font-size: 2rem
			@include phone
				width: 100%
				text-align: center
				font-size: 2rem
		p
			color: #232020
			text-align: right
			font-family: 'Poppins', sans-serif
			font-size: 1.25rem
			font-style: normal
			font-weight: 300
			line-height: normal	
			@include desktop
				font-size: 1.1rem
			@include phone
				text-align: left
				margin-bottom: 2rem						
	.mcd-custom-full-container
		padding: 0 3rem
		@include phone
			padding: 0
.mcd-mobile-third
	background-size: 100% 100% !important
	background-repeat: no-repeat !important
	padding: 7rem 0
	margin-top: 0 !important
	@include desktop
		padding: 9rem 0
	@include phone
		background-size: 150% 120% !important
		background-position: center
	.container
		max-width: 85%
		@include desktop
			max-width: 95%
		@include phone
			.row
				flex-direction: unset
	.mcd-mobile-second-left
		width: 100% !important
		text-align: right
		img
			width: 75% !important
			position: relative
			top: -2rem
			@include phone
				width: 100% !important
				top: 0
	.mcd-mobile-second-right
		h2
			text-align: left
			margin: 0 auto
			margin-left: 0
			margin-bottom: 1.5rem
			margin-right: unset
			width: 90%
			@include phone
				width: 100%
				text-align: center
		p
			text-align: left
		.mcd-app-icons
			margin-top: 3rem
			@include phone
				flex-direction: column
				margin-top: 0
.mcd-mobile-fourth
	margin-top: 0 !important
	margin-bottom: -10rem
	@include phone
		margin-bottom: 0
	.container
		max-width: 85%
		@include desktop
			max-width: 95%
	.mcd-mobile-second-left
		width: 100%
		img
			width: 75%
			@include phone
				width: 100%
	.mcd-mobile-second-right
		h2
			width: 100%
			margin-bottom: 1.5rem
		.mcd-app-icons
			justify-content: flex-end
			margin-top: 3rem
			@include phone
				margin-top: 0
.mcd-mobile-fifth
	.container
		max-width: 85%
		@include desktop
			max-width: 95%
		@include phone
			.row
				flex-direction: unset
	.mcd-mobile-second-right
		h2
			margin-bottom: 2rem
		.mcd-app-icons
			margin-top: 3rem
			@include phone
				margin-top: 0
	.mcd-mobile-second-left
		width: 80% !important
		margin: 0 auto
		margin-right: 5rem
		@include phone
			width: 100% !important	
		img
			width: 100%
.mcd-how-works
	margin-bottom: 7rem
	.container
		max-width: 85%
		@include desktop
			max-width: 95%
		@include phone
			max-width: 100%
	h3
		color: #232020
		font-family: 'Poppins', sans-serif
		font-size: 2.625rem
		font-style: normal
		font-weight: 600
		margin-bottom: 5rem
		text-align: center
		@include desktop
			font-size: 2rem
		@include phone
			font-size: 2rem
			margin-bottom: 3rem
	.mcd-how-works-similar
		display: flex
		align-items: center
		@include phone
			margin-bottom: 2rem
		.mcd-custom-circle
			background-color: #FFC700
			width: 80px
			height: 80px
			border-radius: 50%
			display: flex
			align-items: center
			justify-content: center
			margin-right: 1rem
			p
				color: #232020
				font-family: 'Poppins', sans-serif
				font-size: 2.625rem
				font-style: normal
				font-weight: 600	
				margin-bottom: 0
				@include desktop
					font-size: 2rem				
		.mcd-custom-description
			width: calc( 100% - 110px )	
			p
				color: #232020
				font-family: 'Poppins', sans-serif
				font-size: 1.25rem
				font-style: normal
				font-weight: 300	
				margin-bottom: 1rem
				@include desktop
					font-size: 1.1rem
			.mcd-app-icons
				align-items: self-start !important
				flex-direction: unset
				a
					img
						margin: 0											
.mcd-experience-altametrics
	background-color: #E72E00
	text-align: center
	padding-top: 5rem 
	.container
		max-width: 85%
		@include desktop
			max-width: 95%
		@include phone
			max-width: 100%
	h3
		color: #F2BD00
		text-align: center
		font-family: 'Poppins', sans-serif
		font-size: 2.625rem
		font-style: normal
		font-weight: 600		
		width: 60%
		margin: 0 auto
		margin-bottom: 2rem
		@include desktop
			font-size: 2rem
		@include phone
			width: 100%
			font-size: 2rem
	p
		color: #FFF
		text-align: center
		font-family: 'Poppins', sans-serif
		font-size: 1.375rem
		font-style: normal
		font-weight: 300
		line-height: normal
		width: 70%
		margin: 0 auto	
		margin-bottom: 4rem
		@include phone
			width: 100%
	img
		width: 60%	
		@include phone
			width: 95%
.mcd-mobile-app-faq
	padding-top: 3rem
	background-color: #FFC700
	padding-bottom: 4rem
	.container
		max-width: 85%
		@include desktop
			max-width: 95%
		@include phone
			max-width: 100%
	.mcd-mobile-app-final-btn
		display: flex
		align-items: center
		justify-content: center
		a
			border-radius: 14px
			background: #E41616	
			color: #FFF
			text-align: center
			font-family: 'Poppins', sans-serif
			font-size: 1.25rem
			font-style: normal
			font-weight: 600	
			padding: 1rem 2rem
			@include desktop
				font-size: 1.1rem				
	h3
		color: #232020
		text-align: center
		font-family: 'Poppins', sans-serif
		font-size: 2.625rem
		font-style: normal
		font-weight: 600		
		margin-bottom: 5rem	
		@include desktop
			font-size: 2rem
			margin-bottom: 3rem	
		@include phone
			margin-bottom: 3rem	
			font-size: 2rem
	.mcd-mobile-app-faq-question
		padding-bottom: .5rem
		border-bottom: 1.5px solid #232020
		margin-bottom: .5rem
		p
			color: #232020
			font-family: 'Poppins', sans-serif
			font-size: 2rem
			font-style: normal
			font-weight: 300
			margin-bottom: 0
			@include desktop
				font-size: 1.8rem
			@include phone
				font-size: 1.8rem
	.mcd-mobile-app-faq-answer
		margin-bottom: 2rem
		word-break: break-all
		p
			color: #232020
			font-family: 'Poppins', sans-serif
			font-size: 1.375rem
			font-style: italic
			font-weight: 300
			word-break: break-all								
.mcd-how-works-similar-second, .mcd-how-works-similar-third
	.mcd-custom-description
		a
			display: none !important
.custom-form-mcd-mobile
    #appointmentsDiv
        .container
            #appointmentsDiv
                #appointmentsContainer
                    .card3d
                        position: relative
                        left: 40px
                        margin-top: 3rem
                        background: white
                        border-radius: 14px !important
                        box-shadow: 0 8px 53px 0 rgba(25,38,57,0.2), 0 4px 8px 3px rgba(25,38,57,0.07) !important
                        border: none !important
                        #wizard-frame-3
                            #success-frame
                                .survay_container
                                    padding: 0 1.9rem
                                    text-align: center
                                .survay_intro
                                    display: none
                        #wizard-frame-2
                            @include desktop
                                overflow: hidden
                                .freeDemoCard
                                    #v-cal
                                        .ui-datepicker 
                                            th
                                                @include desktop
                                                    font-size: .65em !important
                                .freeDemoCardForm
                                    width: 50%
                                    @include desktop
                                        .appointment-btn
                                            margin-right: 0
                                            margin-left: 10px
                                .appointmentrow-3
                                    @include desktop
                                        max-width: 33%
                                        flex: 0 0 33%
                                        .fabe-time-slot
                                            font-size: 70% !important
                        .mainCard
                            @include phone
                                padding: 10px !important
                            .freeDemoCard
                                .freeDemoCardImage
                                    display: none
                                .freeDemoCardForm
                                    width: 100%
                                    .appointment-btn
                                        margin-right: unset
                                        margin-top: 2rem
                                    .rs-h4
                                        font-size: 1.5rem
                                        font-weight: 900 !important
                                        visibility: hidden
                                        position: relative
                                        margin-bottom: 2rem
                                    .rs-h4:after
                                        font-size: 1.5rem                    
                                        visibility: visible
                                        position: absolute
                                        top: 0
                                        left: 0
                                        content: "Schedule My Appointment"
                                        color: black !important
                                    .rs-h6
                                        display: none
                                    .ap-form-col2
                                        display: flex !important
                                        flex-direction: row !important
                                        justify-content: space-between
                                        @include phone
                                            flex-wrap: wrap
                                        .label
                                            width: 48% !important
                                            @include phone
                                                width: 100% !important
                                            .appointment-form-control
                                                width: 100% !important
                                                border: 1px solid #ced4da