.btn-color-pink{
    background-color: #e9c8f3;
}
.btn-color-blue{
    background-color: #b2e3e9;
}
.btn-color-green{
    background-color: #78def9;
}
.btn-color-red{
    background-color: #f3adaf;
}

.icon-super{
    height: 80px;
    width: 80px;
}

.icon-award{
    color:#aed6c0;
}

.member-card .title{
    min-height:45px;
}

.bg-thumbs-up{
    background-image: url(/assets/images/success.jpg);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
    background-color: #caf6de;
}

.bg-alert-triangle{
    background-image: url(/assets/images/caution.jpg);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
    background-color: #edd684;
}
.bg-alert-octagon{
    background-image: url(/assets/images/danger.jpg);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
    background-color: #f4adae;
}

.bg-alert-orange{
    background-image: url(/assets/images/orange.jpg);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
    background-color: #e9b697;
}

.bg-award{
    background-image: url(/assets/images/success.jpg);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
    background-color: #caf6de;
}

.mobile-result{
    height:30px;
    width:30px;
    background-size: contain;
}

.profile-pic {
    position: relative;
}

.card-shadow {
  border: 4px solid white; /* White border */
  background-color: white; /* White background */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: all 0.3s ease-in-out; /* Optional: for hover effect */
}

.profile-pic img {
    width: 150px; /* Adjust as needed */
    height: 150px; /* Adjust as needed */
    border-radius: 50%;
    object-fit: cover;
    position: relative;
    z-index: 1; /* Ensure image stays above the shapes */
}

.profile-pic::before, .profile-pic::after {
    content: '';
    position: absolute;
    border-radius: 50px; /* This creates the pill-like rounded corners */
    z-index: 0; /* Keep these shapes behind the image */
}

.profile-pic::before {
    width: 100px;
    height: 50px;
    background-color: #a9efff;
    top: 30px;
    left: 25px;
    transform: rotate(45deg); /* Rotate the shape to an angle */
}

.profile-pic::after {
    width: 100px;
    height: 40px;
    border: 3px solid #007bff;
    bottom: 20px;
    right: 30px;
    transform: rotate(0deg); /* Rotate the shape to an angle */
}

.card-body img {
  width: 60px; /* Adjust as needed */
  height: 60px;
}

.card-body .img-wide {
  width: 95px !important;
  height: 60px;
}

.services-cards h5{
    font-size:15px !important;
    min-height:60px;
}

.fab-button {
  position: absolute;
  bottom: -15px;
  left: 15px;
}

.fab-button a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: #215df4;
  border-radius: 50%;
  color: white;
  font-size: 20px;
  text-decoration: none;
}

.auth-logo{
    width:80%;
    max-width:500px;
}


@media (max-width: 980px) {
    .profile-pic::before {
        top: 30px;
        left: 210px;
    }
    .profile-pic::after {
        bottom: 20px;
        right: 220px;
    }
}

@media (max-width: 770px) {
    .profile-pic::before {
        top: 30px;
        left: 120px;
    }
    .profile-pic::after {
        bottom: 20px;
        right: 130px;
    }
}