.card {
  height: 100% !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  background: white;
  height: 100%;
}

/* Category Label */
.category-label {
  background: #e63946;
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 8px;
  margin-right: 10px !important;
  width: fit-content !important;
}

.card-img-top {
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center top !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* .card-body {
  background-color: var(--clr-primary-60);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
} */

.affiliate-info {
  height: 100% !important;
}

/* .card-title {
  color: var(--clr-heading-black) !important;
  font-weight: var(--fw-600) !important;
}

.card-text {
  font-size: 0.9rem !important;
  font-weight: var(--fw-500) !important;
  line-height: 1.5 !important;
  height: 100% !important;
} */

/* .card-body .btn {
  display: flex !important;
  align-self: baseline !important;
  margin-top: auto !important;
  width: fit-content !important;
  gap: 10px !important;
  align-items: center !important;
  color: var(--clr-white) !important;
} */

.resources .card-img-top {
  height: 200px !important;
}

/* buttons property  */
.hero a:hover {
  color: var(--clr-white) !important;
}

.btn-outline-primary {
  --bs-btn-hover-color: var(--clr-primary-60) !important;
}

.btn-primary,
.button {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--clr-primary) !important;
  --bs-btn-border-color: var(--clr-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--clr-primary);
  --bs-btn-disabled-border-color: var(--clr-primary);
}

p a.button {
  color: #0086C4;
  background-color: white;
  border: solid 2px #0086C4;
  border-radius: 2px;
  padding: 20px;
  text-decoration: none;
}

p a.button:hover {
  color: white;
  background-color: white;
  background: #c93d02;
  color: #0086C4;
  background-color: white;
  border: solid 2px #0086C4;
  border-radius: 2px;
  padding: 20px;
  text-decoration: none;
}

/* two images particle style */
.utu-logo {
  max-height: 50px !important;
  margin-right: 3rem !important;
}

.aa-logo {
  max-height: 65px !important;
  margin-right: 1rem !important;
}

.tcb-logo-dt img {
  max-height: 50px !important;
}

.tcb-logo-mb img {
  max-height: 50px !important;
}

details {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 1em;
  border-radius: 5px;
  margin-bottom: 1rem;
}

summary {
  font-weight: bolder;
  font-family: var(--ff-heading);
  border-bottom: var(--clr-primary) solid 1px !important;
  font-size: 1.2em;
  cursor: pointer;
}

.news-thumbnail-wrapper {
  position: relative;
  display: inline-block;
}

.news-overlay {
  background-color: var(--clr-third);
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 4px 0;
  text-transform: uppercase;
  font-size: 0.85rem;
  border-top-left-radius: 0.375rem;
  /* match Bootstrap .rounded-start-2 top */
  border-top-right-radius: 0.375rem;
}

.news-page-thumbnail img {
  max-height: 300px !important;
  width: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 1/1;
}

.news-page-thumbnail {
  max-height: 300px;
  aspect-ratio: 1/1;
}

/*  NEWS front page news setting */
#front-page-news img {
  width: min-content !important;
  /* max-height: 220px !important; */
  object-fit: cover !important;
  border-bottom-right-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  aspect-ratio: 1/1 !important;
}

#front-page-news .g-content-array .g-grid {
  gap: 30px !important;
}

#front-page-news .g-array-item-image {
  order: 3 !important;
  align-self: baseline;
  bottom: 0 !important;
  display: flex;
  align-content: baseline;
  margin-bottom: 0 !important;
  margin-top: auto !important;
  width: 100% !important;
}

#front-page-news .g-array-item-image img {
  width: 100vw !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 1/1 !important;
  overflow: hidden;
}

#front-page-news .g-array-item-title {
  order: 1 !important;
  margin-bottom: 0 !important;
  padding: 15px 10px 10px !important;
  height: 100% !important;
  background-color: #ffffff;
}

#front-page-news .g-array-item-details {
  padding: 10px !important;
  margin-top: 0 !important;
}

/* Remove extra margin */
#front-page-news .g-array-item {
  background-color: hsla(197.9, 100%, 43.9%, 0.05);
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column;
  height: 100%;
}

#front-page-blog-posts .g-array-item-image {
  height: 150px;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3/2;
}

#front-page-blog-posts .g-array-item-image img {
  width: inherit;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  aspect-ratio: 3/2;
  overflow: hidden;
}

.fp-news .g-array-item-image img {
  width: inherit !important;
  height: 200px !important;
  object-fit: cover;
  border-radius: 8px !important;
  aspect-ratio: 1/1 !important;
  overflow: hidden;
}

.fp-news .g-array-item-image {
  height: 200px !important;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}

#g-colThree .g-array-item {
  /* border-bottom: 1px solid #ddd; */
  /* Light gray bottom border */
  padding-bottom: 10px !important;
}

/* Primary button */
.btn-primary-custom {
  background-color: var(--clr-primary-60) !important;
  color: var(--clr-white) !important;
  border: none;
}

.btn-primary-custom:hover {
  background-color: var(--clr-primary-80) !important;
  color: var(--clr-white);
}

/* Secondary button */
.btn-secondary-custom {
  background-color: var(--clr-secondary);
  color: var(--clr-white);
  border: none;
}

.btn-secondary-custom:hover {
  background-color: var(--clr-secondary-80);
  color: var(--clr-white);
}

/* Third (dark) button */
.btn-third-custom {
  background-color: var(--clr-third);
  color: var(--clr-white);
  border: none;
}

.btn-third-custom:hover {
  background-color: var(--clr-third-80);
}

/* Fourth (aqua) button */
.btn-fourth-custom {
  background-color: var(--clr-fourth);
  color: var(--clr-white);
  border: none;
}

.btn-fourth-custom:hover {
  background-color: var(--clr-fourth-80);
}

/* Link-style button */
.btn-link-custom {
  color: var(--clr-link);
  background: transparent;
  border: none;
  text-decoration: underline;
  padding: 0;
}

.btn-link-custom:hover {
  color: var(--clr-link-hover);
}

/* border buttons */
/* Primary border button */
.btn-primary-border {
  background: transparent;
  color: var(--clr-secondary-60);
  border: 2px solid var(--clr-secondary-60);
}

.btn-primary-border:hover {
  background: transparent;
  color: var(--clr-primary-80);
  border-color: var(--clr-primary-80);
}

/* Secondary border button */
.btn-secondary-border {
  background: transparent;
  color: var(--clr-secondary);
  border: 2px solid var(--clr-secondary);
}

.btn-secondary-border:hover {
  background: transparent;
  color: var(--clr-secondary-80);
  border-color: var(--clr-secondary-80);
}

/* Third (dark) border button */
.btn-third-border {
  background: transparent;
  color: var(--clr-third);
  border: 2px solid var(--clr-third);
}

.btn-third-border:hover {
  background: transparent;
  color: var(--clr-third-80);
  border-color: var(--clr-third-80);
}

/* Fourth (aqua) border button */
.btn-fourth-border {
  background: transparent;
  color: var(--clr-fourth);
  border: 2px solid var(--clr-fourth);
}

.btn-fourth-border:hover {
  background: transparent;
  color: var(--clr-fourth-80);
  border-color: var(--clr-fourth-80);
}

/* MATERIAL RESOURCE PAGE CUSTOMIZATION */
/* Responsive Grid */

/* .em.em-item.em-item-single .em-item-image {
  flex: 1 0;
  order: 1 !important;
} */