.hero {
      min-height: 50vh;
      background: #000 url(https://devethio.com/uploads/media/SFqkao30Vp4ouCt2q0lRAjLYXEF6jgL0JCrgehbg.jpg) center center no-repeat;
      background-size: cover;
      position: relative;
  }
  .hero:before {
      content:"";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
  }
  .hero-content {
      position: absolute;
      bottom: 15px;
      color: #fff;
  }
  /*--------------*/
  .bg-gradient-primary
{
    background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%) !important;
}

.bg-gradient-secondary
{
    background: linear-gradient(87deg, #f7fafc 0, #f7f8fc 100%) !important;
}

.bg-gradient-success
{
    background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%) !important;
}

.bg-gradient-info
{
    background: linear-gradient(87deg, #11cdef 0, #1171ef 100%) !important;
}

.bg-gradient-warning
{
    background: linear-gradient(87deg, #fb6340 0, #fbb140 100%) !important;
}

.bg-gradient-danger
{
    background: linear-gradient(87deg, #f5365c 0, #f56036 100%) !important;
}

.bg-gradient-light
{
    background: linear-gradient(87deg, #adb5bd 0, #adaebd 100%) !important;
}

.bg-gradient-dark
{
    background: linear-gradient(87deg, #212529 0, #212229 100%) !important;
}

.bg-gradient-default
{
    background: linear-gradient(87deg, #172b4d 0, #1a174d 100%) !important;
}

.bg-gradient-white
{
    background: linear-gradient(87deg, #fff 0, white 100%) !important;
}

.bg-gradient-neutral
{
    background: linear-gradient(87deg, #fff 0, white 100%) !important;
}

.bg-gradient-darker
{
    background: linear-gradient(87deg, black 0, black 100%) !important;
}

/*-------------------*/
.icon
{
    width: 3rem;
    height: 3rem;
}
.icon i,
.icon svg
{
    font-size: 2.25rem;
}
.icon + .icon-text
{
    width: calc(100% - 3rem - 1); 
    padding-left: 1rem;
}

.icon-xl
{
    width: 5rem;
    height: 5rem;
}
.icon-xl i,
.icon-xl svg
{
    font-size: 4.25rem;
}
.icon-xl + .icon-text
{
    width: calc(100% - 5rem - 1);
}

.icon-lg
{
    width: 4rem;
    height: 4rem;
}
.icon-lg i,
.icon-lg svg
{
    font-size: 3.25rem;
}
.icon-lg + .icon-text
{
    width: calc(100% - $icon-size-lg - 1);
}

.icon-sm
{
    width: 2rem;
    height: 2rem;
}
.icon-sm i,
.icon-sm svg
{
    font-size: 1.25rem;
}
.icon-sm + .icon-text
{
    width: calc(100% - $icon-size-sm - 1);
}

.icon-xs
{
    width: 1.25rem;
    height: 1.25rem;
}
.icon-xs i,
.icon-xs svg
{
    font-size: .5rem;
}
.icon-xs + .icon-text
{
    width: calc(100% - $icon-size-xs - 1);
}

.icon-actions > a
{
    font-size: .875rem; 

    display: inline-block;

    margin-right: .75rem;

    color: #8898aa;
}
.icon-actions > a:last-of-type
{
    margin-right: 0;
}
.icon-actions > a span
{
    font-weight: 600;

    margin-left: .1875rem;

    color: #8898aa;
}
.icon-actions > a:hover span
{
    color: #6a7e95;
}

.icon-actions > a,
.icon-actions > a:hover,
.icon-actions > a.active
{
    color: var(--theme-color-2);
}

.icon-actions > .favorite:hover,
.icon-actions > .favorite.active
{
    color: #ffd600;
}

.icon-actions > .love:hover,
.icon-actions > .love.active
{
    color: #f5365c;
}

.icon-actions > .like:hover,
.icon-actions > .like.active
{
    color: var(--theme-color);
}

.icon-actions-lg a
{
    font-size: 1.25rem;

    margin-right: .875rem;
}

.icon-shape
{
    display: inline-flex;

    padding: 12px;

    text-align: center;

    border-radius: 50%; 

    align-items: center;
    justify-content: center;
}
.icon-shape i,
.icon-shape svg
{
    font-size: 1.25rem;
}
.icon-shape.icon-lg i,
.icon-shape.icon-lg svg
{
    font-size: 1.625rem;
}
.icon-shape.icon-sm i,
.icon-shape.icon-sm svg
{
    font-size: .875rem;
}
.icon-shape.icon-xs i,
.icon-shape.icon-xs svg
{
    font-size: .6rem;
}
.icon-shape svg
{
    width: 30px;
    height: 30px;
}

.icon-shape-primary
{
    color: var(--theme-color);
    background-color: rgba(138, 152, 235, .5);
}

.icon-shape-secondary
{
    color: #cfe3f1;
    background-color: rgba(255, 255, 255, .5);
}

.icon-shape-success
{
    color: #1aae6f;
    background-color: rgba(84, 218, 161, .5);
}

.icon-shape-info
{
    color: #03acca;
    background-color: rgba(65, 215, 242, .5);
}

.icon-shape-warning
{
    color: #ff3709;
    background-color: rgba(252, 140, 114, .5);
}

.icon-shape-danger
{
    color: #f80031;
    background-color: rgba(247, 103, 131, .5);
}

.icon-shape-light
{
    color: #879cb0;
    background-color: rgba(201, 207, 212, .5);
}

.icon-shape-dark
{
    color: #090c0e;
    background-color: rgba(56, 63, 69, .5);
}

.icon-shape-default
{
    color: #091428;
    background-color: rgba(35, 65, 116, .5);
}

.icon-shape-white
{
    color: #e8e3e3;
    background-color: rgba(255, 255, 255, .5);
}

.icon-shape-neutral
{
    color: #e8e3e3;
    background-color: rgba(255, 255, 255, .5);
}

.icon-shape-darker
{
    color: black;
    background-color: rgba(26, 26, 26, .5);
}

.border-green{
  border: 1px solid #00ff00;
}