/* common style */
.text-justify {
  text-align: justify !important;
}
.avatar {
  width: 200px;
  aspect-ratio: 3 / 4;
  background-color: gray;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  border-radius: 10px;
}

.bg-page {
  position: relative;
}

.bg-page::after {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url('../images/bg-index-1.png');
  background-repeat: repeat;
  background-size: 105%;
  background-position: top center;
  opacity: 0.3;
  z-index: -9;
}

/* header.php (includes/header.php) */
.i-email {
  padding: 5px !important;
  background-color: #FE5867;
  border-radius: 50%;
}
.dropdown-menu-cus[data-bs-popper] {
  right: -200%;
  left: auto;
}
.dropdown-menu-cus .dropdown-item:hover {
  color: var(--bs-gray-100);
  background-color: var(--bs-dark);
}

/* dev_index.php */
.t-project {
  min-height: 100px;
  background-image: url('../images/bg-home-plant.png');
  background-repeat: no-repeat;
  background-size: 105%;
  background-position: center;
}

#index {
  position: relative;
}

#index::after {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url('../images/bg-index-1.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.6;
  z-index: -1;
}

/* dev_team114010.php */
.tab-menu .nav-link {
  color: var(--bs-gray-500);
  font-size: 1.75rem;
}
.tab-menu .nav-link:hover {
  color: var(--bs-gray-900);
}
.tab-menu .active, .tab-menu .active:hover {
  color: var(--bs-blue);
  cursor: default;
}
.project-h1 {
  margin-bottom: 0.5rem;
  color: #385723;
  font-size: 1.7rem;
  font-weight: 500;
}
#tab1::after {
  content: ' ';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/bg-member-trees.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom right;
  opacity: 0.8;
  z-index: -1;
}
.pcard {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 1rem 0;
  background-color: transparent;
  align-items: center;
}
.member {
  display: flex;
  flex-direction: column;
  width: 220px;
  padding: 0.5rem;
  background-color: #FFF;
  align-items: center;
  border-radius: 20px;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
}
.member-h3 {
  font-size: 1.5rem;
  font-weight: 500;
}
.member-h4 {
  margin-top: 0.25rem;
  font-size: 1.1rem;
  font-weight: 300;
}
.pi-link {
  position: relative;
  text-decoration: none;
}
.pi-link::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 3px;
  left: -17px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-link-45deg' viewBox='0 0 16 16'><path d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z'/><path d='M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z'/></svg>") no-repeat center/contain;
}

@media (min-width: 768px) {
  .project-h1 { font-size: 2rem; }
}
@media (min-width: 992px) {
  .project-h1 { font-size: 2.3rem; }
}