html{
    scroll-behavior: smooth;
}
body{
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.vertical-line {
  border-left: 1px dashed #ccc; /* Adjust width, style, and color as needed */
  height: 150px; 
}
.text-pink{
    color: #86C2F8;
}
.btn-menu:hover{
    background-color  : #86C2F8;
}
.bg-pink{
    background-color: #86C2F8;
}
.main-background{
    height: 100vh;
}
#main-img{
  width: 280px;
  height: 250px;
}
.main-background::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    object-fit: cover;
    background-image: url("../imgs/bg-yislam-main.png");  
    background-size: 100%; /* Adjust as needed */
    opacity: 0.3; /* Adjust for desired transparency */
    z-index: -1; /* Place behind content */
    background-repeat: no-repeat;
    background-attachment: scroll;   
    /* background-position: center center; */
}
#all-messages{
  height: 300px; /* Set a fixed height for the div */
  overflow-y: auto; /* Enable vertical scrolling when content overflows */
  border: 1px solid #ccc; /* Optional: Add a border for visual clarity */
  padding: 10px; /* Optional: Add some padding */
}
.form-control:focus {
    box-shadow: none;
    border-color: #86C2F8; /* or a specific color */
    outline: none; /* For older browsers or if focus-ring isn't sufficient */
}
.btn:hover {
  /* Set all relevant properties to their default values, or 'none' for transitions/shadows */
  background-color: #3841e3; /* Use Bootstrap CSS variables for better maintainability */
  color: white;
  border-color: var(--bs-btn-border-color);
  box-shadow: none;
  transition: none; /* Removes any transition effects on hover */
}
.mt-n1{
  margin-top: -1.25rem !important;
}
#wrapper-btn-menu{
  z-index: 99;
  /* opacity: 0.3; */
}
#wrapper-btn-menu::before{
  border-radius: 10px;
  content: "";
  z-index: 99;
  background-color: white;
  background-size: cover; /* Adjust as needed */
  opacity: 0.4; /* Adjust for desired transparency */
  z-index: -1; /* Place behind content */
  background-repeat: no-repeat;
/* opacity: 0.5; */
  background-image: url("../imgs/bg-yislam-main.png"); 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; 
}
#detail{
  position: relative;
  height: 100vh;
}
#detail::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; 
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background-image: url("../imgs/bg-yislam-tengah.png"); 
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: -1;
}
#venue{
  position: relative;
}

#venue::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; 
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background-image: url("../imgs/bg-yislam-center.png"); 
    background-attachment: fixed;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: -1;
}
#message-section{
  position: relative;
}
#message-section::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; 
    width: 100%;
    height: 100%;
    opacity: 0.8; 
    background-attachment: scroll;
    background-image: url("../imgs/bg-yislam-footer.png"); 
    background-size: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    z-index: -1;
}