.id-card-holder {
  width: 225px;
  padding: 4px;
  margin: 0 auto;
  background-color: #1f1f1f;
  border-radius: 5px;
  position: relative;
}
.id-card-holder:after {
  content: "";
  width: 7px;
  display: block;
  background-color: #0a0a0a;
  height: 100px;
  position: absolute;
  top: 105px;
  border-radius: 0 5px 5px 0;
}
.id-card-holder:before {
  content: "";
  width: 7px;
  display: block;
  background-color: #0a0a0a;
  height: 100px;
  position: absolute;
  top: 105px;
  left: 222px;
  border-radius: 5px 0 0 5px;
}
.id-card {
  position: relative;
  background-color: #fff;
  padding: 10px 15px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0 1.5px 0px #b9b9b9;
}
.id-card img {
  margin: 0 auto;
}
.header img {
  max-width: 70px;
  min-height: 70px;
  margin-top: 15px;
  border-radius: 12px;
  margin: 0 auto;
  object-fit: cover;
}
.photo {
  position: relative;
  /* top: 0px;
  right: 0px; */
}
.photo img {
  width: 40px;
}
.id-card label {
  font-size: 10px;
  font-weight: 600;
}
.id-card h2 {
  font-size: 10px;
  font-weight: 400;
  margin: 0px 0;
}
/* .id-card h3 {
    font-size: 12px;
    margin: 2.5px 0;
    font-weight: 300;
} */
.qr-code img {
  width: 50px;
}
.id-card p {
  font-size: 7px;
  margin: 2px;
}
.id-card-hook {
  background-color: black;
  width: 70px;
  margin: 0 auto;
  height: 15px;
  border-radius: 5px 5px 0 0;
}
.id-card-hook:after {
  content: "";
  background-color: white;
  width: 47px;
  height: 6px;
  display: block;
  margin: 0px auto;
  position: relative;
  top: 6px;
  border-radius: 4px;
}
.id-card-tag-strip {
  width: 45px;
  height: 40px;
  background-color: #23aaf2;
  margin: 0 auto;
  border-radius: 5px;
  position: relative;
  top: 9px;
  z-index: 1;
  border: 1px solid #1577ab;
}
.id-card-tag-strip:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #1577ab;
  position: relative;
  top: 10px;
}
.id-card-tag {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 100px solid #23aaf2;
  margin: -10px auto -30px auto;
}
.id-card-tag:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid white;
  margin: -10px auto -30px auto;
  position: relative;
  top: -130px;
  left: -50px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.custom-loader {
  border: 2px solid #f3f3f3;
  border-top: 2px solid #351e72;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
}

/* profile-birds */
.profile-birds img{
  border-radius: 15px; /* max-width: 160px; min-height: 200px; */ object-fit: cover; height: 260px;
}

/*  */
.carousel_banner.carousel .carousel-inner .carousel-item::after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #24AAF3;
  background: linear-gradient(90deg,rgba(36, 170, 243, 1) 0%, rgba(36, 170, 243, 0) 75%);
}
.carousel_banner.carousel .carousel-inner .carousel-item .carousel-caption{
  text-align: left;
  right: 0%;
  left: 0%;
  z-index: 1;
  top: calc(100% - 64%);
}
.carousel_banner.carousel .carousel-inner .carousel-item .carousel-caption h5{
  font-size: 44px;
  color: #fff;
  font-weight: 900;
}
@media(width <= 991px){
  .carousel_banner.carousel .carousel-inner .carousel-item .carousel-caption h5{
    font-size: 34px;
  }
}
/* container layout */
.profile-progress-wrap{
  display:block; padding:.5rem .5rem; border:1px solid #e5e7eb; border-radius:8px;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); min-width: 200px;
}
.profile-progress-wrap .pp-left{flex:1 1 auto;}
.profile-progress-wrap .pp-right{display:flex; flex-direction:row; align-items:center; justify-content: space-between;}

.pp-title{font-weight:600; font-size:.9rem; margin-bottom:.35rem;}
.pp-bar.progress{height:12px; background:#f1f5f9; box-shadow: inset 0 1px 2px rgba(0,0,0,.06);}
.pp-percent{font-weight:700; font-size:.95rem; line-height:1;}
.pp-badge{
  padding:.15rem .5rem; font-size:.7rem; font-weight:600;
  border-radius:5px; color:#0b1320; background:#eef2ff; border:1px solid transparent;
}

/* Colors (Bootstrap-friendly + custom) */
:root{
  --pgmi: #0ea5b7;            /* your theme color for 51–69% (adjust if needed) */
  --pgmi-70: #59d08a;         /* light green for 70–90% */
  --bs-success:#198754;       /* Bootstrap success (green) */
  --bs-warning:#fd7e14;       /* Bootstrap orange */
  --bs-danger:#dc3545;        /* Bootstrap red */
}

/* progress fill */
.progress-bar.pc-90{ background: var(--bs-success); }
.progress-bar.pc-70{ background: var(--pgmi-70); }
.progress-bar.pc-50{ background: var(--pgmi); }
.progress-bar.pc-30{ background: var(--bs-warning); }
.progress-bar.pc-0 { background: var(--bs-danger); }

/* label pills match the bar color with a soft tint */
.pp-badge.pc-90{ background:rgba(25,135,84,.12); border-color:rgba(25,135,84,.25); }
.pp-badge.pc-70{ background:rgba(89,208,138,.15); border-color:rgba(89,208,138,.3); }
.pp-badge.pc-50{ background:rgba(14,165,183,.12); border-color:rgba(14,165,183,.28); }
.pp-badge.pc-30{ background:rgba(253,126,20,.12); border-color:rgba(253,126,20,.28); }
.pp-badge.pc-0 { background:rgba(220,53,69,.12); border-color:rgba(220,53,69,.28); }