@import "../_common"


.detail-secA
    height: calc( 100vh - 80px )
    padding-top: 30px
    overflow: hidden
    background: var(--gray)
    position: relative
    @include media(991)
      height: calc(60vh - 80px)

    &::before
        position: absolute
        inset: 0
        width: 100%
        height: 100%
        content: ""
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40.14%, rgba(0, 0, 0, 0.7) 68.77%)

    img, video
        position: absolute
        inset: 0
        width: 100%
        height: 100%
        object-fit: cover

    .content-wrapper
        position: absolute
        left: 5%
        bottom: 12%
        width: 100%
        max-width: 530px
        @include media(540)
           max-width: 320px


        p
            font-size: 20px
            color: rgba(255, 255, 255, 1)
            font-weight: 400
            margin-bottom: 15px
            @include media(540)
              font-size: 14px

        
        h4
            font-size: 32px
            color: var(--white)
            font-weight: 500

            @include media(540)
              font-size: 18px


.detail-secB       
    padding: 60px 0
    width: 80%
    margin: 0 auto
    @include media(1366)
        width: 85%
    @include media(991)
        width: 90%
        padding: 40px 0
    @include media(768)
        width: 95%
        padding: 30px 0
    @include media(540)
        width: 100%
        padding: 20px 0

    .content
        @include media(540)
            text-align: center
        p, ul li, ol li, span, strong, b
            font-size: 16px
            color: rgba(102, 102, 102, 1)
            margin-bottom: 20px
            line-height: 1.7
            @include media(991)
                font-size: 15px
                margin-bottom: 18px
            @include media(768)
                font-size: 14px
                margin-bottom: 15px
                line-height: 1.6
            @include media(540)
                font-size: 13px
                margin-bottom: 12px

        h1, h2, h3, h4, h5, h6
            font-size: 24px
            color: var(--primary)
            margin-bottom: 15px
            margin-top: 25px
            @include media(991)
                font-size: 22px
                margin-bottom: 12px
                margin-top: 20px
            @include media(768)
                font-size: 20px
                margin-bottom: 10px
                margin-top: 18px
            @include media(540)
                font-size: 18px
                margin-bottom: 8px
                margin-top: 15px

        ul, ol
            margin-bottom: 20px
            @include media(768)
                margin-bottom: 15px
            @include media(540)
                margin-bottom: 12px

        ul li, ol li
            position: relative
            padding-left: 30px
            margin-bottom: 5px
            color: #363636
            line-height: 1.7
            @include media(991)
                padding-left: 26px
                line-height: 1.6
            @include media(768)
                padding-left: 24px
                margin-bottom: 4px
            @include media(540)
                padding-left: 20px

        ul li::before
            content: ""
            position: absolute
            left: 0
            top: 9px
            width: 6px
            height: 6px
            background-color: var(--primary)
            border-radius: 50%
            @include media(768)
                top: 7px
                width: 5px
                height: 5px
            @include media(540)
                top: 6px
                width: 4px
                height: 4px

        ol
            counter-reset: item

            li::before
                content: counter(item) "."
                counter-increment: item
                position: absolute
                left: 0
                color: var(--secondary)
                font-weight: 600
                @include media(540)
                    font-size: 13px

        img
            max-width: 100%
            height: auto
            display: block
            margin: 20px 0
            @include media(768)
                margin: 15px 0
            @include media(540)
                margin: 12px 0

        blockquote
            border-left: 3px solid var(--primary)
            padding-left: 20px
            margin: 20px 0
            font-style: italic
            @include media(768)
                padding-left: 15px
                margin: 15px 0
            @include media(540)
                padding-left: 12px
                margin: 12px 0

    
.detail-secC
    padding: 0 0 70px
    @include media(991)
        padding: 0 0 50px
    @include media(768)
        padding: 0 0 40px
    @include media(540)
        padding: 0 0 30px

    .heading
        display: flex
        justify-content: space-between
        align-items: center
        margin-bottom: 2rem
        @include media(768)
            margin-bottom: 1.5rem
        @include media(540)
            margin-bottom: 1rem
            justify-content: center

        h3
            margin: 0

        .swiper-group
            display: flex
            align-items: center
            gap: 12px
            flex-shrink: 0

            @include media(675)
                display: none

            button
                width: 42px
                height: 42px
                border-radius: 50%
                display: flex
                justify-content: center
                align-items: center
                transition: background 0.3s ease
                cursor: pointer
                box-shadow: 0px 3px 8px 0px #0000003D
                background: var(--white)
                color: #000

                &.moreBlogSlider-prev
                    transform: rotate(180deg)

                &:hover:not(.swiper-button-disabled)
                    background: #f0f0f0

                &.swiper-button-disabled
                    opacity: 0.35
                    cursor: not-allowed

                @include media(991)
                    width: 35px
                    height: 35px

                svg
                    width: 20px
                    height: 20px

                    @include media(991)
                        width: 16px
                        height: 16px

                    path
                        fill: #333
                        transition: fill 0.3s ease

    .moreBlogSlider
        padding:  20px 0
        .swiper-wrapper
            .card
                border-radius: 10px
                overflow: hidden
                box-shadow: 0px 6px 43px 0px rgb(100 100 111 / 9%)
                display: block
                height: 100%

                .card-img
                    overflow: hidden
                    height: 250px
                    @include media(540)
                    height: 220px


                    img
                        width: 100%
                        display: block
                        object-fit: cover
                        transition: transform 0.5s ease

                .card-content
                    padding: 20px

                    p:not(:last-child)
                        margin-bottom: 20px
                        font-weight: 600

                    p:last-child
                        color: rgba(102, 102, 102, 1)
                        font-weight: 500