@media(max-width:768px){

    .mobile-bottom-nav{
        position:fixed;
        left:0;
        bottom:0;
        width:100%;
        height:58px;
        background:#fff;
        display:flex;
        align-items:center;
        justify-content:space-around;
        z-index:9999;
        box-shadow:0 -2px 10px rgba(0,0,0,.15);
        border-top:1px solid #ddd;
    }

    .bottom-nav-item{
        position:relative;
        flex:1;
        height:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:2px;
        text-decoration:none;
        color:#555;
    }

    .bottom-nav-item i{
        font-size:20px;
        line-height:20px;
    }

    .bottom-nav-item span:last-child{
        font-size:10px;
    }

    .bottom-nav-item:hover{
        color:#0d6efd;
    }

    /* CART BADGE */
    .bottom-cart-badge{
        position:absolute;
        top:4px;
        right:calc(50% - 18px);
        min-width:16px;
        height:16px;
        padding:0 4px;
        display:flex;
        align-items:center;
        justify-content:center;

        background:#000;
        color:#fff;
        border-radius:50%;
        font-size:9px !important;
        font-weight:700;
        line-height:16px;
    }

    /* Page content ko bottom bar ke neeche jane se rokna */
    body{
        padding-bottom:58px;
    }
.bottom-services{
        position:relative;
    }

    .bottom-services-btn{
        border:0;
        background:none;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        width:100%;
        height:58px;
        color:#555;
        font-size:10px;
    }

    .bottom-services-btn i{
        font-size:20px;
        line-height:20px;
    }

    .bottom-services-dropdown{
        display:none;
        position:absolute;
        bottom:58px;
        left:50%;
        transform:translateX(-50%);
        width:180px;
        max-height:250px;
        overflow-y:auto;
        background:#fff;
        padding:5px 0;
        margin:0;
        list-style:none;
        border-radius:8px;
        box-shadow:0 0 10px rgba(0,0,0,.2);
        z-index:10000;
    }

    .bottom-services-dropdown.show{
       display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100000 !important;
    }

    .bottom-services-dropdown li a{
        display:block;
        padding:9px 12px;
        text-decoration:none;
        color:#333;
        font-size:12px;
    }

    .bottom-services-dropdown li a:hover{
        background:#f1f1f1;
    }
/* =========================
   ACCOUNT BUTTON
   ========================= */

.bottom-account {
    position: relative;
}

.bottom-account-btn,
.bottom-account-login {
    border: 0;
    background: none;
    width: 100%;
    height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #555;
    text-decoration: none;
    padding: 0;
}

.bottom-account-btn i,
.bottom-account-login i {
    font-size: 20px;
    line-height: 20px;
}

.bottom-account-btn span,
.bottom-account-login span {
    font-size: 10px;
}


/* =========================
   ACCOUNT OFFCANVAS
   ========================= */

.bottom-account-offcanvas {
    position: fixed;
    top: 0;
    left: 0;

    width: 50%;
    height: 100vh;
    background: #f8f9fc;
    z-index: 10002;
    transform: translateX(-100%);
    transition: transform .3s ease;
    box-shadow: 3px 0 15px rgba(0,0,0,.18);
    overflow-y: auto;
}
.bottom-account-offcanvas.show {
    transform: translateX(0);
}
/* =========================
   ACCOUNT OVERLAY
   ========================= */
.bottom-account-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,.35);
    z-index: 10001;
    display: none;
}
.bottom-account-overlay.show {
    display: block;
}
/* =========================
   ACCOUNT HEADER
   ========================= */
.bottom-account-header {
    display: flex;
    align-items: center;
    padding: 18px 15px;
    background: #e0edfe;
    border-bottom: 1px solid #dfe5ef;
}

.account-big-icon {
    font-size: 38px;
    color: #0d6efd;
    margin-right: 10px;
}

.bottom-account-header h5 {
    margin: 0;
    font-size: 15px;
    color: #222;
}

.bottom-account-header span {
    font-size: 11px;
    color: #777;
}

.bottom-account-close {
    margin-left: auto;

    border: 0;
    background: transparent;

    color: #555;

    font-size: 16px;
}


/* =========================
   ACCOUNT BODY
   ========================= */

.bottom-account-body {
    padding: 12px;
}


/* =========================
   ACCOUNT INFORMATION
   ========================= */

.account-info-item {
    display: flex;
    align-items: flex-start;

    padding: 11px 5px;

    border-bottom: 1px solid #e5e5e5;
}

.account-info-item > i {
    width: 28px;

    font-size: 17px;

    color: #0d6efd;

    margin-top: 2px;
}

.account-info-item small {
    display: block;

    font-size: 10px;

    color: #777;

    margin-bottom: 2px;
}

.account-info-item p {
    margin: 0;

    font-size: 11px;

    color: #333;

    word-break: break-word;
}


/* =========================
   DIVIDER
   ========================= */

.account-divider {
    height: 8px;
}


/* =========================
   ACCOUNT ACTIONS
   ========================= */

.account-action {
    display: flex;
    align-items: center;

    width: 100%;

    padding: 13px 5px;

    text-decoration: none;

    color: #333;

    border-bottom: 1px solid #e5e5e5;
}

.account-action > i:first-child {
    width: 28px;

    font-size: 17px;

    color: #555;
}

.account-action span {
    flex: 1;

    font-size: 12px;
}

.account-action > i:last-child {
    font-size: 10px;

    color: #999;
}

.account-action:hover {
    background: #eef4ff;
}

.account-logout {
    color: #dc3545;
}

.account-logout > i:first-child {
    color: #dc3545;
}

/* SEARCH HALF SCREEN */

.bottom-search-box {
    display: none;
    position: absolute;
    bottom: 58px;
    left: 50%;
    transform: translateX(-50%);
    width: 50vw;
    height: 60vh; 
    min-width: 180px;
    max-width: none;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    z-index: 10000;
}

.bottom-search-box.show {
     display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100000 !important;
}

.bottom-search-box form {
    display: flex;
    gap: 5px;
}

.bottom-search-box input {
    width: 100%;
    height: 35px;
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    min-width: 0;
}

.bottom-search-box button {
    height: 35px;
    padding: 0 8px;
    border: 0;
    background: #0d6efd;
    color: #fff;
    border-radius: 5px;
    font-size: 10px;
    flex-shrink: 0;
}
    
     .bottom-search{
        position:relative;
    }

    .bottom-search-btn{
        border:0;
        background:none;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        width:100%;
        height:58px;
        color:#555;
        font-size:10px;
    }

    .bottom-search-btn i{
        font-size:20px;
        line-height:20px;
    }
}
/* =========================================================
   MOBILE RESPONSIVE TEXT - COMPLETE PAGE
   ========================================================= */

@media (max-width: 767px){

    /* ---------------- HERO BANNER ---------------- */

    .hero-content{
        width:94%;
        max-width:100%;
        padding:0 8px;
        top:65%;
    }

    .hero-content h1{
        font-size:clamp(17px, 5vw, 22px) !important;
        line-height:1.25;
        margin-bottom:8px;
        font-weight:700;
        overflow-wrap:break-word;
        word-break:break-word;
    }

    .hero-content p{
        font-size:clamp(10px, 3.2vw, 14px) !important;
        line-height:1.45;
        margin-bottom:12px;
        overflow-wrap:break-word;
        word-break:break-word;
    }

    .hero-btn{
        padding:8px 18px;
        font-size:clamp(10px, 2.8vw, 13px);
        line-height:1.2;
    }

    .scroll-indicator{
        bottom:5px;
    }


    /* ---------------- SECTION TITLES ---------------- */

    .section-title{
        gap:5px;
        margin:20px 0 !important;
        width:100%;
    }

    .section-title h2{
        font-size:clamp(17px, 5vw, 22px) !important;
        line-height:1.2;
        white-space:normal !important;
        text-align:center;
        overflow-wrap:break-word;
        word-break:break-word;
    }

    .section-title p{
        font-size:clamp(10px, 3vw, 13px);
        line-height:1.4;
    }

    .section-title .line{
        height:2px;
        max-width:80px;
        min-width:15px;
    }

    .section-title .dot{
        width:10px;
        height:10px;
        flex-shrink:0;
    }


    /* ---------------- INDIA COVERAGE ---------------- */

    .coverage-title{
        font-size:clamp(18px, 5vw, 24px);
        line-height:1.25;
        margin-bottom:15px;
    }

    .state-card{
        gap:8px;
        padding:12px;
        margin-bottom:10px;
        border-radius:12px;
    }

    .state-details h4{
        font-size:clamp(11px, 3vw, 15px);
        line-height:1.25;
        margin-bottom:5px;
        overflow-wrap:break-word;
        word-break:break-word;
    }

    .state-details p{
        font-size:clamp(9px, 2.5vw, 12px);
        line-height:1.35;
        overflow-wrap:break-word;
        word-break:break-word;
    }

    .state-dot{
        width:10px;
        height:45px;
        flex-shrink:0;
    }

    .coverage-list{
        padding:15px;
        border-radius:15px;
    }

    .coverage-item{
        padding:10px 0;
        gap:8px;
    }

    .coverage-item h5{
        font-size:clamp(10px, 2.8vw, 14px);
        line-height:1.3;
        overflow-wrap:break-word;
        word-break:break-word;
    }

    .worker-count{
        padding:5px 9px;
        font-size:clamp(9px, 2.5vw, 12px);
        white-space:nowrap;
    }


    /* ---------------- OUR SERVICES ---------------- */

    .category-banner{
        padding:15px 12px;
        border-radius:18px;
        gap:10px;
    }

    .category-tag{
        padding:5px 10px;
        font-size:clamp(9px, 2.5vw, 12px);
        letter-spacing:.5px;
    }

    .category-banner h2{
        font-size:clamp(17px, 5vw, 23px) !important;
        line-height:1.2;
        margin:8px 0;
        overflow-wrap:break-word;
        word-break:break-word;
    }

    .category-banner p{
        font-size:clamp(10px, 3vw, 14px);
        line-height:1.4;
        margin-bottom:8px;
        max-width:100%;
        overflow-wrap:break-word;
        word-break:break-word;
    }

    .category-banner .glass-ui{
        padding:8px 16px;
        font-size:clamp(10px, 2.8vw, 13px);
    }


    /* ---------------- SERVICE CARDS ---------------- */

    .service-card{
        border-radius:15px;
    }

    .service-content{
        padding:10px;
    }

    .service-content h5{
        font-size:clamp(11px, 3vw, 15px);
        line-height:1.3;
        min-height:auto;
        margin-bottom:7px;
        overflow-wrap:break-word;
        word-break:break-word;
    }

    .book-service{
        padding:8px 6px;
        font-size:clamp(10px, 2.8vw, 13px);
        line-height:1.2;
    }

    .service-badge{
        top:8px;
        left:8px;
        padding:4px 7px;
        font-size:clamp(8px, 2.2vw, 11px);
    }


    /* ---------------- MOBILE SERVICE CAROUSEL ---------------- */

    .mobile-service-carousel .card-body{
        padding:7px 4px;
    }

    .mobile-service-carousel .card-body a{
        font-size:clamp(10px, 3vw, 14px) !important;
        line-height:1.25;
        overflow-wrap:break-word;
        word-break:break-word;
    }

    .mobile-service-carousel .service-img{
        height:120px;
    }


    /* ---------------- WHY CHOOSE US ---------------- */

    .why-choose-section{
        padding:35px 0;
    }

    .feature-box{
        padding:12px 8px;
        border-radius:12px;
    }

    .feature-title{
        font-size:clamp(11px, 3.2vw, 14px) !important;
        line-height:1.3;
        margin-top:8px;
        overflow-wrap:break-word;
        word-break:break-word;
    }

    .feature-text{
        font-size:clamp(9px, 2.7vw, 12px) !important;
        line-height:1.4;
        margin-top:5px;
        overflow-wrap:break-word;
        word-break:break-word;
    }

    .feature-icon{
        width:42px;
        height:42px;
    }


    /* ---------------- FOOTER ---------------- */

    .custom-footer{
        padding:25px 12px;
    }

    .custom-footer .col-md-3 h3{
        font-size:clamp(15px, 4vw, 20px);
        line-height:1.25;
    }

    .custom-footer .col-md-3 a{
        font-size:clamp(10px, 2.8vw, 13px);
        line-height:24px;
    }

    .footer-content{
        padding:0 5px;
    }


    /* ---------------- GENERAL MOBILE TEXT ---------------- */

    .service-section p,
    .salon-section p,
    .vehicle-section p,
    .lifestyle-section p,
    .spiritual-section p{
        overflow-wrap:break-word;
        word-break:break-word;
    }

}


/* =========================================================
   SMALL MOBILE 400px AND BELOW
   ========================================================= */

@media (max-width:400px){

    .hero-content{
        width:96%;
        top:64%;
        padding:0 5px;
    }

    .hero-content h1{
        font-size:17px !important;
        line-height:1.2;
    }

    .hero-content p{
        font-size:10px !important;
        line-height:1.4;
    }

    .hero-btn{
        padding:7px 15px;
        font-size:10px;
    }

    .section-title h2{
        font-size:18px !important;
    }

    .category-banner h2{
        font-size:18px !important;
    }

    .category-banner p{
        font-size:10px;
    }

    .state-details h4{
        font-size:11px;
    }

    .state-details p{
        font-size:9px;
    }

    .coverage-item h5{
        font-size:10px;
    }

    .worker-count{
        font-size:9px;
        padding:4px 7px;
    }

    .mobile-service-carousel .card-body a{
        font-size:10px !important;
    }

    .feature-title{
        font-size:11px !important;
    }

    .feature-text{
        font-size:9px !important;
    }

    .custom-footer .col-md-3 h3{
        font-size:16px;
    }

    .custom-footer .col-md-3 a{
        font-size:10px;
    }
}


/* =========================================================
   VERY SMALL MOBILE 320px AND BELOW
   ========================================================= */

@media (max-width:320px){

    .hero-content h1{
        font-size:15px !important;
    }

    .hero-content p{
        font-size:9px !important;
    }

    .hero-btn{
        font-size:9px;
        padding:6px 12px;
    }

    .section-title h2{
        font-size:16px !important;
    }

    .category-banner h2{
        font-size:16px !important;
    }

    .category-banner p{
        font-size:9px;
    }

    .mobile-service-carousel .card-body a{
        font-size:9px !important;
    }

    .feature-title{
        font-size:10px !important;
    }

    .feature-text{
        font-size:8px !important;
    }
}