#main_page_header {
  height: 50px; /* adjust if needed */
  background-color: #fff;
}

.header-menu {
  list-style: none;
  gap: 25px;
}

.header-menu li a {
  text-decoration: none;
  font-weight: 200;
  color: #222;
}

.header-menu li a:hover {
  color: #DFB163; /* brand highlight */
}

.diya_img_slider{
  width: 100%;
  height: 100%;
  object-fit: cover;      
  object-position: center;
}

/* Modal Background */
.slider-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.95);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

/* Container */
.slider-container{
    position:relative;
    width:65%;
    max-width:750px;
}

/* Image container */
.slider-image-container{
    position:relative;
}

#sliderImage{
    width:100%;
    border-radius:8px;
}

/* Center Grey Band */
.center-band{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

    background:rgba(11, 11, 11, 0.33);
    padding:2px 8px;
    border-radius:4px;

    display:flex;
    align-items:center;
    gap:5px;
    box-shadow:0 8px 25px rgba(0,0,0,0.3);
    color:rgb(255, 255, 255);
    font-weight:300;
    letter-spacing:1px;

    backdrop-filter:blur(1px);
}

.band-logo{
    width:28px;
    height:28px;
    object-fit:contain;
}

/* Arrows */
.nav-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:35px;
    color:white;
    cursor:pointer;
    padding:10px;
    user-select:none;
}

.nav-arrow.left{ left:-60px; }
.nav-arrow.right{ right:-60px; }

/* Close Button */
.close-btn{
    position:absolute;
    top:20px;
    right:30px;
    font-size:28px;
    color:white;
    cursor:pointer;
}