:root{
    --primary-color: #c82a32;
    --primary-color-hover: #e61822;
    --light-color: #ffdfdf;
    --light2-color: #fbf7f7;
    --muted-color: #999;
}


.bg-brand-primary{
    background-color: var(--primary-color);
}
.text-brand-primary{
    color: var(--primary-color);
}
.btn-brand-primary{
    background-color: var(--primary-color);
    color: white;
}
.btn-brand-primary:hover{
    background-color: var(--primary-color-hover);
    color: white;
}
.border-brand-primary{
    border-color: var(--primary-color) !important;
}


.bg-brand-light{
    background-color: var(--light-color);
}
.text-brand-light{
    color: var(--light-color);
}

.bg-brand-light2{
    background-color: var(--light2-color);
}
.text-brand-light2{
    color: var(--light2-color);
}

.text-brand-muted{
    color: var(--muted-color);
}






.rounded-brand-lg{
    border-radius: 30px;
}
.rounded-brand{
    border-radius: 20px;
}
.rounded-brand-sm{
    border-radius: 15px;
}
.rounded-brand-esm{
    border-radius: 10px;
}
.ratio-square{
    aspect-ratio: 1/1;
}
.fi{
    position: relative;
    bottom: -5px;
}
.w-max-content{
    width: max-content;
}
.h-100{
    height: 100%;
}
.overflow-hidden{
    overflow: hidden;
}
.objetc-fit-contain{
    object-fit: contain;
}
.objetc-fit-cover{
    object-fit: cover;
}
.fs-sm{
    font-size: 14px;
}
.fs-esm{
    font-size: 12px;
}
.fs-eesm{
    font-size: 10px;
}
.lh-esm{
    line-height: 100%;
}
.shimmer {
  position: relative;
  overflow: hidden;
  /* background: #f6f7f800; */
  background-image: linear-gradient(
    90deg,
    #f6f7f800 0px,
    #ffffff4f 40px,
    #f6f7f800 80px
  );
  background-size: 600px 100%;
  animation: shimmer 2s infinite linear;

  pointer-events: none;
}
@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.flex-shrink-0{
    flex-shrink: 0 !important;
}
.cursor-pointer{
    cursor: pointer;
}