.btn {
    display: inline-block;
    background-color: firebrick;
    padding: 6px 12px;
    color: #fff;
    border-radius: 18px;
    text-decoration: none;
    transition: 0.3s;
}

.btn:hover{
    filter: brightness(1.1)
}

/*.hes-gallery{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    padding: 10px;
}*/

.hes-gallery img {
    width: 100%;
    object-fit: cover;
    transition: 0.3s;
    cursor: pointer;
}

.hes-gallery img:hover
{
    transform: scale(1.04);
    box-shadow: 2px 2px 6px #555;
}

    .hes-gallery{
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 500px) {
    .hes-gallery{
        grid-template-columns: 1fr 1fr;
    }
    
    
    
    
}


/*////////   MY AVATAR SKELETON LOADING START ////////  */
.user-cover  {
border-radius: 10px 50px 10px;    
width: 240px;
height: 285px;
display: block;
position: relative;
background-image:url("../Images/_DSC7572.jpg");
background-size: cover;
border:3px solid #11AEE7;  
    background-position: left;
}     
/*///////    SKELETON  //////////*/
.user-card.skeleton  {
vertical-align: middle;
 border-radius: 10px 50px 10px;
    width: 240px;
    height: 285px;
  display: block;     
}
@keyframes skeleton-loading {
  to {
    background-position: left;
  }
}
.user-card.skeleton  {
  cursor: progress;
  background: linear-gradient(90deg, #D2EBF5 5%, #00B3FF, #D2EBF5 95%) right / 700% 100%;
  animation: skeleton-loading 1.5s linear infinite;
}
/* ---  END ---- */   




/*//////   SCROLL  BAR  ///////  */

/* The progress container  */
.progress-container {
  width: 100%;
  height: 6px;
  background: #BECC06;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 6px;
  background: #04AA6D;
  width: 0%;
    
 background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
  color: #e8e8e8;
 /* pointer-events: none;*/
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}
/*//////   END  SCROLL  BAR  ///////  */




/*//////   The scrollTop //////  */


.scroll {
  cursor: pointer;
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 40px;
  right: -80px;
  border-radius: 100%;
 background-image:url("../Images/img/top.png");
    background-repeat: no-repeat;
    background-position: center;
/*  color: #fff;
  font-size: 44px;*/
  font-weight: bold;
  text-align: center;
/*  box-shadow: 0 0 5px 0px #888;*/
  transition: 300ms;
    z-index: 20;
}

.scroll i {
  margin-top: 10px;
 /* text-shadow: 0 0 2px #fff;*/
}

.scroll:hover i {
  animation-name: rotate;
  animation-duration: 300ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes rotate {
  from {margin-top: 15px}
  to {margin-top: 5px}
}

.visible {
  right: 30px;
  transition: all 400ms;
  transform: rotate(360deg)
}
/*//////   END  scrollTop //////  */






/*//////   ROLL OVER MY ICO ////// */
.fa:hover {
    opacity: 0.7;
}

.fa-roll {
  /*background: #ff9e4a;*/
  color: white;
}


.badge-90 {
  --bs-badge-padding-x: 0.65em;
  --bs-badge-padding-y: 0.35em;
  --bs-badge-font-size: 0.95em;
  --bs-badge-font-weight: 700;
  --bs-badge-color: #fff;
  --bs-badge-border-radius: 0.375rem;
  display: inline-block;
  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
  font-size: var(--bs-badge-font-size);
  font-weight: var(--bs-badge-font-weight);
  line-height: 1;
  color: var(--bs-badge-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--bs-badge-border-radius);
}
.badge-90:empty {
  display: none;
}