@import '../_common'

header
    background: var(--prime)
    height: var(--headerfixed)
    @include respond-to(991)
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px
    .header-container
        .upper-container
            padding: 4px var(--containerfluid)
            @include respond-to(screen-1024)
                padding: 4px 15px

            @include respond-to(screen-991)
                padding: 15px 15px
            
            @include respond-to(screen-540)
                padding: 10px 12px
                margin-top: 12px 0 0
            .colA, .colC
                ul
                    li 
                        a
                            font-size: 12px 
                            transition: 0.5s ease
        .lower-container
            ul 
                li
                    a 
                        font-size: 14px
                        transition: 0.5s ease




.prin_sec
    margin-top: var(--headerfixed)
    .item-grids , .item-grid
        display: grid
        grid-template-columns: 1fr 1fr
        background-color: var(--prime)
        overflow: hidden
        height: 650px
        @include respond-to(screen-1366)
             height: 550px
        @include respond-to(screen-991)
            grid-template-columns: 1fr 

    .director-img
        position: relative
        height: 100%
        overflow: hidden
        @include respond-to(screen-768)
             height: 450px
        @include respond-to(screen-540)
            height: 350px
        
        .play-btn
            --playbtncolor: #fff
            position: absolute
            bottom: 60px
            right: 60px
            z-index: 1
            --btnsize: 65px
            @include respond-to(screen-991)
                bottom: 6px
                right: 54px
            @include respond-to(screen-540)
                bottom: 40px
                --btnsize: 45px

            &::after 
             border-left: calc(var(--btnsize) / 5.6) solid var(--playbtncolor)

        img
            width: 100%
            height: 100%
            object-fit: cover
            display: block
    
        &::after
            content: ''
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%
            background: linear-gradient(to top, rgb(0 0 0 / 85%), rgba(255, 255, 255, 0))
            pointer-events: none

    .item-content
        color: var(--white)
        padding: 110px 110px 0 110px
        position: relative
        background: var(--yellow)
        @include respond-to(screen-1280)
            padding: 40px 70px 0 50px
        @include respond-to(screen-1024)
             padding: 30px 54px 0 45px
        @include respond-to(screen-991)
            text-align: center
        @include respond-to(screen-540)
            padding: 26px 20px 0 20px
        
        .item-content-para1
        p
            &:last-child
                padding: 20px 0 60px
                @include respond-to(screen-991)
                padding: 26px 0 0
            &:first-child
                padding: 40px 0 0
                @include respond-to(screen-991)
                padding: 26px 0 0
        h5
            margin-bottom: 14px

        h2
            width: 52%
            @include respond-to(screen-1440)
                width: 90%

            @include respond-to(screen-991)
                margin: 0 auto
                width: 100%
        p
            color: var(--white)
            padding: 20px 0 5px 0
            width: 92%
            opacity: 0.8
            @include respond-to(screen-1024)
                padding: 35px 0
                @include respond-to(screen-768)
                    padding:26px 0
                    width: 100%
                    margin: 0 auto


        h6
            font-size: 14px
            line-height: 20px
            margin-bottom: 4px
            @include respond-to(screen-540)
                margin-top:4px
        .chats
            display: flex
            justify-content: flex-end

            img
                @include respond-to(screen-540)
                width: 85px