@import '../_common'
@import '../../sass/home/home'

p
  text-align: justify

.header-container
  background-color: var(--prime)
  height: 30px




.home-secG
    width: 100%
    padding: 0
    position: relative
    min-height: 100vh
    display: flex
    align-items: center
    justify-content: center
    background: #fea718

    > img
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        object-fit: cover
        z-index: 0

    @include respond-to(screen-768)
        min-height: 80vh

    .container
        max-width: 1200px
        margin: 0 auto
        padding: 80px 20px
        width: 100%
        position: relative
        z-index: 1

        @include respond-to(screen-768)
            padding: 60px 20px

        .parents-container
            width: 100%

            .colB
                width: 100%
                max-width: 600px
                margin: 0 auto
                display: flex
                flex-direction: column
                gap: 40px

                @include respond-to(screen-768)
                    gap: 30px

                .parents-tab-nav-content
                    width: 100%
                    position: relative

                    .tabs
                        background: #fff
                        padding: 40px
                        border-radius: 25px
                        position: absolute
                        top: 0
                        left: 0
                        width: 100%
                        min-height: 280px
                        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1)
                        opacity: 0
                        visibility: hidden
                        transition: opacity 0.5s ease, visibility 0.5s ease

                        @include respond-to(screen-675)
                            padding: 30px
                            min-height: 250px

                        @include respond-to(screen-540)
                            padding: 25px
                            min-height: 220px

                        &.active
                            opacity: 1
                            visibility: visible
                            position: relative

                        &::before
                            content: ""
                            position: absolute
                            bottom: -20px
                            left: 50%
                            transform: translateX(-50%)
                            width: 0
                            height: 0
                            border-left: 20px solid transparent
                            border-right: 20px solid transparent
                            border-top: 20px solid #fff

                            @include respond-to(screen-540)
                                border-left: 15px solid transparent
                                border-right: 15px solid transparent
                                border-top: 15px solid #fff
                                bottom: -12px

                        .parents-comments
                            p
                                font-size: 16px
                                line-height: 28px
                                color: #333
                                margin: 0

                                @include respond-to(screen-540)
                                    font-size: 14px
                                    line-height: 24px

                            .parents-info
                                padding-top: 30px
                                display: flex
                                justify-content: space-between
                                align-items: center

                                @include respond-to(screen-540)
                                    padding-top: 20px

                                .play-btn
                                    border-left: var(--bordercolor)

                                .parent-name
                                    h5
                                        font-size: 18px
                                        color: #000
                                        margin: 0
                                        font-weight: 600

                                    h6
                                        font-size: 14px
                                        color: #666
                                        margin: 5px 0 0
                                        font-weight: 400

                                button.play-btn
                                    --bordercolor: var(--prime)
                                    --playbtncolor: #000
                                    cursor: pointer

                .parent-wrap
                    position: relative
                    width: 100%
                    max-width: 445px
                    margin: 0 auto
                    padding: 0 50px

                    @include respond-to(screen-675)
                        max-width: 100%
                        padding: 0 45px

                    @include respond-to(screen-540)
                        padding: 0 40px

                    .swiper-container-wrapper
                        width: 100%
                        overflow: hidden

                    .parents-tab-nav
                        width: 100%

                        .swiper-wrapper
                            display: flex
                            align-items: center

                        .swiper-slide
                            cursor: pointer
                            transition: all 0.3s ease
                            opacity: 1
                            transform: scale(0.85)

                            &.swiper-slide-active
                                opacity: 1
                                transform: scale(1)

                                img
                                    border: 3px solid #fff

                            img
                                width: 55px
                                height: 55px
                                object-fit: cover
                                border-radius: 50%
                                display: block
                                border: 2px solid transparent
                                transition: all 0.3s ease

                                @include respond-to(screen-540)
                                    width: 45px
                                    height: 45px

                    .swiper-group
                        position: absolute
                        left: 0
                        right: 0
                        top: 50%
                        transform: translateY(-50%)
                        display: flex
                        align-items: center
                        justify-content: space-between
                        z-index: 10
                        pointer-events: none

                        button
                            pointer-events: auto
                            background-color: #fff
                            width: 40px
                            height: 40px
                            border-radius: 50%
                            color: #333
                            display: flex
                            align-items: center
                            justify-content: center
                            border: none
                            cursor: pointer
                            transition: all 0.3s ease
                            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1)

                            @include respond-to(screen-540)
                                width: 35px
                                height: 35px

                            &:hover
                                transform: scale(1.1)
                                background: #667eea
                                color: #fff

                            svg
                                width: 12px
                                height: 24px

                        .parent-tabs-slider-prev
                            svg
                                transform: rotate(180deg)