// Mixin for centering content
@mixin center-content {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

// Horizontal center: Center items horizontally
@mixin center-horizontal {
  display: flex;
  justify-content: center;
}

// Vertical center: Center items vertically
@mixin center-vertical {
  display: flex;
  align-items: center;
}

// Align items horizontally with space between them and center them vertically
@mixin horizontal-space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

// Mixin for transition effects
@mixin transition($properties, $duration: 0.3s) {
  transition: $properties $duration;
}

//Mixin for height, width and border
@mixin box($size, $border: none) {
  width: $size;
  height: $size;
  @if $border != none {
    border: $border;
  }
}

//mixin for end content
@mixin end-content {
  display: flex;
  align-items: center;
  justify-content: end;
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}