/* =========================================================
   NawazOnline Final Targeted Repair
   Restores desktop/mobile hero visual, topbar black, and safe menu.
   ========================================================= */

.skip-link{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}
.skip-link:focus{
  position:fixed!important;
  left:16px!important;
  top:16px!important;
  z-index:999999!important;
  width:auto!important;
  height:auto!important;
  overflow:visible!important;
  background:#111!important;
  color:#fff!important;
  padding:10px 14px!important;
  border-radius:10px!important;
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
img{max-width:100%;height:auto}

/* Top contact bar must stay black on all devices */
.topbar{
  background:#0f0f14!important;
  color:#ffffff!important;
}
.topbar *{
  color:#ffffff!important;
}
.topbar a{
  color:#ffffff!important;
  text-decoration:none!important;
}

/* Keep header clean */
.logo img,
.logo-image img{
  width:auto!important;
  height:auto!important;
  max-height:70px!important;
  object-fit:contain!important;
}

/* HERO SLIDER FIX:
   Show the first slide as a normal image on every device.
   This avoids blank white animation issues on desktop and iPhone.
*/
.slider{
  position:relative!important;
  overflow:visible!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  background:transparent!important;
  box-shadow:none!important;
}
.slider .slide{
  display:none!important;
  position:relative!important;
  inset:auto!important;
  opacity:1!important;
  visibility:visible!important;
  animation:none!important;
  transform:none!important;
}
.slider .slide:first-child{
  display:block!important;
}
.slider .slide img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  opacity:1!important;
  visibility:visible!important;
  background:transparent!important;
  border-radius:24px!important;
  box-shadow:0 18px 45px rgba(0,0,0,.08)!important;
}

/* Mobile menu only, not full page layout */
@media(max-width:768px){
  .topbar{
    background:#0f0f14!important;
    color:#ffffff!important;
    padding:8px 0!important;
    text-align:center!important;
  }
  .topbar .container{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
  }
  .topbar span{
    display:block!important;
  }
  .nav{
    background:#fff!important;
  }
  .nav-wrap{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
  }
  .logo img,
  .logo-image img{
    max-width:245px!important;
    max-height:60px!important;
  }
  .hamb{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:52px!important;
    height:52px!important;
    flex:0 0 52px!important;
    border-radius:16px!important;
    background:#111!important;
    color:#fff!important;
    border:0!important;
    font-size:24px!important;
  }
  .menu{
    display:none!important;
    position:absolute!important;
    left:16px!important;
    right:16px!important;
    top:100%!important;
    background:#fff!important;
    border:1px solid rgba(255,37,106,.16)!important;
    border-radius:22px!important;
    box-shadow:0 20px 60px rgba(0,0,0,.14)!important;
    padding:16px!important;
    z-index:9999!important;
  }
  .menu.open,
  body.menu-open .menu{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
  }
  .menu a{
    display:flex!important;
    padding:13px 12px!important;
    border-bottom:1px solid #eee!important;
    color:#111!important;
    text-decoration:none!important;
    font-weight:800!important;
    line-height:1.2!important;
  }
  .menu .btn,
  .menu .navbtn{
    margin-top:10px!important;
    justify-content:center!important;
    background:#ff256a!important;
    color:#fff!important;
    border-radius:999px!important;
  }
  .hero .slider,
  .hero-grid .slider{
    margin-top:18px!important;
  }
  .mobile-cta{
    display:none!important;
  }
}

/* Make form/footer usable without overriding whole design */
@media(max-width:768px){
  .form{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .form input,
  .form select,
  .form textarea{
    width:100%!important;
    min-height:54px!important;
  }
  .form textarea{
    min-height:120px!important;
  }
  .footer a{
    word-break:break-word;
  }
}