.bg-primary {
   background: $color-primary !important;
   color: white !important;
}

.bg-primary-bright {
   background: $color-primary-bright !important;
   &.bg-hover {
      transition: background .2s;
      &:hover {
         background: rgba(11,91,182,.3) !important;
      }
   }
}

.bg-primary-gradient {
   background: linear-gradient(230deg, $color-primary, lighten($color-primary, 15%)) !important;
   color: white !important;
}

.bg-info {
   background: $color-info !important;
   color: white !important;
   &.bg-hover {
      transition: background .2s;
      &:hover {
         background: lighten($color-info, 10%) !important;
      }
   }
}

.bg-info-bright {
   background: $color-info-bright !important;
   &.bg-hover {
      transition: background .2s;
      &:hover {
         background: darken($color-info-bright, 5%) !important;
      }
   }
}

.bg-info-gradient {
   background: linear-gradient(230deg, $color-info, lighten($color-info, 15%)) !important;
   color: white !important;
}

.bg-secondary {
   background: $color-secondary !important;
   color: white !important;
   &.bg-hover {
      transition: background .2s;
      &:hover {
         background: lighten($color-secondary, 10%) !important;
      }
   }
}

.bg-secondary-bright {
   background: $color-secondary-bright !important;
   &.bg-hover {
      transition: background .2s;
      &:hover {
         background: darken($color-secondary-bright, 5%) !important;
      }
   }
}

.bg-secondary-gradient {
   background: linear-gradient(230deg, $color-secondary, lighten($color-secondary, 15%)) !important;
   color: white !important;
}

.bg-success {
   background: $color-success !important;
   color: white !important;
   &.bg-hover {
      transition: background .2s;
      &:hover {
         background: lighten($color-success, 10%) !important;
      }
   }
}

.bg-success-bright {
   background: $color-success-bright !important;
   &.bg-hover {
      transition: background .2s;
      &:hover {
         background: darken($color-success-bright, 5%) !important;
      }
   }
}

.bg-success-gradient {
   background: linear-gradient(230deg, $color-success, lighten($color-success, 15%)) !important;
   color: white !important;
}

.bg-danger {
   background: $color-danger !important;
   color: white !important;
   &.bg-hover {
      transition: background .2s;
      &:hover {
         background: lighten($color-danger, 10%) !important;
      }
   }
}

.bg-danger-bright {
   background: $color-danger-bright !important;
   &.bg-hover {
      transition: background .2s;
      &:hover {
         background: darken($color-danger-bright, 5%) !important;
      }
   }
}

.bg-danger-gradient {
   background: linear-gradient(230deg, $color-danger, lighten($color-danger, 15%)) !important;
   color: white !important;
}

.bg-warning {
   background: $color-warning !important;
   color: white !important;
   &.bg-hover {
      transition: background .2s;
      &:hover {
         background: lighten($color-warning, 10%) !important;
      }
   }
}

.bg-warning-bright {
   background: $color-warning-bright !important;
   &.bg-hover {
      transition: background .2s;
      &:hover {
         background: darken($color-warning-bright, 5%) !important;
      }
   }
}

.bg-warning-gradient {
   background: linear-gradient(230deg, $color-warning, lighten($color-warning, 15%)) !important;
   color: white !important;
}

.bg-light {
   background: $color-light !important;
}

.bg-dark {
   background: $color-dark !important;
   color: white !important;
   &.bg-hover {
      transition: background .2s;
      &:hover {
         background: lighten($color-dark, 10%) !important;
      }
   }
}

.bg-dark-bright {
   background: $color-dark-bright !important;
   &.bg-hover {
      transition: background .2s;
      &:hover {
         background: darken($color-dark-bright, 5%) !important;
      }
   }
}

.bg-dark-gradient {
   background: linear-gradient(230deg, $color-dark, lighten($color-dark, 15%)) !important;
   color: white !important;
}

.bg-facebook {
   background: $color-facebook !important;
   color: white !important;
}

.bg-twitter {
   background: $color-twitter !important;
   color: white !important;
}

.bg-linkedin {
   background: $color-linkedin !important;
   color: white !important;
}

.bg-whatsapp {
   background: $color-whatsapp !important;
   color: white !important;
}

.bg-instagram {
   background: $color-instagram !important;
   color: white !important;
}

.bg-dribbble {
   background: $color-dribbble !important;
   color: white !important;
}

.bg-google {
   background: $color-google !important;
   color: white !important;
}

.bg-youtube {
   background: $color-youtube !important;
   color: white !important;
}

// texts

.text-primary {
   color: $color-primary !important;
}

.text-secondary {
   color: $color-secondary !important;
}

.text-info {
   color: $color-info !important;
}

.text-success {
   color: $color-success !important;
}

.text-danger {
   color: $color-danger !important;
}

.text-warning {
   color: $color-warning !important;
}

.text-light {
   color: $color-light!important;
}

.text-facebook {
   color: $color-facebook!important;
}

.text-twitter {
   color: $color-twitter!important;
}

.text-google {
   color: $color-google!important;
}

.text-linkedin {
   color: $color-linkedin!important;
}

.text-instagram {
   color: $color-instagram!important;
}

.text-whatsapp {
   color: $color-whatsapp!important;
}

.text-dribbble {
   color: $color-dribbble!important;
}