/* ------------------------------------------------------------------
    Template All Variables Defined - Value Change with Your's Need
 -------------------------------------------------------------------- */
 $white:#FFF;
 $black:#000;
 $dark_black:#0E1E36;
 $dark_white:#EFF0F6;
 $primary: #4069FF;
 $primary1: #FF9C00;
 $primary2: #112441;
 $primary3: #04213F;
 $secondary: #0E0A01;
 $secondary1: #F3F3F2;
 $red: #EF0548;
 $dark_red: #FDF6F8;

// Theme Color - Defualt Colors
$textcolor: #243342;

// font family
$la: 'Lato', sans-serif;
$pop: 'Poppins', sans-serif;
$pa: 'Pathway Gothic One';

// font-family: "Font Awesome 5 Pro";
$fa: "Font Awesome 5 Pro";

// font family
.color-white { color: $white !important; }
.color-black { color: $black !important; }
.color-red { color: $red !important; }
.color-secondary { color: $secondary !important; }
.color-yellow { color: $primary1 !important; }
.bg-yellow { background-color: $primary1 !important; }
.bg-red { background-color: $red !important; }
.bg-dark_yellow { background-color: $secondary1 !important; }
.bg-dark_red { background-color: $dark_red !important; }
.color-d_black { color: $dark_black !important; }
.color-pd_black { color: $primary3 !important; }
.bg-dark_white { background-color: $dark_white !important; }
.color-primary { color: $primary !important; }
.font-la { font-family: $la !important; }
.fw-600 { font-weight: 600 !important; }
.fw-500 { font-weight: 500 !important; }
.mb-5 { margin-bottom: 5px !important; }


@mixin border-radius($r) {
    -webkit-border-radius: $r;
    -moz-border-radius: $r;
    -ms-border-radius: $r;
    border-radius: $r;
}

@mixin transition($transition) {
    -webkit-transition: all $transition ease-in-out;
    -moz-transition: all $transition ease-in-out;
    -ms-transition: all $transition ease-in-out;
    -o-transition: all $transition ease-in-out;
    transition: all $transition ease-in-out;
}

@mixin transform($transform) {
    -webkit-transform: $transform;
    -moz-transform: $transform;
    -ms-transform: $transform;
    -o-transform: $transform;
    transform: $transform;
}

@mixin coverbg {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}

@mixin appearance {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        cursor: pointer;
        display: block;
        width: 8px;
        color: #333;
        text-align: center;
        position: relative;
    }
}

@mixin overlay($color, $opacity) {
    z-index: 1;
    position: relative;

    &:before {
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        content: '';
        position: absolute;
        background: rgba($color, $opacity);
        @include transition(all 0.3s ease);
    }
}

@mixin absolute($z-index) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: $z-index;
}

@mixin before($zindex) {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    z-index: $zindex;
}

@function calculateRem($size) {
    $rem-size: $size / 16px;
    @return $rem-size * 1rem;
}

@mixin font-size($size: 16px) {
    font-size: $size;
    font-size: calculateRem($size);
}

@mixin letter-spacing($letter-track, $font-size) {
    letter-spacing: $letter-track * $font-size / 1000 + px;
}

@mixin align-center($type: 'all') {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    // all
    @if $type=='all' {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;

        // horizontal
    }

    @else if $type=='horizontal' {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;

        // vertical
    }

    @else if $type=='vertical' {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;

        // vertical
    }

    @else if $type=='bottom' {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }
}

@mixin placeholder($color, $font_size, $font_weight) {
    &::-webkit-input-placeholder {
        color: $color;
        font-size: $font_size;
        font-weight: $font_weight;
    }

    &::-moz-placeholder {
        color: $color;
        font-size: $font_size;
        font-weight: $font_weight;
    }

    &:-ms-input-placeholder {
        color: $color;
        font-size: $font_size;
        font-weight: $font_weight;
    }

    &:-moz-placeholder {
        color: $color;
        font-size: $font_size;
        font-weight: $font_weight;
    }
}

@mixin angle($pseudo, $flip: false, $use-background-color: false, $angle: 3deg) {

    // $pseudo: before, after, both
    @if $pseudo=='before'or $pseudo=='after'or $pseudo=='both' {
        z-index: 1;
        position: relative;
        $selector: if($pseudo=='both', '&:before,&:after', '&:#{$pseudo}');

        #{$selector} {
            left: 0;
            right: 0;
            content: '';
            z-index: -1;
            height: 100px;
            display: block;
            position: absolute;
            -webkit-backface-visibility: hidden;

            @if $use-background-color {
                background: $color__background-body;
            }

            @else {
                background: inherit;
            }
        }

        @if $pseudo=='before' {
            #{$selector} {
                top: 0;

                @if $flip {
                    transform: skewY($angle * -1);
                    transform-origin: 0 0;
                }

                @else {
                    transform: skewY($angle);
                    transform-origin: 100% 0;
                }
            }
        }

        @if $pseudo=='after' {
            #{$selector} {
                bottom: 0;

                @if $flip {
                    transform: skewY($angle);
                    transform-origin: 0 100%;
                }

                @else {
                    transform: skewY($angle * -1);
                    transform-origin: 100%;
                }
            }
        }

        @if $pseudo=='both' {

            &:before {
                top: 0;

                @if $flip {
                    transform: skewY($angle * -1);
                    transform-origin: 0 0;
                }

                @else {
                    transform: skewY($angle);
                    transform-origin: 100% 0;
                }
            }

            &:after {
                bottom: 0;

                @if $flip {
                    transform: skewY($angle);
                    transform-origin: 0 0;
                }

                @else {
                    transform: skewY($angle * -1);
                    transform-origin: 100%;
                }
            }
        }
    }
}