a {text-decoration: none;}
.text-justify {text-align: justify;}
.fs-1125 {font-size:1.125em;}
        body {
            padding-top: 56px; /* Height of the navbar */
        }
        .hero {
            background-size: cover;
            background-position: center;
            height: 100vh;
        }
		.hero::before {
            content: '';
            position: absolute;
            top: 56px;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.4);
		}
		.hero-in {
		position: absolute;
		z-index: 1;
		}
        .fade-in {
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        .fade-in.visible {
            opacity: 1;
        }
        .event-card {
            transition: transform 0.3s ease-in-out;
        }
        .event-card:hover {
            transform: scale(1.05);
        }
        .navbar {
            transition: transform 0.3s ease-in-out;
        }
        .navbar.hidden {
            transform: translateY(-100%);
        }
		        .staff-card {
            height: 100%;
        }
        .staff-image {
            width: 100%;
            height: 300px;
            object-fit: cover;
			object-position: top;
        }
		.h-60px {
			height: 60px;
		}
		.w-60px {
			width: 60px;
		}
		.h-100px {
			height: 100px;
		}
		.w-100px {
			width: 100px;
		}
		.h-150px {
			height: 150px;
		}
		.w-150px {
			width: 150px;
		}
		.h-200px {
			height: 200px;
		}
		.w-200px {
			width: 200px;
		}
		.h-250px {
			height: 250px;
		}
		.w-250px {
			width: 250px;
		}
		.max-h-100 {
			height: 100%;
		}
		.max-w-100 {
			width: 100%;
		}
		.m-h-100vh {
			max-height: 100vh;
		}
		.h-auto { height: auto;}
		.w-auto { width: auto; }
		.m-w { max-width: 100%; }
		.justify-items-center {justify-items: center !important;}
	.readmore-right-bottom {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.readmore-right-bottom .btn {
	margin-top:auto;
    align-self: flex-end;
}
.lazy {
      background-color: #f0f0f0; /* Warna latar placeholder */
      display: block;
    }
.success-hover:hover {
		background: #e4fff3;
	}
.danger-hover:hover {
		background: #ffe6e6;
	}
.warning-hover:hover {
		background: #feffdd;
	}
.primary-hover:hover {
		background: #ddeaff;
	}
.black-hover:hover {
		background: #e3e3e3;
	}
	
	
@media(max-width: 768px){
  .w-md-100 {
    width: 100% !important;
  }
}

.text-hover-bg {
  position: relative;
  padding: 0 10px; /* Padding for visual adjustment */
  color: #000;
}

.text-hover-bg::before {
  position: absolute;
  left: 0;
  width: 0;
  height: 100%;
  content: "";
  background-color: #fff;
  mix-blend-mode: difference; /* difference */
  transition: 0.3s;
}

.text-hover-bg:hover::before {
  width: 100%;
}