/* =========================================
   REPAIR INDIA SPOTLIGHT SLIDER
   Unique classes only
========================================= */

.ri-spotlight-section {
    width: 100%;
    padding: 50px 0 25px;
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
}

.ri-spotlight-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
}

.ri-spotlight-heading {
    font-size: 37px;
    color: #0d0d0d;
    margin-bottom: 20px;
    text-align: left;
}

.ri-spotlight-wrapper {
    position: relative;
    width: 100%;
}

.ri-spotlight-track {
    display: flex;
    width: 100%;
    gap: 18px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .ri-spotlight-track::-webkit-scrollbar {
        display: none;
    }

.ri-spotlight-card {
    position: relative;
    display: block;
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: 0;
    aspect-ratio: 1.73 / 1;
    overflow: hidden;
    border-radius: 12px;
    background: #e9e9e9;
    color: #111;
    text-decoration: none !important;
    scroll-snap-align: start;
    isolation: isolate;
}

    .ri-spotlight-card > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform .45s ease;
        z-index: -2;
    }

    .ri-spotlight-card:hover > img {
        transform: scale(1.04);
    }

.ri-spotlight-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 24px;
    box-sizing: border-box;
    background: linear-gradient( 90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.08) 58%, transparent 100% );
    color: #fff;
}

.ri-spotlight-tag {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 12px;
    border-radius: 4px;
    background: #8b1049;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.ri-spotlight-overlay h3 {
    max-width: 75%;
    margin: 0 0 8px;
    color: #fff;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: clamp(20px, 1.7vw, 30px);
    line-height: 1.25;
    font-weight: 700;
}

.ri-spotlight-overlay p {
    max-width: 85%;
    margin: 0 0 22px;
    color: #fff;
    font-size: 15px;
    line-height: 1.45;
}

.ri-spotlight-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* min-height: 44px; */
    margin-top: auto;
    padding: 7px 19px;
    border-radius: 7px;
    background: #fff;
    color: #111;
    font-size: 15px;
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}
.ri-spotlight-card:hover .ri-spotlight-btn {
    background: #111;
    color: #fff;
}

/* Slider arrows */

.ri-spotlight-prev,
.ri-spotlight-next {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 1px solid #e1e1e1;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
    transform: translateY(-50%);
    transition: background .2s ease, color .2s ease;
}

.ri-spotlight-next {
    right: -15px;
}

.ri-spotlight-prev {
    left: -15px;
}

    .ri-spotlight-prev:hover,
    .ri-spotlight-next:hover {
        background: #111;
        color: #fff;
    }

    .ri-spotlight-prev:disabled,
    .ri-spotlight-next:disabled {
        opacity: .35;
        cursor: default;
    }

/* Tablet */

@media (max-width: 992px) {
    .ri-spotlight-container {
        padding: 0 22px;
    }

    .ri-spotlight-heading {
        font-size: 36px;
        margin-bottom: 35px;
    }

    .ri-spotlight-track {
        gap: 20px;
    }

    .ri-spotlight-card {
        flex-basis: calc((100% - 20px) / 2);
    }

    .ri-spotlight-overlay {
        padding: 22px 18px;
    }

        .ri-spotlight-overlay h3 {
            font-size: 24px;
        }

    .ri-spotlight-prev {
        left: -10px;
    }

    .ri-spotlight-next {
        right: -10px;
    }
}

/* Mobile */

@media (min-width: 991px) {
    .ri-mobile-sidebar{
        display:none;
    }
}
@media (max-width: 600px) {
    .ri-spotlight-section {
        padding: 40px 0 45px;
    }

    .ri-spotlight-container {
        padding: 0 16px;
    }

    .ri-spotlight-heading {
        font-size: 24px;
        letter-spacing: -.4px;
        margin-bottom: 25px;
    }

    .ri-spotlight-track {
        gap: 14px;
    }

    .ri-spotlight-card {
        flex-basis: 100%;
        aspect-ratio: 1.35 / 1;
        border-radius: 10px;
    }

    .ri-spotlight-overlay {
        padding: 20px;
    }

        .ri-spotlight-overlay h3 {
            max-width: 80%;
            font-size: 25px;
        }

        .ri-spotlight-overlay p {
            font-size: 13px;
        }

    .ri-spotlight-btn {
        min-height: 38px;
        padding: 0 16px;
        font-size: 13px;
    }

    .ri-spotlight-prev,
    .ri-spotlight-next {
        width: 42px;
        height: 42px;
        font-size: 22px;
    }

    .ri-spotlight-prev {
        left: 5px;
    }

    .ri-spotlight-next {
        right: 5px;
    }
}
/* =========================================================
   WHY REPAIR INDIA
========================================================= */

.ri-why-section {
    background: #fff;
    padding: 65px 0 70px;
    border-bottom: 1px solid #eeeeee;
    overflow: hidden;
}


    /* Container */

    .ri-why-section .ri-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }


    /* =========================================================
   SECTION TITLE
========================================================= */

    .ri-why-section .ri-section-title {
        font-size: 32px;
        line-height: 1.25;
        font-weight: 700;
        color: #111;
        margin: 0 0 42px;
        text-align: left;
        letter-spacing: -0.4px;
    }


    /* =========================================================
   GRID
========================================================= */

    .ri-why-section .ri-why-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        width: 100%;
    }


    /* =========================================================
   CARD
========================================================= */

    .ri-why-section .ri-why-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 32px 8px 32px 8px 0;
        min-height: 155px;
        transition: transform .3s ease;
    }


        /* Vertical divider */

        .ri-why-section .ri-why-card:not(:last-child)::after {
            content: "";
            position: absolute;
            right: 28px;
            top: 8px;
            width: 1px;
            height: calc(100% - 16px);
            background: #e8e8e8;
        }


    /* =========================================================
   ICON
========================================================= */

    .ri-why-section .ri-why-icon-box {
        width: 54px;
        height: 54px;
        min-width: 54px;
        margin-bottom: 20px;
        border-radius: 50%;
        background: #f3f6fb;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
    }


        .ri-why-section .ri-why-icon-box i {
            font-size: 21px;
            color: #0355cc;
            transition: color .3s ease;
        }


    /* =========================================================
   TEXT
========================================================= */

    .ri-why-section .ri-why-text {
        padding-right: 8px;
    }


        .ri-why-section .ri-why-text h3 {
            margin: 0 0 9px;
            font-size: 17px;
            line-height: 1.35;
            font-weight: 700;
            color: #202020;
        }


        .ri-why-section .ri-why-text p {
            margin: 0;
            max-width: 235px;
            font-size: 14px;
            line-height: 1.6;
            color: #666;
        }


    /* =========================================================
   HOVER
========================================================= */

    .ri-why-section .ri-why-card:hover {
        transform: translateY(-4px);
    }


        .ri-why-section .ri-why-card:hover
        .ri-why-icon-box {
            background: #0355cc;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(3, 85, 204, .18);
        }


            .ri-why-section .ri-why-card:hover
            .ri-why-icon-box i {
                color: #fff;
            }


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

    .ri-why-section {
        padding: 55px 0 60px;
    }


        .ri-why-section .ri-section-title {
            font-size: 30px;
            margin-bottom: 35px;
        }


        .ri-why-section .ri-why-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            row-gap: 35px;
        }


        .ri-why-section .ri-why-card {
            padding-right: 30px;
        }


            /* Divider only between columns */

            .ri-why-section .ri-why-card:nth-child(2)::after {
                display: none;
            }


            .ri-why-section .ri-why-card:nth-child(1)::after,
            .ri-why-section .ri-why-card:nth-child(3)::after {
                display: block;
            }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .ri-why-section {
        padding: 45px 0 50px;
    }


        .ri-why-section .ri-container {
            padding: 0 18px;
        }


        .ri-why-section .ri-section-title {
            font-size: 26px;
            margin-bottom: 30px;
        }


        .ri-why-section .ri-why-grid {
            grid-template-columns: 1fr;
            gap: 0;
        }


        .ri-why-section .ri-why-card {
            min-height: auto;
            padding: 18px 0;
            flex-direction: row;
            align-items: flex-start;
            gap: 16px;
        }


            /* Remove vertical dividers on mobile */

            .ri-why-section .ri-why-card::after {
                display: none !important;
            }


        .ri-why-section .ri-why-icon-box {
            width: 48px;
            height: 48px;
            min-width: 48px;
            margin-bottom: 0;
        }


            .ri-why-section .ri-why-icon-box i {
                font-size: 19px;
            }


        .ri-why-section .ri-why-text {
            padding: 0;
        }


            .ri-why-section .ri-why-text h3 {
                font-size: 16px;
                margin-bottom: 6px;
            }


            .ri-why-section .ri-why-text p {
                max-width: none;
                font-size: 13px;
                line-height: 1.55;
            }
}



/* =========================================================
   REPAIR INDIA
   UC STYLE SERVICE CATEGORY POPUP
========================================================= */


/* =========================================================
   BODY LOCK
========================================================= */

body.ri-modal-open {
    overflow: hidden !important;
}


/* =========================================================
   OVERLAY
========================================================= */

#blurBg.blur-bg {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.78) !important;
    z-index: 99998 !important;
    cursor: default;
}


/* =========================================================
   POPUP MAIN
========================================================= */

#popup.popup {
    display: none;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 580px !important;
    max-width: calc(96vw - 37px) !important;
    height: 630px !important;
    max-height: calc(100vh - 120px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    overflow: visible !important;
    z-index: 99999 !important;
    box-shadow: 0 25px 70px rgba(0,0,0,.35) !important;
    animation: riPopupOpen .25s ease-out;
}


/* =========================================================
   POPUP ANIMATION
========================================================= */

@keyframes riPopupOpen {

    0% {
        opacity: 0;
        transform: translate(-50%, -47%) scale(.96) !important;
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) !important;
    }
}


/* =========================================================
   CLOSE BUTTON WRAPPER
========================================================= */

.ri-popup-close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 48px;
    height: 48px;
    z-index: 10001;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

#closeButton {
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-family: Arial, sans-serif !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    line-height: 45px !important;
    text-align: center !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: 0 3px 15px rgba(0,0,0,.18) !important;
    transition: background .2s ease, transform .2s ease !important;
}


    #closeButton:hover {
        background: #f1f1f1 !important;
        transform: rotate(90deg);
    }


/* =========================================================
   POPUP CONTENT
========================================================= */

#popup .popup-content {
    width: 100% !important;
    height: 100% !important;
    max-height: 555px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 26px 24px 40px !important;
    box-sizing: border-box !important;
    background: #ffffff;
    border-radius: 20px;
    scrollbar-width: thin;
    scrollbar-color: #c5c5c5 transparent;
}


    /* =========================================================
   CHROME SCROLLBAR
========================================================= */

    #popup .popup-content::-webkit-scrollbar {
        width: 6px;
    }


    #popup .popup-content::-webkit-scrollbar-track {
        background: transparent;
    }


    #popup .popup-content::-webkit-scrollbar-thumb {
        background: #c5c5c5;
        border-radius: 10px;
    }


/* =========================================================
   EXISTING TOP IMAGE
========================================================= */




/* =========================================================
   CATEGORY TITLE
========================================================= */

#popup .ri-popup-title {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 0px 0 !important;
    padding: 0 !important;
    font-family: 'Segoe UI', Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #111111 !important;
    text-align: left !important;
    white-space: normal !important;
}


/* =========================================================
   DATALIST TABLE
========================================================= */

#popup .ri-popup-datalist {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 28px !important;
    table-layout: fixed !important;
}


    /* DataList generated rows */

    #popup .ri-popup-datalist tbody {
        width: 100% !important;
    }


    /* =========================================================
   DATALIST ROW
========================================================= */

    #popup .ri-popup-datalist tr {
        width: 100% !important;
    }


    /* =========================================================
   DATALIST CELLS
========================================================= */

    #popup .ri-popup-datalist td {
        width: 25% !important;
        padding: 0 8px !important;
        margin: 0 !important;
        border: none !important;
        vertical-align: top !important;
        text-align: center !important;
    }


        /* First/last cell spacing */

        #popup .ri-popup-datalist td:first-child {
            padding-left: 0 !important;
        }


        #popup .ri-popup-datalist td:last-child {
            padding-right: 0 !important;
        }


/* =========================================================
   LINK BUTTON
========================================================= */

#popup .ri-popup-service-link {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #222222 !important;
    text-decoration: none !important;
    outline: none !important;
    font-family: 'Segoe UI', Arial, sans-serif !important;
}


/* =========================================================
   SERVICE CARD
========================================================= */

#popup .ri-popup-service-card {
    width: 100%;
    text-align: center;
    cursor: pointer;
}


/* =========================================================
   IMAGE BOX
========================================================= */

#popup .ri-popup-image-box {
    width: 100%;
    /* height: 100px; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: #f5f5f5; */
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}


/* =========================================================
   SERVICE IMAGE
========================================================= */

#popup .ri-popup-service-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 81% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    padding: 0px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: block !important;
}


/* =========================================================
   SERVICE NAME
========================================================= */

#popup .ri-popup-service-name {
    width: 100%;
    min-height: 40px;
    padding: 0 2px;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    color: #222222;
    text-align: center;
    transition: color .2s ease;
}


/* =========================================================
   HOVER
========================================================= */

#popup .ri-popup-service-link:hover {
    color: #222222 !important;
    text-decoration: none !important;
}


    #popup .ri-popup-service-link:hover
    .ri-popup-image-box {
        /* background: #eeeeee; */
        transform: translateY(-3px);
        /* box-shadow: 0 5px 15px rgba(0,0,0,.10); */
    }


    #popup .ri-popup-service-link:hover
    .ri-popup-service-name {
        color: #0355cc;
    }


/* =========================================================
   REMOVE UNWANTED BR
========================================================= */

#popup .ri-popup-datalist br {
    display: none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {


    #popup.popup {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        height: 82vh !important;
        max-height: 82vh !important;
        border-radius: 16px !important;
    }


    #popup .popup-content {
        padding: 28px 15px 35px !important;
        border-radius: 16px;
    }


    #popup .ri-popup-title {
        font-size: 28px !important;
        margin-bottom: 25px !important;
    }


    #popup .ri-popup-datalist {
        border-spacing: 0 24px !important;
    }


        #popup .ri-popup-datalist td {
            width: 25% !important;
            padding: 0 5px !important;
        }


    #popup .ri-popup-image-box {
        height: 78px;
        border-radius: 10px;
    }


    #popup .ri-popup-service-image {
        padding: 8px !important;
    }


    #popup .ri-popup-service-name {
        font-size: 13px;
        line-height: 1.3;
    }


    .ri-popup-close {
        top: -53px;
        right: 0;
    }


    #closeButton {
        width: 42px !important;
        height: 42px !important;
        line-height: 39px !important;
        font-size: 27px !important;
    }
}


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

@media (max-width: 500px) {


    #popup.popup {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        height: 84vh !important;
        max-height: 84vh !important;
    }


    #popup .popup-content {
        padding: 25px 10px 30px !important;
    }


    #popup .ri-popup-title {
        font-size: 25px !important;
        margin-bottom: 22px !important;
    }


    #popup .ri-popup-datalist td {
        padding: 0 4px !important;
    }


    #popup .ri-popup-image-box {
        height: 72px;
        border-radius: 9px;
    }


    #popup .ri-popup-service-name {
        font-size: 12px;
    }
}


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

@media (max-width: 360px) {


    #popup .ri-popup-title {
        font-size: 23px !important;
    }


    #popup .ri-popup-image-box {
        height: 65px;
    }


    #popup .ri-popup-service-name {
        font-size: 11px;
    }
}


/* Add some basic styling */
#data-container {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Section padding and heading */
.service_section {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.heading_container h2 {
    font-family: 'Segoe UI', sans-serif;
    font-weight: bold;
    font-size: 36px;
    color: #0355cc;
    margin-bottom: 40px;
}

/* DataList layout */
#serviceList .d-flex {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Card styling */
#serviceList .border {
    background-color: #fff;
    border: 2px solid #0355cc;
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    width: 200px;
    height: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    #serviceList .border:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        background-color: #eaf2ff;
    }

/* Image styling */
#serviceList img {
    border-radius: 10px;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

#serviceList .border:hover img {
    transform: scale(1.05);
}

/* Text styling */
#serviceList .text-center {
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    transition: color 0.3s;
}

#serviceList .border:hover .text-center {
    color: #0355cc;
}

/* Responsive layout for small screens */
/* Section padding and heading */
.service_section {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.heading_container h2 {
    font-family: 'Segoe UI', sans-serif;
    font-weight: bold;
    font-size: 36px;
    color: #0355cc;
    margin-bottom: 40px;
}

/* DataList layout */
#serviceList .d-flex {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Card styling */
#serviceList .border {
    background-color: #fff;
    border: 2px solid #0355cc;
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    width: 200px;
    height: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    #serviceList .border:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        background-color: #eaf2ff;
    }

/* Image styling  */
#serviceList img {
    border-radius: 10px;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

#serviceList .border:hover img {
    transform: scale(1.05);
}

/* Text styling */
#serviceList .text-center {
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    transition: color 0.3s;
}

#serviceList .border:hover .text-center {
    color: #0355cc;
}

/* Responsive layout for small screens */
@media (max-width: 768px) {
    #serviceList .border {
        width: 100%;
        max-width: 90%;
    }
}


#serviceList .border {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.6s ease-out forwards;
}

    #serviceList .border:nth-child(1) {
        animation-delay: 0.2s;
    }

    #serviceList .border:nth-child(2) {
        animation-delay: 0.4s;
    }

    #serviceList .border:nth-child(3) {
        animation-delay: 0.6s;
    }

/* Add more nth-child delays as needed */

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* CSS for the popup */
#popup1 {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    text-align: center;
}

    #popup1.ri-popup-show {
        display: block !important;
    }

    #popup1 img {
        margin-top: 20vh;
        /* Adjust as needed */
        max-width: 80%;
        max-height: 60vh;
    }

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
}
body {
    overflow-y: auto;
    /* Allow vertical scrolling of the background content */
    overflow-x: hidden;
    /* Prevent horizontal scrollbar */
    position: relative;
    /* Ensure that the popup is fixed relative to the body */
    max-width: 100%;
}

/*#popup1 {
    width: 100%; 
    height: 100%; 
}*/

.dropdown-menu {
    display: none;
}

    /* Show submenu on active class */
    .dropdown-menu.show {
        display: block;
    }



.cart-container {
    position: relative;
    display: inline-block;
}

.cart-button {
    background-color: #d1e3ff;
    border: none;
    color: black;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}

.cart-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 5px 10px;
    font-size: 14px;
}


<%--IMAGBOX--% >

.IMAGBOX {
    width: 100%;
    max-width: 700px;
    margin: 50px auto;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    margin-left: 14%;
}

.IMAGBOX img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    /* Continuous bounce */
    animation: bounceForever 2s ease-in-out infinite;
}

/* Infinite bounce animation */
@keyframes bounceForever {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-25px);
    }
}

.
/*detail-box {
    padding-bottom: 300px;
    text-align: LEFT;
}*/
/* Common style for animated elements */
/*.detail-box h2,
.detail-box p,
.detail-box a {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeSlideUp 1s ease-out forwards;
}*/
/* Delay each element for a staggered effect */
/*.detail-box h2 {
    animation-delay: 0.3s;
}

.detail-box p {
    animation-delay: 0.6s;
}

.detail-box a {
    display: inline-block;
    margin-top: 20px;
    font-weight: bold;
    color: #0355cc;
    text-decoration: none;
    animation-delay: 0.9s;
}*/
/* Keyframes for slide up and fade in */
/* Frme R */
/*@keyframes fadeSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}*/


/* =========================================================
   RI TESTIMONIALS SECTION
========================================================= */
.ri-testimonials-section {
    padding: 70px 0 !important;
    background: #f7f9fa;
    position: relative;
    overflow: hidden;
}

.ri-testimonials-section .ri-container {
    position: relative;
}

.ri-testimonials-section .ri-section-title {
    margin-bottom: 35px;
}


/* =========================================================
   CAROUSEL WRAPPER
========================================================= */

.ri-testimonials-section .carousel-wrap {
    position: relative;
    width: 100%;
}


/* Owl carousel */

.ri-testimonials-section .owl-carousel {
    position: relative;
    width: 100%;
}


/* =========================================================
   TESTIMONIAL CARD
========================================================= */

.ri-testimonials-section .ri-testimonial-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    padding: 24px;
    margin: 8px 10px 18px;
    min-height: 205px;
    box-shadow: 0 5px 20px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .ri-testimonials-section .ri-testimonial-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 28px rgba(0,0,0,.10);
    }


/* =========================================================
   HEADER
========================================================= */

.ri-testimonials-section .ri-testimonial-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
}


.ri-testimonials-section .ri-testimonial-img {
    flex-shrink: 0;
}


    .ri-testimonials-section .ri-testimonial-img img {
        width: 54px !important;
        height: 54px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        display: block;
    }


/* =========================================================
   STARS
========================================================= */

.ri-testimonials-section .ri-stars {
    display: flex;
    gap: 3px;
    color: #f5b041;
    font-size: 14px;
}


/* =========================================================
   TEXT
========================================================= */

.ri-testimonials-section .ri-testimonial-text {
    position: relative;
    padding-left: 5px;
}


    .ri-testimonials-section .ri-testimonial-text > i {
        position: absolute;
        left: 0;
        top: -8px;
        color: #0355cc;
        opacity: .15;
        font-size: 30px;
    }


    .ri-testimonials-section .ri-testimonial-text p {
        position: relative;
        z-index: 2;
        margin: 0;
        padding-left: 25px;
        color: #555;
        font-size: 14px;
        line-height: 1.65;
    }


/* =========================================================
   OWL NAVIGATION AREA
========================================================= */

.ri-testimonials-section .owl-nav {
    display: block !important;
    margin: 0 !important;
}


    /* =========================================================
   BOTH BUTTONS
========================================================= */

    .ri-testimonials-section .owl-nav button.owl-prev,
    .ri-testimonials-section .owl-nav button.owl-next {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        border: 1px solid #d7d7d7 !important;
        background: #ffffff !important;
        color: #222 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        font-size: 0 !important;
        box-shadow: 0 4px 14px rgba(0,0,0,.10) !important;
        z-index: 20 !important;
        cursor: pointer !important;
        outline: none !important;
        transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease !important;
    }


    /* =========================================================
   LEFT BUTTON
========================================================= */

    .ri-testimonials-section .owl-nav button.owl-prev {
        left: -58px !important;
    }


    /* =========================================================
   RIGHT BUTTON
========================================================= */

    .ri-testimonials-section .owl-nav button.owl-next {
        right: -58px !important;
    }


    /* =========================================================
   ARROW ICONS
========================================================= */

    .ri-testimonials-section .owl-nav button.owl-prev::before {
        content: "\f104";
        font-family: FontAwesome;
        font-size: 22px;
        line-height: 1;
    }


    .ri-testimonials-section .owl-nav button.owl-next::before {
        content: "\f105";
        font-family: FontAwesome;
        font-size: 22px;
        line-height: 1;
    }


    /* =========================================================
   HOVER
========================================================= */

    .ri-testimonials-section .owl-nav button.owl-prev:hover,
    .ri-testimonials-section .owl-nav button.owl-next:hover {
        background: #0355cc !important;
        color: #fff !important;
        border-color: #0355cc !important;
        box-shadow: 0 7px 18px rgba(3,85,204,.25) !important;
        transform: translateY(-50%) scale(1.05) !important;
    }


    /* =========================================================
   ACTIVE
========================================================= */

    .ri-testimonials-section .owl-nav button.owl-prev:active,
    .ri-testimonials-section .owl-nav button.owl-next:active {
        transform: translateY(-50%) scale(.94) !important;
    }


    /* =========================================================
   DISABLED BUTTON
========================================================= */

    .ri-testimonials-section .owl-nav button.disabled {
        opacity: .35 !important;
        cursor: default !important;
        background: #fff !important;
        color: #999 !important;
        border-color: #ddd !important;
        box-shadow: none !important;
    }


/* =========================================================
   DOTS
========================================================= */




/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    .ri-testimonials-section .owl-nav button.owl-prev {
        left: -10px !important;
    }

    .ri-testimonials-section .owl-nav button.owl-next {
        right: -10px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .ri-testimonials-section {
        padding: 55px 0 !important;
    }


        .ri-testimonials-section .ri-testimonial-card {
            margin: 8px 5px 18px;
            padding: 20px;
            min-height: 215px;
        }


        .ri-testimonials-section .owl-nav button.owl-prev {
            left: 4px !important;
        }


        .ri-testimonials-section .owl-nav button.owl-next {
            right: 4px !important;
        }


        .ri-testimonials-section .owl-nav button.owl-prev,
        .ri-testimonials-section .owl-nav button.owl-next {
            width: 40px !important;
            height: 40px !important;
            min-width: 40px !important;
            min-height: 40px !important;
        }


            .ri-testimonials-section .owl-nav button.owl-prev::before,
            .ri-testimonials-section .owl-nav button.owl-next::before {
                font-size: 18px;
            }
}




/* =============================================
           UC-STYLE NAVBAR — REPAIR INDIA BRAND COLORS
           ============================================= */
/* Sticky Header */
.header_section {
    position: sticky;
    top: 0;
    z-index: 1050;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Top bar (phone/email) */
.header_top {
    background-color: #0355cc;
    padding: 6px 0;
}

    .header_top .contact_nav a {
        color: #ffffff;
        font-size: 13px;
        margin-right: 20px;
        text-decoration: none;
    }

        .header_top .contact_nav a:hover {
            opacity: 0.85;
        }

/* Main navbar wrapper */
.header_bottom {
    background: #fff;
}

.custom_nav-container {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 64px;
}

/* Logo */
.navbar-brand {
    flex-shrink: 0;
    margin-right: 12px;
    padding: 0;
}

    .navbar-brand img {
        width: 150px;
        height: auto;
        display: block;
    }

/* ── Category Pills (scrollable) ── */
.ri-category-pills {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 8px;
}

    .ri-category-pills::-webkit-scrollbar {
        display: none;
    }

.ri-pill {
    white-space: nowrap;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    padding: 7px 16px;
    border-radius: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    display: inline-block;
}

    .ri-pill:hover {
        background: #eef4ff;
        color: #0355cc;
        text-decoration: none;
    }

    .ri-pill.active {
        background: #0355cc;
        color: #ffffff;
        font-weight: 600;
    }

        .ri-pill.active:hover {
            background: #023d99;
            color: #fff;
        }

/* ── Location Pill ── */
.ri-location-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 22px;
    padding: 7px 14px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0 10px;
    transition: border-color 0.2s;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    color: #333;
    max-width: 220px;
}

    .ri-location-pill:hover {
        border-color: #0355cc;
    }

    .ri-location-pill .loc-icon {
        color: #0355cc;
        font-size: 15px;
        flex-shrink: 0;
    }

    .ri-location-pill .loc-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 150px;
    }

    .ri-location-pill .loc-arrow {
        color: #666;
        font-size: 11px;
        flex-shrink: 0;
    }

/* ── Right Icon Buttons ── */
.ri-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ri-icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    width: fit-content;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #333333;
    transition: background 0.2s;
    position: relative;
    text-decoration: none;
}

    .ri-icon-btn:hover {
        background: #f0f4ff;
        color: #0355cc;
    }

/* Cart badge */
.ri-cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Login pill button */
.ri-login-btn {
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0355cc;
    background: transparent;
    border: 1.5px solid #0355cc;
    border-radius: 20px;
    padding: 6px 18px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .ri-login-btn:hover {
        background: #0355cc;
        color: #fff;
        text-decoration: none;
    }

/* Profile dropdown */
.ri-profile-dropdown {
    position: relative;
}

.ri-profile-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    min-width: 200px;
    z-index: 1060;
    padding: 8px 0;
}

.ri-profile-dropdown:hover .ri-profile-dropdown-menu,
.ri-profile-dropdown.open .ri-profile-dropdown-menu {
    display: block;
}

.ri-profile-dropdown-menu a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    font-family: 'Segoe UI', sans-serif;
    transition: background 0.15s;
}

    .ri-profile-dropdown-menu a:hover {
        background: #f0f4ff;
        color: #0355cc;
    }

/* Mobile toggler */
.navbar-toggler {
    border: none;
    padding: 6px;
    background: transparent;
    display: none;
}

    .navbar-toggler span {
        display: block;
        width: 22px;
        height: 2px;
        background: #333;
        margin: 5px 0;
        border-radius: 2px;
        transition: 0.3s;
    }

/* Location Modal */
.ri-location-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2000;
    align-items: flex-start;
    justify-content: center;
}

    .ri-location-modal.open {
        display: flex;
    }

.ri-location-modal-box {
    background: #fff;
    border-radius: 14px;
    padding: 28px 28px 22px;
    margin-top: 80px;
    width: 420px;
    max-width: 95vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

    .ri-location-modal-box h5 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: #111;
        margin-bottom: 16px;
    }

.ri-location-input {
    width: 100%;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: 'Segoe UI', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}

    .ri-location-input:focus {
        border-color: #0355cc;
    }

.ri-location-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 22px;
    cursor: pointer;
    color: #666;
    background: none;
    border: none;
}

/* UC-Style: Current Location Button */
.ri-current-location-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: #0355cc;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Segoe UI', sans-serif;
    padding: 8px 0;
    width: 100%;
    text-align: left;
    transition: opacity 0.2s;
}

    .ri-current-location-btn:hover {
        opacity: 0.75;
    }

/* Modal box scroll */
.ri-location-modal-box {
    max-height: 85vh;
    overflow-y: auto;
}

/* City Chips (Popular Cities) */
.ri-city-chip {
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 6px 14px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

    .ri-city-chip:hover {
        background: #eef4ff;
        color: #0355cc;
        border-color: #0355cc;
    }

/* Recent Items */
.ri-recent-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s;
}

    .ri-recent-item:last-child {
        border-bottom: none;
    }

    .ri-recent-item:hover {
        background: #f8f9ff;
    }

/* Search Result Items */
.ri-search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s;
}

    .ri-search-result-item:last-child {
        border-bottom: none;
    }

    .ri-search-result-item:hover {
        background: #f8f9ff;
    }

/* --- UC-Style Hero Section --- */
.ri-hero-section {
    background: #fff;
    padding: 40px 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.ri-hero-content {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.ri-hero-text-box {
    flex: 1;
    max-width: 550px;
}

.ri-hero-title {
    font-family: 'Segoe UI', sans-serif;
    -webkit-line-clamp: 2;
    font-size: 36px;
    line-height: 44px;
    color: rgba(15, 15, 15, 1.00);
    text-decoration-line: none;
    text-transform: none;
    font-weight: 600;
    text-align: left;
}

.ri-hero-subtitle {
    font-size: 16px;
    color: #555;
    margin-bottom: 24px;
    line-height: 1.5;
}


.ri-hero-services-card {
    background: #fff;
    border-radius: 8px;
    padding: 24px 24px 32px;
    /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); */
    max-width: 482px;
    border: 1px solid #eaeaea;
}

.ri-hero-image-box {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .ri-hero-image-box img {
        max-width: 100%;
        height: auto;
        max-height: 550px;
    }



.ri-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ri-section-title {
    font-size: 37px;
    /* font-weight: 700; */
    color: #0d0d0d;
    margin-bottom: 20px;
    text-align: left;
    /* font-family: 'Segoe UI', sans-serif; */
}



/* Use CSS Grid for the DataList inside Hero */
.ri-services-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
}

    .ri-services-grid br {
        display: none;
        /* Hide ASP.NET DataList generated <br> tags */
    }

    .ri-services-grid > span:nth-of-type(n+13) {
        display: none;
    }

    .ri-services-grid.expanded > span:nth-of-type(n+13) {
        display: block;
    }

@media (max-width: 500px) {
    .ri-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ri-service-link {
    text-decoration: none;
    display: block;
    color: inherit;
}

.ri-service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    /*transition: transform 0.2s;*/
    background: transparent;
    border-radius: 8px;
    padding: 4px;
}

/*  .ri-service-card:hover {
                transform: scale(1.05);
            }
*/

.ri-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    background: transparent;
    border-radius: 8px;
    padding: 4px 4px 12px;
    transition: transform 0.3s ease, color 0.3s ease;
}



    /* Neeche wali line */
    .ri-service-card::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 0;
        height: 2px;
        background: #222;
        transform: translateX(-50%);
        transition: width 0.35s ease;
    }

    /* Hover par line center se slide hoke aaye */
    .ri-service-card:hover::after {
        width: 68px;
    }

.ri-service-icon-wrapper {
    width: 85px;
    height: 62px;
    border-radius: 8px;
    background: rgba(245,245,245,1.00);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    padding: 10px;
}

.ri-service-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ri-service-title {
    font-size: 14px;
    font-weight: 400;
    color: #222;
    line-height: 1.2;
}

/* --- UC-Style New and Noteworthy Section --- */
.ri-noteworthy-section {
    /* background: #fff; */
    padding: 60px 0 25px;
    /* border-bottom: 1px solid #f0f0f0; */
}
.ri-noteworthy-carousel-wrapper {
    position: relative;
}

.ri-noteworthy-grid {
    display: grid !important;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: calc(21% - 27.2px);
    gap: 17px;
    width: 100%;
    margin-top: 30px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .ri-noteworthy-grid::-webkit-scrollbar {
        display: none;
    }

.ri-carousel-next-btn {
    position: absolute;
    right: -24px;
    top: 48%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 10px;
    background: #fff;
    border: 1px solid #d0d0d0;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: #1a1a1a;
    outline: none;
}

    .ri-carousel-next-btn:hover {
        background: #f7f7f7;
    }

.ri-noteworthy-grid br {
    display: none;
}

@media (max-width: 992px) {
    .ri-noteworthy-grid {
        grid-auto-columns: calc(33.333% - 16px);
    }

    .ri-carousel-next-btn {
        right: 10px;
    }
}

@media (max-width: 600px) {
    .ri-noteworthy-grid {
        grid-auto-columns: calc(50% - 8px);
        gap: 16px;
    }

    .ri-carousel-next-btn {
        width: 40px;
        height: 40px;
        right: 5px;
    }
}

.ri-noteworthy-link {
    text-decoration: none;
    display: block;
    color: inherit;
}

.ri-noteworthy-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.2s;
}

    .ri-noteworthy-card:hover {
        transform: scale(1.02);
    }

.ri-noteworthy-img-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #f4f6fa;
}

.ri-noteworthy-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ri-noteworthy-title {
    line-height: 1.4;
    -webkit-line-clamp: 2;
    font-size: 16px;
    color: rgba(15, 15, 15, 1.00);
    text-decoration-line: none;
    text-transform: none;
    font-weight: 600;
    text-align: left;
}

/* --- Modernized Sections CSS --- */
.ri-about-section {
    padding: 80px 0;
    background: #fff;
}

.ri-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.ri-about-img-box img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.ri-about-text-box h2 {
    font-size: 32px;
    font-weight: 700;
    color: #111;
    margin-bottom: 24px;
    line-height: 1.3;
}

.ri-about-text-box p {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 16px;
}

.ri-app-download-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #0355cc 0%, #023a8c 100%);
    color: #fff;
}

.ri-app-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.ri-app-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    backdrop-filter: blur(10px);
}

    .ri-app-card h3 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 30px;
    }

.ri-app-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

    .ri-app-icons img {
        width: 60px;
        height: 60px;
        object-fit: contain;
    }

.ri-app-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

    .ri-app-logo img {
        background: #fff;
        border-radius: 12px;
        padding: 8px;
        width: 70px;
        height: 70px;
    }

    .ri-app-logo span {
        font-size: 14px;
        font-weight: 600;
    }

.ri-btn-primary {
    background: #0355cc;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    display: inline-block;
}

    .ri-btn-primary:hover {
        background: #f0f0f0;
        color: #0355cc;
    }

.ri-testimonials-section {
    padding: 80px 0;
    background: #f7f9fa;
}

.text-center {
    text-align: center;
}

.ri-testimonial-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin: 10px;
    border: 1px solid #eaeaea;
}

.ri-testimonial-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.ri-testimonial-img img {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    object-fit: cover;
}

.ri-stars {
    color: #f5b041;
    font-size: 14px;
}

.ri-testimonial-text {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    position: relative;
}

    .ri-testimonial-text i {
        color: #0355cc;
        opacity: 0.2;
        font-size: 24px;
        position: absolute;
        top: -10px;
        left: -10px;
    }

    .ri-testimonial-text p {
        position: relative;
        z-index: 1;
        margin: 0;
    }

.ri-contact-section {
    padding: 80px 0;
    background: #fff;
}

.ri-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.ri-contact-form-box {
    background: #f9fafb;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #eee;
}

.ri-form-group {
    margin-bottom: 20px;
}

.ri-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s;
}

    .ri-input:focus {
        outline: none;
        border-color: #0355cc;
    }

.ri-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 24px;
}

    .ri-checkbox-group input {
        margin-top: 4px;
    }

    .ri-checkbox-group label {
        font-size: 13px;
        color: #666;
        line-height: 1.5;
    }

/* Mobile overrides for new sections */
@media (max-width: 991px) {

    .ri-about-grid,
    .ri-app-grid,
    .ri-contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .ri-category-pills {
        display: none;
    }

    .navbar-toggler {
        display: block;
    }

    .ri-location-pill .loc-text {
        max-width: 90px;
    }
}

@media (max-width: 576px) {
    .ri-login-btn span {
        display: none;
    }

    .ri-location-pill {
        margin: 0 6px;
        padding: 6px 10px;
    }

    .custom_nav-container {
        padding: 0 10px;
    }
}

/* Keep old dropdown menu styles for Terms dropdown */
.navbar-nav .dropdown-menu {
    background-color: #fff;
    border-radius: 8px;
    padding: 10px 0;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    min-width: 220px;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
}

.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
    display: block;
}

.navbar-nav .dropdown-item {
    font-size: 14px;
    color: #333;
    padding: 8px 20px;
    transition: background 0.2s;
}

    .navbar-nav .dropdown-item:hover {
        background-color: #f0f4ff;
        color: #0355cc;
    }

/* Hidden old cart/badge — replaced by icon */
.cart-container {
    position: relative;
}

.cart-button {
    display: none !important;
}

.cart-badge {
    display: none !important;
}




.boxing {
    background: #1a1a1a;
    color: white;
    border-radius: 10px;
    position: relative;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
    cursor: pointer;
}

.boxing:hover {
    transform: rotateY(180deg);
}

.boxing .img-box,
.boxing h5 {
    transition: opacity 0.3s ease;
}

.boxing:hover .img-box,
.boxing:hover h5 {
    opacity: 0;
}

/* Back text using ::after */
.boxing::after {
    content: attr(data-back);
    position: absolute;
    inset: 0;
    background-color: darkblue;
    color: white;
    font-size: 1.3rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    pointer-events: none;
}

/* Hide front content on back */
.boxing::before {
    content: '';
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
}

.boxing::after {
    content: attr(data-back);
    white-space: pre-line;
    /* This makes line breaks work */
}

.btnccs {
    background-color: black;
    color: white;
    padding: 12px 24px;
    margin-bottom: 2%;
    margin-top: 2%;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

    .btnccs:hover {
        background-color: whitesmoke;
        color: black;
        border: 2px solid yellow;
        transform: scale(1.05);
    }

@media (max-width: 767px) {
    .detail-box {
        padding-bottom: 20px !important;
    }

    .img-box img {
        width: 100%;
        height: auto;
    }
}


@media (max-width: 767px) {

    .IMAGBOX,
    .professional-img-div {
        display: none !important;
    }
}


@media (max-width: 767px) {
    .layout_padding {
        padding-top: 10px;
        padding-bottom: 0px;
    }
}
/* =========================================
   SELECT CATEGORY
========================================= */

.ri-category-select-box {
    width: 100%;
    margin-bottom: 16px;
}

.ri-category-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin-bottom: 7px;
}

.ri-category-select-wrap {
    position: relative;
    width: 100%;
}

.ri-category-select {
    width: 100%;
    height: 46px;
    padding: 0 42px 0 14px;
    border: 1px solid #dedede;
    border-radius: 10px;
    background: #fff;
    color: #333;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: all .25s ease;
}

    .ri-category-select:hover {
        border-color: #b9c9e8;
    }

    .ri-category-select:focus {
        border-color: #0355cc;
        box-shadow: 0 0 0 3px rgba(3, 85, 204, .10);
    }

.ri-category-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #555;
    pointer-events: none;
    transition: transform .25s ease;
}

.ri-category-select:focus + .ri-category-arrow {
    transform: translateY(-50%) rotate(180deg);
}


/* =========================================
   SERVICE RESULT
========================================= */

.ri-service-result {
    width: 100%;
    /* IMPORTANT */
    opacity: 1;
    max-height: none;
    overflow: visible;
    transform: translateY(0);
}



    /* =========================================
   SLIDE + FADE
========================================= */

    .ri-service-result.animate-in {
        animation: riServiceSlideFade .45s ease both;
    }

@keyframes riServiceSlideFade {

    0% {
        opacity: 0.25;
        transform: translateY(18px);
    }

    60% {
        opacity: 0.75;
        transform: translateY(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 500px) {

    .ri-category-select {
        height: 44px;
        font-size: 13px;
    }

    .ri-category-label {
        font-size: 12px;
    }
}

/* Previous Button */
.ri-carousel-prev-btn {
    position: absolute;
    left: -24px;
    top: 48%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 10px;
    background: #fff;
    border: 1px solid #d0d0d0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: #1a1a1a;
    outline: none;
    /* Initially hidden */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, background 0.2s ease, transform 0.2s ease;
}

    /* Visible Previous Button */
    .ri-carousel-prev-btn.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Hover */
    .ri-carousel-prev-btn:hover,
    .ri-carousel-next-btn:hover {
        background: #f7f7f7;
    }

    /* Button press effect */
    .ri-carousel-prev-btn:active,
    .ri-carousel-next-btn:active {
        transform: translateY(-50%) scale(0.94);
    }

/* Footer Styles */
.ri-footer {
    background-color: #f5f5f5;
    padding: 50px 0 0 0;
    font-family: 'Segoe UI', sans-serif;
    border-top: 1px solid #e0e0e0;
}

.ri-footer-logo img {
    width: 160px;
    height: auto;
    margin-bottom: 28px;
}

.ri-footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding-bottom: 40px;
}

.ri-footer-col h6 {
    font-size: 15px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 18px;
    letter-spacing: 0.3px;
}

.ri-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .ri-footer-col ul li {
        margin-bottom: 12px;
    }

        .ri-footer-col ul li a {
            font-size: 14px;
            color: #555555;
            text-decoration: none;
            transition: color 0.2s;
            display: inline-block;
        }

            .ri-footer-col ul li a:hover {
                color: #0355cc;
            }

/* Social Icons */
.ri-social-icons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ri-social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555555;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.2s;
}

    .ri-social-icon:hover {
        border-color: #0355cc;
        color: #0355cc;
        background: #eef4ff;
    }

/* App Badges */
.ri-app-badges {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ri-app-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #111111;
    color: #ffffff;
    border-radius: 8px;
    padding: 8px 14px;
    text-decoration: none;
    transition: background 0.2s;
    width: fit-content;
}

    .ri-app-badge:hover {
        background: #0355cc;
        color: #fff;
    }

    .ri-app-badge i {
        font-size: 20px;
    }

.ri-app-badge-text {
    line-height: 1.2;
}

    .ri-app-badge-text small {
        font-size: 10px;
        display: block;
        opacity: 0.8;
    }

    .ri-app-badge-text strong {
        font-size: 13px;
        display: block;
    }

/* Footer Bottom Bar */
.ri-footer-bottom {
    background-color: #e8e8e8;
    border-top: 1px solid #d5d5d5;
    padding: 16px 0;
    text-align: center;
}

    .ri-footer-bottom p {
        font-size: 13px;
        color: #777777;
        margin: 0;
    }

    .ri-footer-bottom a {
        color: #0355cc;
        text-decoration: none;
    }

        .ri-footer-bottom a:hover {
            text-decoration: underline;
        }

/* Responsive Footer */
@media (max-width: 991px) {
    .ri-footer-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .ri-footer-columns {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ri-footer-logo img {
        width: 130px;
    }
}


/* MOST BOOKED SERVICES */
.ri-most-booked-section {
    padding: 35px 0 65px;
    background: #fff;
    overflow: hidden;
}




.ri-most-booked-wrapper {
    position: relative;
    width: 100%;
}

.ri-most-booked-track {
    display: flex;
    gap: 24px;
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

    .ri-most-booked-track::-webkit-scrollbar {
        display: none;
    }

.ri-most-booked-card {
    flex: 0 0 calc((100% - 96px) / 5);
    min-width: 0;
    scroll-snap-align: start;
    color: #171717;
    text-decoration: none !important;
    cursor: pointer;
}

    .ri-most-booked-card:hover {
        color: #171717;
        text-decoration: none !important;
    }

.ri-most-booked-image {
    width: 100%;
    aspect-ratio: 0.92 / 1;
    overflow: hidden;
    border-radius: 14px;
    background: #f4f4f4;
}

    .ri-most-booked-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .25s ease;
    }

.ri-most-booked-card:hover .ri-most-booked-image img {
    transform: scale(1.03);
}


.ri-most-booked-arrow {
    position: absolute;
    top: 40%;
    z-index: 10;
    width: 72px;
    height: 72px;
    border: 1px solid #e6e6e6;
    border-radius: 50%;
    background: #fff;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.ri-most-booked-next {
    right: -18px;
}

.ri-most-booked-prev {
    left: -18px;
    display: none;
}

    .ri-most-booked-prev.show {
        display: flex;
    }

.ri-most-booked-next.hide {
    display: none;
}

@media (max-width: 1200px) {
    .ri-most-booked-card {
        flex-basis: calc((100% - 48px) / 3);
    }

    .ri-most-booked-title {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .ri-most-booked-section {
        padding: 28px 0 40px;
    }



    .ri-most-booked-track {
        gap: 14px;
    }

    .ri-most-booked-card {
        flex-basis: 48%;
    }

        

    .ri-most-booked-arrow {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    .ri-most-booked-next {
        right: -9px;
    }

    .ri-most-booked-prev {
        left: -9px;
    }
}

@media (max-width: 480px) {
    .ri-most-booked-card {
        flex-basis: 78%;
    }
}


/* Most Booked Services */
.ri-most-booked-track {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    scroll-behavior: smooth;
    align-items: flex-start;
}

.ri-most-booked-card {
    /* display: flex; */
    flex: 0 0 calc((100% - 128px) / 5);
    /* flex-direction: column; */
    min-width: 0;
    color: #171717;
    text-decoration: none !important;
}

.ri-most-booked-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 16px;
    order: 1;
}

    .ri-most-booked-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.ri-most-booked-card h3 {
    order: 2;
    margin: 5px 0 5px;
    font-size: 15px;
    font-weight: 500;
    /* width: 84px; */
    white-space: nowrap;
    /* padding: 10px 10px 10px 0; */
    text-overflow: ellipsis;
    line-height: 1.4;
    color: #000000;
}
.ri-most-booked-rating {
    order: 3;
    margin-top: 0px;
    font-size: 14px;
    color: #000000;
}

.ri-rating-star {
    color: #555;
    font-size: 18px;
}

.ri-most-booked-price {
    order: 4;
    margin-top: 0px;
    font-size: 14px;
    /* font-weight: 600; */
    color: #222;
}

    .ri-most-booked-price del {
        margin-left: 8px;
        /* font-size: 15px; */
        font-weight: 400;
        color: #888;
    }

@media (max-width: 768px) {
    .ri-most-booked-track {
        gap: 16px;
    }

    .ri-most-booked-card {
        flex-basis: 72%;
    }

        .ri-most-booked-card h3 {
            font-size: 18px;
            margin-top: 12px;
        }
}

/* Cleaning Essentials */
.ri-cleaning-section {
    width: 100%;
    padding: 68px 0 60px;
    background: #fff;
    font-family: Arial, sans-serif;
}


.ri-cleaning-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}



    .ri-cleaning-header p {
        margin: -8px 0 0;
        font-size: 19px;
        color: #666;
    }

.ri-cleaning-see-all {
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-width: 96px; */
    /* height: 63px; */
    padding: 7px 20px;
    border: 1px solid #ddd;
    border-radius: 7px;
    color: #7041ff;
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

    .ri-cleaning-see-all:hover {
        color: #7041ff;
        background: #faf9ff;
    }
.ri-cleaning-datalist,
.ri-salon-datalist {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

    .ri-cleaning-datalist .ri-most-booked-card,
    .ri-salon-datalist .ri-most-booked-card {
        width: 260px;
        max-width: 100%;
        height: 100%;
    }

    .ri-cleaning-datalist .ri-most-booked-actions,
    .ri-salon-datalist .ri-most-booked-actions {
        display: flex;
        gap: 8px;
    }

    .ri-cleaning-datalist .ri-most-booked-btn,
    .ri-salon-datalist .ri-most-booked-btn {
        flex: 1;
        text-align: center;
    }

@media (max-width: 600px) {
    .ri-cleaning-datalist,
    .ri-salon-datalist {
        gap: 12px;
    }

        .ri-cleaning-datalist .ri-most-booked-card,
        .ri-salon-datalist .ri-most-booked-card {
            width: 100%;
        }
}
.ri-cleaning-datalist {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.ri-cleaning-card {
    min-width: 0;
}

.ri-cleaning-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    background: #f2f2f2;
}

    .ri-cleaning-img img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ri-cleaning-card h3 {
    margin: 21px 0 9px;
    color: #171717;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
}

.ri-cleaning-rating {
    margin-top: 5px;
    color: #606060;
    font-size: 14px;
}

    .ri-cleaning-rating span {
        color: #333;
    }

.ri-cleaning-price {
    margin-top: 4px;
    color: #171717;
    font-size: 16px;
}

/* Tablet */
@media (max-width: 992px) {
    .ri-cleaning-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 18px;
    }

}

/* Mobile */
@media (max-width: 576px) {
    .ri-cleaning-section {
        padding: 38px 0 45px;
    }

        .ri-cleaning-section .ri-container {
            padding: 0 16px;
        }

    .ri-cleaning-header {
        align-items: flex-start;
        margin-bottom: 25px;
    }


        .ri-cleaning-header p {
            font-size: 14px;
            line-height: 1.5;
        }

    .ri-cleaning-see-all {
        min-width: 75px;
        height: 43px;
        padding: 0 10px;
        font-size: 13px;
    }

    .ri-cleaning-grid {
        gap: 24px 12px;
    }

    .ri-cleaning-card h3 {
        margin-top: 12px;
        font-size: 15px;
        line-height: 1.4;
    }

    .ri-cleaning-rating {
        font-size: 13px;
    }

    .ri-cleaning-price {
        margin-top: 8px;
        font-size: 15px;
    }
}

/* ======================================
   SALON FOR WOMEN
====================================== */
.ri-salon-section {
    width: 100%;
    padding: 40px 0 55px;
    background: #fff;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}



/* Heading and subtitle */
.ri-salon-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}



    .ri-salon-header p {
        margin: -12px 0 0;
        color: #666;
        font-size: 19px;
    }

/* See all button */
.ri-salon-see-all {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 22px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fff;
    color: #7041ff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease;
}

    .ri-salon-see-all:hover {
        color: #7041ff;
        background: #faf9ff;
    }

/* Four cards */
.ri-salon-datalist {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.ri-salon-card {
    min-width: 0;
    color: #171717;
}

/* Images */
.ri-salon-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 16px;
    background: #f3f3f3;
}

    .ri-salon-img img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s ease;
    }

.ri-salon-card:hover .ri-salon-img img {
    transform: scale(1.03);
}

/* New badge */
.ri-salon-badge {
    position: absolute;
    top: 0;
    left: 17px;
    z-index: 2;
    padding: 8px 15px 10px;
    background: #800b43;
    color: #fff;
    font-size: 23px;
    line-height: 1.2;
    border-radius: 0 0 9px 9px;
}

/* Service title */
.ri-salon-card h3 {
    margin: 18px 0 4px;
    color: #171717;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.55;
}

/* Rating */
.ri-salon-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #222;
    font-size: 16px;
    line-height: 1.5;
}

.ri-salon-star {
    color: #555;
    font-size: 18px;
}

/* Price */
.ri-salon-price {
    margin-top: 3px;
    color: #171717;
    font-size: 15px;
    font-weight: 400;
}

/* Tablet */
@media (max-width: 992px) {
    .ri-salon-section .ri-container {
        padding: 0 22px;
    }

    

    .ri-salon-header p {
        font-size: 19px;
    }

    .ri-salon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 20px;
    }

    .ri-salon-card h3 {
        font-size: 19px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .ri-salon-section {
        padding: 30px 0 40px;
    }

        .ri-salon-section .ri-container {
            padding: 0 16px;
        }

    .ri-salon-header {
        margin-bottom: 25px;
        gap: 12px;
    }

        

        .ri-salon-header p {
            margin-top: 6px;
            font-size: 15px;
        }

    .ri-salon-see-all {
        padding: 10px 13px;
        font-size: 14px;
        border-radius: 8px;
    }

    .ri-salon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 14px;
    }

    .ri-salon-img {
        border-radius: 10px;
    }

    .ri-salon-badge {
        left: 10px;
        padding: 6px 10px;
        font-size: 16px;
    }

    .ri-salon-card h3 {
        margin-top: 12px;
        margin-bottom: 5px;
        font-size: 15px;
        line-height: 1.45;
    }

    .ri-salon-rating {
        font-size: 13px;
    }

    .ri-salon-star {
        font-size: 15px;
    }

    .ri-salon-price {
        margin-top: 5px;
        font-size: 15px;
    }
}



/* ==========================================
   HOME CLEANING PROMOTIONAL BANNER
========================================== */
.ri-home-cleaning-banner {
    width: 100%;
    padding: 48px 0 35px;
    background: #fff;
    box-sizing: border-box;
}

.ri-home-cleaning-banner-content {
    position: relative;
    /* width: calc(100% - 80px); */
    /* max-width: 1600px; */
    min-height: 410px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    align-items: center;
   /* background: #d2c3ba;*/
    box-sizing: border-box;
}

.ri-home-cleaning-banner-text {
    position: relative;
    z-index: 2;
    width: 54%;
    padding: 55px 4%;
    box-sizing: border-box;
}

    .ri-home-cleaning-banner-text h2 {
        margin: 0 0 18px;
        color: #111;
        font-size: clamp(32px, 3.2vw, 52px);
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -1px;
    }

    .ri-home-cleaning-banner-text p {
        margin: 0 0 55px;
        color: #171717;
        font-size: clamp(18px, 1.8vw, 29px);
        line-height: 1.45;
    }

.ri-home-cleaning-book-btn {
    display: inline-flex;
    /* min-width: 210px; */
    /* min-height: 76px; */
    align-items: center;
    justify-content: center;
    padding: 10px 30px;
    border-radius: 10px;
    background: #111;
    color: #fff !important;
    font-size: 19px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .2s ease, transform .2s ease;
    box-sizing: border-box;
}

    .ri-home-cleaning-book-btn:hover {
        background: #333;
        color: #fff !important;
        transform: translateY(-2px);
    }

/*.ri-home-cleaning-banner-image {
    position: absolute;
    inset: 0 0 0 auto;
    width: 58%;
    height: 100%;
    overflow: hidden;
}*/

    .ri-home-cleaning-banner-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

/* Tablet */
@media (max-width: 992px) {
    .ri-home-cleaning-banner {
        padding: 30px 0;
    }

    .ri-home-cleaning-banner-content {
        width: calc(100% - 40px);
        min-height: 380px;
    }

    .ri-home-cleaning-banner-text {
        width: 60%;
        padding: 35px 25px;
    }

        .ri-home-cleaning-banner-text p {
            margin-bottom: 35px;
        }

    .ri-home-cleaning-book-btn {
        min-width: 155px;
        min-height: 58px;
        font-size: 21px;
        border-radius: 12px;
    }

    .ri-home-cleaning-banner-image {
        width: 54%;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .ri-home-cleaning-banner {
        padding: 20px 0 25px;
    }

    .ri-home-cleaning-banner-content {
        width: calc(100% - 28px);
        min-height: 0;
        align-items: flex-start;
    }

    .ri-home-cleaning-banner-text {
        width: 100%;
        padding: 28px 20px;
    }

        .ri-home-cleaning-banner-text h2 {
            max-width: 300px;
            font-size: 30px;
            letter-spacing: -.5px;
        }

        .ri-home-cleaning-banner-text p {
            max-width: 270px;
            margin-bottom: 22px;
            font-size: 17px;
        }

    .ri-home-cleaning-book-btn {
        min-width: 125px;
        min-height: 48px;
        padding: 10px 18px;
        border-radius: 10px;
        font-size: 17px;
    }

    .ri-home-cleaning-banner-image {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 48%;
    }

        .ri-home-cleaning-banner-image::before {
            top: 0;
            bottom: auto;
            left: 0;
            width: 100%;
            height: 35%;
            background: linear-gradient( to bottom, #d2c3ba 0%, rgba(210, 195, 186, 0) 100% );
        }
}


.ri-most-booked-list {
    display: flex;
    gap: 18px;
    width: 100%;
}

    .ri-most-booked-list .ri-most-booked-card {
        flex: 0 0 250px;
        min-width: 250px;
        width: 250px;
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        background: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 14px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, .06);
    }

.ri-most-booked-image {
    width: 100%;
    height: 165px;
    overflow: hidden;
    background: #f5f5f5;
}

.ri-most-booked-service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ri-most-booked-details {
    padding: 14px;
}

.ri-most-booked-category {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.ri-most-booked-warranty {
    font-size: 12px;
    color: #168044;
    margin-bottom: 8px;
}

.ri-most-booked-service-title {
    font-size: 16px;
    line-height: 1.45;
    font-weight: 700;
    color: #222;
   /* min-height: 46px;*/
    margin: 0 0 10px;
}

.ri-most-booked-price {
    font-size: 16px;
    font-weight: 700;
    color: #08743b;
    margin-bottom: 14px;
}

.ri-most-booked-actions {
    display: flex;
    gap: 8px;
}

.ri-most-booked-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 9px 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}

.ri-view-details-btn {
    color: #fff !important;
    background: #0355cc;
    border: 1px solid #0355cc;
}

.ri-rate-card-btn {
    color: #0355cc !important;
    background: #fff;
    border: 1px solid #0355cc;
}

.ri-most-booked-btn:hover {
    opacity: .88;
}

@media(max-width: 576px) {
    .ri-most-booked-list .ri-most-booked-card {
        flex-basis: 235px;
        min-width: 235px;
    }
}


.home-service-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .65);
    z-index: 9998;
}

.home-service-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(660px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    z-index: 9999;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

    .home-service-modal.open,
    .home-service-overlay.open {
        display: block;
    }

.home-service-close {
    position: sticky;
    top: 0;
    float: right;
    margin: -12px -10px 5px 10px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #222;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.home-service-main {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    clear: both;
}

.home-service-image {
    width: 230px;
    max-width: 40%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    background: #f1f5f9;
}

.home-service-info {
    flex: 1;
    min-width: 0;
}

    .home-service-info h2 {
        margin: 0 0 12px;
        font-size: 25px;
        color: #172554;
    }

.home-service-price {
    margin: 10px 0;
    color: #087443;
    font-weight: 700;
    font-size: 19px;
}

.home-service-info p {
    color: #475569;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.home-service-faq-section {
    margin-top: 25px;
    border-top: 1px solid #e2e8f0;
    padding-top: 20px;
}

    .home-service-faq-section h3 {
        font-size: 21px;
        margin-bottom: 15px;
    }

.home-service-faq-item {
    padding: 14px;
    margin-bottom: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
}

.home-service-question {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 7px;
}

.home-service-answer {
    color: #475569;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

body.home-service-modal-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .home-service-modal {
        padding: 18px;
        max-height: 90vh;
    }

    .home-service-main {
        flex-direction: column;
        gap: 15px;
    }

    .home-service-image {
        width: 100%;
        max-width: 100%;
        height: 190px;
    }

    .home-service-info h2 {
        font-size: 21px;
    }
}
.home-service-variants,
.home-service-brands {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

    .home-service-variants h3,
    .home-service-brands h3 {
        font-size: 21px;
        font-weight: 700;
        margin-bottom: 15px;
    }
.home-variant-list {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

    .home-variant-list .home-variant-card {
        flex: 0 0 264px;
        width: 264px;
        min-height: 264px;
        box-sizing: border-box;
        border: 1px solid #dce4ef;
        border-radius: 14px;
        padding: 18px 22px;
        background: #fff;
        margin: 0;
    }

.home-variant-card img {
    display: block;
    width: 110px;
    height: 90px;
    object-fit: contain;
    margin-bottom: 14px;
}

.home-variant-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 14px;
}

.home-variant-price {
    color: #078044;
    font-size: 19px;
    font-weight: 700;
}

@media (max-width: 600px) {
    .home-variant-list {
        gap: 10px;
    }

        .home-variant-list .home-variant-card {
            flex: 1 1 calc(50% - 10px);
            width: auto;
            min-width: 0;
            padding: 12px;
        }
}

.home-service-brands-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 600px) {
    .home-variant-card {
        min-width: 135px;
    }
}

/* =====================================================
   HOME PAGE RATE CARD MODAL - COMPLETE CSS
   ===================================================== */

:root {
    --rc-primary: #0755a5;
    --rc-primary-dark: #073b73;
    --rc-primary-light: #eaf3ff;
    --rc-text: #172b4d;
    --rc-muted: #64748b;
    --rc-border: #e3eaf3;
    --rc-surface: #f7faff;
    --rc-success: #078044;
    --rc-radius: 16px;
}

/* ---------- Background Overlay ---------- */

.home-rate-card-overlay {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(9, 22, 43, 0.70);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 99998;
    opacity: 0;
    transition: opacity .25s ease;
}

    .home-rate-card-overlay.open {
        display: block;
        opacity: 1;
    }

/* ---------- Main Modal ---------- */

.home-rate-card-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(750px, calc(100% - 32px));
    max-height: 88vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 22px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .30);
    box-sizing: border-box;
    z-index: 99999;
    opacity: 0;
    transform: translate(-50%, -46%) scale(.97);
    transition: opacity .25s ease, transform .25s ease;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #b7cbe3 #f1f5f9;
}

    .home-rate-card-modal.open {
        display: block;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .home-rate-card-modal::-webkit-scrollbar {
        width: 7px;
    }

    .home-rate-card-modal::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 10px;
    }

    .home-rate-card-modal::-webkit-scrollbar-thumb {
        background: #b7cbe3;
        border-radius: 10px;
    }

        .home-rate-card-modal::-webkit-scrollbar-thumb:hover {
            background: #7fa6d1;
        }

body.home-rate-card-open {
    overflow: hidden;
}

/* ---------- Modal Close Button ---------- */

.home-rate-card-close {
    position: sticky;
    top: 0;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-top: -45px;
    margin-right: -9px;
    padding: 0;
    border: 1px solid #e5eaf2;
    border-radius: 50%;
    background: #f5f8fc;
    color: #253c59;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

    .home-rate-card-close:hover {
        background: var(--rc-primary);
        color: #fff;
        border-color: var(--rc-primary);
        transform: rotate(90deg);
        box-shadow: 0 5px 15px rgba(7, 85, 165, .20);
    }

/* ---------- Modal Header ---------- */

.home-rate-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 5px 0 24px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--rc-border);
    clear: both;
}

.home-rate-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 13px;
    background: linear-gradient(135deg, #e9f3ff, #d5e8ff);
    color: var(--rc-primary);
    font-size: 23px;
    box-shadow: inset 0 0 0 1px rgba(7, 85, 165, .06);
}

.home-rate-card-header h2 {
    margin: 0 0 7px;
    color: var(--rc-text);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.5px;
}

.home-rate-card-header p {
    margin: 0;
    color: var(--rc-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* ---------- Rate Card Content ---------- */

.home-rate-card-content {
    width: 100%;
    min-width: 0;
}

.home-rate-category {
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    background: #fff;
    box-shadow: 0 4px 14px rgba(26, 57, 91, .035);
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .home-rate-category:hover {
        border-color: #c5d8ef;
        box-shadow: 0 7px 22px rgba(26, 57, 91, .07);
    }

    .home-rate-category:last-child {
        margin-bottom: 0;
    }

/* ---------- Category Heading ---------- */

.home-rate-category-title {
    margin: 0;
    padding: 17px 20px;
    background: linear-gradient(110deg, #f0f6ff, #f8fbff);
    color: #183b63;
    font-size: 17px;
    font-weight: 750;
    line-height: 1.5;
    border-bottom: 1px solid var(--rc-border);
}

/* ---------- Accordion Item ---------- */

.home-rate-accordion-item {
    overflow: hidden;
    border: 1px solid var(--rc-border);
    border-radius: 15px;
    background: #fff;
    margin-bottom: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .home-rate-accordion-item:last-child {
        margin-bottom: 0;
    }

    .home-rate-accordion-item:hover {
        border-color: #bdd4ef;
        box-shadow: 0 6px 20px rgba(23, 59, 99, .06);
    }

/* ---------- Accordion Clickable Heading ---------- */

.home-rate-accordion-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 73px;
    padding: 10px 15px;
    border: 0;
    background: #fff;
    color: var(--rc-text);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s ease;
}

    .home-rate-accordion-btn:hover {
        background: #f7faff;
    }

    .home-rate-accordion-btn:focus-visible {
        outline: 3px solid rgba(7, 85, 165, .25);
        outline-offset: -3px;
    }

    .home-rate-accordion-btn[aria-expanded="true"] {
        background: #f3f8ff;
        border-bottom: 1px solid var(--rc-border);
    }

/* Left side of accordion */

.home-rate-accordion-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.home-rate-accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    border-radius: 13px;
    background: var(--rc-primary-light);
    color: var(--rc-primary);
    font-size: 19px;
    transition: background .2s ease, color .2s ease;
}

.home-rate-accordion-btn[aria-expanded="true"]
.home-rate-accordion-icon {
    background: var(--rc-primary);
    color: #fff;
}

/* Category name and service count */

.home-rate-accordion-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    color: #1c3554;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

    .home-rate-accordion-title small {
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        padding: 4px 9px;
        border-radius: 20px;
        background: #edf4fd;
        color: #55708e;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .2px;
    }

/* Right side arrow */

.home-rate-accordion-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: #f1f5fa;
    color: #47617e;
    font-size: 13px;
    transition: transform .25s ease, background .2s ease, color .2s ease;
}

.home-rate-accordion-btn[aria-expanded="true"]
.home-rate-accordion-arrow {
    transform: rotate(180deg);
    background: var(--rc-primary);
    color: #fff;
}

/* ---------- Accordion Expandable Panel ---------- */

.home-rate-accordion-panel {
    padding: 0;
    background: #fff;
}

    .home-rate-accordion-panel[hidden] {
        display: none !important;
    }

    .home-rate-accordion-panel:not([hidden]) {
        display: block;
        animation: homeRatePanelIn .22s ease both;
    }

@keyframes homeRatePanelIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Responsive Table Wrapper ---------- */

.home-rate-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- Rate Card Table ---------- */

.home-rate-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    font-family: inherit;
}

    .home-rate-table thead th {
        padding: 15px 20px;
        background: #f8fafd;
        color: #65758b;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .65px;
        text-align: left;
        white-space: nowrap;
        border-bottom: 1px solid #e7edf5;
    }

    .home-rate-table tbody td {
        padding: 16px 20px;
        color: #34465d;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.6;
        vertical-align: middle;
        border-bottom: 1px solid #edf1f6;
        overflow-wrap: anywhere;
    }

    .home-rate-table tbody tr {
        transition: background .18s ease;
    }

        .home-rate-table tbody tr:hover {
            background: #f8fbff;
        }

        .home-rate-table tbody tr:last-child td {
            border-bottom: 0;
        }

    /* Price column */

    .home-rate-table th:last-child,
    .home-rate-table td:last-child {
        width: 165px;
        text-align: right;
        white-space: nowrap;
    }

    .home-rate-table .home-rate-charge {
        color: var(--rc-success) !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        font-variant-numeric: tabular-nums;
    }

/* ---------- Empty / No Data Message ---------- */

.home-rate-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 20px;
    border: 1px dashed #cbd8e8;
    border-radius: 13px;
    background: var(--rc-surface);
    color: var(--rc-muted);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

/* ---------- Optional Modal Footer ---------- */

.home-rate-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--rc-border);
    color: var(--rc-muted);
    font-size: 12px;
}

/* ---------- Keyboard Accessibility ---------- */

.home-rate-card-close:focus-visible {
    outline: 3px solid rgba(7, 85, 165, .35);
    outline-offset: 3px;
}

/* ---------- Tablet ---------- */

@media (max-width: 768px) {
    .home-rate-card-modal {
        width: calc(100% - 28px);
        max-height: 90vh;
        padding: 23px;
        border-radius: 18px;
    }

    .home-rate-card-header {
        gap: 12px;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .home-rate-card-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        font-size: 23px;
        border-radius: 15px;
    }

    .home-rate-card-header h2 {
        font-size: 24px;
    }

    .home-rate-accordion-btn {
        padding: 15px;
    }

    .home-rate-table thead th,
    .home-rate-table tbody td {
        padding: 14px 15px;
    }
}

/* ---------- Mobile ---------- */

@media (max-width: 480px) {
    .home-rate-card-modal {
        width: calc(100% - 16px);
        max-height: 93vh;
        padding: 17px 12px;
        border-radius: 16px;
    }

    .home-rate-card-close {
        width: 36px;
        height: 36px;
        font-size: 25px;
        margin-top: -3px;
        margin-right: -2px;
    }

    .home-rate-card-header {
        gap: 10px;
        padding-bottom: 17px;
        margin-bottom: 17px;
    }

    .home-rate-card-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 12px;
        font-size: 20px;
    }

    .home-rate-card-header h2 {
        font-size: 20px;
        letter-spacing: -.2px;
    }

    .home-rate-card-header p {
        font-size: 12px;
    }

    .home-rate-accordion-item {
        margin-bottom: 11px;
        border-radius: 12px;
    }

    .home-rate-accordion-btn {
        min-height: 66px;
        gap: 8px;
        padding: 12px 10px;
    }

    .home-rate-accordion-left {
        gap: 10px;
    }

    .home-rate-accordion-icon {
        width: 37px;
        height: 37px;
        flex-basis: 37px;
        border-radius: 10px;
        font-size: 16px;
    }

    .home-rate-accordion-title {
        font-size: 14px;
    }

        .home-rate-accordion-title small {
            padding: 3px 7px;
            font-size: 10px;
        }

    .home-rate-accordion-arrow {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
        font-size: 11px;
    }

    .home-rate-table {
        min-width: 360px;
    }

        .home-rate-table thead th {
            padding: 12px;
            font-size: 10px;
        }

        .home-rate-table tbody td {
            padding: 13px 12px;
            font-size: 13px;
        }

        .home-rate-table th:last-child,
        .home-rate-table td:last-child {
            width: 110px;
        }

        .home-rate-table .home-rate-charge {
            font-size: 14px !important;
        }

    .home-rate-empty {
        padding: 22px 12px;
        font-size: 13px;
    }

    .home-rate-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ---------- Reduced Motion Accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
    .home-rate-card-modal,
    .home-rate-card-overlay,
    .home-rate-card-close,
    .home-rate-accordion-item,
    .home-rate-accordion-arrow,
    .home-rate-accordion-icon {
        transition: none !important;
    }

    .home-rate-accordion-panel:not([hidden]) {
        animation: none !important;
    }
}
button:focus{
    outline:none!important;
}


/* Hero Image Slider */
.ri-hero-image-box {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    width: 100%;
}

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

.ri-hero-slide {
    display: none;
    width: 100%;
}

    .ri-hero-slide.active {
        display: block;
        animation: riHeroFade 0.45s ease-in-out;
    }

    .ri-hero-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.ri-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #0355cc;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ri-hero-prev {
    left: 12px;
}

.ri-hero-next {
    right: 12px;
}

.ri-hero-dots {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 5;
}

    .ri-hero-dots button {
        width: 9px;
        height: 9px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: #c5c5c5;
        cursor: pointer;
    }

        .ri-hero-dots button.active {
            width: 23px;
            border-radius: 10px;
            background: #0355cc;
        }

@keyframes riHeroFade {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 767px) {
    .ri-hero-arrow {
        width: 32px;
        height: 32px;
    }

    .ri-hero-prev {
        left: 8px;
    }

    .ri-hero-next {
        right: 8px;
    }
}


/* Login Modal */
.ri-login-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.65);
    align-items: center;
    justify-content: center;
    padding: 15px;
}

    .ri-login-modal.show {
        display: flex;
    }

.ri-login-box {
    position: relative;
    width: 100%;
    max-width: 430px;
    padding: 32px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 15px 50px rgba(0, 0, 0, .22);
    animation: riLoginAppear .25s ease-out;
}

.ri-login-close {
    position: absolute;
    top: 10px;
    right: 15px;
    border: none;
    background: transparent;
    font-size: 28px;
    cursor: pointer;
    color: #555;
}

.ri-login-logo {
    display: block;
    width: 190px;
    max-width: 85%;
    margin: 0 auto 15px;
}

.ri-login-title {
    text-align: center;
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #172033;
}

.ri-login-subtitle {
    text-align: center;
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 20px;
}

.ri-login-field {
    margin-bottom: 16px;
}

    .ri-login-field label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 7px;
        color: #374151;
    }

    .ri-login-field input {
        width: 100%;
        height: 46px;
        padding: 10px 12px;
        border: 1px solid #d1d5db;
        border-radius: 7px;
        outline: none;
        font-size: 14px;
    }

        .ri-login-field input:focus {
            border-color: #0355cc;
            box-shadow: 0 0 0 3px rgba(3, 85, 204, .1);
        }

.ri-login-submit {
    display: block;
    width: 100%;
    min-height: 46px;
    margin-top: 18px;
    border: none;
    border-radius: 7px;
    background: #0355cc;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

    .ri-login-submit:hover {
        background: #0647a7;
    }

.ri-login-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    font-size: 13px;
}

    .ri-login-links a {
        color: #0355cc;
        text-decoration: none;
    }

.ri-login-message {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    color: #dc2626;
}

@keyframes riLoginAppear {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 480px) {
    .ri-login-box {
        padding: 26px 20px;
    }
}
/* ===== INLINE SEARCH BAR (navbar ke andar) ===== */
.ri-inline-search {
    flex: 1 1 240px;
    max-width: 240px;
    margin: 0 12px;
}

.ri-inline-search-inner {
    position: relative;
    display: flex;
    align-items: center;
}

.ri-inline-search-icon {
    position: absolute;
    left: 14px;
    color: #0355cc;
    font-size: 14px;
    pointer-events: none;
}

.ri-inline-search-input {
    width: 100%;
    padding: 9px 10px 9px 30px;
    border: 1.5px solid #0355cc;
    border-radius: 22px;
    font-size: 14px;
    font-family: 'Segoe UI', sans-serif;
    outline: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden !important;
    color: #0355cc;
    background: #fff;
    transition: box-shadow 0.2s ease;
}
/* Home modal variant add/plus/minus — service_repair jaisa */
.home-variant-card .uc-var-add-btn {
    border: 1px solid #6d35e8;
    color: #6d35e8;
    background: #fff;
    border-radius: 6px;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    width: 100%;
    display: block;
    text-decoration: none;
    margin-top: 8px;
}

    .home-variant-card .uc-var-add-btn:hover {
        background: #f4f0ff;
        color: #6d35e8;
    }

.home-variant-card .uc-qty-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f7fa;
    border: 1px solid #6d35e8;
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 8px;
}

    .home-variant-card .uc-qty-counter span,
    .home-variant-card .uc-qty-counter a {
        color: #6d35e8;
        font-weight: 700;
        font-size: 14px;
        text-decoration: none;
    }

    .home-variant-card .uc-qty-counter a {
        font-size: 16px;
        padding: 0 6px;
    }

    .ri-inline-search-input:focus {
        box-shadow: 0 0 0 3px rgba(3, 85, 204, 0.12);
    }

.ri-inline-search-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #0355cc;
    font-size: 15px;
    padding: 4px;
    line-height: 1;
}

/* Mobile: search bar full width ho jaye */
@media (max-width: 768px) {
    .ri-inline-search {
        flex: 1 1 100%;
        max-width: 100%;
        margin: 6px 0;
        order: 10;
    }
}

/* ═══════════════════════════════════════════════════════════════
   REPAIR INDIA — RESPONSIVE MEDIA QUERIES ONLY
   (Header + Air Conditioner + Fridge Services)
   Desktop CSS ko touch nahi karna — sirf ye paste karein
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   1. TABLET — max-width: 991px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

    /* ─────────── HEADER ─────────── */
    .ri-category-pills {
        display: none;
    }

    .navbar-toggler {
        display: block;
        margin-left: auto;
        order: 99;
    }

    .ri-location-pill .loc-text {
        max-width: 90px;
    }

    .ri-inline-search {
        flex: 1 1 180px;
        max-width: 180px;
        margin: 0 8px;
    }

    .navbar-brand img {
        width: 120px;
    }

    .custom_nav-container {
        flex-wrap: wrap;
        height: auto;
        padding: 8px 16px;
    }

    .ri-inline-search {
        flex: 1 1 100%;
        max-width: 100%;
        order: 10;
        margin: 6px 0 0;
    }


    /* ─────────── AIR CONDITIONER ─────────── */
    .ri-cleaning-section {
        padding: 50px 0 50px;
    }

        .ri-cleaning-section .ri-container {
            padding: 0 22px;
        }

    .ri-cleaning-header .ri-section-title {
        font-size: 28px;
    }

    .ri-cleaning-header p {
        font-size: 15px;
    }

    .ri-cleaning-datalist {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

        .ri-cleaning-datalist .ri-most-booked-service-title {
            font-size: 14px;
            min-height: 40px;
        }

        .ri-cleaning-datalist .ri-most-booked-price {
            font-size: 15px;
        }


    /* ─────────── FRIDGE SERVICES ─────────── */
    .ri-salon-section {
        padding: 45px 0 50px;
    }

        .ri-salon-section .ri-container {
            padding: 0 22px;
        }

    .ri-salon-header .ri-section-title {
        font-size: 28px;
    }

    .ri-salon-header p {
        font-size: 15px;
    }

    .ri-salon-datalist {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

        .ri-salon-datalist .ri-most-booked-service-title {
            font-size: 14px;
            min-height: 40px;
        }

        .ri-salon-datalist .ri-most-booked-price {
            font-size: 15px;
        }
}


/* ═══════════════════════════════════════════════════════════════
   2. MOBILE — max-width: 600px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* ─────────── HEADER ─────────── */
    .header_top {
        padding: 5px 0;
    }

        .header_top .contact_nav {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 4px 12px;
        }

            .header_top .contact_nav a {
                font-size: 11px;
                margin-right: 0;
            }

            .header_top .contact_nav span {
                font-size: 11px;
            }

    .navbar-brand img {
        width: 100px;
    }

    .ri-login-btn span {
        display: none;
    }

    .ri-login-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .ri-location-pill {
        margin: 0 4px;
        padding: 5px 8px;
        font-size: 12px;
    }

        .ri-location-pill .loc-text {
            max-width: 65px;
        }

        .ri-location-pill .loc-arrow {
            font-size: 9px;
        }

    .ri-icon-btn {
        width: 34px;
        height: 34px;
    }

    .ri-nav-actions {
        gap: 4px;
    }

    .custom_nav-container {
        padding: 6px 10px;
        gap: 4px;
    }

    .ri-inline-search-input {
        padding: 7px 10px 7px 28px;
        font-size: 13px;
    }


    /* ─────────── AIR CONDITIONER ─────────── */
    .ri-cleaning-section {
        padding: 38px 0 45px;
    }

        .ri-cleaning-section .ri-container {
            padding: 0 16px;
        }

    .ri-cleaning-header {
        gap: 12px;
        margin-bottom: 22px;
    }

        .ri-cleaning-header .ri-section-title {
            font-size: 24px;
            margin-bottom: 6px;
        }

        .ri-cleaning-header p {
            font-size: 14px;
        }

    .ri-cleaning-see-all {
        padding: 7px 14px;
        font-size: 13px;
        border-radius: 7px;
    }

    .ri-cleaning-datalist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

        .ri-cleaning-datalist .ri-most-booked-image {
            aspect-ratio: 1 / 1;
        }

        .ri-cleaning-datalist .ri-most-booked-details {
            padding: 10px;
        }

        .ri-cleaning-datalist .ri-most-booked-category {
            font-size: 10px;
            margin-bottom: 3px;
        }

        .ri-cleaning-datalist .ri-most-booked-service-title {
            font-size: 13px;
            line-height: 1.35;
            min-height: 36px;
            margin-bottom: 6px;
        }

        .ri-cleaning-datalist .ri-most-booked-price {
            font-size: 13px;
            margin-bottom: 10px;
        }

        .ri-cleaning-datalist .ri-most-booked-actions {
            gap: 5px;
        }

        .ri-cleaning-datalist .ri-most-booked-btn {
            padding: 7px 4px;
            font-size: 10.5px;
            border-radius: 5px;
        }


    /* ─────────── FRIDGE SERVICES ─────────── */
    .ri-salon-section {
        padding: 35px 0 42px;
    }

        .ri-salon-section .ri-container {
            padding: 0 16px;
        }

    .ri-salon-header {
        gap: 12px;
        margin-bottom: 22px;
    }

        .ri-salon-header .ri-section-title {
            font-size: 24px;
            margin-bottom: 6px;
        }

        .ri-salon-header p {
            font-size: 14px;
        }

    .ri-salon-see-all {
        padding: 7px 14px;
        font-size: 13px;
        border-radius: 7px;
    }

    .ri-salon-datalist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

        .ri-salon-datalist .ri-most-booked-image {
            aspect-ratio: 1 / 1;
            border-radius: 10px;
        }

        .ri-salon-datalist .ri-most-booked-details {
            padding: 10px;
        }

        .ri-salon-datalist .ri-most-booked-category {
            font-size: 10px;
            margin-bottom: 3px;
        }

        .ri-salon-datalist .ri-most-booked-service-title {
            font-size: 13px;
            line-height: 1.35;
            min-height: 36px;
            margin-bottom: 6px;
        }

        .ri-salon-datalist .ri-most-booked-price {
            font-size: 13px;
            margin-bottom: 10px;
        }

        .ri-salon-datalist .ri-most-booked-actions {
            gap: 5px;
        }

        .ri-salon-datalist .ri-most-booked-btn {
            padding: 7px 4px;
            font-size: 10.5px;
            border-radius: 5px;
        }
}


/* ═══════════════════════════════════════════════════════════════
   3. SMALL MOBILE — max-width: 400px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {

    /* ─────────── HEADER ─────────── */
    .header_top .contact_nav {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .ri-location-pill .loc-text {
        max-width: 50px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   4. VERY SMALL MOBILE — max-width: 380px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {

    /* ─────────── AIR CONDITIONER ─────────── */
    .ri-cleaning-datalist {
        grid-template-columns: 1fr;
        gap: 14px;
    }

        .ri-cleaning-datalist .ri-most-booked-service-title {
            min-height: auto;
        }


    /* ─────────── FRIDGE SERVICES ─────────── */
    .ri-salon-datalist {
        grid-template-columns: 1fr;
        gap: 14px;
    }

        .ri-salon-datalist .ri-most-booked-service-title {
            min-height: auto;
        }
}


/* ═══════════════════════════════════════════════════════════════
   5. EXTRA SAFETY — DataList <br> hide (sabhi breakpoints)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

    .ri-cleaning-datalist br,
    .ri-salon-datalist br {
        display: none !important;
    }
}
/* ═══════════════════════════════════════════════════════════════
   HERO SECTION — RESPONSIVE FIX (media queries only)
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   TABLET — max-width: 991px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {

    .ri-hero-section {
        padding: 28px 0;
    }

    .ri-hero-content {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
        padding: 0 20px;
    }

    .ri-hero-text-box {
        max-width: 100%;
        width: 100%;
        flex: none;
    }

    .ri-hero-title {
        font-size: 30px;
        line-height: 1.25;
    }

    .ri-hero-subtitle {
        font-size: 15px;
        margin-bottom: 18px;
    }

    .ri-hero-services-card {
        max-width: 100%;
        width: 100%;
        padding: 20px 18px 24px;
    }

    /* Services grid: 4 → 3 columns on tablet */
    .ri-services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .ri-service-icon-wrapper {
        width: 72px;
        height: 56px;
        padding: 8px;
    }

    .ri-service-title {
        font-size: 13px;
    }

    /* Image box below text, full width */
    .ri-hero-image-box {
        flex: none;
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

        .ri-hero-image-box img {
            max-height: 380px;
            width: 100%;
            object-fit: contain;
        }
}


/* ─────────────────────────────────────────────────────────────
   MOBILE — max-width: 600px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

    .ri-hero-section {
        padding: 20px 0 26px;
    }

    .ri-hero-content {
        padding: 0 16px;
        gap: 22px;
    }

    .ri-hero-title {
        font-size: 24px;
        line-height: 1.3;
        -webkit-line-clamp: 3;
    }

    .ri-hero-subtitle {
        font-size: 14px;
        margin-bottom: 16px;
        line-height: 1.5;
    }

    .ri-hero-services-card {
        padding: 16px 12px 20px;
        border-radius: 10px;
    }

    /* Services grid: 4 → 3 columns on mobile */
    .ri-services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .ri-service-card {
        padding: 4px 2px 10px;
    }

    .ri-service-icon-wrapper {
        width: 62px;
        height: 50px;
        padding: 7px;
        margin-bottom: 4px;
    }

    .ri-service-title {
        font-size: 11.5px;
        line-height: 1.25;
        word-break: break-word;
    }

    /* "View more" link */
    .ri-view-all-wrapper a {
        font-size: 12px !important;
    }

    /* Hero image full width */
    .ri-hero-image-box {
        max-width: 100%;
        border-radius: 12px;
    }

        .ri-hero-image-box img {
            max-height: 300px;
        }

    /* Slider arrows & dots tighter */
    .ri-hero-arrow {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .ri-hero-prev {
        left: 8px;
    }

    .ri-hero-next {
        right: 8px;
    }

    .ri-hero-dots {
        bottom: 10px;
        gap: 6px;
    }

        .ri-hero-dots button {
            width: 8px;
            height: 8px;
        }

            .ri-hero-dots button.active {
                width: 20px;
            }
}


/* ─────────────────────────────────────────────────────────────
   SMALL MOBILE — max-width: 400px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 400px) {

    .ri-hero-title {
        font-size: 21px;
    }

    .ri-hero-subtitle {
        font-size: 13px;
    }

    .ri-hero-services-card {
        padding: 14px 10px 18px;
    }

    .ri-service-icon-wrapper {
        width: 56px;
        height: 46px;
        padding: 6px;
    }

    .ri-service-title {
        font-size: 10.5px;
    }

    .ri-hero-image-box img {
        max-height: 240px;
    }
}


/* ─────────────────────────────────────────────────────────────
   VERY SMALL — max-width: 360px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 360px) {

    .ri-hero-title {
        font-size: 19px;
    }

    .ri-service-icon-wrapper {
        width: 50px;
        height: 42px;
        padding: 5px;
    }

    .ri-service-title {
        font-size: 10px;
    }
}
/* ═══════════════════════════════════════════════════════════════
   MOBILE HEADER REDESIGN — Logo Left | Search Center | Toggler Right
   + Sidebar Drawer (mobile only)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {

    /* ─────────── HEADER CONTAINER ─────────── */
    .custom_nav-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        height: 60px;
        padding: 0 16px;
        gap: 8px;
        position: relative;
    }

    /* ─────────── LOGO (LEFT SIDE) ─────────── */
    .navbar-brand {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: 0;
        z-index: 2;
        flex-shrink: 0;
        order: 1; /* Left */
    }

        .navbar-brand img {
            width: 110px;
            height: auto;
            display: block;
        }

    /* ─────────── SEARCH ICON (CENTER) ─────────── */
    .ri-inline-search {
        flex: 0 0 auto;
        max-width: none;
        width: 40px;
        height: 40px;
        margin: 0 auto; /* Center me push karne ke liye */
        order: 2; /* Middle */
        position: relative;
        z-index: 2;
        background: transparent;
    }

    .ri-inline-search-inner {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f0f4ff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s ease;
    }

        .ri-inline-search-inner:hover {
            background: #e0e8ff;
        }

    .ri-inline-search-icon {
        position: static;
        left: auto;
        font-size: 16px;
        color: #0355cc;
        pointer-events: auto;
    }

    /* Input hide on mobile */
    .ri-inline-search-input {
        display: none !important;
    }

    /* ─────────── TOGGLER (RIGHT SIDE) ─────────── */
    .navbar-toggler {
        display: flex !important;
        /* flex-direction: column; */
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: none;
        background: #f0f4ff;
        border-radius: 50%;
        order: 3;
        margin-left: 0;
        cursor: pointer;
        transition: background 0.2s ease;
        position: relative;
        z-index: 2;
        flex-shrink: 0;
    }

        .navbar-toggler:hover {
            background: #e0e8ff;
        }

        .navbar-toggler span {
            display: block;
            width: 18px;
            height: 2px;
            background: #0355cc;
            margin: 3px 0;
            border-radius: 2px;
            transition: 0.3s;
        }

        .navbar-toggler.active span:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }

        .navbar-toggler.active span:nth-child(2) {
            opacity: 0;
        }

        .navbar-toggler.active span:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }

    /* ─────────── HIDE DESKTOP ELEMENTS ─────────── */
    .custom_nav-container > .ri-location-pill,
    .custom_nav-container > .ri-category-pills,
    .custom_nav-container > .ri-nav-actions {
        display: none !important;
    }


    /* ═══════════════════════════════════════════════════════════
       SIDEBAR DRAWER (No changes here, keeping it clean)
       ═══════════════════════════════════════════════════════════ */
    .ri-mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1099;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

        .ri-mobile-overlay.open {
            display: block;
            opacity: 1;
        }

    .ri-mobile-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        width: 320px;
        max-width: 85vw;
        height: 100vh;
        background: #fff;
        z-index: 1100;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding: 0;
    }

        .ri-mobile-sidebar.open {
            transform: translateX(0);
        }

    .ri-mobile-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid #f0f0f0;
        flex-shrink: 0;
        background: #0355cc;
    }

        .ri-mobile-sidebar-header .ri-mobile-sidebar-title {
            font-family: 'Segoe UI', sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: #fff;
        }

    .ri-mobile-sidebar-close {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background 0.2s;
    }

        .ri-mobile-sidebar-close:hover {
            background: rgba(255, 255, 255, 0.15);
        }

    .ri-mobile-sidebar-body {
        padding: 18px 16px 30px;
        display: flex;
        flex-direction: column;
        gap: 22px;
        flex: 1;
    }

    .ri-mobile-sidebar-label {
        font-family: 'Segoe UI', sans-serif;
        font-size: 11px;
        font-weight: 700;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        margin-bottom: 10px;
    }

    .ri-mobile-sidebar .ri-location-pill {
        display: flex !important;
        margin: 0;
        width: 100%;
        max-width: 100%;
        padding: 12px 16px;
        font-size: 14px;
        justify-content: flex-start;
        background: #f7faff;
        border: 1.5px solid #e0e8f5;
    }

        .ri-mobile-sidebar .ri-location-pill .loc-text {
            max-width: none;
            flex: 1;
            text-align: left;
        }

    .ri-mobile-sidebar .ri-category-pills {
        display: flex !important;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow: visible;
        padding: 0;
        gap: 4px;
    }

    .ri-mobile-sidebar .ri-pill {
        display: block;
        width: 100%;
        padding: 12px 16px;
        text-align: left;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        background: #f7f9fc;
        color: #333;
    }

        .ri-mobile-sidebar .ri-pill:hover {
            background: #eef4ff;
            color: #0355cc;
        }

        .ri-mobile-sidebar .ri-pill.active {
            background: #0355cc;
            color: #fff;
        }

    .ri-mobile-sidebar-search {
        position: relative;
        width: 100%;
    }

        .ri-mobile-sidebar-search i {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #0355cc;
            font-size: 15px;
            pointer-events: none;
        }

        .ri-mobile-sidebar-search input {
            width: 100%;
            padding: 12px 14px 12px 40px;
            border: 1.5px solid #dde5f0;
            border-radius: 10px;
            font-size: 14px;
            font-family: 'Segoe UI', sans-serif;
            outline: none;
            background: #f7faff;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

            .ri-mobile-sidebar-search input:focus {
                border-color: #0355cc;
                box-shadow: 0 0 0 3px rgba(3, 85, 204, 0.12);
                background: #fff;
            }

    .ri-mobile-sidebar .ri-nav-actions {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        flex-shrink: 1;
        width: 100%;
    }

        .ri-mobile-sidebar .ri-nav-actions > * {
            width: 100%;
        }

    .ri-mobile-sidebar .cart-container {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 12px 16px;
        background: #f7f9fc;
        border-radius: 10px;
        border: 1px solid #e8eef8;
    }

        .ri-mobile-sidebar .cart-container .ri-icon-btn {
            width: auto;
            height: auto;
            background: transparent;
            font-size: 18px !important;
            position: static;
            padding: 0;
        }

    .ri-mobile-sidebar .ri-profile-dropdown {
        width: 100%;
    }

        .ri-mobile-sidebar .ri-profile-dropdown > button {
            width: 100%;
            height: auto;
            padding: 12px 16px;
            background: #f7f9fc;
            border-radius: 10px;
            border: 1px solid #e8eef8;
            justify-content: flex-start;
            gap: 12px;
        }

            .ri-mobile-sidebar .ri-profile-dropdown > button::after {
                content: "My Account";
                font-size: 14px;
                font-weight: 600;
                color: #333;
                font-family: 'Segoe UI', sans-serif;
            }

    .ri-mobile-sidebar .ri-profile-dropdown-menu {
        position: static;
        box-shadow: none;
        border-radius: 8px;
        padding: 6px 0;
        margin-top: 6px;
        background: #fff;
        border: 1px solid #e8eef8;
    }

    .ri-mobile-sidebar .ri-login-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        font-size: 14px;
        border-radius: 10px;
    }

    .ri-mobile-sidebar #LinkButton1 {
        width: 100%;
        justify-content: center;
    }
}

/* ─────────── SMALL MOBILE TIGHTENING ─────────── */
@media (max-width: 400px) {
    .ri-mobile-sidebar {
        width: 290px;
    }
    .ri-section-title {
        font-size: 25px;
    }
    .navbar-brand img {
        width: 95px;
    }

    .custom_nav-container {
        height: 56px;
        padding: 0 10px;
    }

    .ri-inline-search, .ri-inline-search-inner {
        width: 36px;
        height: 36px;
    }

    .navbar-toggler {
        width: 36px;
        height: 36px;
    }
}
/* ═══════════════════════════════════════════════
   SEARCH DROPDOWN
   ═══════════════════════════════════════════════ */

.ri-inline-search {
    position: relative; /* Dropdown ko relative rakhne ke liye */
}

.ri-search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 480px;
    overflow-y: auto;
    z-index: 9999;
    margin-top: 6px;
}

    .ri-search-dropdown.show {
        display: block;
    }

.ri-search-dropdown-inner {
    padding: 4px 0;
}

/* Individual result item */
.ri-search-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s ease;
    text-decoration: none;
    color: inherit;
}

    .ri-search-item:last-child {
        border-bottom: none;
    }

    .ri-search-item:hover {
        background: #f8f9fb;
    }

/* Image thumbnail */
.ri-search-item-img {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    object-fit: cover;
    background: #f3f4f6;
    flex-shrink: 0;
}

/* Content area */
.ri-search-item-content {
    flex: 1;
    min-width: 0;
}

.ri-search-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.35;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ri-search-item-meta {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ri-search-item-rating {
    color: #1a1a1a;
    font-weight: 500;
}

    .ri-search-item-rating i {
        color: #f59e0b;
        font-size: 11px;
        margin-right: 2px;
    }

.ri-search-item-price {
    color: #1a1a1a;
    font-weight: 600;
}

.ri-search-item-category {
    color: #6b7280;
}

/* Empty state */
.ri-search-empty {
    padding: 24px 16px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}

.ri-search-loading {
    padding: 20px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}

/* Scrollbar */
.ri-search-dropdown::-webkit-scrollbar {
    width: 6px;
}

.ri-search-dropdown::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}