/*Write Css*/

@media (max-width: 1200px){
    .header-middle .logo-wrapper img {
        height: 50px;
        margin-right: 10px;
    }
    .header-middle .middle-entry ul.main-nav {
        display: none; /* hidden by default on mobile */
        flex-direction: column;
        width: 100%;
        background: #fff;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 99;
    }
    .header-middle .middle-entry ul.main-nav.main-nav-show {
        display: flex;
    }
    .header-middle .middle-entry i {
        font-size: 28px;
        cursor: pointer;
    }
}


.sliderArea {
    height: auto;
}
.sliderArea figure {
    margin: 0;
    position: relative;
}
.sliderArea figure .slider-contents {
    padding: 20px;
}
@media (max-width: 768px){
    .sliderArea figure .slider-contents .contents-left {
        width: 100%;
    }
    .sliderArea figure .slider-contents .contents-right {
        display: none; /* hide right side for small screens */
    }
}


/* Mobile carousel items round and small */
 @media (max-width: 430px) {
 .promo-banner-box,
 .promo-banner-box .cat-contents { 
   height: 110px !important; 
   width: 110px !important; 
   border-radius: 50%; 
   overflow: hidden;
   margin: auto;
 }

 .promo -banner-box img { 
   max-width: 100%; 
   max-height: 100%; 
   object-fit: cover; 
   border-radius: 50%; 
     
 }

@media (max-width: 430px) {
  /* Make item itself small and round */
  .owl-item .item {
    width: 110px !important;
    height: 110px !important;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px; /* spacing between items */
  }

  .owl-item .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  /* Make the stage display flex so items wrap nicely */
  .owl-stage {
    display: flex !important;
    justify-content: start;
    gap: 5px; /* space between items */
  }

  /* Optional: remove Owl Carousel inline width */
  .owl-item {
    width: auto !important;
  }
}


/* Navbar Clickable */
/* Mobile responsive menu */
@media (max-width: 768px) {
    .main-nav {
        display: none !important; /* initially hidden */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: black !important; /* black background */
        flex-direction: column;
        padding: 10px 0;
        z-index: 9999;
    }

    /* Show menu when active */
    .middle-entry.active .main-nav {
        display: flex !important;
    }

    /* Menu items */
    .main-nav li {
        list-style: none;
        margin: 5px 0;
    }

    .main-nav li a {
        color: white !important; /* white text */
        text-decoration: none;
        padding: 10px 20px;
        display: block;
    }

    /* Optional: hover effect */
    .main-nav li a:hover {
        background-color: #333; /* dark gray on hover */
    }

    /* X icon */
    .middle-entry i.fa-xmark {
        color: white;
        font-size: 24px;
        cursor: pointer;
        display: block;
        position: absolute;
        top: 10px;
        right: 20px;
    }
}