//Custom Mixins

//Blue gradient background mixin
@mixin blue-gradient {
    background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
}

@mixin box-shadow-hover($color) {
    box-shadow: 0 0 0 4px $color;
}

// Typography size mixin for medium breakpoints
// Use this to adjust font size for medium breakpoint
@mixin responsive-font-size-md($font-size, $md-font-size) {
    font-size: $font-size;

    @include media-breakpoint-up(md) {
        font-size: $md-font-size;
    }
}
// Usage: @include responsive-font-size-md(mobile-font-size-in-rem, desktop-font-size-in-rem);
// Example: @include responsive-font-size-md(0.875rem, 1rem);
