@charset "UTF-8"
$screen-320: 320px
$screen-345: 345px
$screen-360: 360px
$screen-365: 365px
$screen-420: 420px
$screen-520: 520px
$screen-540: 540px
$screen-675: 675px
$screen-767: 767px
$screen-768: 768px
$screen-769: 769px
$screen-860: 860px
$screen-991: 991px 
$screen-992: 992px
$screen-1007: 1007px
$screen-1024: 1024px
$screen-1140: 1140px
$screen-1152: 1152px
$screen-1230: 1230px
$screen-1280: 1280px
$screen-1300: 1300px
$screen-1366: 1366px
$screen-1367: 1367px
$screen-1440: 1440px
$screen-1536: 1536px
$screen-1784: 1784px

// $screen-2000: 2000px

@mixin respond-to($media)
    @if $media == screen-320
        @media only screen and (max-width: $screen-320)
            @content
    @else if $media == screen-345
        @media only screen and (max-width: $screen-345)
            @content
    @else if $media == screen-360
        @media only screen and (max-width: $screen-360)
            @content
    @else if $media == screen-365
        @media only screen and (max-width: $screen-365)
            @content
    @else if $media == screen-420
        @media only screen and (max-width: $screen-420)
            @content
    @else if $media == screen-520
        @media (max-width: $screen-520)
            @content
    @else if $media == screen-540
        @media (max-width: $screen-540)
            @content
    @else if $media == screen-675
        @media (max-width: $screen-675)
            @content
    @else if $media == screen-767
        @media (max-width: $screen-767)
            @content
    @else if $media == screen-768
        @media (max-width: $screen-768)
            @content
    @else if $media == phnLandscape
        @media only screen  and (max-width: $screen-767) and  (orientation : landscape)
            @content
    @else if $media == screen-860
        @media (max-width: $screen-860)
            @content
    @else if $media == screen-991
        @media (max-width: $screen-991)
            @content
    @else if $media == screen-992
        @media (min-width: $screen-992)
            @content
    @else if $media == screen-1007
        @media (max-width: $screen-1007)
            @content
    @else if $media == screen-1024
        @media (max-width: $screen-1024)
            @content
    @else if $media == screen-1140
        @media (max-width: $screen-1140)
            @content
    @else if $media == screen-1152
        @media (max-width: $screen-1152)
            @content
    @else if $media == screen-1230
        @media (max-width: $screen-1230)
            @content
    @else if $media == screen-1280
        @media (max-width: $screen-1280)
            @content
    @else if $media == screen-1300
        @media (max-width: $screen-1300)
            @content
    @else if $media == screen-1366
        @media (max-width: $screen-1366)
            @content
    @else if $media == screen-1367
        @media (max-width: $screen-1367)
            @content
    @else if $media == screen-1440
        @media (max-width: $screen-1440)
            @content
    @else if $media == screen-1536
        @media (max-width: $screen-1536)
            @content
    @else if $media == screen-1784
        @media (max-width: $screen-1784)
            @content
    @else if $media == screen-2000
        @media (max-width: $screen-2000)
            @content

// Font Family

$Averta : "Averta Regular"
$Averta-bold : "Averta bold"
$Averta-light : "Averta light"
$Averta-regular : "Averta Regular"
$Averta-Semibold : "Averta Semibold"


// Color
 
$primary: var(--primary)
$secondary: var(--secondary)
$prime: var(--prime)
$white: var(--white)
$black: var(--black)
$text: var(--text)
$yellow: var(--yellow)
$gradient: var(--gradient)
$gradient2: var(--gradient2)

//mixins

@mixin font2
    font-family: $Averta
    @include gradient-text 
    text-transform: uppercase
@mixin btn($height: 44px,$color: $black,$background: $gradient,$hover: $gradient2,$display: inline-flex,$padding: 28px)
    display: $display
    align-items: center
    gap: 0 6px
    color: $color
    height: $height
    line-height: $height
    border-radius: 25px
    overflow: hidden
    background: $background
    padding: 0 $padding
    position: relative
    z-index: 0
    text-transform: uppercase
    transition: .7s
    @include font(500)
    svg,path
        transition: .7s
    &::before,&::after
        content: ''
        position: absolute
        left: 0
        right: 0
        top: 0
        bottom: 0
        pointer-events: none
        user-select: none
        transition: .7s
        z-index: -1
    &::before
        background: $background
    &::after
        background: $hover
        opacity: 0
    &:hover
        &::before
            opacity: 0
        &::after
            opacity: 1
@mixin gradient-text
    -webkit-background-clip: text
    -webkit-text-fill-color: transparent
    background-image: $gradient
@mixin gradient-border($border: 1px)
    position: relative
    border-left: $border solid $primary
    border-right: $border solid $secondary
    &::before,&::after
        content: ''
        position: absolute
        left: 0
        right: 0
        height: 1px
        background: $gradient
    &::before
        top: 0
    &::after
        bottom: 0
@mixin before($background:none)
    position: relative
    &::before
        content: ''
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        z-index: 0
        pointer-events: none
        user-select: none
        background: $background
@mixin after($background)
    &::after
        content: ''
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        z-index: 0
        pointer-events: none
        user-select: none
        background: $background
@mixin font($weight)
    font-weight: $weight
@mixin flex
    display: flex
    flex-wrap: wrap
@mixin grid
    display: grid
@mixin radius
    border-radius: 25px
    overflow: hidden
    @include respond-to(screen-991)
        border-radius: 20px
@mixin scrollbar($width,$background,$color,$radius)
    &::-webkit-scrollbar
        width: $width
        background: $background
    &::-webkit-scrollbar-track
        box-shadow: none
    &::-webkit-scrollbar-thumb
        background-color: $color
        border-radius: $radius
@mixin playBtn($size: 59px,$background: none,$border: $white)
    height: $size
    width: $size
    border-radius: $size
    background: $background
    border: 1px solid $border
    position: relative
    svg,img
        position: absolute
        top: 50%
        left: 50%
        width: calc(100% * .25)
        translate: -50% -50%
        z-index: 1
        animation: none
    &::after
        content: ''
        position: absolute
        top: 50%
        left: 50%
        width: calc(100% * 1.01)
        height: calc(100% * 1.01)
        transform: translateX(-50%) translateY(-50%)
        background: $white
        border-radius: 50%
        display: block
        animation: pulse-border 1500ms ease-out infinite
        z-index: 0
        @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
    img
        position: absolute
        top: 50%
        left: 50%
        translate: -50% -50%
        width: calc($size * .3)
        height: calc($size * .3)
        object-fit: contain


@mixin primary-filter
    filter: brightness(0) saturate(100%) invert(90%) sepia(56%) saturate(2797%) hue-rotate(320deg) brightness(98%) contrast(104%)
@mixin white-filter
    filter: brightness(0) saturate(100%) invert(98%) sepia(1%) saturate(348%) hue-rotate(249deg) brightness(115%) contrast(100%)

@mixin regularBtn($cus_padding: 10px 22px)
    font-family: $Averta
    font-weight: 500
    font-size: 16px
    color: #000
    padding: $cus_padding
    border-radius: 25px
    position: relative
    overflow: hidden
    z-index: 1
    &::after
        content: ''
        position: absolute
        bottom: 0
        left: 0
        width: 100%
        height: 100%
        background-color: $white
        border-radius: 25px
        z-index: -2
    &::before
        content: ''
        position: absolute
        bottom: 0
        left: 0
        width: 0% 
        height: 100%
        background-color: var(--elementhover)
        transition: all .3s
        border-radius: 25px
        z-index: -1
    &:hover
        &::before
            width: 100%
    
@mixin btn2 
    background: transparent 
    padding: 6px 10px
    border: 1px solid #fff
    color: #fff
    border-radius: 25px
    position: relative
    overflow: hidden
    z-index: 1
    
    &::after
        content: ''
        position: absolute
        bottom: 0
        left: 0
        width: 100%
        height: 100%
        background-color: transparent
        border-radius: 25px
        z-index: -2
    &::before
        content: ''
        position: absolute
        bottom: 0
        left: 0
        width: 0% 
        height: 100%
        background-color: var(--elementhover)
        transition: all .3s
        border-radius: 25px
        z-index: -1
    &:hover
        &::before
            width: 100%

@mixin hover
    position: relative
    // overflow: hidden
    z-index: 1
    &::after
        content: ''
        position: absolute
        bottom: 0
        left: 0
        width: 100%
        height: 100%
        background-color: transparent
        z-index: -2
    &::before
        content: ''
        position: absolute
        bottom: 0
        left: 0
        width: 0% 
        height: 100%
        background-color: var(--elementhover)
        transition: all .3s
        z-index: -1
    &:hover
        &::before
            width: 100%

@mixin scroll
    animation: scroll 1.5s ease-in-out infinite forwards
    @keyframes scroll
            0%
                transform: translateY(10px)
            50%
                transform: translateY(20px)
            100%
                transform: translateY(10px)
             
@mixin hasDropdown($right,)
    position: relative
    &::before
        content: ""
        background-image: url(../../icon/dark-down.svg)
        background-repeat: no-repeat
        background-position-y: 50%
        background-position-x: 92%
        background-size: var(--arrowsize) auto
        position: absolute
        right: $right
        top: 9%
        width: 20px
        height: 20px
        z-index: 3