@import "./_form"
@import "./_var"

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

$scrollwidth: 8px

:root
    --headerpadding: 10px
    --headerheight: 91px
    --headerfixed: 64px
    --footerstrip: 38px
    --primary: #ED1C24
    --text: #666666
    --border: #CCCCCC
    --white: #FFFFFF
    --black: #000000
    --background: #F9F9F9
    --gray: #F1F1F1
    --container: 1280px
    --containerfluid: 5rem

    @include media(1280)
        --container: 1080px
        --containerfluid: 4rem

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

    @include media(991)
        --container: 90%
        --headerheight: 84px


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

    @include media(640)
        --container: 92%
        --containerfluid: 1rem
body
    &::-webkit-scrollbar
        width: $scrollwidth
        background: $black
    &::-webkit-scrollbar-track
        box-shadow: none
    &::-webkit-scrollbar-thumb
        background-color: #F1F1F1
    &.overflow-hidden
        overflow: hidden
        margin-right: $scrollwidth
        @include media(991)
            margin-right: 0
        header
            width: calc(100% - $scrollwidth)
            @include media(991)
                width: 100%

html
    scroll-behavior: smooth
    scroll-padding-top: var(--headerheight)

body,html
    font-size: 16px
    line-height: 1.4
    font-optical-sizing: auto
    font-style: normal
    font-family: $SFProDisplay
    letter-spacing: 1px
    font-weight: normal

::selection
  background: var(--primary)
  color: #fff

::-moz-selection
  background: var(--primary)
  color: #fff
  
b
    @include font(500)

small
    font-size: 14px
    line-height: 22px
    display: block

select
    display: none
a[href]
    text-decoration: none
    color: inherit
    cursor: pointer
    transition: .5s ease
    &.logo
        display: block
        line-height: 0
svg
    path
        transition: .5s ease

.container
    @include container
.container-fluid
    // padding: 0 var(--containerfluid)
    display: block
    margin: 0 auto

.social-icons
    user-select: none

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

h1
    font-weight: 600
    font-size: 48px
    line-height: 1.2

    @include media(1280)
        font-size: 32px

    @include media(768)
        font-size: 26px

h2
    font-weight: 600
    font-size: 36px
    line-height: 1.2

    @include media(1280)
        font-size: 32px

    @include media(768)
        font-size: 26px


h3
    font-weight: 700
    font-size: 48px
    line-height: 1.2

    @include media(1280)
        font-size: 40px

    @include media(991)
        font-size: 34px

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


h4
    font-weight: 700
    font-size: 36px
    line-height: 1.2

    @include media(1280)
        font-size: 32px

    @include media(768)
        font-size: 26px
    @include media(540)
        font-size: 20px


h5
    font-weight: 600
    font-size: 24px
    line-height: 1.25

    @include media(991)
        font-size: 20px

h6
    font-weight: 600
    font-size: 20px
    line-height: 1.25

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


.heading
    &:has(h2 ~ h6),&:has(h3 ~ h6),&:has(h2 ~ h5),&:has(h3 ~ h5),&:has(h2 ~ p),&:has(h3 ~ p)
        h3,h2
            margin-bottom: 8px
    h3,h2
        font-size: 36px
        line-height: 1.2
        font-weight: 600
        text-align: center
        color: $black
        max-width: 550px
        margin: 0 auto
        font-family: $SFProDisplay
        span
            color: $primary

        @include media(540)
          width: 270px
          font-size: 28px
          margin: 0 auto



    h6
        font-size: 18px
        line-height: 1.34
        @include font(500)
    h5
        font-size: 20px
        @include font(500)
        line-height: 1.29
    // &:not(.c-white)
    //     h6,p
    //         color: $text
    &.lh-1
        h3,h2
            line-height: 1
    &.h-medium
        h2,h3
            font-size: 36px
            @include media(991)
                font-size: 32px
            @include media(767)
                font-size: 28px
            @include media(375)
                font-size: 22px
    &.h-small
        h2,h3
            font-size: 28px
    &.f-medium
        h2,h3
            @include font(500)
    &.f-semibold
        h2,h3
            @include font(600)
    &.c-white
        > *
            &:not(.btn)
                color: $white
    &.c-black-light
        h2,h3
            color: $black-light
    p
        text-align: center
        font-size: 16px
        line-height: 100%
        max-width: 55%
        font-weight: 500
        color: var(--text)
        margin: 0 auto 16px
        @include media(991)
            max-width: 75%
        @include media(767)
            max-width: 100%
        @include media(375)
            line-height: 18px
            font-size: 14px
x
 
.text-center
    text-align: center
.text-left
    text-align: left
.text-right
    text-align: right
.text-uppercase
    text-transform: uppercase

.flex
    @include flex
.justify-between
    justify-content: space-between
.align-center
    align-items: center

.inline-flex
    --gap: 12px
    display: inline-flex
    align-items: center
    gap: 0 var(--gap)
img
    max-width: 100%
button,select
    font-family: inherit
    font-size: inherit
    cursor: pointer
input
    font-family: inherit
    font-size: inherit
    border-radius: 0
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button
        -webkit-appearance: none
        margin: 0
    &[type=number]
        -moz-appearance: textfield
video
    pointer-events: none
    user-select: none
button
    border: none
    background: none
    appearance: none
    cursor: pointer
.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
.item-md
    position: relative
    display: block
    @include before
    @include after
    &::before,&::after
        z-index: 1
    &::after
        content: none
    figure,.figure
        display: block
        overflow: hidden
        line-height: 0
        height: 100%
        img,video,iframe
            height: 100%
            width: 100%
            object-fit: cover
            transition: .5s ease
    figcaption
        position: absolute
        bottom: 0
        left: 0
        right: 0
        z-index: 2
    .link-md
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        z-index: 3
    &.center-item
        figcaption
            bottom: auto
            top: 50%
            translate: 0 -50%
.overlay
    position: fixed
    left: 0
    right: 0
    bottom: 0
    top: 0
    z-index: 999
    opacity: 0
    background: rgb(0 0 0 /.7)
    transform: translateY(100%)
    transition: 0s ease .5s,opacity .5s ease
    cursor: pointer
   
    @include media(675)
        display: none
    &.is-open
        transition: opacity 1s ease
        opacity: 1
        transform: translateY(0%)


.btn
    --height: 38px
    --padding: 27px
    display: inline-flex
    vertical-align: middle
    align-items: center
    justify-content: center
    gap: 10px
    letter-spacing: 1px
    height: var(--height)
    line-height: var(--height)
    padding: 0 var(--padding)
    overflow: hidden
    background: $primary
    font-size: 16px
    font-weight: 500
    color: $white
    appearance: none
    transition: .5s ease
    caret-color: transparent
    border: 1px solid $primary
    border-radius: 5px
    user-select: none
    width: fit-content
    position: relative
    z-index: 1
    @include font(500)

    /* =========================
       GLASSY HOVER EFFECT
       ========================= */

    &.btn-glassy

        &::after
            content: ''
            position: absolute
            top: 0
            left: -70%
            width: 40%
            height: 100%
            background: #ffffffa2
            filter: blur(22px)
            transform: skewX(-25deg)
            pointer-events: none
            z-index: 2
            transition: left .75s cubic-bezier(.22,.61,.36,1)

        &:hover::after
            left: 140%

    /* ========================= */

    @include media(375)
        --height: 36px
        --padding: 12px
        font-size: 14px

    &:hover
        &:not(.disabled-btn,.btn-no-hover)
            background: $primary
            color: $white

        img
            transition: .5s ease
            transform: translateX(500%)

    &.btn-border-primary
        background: none
        border-color: $primary
        color: $primary
        &:not(.disabled-btn,.btn-no-hover)
            &:hover
                border-color: $primary
                background: $primary
                color: $white
                path
                    fill: $white

    &.btn-border-white
        background: none
        border-color: $white
        color: $white
        &:not(.disabled-btn,.btn-no-hover)
            &:hover
                border-color: $white
                background: $white
                color: $black
                path
                    fill: $black

    &.btn-border-gray
        background: none
        border-color: $text
        color: $text
        &:not(.disabled-btn,.btn-no-hover)
            &:hover
                border-color: $primary
                background: $primary
                color: $white
                path
                    fill: $white

    &.btn-white
        background: $white
        border-color: $white
        color: $black
        &:not(.disabled-btn,.btn-no-hover)
            &:hover
                background: $primary
                border-color: $primary
                color: $white
            &.hover-border
                &:hover
                    border-color: $white
                    color: $white
                    background: none

    &.btn-shadow
        box-shadow: 0px 4px 4px 0px #00000040

    &.btn-wide
        --padding: 40px

    &.btn-medium
        --height: 36px
        --padding: 16px
        font-size: 14px

    &.btn-small
        --height: 31px
        font-size: 14px

    &.w-100
        width: 100%

    &.box
        --padding: 0px !important
        width: var(--height)

    &.btn-btn
        border-radius: 5px

    &:has(.icon)
        display: flex
        align-items: center
        gap: 10px
        color: var(--white)

        
.model
    position: fixed
    top: 0
    bottom: 0
    z-index: 999
    background: $white
    background-position: 0% 80%
    background-size: 75%
    max-width: 435px
    width: 100%
    .close
        cursor: pointer
        &:not(.btn,.close-video,.not-ab)
            position: absolute
            top: 0
            right: 0
            top: 25px
            right: 25px
            line-height: 0
            z-index: 1
            @include media(520)
                top: 20px
                right: 20px
            path
                stroke: $black

.form-grid
    --item: 1
    --gaplr: 30px
    --gaptb: 32px
    display: grid
    grid-template-columns: repeat(var(--item), calc((100% - (var(--gaplr) * (var(--item) - 1))) / var(--item)))
    gap: var(--gaptb) var(--gaplr)
    .full
        grid-column: span var(--item)



.swiper-slide
    height: auto

.swiper-nav
    line-height: 0
    &:has(.swiper-button-lock)
        display: none !important
    &.hide-btn-no-loop
        .swiper-prev,.swiper-next
            &.swiper-button-disabled
                opacity: 0
                pointer-events: none
    &.swiper-group
        display: flex
        align-items: center
        width: fit-content
        gap: 11px
    &.center-full
        position: absolute
        top: 50%
        left: 50%
        translate: -50% -50%
        z-index: 2
        display: flex
        align-items: center
        justify-content: space-between
        width: 104%
        max-width: 104%
        margin: 0 auto
        pointer-events: none
        user-select: none
        .swiper-prev,.swiper-next
            pointer-events: all
            user-select: auto
    &.icon-width-auto
        .swiper-next,.swiper-prev
            svg
                width: auto
                height: auto
    @include media(767)
        display: none !important
.swiper-prev
    svg,img
        transform: scaleX(-1)

.swiper-button-next, .swiper-button-prev
    &::after
        display: none

.swiper-prev,.swiper-next
    --size: 45px
    height: var(--size)
    width: var(--size)
    border-radius: 50%
    display: flex
    align-items: center
    justify-content: center
    background: $white
    border: 1px solid $white
    box-shadow: 0px 3px 8px 0px #0000003D
    transition: .5s ease
    &.swiper-btn-medium
        --size: 35px
    &:not(.no-background)
        path
            fill: $black
    &:hover
        &:not(.swiper-button-disabled,.no-background)
            background: $white
            border-color: $white
            path
                fill: $black
    &.no-background
        height: auto
        width: auto
        display: initial
        background: none
        border: none
        line-height: 0
        &:hover
            background: none

    &.has-shadow
        box-shadow: 0px 1px 3px 1px #3C404326, 0px 1px 2px 0px #3C40434D
    &.white
        background: $white
        border-color: $white
        path
            fill: $black
        &:hover
            &:not(.swiper-button-disabled)
                background: $black
                border-color: $black
                path
                    fill: $white
    &.primary-border
        border-color: $primary
        background: none
        path
            fill: $primary
        &:hover
            &:not(.swiper-button-disabled)
                background: $primary
                path
                    fill: $white
    &.white-border
        border-color: $white
        background: none
        path
            fill: $white
        &:hover
            &:not(.swiper-button-disabled)
                background: $white
                path
                    fill: $black
    &.gray-border
        border-color: #828282
        background: none
        path
            fill: #828282
        &:hover
            &:not(.swiper-button-disabled)
                background: $primary
                border-color: $primary
                path
                    fill: $white
    &.black-border
        border-color: $black
        background: none
        path
            fill: $black
        &:hover
            &:not(.swiper-button-disabled)
                background: $black
                border-color: $black
                path
                    fill: $white
    &.swiper-btn-large
        --size: 59px
        @include media(991)
            --size: 48px
    &.swiper-button-disabled
        cursor: no-drop
        opacity: .4
    &.swiper-button-lock
        display: none !important

// Other
.play-btn
    --btnsize: 50px
    --border: 1px
    --bordercolor: var(--white)
    --playbtncolor: var(--white)
    width: 60px 
    height: 60px 
    height: var(--btnsize)
    width: var(--btnsize)
    border-radius: 50%
    border: var(--border) solid var(--bordercolor)
    position: relative
    background: transparent


  
    &::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
        @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
    &::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(--playbtncolor)

.website-content
    > :first-child
        margin-top: 0 !important
    > :last-child
        margin-bottom: 0 !important
    h1
        font-size: 36px
        margin-bottom: 45px
        text-align: center
        font-family: $SFProDisplay
        @include font(600)
        @include media(675)
            font-size: 34px
        @include media(520)
            font-size: 30px
            font-weight: bold
    h2
        font-size: 30px
        @include font(600)
        @include media(675)
            font-size: 24px
    h3
        font-size: 28px
        line-height: 1.21
        @include font(500)
        @include media(675)
            font-size: 22px
    h4
        font-size: 24px
        @include font(500)
        @include media(675)
            font-size: 20px
    h5
        font-size: 18px
        line-height: 1.3
        @include font(500)
        @include media(675)
            font-size: 18px
    h6
        font-size: 18px
        line-height: 1.3
        @include font(500)
    h2,h3,h4
        margin: 40px 0 18px
    h5,h6
        margin: 22px 0 18px
    p,li
        color: $text
        text-align: justify
        hyphens: auto
        word-spacing: -0.07em
        // @include font(500)
        b
            @include font(600)
            color: $black
    a
        color: $black
        &:hover
            text-decoration: underline
    p,ul
        margin-bottom: 30px
    ul
        padding-left: 18px
        @include media(675)
            padding-left: 10px
        li
            position: relative
            padding-left: 28px
            @include media(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: $primary
    &.website-content-medium
        h2,h3,h4
            margin: 20px 0 18px
            font-size: 20px
            @include font(500)
        h5,h6
            font-size: 18px
            @include font(500)
        p,ul
            margin-bottom: 20px

[data-video],[data-model],[data-scrollTo]
    cursor: pointer

.read-more
    --arrowsize: 16px
    --space: 11px
    @include font(500)
    color: $primary
    background-image: url(../../icon/arrow-down-primary.svg)
    background-repeat: no-repeat
    background-position-y: 50%
    background-position-x: 100%
    background-position: 100% 50%
    background-size: var(--arrowsize) auto
    padding-right: calc(var(--arrowsize) + var(--space))
    transition: color .5s ease
    &.active
        background-image: url(../../icon/arrow-up-primary.svg)
        &:hover
            color: $black
            background-image: url(../../icon/arrow-up-black.svg)
    &:hover
        color: $black
        background-image: url(../../icon/arrow-down-black.svg)

.vec-car-bg
    background-color: $gray
    padding-bottom: 193px
    background-image: url(../../images/vector/vector-6.svg)
    background-repeat: repeat-x
    background-position: bottom left
    @include before(url(../../icon/car-1.svg))
    @include after(url(../../icon/car-2.svg))
    --carsize: 71px
    --carspeed: 10s
    &.background2
        background: url(../../images/vector/vector-6.svg), $gradient
        background-repeat: repeat-x
        background-position: bottom left
    &::before,&::after
        z-index: 0
        background-repeat: no-repeat
        background-size: var(--carsize)
    &::before
        background-position-x: calc( var(--carsize) * -1 )
        background-position-y: calc(100% - 28px)
        animation: animatedBackground1 var(--carspeed) linear infinite
        @keyframes animatedBackground1
            from
                background-position-x: calc( var(--carsize) * -1 )
            to
                background-position-x: calc(100% + var(--carsize))
    &::after
        background-position-x: calc( 100% + var(--carsize) )
        background-position-y: calc(100% - 8px)
        animation: animatedBackground2 var(--carspeed) linear infinite
        @keyframes animatedBackground2
            from
                background-position-x: calc(100% + var(--carsize))
            to
                background-position-x: calc( var(--carsize) * -1 )

.ico-sys
    mask-image: url(../../images/vector/vector-4.svg)
    mask-size: 100%
    mask-repeat: no-repeat
    aspect-ratio: 1
    line-height: 0
    &.ico-sys2
        position: relative
        mask-image: none
        @include after(url(../../images/vector/vector-2-c.svg))
        &::after
            background-repeat: no-repeat
            background-size: 100% 100%
        video
            mask-image: url(../../images/vector/vector-2-a.svg)
            mask-size: 100%
            mask-repeat: no-repeat
    video
        height: 100%
        width: 100%
        object-fit: cover

.search-filter-wrap
    h1
        max-width: 320px
        margin-bottom: 24px
    .search-filter
        box-shadow: 0px 1px 3px 4px #00000005
        max-width: 686px
        border-radius: 10px
        background: $white
        .form
            @include flex
            --inputsize: 62px
            --paddingleftright: 20px
            .form-group
                flex: 0 1 auto
                &::before,&::after
                    display: none
                &.location_select
                    --iconsize: 12px
                    --iconurl: var(--iconpath)
                    --iconspace: 8px
                &:not(:has(select))
                    flex: 1
                &:has(select)
                    max-width: 180px
                    border-right: 1px solid #F4F3F3
                &:has(input)
                    flex: 1
                &:has(.btn)
                    flex: 0
                    display: flex
                    align-items: center
                    padding-right: 9px
                input
                    font-size: 14px
                    &:placeholder
                        color: #A6A5A5
            .btn
                --padding: 16px
//banner
.mt-hdr
    margin-top: var(--headerheight)

.banner
    position: relative
    &:not(.banner-banner)
        @include before
        &::before
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%)
    &.center-banner
        .banner-wrapper
            bottom: 50%
            translate: 0 50%
    .bg
        line-height: 0
        height: calc(100vh - var(--headerheight))
        @include media(1152)
            height: 690px
        @include media(675)
            height: 520px
        video,img
            width: 100%
            height: 100%
            object-fit: cover
    .banner-wrapper
        position: absolute
        left: 0
        right: 0
        bottom: 15%
        z-index: 3
    .content
        &.content-white
            > *
                &:not(.btn)
                    color: $white
        &.ttl-m
            h1
                font-size: 36px
        &.f-semibold
            h1
                @include font(600)
    h1
        font-size: 36px
        line-height: 1.12
        font-family: $SFProDisplay
        @include font(600)
    h6
        font-size: 18px
        line-height: 1.34
        color: $text
        margin-top: 12px
        @include font(500)
    h5
        font-size: 20px
        line-height: 1.5
        color: $text
        margin-bottom: 10px

.swiper-pagination-bullets
    --swiper-pagination-bullet-size: 13px
    --swiper-pagination-color: var(--primary)

.btn-div-wrap
    > *
        &:not(:last-child)
            margin-right: 20px
            @include media(675)
                margin-right: 5px
    .btn
        @include media(675)
            --padding: 10px

.btn
    &.disabled-btn
        opacity: .4
        cursor: no-drop

.common-grid-wrap
    display: grid
    grid-template-columns: repeat(3,1fr)
    grid-gap: 44px 25px
.swiper-pagination-fraction
    font-family: $SFProDisplay
    font-size: 18px
    color: $primary
    @include font(600)
    line-height: 1.263
    width: 50px
    text-align: center
    span
        text-align: center
.slider-section
    .upper-sec
        position: relative
        margin-bottom: 50px
        .vew-all-btn
            margin-right: 14px
            &:hover
                color: $black
        .slider-nav
            position: absolute
            right: 0
            bottom: 0
            z-index: 2
            .swiper-prev,.swiper-next
                --size: 40px

.video-modal
    left: 0
    right: 0
    background: #0000007a
    z-index: 9
    max-width: 100%
    transform: translateY(100%)
    transition: .5s ease
    &.is-open
        transform: translateY(0%)
    .close
        position: absolute
        bottom: calc(100% + 20px)
        top: auto !important
        right: -40px !important
        height: 50px
        width: 50px
        border-radius: 50%
        background: $primary
        display: flex
        align-items: center
        justify-content: center
        @include media(675)
            right: 0
        &:hover
            background: $black
        svg
            height: 35%
            width: 35%
        path
            stroke-width: 2
            stroke: $white
    .model-body
        position: absolute
        top: 50%
        left: 50%
        translate: -50% -50%
        width: 100%
        max-width: 50%
        @include media(675)
            max-width: 95%
        iframe
            width: 100%
            aspect-ratio: 1.9
            border: 2px solid $white

.menu-modal
    right: 0
    max-width: 500px
    transform: translateX(100%)
    transition: .5s ease
    background: url(../../icon/logo-icon-gray.svg) no-repeat, linear-gradient(180deg, #FFFFFF 0%, #FFEAEA 100%)
    background-size: 40% auto, 100% 100%
    background-position: 100% 100%, 0 0
    &.is-open
        transform: translateX(0%)
    .close
        path
            stroke: $text
            stroke-width: 2
    .model-body
        padding: 50px 40px 30px
        height: 100%
        overflow-y: auto
        @include scrollbar(3px,$white,#5e5e5e,8px)
        @include media(675)
            padding: 40px 25px 20px
        @include media(520)
            padding: 40px 15px 20px
        .ico
            max-width: 75px
            width: 100%
            margin-bottom: 22px
            line-height: 0
            img,svg
                width: 100%
                height: auto
        .nav-list
            >li
                &:not(:last-child)
                    margin-bottom: 15px
                    @include media(1366)
                        margin-bottom: 12px
                >a
                    font-size: 28px
                    font-family: $SFProDisplay
                    color: $black
                    display: inline-block
                    @include font(500)
                    @include media(1366)
                        font-size: 25px
                    &:hover
                        color: $primary
        .bottom-list
            border-top: 1px solid #ccc
            margin-top: 2rem
            padding-top: 2rem
            display: flex
            align-items: center
            justify-content: space-between
            .cal-btn-ham
                color: $text
                @include font(600)
                @include media(520)
                    @include font(500)
                &:hover
                    color: $primary
            .social-icons
                a
                    display: inline-block
                    vertical-align: middle
                    &:not(:last-child)
                        margin-right: 15px
                        @include media(520)
                            margin-right: 10px
                    path
                        transition: .5s ease
                    &:hover
                        path
                            fill: $primary

.enquire-modal
    right: 0
    transform: translateX(100%)
    transition: .5s ease
    background: $white url(../../icon/logo-icon-gray.svg) no-repeat
    background-position: bottom right
    background-size: 45%
    &.is-open
        transform: translateX(0%)
    .model-body
        padding: 60px 35px 30px
        height: 100%
        overflow-y: auto
        @include scrollbar(3px,$white,#5e5e5e,8px)
        @include media(675)
            padding: 50px 20px 30px
        .title
            text-align: center
            margin-bottom: 2rem
            h4
                font-size: 32px
                color: $black
                @include font(500)
            p
                color: $text
                margin-top: 10px
                line-height: 20px
                max-width: 317px
                margin-left: auto
                margin-right: auto
        .form
            --gaptb: 15px

      
.tab-nav-content
    position: relative

    .tabs
        opacity: 0
        transform: translateY(30px)
        transition: .35s
        pointer-events: none
        height: 0
        overflow: hidden

        &.active
            opacity: 1
            transform: translateY(0)
            pointer-events: auto
            height: auto

    
.dots
    h6
        margin-bottom: 15px

    li
        color: var(--text)
        position: relative
        padding-left: 25px
        font-size: 14px
        &:not(:last-child)
            margin-bottom: 4px

        &::before
            content: ""
            position: absolute
            top: 8px
            left: 0
            width: 8px
            aspect-ratio: 1
            border-radius: 50%
            background: var(--primary)

.swiper-button-lock
    display: none !important

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

    @include media(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: 64px
                text-transform: uppercase
                font-weight: 600

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


.form-group
    .error
        position: absolute
        color: red
        font-size: 12px
        bottom: -8px
        left: 0

.solution_col
    position: relative
    border-radius: 12px
    overflow: hidden
    cursor: pointer

    img
        width: 100%
        height: 270px
        object-fit: cover
        display: block
        border-radius: 12px
        transition: all 0.3s ease-in
    &:hover
        img
            transform: scale(1.05)


    &::after
        content: ''
        position: absolute
        inset: 0
        background: linear-gradient(to top, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 100%)
        border-radius: 12px

    .card-badge
        position: absolute
        top: 12px
        left: 12px
        z-index: 2
        background: rgba(255, 255, 255, 0.20)
        backdrop-filter: blur(6px)
        -webkit-backdrop-filter: blur(6px)
        color: #fff
        font-size: 13px
        font-weight: 500
        padding: 4px 10px
        border-radius: 6px
        border: 1px solid rgba(255, 255, 255, 0.30)
    
    .card-body
        position: absolute
        bottom: 0
        left: 0
        right: 0
        z-index: 2
        padding: 14px 16px

        h4
            margin: 0 0 4px
            font-size: 16px
            font-weight: 600
            color: #fff

        p
            margin: 0
            font-size: 13px
            color: rgba(255, 255, 255, 0.80)

.breadcrumps
    @include media(991)
        display: none
    li
        display: inline-block
        vertical-align: middle
        a
            color: $text
            font-size: 14px
            @include media(520)
                font-size: 12px
                text-overflow: ellipsis
            &.active
                color: $primary
        &:not(:last-child)
            position: relative
            padding-right: 20px
            @include media(520)
                padding-right: 10px
            &::before
                content: '>'
                position: absolute
                left: 100%
                top: 50%
                translate: 0 -50%
                font-size: 12px
                font-family: monospace
                color: $text
        &:not(:first-child)
            padding-left: 20px
            @include media(520)
                padding-left: 10px
.btn-outline
    color: var(--primary)
    border: 1px solid var(--primary)
    display: flex
    align-items: center
    justify-content: center
    gap: 10px
    padding: 7px 20px
    border-radius: 5px
    transition: all 0.3s ease-in

    @include media(1100)
        padding: 7px 14px
        gap: 6px

    img
        transition: all 0.3s ease-in

    &:hover
        background: var(--primary)
        color: var(--white)
        border-color: var(--primary)

        img
            filter: brightness(0) invert(1)