@import '../_common'
p
  text-align: justify 
body
    position: relative
    overflow-x: hidden
    @include scrollbar($scrollwidth, #fff, #1BB6F0, 4px)

header
    position: fixed 
    top: 0
    right: 0
    bottom: 0
    left: 0
    z-index: 5
    transition: .5s ease
    height: var(--headerheight)
    @include after($prime)
    &::after
        bottom: auto
        height: 0
        z-index: -1
        transition: .5s ease
    @include respond-to(screen-991)
        height: 90px
    @include respond-to(screen-540)
        height: 80px
    
    .header-container
        height: 100%
        transition: 0.5s ease
        padding-bottom: 15px
        .upper-container
            height: 70%
            display: flex
            justify-content: space-between
            align-items: baseline
            padding: 12px var(--containerfluid)
            transition: .5s ease
            gap: 0rem
            @include respond-to(screen-1460)
               gap: 0rem

            @include respond-to(screen-540)
                padding: 15px 10px

            @include respond-to(screen-768)
                padding: 13px 12px
                gap: 0
                
            .colA, .colB, .colC
                height: 100%
                display: flex
            .colA
                // flex: 0 35%
                display: flex
                align-items: center
                // @include respond-to(screen-1024)
                //     flex: none
                @include respond-to(screen-991)
                    display: none
                >ul 
                    display: flex
                    align-items: center
                    justify-content: left
                    gap: 10px

                    li
                        a
                            transition: 0.5s ease
                            font-size: 16px
                            @include respond-to(screen-1280)
                              font-size: 11px
                            @include respond-to(screen-1024)
                              font-size: 10px
                            &:hover
                                color: var(--elementhover)
                            svg
                                margin: 0 7px 5px 0
            .colB
                // flex: 0 1 auto

                .logo
                    height: 100%
                    width: 100%
                    @include respond-to(screen-1536)
                        width: 150
                        height: 50px
                    @include respond-to(screen-675)
                        width: 120px
                        height: 40px
                    

                    img
                        width: 100%
                        height: 100%
                        // @include respond-to(screen-991)
                        //    width: 70px
                        //    height: 70px
                        // @include respond-to(screen-540)
                        //    width: 54px
                        //    height: 54px

            .colC
                // flex: 1
                display: flex
                justify-content: end
                // @include respond-to(screen-1536)
                //     flex: 1
                // @include respond-to(screen-1230)
                //     flex: 1 20%
                // @include respond-to(screen-1024)
                //     flex: none

                ul
                    display: flex
                    align-items: center
                    justify-content: center
                    gap: 15px
                    @include respond-to(screen-1440)
                       gap: 10px
                    @include respond-to(screen-991)
                       gap: 18px
                    @include respond-to(screen-675)
                       gap: 10px
                    
                    li
                        &.hasDropdown
                            position: relative
                            &::before
                                content: ""
                                background-image: url(../../icon/arrow-down-white.svg)
                                background-repeat: no-repeat
                                background-position-y: 50%
                                background-position-x: 92%
                                background-size: var(--arrowsize) auto
                                position: absolute
                                right: 7%
                                top: 9%
                                width: 20px
                                height: 20px
                                z-index: 3
                            &.group-sites
                                .dropdown-menu 
                                    min-width: 230px

                            &:hover
                                .dropdown-menu
                                    opacity: 1
                                    transform: scale3d(1, 1, 1)
                                &::before
                                    transform: rotate(180deg)
                                    transition: 0.5s ease
                            >a
                                padding: 6px 30px 6px 10px

                        &.hover-btn
                            >a
                                @include btn2 
                               
                                &:hover
                                    border: 1px solid #1BB6F0
                                @include respond-to(screen-540)
                                    font-size: 12px

                        &.hasDropdown
                               
                            >a
                                padding: 6px 30px 6px 10px
                                font-size: 16px
                                @include respond-to(screen-1280)
                                  font-size: 14px

                        &:last-child
                            padding-left: 20px
                            padding-top: 8px

                            @include respond-to(screen-540)
                                padding-left: 0
                        &.reg-btn
                            a 
                                transition: 0.5s ease
                                @include regularBtn(6px 15px)
                                @include respond-to(screen-1280)
                                    font-size: 14px
                          
                               
                                &:hover
                                    transition: 0.5s ease
                                    color: #fff
                                @include respond-to(screen-540)
                                    font-size: 14px
                        button
                            svg
                                width: 50px
                                height: 50px
                        .dropdown-menu
                            --triangle: 10px
                            position: absolute
                            top: calc(100% + var(--triangle))
                            left: 50%
                            translate: -50% 0
                            transform: perspective(2000px) translate3d(0px, 0px, 50px) rotateX(-90deg) scale3d(0.86, 0.75, 1) translateY(50px)
                            transform-origin: top
                            transition: .4s ease
                            opacity: 0
                            width: 100%
                            min-width: 185px
                            z-index: 2
                            &::before
                                content: ''
                                display: block
                                position: absolute
                                bottom: calc(100% - (var(--triangle) / 2))
                                left: 50%
                                translate: -50% 0
                                width: var(--triangle)
                                height: var(--triangle)
                                background: #fff
                                transform: rotate(45deg)
                                z-index: -1      
                            ul
                                display: block
                                background: #fff
                                padding: 12px 10px
                                box-shadow: rgba(0, 0, 0, 0.01) -2px 6px 2px 3px
                                border-radius: 5px
                                text-align: left
                                white-space: nowrap 
                                li
                                    padding: 0
                                    display: block
                                    color: #000
                                    &:not(:last-child)
                                        margin-right: 0
                                        margin-bottom: 2px
                                    >a
                                        font-size: 13px
                                        display: block
                                        color: $black
                                        padding: 5px
                                        border-radius: 5px
                                        overflow: hidden
                                        @include hover
                                        &:hover
                                            color: #fff

        .lower-container
            ul
                display: flex
                align-items: center
                justify-content: center
                gap: 40px
                padding: 5px
                font-size: 16px
                @include respond-to(screen-1024)
                   font-size: 14px
                   gap: 30px
                @include respond-to(screen-991)
                    display: none
                li 
                    &.hasDropdown
                        position: relative
                        &:hover
                            .dropdown-menu
                                opacity: 1
                                transform: scale3d(1, 1, 1)
                    .dropdown-menu
                        --triangle: 10px
                        position: absolute  
                        top: calc(100% + var(--triangle))
                        left: 50%
                        translate: -50% 0
                        transform: perspective(2000px) translate3d(0px, 0px, 50px) rotateX(-90deg) scale3d(0.86, 0.75, 1) translateY(50px)
                        transform-origin: top
                        transition: .4s ease
                        opacity: 0
                        width: 100%
                        min-width: 220px
                        &::before
                            content: ''
                            display: block
                            position: absolute
                            bottom: calc(100% - (var(--triangle) / 2))
                            left: 50%
                            translate: -50% 0
                            width: var(--triangle)
                            height: var(--triangle)
                            background: #fff
                            transform: rotate(45deg)
                            z-index: -1      
                        ul
                            display: block
                            background: #fff
                            padding: 12px 10px
                            box-shadow: rgba(0, 0, 0, 0.01) -2px 6px 2px 3px
                            border-radius: 5px
                            text-align: left
                            white-space: nowrap 
                            li
                                padding: 0
                                display: block
                                color: #000
                                &:not(:last-child)
                                    margin-right: 0
                                    margin-bottom: 2px
                                a
                                    font-size: 13px
                                    display: block
                                    color: $black
                                    padding: 5px
                                    border-radius: 5px
                                    overflow: hidden
                                    @include hover
                                    &:hover
                                        color: #fff
                    a 
                        transition: 0.5s ease
                        &:hover, &:active
                            color: var(--elementhover)

header
    &.header-fixed
        @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

    &.header-fixed,&.header-fit
        transition: .5s ease
        height: var(--headerfixed)
        @include respond-to(screen-768)
            height:  100px
        @include respond-to(screen-540)
            height: 65px
        &::after
            height: 100%
    &.header-fit
        transition: 0s
        &::after 
            transition: none
        .header-container
            .colA
                .logo
                    transition: none !important
    &.header-shadow
        box-shadow: 0px 2px 8px 0px #63636333
    

.model.ham-pop
    right: 0
    max-width: 480px
    background: #fff
    transform: translateX(100%)
    transition: .5s ease
    z-index: 9999999
    &.is-open
        transform: translateX(0%)
    .close
        top: 30px
        right: 25px
        path
            stroke: $text !important
            stroke-width: 2 !important
    .model-body
        padding: 0px 40px 30px
        margin-top: 76px
        height: 100%
        overflow-y: auto
        display: flex
        flex-direction: column
        @include scrollbar(6px,$white,#5e5e5e,8px)
        @include respond-to(540)
            padding: 0px 25px 30px
        .ico
            max-width: 70px
            margin-bottom: 55px
            line-height: 0
            img,svg
                width: 100%
                height: auto
        .nav-list
            // flex: 1
            >li
                &:not(:last-child)
                    margin-bottom: 15px
                    @include respond-to(screen-1366)
                        margin-bottom: 7px
                    @include respond-to(screen-675)
                        margin-bottom: 2px
                    
                &.desktop-non
                    display: none
                    @include respond-to(screen-991)
                        display: block
                &.hasDropdown
                    position: relative

                    .plu-ico
                        position: absolute
                        right: 0
                        top: 4px
                        --sizeplu: 20px
                        height: var(--sizeplu)
                        width: var(--sizeplu)

                        @include respond-to(screen-675)
                            --sizeplu: 14px

                        &::before
                            content: ""
                            position: absolute
                            top: 50%
                            translate: 0 -50%
                            left: 0
                            right: 0
                            height: 2px
                            width: 100%
                            background: var(--prime)
                            transition: 0.5s ease
                            transform: rotate(90deg) // vertical line (for +)

                        &::after
                            content: ""
                            position: absolute
                            top: 50%
                            translate: 0 -50%
                            left: 0
                            right: 0
                            height: 2px
                            width: 100%
                            background: var(--prime)
                            transition: 0.5s ease
                            // horizontal line (always visible)

                        &.active
                            &::before
                                transform: rotate(0deg) // align with horizontal line
                                opacity: 0 // hides the vertical bar → makes it –
                    .dropdown-menu-ham
                        display: none
                        padding-top: 15px
                        ul
                            border-top: 1px solid #dadada   
                            border-bottom: 1px solid #dadada   
                            max-height: 100%
                            // overflow-y: auto
                            // @include scrollbar(4px, #fff, #1BB6F0, 4px)
                            li
                                padding: 4px 0
                                a
                                    font-size: 15px
                                    color: #000
                                    &:hover
                                        color: $prime
                >a
                    font-size: 20px
                    line-height: 1.06
                    color: #000
                    display: inline-block
                    @include font(500)
                    @include respond-to(screen-1366)
                        font-size: 16px
                    @include respond-to(screen-991)
                        font-size: 14px
                    &:hover
                        color: $prime
        .bottom-list
            border-top: 1px solid #ccc
            margin-top: 2rem
            padding-top: 10px
            display: flex
            align-items: center
            gap: 1rem
            .social-icons
                a
                    display: inline-flex
                    vertical-align: middle
                    align-items: center
                    justify-content: center
                    height: 40px
                    width: 40px
                    border-radius: 50%
                    line-height: 0
                    overflow: hidden
                    @include before($prime)
                    color: $text
                    &::before
                        border-radius: 50%
                        transform: scale(1.5)
                        z-index: -1
                        opacity: 0
                        transition: .2s ease
                    &:not(:last-child)
                        margin-right: 4px
                    svg
                        width: 24px
                        height: 24px
                        path
                            transition: none
                            &[stroke],&[fill="none"]
                                stroke: currentColor
                            &[fill]
                                fill: currentColor
                    &:hover
                        color: #dadada
                        &::before
                            transition: .5s ease
                            opacity: 1
                            transform: scale(1)

.model.enquire-pop
    right: 0
    transform: translateX(100%)
    transition: .5s ease
    background: $white
    z-index: 10
    &.is-open
        transform: translateX(0%)
    button.close
        top: 25px
        right: 25px
    .model-body
        padding: 45px 35px 30px 
        height: 100%
        overflow-y: auto
        @include scrollbar(3px,$white,#5e5e5e,8px)
        @include respond-to(675)
            padding: 70px 20px 30px
        .title
            text-align: center
            margin-bottom: 2rem
            .img
                width: 100%
                max-width: 110px
                margin: 0 auto

            h4
                font-size: 36px
                color: $black
                font-family: $Averta
                @include font(500)
                text-transform: capitalize
            p
                color: $black
                margin-top: 15px
                font-size: 16px
                line-height: 20px
                max-width: 268px
                margin-left: auto
                margin-right: auto
                text-align: center
                letter-spacing: 0
                opacity: .7
                @include respond-to(675)
                    font-size: 14px
                    max-width: 300px
        .form
            --gaptb: 15px
            gap: 20px 0
            .sbmt-grp
                width: 100%
                .theme-btn
                    padding: 8px 16px
                    @include hover
                    @include respond-to(screen-540)
                        padding: 6px 10px
                        font-size: 12px

                    &::after
                        background-color: #4459C5
                        border-radius: 25px
                    &::before
                        border-radius: 25px

.model.video-pop
    left: 0
    right: 0
    bottom: -100%
    background: #0000007a
    z-index: 9
    max-width: 100%
    transform: translateY(100%)
    transition: .5s ease
    &.is-open
        transform: translateY(0%)
        bottom: 0
    .close-video
        position: absolute
        bottom: calc(100% + 20px)
        top: auto
        right: -40px
        height: 50px
        width: 50px
        border-radius: 50%
        background: $prime
        display: flex
        align-items: center
        justify-content: center
        transition: .5s ease
        @include respond-to(screen-675)
            right: 8px
            height: 30px
            width: 30px
        &:hover
            background: $prime
        svg
            height: 35%
            width: 35%
        path
            stroke-width: 2
            stroke: $white
    .model-body
        position: absolute
        top: 50%
        left: 50%
        transform: translate(-50%, -50%)  // Changed from 'translate' to 'transform'
        width: 100%
        max-width: 50%
        @include respond-to(screen-675)
            max-width: 95%
        iframe
            width: 100%
            aspect-ratio: 1.9
            border: 2px solid $white
            background: $white


.model.admissioneq-pop
    right: 0
    transform: translateX(100%)
    transition: .5s ease
    background: $white
    z-index: 10
    
    &.is-open
        transform: translateX(0%)
    
    button.close
        top: 25px
        right: 25px
    
    .model-body
        padding: 60px 35px 30px 
        height: 100%
        overflow-y: auto
        @include scrollbar(3px,$white,#5e5e5e,8px)
        
        @include respond-to(675)
            padding: 70px 20px 30px
        
        .title
            text-align: center
            margin-bottom: 2rem
            
            h4
                font-size: 24px
                color: $black
                font-family: $Averta
                @include font(500)
                text-transform: none
                line-height: 1
                
                @include respond-to(675)
                    font-size: 24px
            
            p
                color: $black
                margin-top: 10px
                font-size: 14px
                line-height: 20px
                max-width: 317px
                margin-left: auto
                margin-right: auto
                text-align: center
                
                @include respond-to(screen-768)
                    font-size: 14px
                    max-width: 300px
        
        .form
            display: grid
            grid-template-columns: repeat(2, 1fr)
            gap: 15px
            --gaptb: 15px
            --borderbefore: var(--black)
            
            .form-group
                position: relative
                @include before(var(--borderbefore))
                
                &::before
                    height: var(--borderwidth)
                    top: unset
                    bottom: 0
                
                input, textarea
                    border-bottom: none
                
                input[type="date"]
                    position: relative
                    min-height: 40px
                    
                    &::-webkit-datetime-edit
                        opacity: 0
                    
                    &::-webkit-datetime-edit-fields-wrapper
                        opacity: 0
                    
                    &::-webkit-datetime-edit-text
                        opacity: 0
                        padding: 0
                    
                    &::-webkit-datetime-edit-month-field
                        opacity: 0
                    
                    &::-webkit-datetime-edit-day-field
                        opacity: 0
                    
                    &::-webkit-datetime-edit-year-field
                        opacity: 0
                    
                    &::-webkit-inner-spin-button,
                    &::-webkit-clear-button
                        display: none
                    
                    // Calendar icon
                    &::-webkit-calendar-picker-indicator
                        position: absolute
                        right: 5px
                        top: 50%
                        transform: translateY(-50%)
                        cursor: pointer
                        opacity: 0.5
                        z-index: 2
                        
                        &:hover
                            opacity: 1
                    
                    // Show date ONLY when valid date is selected
                    &:valid,
                    &:focus:valid
                        &::-webkit-datetime-edit
                            opacity: 1
                        
                        &::-webkit-datetime-edit-fields-wrapper
                            opacity: 1
                        
                        &::-webkit-datetime-edit-text
                            opacity: 1
                            color: $black
                        
                        &::-webkit-datetime-edit-month-field
                            opacity: 1
                            color: $black
                        
                        &::-webkit-datetime-edit-day-field
                            opacity: 1
                            color: $black
                        
                        &::-webkit-datetime-edit-year-field
                            opacity: 1
                            color: $black
                    
                    // Firefox support
                    &::-moz-placeholder
                        opacity: 0
                    
                    // Label positioning
                    ~ label
                        position: absolute
                        top: 50%
                        left: 0
                        transform: translateY(-50%)
                        color: #666
                        font-size: 14px
                        transition: all 0.3s ease
                        pointer-events: none
                        background: transparent
                        z-index: 1
                    
                    // Move label up when focused or has valid date
                    &:focus ~ label,
                    &:valid ~ label
                        top: -10px
                        transform: translateY(0)
                        color: #000
                        font-size: 12px
                        background: $white
                        padding: 0 4px
                        width: 100%
                
                // General input styles
                input:not([type="date"])
                    &:focus ~ label,
                    &:not(:placeholder-shown) ~ label
                        top: -2px
                        color: #000
                        font-size: 12px
                        transform: translateY(0)
                        background: $white
                        padding: 0 4px
                        width: 100% 
                
                textarea
                    &:focus ~ label,
                    &:not(:placeholder-shown) ~ label
                        top: -10px
                        color: #000
                        font-size: 12px
                        transform: translateY(0)
                        background: $white
                        padding: 0 4px
                        width: 100%
                
                &.w-full
                    grid-column: span 2
                
                select
                    ~ label
                        top: -10px
                        color: #000
                        font-size: 12px
                        background: $white
                        padding: 0 4px
                
                .custom-select
                    &::before
                        background-image: url(/assets/icon/arrow-down.svg)
                        background-size: 65% auto
        
        .sbmt-grp
            width: 100%
            padding-top: 20px
            
            a
                text-align: center
                text-transform: capitalize
                padding: 10px 30px
                
                &:hover
                    background: #1BB6F0 
                    color: #fff


.model.result-pop
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: -100%
    background: #0000007a
    z-index: 9
    max-width: 100%
    transform: translateY(100%)
    transition: .5s ease

    @include respond-to(screen-420)
        bottom: -45px

    &.is-open
        transform: translateY(0%)
        bottom: 0

    .close-profile
        position: absolute
        bottom: calc(100% + 50px)
        right: -10px
        height: 50px
        width: 50px
        border-radius: 50%
        background: $prime
        display: flex
        align-items: center
        justify-content: center
        transition: .5s ease
        z-index: 10

        @include respond-to(screen-675)
            right: 0
        @include respond-to(screen-540)
            height: 30px
            width: 30px
            bottom: calc(100% + 30px)

        &:hover
            background: $prime

        svg
            height: 35%
            width: 35%

        path
            stroke-width: 2
            stroke: $white

    .model-body
        position: absolute
        top: 50%
        left: 50%
        transform: translate(-50%, -50%)
        width: 100%
        max-width: 50%
        background: $white
        border-radius: 8px
        padding: 30px
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15)

        @include respond-to(screen-1024)
            max-width: 70%

        @include respond-to(screen-768)
            max-width: 95%
            padding: 20px
        @include respond-to(screen-540)
            max-width: 75%
        @include respond-to(screen-420)
            max-width: 95%

        .result-grid
            display: flex
            align-items: center
            gap: 20px
            position: relative

            @include respond-to(screen-540)
                flex-direction: column
                align-items: flex-start
                gap: 15px

            .result-content
                flex: 1
                min-width: 300px

                @include respond-to(screen-768)
                    flex: 0 50%

                @include respond-to(screen-540)
                    flex: 1
                    min-width: auto
                    width: 100%
                    text-align: center
                h5
                    margin-bottom: 12px
                    color: #000

                p
                    margin-bottom: 4px

            .result-swiper-container
                flex: 1
                min-width: 300px
                position: relative

                @include respond-to(screen-768)
                    flex: 0 50%

                @include respond-to(screen-540)
                    flex: 1
                    min-width: auto
                    width: 100%

                .resultX-slider,
                .resultXII-slider
                    width: 100%
                    position: relative

                    .swiper-slide
                        img
                            width: 100%
                            height: auto
                            object-fit: contain
                            border-radius: 8px
                            @include respond-to(screen-540)
                                width: 100%
                                margin: 0 auto
                .swiper-group
                    position: absolute
                    right: -20px
                    top: 50%
                    transform: translateY(-50%)
                    z-index: 10
                    display: flex
                    justify-content: center
                    width: auto

                    @include respond-to(768)
                        right: 0
                        top: auto
                        bottom: -60px
                        transform: none
                        justify-content: flex-end

                    .resultX-next
                        background: #fff
                        padding: 8px
                        border-radius: 50%
                        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,rgba(0, 0, 0, 0.3) 0px 8px 16px -8px
                        width: 45px
                        height: 45px
                        display: flex
                        align-items: center
                        justify-content: center
                        transition: all 0.3s ease

                        &:hover
                            transform: scale(1.1)

                        svg
                            width: 20px
                            height: 20px
.ad-pop 
    left: 0
    right: 0
    bottom: -100%
    max-width: 100%
    background: none
    transform: translateY(100%)
    transition: 0.5s ease
    pointer-events: none
    &.is-open
        transform: translateY(0%)
        bottom: 0
        
    .model-body
        height: 100%
        figure
            line-height: 0
            position: relative
            top: 50%
            translate: 0 -50%
            max-width: 550px
            margin-left: auto
            margin-right: auto
            pointer-events: all
            @include respond-to(screen-1366)
               max-width: 400px

            @include respond-to(screen-540)
                max-width: 280px
        img
            width: 100%
            height: auto 
            border-radius: 15px
        .close
            position: absolute
            color: var(--white)
            top: -35px !important
            right: -36px !important
            line-height: 0
        svg
            path
                &[stroke],&[fill="none"]
                    stroke: currentcolor
                &[fill]
                    fill: currentcolor


.footer-strip
    position: fixed
    bottom: 0
    left: 0
    right: 0
    z-index: 40
    background: var(--prime)
    display: none

    @include respond-to(screen-991)
        display: block
    ul
        @include flex
        li
            flex: 1
            &:not(:last-child)
                border-right: 1px solid rgb(256 256 256 / 10%)
            a
                display: flex
                flex-direction: column
                align-items: center
                padding: 10px
                gap: 5px
                color: $white
                font-size: 14px
                height: var(--footerstrip)
                text-transform: uppercase
                font-weight: 600

                svg
                    width: 20px
                    height: 20px
                    &[stroke]
                        stroke: $white
                    &[fill]
                        fill: $white
                    path
                        &[stroke]
                            stroke: $white
                        &[fill]
                            fill: $white