/* --- Text Color Hover Effects --- */

/* Sets hover text color to gold, white, or black */
.overlay-gold:hover {
  color: #be830e;
}

.overlay-white:hover {
  color: white;
}

.overlay-black:hover {
  color: black;
}

/* Icon color on hover */
.overlay-i-gold:hover i {
  color: #be830e;
}

.overlay-i-gold-tint:hover i {
  color: #F5EDDE;
}

.overlay-i-white:hover i {
  color: white;
}

.overlay-i-black:hover i {
  color: black;
}

/* --- Background Color Hover Effects --- */

/* Gold background on hover with black text */
.overlay-bg-gold:hover {
  background-color: #BE830E;
  color: #000;
}

/* Gold tint background for black elements */
.bg-black .overlay-bg-gold-tint:hover {
  background-color: #F5EDDE !important;
}

/* Gold tint overlay with slight opacity and zoom effect on media elements */
.overlay-bg-gold-tint:hover {
  background: rgba(245, 237, 222, 0.7) !important;
  color: #000;
}

/* Zoom effect on media element within gold-tint overlay */
.overlay-bg-gold-tint .media {
  overflow: hidden !important;
}

.overlay-bg-gold-tint img {
  transition: transform 1s ease, -webkit-transform 1s ease;
}

.overlay-bg-gold-tint:hover img {
  transform: scale(1.02);
}

.overlay-bg-gold-tint:hover i, 
.overlay-bg-gold-tint:hover .material-icons-outlined {
  color: #be830e;
}

/* --- White Background Hover Effects --- */

/* White overlay background with slight opacity and zoom effect on media elements */
.overlay-bg-white:hover {
  background: rgba(255, 255, 255, 0.7) !important;
  color: #000;
}

.bg-black .overlay-bg-white:hover {
  background-color: white !important;
}

/* Zoom effect on media element within white overlay */
.overlay-bg-white .media {
  overflow: hidden !important;
}

.overlay-bg-white .media img {
  transition: transform 1s ease, -webkit-transform 1s ease;
}

.overlay-bg-white:hover .media img {
  transform: scale(1.02);
}

.overlay-bg-white:hover i, 
.overlay-bg-white:hover .material-icons-outlined {
  color: #be830e;
}

/* --- Additional Hover Effects --- */

/* Underline text on hover */
.hover-underline:hover {
  text-decoration: underline;
}