html
@include phone
font-size: 80%
@include custom_desktop
font-size: 85%
.industry_section1
.industry_section1_grid
margin-bottom: 1.5rem
.col-md-4
height: 100%
&:nth-child(1)
padding-left: 0
position: relative
&::before
content: ''
background-color: #D6DAE0
width: 2px
height: 95%
display: block
position: absolute
right: 0
top: 1rem
@include phone
display: none
@include phone
padding: 0
margin-bottom: 12px
&:nth-child(2)
position: relative
&::before
content: ''
background-color: #D6DAE0
width: 2px
height: 95%
display: block
position: absolute
right: 0
top: 1rem
@include phone
display: none
@include phone
padding: 0
margin-bottom: 12px
&:nth-child(3)
padding-right: 0
@include phone
padding: 0
.industry_section1_items
height: 24rem
padding: 1rem
@include desktop
height: auto
@include phone
height: auto
h3
font-size: 1.625rem
font-weight: 600
color: #000
margin-bottom: 1.5rem
h4
width: 100%
display: flex
align-items: baseline
p
width: calc( 100% - 10% )
font-size: 1.25rem
color: #000000
margin-top: 0
margin-bottom: 0
font-weight: 400
position: relative
top: -5px
span
width: 25px
height: 25px
display: flex
align-items: center
justify-content: center
padding: 0.2rem
background-color: #92278F
border-radius: 50%
margin-right: .5rem
img
width: 100%
height: 100%
.industry_section1_top
width: 100%
margin-bottom: 15px
img
width: 100%
border-radius: 10px
h2
margin: 0 auto 3rem
font-weight: 600
max-width: 75%
margin-left: 0
@include phone
max-width: 100%
span
font-style: italic
font-family: "DM Serif Display", serif
font-weight: normal
.industry_section2
margin-bottom: 4rem
.col-lg-8
padding-left: 0
@include phone
.col-lg-8
padding: 0
.col-lg-6
padding: 0
margin-top: 12px
.col-md-4
padding: 0
margin-top: 12px
.col-lg-6
&:nth-child(1)
padding-left: 0
position: relative
&::before
content: ''
background-color: #D6DAE0
width: 2px
height: 95%
display: block
position: absolute
right: 0
top: 1rem
@include phone
display: none
&:nth-child(2)
padding-right: 0
.industry_section2_right
width: 100%
height: 100%
img
width: 100%
height: 100%
border-radius: 10px
.industry_section2_left
.industry_section2_left_image
width: 100%
img
width: 100%
border-radius: 10px
.industry_section2_left_description
.industry_section2_common
height: 100%
padding: 1rem
h3
font-size: 1.625rem
font-weight: 600
color: #000
margin-bottom: 1.5rem
h4
width: 100%
display: flex
align-items: baseline
p
width: calc( 100% - 10% )
font-size: 1.25rem
color: #000000
margin-top: 0
margin-bottom: 0
font-weight: 400
position: relative
top: -5px
span
width: 25px
height: 25px
display: flex
align-items: center
justify-content: center
padding: 0.2rem
background-color: #92278F
border-radius: 50%
margin-right: .5rem
img
width: 100%
height: 100%
.industry_section3
background: #F4F2F1
padding: 4rem 0
h2
margin: 0 auto 3rem auto !important
font-weight: 600
max-width: 75%
margin-left: 0
text-align: center
@include phone
max-width: 100%
span
font-style: italic
font-family: "DM Serif Display", serif
font-weight: normal
.col-lg-6
margin-bottom: 1.5rem
@include phone
padding: 0
margin-bottom: 12px
.industry_section3_common
background: #fff
padding: 1.5rem
height: 100%
border-radius: 10px
margin-bottom: 1.5rem
.industry_section3_image
width: 100%
height: 32rem
margin-bottom: 2rem
text-align: center
@include custom_desktop
height: 20rem
img
max-width: 100%
height: 100%
.industry_section3_description
h4
font-size: 2.25rem
color: #000
font-weight: 600
margin-top: 0
margin-bottom: 1rem
p
font-size: 1.5rem
color: #333333
font-weight: 400
margin-top: 0
a
font-size: 1.625rem
font-weight: 500
color: #92278F
text-decoration: none
transition: .4s ease-in-out
display: inline-flex
align-items: center
span
width: 30px
height: 30px
display: inline-flex
align-items: center
justify-content: center
padding: .5rem
img
width: 100%
height: 100%
// .pos_terminal
// width: 100%
// text-align: center
// height: 36rem
// align-content: center
// @include desktop-ls
// height: 28rem
// @include phone
// height: 24rem
// img
// width: 75%
// .handheld
// width: 100%
// text-align: center
// height: 36rem
// align-content: center
// height: 28rem
// padding: 2rem
// @include desktop-ls
// height: 28rem
// padding: 2rem
// @include phone
// height: 25rem
// img
// width: 38%
// height: 100%
// .self_kiosk
// width: 100%
// text-align: center
// height: 30rem
// align-content: center
// @include desktop-ls
// height: 28rem
// @include phone
// height: 23rem
// img
// width: 50%
// .kitchen_system
// width: 100%
// text-align: center
// height: 30rem
// align-content: center
// @include desktop-ls
// height: 28rem
// @include phone
// height: 20rem
// img
// width: 100%
.overlays
position: absolute
top: 0
left: 0
width: 100%
height: 100%
display: flex
flex-direction: column
.overlay
flex: 1
background: #fff
animation-fill-mode: forwards
&:nth-child(1)
transform: scaleX(0)
transform-origin: 100% 50%
animation: overlay-1 3s ease-in-out
&:nth-child(2)
transform: scaleX(0)
transform-origin: 0% 50%
animation: overlay-2 3s ease-in-out
@keyframes img-reveal
50%
transform: scale(1.4)
opacity: 0
51%
transform: scale(1.4)
opacity: 1
100%
transform: scale(1)
opacity: 1
@keyframes overlay-1
0%
transform: scaleX(0)
transform-origin: 100% 50%
50%
transform: scaleX(1)
transform-origin: 100% 50%
51%
transform: scaleX(1)
transform-origin: 0% 50%
100%
transform: scaleX(0)
transform-origin: 0% 50%
@keyframes overlay-2
0%
transform: scaleX(0)
transform-origin: 0% 50%
50%
transform: scaleX(1)
transform-origin: 0% 50%
51%
transform: scaleX(1)
transform-origin: 100% 50%
100%
transform: scaleX(0)
transform-origin: 100% 50%
.industry_section4
background-repeat: no-repeat
background-size: 100% 100%
padding-left: 4rem
padding-right: 4rem
margin-bottom: 4rem
overflow: hidden
@include phone
padding: 12px 12px
.is-container
max-width: 100%
.industry_section4_right
text-align: center
width: 100%
height: 100%
img
width: 100%
height: 100%
margin-bottom: -4px
@include phone
width: 100%
margin-top: 12px
margin-bottom: unset
.industry_section4_left
width: 100%
margin: 0 auto
margin-right: 0
align-content: center
height: 100%
@include phone
width: 100%
padding-top: 1rem
h3
font-size: 2.25rem
color: #fff
font-weight: 600
margin-top: 0
margin-bottom: 1rem
p
font-size: 1.5rem
color: #ffffff
font-weight: 400
margin-top: 0
a
font-size: 1.625rem
font-weight: 500
color: #ffffff
text-decoration: none
transition: .4s ease-in-out
display: inline-flex
align-items: center
span
width: 35px
height: 35px
display: inline-flex
align-items: center
justify-content: center
padding: .5rem
margin-left: .5rem
img
width: 100%
height: 100%
.contact_btn
background-color: #fff
padding: 1rem 2.2rem
display: inline-flex
border-radius: 30px
font-weight: normal !important
color: #000 !important
border: 1px solid #fff
justify-content: center
transition: 0.25s ease
font-size: 1rem !important
margin-top: 1.5rem !important
&:hover
box-shadow: 0 10px 20px rgba(255, 255, 255, 0.5) !important
.fifth_section1
.col-lg-6
height: 100%
@include phone
margin-bottom: 12px
.fifth_section1_left
width: 85%
h3
font-size: 2.25rem
color: #000
font-weight: 600
margin-top: 0
margin-bottom: 1rem
p
font-size: 1.5rem
color: #333333
font-weight: 400
margin-top: 0
a
font-size: 1.625rem
font-weight: 500
color: #92278F
text-decoration: none
transition: .4s ease-in-out
display: inline-flex
align-items: center
span
width: 30px
height: 30px
display: inline-flex
align-items: center
justify-content: center
padding: .5rem
img
width: 100%
height: 100%
.fifth_section1_right
width: 100%
img
width: 100%
border-radius: 10px
.fifth_section2
@include phone
.row
flex-direction: column-reverse
.col-lg-6
margin-top: 12px
.col-lg-6
height: 100%
.fifth_section2_left
width: 85%
margin: 0 auto
margin-right: 0
@include phone
width: 100%
h3
font-size: 2.25rem
color: #000
font-weight: 600
margin-top: 0
margin-bottom: 1rem
p
font-size: 1.5rem
color: #333333
font-weight: 400
margin-top: 0
a
font-size: 1.625rem
font-weight: 500
color: #92278F
text-decoration: none
transition: .4s ease-in-out
display: inline-flex
align-items: center
span
width: 30px
height: 30px
display: inline-flex
align-items: center
justify-content: center
padding: .5rem
img
width: 100%
height: 100%
.fifth_section2_right
width: 100%
img
width: 100%
border-radius: 10px
.industry_testimonials
position: relative
@include phone
.row
flex-direction: column-reverse !important
@include phone
.is-container
padding: 0 !important
.col-lg-7
padding: 0
height: 100%
align-content: center
.col-lg-5
padding: 0
height: 100%
align-content: center
.owl-nav
position: absolute
top: -8rem
right: 0
@include phone
top: -5rem
h5
font-size: 2.6rem
font-weight: 600
color: #000
width: 55%
margin-bottom: 2rem
@include phone
font-size: 2.5rem
margin-top: 0
width: 100%
padding: 0 12px
span
font-size: 2.5rem
span
font-family: "DM Serif Display", serif
font-weight: normal
font-style: italic
.col-lg-7
padding: 0
.col-lg-5
padding: 0
.index_cust_wrap
overflow: hidden
.industry_testimonials_image
width: 100%
height: 100%
.multi_image_section
position: relative
height: 100%
.store_btns
width: 38%
display: flex
align-items: flex-end
position: absolute
right: 2rem
bottom: 2rem
flex-direction: column
a
width: 100%
height: 100%
display: flex
align-items: center
justify-content: center
transition: .4s ease-in-out
text-decoration: none
opacity: 1
img
width: 100%
height: 100%
.main_image
width: 100%
height: 100%
align-content: center
@include phone
height: 40rem !important
img
width: 100%
height: 100%
.calendar_logo
height: 7rem
position: absolute
left: 2rem
top: 2rem
@include phone
width: 80px
height: 80px
img
width: 100%
height: 100%
img
height: 100%
.industry_testimonials_description
width: 100%
background-color: #F4F2F1
padding: 3rem
height: 100%
align-content: center
.industry_testimonials_customer
width: 100%
display: flex
align-items: center
.industry_testimonials_customer_description
width: calc( 100% - 15% )
padding-left: 1rem
h4
font-size: 1.5rem
font-weight: 600
color: #000
margin-top: 0
margin-bottom: .5rem
p
font-size: 1.125rem
font-weight: 400
color: #000
margin-bottom: 0
margin-top: 0
.industry_testimonials_customer_image
width: 15%
display: inline-flex
align-items: center
justify-content: center
border-radius: 50%
img
width: 100%
height: 100%
border-radius: 50%
h3
font-size: 2rem
font-weight: 600
font-family: "DM Serif Display", serif
font-weight: normal
color: #000
text-align: left
// line-height: 1.5
@include phone
font-size: 1.5rem !important
span
color: #92288E
.industry_testimonials
.industry_testimonials_description
@include phone
padding: 1rem
h3
margin-top: 0
.industry_section2
h2
margin: 0 auto 3rem
font-weight: 600
max-width: 75%
margin-left: 0
.auto_logo_flip_right
.common_flip
width: 100%
height: 100%
img
width: 100%
height: 100%
.industry_hero
margin-bottom: 0
padding: 8rem 0