/* Fix right panel overflow on mobile */
@media (max-width:768px){
    .center-panel{
        padding:10px;
    }
    .rainbow-border-curved,
    .btn-primary1{
        min-width:100%;
    }
}
.d-flex.gap-3{
    display:flex;
    flex-direction:row;
    gap:6px !important;
}
.rainbow-border-curved,
.btn-primary1{
    flex:1;
    min-width:0;
    width:auto;
    height:38px;
    font-size:11px;
    padding:6px;
}
/*-------------------- mobile reponsive-------*/
@media(max-width:991px){
    .service-page {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 0px;
        padding: 8px;
        margin-top: 60px;
    }
    .service-sidebar {
        width: 28%;
        padding: 8px;
        box-sizing: border-box;
        position: sticky;
        top: 60px;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
    .service-img-box{
    width:100%;
    height:140px;
    overflow:hidden;
}
    .service-content {
        width: 72%;
        padding: 8px;
        box-sizing: border-box;
    }
.service-sidebar h4{
font-weight:700;
font-size:13px;
overflow-wrap: break-word;
    word-break: break-word;
}
    .service-sidebar {
    scrollbar-width: thin;
}
.service-sidebar::-webkit-scrollbar {
    width: 1px;
}
.service-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.service-sidebar::-webkit-scrollbar-thumb {
    background: #888888;
    border-radius: 2px;
}
.service-text h1{
font-weight:700;
font-size:22px;
}
.service-text h5{
font-size:12px;
}
.service-content h4{
font-size:17px;
font-weight:700;
margin-top:10px;
overflow-wrap: break-word;
word-break: break-word;
}
.breadcrumb-area{
display:none !important;
}
.service-content{
width:75%;
padding:10px;
}
.features{
display:grid;
grid-template-columns:repeat(4, 1fr) !important;
gap:2px;
margin-top:20px;
width:100%;
}
.feature-box{
font-size:7px;
padding:2px;
min-width:0;
}
.feature-box img{
width:20px !important;
height:20px !important;
margin-bottom:2px;
}
.feature-box p{
font-size:09px;
word-break: break-word;
}
.card-content h4{
font-size:12px;
font-weight:700;
}
.card-content p{
display:none !important;
}
.service-menu{
flex-direction:column;
text-align:center;
padding:5px 2px;
margin:3px;
min-height:auto;
height:auto;
background:#fff;
}
.service-menu .icon{
width:100%;
height:40px;
display:flex;
}
.service-menu img{
width:20px;
height:20px;
}
.service-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:5px;
}
.section-title{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin:30px 0;
}
.section-title .line{
    flex:1;
    height:3px;
    background:#D4AF37;  
    max-width:300px;
}
.section-title .dot{
    width:8px;
    height:10px;
    background:#D4AF37;
    border-radius:50%;
}
.section-title h2{
    margin:0;
    font-size:20px;
    font-weight:700;
    color:#222;
    white-space:nowrap;
}
   .service-banner{
        display:block;
    }
    .service-text{
        width:100%;
        padding:10px;
    }
    .service-banner img{
        width:100%;
        height:180px;
        object-fit:contain;
    }
    
}
/*  MOBILE SMALL SCREEN*/
@media(max-width:768px){
  .service-page {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 0px;
        padding: 8px;
        margin-top: 70px;
    }
    .service-sidebar {
        width: 28%;
        padding: 8px;
        background-color: #ffffe6;
        box-sizing: border-box;
        position: sticky;
        top: 70px;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
    .service-content {
        width: 72%;
        padding: 8px;
        box-sizing: border-box;
    }
    .service-sidebar {
    scrollbar-width: thin;
}
.service-menu.active{
    background:none;
    color:#000;
    box-shadow:0 12px 25px rgba(0,113,227,.35);
}
.service-menu:hover{
    background:none;
    color:#000;
    box-shadow:0 12px 25px rgba(0,113,227,.35);
}
.feature-box p{
font-size:09px;
word-break: break-word;
}
.service-sidebar::-webkit-scrollbar {
    width: 1px;
}
.service-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.service-sidebar::-webkit-scrollbar-thumb {
    background: #888888;
    border-radius: 2px;
}
.service-text h1{
font-weight:700;
font-size:22px;
}
.service-text h5{
font-size:12px;
}
.service-content h4{
font-size:17px;
font-weight:700;
margin-top:10px;
overflow-wrap: break-word;
word-break: break-word;
}
.breadcrumb-area{
display:none !important;
}
.service-content{
width:75%;
padding:10px;
}
.features{
display:grid;
grid-template-columns:repeat(4, 1fr) !important;
gap:2px;
margin-top:20px;
width:100%;
}
.feature-box{
font-size:7px;
padding:2px;
min-width:0;
}
.feature-box img{
width:20px !important;
height:20px !important;
margin-bottom:2px;
}
.card-content h4{
font-size:12px;
font-weight:700;
}
 .service-menu{
flex-direction:column;
text-align:center;
padding:5px 2px;
margin:3px;
min-height:auto;
height:auto;
background:#fff;
}
.service-menu .icon{
width:100%;

display:flex;
}
.service-menu img{
width:15px;
height:15px;
}
    .service-menu h5{
        font-size:11px;
        text-align:center;
    }
    .service-menu p{
        display:none;
    }

    .service-banner{
        display:block;
    }
    .service-text{
        width:100%;
        padding:15px;
    }
    .service-banner img{
        width:100%;
        height:180px;
    }
   .service-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:5px;
}
  
}
 
/*  VERY SMALL MOBILE 320-400px */
@media(max-width:400px){
   .service-sidebar{
        width:25%;
    }
    .service-content{
        width:75%;
    }
    .service-menu h5{
        font-size:10px;
    }
    .service-menu .icon{
        width:30px;
        height:30px;
    }
    .service-content h2{
        font-size:18px;
    }
    .breadcrumb-area{
    display:none !important;
}
   .service-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:5px;
}
  .features{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
        margin-top:30px;
    }
}
/* =========================================================
   MOBILE TEXT RESPONSIVE + HIDDEN SCROLLBAR
   ========================================================= */

@media (max-width: 991px) {

    /* ---------- MAIN SERVICE TEXT ---------- */

    .service-text h1 {
        font-size: clamp(18px, 4vw, 22px);
        line-height: 1.2;
        font-weight: 700;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-text h2 {
        font-size: clamp(17px, 3.8vw, 21px);
        line-height: 1.25;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-text h3 {
        font-size: clamp(15px, 3.5vw, 19px);
        line-height: 1.3;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-text h4 {
        font-size: clamp(14px, 3.2vw, 17px);
        line-height: 1.3;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-text h5 {
        font-size: clamp(11px, 2.8vw, 14px);
        line-height: 1.4;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-text p {
        font-size: clamp(11px, 2.8vw, 14px);
        line-height: 1.5;
        overflow-wrap: break-word;
        word-break: break-word;
    }


    /* ---------- RIGHT SERVICE CONTENT ---------- */

    .service-content h1 {
        font-size: clamp(18px, 4vw, 22px);
        line-height: 1.2;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-content h2 {
        font-size: clamp(16px, 3.7vw, 20px);
        line-height: 1.25;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-content h3 {
        font-size: clamp(15px, 3.4vw, 19px);
        line-height: 1.3;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-content h4 {
        font-size: clamp(13px, 3.2vw, 17px);
        line-height: 1.3;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-content h5 {
        font-size: clamp(11px, 2.8vw, 14px);
        line-height: 1.35;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-content p {
        font-size: clamp(11px, 2.7vw, 14px);
        line-height: 1.5;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-content li {
        font-size: clamp(11px, 2.7vw, 14px);
        line-height: 1.45;
        overflow-wrap: break-word;
        word-break: break-word;
    }


    /* ---------- LEFT SIDEBAR ---------- */

    .service-sidebar h1 {
        font-size: clamp(14px, 3.5vw, 18px);
        line-height: 1.25;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-sidebar h2 {
        font-size: clamp(13px, 3.3vw, 17px);
        line-height: 1.25;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-sidebar h3 {
        font-size: clamp(12px, 3vw, 16px);
        line-height: 1.3;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-sidebar h4 {
        font-size: clamp(11px, 2.8vw, 14px);
        line-height: 1.3;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-sidebar h5 {
        font-size: clamp(10px, 2.5vw, 13px);
        line-height: 1.3;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-sidebar p {
        font-size: clamp(9px, 2.4vw, 12px);
        line-height: 1.4;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-sidebar a {
        font-size: clamp(9px, 2.5vw, 13px);
        line-height: 1.3;
        overflow-wrap: break-word;
        word-break: break-word;
    }


    /* ---------- SERVICE MENU ---------- */

    .service-menu h4 {
        font-size: clamp(11px, 2.8vw, 15px);
        line-height: 1.25;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-menu h5 {
        font-size: clamp(9px, 2.5vw, 13px);
        line-height: 1.25;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .service-menu p {
        font-size: clamp(9px, 2.3vw, 12px);
        line-height: 1.3;
        overflow-wrap: break-word;
        word-break: break-word;
    }


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

    .card-content h3 {
        font-size: clamp(12px, 3vw, 16px);
        line-height: 1.25;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .card-content h4 {
        font-size: clamp(10px, 2.8vw, 14px);
        line-height: 1.25;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .card-content h5 {
        font-size: clamp(9px, 2.5vw, 13px);
        line-height: 1.25;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .card-content p {
        font-size: clamp(9px, 2.4vw, 12px);
        line-height: 1.4;
        overflow-wrap: break-word;
        word-break: break-word;
    }


    /* ---------- FEATURE BOX ---------- */

    .feature-box {
        font-size: clamp(8px, 2.2vw, 12px);
    }

    .feature-box p {
        font-size: clamp(8px, 2.2vw, 12px);
        line-height: 1.2;
        overflow-wrap: break-word;
        word-break: break-word;
    }


    /* ---------- SECTION TITLE ---------- */

    .section-title h2 {
        font-size: clamp(16px, 4vw, 20px);
        line-height: 1.2;
        white-space: normal;
        text-align: center;
        overflow-wrap: break-word;
        word-break: break-word;
    }


    /* ---------- BUTTON TEXT ---------- */

    .rainbow-border-curved,
    .btn-primary1 {
        font-size: clamp(9px, 2.5vw, 12px);
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }


    /* ---------- SIDEBAR SCROLLBAR COMPLETELY HIDDEN ---------- */

    .service-sidebar {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .service-sidebar::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .service-text h1,
    .service-content h1 {
        font-size: 18px;
    }

    .service-text h2,
    .service-content h2 {
        font-size: 16px;
    }

    .service-text h3,
    .service-content h3 {
        font-size: 14px;
    }

    .service-text h4,
    .service-content h4 {
        font-size: 13px;
    }

    .service-text p,
    .service-content p {
        font-size: 11px;
        line-height: 1.45;
    }

    .service-sidebar h4 {
        font-size: 11px;
    }

    .service-sidebar p,
    .service-sidebar a {
        font-size: 9px;
    }

    .service-menu h5 {
        font-size: 9px;
    }

    .feature-box p {
        font-size: 8px;
    }

    .card-content h4 {
        font-size: 11px;
    }
}/* =========================================
   CATEGORY ICON
   DESKTOP / MOBILE
   ========================================= */

.category-icon {
    display: none;
}

.category-image {
    display: block;
}

.category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================
   MOBILE VIEW ONLY
   ========================================= */

@media (max-width: 768px) {

    .category-image {
        display: none;
    }

    .category-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .category-icon i {
        font-size: 24px;
    }

}
/* =========================================================
   MOBILE - RIGHT PANEL SINGLE CONTAINER
   Desktop par koi change nahi
   ========================================================= */

@media (max-width: 768px) {

    .service-page {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
    }

    .service-content {
        background: #fff !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;

        width: 100% !important;
        margin: 0 !important;
    }

}
/* =========================================================
   ONLY MOBILE: SMALL SIDEBAR + H4 TEXT MARGIN FIX
   ========================================================= */

@media (max-width: 991px) {
    /* 1. Main Container Layout */
    .service-page {
        gap: 0 !important;
        padding: 0 !important;
        margin-top: 60px !important;
        background: #ffffff !important;
    }

    /* 2. Left Sidebar (With Left Padding for Header Text) */
    .service-sidebar {
        width: 24% !important;
        padding: 4px 2px !important;
        background-color: #fcfbdf !important;
        border-right: 1px solid #dcdcdc !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* 3. Left Sidebar Header ("Other Services" Fix) */
    .service-sidebar h4 {
        margin-left: 6px !important;       /* Left side se spacing */
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        padding-left: 2px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: #222222 !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* 4. Right Content Layout */
    .service-content {
        width: 76% !important;
        padding: 8px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
    }

    /* 5. Menu Card Container */
    .service-menu {
        padding: 8px 2px 4px 2px !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        border-bottom: 1px solid #e2e0b8 !important;
        border-radius: 0 !important;
    }

    .service-menu.active {
        background-color: #f0edb0 !important;
    }

    /* 6. Desktop Image Hide */
    .category-image {
        display: none !important; 
    }

    /* 7. Icon Box Layout */
    .icon-box,
    .category-icon {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* 8. Icon Image Fit */
    .category-icon img {
        width: 60px !important;
        height: 60px !important;
        max-width: 100% !important;
        object-fit: contain !important;
        background: transparent !important;
        mix-blend-mode: multiply !important;
        margin-bottom: 0px !important;
    }

    /* 9. Text Directly Attached Under Image */
    .service-menu h5 {
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        margin: 0 !important;
        margin-top: -1px !important;
        padding: 0 !important;
        color: #222222 !important;
        width: 100% !important;
        word-wrap: break-word !important;
    }
}

/* Small Screens (Below 400px) */
@media (max-width: 400px) {
    .service-sidebar {
        width: 22% !important;
    }
    .service-sidebar h4 {
        margin-left: 4px !important;
        font-size: 10px !important;
    }
    .service-content {
        width: 78% !important;
    }
    .category-icon img {
        width: 50px !important;
        height: 50px !important;
    }
    .service-menu h5 {
        font-size: 9px !important;
    }
}