@import './_var'

*,
*::before,
*::after
    padding: 0
    margin: 0
    list-style: none
    box-sizing: border-box

$scrollwidth: 8px

:root
    --headerheight: 150px
    --headerpadding: 15px
    --headerfixed: 100px
    --borderwidth: 1px
    --headerstripfixed: 0px
    --footerstrip: 66px
    --sectionpadding: 50px 0 60px
    --primary: #fff
    --secondary: #000
    --green: #C4D03C
    --prime: #4459C5
    --yellow: #fea718
    --prime-dark: #040635
    --prime-light: #8497FB
    --elementhover: #1BB6F0
    --white: #fff
    --black: #000
    --text: #666
    --triangle: 10px
    --triangle2: 20px
    --gradient: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 54%)
    --gradient2: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 54%)
    --container: 1280px
    --containerfluid: 5rem

    // @include media(1280)
    //     --container: 1180px
    //     --containerfluid: 3rem

    // @include media(1024)
    //     --container: 95%
    //     --containerfluid: 3rem

    // @include media(991)
    //     --container: 90%

    // @include media(768)
    //     --container: 90%
    //     --containerfluid: 2.5rem

    // @include media(640)
    //     --container: 92%
    //     --containerfluid: 2rem


    // @include media(540)
    //     --container: 92%
    //     --containerfluid: 1rem

body
    &.overflow-hidden
        overflow: hidden
        margin-right: $scrollwidth
        @include respond-to(screen-991)
            margin-right: 0
        header
            width: calc(100% - #{$scrollwidth})
            @include respond-to(screen-991)
                width: 100%
main
//   overflow-x: hidden

body, html
    font-size: 16px
    line-height: 1.5
    font-family: $Averta
    @include font(400)

body
    &.hidden
        overflow: hidden
        margin-right: $scrollwidth

a[href]
    text-decoration: none
    cursor: pointer

a
    transition: 0.3s ease

.on-mobile
    display: block
    @include respond-to(screen-991)
        display: none

.on-desktop
    display: none
    @include respond-to(screen-991)
        display: block
        margin-bottom: 15px

.container
    max-width: 90%
    width: 100%
    margin: 0 auto
    @include respond-to(screen-540)
        max-width: 98%

    @include respond-to(screen-767)
        padding: 0 15px

.container-fluid
    padding: 0 2rem
    display: block
    margin: 0 auto
    @include respond-to(screen-1152)
        padding: 0 1rem
    @include respond-to(screen-991)
        padding: 0 15px

h1, h2, h3, h4, h5, h6
    font-weight: normal

p,span , ul li , strong , b
    font-family: $Averta-regular !important


h1, h2, h3
    font-family: $Averta-Semibold !important

h4, h5
    @include font(600)

h6
    @include font(500)

h1
    font-size: 64px
    line-height: 1

h2
    font-size: 48px
    line-height: 1.25
    @include respond-to(screen-1366)
        font-size: 34px
    @include respond-to(screen-540)
        font-size: 32px

h3
    font-size: 36px
    line-height: 1.25
    @include respond-to(screen-1024)
        font-size: 32px
    @include respond-to(screen-767)
        font-size: 28px
    @include respond-to(screen-520)
        font-size: 26px
    @include respond-to(screen-365)
        font-size: 22px



.sub-heading
    h2
        font-size: 36px
        line-height: 1.25
        @include respond-to(screen-1024)
            font-size: 32px
        @include respond-to(screen-540)
            font-size: 26px

    p
        text-align: center

h4
    font-size: 24px
    line-height: 30px
    @include respond-to(screen-1024)
        font-size: 20px
    @include respond-to(screen-768)
        font-size: 18px
        line-height: 24px

h5
    font-size: 20px
    line-height: 24px
    @include respond-to(screen-1300)
        font-size: 18px
        line-height: 22px

h6
    font-size: 18px
    line-height: 28px
    @include respond-to(screen-1024)
        font-size: 16px
        line-height: 22px

p
    color: var(--text)

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


a
    color: #fff

.text-center
    text-align: center

.grid
    display: grid

.flex
    display: flex
    flex-wrap: wrap

img
    max-width: 100%
    vertical-align: middle

svg
    vertical-align: middle
    transition: 0.3s ease

.invert-img
    transform: scaleX(-1)

input, button, select
    font-family: inherit
    font-size: inherit

input
    border-radius: 0
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button
        -webkit-appearance: none
        margin: 0

input[type=number]
    -moz-appearance: textfield

video
    pointer-events: none
    user-select: none

.owl-prev
    img
        transform: scaleX(-1)

button
    border: none
    background: none
    appearance: none
    cursor: pointer

.item-md
    position: relative
    figure
        overflow: hidden
        line-height: 0
        img
            transition: .5s ease
    &::before, &::after
        position: absolute
        content: ''
        top: 0
        left: 0
        bottom: 0
        right: 0
        user-select: none
        pointer-events: none
        z-index: 1
    &::after
        content: none
    figcaption
        position: absolute
        bottom: 0
        left: 0
        right: 0
        z-index: 1
    .link-md
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        z-index: 2

.model
    position: fixed
    top: 0
    bottom: 0
    z-index: 7
    width: 100%
    max-width: 435px
    .close
        position: absolute
        top: 0
        right: 0

.overlay
    position: fixed
    left: 0
    right: 0
    bottom: 0
    top: 0
    z-index: 6
    opacity: 0
    background: rgba(0, 0, 0, 0.6)
    transform: translateY(100%)
    transition: opacity 1s ease
    cursor: pointer
    @include respond-to(screen-991)
        z-index: 2
    @include respond-to(screen-675)
        display: none
    &.is-open
        opacity: 1
        transform: translateY(0%)

.custom-select
    max-width: 100%
    cursor: pointer
    display: block
    font-family: inherit
    height: var(--selectheight)
    position: relative
    transition: all .2s ease-in-out
    user-select: none
    white-space: nowrap
    padding: 0 var(--paddingleftright)
    --arrow: 20px
    --arrowspace: 8px
    @include respond-to(screen-540)
        --arrow: 18px
    &.has-icon
        --iconsize: 24px
        --iconurl: url(../../icon/calendar.svg)
        --iconspace: 10px
        @include respond-to(screen-540)
            --iconsize: 18px
        @include after($background: none)
        &::after
            left: 5px
            width: var(--iconsize)
            background-image: var(--iconurl)
            background-repeat: no-repeat
            background-size: 100% auto
            background-position: 0 50%
        .current
            width: calc(100% - var(--arrow) - var(--iconsize) - var(--arrowspace) - var(--iconspace))
            padding-left: calc(var(--iconsize) + var(--iconspace))
            padding-right: 3px
    &.has-icon2
        --iconurl: url(../../icon/trophy.svg)
        --iconsize: 24px
        --iconspace: 10px
        @include after($background: none)
        &::after
            left: 5px
            width: var(--iconsize)
            background-image: var(--iconurl)
            background-repeat: no-repeat
            background-size: 100% auto
            background-position: 0 50%
        .current
            width: calc(100% - var(--arrow) - var(--iconsize) - var(--arrowspace) - var(--iconspace))
            padding-left: calc(var(--iconsize) + var(--iconspace))
    &::before
        content: ''
        position: absolute
        top: 35%
        right: 0
        bottom: 0
        width: var(--arrow)
        background-image: url(../../icon/arrow-down-white.svg)
        background-position: calc(100% - var(--paddingleftright)) 50%
        background-repeat: no-repeat
        background-size: 100% auto
    .current
        display: block
        width: calc(100% - var(--arrow) - var(--arrowspace))
        overflow: hidden
        text-overflow: ellipsis
        line-height: var(--inputsize)
        color: #666
        font-size: 14px
        font-weight: var(--font)
        &.selected
            color: var(--color)
    .list
        text-align: left
        background-color: #fff
        box-shadow: rgba(0, 0, 0, .16) 0px 1px 4px
        overflow: hidden
        position: absolute
        top: 100%
        left: 0
        right: 0
        opacity: 0
        transform-origin: 50% 0
        z-index: 7
        max-height: 180px
        overflow-y: auto
        border-bottom-left-radius: 10px
        border-bottom-right-radius: 10px
        @include scrollbar(4px, none, $text, 5px)
        pointer-events: none
        li
            display: block
            line-height: 1.2
            padding: 8px 16px
            white-space: break-spaces
            font-size: 14px
            @include respond-to(screen-540)
                padding: 8px
            &.selected
                background: #1BB6F0
                color: #fff
                &:hover
                    background: #1BB6F0
                    color: $white
            &:hover
                background: #e2e2e2
    &.open
        .list
            opacity: 1
            pointer-events: auto
            transform: scale(1) translateY(0)

.form
    @include flex
    justify-content: space-between
    gap: 35px 0
    --theme: #000
    --label: rgba(256, 256, 256, 0.6)
    --color: #000
    --font: 400
    --borderbefore: rgba(256, 256, 256, 0.6)
    --borderafter: #fff
    --sectionbackground: #fff
    @include respond-to(screen-675)
        gap: 25px 0
    .form-group
        --inputsize: 42px
        --lrgap: 15px
        --tbgap: 20px
        position: relative
        flex: 0 1 100%
        --selectheight: var(--inputsize)
        &.flex50
            flex: 0 1 48%
            @include respond-to(screen-675)
                flex: 0 1 100%
        label
            font-weight: var(--font)
            position: absolute
            top: 0
            left: 0
            color: #666
            line-height: calc(var(--inputsize) - 1px)
            transition: 0.3s ease
            user-select: none
            pointer-events: none
        input, textarea
            height: var(--inputsize)
            border: none
            border-bottom: 1px solid #666
            resize: none
            border-radius: 0px !important
            width: 100%
            background: none
            color: var(--color)
            font-size: inherit
            font-family: inherit
            &.valid
                border-color: var(--border)
            &:focus, &.valid
                outline: none
                & ~ label
                    line-height: 0px
                    font-size: 14px
                    color: $black
        textarea
            min-height: var(--inputsize)
            padding-top: 10px
            line-height: 1.2

        select
            &:focus
                outline: none
            & ~ label
                position: absolute
                top: 100%
                left: 0%
                color: #fff
                translate: 0 0
                font-size: 16px
                opacity: 0
                transition: .6s ease
            &.valid
                color: var(--color)
                & ~ label
                    opacity: 1
                    line-height: 1.2

        &.message-bx
            textarea
                min-height: 86px
                height: 100%
                padding-top: 15px
            label
                top: 12px
                translate: 0 0
            textarea
                @include scrollbar(2px, none, $white, 15px)
                padding-right: 15px
                &:focus, &.valid
                    & ~ label
                        top: 0
                        font-size: 14px
                        translate: 0 -50%
        &.captcha-box
            --size: 120px
            input
                width: calc(100% - var(--size))
                &:focus, &.valid
                    ~ .captcha-question
                        border-color: var(--border)
            .captcha-question
                position: absolute
                right: 0
                top: 0
                bottom: 0
                height: var(--inputsize)
                width: var(--size)
                @include font(600)
                border-bottom: 1px solid var(--theme)
                text-align: center
                color: var(--theme)
                display: flex
                align-items: center
                justify-content: flex-end
    .sbmt-btn
        @include btn($padding: 50px)
        @include font(600)
        margin-left: auto
        margin-right: auto

.banner
    position: relative
    @include before
    &::before
        background: linear-gradient(0deg, rgba(0, 0, 0, 0) 47.79%, rgb(0 0 0 / 42%) 88.57%), linear-gradient(180deg, rgba(0, 0, 0, 0) 46.07%, rgb(0 0 0 / 41%) 89.64%) !important
        z-index: 1
    .bg
        line-height: 0
        video, img
            width: 100%
            height: 100%
            object-fit: cover
            object-position: center
    .banner-wrapper
        position: absolute
        bottom: 0
        left: 0
        right: 0
        z-index: 2

.play-btn
    --btnsize: 42px
    --border: 1px
    --bordercolor: var(--white)
    --playbtncolor: var(--prime)
    height: var(--btnsize)
    width: var(--btnsize)
    border-radius: 50%
    border: var(--border) solid var(--bordercolor)
    position: relative
    background: none
    @include respond-to(screen-1024)
        --btnsize: 42px
    @include respond-to(screen-675)
        --btnsize: 42px
        --border: 1px
    &::before
        width: 100%
        height: 100%
        top: 50%
        right: 0
        bottom: 0
        left: 50%
        position: absolute
        content: ""
        transform: translateX(-50%) translateY(-50%)
        background: var(--bordercolor)
        border-radius: 50%
        display: block
        animation: pulse-border 1500ms ease-out infinite
    &::after
        content: ''
        position: absolute
        top: 50%
        left: 50%
        translate: -50% -50%
        width: 0
        height: 0
        border-top: calc(var(--btnsize) / 8) solid transparent
        border-bottom: calc(var(--btnsize) / 8) solid transparent
        border-left: calc(var(--btnsize) / 5.6) solid var(--white)

@keyframes pulse-border
    0%
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1)
        opacity: 0.5
    100%
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5)
        opacity: 0

.item
    .play-btn
        &::after
            border-left: calc(var(--btnsize) / 5.6) solid var(--prime)

.blue
    background: #1BB6F0

.yellow
    background: #FBC740

.btn
    background: #fff
    border-radius: 25px
    font-size: 14px
    line-height: 24px
    font-weight: 500
    padding: 6px 15px

.btn2
    background: transparent
    padding: 6px 10px
    border: 1px solid #fff
    color: #fff
    border-radius: 25px

.theme-btn
    padding: 10px 20px
    color: #fff
    font-size: 16px
    line-height: 22px
    font-weight: 500
    border-radius: 25px
    @include respond-to(screen-540)
        font-size: 16px
        padding: 7px 16px

.whiteBtn
    background: $white
    color: $black
    transition: 0.5s ease
    &:hover
        background-color: #FBC740

.yellowBtn
    background: #1BB6F0
    color: #fff
    transition: 0.5s ease
    &:hover
        background-color: #0381af

.tab-nav
    cursor: default
    [data-tab]
        cursor: pointer
        caret-color: transparent

.tab-nav-content
    position: relative
    .tabs
        &:not(.active)
            position: absolute
            top: 0
            left: 0
            right: 0
            bottom: 0
            pointer-events: none
            user-select: none
            opacity: 0
            height: 0
            overflow: hidden
            display: none

.svg path[fill]
    fill: currentColor

@keyframes fadeInUp
    from
        opacity: 0
        transform: translateY(20px)
    to
        opacity: 1
        transform: translateY(0)

.btn-hovleft
    &:hover
        svg
            transform: translateX(-3px)

.btn-hovright
    &:hover
        svg
            transform: translateX(3px)

.ahov
    &:hover
        color: var(--prime) !important

.aWhover
    &:hover
        color: #fff !important
        padding-left: 5px

.website-content
    width: 65%
    margin: 0 auto
    padding-top: 50px
    @include respond-to(screen-768)
        width: 85%

    *
        font-family: $Averta
        letter-spacing: 0px
        font-weight: normal
    > :first-child
        margin-top: 0 !important

    h1
        font-size: 32px
        margin-bottom: 45px
        text-align: center
        @include respond-to(screen-675)
            font-size: 28px
            margin-bottom: 25px
    h2
        font-size: 30px
        @include respond-to(screen-991)
            font-size: 30px
        @include respond-to(screen-675)
            font-size: 22px
    h3, h4
        font-size: 24px
        line-height: 1.21
        text-transform: none
        font-weight: 600
        @include respond-to(screen-675)
            font-size: 22px
            line-height: 1.2
    h4
        font-size: 22px
        @include respond-to(screen-675)
            font-size: 20px
    h5
        font-size: 20px
        @include respond-to(screen-675)
            font-size: 18px
    h6
        font-size: 18px
    h2, h3, h4
        margin: 40px 0 18px
    h5, h6
        margin: 28px 0 18px
    p, li
        color: $text
    a
        color: $black
        &:hover
            text-decoration: underline
    p, ul
        margin-bottom: 20px
    ul
        li
            position: relative
            padding-left: 28px
            @include respond-to(screen-675)
                padding-left: 20px
            &:not(:last-child)
                margin-bottom: 6px
            &::before
                content: ''
                position: absolute
                top: 8px
                left: 0
                width: 10px
                aspect-ratio: 1
                border-radius: 50%
                background: var(--primary)

.privacy-secA
    margin-top: calc(var(--headerfixed) + 10px)
    padding: 3rem 0

p
    line-height: 1.5
    @include respond-to(screen-520)
        font-size: 14px
        line-height: 1.5

// .swiper-button-lock
//     display: none !important

.common-wrapper
    .heading
        padding: 40px 0 30px
        display: flex
        justify-content: space-between

        .swiper-group
            display: flex
            justify-content: space-between
            gap: 10px

            button
                width: 40px
                height: 40px
                border-radius: 50%
                border: 1px solid #000
                display: flex
                justify-content: center
                align-items: center

                svg
                    display: block

            .common-grallery-prev
                transform: rotate(180deg)

    .common-slider-slider
        .swiper-wrapper
            width: 0 !important
            img
                border-radius: 10px
                height: 250px
                width: 100%
                object-fit: cover

.wrapper
    --border-radius: 90px
    display: none
    justify-content: flex-start
    align-items: center
    position: relative
    padding: 0 30px
    margin: 4rem 0 0
    border-radius: var(--border-radius)
    @include respond-to(screen-1300)
        margin: 3rem 0 0
    @include respond-to(screen-768)
        justify-content: center

    input[type='checkbox']
        position: absolute
        width: 100%
        height: 100%
        opacity: 0
        z-index: 5
        cursor: pointer
        left: 0
        top: 0

        &:checked ~ .tooltip
            width: 145px
            height: 54px
            animation: stretch-animation 0.6s ease-out forwards
            top: -80px
            opacity: 1

    .share-toggle
        display: block

        svg
            width: 45px
            height: 45px

            path
                fill: var(--white)
                stroke: var(--white)

    .tooltip
        width: 90px
        height: 75px
        border-radius: 70px
        position: absolute
        background: #fff
        z-index: 2
        padding: 0 15px
        box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05)
        opacity: 0
        top: 0
        display: flex
        justify-content: space-around
        align-items: center
        transition: opacity 0.15s ease-in, top 0.15s ease-in, width 0.15s ease-in
        left: 0
        @include respond-to(screen-768)
            left: 30%

        a
            display: flex
            align-items: center
            justify-content: center
            color: var(--text)

            svg
                width: 24px
                height: 26px

                path
                    fill: #333333

        .arrow
            content: ''
            width: 20px
            height: 20px
            background: #fff
            border-radius: 3px
            position: absolute
            left: 50%
            margin-left: -10px
            bottom: -8px
            transform: rotate(45deg)
            z-index: 0

@keyframes stretch-animation
    0%
        transform: scale(1, 1)
    10%
        transform: scale(1.1, 0.9)
    30%
        transform: scale(0.9, 1.1)
    50%
        transform: scale(1.05, 0.95)
    100%
        transform: scale(1, 1)

.loadmore
    display: flex
    justify-content: center
    align-items: center
    flex-direction: column
    gap: 10px
    margin: 10px 0 45px
    @include respond-to(screen-540)
        margin: 10px 0 35px
        gap: 6px

    img
        width: 40px
        transition: transform 0.3s ease

    p
        color: var(--black)

    &:hover
        cursor: pointer

        img
            animation: zigzag 0.6s ease-in-out 2

@keyframes zigzag
    0%, 100%
        transform: translateX(0)
    25%
        transform: translateX(-5px) rotate(-5deg)
    50%
        transform: translateX(5px) rotate(5deg)
    75%
        transform: translateX(-3px) rotate(-3deg)

.hall-secA-border
  border-bottom: 1px solid #ddd
  background: #fff
  @include respond-to(screen-675)
     position: sticky
     top: 65px
     z-index: 10

  .container
    @include respond-to(screen-675)
      max-width: 100%

    .hall-secA
      padding: 40px 0
      @include respond-to(screen-540)
        padding: 10px 0

      .filter
        display: flex
        justify-content: space-between
        align-items: center
        gap: 20px
        @include respond-to(screen-540)
          flex-direction: column
          gap: 8px
        form
          display: flex
          gap: 20px
          align-items: center
          @include respond-to(screen-675)
            gap: 10px
          @include respond-to(screen-540)
            gap: 10px
          @include respond-to(screen-420)
              flex-direction: row

          .InputContainer
            position: relative
            display: flex
            align-items: center
            border-radius: 8px
            padding: 8px 18px
            border: 1px solid #666666
            background: white
            justify-content: space-between

            @include respond-to(screen-540)
              width: 100%
              padding: 7px 8px

            .labelforsearch
                img
                  @include respond-to(screen-540)
                    margin-right: 10px
                    width: 20px

            svg
              width: 20px
              height: 20px
             

            .search, .calendar
              border: none
              outline: none
              background-color: transparent
              font-size: 1rem
              width: 160px
              @include respond-to(screen-675)
                font-size: 14px
                width: 128px

            .calendar
                width: 100px     
                padding: 0    
                cursor: pointer
                color: #666
                background-color: transparent
                @include respond-to(screen-420)
                  width: 100%

            .dropdown-arrow
                position: absolute
                right: 15px
                top: 50%
                transform: translateY(-50%)
                width:24px
                height:24px
                pointer-events: none
              
            .calendar
              cursor: pointer
              color: #666
              text-decoration: none

            &.hasDropdown
              padding-right: 65px
              cursor: pointer
              position: relative

              @include respond-to(screen-675)
                padding-right: 0
              
              .dropdown-toggle
                position: absolute
                right: 10px
                cursor: pointer
                
              .dropdown-menu
                position: absolute
                top: calc(100% + 10px)
                left: 0
                width: 100%
                background: white
                border-radius: 8px
                box-shadow: 0 4px 12px rgba(0,0,0,0.1)
                z-index: 100
                opacity: 0
                visibility: hidden
                transform: translateY(10px)
                transition: all 0.3s ease
                border: 1px solid #ddd
                
                ul
                  padding: 10px 0
                  margin: 0
                  
                  li
                    padding: 8px 15px
                    transition: background 0.2s ease
                    @include respond-to(screen-675)
                       padding: 4px 8px
                       font-size: 14px
                    
                    &:hover
                      background: #f5f5f5
                      
                    a
                      color: #333
                      text-decoration: none
                      display: block
                      font-size: 14px
                      
              &:hover .dropdown-menu,
              &.active .dropdown-menu
                opacity: 1
                visibility: visible
                transform: translateY(0)


              &:hover::after
                transform: translateY(-50%) rotate(180deg)

.swiper-item 
    border-radius: 10px
    overflow: hidden
    position: relative
    position: -webkit-sticky
    position: sticky
    display: block
    top: calc(var(--headerfixed) + 20px)
    @include respond-to(screen-991)
        position: static


    .whats-slider
        width: 94%
        height: 100%
        overflow: hidden

        .swiper-wrapper
            display: flex

        .swiper-slide
            flex-shrink: 0
            width: 100%
            height: 100%
        
        img
            width: 100%
            height: 100%
            display: block
            border-radius: 10px
    .swiper-group
            position: absolute
            top: 50%
            left: 0
            right: 0
            transform: translateY(-50%)
            display: flex
            justify-content: space-between
            z-index: 2
            pointer-events: none
            @include respond-to(screen-991)
              display: none


            .whats-prev
                transform: rotate(180deg)

            button
                pointer-events: auto
                background: rgb(255 255 255 / 71%)
                border: none
                width: 44px
                height: 44px
                border-radius: 50%
                display: flex
                align-items: center
                justify-content: center
                cursor: pointer
                box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px

              
                svg
                    width: 30px
                    height: 30px
                    path
                        fill: #003ea9  


.table_sec
  padding: 70px 0

  .heading
    max-width: 395px
    margin: 0 auto 3rem

    p, h3
      text-align: center

  table
    background: $white
    width: 100%
    border-radius: 10px
    overflow: hidden
    border-collapse: collapse
    box-shadow: 0px 2px 4px -2px #0000001A, 0px 4px 6px -1px #0000001A
    max-width: 1280px
    margin: 0 auto
    @include respond-to(screen-1280)
        max-width: 1080px


    thead
      tr
        th
          background: var(--prime)
          color: $white
          padding: 12px
          font-size: 16px
          font-weight: 700
          line-height: 24px
          text-align: left
          &.fixed-cal
            width: 500px

    tbody
      tr
        td
          padding: 12px
          font-size: 15px
          line-height: 24px
          border-bottom: 1px solid #E5E7EB
          color: #45556C

      tr.section-divider
        td
          text-align: center
          font-weight: 700
          background: #f3f4f6
          color: #1f2937

.swiper-group ,.swiper-nav 
    @include respond-to(screen-991)
    //   display: none !important