// Font Family
$Poppins: "Poppins",



// Color
$primary: var(--primary)
$secondary: var(--secondary)
$text: var(--text)
$gradient-a: var(--gradient-a)
$gradient-b: var(--gradient-b)
$gradient-c: var(--gradient-c)
$gradient-d: var(--gradient-d)
$gradient-e: var(--gradient-e)
$green: var(--green)
$white: var(--white)
$black: var(--black)
$black-light: var(--black-light)
$gray: var(--gray)
 
$gradient-a: var(--gradient-a) 


// New variable

//fiter

$black-filter: brightness(0) saturate(100%) invert(26%) sepia(96%) saturate(2014%) hue-rotate(280deg) brightness(102%) contrast(108%)
$white-filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(236deg) brightness(103%) contrast(101%)

//mixins

@mixin bgCircleBlur
    position: relative
    --bgcolor: rgb(256 256 256)
    --bgsize: 30%
    --top: 50%
    --right: 10%
    &::before
        top: var(--top)
        right: var(--right)
        content: ''
        position: absolute
        z-index: 0
        width: var(--bgsize)
        aspect-ratio: 1
        background: var(--bgcolor)
        filter: blur(152.3000030517578px)
    .container
        position: relative
        z-index: 1
@mixin gradient-text($color: $gradient-a)
    -webkit-background-clip: text
    -webkit-text-fill-color: transparent
    background-image: $color

@mixin container
    max-width: var(--container)
    width: 100%
    margin: 0 auto
    // @include media(1300)
    //     padding: 0 25px
    // @include media(767)
    //     padding: 0 15px
    // @include media(345)
    //     padding: 0 13px
    // @include media(320)
    //     padding: 0 10px
    &.container2
        @include media(675)
            padding-right: 0
        .heading
            @include media(675)
                padding-right: 15px
            @include media(345)
                padding-right: 13px
            @include media(320)
                padding-right: 10px
@mixin media($screen)
    @media only screen and (max-width: $screen+px)
        @content
@mixin media-min($screen)
    @media only screen and (min-width: $screen+px)
        @content

@mixin mediamaxheight($screen)
    @media only screen and (max-height: $screen+px)
        @content

@mixin mediamaxwidthmaxheight($width, $height)
    @media only screen and (max-width: #{$width}px) and (max-height: #{$height}px)
        @content

@mixin font($weight)
    font-weight: $weight
    
@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: none)
    &::after
        content: ''
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        z-index: 0
        pointer-events: none
        user-select: none
        background: var(--bgcolor)

@mixin line-clamp($line: 3)
    display: -webkit-box
    -webkit-box-orient: vertical
    -webkit-line-clamp: $line
    text-overflow: ellipsis
    overflow: hidden

@mixin icon($background: $black,$border: $black)
    --iconsize: 88px
    --innericonsize: .4
    height: var(--iconsize)
    width: var(--iconsize)
    border-radius: 50%
    background: $background
    border: 1px solid
    border-color: $border
    display: flex
    align-items: center
    justify-content: center
    line-height: 0
    > *
        width: calc(var(--iconsize) * var(--innericonsize))
        height: auto
@mixin flex
    display: flex
    flex-wrap: wrap

@mixin flex-wrap($item, $gaplr, $gaptb)
    display: flex
    flex-wrap: wrap
    justify-content: center
    gap: $gaptb $gaplr
    > *
        flex: 0 1 calc((100% - #{$gaplr * ($item - 1)}) / #{$item})
        max-width: calc((100% - #{$gaplr * ($item - 1)}) / #{$item})
        width: 100%

@mixin scrollbar($width: 2px,$background: none,$color : rgb(0 0 0 / .3),$radius: 10px)
    &::-webkit-scrollbar
        width: $width
        background: $background
        height: $width
    &::-webkit-scrollbar-track
        box-shadow: none
    &::-webkit-scrollbar-thumb
        background-color: $color
        border-radius: $radius

@keyframes shine
    from
        opacity: 0
        left: 0%
    50%
        opacity: 1
    to
        opacity: 0
        left: 100%

@mixin shine
    position: relative
    &::before
        content: ""
        display: block
        width: 0px
        height: 86%
        position: absolute
        top: 7%
        left: 0%
        opacity: 0
        background: white
        box-shadow: 0 0 55px 12px white
        transform: skewX(-20deg)
        z-index: 1
    &:hover
        &::before
            animation: shine 0.4s linear
            animation-fill-mode: none

@mixin radio($checkbox: false)
    --size: 17px
    display: inline-block
    height: var(--size)
    width: var(--size)
    border: 1px solid $primary
    border-radius: 50%
    position: relative
    appearance: none
    padding: 0
    background: transparent
    @if $checkbox == true
        &:checked
            background: $primary
            outline-offset: -4px
            outline: 2px solid var(--white)

@mixin checkbox($checkbox: false, $color: null)
    --size: 20px
    height: var(--size)
    width: var(--size)
    position: relative
    padding: 0
    border-radius: 5px
    background: #D9D9D9
    pointer-events: none
    &::before
        content: ''
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        z-index: 2
        background: url(../../icon/tick-white.svg) no-repeat
        background-position: 50% 50%
        background-size: 10px auto
        opacity: 0
    @if $checkbox == true
        appearance: none
        pointer-events: all
        &:checked
            background: $black
            &::before
                opacity: 1
    @if $color != null
        background: $color
        &:checked
            background: $black
@mixin checkbox-full
    position: relative
    --size: 20px
    display: flex
    line-height: normal
    align-items: center
    &:has(input:checked)
        .check-span
            background: $primary
            &::before
                opacity: 1
    input
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        height: 100%
        width: 100%
        opacity: 0
        appearance: none
        z-index: 2
    .check-span
        flex: 0 1 auto
        display: block
        @include checkbox
    p
        padding-left: 14px
        color: $text
        @include font(500)
        font-size: 14px
@mixin radio-full
    position: relative
    --size: 20px
    display: flex
    line-height: normal
    align-items: center
    &:has(input:checked)
        .check-span
            background: $primary
            outline-offset: -4px
            outline: 2px solid var(--white)
        p
            color: $black
    input
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        height: 100%
        width: 100%
        opacity: 0
        appearance: none
        z-index: 2
    .check-span
        flex: 0 1 auto
        display: block
        @include radio
    p
        padding-left: 14px
        @include font(500)
        color: $text
@mixin bubbly-button($button-bg: #ff0081, $button-text-color: #fff, $shadow-color: rgba(255, 0, 130, 0.5))
    position: relative
    &:before, &:after
        position: absolute
        content: ''
        display: block
        width: 140%
        height: 100%
        left: -20%
        z-index: -1000
        transition: all ease-in-out 0.5s
        background-repeat: no-repeat
    &:before
        display: none
        top: -75%
        background-image: radial-gradient(circle, $button-bg 20%, transparent 20%), radial-gradient(circle, transparent 20%, $button-bg 20%, transparent 30%), radial-gradient(circle, $button-bg 20%, transparent 20%), radial-gradient(circle, $button-bg 20%, transparent 20%), radial-gradient(circle, transparent 10%, $button-bg 15%, transparent 20%), radial-gradient(circle, $button-bg 20%, transparent 20%), radial-gradient(circle, $button-bg 20%, transparent 20%), radial-gradient(circle, $button-bg 20%, transparent 20%), radial-gradient(circle, $button-bg 20%, transparent 20%)
    &:after
        display: none
        bottom: -75%
        background-image: radial-gradient(circle, $button-bg 20%, transparent 20%), radial-gradient(circle, $button-bg 20%, transparent 20%), radial-gradient(circle, transparent 10%, $button-bg 15%, transparent 20%), radial-gradient(circle, $button-bg 20%, transparent 20%), radial-gradient(circle, $button-bg 20%, transparent 20%), radial-gradient(circle, $button-bg 20%, transparent 20%), radial-gradient(circle, $button-bg 20%, transparent 20%)

    &:active
        &:before
            display: block
            animation: topBubbles ease-in-out 0.75s forwards
            @keyframes topBubbles
                0%
                    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%
                50%
                    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%
                100%
                    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%
        &:after
            display: block
            animation: bottomBubbles ease-in-out 0.75s forwards
            @keyframes bottomBubbles
                0%
                    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%
                50%
                    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%
                100%
                    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%

@function randomNum($min, $max)
  $rand: random()
  $randomNum: $min + floor($rand * (($max - $min) + 1))
  @return $randomNum

@function makeShadowString($posOn, $shadowColor)
  $shadowString: ""

  @if $posOn
    @for $i from 1 through 10
      $shadowString: $shadowString + "#{randomNum(-100, 100)}px #{randomNum(-100, 100)}px 0 0 #{$shadowColor}, "
  @else
    @for $i from 1 through 10
      $shadowString: $shadowString + "0px 0px 0px #{randomNum(5, 10)}px #{$shadowColor}, "

  $shadowString: str-slice($shadowString, 1, str-length($shadowString) - 2)
  @return unquote($shadowString)