@import mcd_promotions_mixins
.mcd_custom_container_fluid, .second_section
    h2
        color: #1D58F2
        font-size: 1.5rem
        font-weight: 400
        @include desktop
            font-size: 1.3rem
    h3
        font-size: 2rem
        font-weight: 600
        color: #000000
        margin-top: 1rem
        margin-bottom: 2.5rem
        @include phone
            margin-bottom: 1.5rem
    p
        color: #474747
        font-size: 1.375rem
        line-height: 1.5
        @include phone
            margin-bottom: 2rem
    video
        outline: 5px solid #fff !important
        outline-offset: -4px !important
        box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.14) !important
        border-radius: 6px !important
    .row
        margin: 0
    @include phone
        font-size: 80%
    @include desktop
        font-size: 80%
      
.mcd_top_main_class
    @include phone
        overflow-x: hidden
.mcd_video_border
    border-radius: 14px
    video
        border-radius: 14px
        box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, .34)
.mcd_bold_highlight
    font-weight: 600

.mcd_new_hero
    background-image: url('/assets/mcd_promotions/mcd_promotions_bg.png')
    background-size: cover
    background-repeat: no-repeat
    padding: 4rem 0
    @include phone
        text-align: center
    .mcd_new_right
        width: 100%
        text-align: center
        position: relative
        img
            max-width: 80%
            z-index: 9
            position: relative
        .hero_img_bg
            position: absolute
            top: 55px
            right: 62px
            z-index: 1
            width: 100%
        .hero_video_1
            position: absolute
            width: 15.125rem
            z-index: 9
            left: 57px
            @include desktop
                width: 13.125rem
                z-index: 9
                left: 5rem            
            @include phone 
                width: 46.5vw
                left: 0
        .hero_video_2
            position: absolute
            width: 15.75rem
            bottom: 0
            right: 0  
            z-index: 9
            @include desktop
                width: 12.75rem
                bottom: 1rem
                right: 2rem            
            @include phone 
                width: 10.938rem        
    .mcd_new_left
        @include phone
            margin-bottom: 4rem
        h1
            font-size: 2.5rem
            color: #000000
            line-height: 1.5
            margin-bottom: 3rem
            font-weight: 400
            @include desktop
                font-size: 2rem
            @include phone 
                font-size: 1.5rem
                margin-bottom: 1.5rem
        a
            font-size: 1.25rem
            font-weight: 500
            color: #fff
            background-color: #1D58F2
            transition: .4s ease-in-out
            border: 2px solid #1D58F2
            border-radius: 12px
            padding: 10px 20px
            &:hover
                background-color: transparent
                color: #1D58F2
.mcd_client_section
    box-shadow: 0px 3px 99px rgba(0, 0, 0, .14)
    background: #ffffff
    border-radius: 16px
    padding: 2rem 0
    margin-top: 5rem
    margin-bottom: -10rem
    .common_logo
        width: 5.188rem
        height: 5.188rem
        margin: 0 auto
        @include phone 
            margin-bottom: 1rem
            width: 3.438rem
            height: 3.438rem
        img
            width: 100%
            height: 100%
    .mcd_client_description
        p
            color: #000000
            text-align: center
            font-size: 1rem
            margin: 2rem 0 0 0
            position: relative
            @include phone
                font-size: 0.8rem
            &::before
                content: ''
                background: transparent linear-gradient(90deg, #707070 0%, #38383800 100%)
                width: 20%
                height: 2px
                display: block
                position: absolute
                right: 11rem
                top: 10px
                @include phone 
                    display: none
            &::after
                content: ''
                background: transparent linear-gradient(270deg, #707070 0%, #38383800 100%)
                width: 20%
                height: 2px
                display: block
                position: absolute
                left: 11rem
                top: 10px        
                @include phone 
                    display: none                        
.second_section
    padding: 15rem 0 5rem 0
    @include phone
        padding: 13rem 0 0rem 0
    .mcd_new_upper_section
        margin-bottom: 7rem
        .mcd_upper_right_section
            position: relative
            width: 100%
            text-align: center
            img
                max-width: 80%
                z-index: 9
                position: relative
                @include phone
                    max-width: 100%
            .upper_section_ellipse
                position: absolute
                z-index: 1
                right: 63px
                bottom: 0
                @include phone
                    top: 34px
                    right: 0
            .upper_video_1
                position: absolute
                width: 14.063rem
                left: 33px
                z-index: 1
                top: 46px
                border-radius: 14px
                @include desktop
                    width: 12.063rem
                    left: 4rem                
                @include phone
                  width: 40vw
                  left: 0  
            .upper_video_2
                position: absolute
                width: 21.5rem
                bottom: -58px
                right: 16px
                z-index: 9
                border-radius: 14px
                box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, .34)      
                @include desktop
                    width: 18.5rem
                    bottom: -1rem
                    right: 2rem
                @include phone
                    right: 0
                    width: 62vw              
.mcd_new_lower_section
    .row
        @include phone 
            flex-direction: column-reverse
            padding-top: 5rem
    .mcd_lower_right_section
        position: relative
        width: 100%
        text-align: center
        img
            max-width: 80%
            z-index: 9
            position: relative
        .lower_section_ellipse
            position: absolute
            z-index: 1
            right: 63px
            bottom: 0
        .lower_video_1
            position: absolute
            width: 14.875rem
            right: 28px
            z-index: 1
            top: 46px
            border-radius: 14px
            box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, .34)            
            @include phone 
                width: 40vw 
                right: 0
                top: 0
        .lower_video_2
            position: absolute
            width: 15.5rem
            bottom: -58px
            left: 0   
            z-index: 9  
            border-radius: 14px
            box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, .34) 
            @include desktop
                width: 12.5rem
                bottom: 0rem            
            @include phone
                width: 40vw           
.mcd_third_section_main
    background-image: url('/assets/mcd_promotions/third_section_bg.png')
    background-size: cover
    background-repeat: no-repeat
    padding: 5rem 0 0rem 0
    position: relative
    @include phone
        padding-top: 10rem
    &::before
        content: ''
        background: transparent linear-gradient(180deg, #FFFFFF 0%, #FFFFFF00 100%)
        width: 100%
        height: 10%
        position: absolute
        top: 0
        left: 0
        right: 0
    .mcd_third_section
        text-align: center 
        .mcd_third_section_description
            width: 65%
            margin: 0 auto
            @include phone 
                width: 100%
                margin-bottom: 2rem
        .third_section_img
            text-align: center
            position: relative                
            .main_img
                max-width: 100%
                @include phone 
                    width: 100%
                    max-width: 100%
            .third_section_video_1
                position: absolute
                left: -48px
                width: 12.75rem
                top: 0px
                outline: 4px solid #ffffff
                outline-offset: -4px    
                box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, .34)
                border-radius: 14px 
                @include desktop
                    width: 9.75rem
                    left: -1px 
                @include desktop-sm
                    width: 10.75rem
                    left: -19px
                @include phone
                    left: 0
                    width: 22vw                          
            .third_section_video_2
                position: absolute
                width: 19.688rem
                bottom: 30px
                left: -10.313rem
                box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, .34)
                border-radius: 14px
                outline: 2px solid #fff
                outline-offset: -3px
                @include desktop-sm
                    width: 12.688rem
                    bottom: 4rem
                    left: -2rem  
                @include desktop
                    width: 15.688rem
                    bottom: 4rem
                    left: -1rem 
                @include phone
                    left: 0
                    width: 150px
                    bottom: -4rem              
            .third_section_video_3
                position: absolute
                width: 13rem
                right: -59px
                top: 205px
                box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, .34)
                border-radius: 14px
                outline: 5px solid #fff
                outline-offset: -4px 
                @include desktop-sm
                    width: 11rem
                    right: -24px
                    top: 231px
                @include phone
                    right: 0
                    width: 100px
                    top: 0                  
.mcd_fourth_section_main
    background-image: url('/assets/mcd_promotions/fourth_section_bg.png')
    background-size: cover
    background-repeat: no-repeat    
    padding: 5rem 0 0 0
    margin-top: 5rem    
    .mcd_fourth_section
        margin-bottom: 5rem
        .mcd_fourth_section_right
            position: relative
            text-align: center
            img
                max-width: 80%
                z-index: 9
                position: relative
                @include phone
                    max-width: 100%
            .fourth_section_ellipse
                position: absolute
                z-index: 1
                right: 0
                top: 57px
                max-width: unset !important
                width: 80%
                margin: 0 auto
                left: 0
                @include phone
                    width: 100%
            .fourth_section_video_1
                position: absolute
                right: 52px
                top: 56px
                width: 13.75rem
                z-index: 1
                @include phone
                    width: 39vw
                    right: 0
            .fourth_section_video_2
                position: absolute
                left: 65px
                bottom: 0
                width: 21rem
                z-index: 9
                @include desktop
                    left: 7rem
                    bottom: 0
                    width: 18rem 
                @include phone
                    width: 60vw 
                    left: 0
    .fourth_bottom_section
        .row
            @include phone 
                flex-direction: column-reverse
        .mcd_fourth_section_right
            position: relative
            text-align: center
            img
                max-width: 80%
                z-index: 9
                position: relative
                @include phone
                    max-width: 100%
            .fourth_section_ellipse_lower
                position: absolute
                left: 40px
                bottom: -24px
                max-width: unset !important
                width: 80%
                margin: 0 auto
                z-index: 1
                @include phone
                    width: 100% 
                    left: 0  
            .fourth_lower_section_video_1
                position: absolute
                right: 75px
                top: 31px
                width: 16.25rem
                z-index: 1
                @include desktop-sm
                    width: 13rem
                    right: 65px
                @include desktop
                    width: 13.25rem  
                @include phone
                    right: 0    
            .fourth_lower_section_video_2
                position: absolute
                left: 0
                bottom: 0
                width: 13.625rem
                z-index: 9
                @include desktop
                    left: 2rem
                    bottom: 1rem
                    width: 12.625rem 
                @include phone
                    bottom: -2rem               
.mcd_fifth_section_main
    background-image: url('/assets/mcd_promotions/fourth_section_bg.png')
    background-size: cover
    background-repeat: no-repeat    
    padding: 5rem 0
    @include phone
        padding-top: 8rem
        padding-bottom: 8rem      
    .mcd_fifth_section
        .mcd_fifth_section_right
            position: relative
            text-align: center
            img
                max-width: 80%
                z-index: 9
                position: relative
                @include phone
                    max-width: 100% 
            .fifth_section_ellipse
                position: absolute
                z-index: 1
                right: 0
                top: 57px
                max-width: unset !important
                width: 80%
                margin: 0 auto
                left: 0
                @include phone
                    width: 100% 
            .fifth_section_video_1
                position: absolute
                right: 10px
                bottom: 0
                width: 12.563rem
                z-index: 9
                @include desktop
                    right: 3rem
                    bottom: 0
                    width: 11.563rem
                @include phone
                    right: 0 
                    width: 36vw
                    bottom: -2rem 
    .fifth_bottom_section
        .row
            @include phone 
                flex-direction: column-reverse
                padding-top: 5rem
        margin-top: 5rem
        .mcd_fifth_section_right
            position: relative
            text-align: center
            img
                max-width: 80%
                z-index: 9
                position: relative
                @include phone
                    max-width: 100%
            .fifth_section_ellipse_lower
                position: absolute
                left: 60px
                bottom: -24px
                max-width: unset !important
                width: 80%
                margin: 0 auto
                z-index: unset 
                @include phone
                    width: 100%
                    left: 0
            .fifth_lower_section_video_1
                position: absolute
                right: 25px
                top: 31px
                width: 10.25rem
                z-index: 9
                box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.14) !important
                border-radius: 6px
                @include desktop
                    right: 1rem
                    top: 2rem
                    width: 14.25rem
                @include phone
                    width: 33vw 
                    right: 0  
            .fifth_lower_section_video_2
                position: absolute
                left: 25px
                bottom: -30px
                width: 18.75rem
                z-index: 9
                @include phone
                    left: 0 
                    width: 50vw                             
            .fifth_lower_section_video_3
                position: absolute
                left: 20px
                top: 22px
                width: 15.625rem
                @include desktop
                    left: 2rem
                    top: 22px
                    width: 12.625rem
                @include phone
                    left: 0
                    width: 37vw
.mcd_full_width_container
    max-width: 1920px !important
    margin: 0 auto

.mcd_fifth_section_main
    .fifth_lower_section_video_3
        width: 11rem !important;
    fifth_lower_section_video_1

.mcd_third_section_main
    p
        margin-bottom: 2.5rem
        @include phone
            margin-bottom: 2rem

.blue_mcd_footer
    background: transparent linear-gradient(265deg, #394DFE 0%, #2130B5 100%)
    border: 2px solid #394DFE
    border-radius: 31px 31px 0px 0px
    padding: 2.125rem 2.125rem
    box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, .60)
    margin-top: 6rem
    @include desktop
        width: 85%
        margin: 0 auto    
    @include phone 
        width: 88%
        margin: 0 auto
        padding: 1rem 1rem        
    p
        font-size: 1.25rem !important
        font-weight: 400 !important
        color: #ffffff !important
        margin-bottom: 0
        @include desktop
            font-size: 1rem !important
        @include phone 
            text-align: center
            margin-bottom: 1rem
    a
        font-size: 1.5rem
        text-decoration: none
        font-weight: 600
        color: #ffffff
        display: flex
        align-items: center
        @include desktop
            font-size: 1.2rem
        @include phone 
            justify-content: center
        .mcd_right_arrow
            margin-left: 1rem
            display: flex
            align-items: center
            justify-content: center
            width: 40px
            height: 40px
            background: #ffffff
            color: #394DFE
            font-weight: 700
            border-radius: 50%
            font-size: 1.5rem
.grey_mcd_footer
    background: transparent linear-gradient(96deg, #222222 0%, #404040 100%)
    box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, .60)
    border-radius: 20px
    padding: 2.125rem 2.125rem
    border: 2px solid #404040
    width: 85%
    margin: 0 auto
    margin-bottom: 4rem
    @include phone
        width: 96%
        .col-md-4
            display: flex
            align-items: center
            justify-content: center
            margin-bottom: 1.5rem
            .mcd_footer_logo
                text-align: center
            .mcd_social_icons
                display: flex
                align-items: center
                justify-content: space-around
                width: 100%
                a
                    margin-left: 0
    .mcd_footer_logo
        img
            max-width: 60%
    p
        font-size: 1.25rem
        color: #ffffff
        font-weight: 200
        margin-bottom: 0
        @include desktop
            font-size: 1rem
    .mcd_social_icons
        a
            margin-left: 1rem
            img
                width: 50px
                height: 50px
.schedule_with_arrow
    .mcd_right_arrow
        img
            width: 80%
.mcd_sixth_section_main
    .fifth_lower_section_video_3
        @include phone
            width: 8rem !important
.mcd_eight_section_main
    @include phone
        padding: 4rem 0 0
    .carousel-inner 
        img
            display: unset !important