@import mixins
@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,400;1,500;1,600;1,700;1,800;1,900&display=swap')
html
    @include windows-125-dpr-only
        font-size: 80% !important
body
    font-family: "Poppins", sans-serif !important
.row
    margin-left: 0 !important
    margin-right: 0 !important
.custom_container_full
    max-width: 1920px
    margin: 0 auto
.common_container
    width: 70%
    margin: 0 auto
    @include phone
        width: 100%
.home_hero
    background: #fbbb3b
    padding: 10rem 0 6rem 0
    @include phone
        padding: 9rem 0 6rem 0 !important
    .tune_hero_right
        width: 100%
        position: relative
        text-align: center
        .main_hero_image
            width: 80%
            border-radius: 14px
        .main_hero_bubble1
            width: 25%
            position: absolute
            left: 0%
            top: -29%
            z-index: 99
        .main_hero_bubble2
            width: 28%
            position: absolute
            left: 22%
            bottom: -35%
        .main_hero_bubble3
            width: 30%
            position: absolute
            right: 11%
            top: -25%
    .tune_hero_left
        @include phone
            margin-bottom: 6rem
        .hero_btns
            display: flex
            align-items: center
            flex-wrap: wrap
            margin-top: 2rem
        h1
            font-size: 3.75rem !important
            line-height: 1 !important
            color: #000000
            font-weight: 700
            margin-bottom: 1rem
            @include phone
                font-size: 1.75rem !important
                line-height: 1.3 !important
            span
                color: #fff !important
        p
            font-size: 1.25rem !important
            line-height: 1.75rem !important
            color: #000
            font-weight: 400
            @include phone
                font-size: 1rem !important
        .hero_top_strip
            background: #ffffff
            border-radius: 23px
            padding: .7rem .5rem
            width: 80%
            margin: 0 auto
            margin-left: 0 !important
            margin-bottom: 2rem !important
            @include phone
                width: 100% !important
            p
                font-size: 0.875rem !important
                line-height: 1.25rem !important
                margin-bottom: 0 !important
                span
                    background-color: #000
                    color: #fff
                    border-radius: 23px
                    padding: .3rem .7rem
                    margin-right: .5rem
.get_started
    font-size: 1rem !important
    line-height: 1.5rem !important
    background-color: #000
    border: 1px solid #000
    display: inline-flex
    align-items: center
    justify-content: center
    padding: 10px 1rem
    border-radius: 8px
    transition: .4s ease-in-out
    color: #fff
    text-decoration: none
    margin-right: .5rem
    &:hover
        background-color: #fff
        color: #000
        span
            filter: unset !important
.talk_to_sale
    font-size: 1rem !important
    line-height: 1.5rem !important
    background-color: transparent
    border: 1px solid #000
    display: inline-flex
    align-items: center
    justify-content: center
    padding: 10px 1rem
    border-radius: 8px
    transition: .4s ease-in-out
    color: #000
    text-decoration: none
    &:hover
        background-color: #000
        color: #fff
.wave-container
    background: #fbbb3b
.waves
  position: relative
  width: 100%
  height: 15vh
  margin-bottom: -7px
  min-height: 100px
  max-height: 150px
.parallax > use
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite
  &:nth-child(1)
    animation-delay: -2s
    animation-duration: 7s
  &:nth-child(2)
    animation-delay: -3s
    animation-duration: 10s
  &:nth-child(3)
    animation-delay: -4s
    animation-duration: 13s
  &:nth-child(4)
    animation-delay: -5s
    animation-duration: 20s
@keyframes move-forever
  0%
    transform: translate3d(-90px, 0, 0)
  100%
    transform: translate3d(85px, 0, 0)
@media (max-width: 768px)
  .waves
    height: 40px
    min-height: 40px
  .content
    height: 30vh
.second_section_main
    padding: 5rem 0
    @include phone
        padding-left: 12px !important
        padding-right: 12px !important
        .col-md-4
            padding-left: 0 !important
            padding-right: 0 !important
    .common_cards
        margin-bottom: 2rem
        h3
            font-size: 1.25rem
            line-height: 1.75rem
            font-weight: 700
            color: #000
            margin-bottom: .5rem
            margin-top: .5rem
            @include phone
                font-size: 1rem !important
        p
            font-size: 1rem !important
            line-height: 1.75rem !important
            color: #6B7280
            font-weight: 400
            @include phone
                font-size: .8rem !important
        .common_cards_image
            width: 60px
            height: 60px
            border-radius: 50%
            margin-bottom: 1rem
            img
                width: 100%
                height: 100%
                border-radius: 50%
    .second_section_heading
        width: 60%
        margin-bottom: 2rem
        @include phone
            width: 100%
        h2
            font-size: 2.25rem
            line-height: 2.5rem
            letter-spacing: -.025em
            font-weight: 800
            color: #111827
            margin-bottom: 1rem !important
            @include phone
                font-size: 1.5rem !important
                margin-bottom: 0 !important
        p
            font-size: 1.2rem !important
            line-height: 1.75rem !important
            color: #6B7280
            font-weight: 400
            @include phone
                font-size: 1rem !important
.third_section_main
    .third_section_head
        text-align: center
        margin-bottom: 3rem
        h3
            font-size: 2.25rem
            letter-spacing: -.025em
            font-weight: 800
            line-height: 1.25 !important
            color: #111827
            margin-bottom: 1.5rem !important
            @include phone
                font-size: 1.5rem !important
                margin-bottom: .7rem !important
        p
            font-size: 1.2rem !important
            line-height: 1.75rem !important
            color: #6B7280
            font-weight: 400
            @include phone
                font-size: 1rem !important
    .video-section
        width: 100%
        border-radius: 10%
    .third_section_image
        width: 100%
        margin: 0 auto
        text-align: center
        box-shadow: 0px 9px 19px 0px rgba(181,181,181,1)
        -webkit-box-shadow: 0px 9px 19px 0px rgba(181,181,181,1)
        -moz-box-shadow: 0px 9px 19px 0px rgba(181,181,181,1)
        border-radius: 24px
        overflow: hidden
        @include phone
            width: 96% !important
            padding: 1rem !important
            height: auto !important
        img
            width: 100%
            height: 100%
.fourth_section_main
    margin-top: 8rem
    margin-bottom: 6rem
    .fourth_section_right
        width: 100%
        text-align: center
        img
            width: 100%
    .fourth_section_left
        @include phone
            margin-bottom: 2.5rem
        h3
            font-size: 2.25rem
            letter-spacing: -.025em
            font-weight: 800
            line-height: 1.25 !important
            color: #111827
            margin-bottom: 1.5rem !important
            @include phone
                font-size: 1.5rem !important
        p
            font-size: 1.2rem !important
            line-height: 1.75rem !important
            color: #6B7280
            font-weight: 400
            margin-bottom: 2rem
            @include phone
                font-size: 1rem !important
.learn_more
    font-size: 1rem !important
    line-height: 1.5rem !important
    background-color: #000
    border: 1px solid #000
    display: inline-flex
    align-items: center
    justify-content: center
    padding: 10px 1rem
    border-radius: 8px
    transition: .4s ease-in-out
    color: #fff
    text-decoration: none
    margin-right: .5rem
    &:hover
        background-color: #fff
        color: #000
.fifth_section_main
    .fifth_section_common
        overflow: hidden
        @include phone
            img
                width: 100%
                margin-top: 1.5rem
    .fifth_section_big
        background: #fbbb3b
        padding: 5rem 3rem
        text-align: center
        height: 100%
        align-content: center
        h3
            font-size: 1.875rem
            line-height: 2.25rem
            color: #fff
            font-weight: 700
            margin-bottom: 2rem
            @include phone
                font-size: 1.5rem !important
        p
            font-size: 1rem
            line-height: 1.75rem
            color: #fff
            font-weight: 400
            margin-bottom: 2rem
.white_get_started
    font-size: 1rem !important
    line-height: 1.5rem !important
    background-color: #fff
    border: 1px solid #fff
    display: inline-flex
    align-items: center
    justify-content: center
    padding: 10px 1rem
    border-radius: 8px
    transition: .4s ease-in-out
    color: #fbbb3b
    text-decoration: none
    margin-right: .5rem
    &:hover
        background-color: #fbbb3b
        color: #fff
.testimonials_main
    margin-top: 7rem
    margin: 7rem
    @include phone
        margin: 1rem !important
    h4
        font-size: 3rem
        font-weight: 700
        line-height: 1 !important
        color: #111827
        margin-bottom: 3rem !important
        width: 55%
        @include phone
            width: 100% !important
            font-size: 1.5rem !important
            margin-bottom: 1.5rem !important
    .slick-prev
        width: 40px
        height: 40px
        position: absolute
        top: -4rem
        right: 9rem
        outline: none !important
        border: 0 !important
        background: #EDEDED
        opacity: .7
        transition: .4s ease-in-out
        z-index: 99
        border-radius: 50%
        display: flex
        align-items: center
        justify-content: center
        @include phone
            width: 35px
            height: 35px
            right: 3rem
            top: -0.3rem !important
        img
            width: 75%
            height: 60%
        &:hover
            opacity: 1
    .slick-next
        width: 40px
        height: 40px
        position: absolute
        top: -4rem
        right: 4rem
        outline: none !important
        border: 0 !important
        background: #EDEDED
        opacity: .7
        transition: .4s ease-in-out
        z-index: 99
        border-radius: 50%
        display: flex
        align-items: center
        justify-content: center
        @include phone
            width: 35px
            height: 35px
            right: 0rem
            top: -0.3rem !important
        img
            width: 75%
            height: 60%
        &:hover
            opacity: 1
    .custom_slick
        .slider_logo_section
            width: 25%
            img
                width: 100%
        .slider_description
            margin: 1.5rem 0
            width: 90%
            h3
                font-size: 1.875rem
                line-height: 2.25rem
                font-weight: 700
                color: #000
                margin-bottom: 1.5rem
                @include phone
                    font-size: 1.3rem !important
            p
                font-size: 1.125rem !important
                line-height: 1.75rem !important
                color: #6B7280
                @include phone
                    font-size: 1rem !important
        .slider_star_icon
            span
                width: 25px
                height: 25px
                background: #fbbb3b
                display: inline-flex
                border-radius: 2px
                align-items: center
                justify-content: center
                margin-right: 2px
                img
                    width: 100%
                    height: 100%
.seventh_section_main
    @include phone
        .col-lg-6
            padding: 0 !important
    .first_grid
        .common_image
            padding: 1rem
    .seventh_common
        height: 100%
        a
            text-decoration: none
            transition: .5s ease-in-out
            height: 100%
            align-content: center
            display: flex
            flex-direction: column
            justify-content: space-between
            padding: 1rem
            @include phone
                padding: 0 !important
        h3
            font-size: 1rem
            font-weight: 500
            color: #000
            margin-bottom: .5rem !important
            position: relative
            line-height: 1.5 !important
            &::before
                content: ''
                background-color: #000
                height: 2px
                border-radius: 4px
                width: 100%
        p
            font-size: 1rem
            color: #6B7280
            position: relative
            line-height: 1.5 !important
            &::before
                content: ''
                background-color: #000
                height: 2px
                border-radius: 4px
                width: 100%
        .common_image
            width: 100%
            img
                width: 100%
    .seventh_section_single
        background-color: #f3f4f6
        border-radius: 4px
        height: 100%
        padding: 2rem
        align-content: center
        @include phone
            padding: 1rem !important
        h3
            font-size: 2.25rem
            line-height: 2.5rem
            font-weight: 700
            color: #000
            margin-bottom: 1.5rem
            @include phone
                font-size: 1.5rem
        p
            font-size: 1rem
            color: #6B7280
            margin-bottom: 2rem
        a
            font-size: 1rem !important
            line-height: 1.5rem !important
            background-color: #000
            border: 1px solid #000
            display: inline-flex
            align-items: center
            justify-content: center
            padding: 10px 1rem
            border-radius: 8px
            transition: .4s ease-in-out
            color: #fff
            text-decoration: none
            margin-right: .5rem
            &:hover
                background-color: #fff
                color: #000
.other_one
    @include phone
        .row
            flex-direction: column-reverse

.floating
    animation-name: floating
    animation-duration: 4s
    animation-iteration-count: infinite
    animation-timing-function: ease-in-out
    animation-direction: alternate

@keyframes floating
    from
        transform: translate(0, 0px)

    65%
        transform: translate(0, 19px)

    to
        transform: translate(0, 0px)

.home_hero_new
    background-repeat: no-repeat
    background-size: 100% 100%
    height: 57rem
    @include phone
        height: auto !important
        padding: 0 !important
        overflow: hidden
        .main_hero_section
            padding: 8rem 0 4rem !important
    .tune_hero_right
        width: 100%
        position: relative
        height: 57rem
        overflow: hidden
        @include phone
            position: absolute
            top: 0
            z-index: -1
            opacity: .4
            height: 47rem
            right: 0
        .main_hero_bottom
            width: 50%
            position: absolute
            bottom: 0rem
        .main_hero_music_splash
            width: 39%
            position: absolute
            bottom: -3rem
            left: 13rem
            z-index: 99
        .main_hero_landscape
            width: 50%
            position: absolute
            top: 25%
            left: 0rem
            @include phone
                display: none
        .main_hero_top
            width: 50%
            position: absolute
            top: 0rem
            right: 0rem
        .main_hero_playlist
            width: 50%
            position: absolute
            bottom: 10rem
            right: 0rem
    .tune_hero_left
        h1
            font-size: 3.5rem
            font-weight: 600
            color: #082047
            margin-bottom: 1.5rem
            line-height: 1.3 !important
            position: relative
            .underline_image
                width: 50%
                position: absolute
                bottom: 2.5rem
                left: 12rem
                img
                    width: 100%
        p
            font-size: 1.25rem
            color: #082047
            margin-bottom: 1.5rem
            line-height: 1.3 !important
        .hero_top_strip
            background-repeat: no-repeat
            background-size: contain
            width: 80%
            margin: 0 auto
            margin-left: 0 !important
            margin-bottom: 2rem !important
            height: 3rem
            display: flex
            align-items: center
            padding-left: 10px
            @include phone
                width: 100% !important
            p
                font-size: 0.875rem !important
                line-height: 1.25rem !important
                margin-bottom: 0
                display: flex
                align-items: center
                .arrow_icon
                    width: 20px
                    height: 20px
                    display: block
                    img
                        width: 100%
                        height: 100%
                .emoji_icon
                    width: 32px
                    height: 32px
                    margin-right: .5rem
                    display: flex
                    align-items: center
                    justify-content: center
                    img
                        width: 100%
.get_started
    span
        width: 20px
        height: 20px
        display: block
        filter: invert(100)
        img
            width: 100%
            height: 100%

.faq_main
    padding: 5rem 0 0rem 0

img
    @include phone
        max-width: 100%
.row
    @include phone
        margin: 0 !important
body
    @include phone
        overflow-y: hidden !important
.eBook_thankyou_wrap
    color: #000
    padding: 9rem 0 0
    .thankyou_subheading
        font-size: 2.1rem
        font-weight: 600
    a
        border: 1px solid #FBBE45
        &:hover
            background-color: #FBBE45
            color: #fff
            border: 1px solid #FBBE45