*{box-sizing:border-box;margin:0;padding:0}
body{        margin: 0 auto;    max-width: 430px;background:#e8eaf0;display:flex;justify-content:center;padding:2rem 1rem;font-family:'Segoe UI',sans-serif}
.phone{width:360px;background:#F7F8FA;border-radius:40px;border:8px solid #1a1a1a;overflow:hidden;box-shadow:0 0 0 2px #333,0 20px 60px rgba(0,0,0,0.35)}
.notch{background:#1a1a1a;height:28px;display:flex;align-items:center;justify-content:center}
.np{width:80px;height:12px;background:#000;border-radius:20px}
.screen{height:auto;overflow-y:auto;overflow-x:hidden;background:#F7F8FA}
.screen::-webkit-scrollbar{display:none}

/* HEADER */
.hdr{background:#1B4FBE;padding:12px 16px 13px}
.ht{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.logo{display:flex;align-items:center;gap:7px}
.logo-i{width:29px;height:29px;background:#F47B20;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff}
.logo-t{font-size:15px;font-weight:800;color:#fff;letter-spacing:.6px}
.hicons{display:flex;gap:9px}
.ib{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ib svg{width:15px;height:15px;fill:#fff}
.sbar{display:flex;align-items:center;background:#fff;border-radius:10px;padding:7px 10px;gap:6px}
.sbar svg{width:14px;height:14px;fill:#888;flex-shrink:0}
.sbar span{font-size:12px;color:#aaa;flex:1}
.loc{display:flex;align-items:center;gap:2px;border-left:1px solid #ddd;padding-left:8px;font-size:11px;font-weight:700;color:#1B4FBE}

/* CTA */
.cta{display:flex;gap:8px;padding:10px 14px 8px;background:#fff}
.cb{flex:1;padding:9px 0;border-radius:10px;font-size:11px;font-weight:700;text-align:center;cursor:pointer}
.co{background:#F47B20;color:#fff}
.cg{background:#2E8B2E;color:#fff}

/* MANDI STRIP */
.mstrip{background:#fff;padding:7px 14px;display:flex;align-items:center;gap:8px;border-top:1px solid #eee;border-bottom:1px solid #eee}
.mlbl{font-size:11px;font-weight:800;color:#1a1a1a;white-space:nowrap}
.mitems{display:flex;gap:10px;flex:1;overflow:hidden}
.mitem{display:flex;align-items:center;gap:3px}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dg{background:#2E8B2E}.dy{background:#E0A800}.db{background:#1B4FBE}
.mc{font-size:10px;font-weight:600;color:#333}
.mv{font-size:10px;font-weight:700;color:#1B4FBE}
.mchg{font-size:9px;font-weight:600;color:#2E8B2E}
.mva{font-size:10px;font-weight:700;color:#1B4FBE;white-space:nowrap}

/* AD BANNER SLOT 1 */
.ad1{margin:8px 14px 0;border-radius:12px;background:#1B4FBE;padding:13px 15px;display:flex;align-items:center;justify-content:space-between}
.ad1-l .sp{font-size:9px;color:rgba(255,255,255,.7)}
.ad1-l .ttl{font-size:14px;font-weight:800;color:#fff;margin:2px 0}
.ad1-l .sub{font-size:10px;color:rgba(255,255,255,.85)}
.adbadge{background:#F47B20;color:#fff;font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px;display:inline-block}
.adcta{font-size:11px;color:#fff;font-weight:600;margin-top:6px}

/* SECTION */
.sec{background:#fff;margin-top:6px}
.sh{padding:11px 14px 5px;display:flex;justify-content:space-between;align-items:center}
.st{font-size:13px;font-weight:800;color:#1a1a1a}
.sa{font-size:11px;color:#1B4FBE;font-weight:600}

/* HSCROLL */
.hscroll{display:flex;gap:10px;padding:6px 14px 10px;overflow-x:auto}
.hscroll::-webkit-scrollbar{display:none}

/* CATEGORIES */
.cat{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.cat-i{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px}
.cat-l{font-size:10px;font-weight:600;color:#444;text-align:center}

/* PRODUCTS */
.pcard{flex-shrink:0;width:100px;border-radius:11px;border:1px solid #E8EDF5;background:#fff;overflow:hidden}
.pimg{width:100%;height:66px;display:flex;align-items:center;justify-content:center;font-size:24px}
.pinfo{padding:6px 7px}
.pbrand{font-size:9px;color:#888;font-weight:600;text-transform:uppercase}
.pname{font-size:10px;font-weight:700;color:#1a1a1a;line-height:1.3}
.pprice{font-size:10px;font-weight:700;color:#1B4FBE;margin-top:2px}

/* SLIDING ADS BOX */
.adbox{margin:0 14px;background:#fff;border-radius:12px;border:1px solid #E8EDF5;overflow:hidden}
.adbox-hdr{padding:6px 12px;display:flex;justify-content:space-between;align-items:center;background:#F7F8FA;border-bottom:1px solid #E8EDF5}
.adbox-lbl{font-size:10px;font-weight:700;color:#555}
.adbox-badge{background:#F47B20;color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:9px}
.adtrack{display:flex;gap:8px;padding:8px;overflow-x:auto}
.adtrack::-webkit-scrollbar{display:none}
.adcard{flex-shrink:0;width:115px;border-radius:8px;overflow:hidden;border:1px solid #E8EDF5;background:#fff}
.adimg{height:58px;display:flex;align-items:center;justify-content:center;font-size:20px}
.adinfo{padding:5px 7px}
.adname{font-size:10px;font-weight:700;color:#1a1a1a}
.adtag{font-size:9px;color:#888;margin-top:1px}
.adlnk{font-size:9px;color:#1B4FBE;font-weight:700;margin-top:3px}
.dots{display:flex;justify-content:center;gap:4px;padding:3px 0 5px}
.dot2{width:5px;height:5px;border-radius:50%;background:#ddd}
.dot2.on{background:#1B4FBE;width:14px;border-radius:3px}

/* HOME SERVICES */
.hsvc{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.hsvc-i{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;border:2px solid #E8EDF5;background:#fff}
.hsvc-l{font-size:10px;font-weight:600;color:#444;text-align:center;width:58px;line-height:1.2}

/* LOCAL SERVICES */
.lsvc{flex-shrink:0;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #E8EDF5;border-radius:10px;padding:8px 12px}
.lsvc-i{font-size:18px}
.lsvc-n{font-size:11px;font-weight:600;color:#1a1a1a;white-space:nowrap}
.lsvc-c{font-size:9px;color:#888;white-space:nowrap}

/* RENT & HIRE */
.rcard{flex-shrink:0;width:128px;border-radius:12px;border:1px solid #E8EDF5;background:#fff;overflow:hidden}
.rimg{height:70px;display:flex;align-items:center;justify-content:center;font-size:30px}
.rinfo{padding:7px 9px}
.rtype{font-size:9px;font-weight:700;color:#F47B20;text-transform:uppercase}
.rname{font-size:11px;font-weight:700;color:#1a1a1a}
.rprice{font-size:10px;font-weight:700;color:#1B4FBE;margin-top:2px}

/* TRENDING SEARCH */
.tcard{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.tcard-i{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;border:1.5px solid #E8EDF5}
.tcard-l{font-size:10px;font-weight:600;color:#333;text-align:center;width:68px;line-height:1.3}

/* DAILY ESSENTIALS */
.decard{flex-shrink:0;width:110px;border-radius:12px;border:1px solid #E8EDF5;background:#fff;overflow:hidden;cursor:pointer}
.deimg{height:70px;display:flex;align-items:center;justify-content:center;font-size:28px}
.deinfo{padding:6px 8px}
.dename{font-size:11px;font-weight:700;color:#1a1a1a}
.detag{font-size:9px;color:#888;margin-top:1px}
.decta{font-size:9px;color:#1B4FBE;font-weight:700;margin-top:3px}

/* REAL ESTATE */
.recard{flex-shrink:0;width:148px;border-radius:12px;background:#fff;border:1px solid #E8EDF5;overflow:hidden}
.reimg{width:100%;height:72px;display:flex;align-items:center;justify-content:center;font-size:28px}
.reinfo{padding:7px 9px}
.retitle{font-size:11px;font-weight:700;color:#1a1a1a}
.remeta{font-size:10px;color:#888;margin-top:2px}
.reprice{font-size:12px;font-weight:700;color:#1B4FBE;margin-top:3px}

/* BOTTOM NAV */
.bnav{background:#fff;border-top:1px solid #E8EDF5;display:flex;padding:8px 0 12px;position:sticky;bottom:0}
.ni{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.ni svg{width:20px;height:20px;fill:#aaa}
.ni span{font-size:10px;font-weight:500;color:#888}
.ni.on svg{fill:#1B4FBE}
.ni.on span{color:#1B4FBE}
.postbtn{width:40px;height:40px;background:#1B4FBE;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:-8px}
.postbtn svg{width:18px;height:18px;fill:#fff }

a {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: unset !important;
}

/* Make link behave like block */
a {
    text-decoration: none;
    color: inherit;
}

/* Card clickable area */
a .cat,
a .tcard,
a .lsvc {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

/* CLICK EFFECT */
a:active .cat,
a:active .tcard,
a:active .lsvc {
    transform: scale(0.94);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Optional ripple feel */
a .cat-i,
a .tcard-i,
a .lsvc-i {
    transition: transform 0.15s ease;
}

a:active .cat-i,
a:active .tcard-i,
a:active .lsvc-i {
    transform: scale(0.9);
}
a .cat,
a .tcard,
a .lsvc {
    will-change: transform;
}

* {
    -webkit-tap-highlight-color: transparent;
}


 .cat-i img {
      width: 30px;
      height: 30px;

    }
     .hsvc-i img {
      width: 30px;
      height: 30px;

    }
     .lsvc-i img {
      width: 30px;
      height: 30px;

    }
     .tcard-i img {
      width: 30px;
      height: 30px;

    }
    .slider-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

    .slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.slider::-webkit-scrollbar {
    display: none;
}

.slide {
    flex: 0 0 100%;
    position: relative;
    scroll-snap-align: center;
}

.slide img {
    width: 100%;
    aspect-ratio: 16/5;   /* adjust this */
    object-fit: cover;
    border-radius: 10px;
}

/* Ad Badge */
.ad-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff3b3b;
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 12px;
}

/* Dots */
.adsdots {
    text-align: center;
    margin-top: 6px;
}

.adsdot {
    height: 7px;
    width: 7px;
    margin: 3px;
    display: inline-block;
    background: #ccc;
    border-radius: 50%;
    transition: 0.3s;
}

.adsdot.active {
    background: #000;
    transform: scale(1.2);
}



/* ===== VERTICAL ADS LIST ===== */

.ads-vlist{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:10px;
}

/* CARD */
.ads-item{
    display:flex;
    align-items:center;
    background:#fff;
    border:1px solid #E8EDF5;
    border-radius:12px;
    padding:8px;
    transition:0.15s;
}

/* CLICK EFFECT */
.ads-item:active{
    transform:scale(0.97);
}

/* IMAGE LEFT */
.ads-item-img{
    width:55px;
    height:55px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    flex-shrink:0;
}

/* RIGHT CONTENT */
.ads-item-info{
    flex:1;
    padding:0 10px;
}

/* TEXT */
.ads-item-name{
    font-size:13px;
    font-weight:700;
    color:#1a1a1a;
}

.ads-item-tag{
    font-size:11px;
    color:#777;
    margin-top:2px;
}

.ads-item-action{
    font-size:11px;
    color:#1B4FBE;
    font-weight:700;
    margin-top:4px;
}

/* RIGHT ARROW */
.ads-item::after{
    content:"›";
    font-size:18px;
    color:#aaa;
}


    body {
      padding: 0rem 0rem !important;
      max-width: 100% !important;
      margin: 0 auto;
      min-height: 100vh;
      padding-bottom: 85px !important;
    }



.screen{
      width: 100%;
      min-height: 100vh;
      background: #f3f5f8;
}


/* ===== CITY POPUP ===== */
.city-popup{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    display:none;
    justify-content:center;
    align-items:flex-end;
    z-index:9999;
}

/* Bottom sheet style (like app) */
.city-box{
    width:100%;
    max-width:430px;
    background:#fff;
    border-radius:20px 20px 0 0;
    padding:15px;
    animation:slideUp .25s ease;
}

/* Header */
.city-header{
    font-size:16px;
    font-weight:800;
    margin-bottom:10px;
    text-align:center;
}

/* Search */
.city-search input{
    width:100%;
    padding:10px;
    border-radius:10px;
    border:1px solid #E8EDF5;
    font-size:13px;
    outline:none;
}

/* List */
.city-list{
    margin-top:10px;
    max-height:300px;
    overflow-y:auto;
}

/* Item */
.city-item{
    padding:12px;
    border-bottom:1px solid #eee;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}

/* Click effect */
.city-item:active{
    background:#f3f5f8;
}

/* Animation */
@keyframes slideUp{
    from{transform:translateY(100%)}
    to{transform:translateY(0)}
}


/* POPULAR CITIES */
.popular-cities{
    margin-bottom:10px;
}

.pc-title{
    font-size:13px;
    font-weight:700;
    margin-bottom:6px;
}

.pc-list{
    display:flex;
    gap:8px;
    overflow-x:auto;
}

.pc-item{
    background:#F3F5F8;
    padding:8px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
}

.pc-item:active{
    transform:scale(0.95);
}


/* ===== TRANSPARENT LOADER ===== */
.app-loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;

    /* Transparent glass effect */
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    z-index:10000;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* Center box */
.loader-box{
    text-align:center;
    background: rgba(255,255,255,0.7);
    padding:16px 20px;
    border-radius:14px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Spinner */
.loader-spinner{
    width:40px;
    height:40px;
    border:4px solid rgba(0,0,0,0.1);
    border-top:4px solid #1B4FBE;
    border-radius:50%;
    animation:spin 0.8s linear infinite;
    margin:0 auto 10px;
}

/* Text */
.loader-text{
    font-size:13px;
    font-weight:600;
    color:#333;
}





/* ===== POPULAR CITIES MODERN ===== */

.popular-cities{
    margin-bottom:12px;
}

/* Title */
.pc-title{
    font-size:14px;
    font-weight:800;
    margin-bottom:8px;
    color:#1a1a1a;
}

/* Scroll list */
.pc-list{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding-bottom:4px;
}
.pc-list::-webkit-scrollbar{
    display:none;
}

/* Card */
.pc-card{
    flex-shrink:0;
    min-width:90px;
    background: linear-gradient(135deg,#ffffff,#f3f6ff);
    border-radius:14px;
    padding:10px 8px;
    text-align:center;
    cursor:pointer;

    border:1px solid #E8EDF5;

    /* soft shadow */
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);

    transition: all 0.2s ease;
}

/* Hover / tap */
.pc-card:active{
    transform: scale(0.95);
}

/* Icon circle */
.pc-icon{
    width:42px;
    height:42px;
    margin:0 auto 6px;
    border-radius:50%;
    background: linear-gradient(135deg,#1B4FBE,#4e7bff);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:16px;
    font-weight:700;
}

/* If image used */
.pc-icon img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}

/* Name */
.pc-name{
    font-size:11px;
    font-weight:700;
    color:#333;
    white-space:nowrap;
}



.hscroll {
    display: flex;
    overflow-x: auto;
    gap: 10px;
}


  /* COMMON CARD FIX */
.cat, .hsvc, .tcard{
    width: 80px;
    flex: 0 0 auto;
    text-align: center;
}

/* COMMON ICON FIX */
.cat-i, .hsvc-i, .tcard-i {
    width: 60px;
    height: 60px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* COMMON TEXT FIX */
.cat-l, .hsvc-l, .tcard-l {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* max 2 lines */
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 11px;
    line-height: 1.3;
    margin-top: 6px;

    word-break: break-word;
}




  /* COMMON CARD FIX */
.lsvc {
    width: 140px;
    height: 65px;
    flex: 0 0 auto;
    text-align: center;
}

/* COMMON ICON FIX */
.lsvc-i {
    width: 40px;
    height: 40px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* COMMON TEXT FIX */
 .lsvc-l {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* max 2 lines */
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 11px;
    line-height: 1.3;
    margin-top: 6px;

    word-break: break-word;
}



 .grid-container {
             display: grid;
             grid-template-columns: repeat(5, 1fr);
             /* desktop */
             gap: 12px;
             padding: 10px;
         }

         /* Tablet */
         @media (max-width: 992px) {
             .grid-container {
                 grid-template-columns: repeat(5, 1fr);
             }
         }

         /* Mobile */
         @media (max-width: 600px) {
             .grid-container {
                 grid-template-columns: repeat(4, 1fr);
             }
         }

         /* Card */
         /* .cat {
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: 0.2s;
}

.cat:hover {
    transform: translateY(-3px);
}

/* Image Box */
         .cat-i {
             width: 100%;
             height: 70px;
             border-radius: 10px;
             display: flex;
             align-items: center;
             justify-content: center;
             overflow: hidden;
         }

         .cat-i img {
             max-width: 50px;
             max-height: 50px;
         }

         /* Label */
         .cat-l {
             display: block;
             margin-top: 6px;
             font-size: 13px;
             font-weight: 500;
             color: #333;
         }



   .no-data-box {
    margin: 20px;
    padding: 25px;
    background: #f9fbff;
    border-radius: 16px;
    text-align: center;
}

.no-data-img {
    font-size: 35px;
    margin-bottom: 10px;
}

.no-data-heading {
    font-size: 14px;
    font-weight: 600;
}

.no-data-sub {
    font-size: 12px;
    color: #666;
}






/* ===== GLOBAL SCALE FOR MOBILE ===== */
html {
    font-size: 16px; /* base */
}

@media (max-width: 480px) {
    html {
        font-size: 18px; /* increase overall scale */
    }
}

/* Make phone full width */
.phone {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0;
    border: none;
}

/* Increase text sizes */
.logo-t { font-size: 1rem; }
.sbar span { font-size: 0.85rem; }
.loc { font-size: 0.8rem; }

.st { font-size: 1.1rem; }
.sa { font-size: 0.9rem; }

.cat-l,
.hsvc-l,
.tcard-l,
.lsvc-n { font-size: 0.9rem; }

.pname { font-size: 0.95rem; }
.pprice { font-size: 0.9rem; }

/* Increase icon sizes */
.ib svg { width: 20px; height: 20px; }
.ni svg { width: 24px; height: 24px; }

/* Increase category / icon boxes */
.cat-i {
    width: 70px;
    height: 70px;
}

.hsvc-i {
    width: 70px;
    height: 70px;
}

.tcard-i {
    width: 80px;
    height: 80px;
}

/* Increase image sizes */
.cat-i img,
.hsvc-i img,
.lsvc-i img,
.tcard-i img {
    width: 45px;
    height: 45px;
}

/* Product card bigger */
.pcard {
    width: 130px;
}

.pimg {
    height: 90px;
    font-size: 30px;
}

/* Buttons bigger */
.cb {
    font-size: 0.80rem;
    padding: 12px 0;
}

/* Bottom nav text */
.ni span {
    font-size: 0.8rem;
}






/* ==========================================
=============================================
     SLIGHTLY SMALLER (PERFECT BALANCE)
==============================================
==============================================
=============================================*/

/* Small boost */
html {
    font-size: 14.5px; /* from 14 */
}

/* Text */
.logo-t { font-size: 14.5px; }
.st { font-size: 13.5px; }
.sa { font-size: 11.5px; }

.cat-l,
.hsvc-l,
.tcard-l,
.lsvc-n {
    font-size: 10.5px;
}

.pname { font-size: 10.5px; }
.pprice { font-size: 10.5px; }

/* Icons */
.ib svg { width: 17px; height: 17px; }
.ni svg { width: 21px; height: 21px; }

/* Boxes */
.cat-i {
    width: 56px;
    height: 56px;
}

.hsvc-i {
    width: 56px;
    height: 56px;
}

.tcard-i {
    width: 68px;
    height: 68px;
}

/* Images inside */
.cat-i img,
.hsvc-i img,
.lsvc-i img,
.tcard-i img {
    width: 32px;
    height: 32px;
}

/* Product */
.pcard {
    width: 108px;
}

.pimg {
    height: 72px;
    font-size: 25px;
}

/* Button */
.cb {
    font-size: 11.5px;
    padding: 10px 0;
}

/* Bottom nav */
.ni span {
    font-size: 10.5px;
}



/* ==========================================
=============================================
     END SLIGHTLY SMALLER (PERFECT BALANCE)
==============================================
==============================================
=============================================*/




 /* ============================= */
/* GLOBAL CONTAINER */
/* ============================= */
.app-container {
  width: 100%;
}

/* ============================= */
/* DESKTOP MODE */
/* ============================= */
@media (min-width: 992px) {

  .app-container {
    background: #f5f7fb;
  }

  .screen {
    max-width: 1200px;
    margin: auto;
    background: #fff;
    border-radius: 12px;
    padding: 15px 20px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.05);
  }

  /* HEADER */
  .hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .ht {
    width: 250px;
  }

  .search-form {
    flex: 1;
    margin-left: 20px;
  }

  .sbar {
    display: flex;
    gap: 10px;
  }

  /* CTA */
  .cta {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
  }

  .cb {
    width: auto;
    padding: 12px 20px;
  }

  /* SECTIONS */
  .sec {
    margin-bottom: 25px;
  }

  /* HORIZONTAL → GRID */
  .hscroll {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
  }

  /* CATEGORY CARD */
  .cat, .hsvc, .tcard, .lsvc {
    width: 100%;
    text-align: center;
    transition: 0.3s;
  }

  .cat:hover, .hsvc:hover, .tcard:hover {
    transform: translateY(-5px);
  }

  /* ICON SIZE */
  .cat-i img,
  .hsvc-i img,
  .tcard-i img {
    width: 60px;
    height: 60px;
  }

  .cat-l, .hsvc-l, .tcard-l {
    font-size: 14px;
  }

  /* MANDI STRIP */
  .mstrip {
    justify-content: space-between;
    padding: 12px 20px;
    border-radius: 10px;
  }

  /* SLIDER */
  .slider {
    border-radius: 12px;
  }

  /* SEARCH RESULT CENTER */
  .search-results {
    width: 600px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* CITY POPUP */
  .city-box {
    max-width: 500px;
    margin: auto;
  }

  /* HIDE MOBILE NAV */
  .bnav {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .screen {
    padding: 10px;
  }

  .hscroll {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}
.desktop-nav {
  display: none;
}

@media (min-width: 992px) {
  .desktop-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
  }

  .dn-center a {
    margin: 0 15px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
  }

  .login-btn {
    background: #1B4FBE;
    color: #fff;
    padding: 6px 15px;
    border-radius: 6px;
  }
}