/* Responsive */
@media(max-width:1024px){.header-top .search{flex:1; max-width:100%; margin-left:0;}}
@media(max-width: 768px) {
  .hamburger{display:block; top:12px; cursor:pointer;}
  .logo img {
    height: 45px;
  }
  /* mobile */
  
  .header-bottom nav{display:none;} /* hide desktop menu on small screens */
  .banner h2{font-size:1.5rem; bottom:20px; padding:5px 10px;}
  .categories{padding:30px; gap:15px;}
  .header-bottom nav ul li ul{display:block; opacity:0; pointer-events:none; transform:none;}
  .about-content {
    flex-direction: column;
    text-align: center;
  }

  .about-logo img {
    margin-bottom: 20px;
  }

  .services-list {
    justify-content: center;
  }
  .header-top .search {
    position: relative;
    width: auto;
    max-width: none;
    flex: unset;
  }

  .header-top .search input {
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    padding: 8px 12px;
    font-size: 15px;
    z-index: 10;
  }

  .header-top .search.active input {
    width: 180px;         /* width when opened */
    opacity: 1;
    visibility: visible;
    right: 31px;          /* leave space for icon */
  }

  .header-top .search button.search-toggle {
    position: relative;
    z-index: 20;
    background: transparent;
    border: none;
    color: #00A0E3;
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
  }

  .header-top .search button.search-toggle:focus {
    outline: none;
  }
  .header-top .logo
  {
    padding: 0 18px;
  }
  .header-top
  {
    padding: 5px 8px;
  }
  .header-top .right
  {
    margin: 0px auto 0; font-size: 14px;
  }
  .header-top .logo {
    font-size: 14px;
  }
  
/* slider */
.banner {
    height: 180px; /* or any mobile-friendly height */
    position: relative; /* keep relative so absolute images are inside */
  }

  .banner img {
    position: absolute; /* must be absolute to stack images */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* crops instead of stretching */
  }

  .banner h2 {
    font-size: 1.3rem;
    bottom: 10px;
    padding: 6px 12px;
  }

  .dots-container {
    bottom: 10px;
  }
  
}