.enterprise-sales-page
  display: flex
  padding: 118px 0
  @include desktop
    padding: 59px 0
  @include phone
    padding: 29.5px 0

.has-bg
  background: linear-gradient(90deg, white 66%, #ccebff 66%)
  @include phone
    background: white

.enterprise-container
  max-width: 1344px
  margin: 0 auto
  display: flex
  @include desktop
    padding: 0 5rem
  @include phone
    flex-direction: column-reverse
    max-width: 100%

.enterprise-left
  h1
    @include phone
      font-size: 2rem
    font-size: 2.3rem
    font-weight: 300
  display: flex
  flex: 1
  flex-direction: column
  margin: 0 
  @include desktop
    flex: none
    width: 50%
  @include phone
    margin-top: 2rem
    padding: 1.5rem

.enterprise-right
  flex: 1
  flex: 1
  flex-direction: column
  margin: 0 auto
  @include desktop
    flex: none
    width: 50%

.enterprise-left p
  margin: 0

.logo-container
  @include phone
    justify-content: space-between
  display: flex
  flex-direction: row
  gap: 3rem
  align-items: center
  margin-bottom: 3rem
.logo-item
  font-size: 3rem
  img
    max-width: 200px
    @include phone
     max-width: 100px

.sales-video
  video
    display: flex
    height: auto
    width: 100%
    margin: 0 auto
  background: #fff
  border-radius: 14px
  box-shadow: 0 8px 53px 0 rgba(25, 38, 57, 0.2), 0 4px 8px 3px rgba(25, 38, 57, 0.07)
  left: 40px
  position: relative
  padding: 0.8rem
  display: flex
  justify-content: center
  align-items: center
  video::-webkit-media-controls
    visibility: hidden
  video::-webkit-media-controls-enclosure
    visibility: visible
  @include desktop
    width: 90%
    left: 80px
  @include phone
    left: unset

.sales-play
  display: flex
  justify-content: center
  align-items: center
  font-size: 1.8rem
  color: white 
  position: absolute
  cursor: pointer
  height: 4rem
  width: 4rem
  border-radius: 50%
  border: 2px solid white
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4))

.enterprise-about
  background: #192639
  color: white
  padding-bottom: 60px
  padding-top: 60px
  @include phone
    padding: unset
    margin-bottom: unset !important

.enterprise-about-body
  flex-grow: 1
  flex-shrink: 0

.enterprise-about-container
  max-width: 1334px
  margin: 0 auto
  position: relative
  display: flex
  @include phone
    flex-direction: column

.breakout-media
  flex: 1
  @include desktop
    padding-left: 3rem

.outer-wrapper
  background-color: #fff
  border-radius: 16px 16px 0 0
  bottom: -60px
  box-shadow: 0 -40px 120px -28px rgba(0, 0, 0, 0.2)
  height: 530px
  width: 500px
  position: absolute
  @include desktop  
    height: 420px
    width: 400px
  @include phone
    bottom: unset
    height: 350px
    width: 100%
    position: relative
    top: 0

.rounded-left
  bottom: 0
  height: calc(100% - 16px)
  left: 16px
  position: absolute
  width: calc(100% - 32px)
  z-index: 10
  @include phone
    height: 100%
    position: absolute
    width: 100%
    left: unset

.rounded-right
  background-size: cover
  background-position: center
  border-radius: 16px !important
  height: 100%
  width: 100%
  @include phone
    border-radius: 0px !important

.avatar-wrapper
  flex: 2
  padding-left: 250px
  @include desktop
    padding-left: 100px
    padding-right: 50px
    max-width: 1114px
    font-size: 80%
  @include phone
    padding: 2rem
    display: flex
    flex-direction: column
    gap: 2rem

.enterprise-info
  display: grid
  grid-template-columns: repeat(4, 1fr)
  @include phone
    grid-template-columns: repeat(1, 1fr)

.enterprise-info-headline
  font-size: 3rem
  padding: 1rem 20rem 1rem 20rem
  @include desktop
    padding: 1rem 5rem 1rem 5rem
  @include phone
    padding: 0

.enterprise-info-headline:first-child
  background: linear-gradient(90deg, white 66%, #ccebff 66%)

.enterprise-info-item
  display: flex
  flex-direction: column
  background: #fff
  border-radius: 0 0 14px 14px
  cursor: pointer
  min-height: 200px
  position: relative
  transition: all 75ms ease-in-out
  z-index: 1
  overflow: hidden
  a
    color: black

.enterprise-info-item-top
  flex: 1
  width: 100%

.enterprise-info-item-bottom
  flex: 1
  width: 100%
  padding: 30px
  a
    color: black

.enterprise-info-item-top img
  height: auto
  max-width: 100%
  object-fit: cover

.enterprise-info-title
  font-size: 18px
  font-weight: 600
  margin-bottom: 1rem

.enterprise-info-description
  margin-bottom: 3rem

.enterprise-info-item:hover
  transform: translateY(-10px)
  box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 30px
  z-index: 3

  .enterprise-info-button
    visibility: visible
    opacity: 1

.enterprise-info-button
  border: 1px solid #192639
  border-radius: 8px
  border-width: 2px
  color: #192639
  font-family: Maven Pro,Arial,Helvetica
  font-size: .875rem
  height: auto
  letter-spacing: 2.5px
  line-height: 1
  padding: 11px 1rem
  text-transform: uppercase
  text-decoration: none
  visibility: hidden
  transition: visibility 0.2s linear,opacity 0.2s linear
  opacity: 0

.avatar-cta
  border: 1px solid white
  border-radius: 8px
  border-width: 2px
  color: white
  font-family: Maven Pro,Arial,Helvetica
  font-size: .875rem
  height: auto
  letter-spacing: 2.5px
  line-height: 1
  padding: 11px 1rem
  text-transform: uppercase
  text-decoration: none
  height: 41.5px
  width: 160px
  margin-top: 1rem
  display: inline-block
  position: relative
  transition: 0.2s linear all

.avatar-cta:hover
  color: rgb(170, 170, 170) !important
  border-color: rgb(170, 170, 170)

.avatar-cta:hover
  color: white

.avatar-icon-container
  display: flex
  flex-direction: row
  gap: 3rem
  margin-top: 1rem
  cursor: pointer


.avatar-icon
  color: white
  border-radius: 44px
  width: 1.5rem
  height: 1.5rem
  align-items: center
  justify-content: center
  display: inline-flex

.is-hidden-mobile
  @include phone
    display: none

.sales-schedule
  @include phone
    margin: 3rem 0
  #appointmentsDiv
    .container
      #appointmentsDiv
        #appointmentsContainer
          .card3d
            @include desktop
              overflow: unset
              display: flex
              flex-direction: column
              left: 53px
            @include phone
              left: unset
              display: flex
              flex-direction: column
            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
                transform: none !important
                top: unset !important
                box-shadow: inherit
                border-radius: 14px !important
              .freeDemoCard
                @include desktop
                  flex-direction: column
                  border-radius: 14px !important
                  padding: 1rem
                .freeDemoCardForm
                  @include desktop
                    width: 100%
                  @include phone
                    width: 100%
                  width: 50%
            .mainCard
              .freeDemoCard
                .freeDemoCardImage
                  display: none
                .freeDemoCardForm
                  width: 100%
                  .appointment-btn
                    @include phone
                      margin-bottom: 3rem !important
                    margin-right: unset
                    margin-top: 2rem
                  .rs-h4
                    @include phone
                      font-size: 1rem
                    font-size: 1.5rem   
                    font-weight: 900 !important
                    visibility: hidden
                    position: relative
                    margin-bottom: 2rem
                  .rs-h4:after
                    @include phone
                      font-size: 1rem
                    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
                    .label
                      @include phone
                        font-size: 0.8rem
                        width: 100%
                      width: 48% !important
                      .appointment-form-control
                        width: 100% !important
                        border: 1px solid #ced4da

#appointment-schedule-demo
  max-width: 100% !important