// Font Family
$karla: 'Poppins', sans-serif;
$gilroy: 'Poppins', sans-serif;

// Colors
$text-color: #616161;
$text-color-2: #81a3bb;
$text-color-3: #69a1bb;
$border-color: #e3eeff;
$border-color-2: #ededed;

$white: #fff;
$black: #232323;
$grey: #f7f7fd;
$primary-color: #0c59db;
$secondary-color: #002249;

$secondary-soft: #4f79a9;

$soft-blue: #f5faff;

$bs1: rgba(36, 37, 38, 0.08) 4px 4px 15px 0px;
$bs2: rgba(36, 37, 38, 0.15) 4px 4px 30px 0px;
 

// A map of breakpoints.
$breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px,
);

// Respond above.
@mixin respond-above($breakpoint) {
    // If the breakpoint exists in the map.
    @if map-has-key($breakpoints, $breakpoint) {
        // Get the breakpoint value.
        $breakpoint-value: map-get($breakpoints, $breakpoint);

        // Write the media query.
        @media (min-width: $breakpoint-value) {
            @content;
        }

        // If the breakpoint doesn't exist in the map.
    } @else {
        // Log a warning.
        @warn 'Invalid breakpoint: #{$breakpoint}.';
    }
}

// Respond Below
@mixin respond-below($breakpoint) {
    // If the breakpoint exists in the map.
    @if map-has-key($breakpoints, $breakpoint) {
        // Get the breakpoint value.
        $breakpoint-value: map-get($breakpoints, $breakpoint);

        // Write the media query.
        @media (max-width: ($breakpoint-value - 1)) {
            @content;
        }

        // If the breakpoint doesn't exist in the map.
    } @else {
        // Log a warning.
        @warn 'Invalid breakpoint: #{$breakpoint}.';
    }
}

// Respond Between
@mixin respond-between($lower, $upper) {
    // If both the lower and upper breakpoints exist in the map.
    @if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper)
    {
        // Get the lower and upper breakpoints.
        $lower-breakpoint: map-get($breakpoints, $lower);
        $upper-breakpoint: map-get($breakpoints, $upper);

        // Write the media query.
        @media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
            @content;
        }

        // If one or both of the breakpoints don't exist.
    } @else {
        // If lower breakpoint is invalid.
        @if (map-has-key($breakpoints, $lower) ==false) {
            // Log a warning.
            @warn 'Your lower breakpoint was invalid: #{$lower}.';
        }

        // If upper breakpoint is invalid.
        @if (map-has-key($breakpoints, $upper) ==false) {
            // Log a warning.
            @warn 'Your upper breakpoint was invalid: #{$upper}.';
        }
    }
}

// mixin
@mixin transition($time) {
    -webkit-transition: all $time ease-out 0s;
    -moz-transition: all $time ease-out 0s;
    -ms-transition: all $time ease-out 0s;
    -o-transition: all $time ease-out 0s;
    transition: all $time ease-out 0s;
}

@mixin box-sizing($value) {
    -webkit-box-sizing: $value;
    -moz-box-sizing: $value;
    box-sizing: $value;
}

@mixin animation($value) {
    -webkit-animation: $value;
       -moz-animation: $value;
         -o-animation: $value;
            animation: $value;
  }

@mixin gradint($value : 90deg) {
    background-image: -webkit-linear-gradient(to right, #1fa2ff, #c779d0, #4bc0c8);
    background-image: -moz-linear-gradient(to right, #1fa2ff, #c779d0, #4bc0c8);
    background-image: -o-linear-gradient(to right, #1fa2ff, #c779d0, #4bc0c8);
    background-image: linear-gradient(to right, #1fa2ff, #c779d0, #4bc0c8);
}

@mixin gradinttext($value : 90deg) {
    background-image: -webkit-linear-gradient(to right, #1fa2ff, #c779d0, #4bc0c8);
    background-image: -moz-linear-gradient(to right, #1fa2ff, #c779d0, #4bc0c8);
    background-image: -o-linear-gradient(to right, #1fa2ff, #c779d0, #4bc0c8);
    background-image: linear-gradient(to right, #1fa2ff, #c779d0, #4bc0c8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}