body {
    font-family: "Lato";
}

/*************************************/

/*Popup details info*/
#detailsContainer {
    display: flex;
    flex-direction: row;
    margin-bottom:100px;
    height: 95%;
    justify-content: space-evenly;

}

#detailsContainer p {
    margin: 0px;
    /*font-weight: 400;*/
}

#detailsContainer hr {
    border: 1px solid #b7b5b5;
}

.detailsLeftContainer {
    width: 60%;
    overflow-y: scroll;
    max-width: 900px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.detailsLeftContainer::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.detailsLeftContainer {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.details-subtitle {
    font-family: 'Lato';
    font-weight: 500;
    font-size: 19px;
    color: #32343E;
}

.details-section-border {
    border-top: 1px solid #e0e0e0;
    padding: 20px 0px;
}

.s-title {
    font-weight: 600 !important;
    font-size: 15px;
    color: #181C2E;
}

#loc-title {
    display: none;
}

#sname {
    font-weight: 500;
    font-size: 26px;
    margin-bottom: 5px;
}


.details-title {
    font-family: 'Lato';
    font-weight: 700;
    font-size: 18px;
    color: #444365;
}

.details-category {
    font-family: 'Lato';
    font-weight: 700;
    font-size: 18px;
    color: #444365;
    padding-bottom: 20px;
}

.details-name {
    font-weight: 800;
    color: #444365;
    font-size: 24px;
    font-family: 'Lato';
}

.details-description {
    font-family: 'Lato';
    font-weight: 400;
    font-size: 17px;
    color: #444365;
    line-height: 25px;
}

.details-info {
    font-family: 'Lato';
    font-weight: 400;
    font-size: 16px;
    color: #444365;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
    line-height: 25px;
    word-break: break-word;
    padding: 20px 10px 10px 10px;
}

.act-container {
    display: none;
}


.act-container {
    position: absolute;
    z-index: 40;
    top: 20px;
    left: 20px;
    border: 1px solid #e0dddd;
    border-radius: 50px;
    cursor: pointer;
}

.back-arr {
    display: block;
    width: 45px;
    height: 45px;
}

.i-back {
    display: block;
    background-image: url("/images/i-back.svg");
    width: 45px;
    height: 45px;
}

.share-page-mbl {
    position: absolute;
    z-index: 40;
    top: 20px;
    right: 20px;
    border: 1px solid #e0dddd;
    border-radius: 50px;
    cursor: pointer;
    display: none;

}


/***/

.c-details {
    font-family: 'Lato';
    /*font-weight: 400;*/
    font-size: 14px;
    color: #5F6A96;
    /*color: #181C2E;*/
    padding: 20px 10px 10px 10px;
    line-height: 25px;
}

.c-details p {
    font-weight: 400;
    color: #181C2E;
    /*color: #5F6A96;*/
}

.c-details-sty {
    display: flex;
    gap: 15px;
    /*align-items: center;*/
    flex-direction: column;
    line-height: 25px;
    word-break: break-word;
    padding: 20px 10px 10px 10px;
}

.c-details table {
    color: #181C2E;
}

.st-title {
    font-weight: 600 !important;
    font-size: 14px;
    margin: 0px;
}

.st-text {
    color: gray !important;
}

.s-location {
    color: #444365;
    font-size: 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
    line-height: 25px;
    word-break: break-word;
    margin-top: 10px;
}

#sdirection {
    font-weight: 400;
    line-height: normal;
    font-size: 13px;
}


.partial-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.full-text {
    display: block;
    overflow: unset;
}


.r-more {
    color: #181C2E;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}

#read-more {
    display: none;
}

.cont-overflow div:nth-child(n+7) {
    display: none;
    /*height: 160px;*/
    overflow: hidden;
}

.cont-fullHeight div:nth-child(n+7) {
    display: flex;
}

/**/

#pay-meth-container {
    overflow-x: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#pay-meth-container::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#pay-meth-container {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */

}

.pay-meth-item {
    width: fit-content !important;
    text-align: center;
    display: none;
    max-width: 95px;
    flex-direction: column;
    gap: 10px;
}

.pay-meth-icon-wrap {
    width: 90px;
    display: block;
    height: 70px;
    background-color: #F0F5FA;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.pay-meth-item i {
    /*margin-bottom: 20px;*/
    height: fit-content;

}

.pay-meth-item p {
    line-height: normal;
}

.i-pay-ef {
    display: block;
    background-image: url("/images/i-payment-ef.svg");
    width: 90px;
    height: 70px;
}

.i-pay-cc {
    display: block;
    background-image: url("/images/i-payment-visa.svg");
    width: 90px;
    height: 70px;
}

.i-pay-dc {
    display: block;
    background-image: url("/images/i-payment-paypal.svg");
    width: 90px;
    height: 70px;
}

.i-pay-bt {
    display: block;
    background-image: url("/images/i-payment-paypal.svg");
    width: 90px;
    height: 70px;
}

.stype {
    font-size: 12px;
    font-weight: 600;
}


/*************** Table ********************/

.separator {
    display: block;
    /*background-image: url("images/i-separator.svg");*/
    width: 60px;
    height: 6px;
    border-top: 1px solid #5F6A96;
    margin-top: 5px;
}

.closed-day {
    color: red;
}

table {
    width: 100%;
}

table td {
    padding: 7px;
    font-size: 14px;
}

.more {
    display: none;
}


/************************************************/
.icon-service-category {
    display: inline-block;
    background-image: url("/images/icon-service-category.png");
    min-width: 17.89px;
    height: 18.88px;
    background-size: 17.89px 18.88px;
}

.icon-service-type {
    display: inline-block;
    background-image: url("/images/i-spa.svg");
    min-width: 30px;
    height: 30px;
    background-size: 30px 30px;
    border-radius: 50px;
    /*background-color: #F0F5FA;*/
    border: 1px solid gray;
    background-position: center;
}

.icon-service-location {
    display: inline-block;
    background-image: url("/images/i-location.svg");
    min-width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-color: #F0F5FA;
    border-radius: 50px;
}

.sticon {
    width: 30px;
    text-align: center;
}




/**********************************/

.d-comments {
    display: inline-block;
    background-image: url("/images/i-comments.svg");
    width: 24px;
    height: 20px;
}

.d-rating {
    display: inline-block;
    background-image: url("/images/i-rating.svg");
    width: 24px;
    height: 24px;
}

.d-views {
    display: inline-block;
    background-image: url("/images/i-views.svg");
    width: 24px;
    height: 24px;
}

.ct-crv span {
    display: flex;
    align-items: center;
    font-weight: 400;
    cursor: pointer;
    font-size: 10px;
    color: #181C2E;
    gap: 2px;
}

.c-stype {
    display: flex;
    flex-direction: row-reverse;
    align-content: normal;
    align-items: center;
    justify-content: left;
    gap: 20px;
}

.c-item {

    display: flex;
    justify-content: left;
    gap: 20px;
    align-items: center;
    width: 40%;
    max-width: 40%;
    /* margin: 1%; */
    flex: auto;
    text-align: left;
    /* min-height: 50px;*/
}

.c-item i {
    font-size: 20px;
}

/***********Slides******************************/

.scroll-imgs-container {
    max-width: 100%;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scroll-imgs-container::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scroll-imgs-container {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */

}

.scroll-img {
    max-width: 100%;
    min-width: 100%;
    width: 100vw;
    scroll-snap-align: center;
}

.scroll-img img {
    max-width: 100%;
    min-width: 100%;
    width: 100%;
    max-height: 320px;
    height: 320px;
    object-fit: cover;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.slider-dots {
    text-align: center;
    position: relative;
    bottom: 40px;
}

#indicator {
    position: relative;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    bottom: 40px;
    display: flex;
    gap: 10px;
}

#indicator button {
    border: 1px solid gray;
    width: 15px;
    height: 15px;
    /* background: none; */
    /* color: rgb(227, 226, 226); */
    border-radius: 50px;

}

.img-Active {
    background-color: white;
}

.img-Inactive {
    background-color: lightgray
}

.mySlides {
    display: none
}

.mySlides img {
    width: 100%;
    max-height: 320px;
    height: 320px;
    object-fit: cover;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
}

img {
    vertical-align: middle;
}

.slideshowImg-container {
    max-width: 1000px;
    position: relative;
    height: 100%;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}


.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: #717171;
}

/*******************************************/

#savatar-m {
    width: 50px !important;
    height: 50px;
    align-content: center;
    border-radius: 50px;
    /* border: 1px solid #a75f5f; */
    padding: 5px;
    border: 1px solid #F2F2F2;
}

#savatar-m img {
    width: 100%;
    height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50px;
}

.c-header {
    width: 100%;
    display: flex;
    justify-content: space-between;

}

.cont-title {
    display: flex;
    margin-bottom: 5px;
    /*margin: 0px 0px 20px 0px;*/
    gap: 20px;
    align-items: center
}


#details-images {
    /*position: relative;*/
    width: 100%;
    /*height: 184px;*/
    overflow-x: scroll;
    display: flex;
    flex-direction: row;
    gap: 5px;
    overflow-y: hidden;
    scroll-behavior: smooth;

    margin-left: auto;
    margin-right: auto;
}

#details-images img {
    min-width: 252px;
    width: 252px;
    height: 220px;
    border-radius: 5px;
    object-fit: cover;
    cursor: pointer;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.details-imgages::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#details-images {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.carouselContainer {
    position: relative;
    margin: 5px 0px 20px 0px;

}

.prevArrow,
.nextArrow {
    position: absolute;
    top: 37%;
    cursor: pointer;
    text-decoration: none;
    height: 40px;
    width: 40px;
    border-radius: 100%;
}

.prevArrow {
    left: -2px;
    background-image: url("/images/off-prev.svg");
}

.nextArrow {
    right: -2px;
    background-image: url("/images/off-next.svg");
}

.prevArrow:hover {
    background-image: url("/images/on-prev.svg");
}

.nextArrow:hover {
    background-image: url("/images/on-next.svg");
}

.carouselImgsMbl {
    display: none;
    max-height: 320px;
    height: 320px;
}

.details-avatar-container {
    border-radius: 15px;
    background-color: #F8FAFB;
    padding: 10px;
    position: sticky;
    top: 100px;
    /*width: 250px;*/

}

.details-avatar {
    /*width: 100%;*/
    width: 289px;
    height: 169px;
}

.details-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    object-fit: contain;
}

.details-contact {
    padding: 5px 14px;
    background-color: #425D8D;
    border-radius: 100px;
    border: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    left: 13px;
    top: 355px;
    color: white;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
    letter-spacing: 0.0125em;
    text-transform: uppercase;
    width: 100%;
    margin-top: 15px;
}


.whatsapp-contact {
    padding: 5px 14px;
    background: #F2F2F2;
    border-radius: 100px;
    border: 0px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    gap: 14px;
    left: 13px;
    top: 355px;
    color: #45608B;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    letter-spacing: 0.0125em;
    text-transform: uppercase;
}

.whatsapp-icon {
    background-image: url("/images/icon-whatsapp.png");
    min-width: 24px;
    height: 27px;
    background-size: 24px 27px;
}

.hit-contact-number {
    visibility: hidden;
    width: 0px;
    display: none;
}


#enlargedImg {
    height: 100%;
    max-width: 600px;
}

#closeBtn {
    position: fixed;
    top: 10px;
    right: 30px;
    cursor: pointer;
    font-weight: 600;
}


#backBtn {
    color: #45608B;
    background-color: white;
    border: 1px solid #45608B;
}


/*****Enlarged img popup*************/
.enlargedImg-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    height: 90%;
    border-radius: 10px;
}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}




/******** Questions and answers section ************/
.profile-title {
    font-family: 'Lato';
    color: #45608B;
    margin-bottom: 30px;
}

.profile-title h2,
.profile-title h4 {
    text-align: left;
    font-weight: 700;
}

#posted-questions div {
    min-width: 280px !important;
    height: fit-content;
    width: 280px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#posted-questions::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#posted-questions {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

#posted-questions p {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    /*color: #5F6A96;*/
    color: #181C2E;
}

.comment {
    padding: 20px;
    border-radius: 16px;
    border: 1.5px solid #F2F2F2;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 200px;
}

.response {
    border-radius: 16px;
    background-color: #F6FCFF;
    border: 1.5px solid #B7E4FB;
    padding: 20px;
    font-size: 16px;
}

.response p {
    font-weight: 500;
    line-height: 25px;
    font-size: 14px;
}

.c-title {
    display: flex;
    flex-direction: row-reverse;
    justify-content: left;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;

}

.comm-avatar {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    background-color: #A2845E;
    text-align: center;

}

.comm-avatar i {
    color: white;
}

.rsp-avatar {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    background-color: #40A3B8;
    text-align: center;
}

.rsp-avatar i {
    color: white;
}


.com-name {
    color: #0F0D13 !important;
    font-size: 16px;
    font-weight: 700 !important;
}


.c-anw-span {
    font-weight: 600;
    cursor: pointer;
    font-size: 12px;
}


#rsp-popup {
    display: none;
    width: 600px;
    gap: 10px;
    border: 1px solid gray;
    border-radius: 10px;
    padding: 0px 20px 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    height: fit-content;
}

#rsp-popup p {
    margin-bottom: unset;
}

#rsp-popup {
    cursor: pointer;
}

#resp {
    max-height: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    overflow-y: scroll;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

#resp::-webkit-scrollbar {
    display: none;
}


/********/
#s-list {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.i-container {
    min-width: 30px;
    min-height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F0F5FA;
    border-radius: 50px;
}

.i-checkmark {
    display: block;
    width: 10px;
    height: 16px;
    background-image: url("/images/i-checkmark1.svg");
    background-position: center;
}

.i-type-online {
    display: block;
    width: 13.46px;
    height: 11.17px;
    background-position: center;
    background-image: url("/images/i-online.svg");
    background-repeat: no-repeat;
}

.i-type-store {
    display: block;
    width: 15.72px;
    height: 13.92px;
    background-image: url("/images/i-store.svg");
    background-position: center;
}

.i-type-home {
    display: block;
    width: 15.4px;
    height: 14.52px;
    background-position: center;
    background-image: url("/images/i-house.svg");
    background-repeat: no-repeat;
}

.i-type-globaly {
    display: block;
    width: 14.5px;
    height: 14.5px;
    background-position: center;
    background-image: url("/images/i-globaly.svg");
    background-repeat: no-repeat;
}

#questions-form {
    display: none;
    width: 600px;
    gap: 10px;
    border: 1px solid gray;
    border-radius: 10px;
    padding: 0px 30px 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    height: fit-content;
}

#questions-form p {
    font-weight: 15px;
    font-weight: 500;
}

#questions-form span {
    cursor: pointer;
}

#comm-btn {
    font-size: 12px;
    letter-spacing: normal;
    color: #45608B;
    margin-top: 30px;
    margin-bottom: 40px;
    background-color: #F0F5FA;
    font-weight: 600;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.contact-btn {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #425D8D;
    color: white;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    cursor: pointer;
}

.contact-btn p {
    font-size: 14px;
    font-weight: 500;
    margin: 0px;
    letter-spacing: normal;
}

.i-wp {
    display: block;
    background: url("/images/i-whatsapp.svg");
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-position: center;
}


/************Rating******************/

/* Hide scrollbar for Chrome, Safari and Opera */
#posted-rating::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#posted-rating {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}


#rating-section {
    display: flex;
    justify-content: space-between;
}

.r-title-wrap {
    background-color: #FEF8E6;
    padding: 3px 10px 3px 5px;
    border-radius: 50px;
    align-items: center;
    display: flex;
    gap: 5px;


}

.r-title-wrap p {
    font-weight: 400;
    font-size: 12px;
}

.rating {
    padding: 20px;
    border-radius: 16px;
    border: 1.5px solid #F2F2F2;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 150px;
    min-width: 280px;
    overflow-y: hidden;
}

.r-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rating-name {
    color: #0F0D13 !important;
    font-size: 14px;
    font-weight: 600;
}

.rating-avatar {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    background-color: #A2845E;
    text-align: center;
}

.rating-score-wrap {
    background-color: #FEF8E6;
    padding: 2px 5px 2px 10px;
    border-radius: 50px;
    align-items: center;
    display: flex;
    gap: 3px;
    font-size: 12px;
}

.rating-name-wrap {
    width: fit-content !important;
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
    justify-content: start;
}

.rating-comment {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #181C2E;
}

/***************Sticky button*****************/
.bottom-sticky-btn {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 50px;
    background-color: white;
    display: none;
    justify-content: center;
    align-content: center;
    transform: translateX(-50%);
    left: 50%;
    z-index: 40;
}

/****Discount***************************/
#discount-wrap {
    background: linear-gradient(#8B7C48, #FDD95D);
    min-height: 60px;
    width: 95%;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    position: fixed;
    text-align: center;
    padding: 10px 20px;
    top: 0px;
    z-index: 1000;
    margin-left: 2.5%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.discount-txt-wrap {
    cursor: pointer;
    color: #181C2E;
    display: flex;
    width: fit-content;
    gap: 10px;
    align-items: center;
}

.discount-txt-wrap p {
    margin-bottom: 0px;
}

.disc-offer {
    display: flex;
    gap: 7px;
    align-items: center;
}

.disc-cta {
    font-size: 14px;
    font-weight: 500;
    max-width: 400px;
    line-height: normal;
}

.disc-code {
    font-weight: 500;
    background-color: #333333;
    color: white;
    padding: 0px 13px;
    border-radius: 20px;
    height: fit-content;
    font-size: 12px;
}

.close-discount-wrap {
    position: absolute;
    right: 20px;
}

.closebtn-dark {
    display: block;
    background-image: url("/images/i-close-btn-dark.svg");
    width: 22px;
    height: 22px;
    cursor: pointer;
}


#serviceDescriptionContainer {
    padding: 0px 20px;
    display: flex;
    flex-direction: column
}

/**********************************************************/

@media screen and (max-width: 1100px) {
    #detailsContainer {
        gap: 20px;
    }

    /*Discount*/
    #discount-wrap {
        min-width: 100%;
        margin-left: unset;
    }
}

@media screen and (max-width: 900px) {
    #detailsContainer {
        flex-direction: column;
        overflow-y: scroll;
        margin: 0px 40px;
    }

    .contact-btn {
        padding: 5px 20px !important;
        line-height: unset !important;
    }

    .contact-btn p {
        font-size: 12px;
    }

    .bottom-sticky-btn {
        display: block;
    }

    .detailsRightContainer {
        display: none;
    }

    /* Hide scrollbar for Chrome, Safari and Opera */
    #detailsContainer::-webkit-scrollbar {
        display: none;
    }

    /* Hide scrollbar for IE, Edge and Firefox */
    #detailsContainer {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    #detailsContainer div {
        width: 100% !important;
    }

    .detailsLeftContainer {
        overflow-y: unset !important;
    }

    #savatar-m {
        display: block !important;
    }

    /**Discount**/
    .disc-cta {
        max-width: 300px;
    }

    .rating {
        min-width: 100%;
    }
}


@media screen and (max-width: 677px) {
    header {
        display: none !important;
    }


    .navig-bar {
        display: none;
    }

    #serviceDescriptionContainer {
        padding-top: 20px;
    }

    .q-a-container {
        align-items: end;
    }

    .response {
        margin-left: unset;
    }

    .breadcrumb {
        display: none !important;
    }

    #detailsContainer {
        padding-top: 0px;
        margin: unset;

    }

    .detailsRightContainer {
        display: none;
    }

    .slideshowImg-container {
        display: block !important;
    }

    .carouselContainer {
        display: none;
    }

    .carouselImgsMbl {
        display: block;
    }

    .c-header {
        width: unset;
        display: unset;
        justify-content: unset;
    }

    #s-list {
        flex-direction: column;
    }

    .c-item {
        width: 100%;
        max-width: 100%;
    }


    .menu {
        display: none;
    }

    #sname {
        font-size: 22px !important;
    }

    #loc-title {
        display: block;
    }

    .cont-title {
        margin: 0px 0px 20px 0px;
    }

    #questions-form {
        display: none;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        border: 1px solid gray;
        border-bottom-left-radius: unset;
        border-bottom-right-radius: unset;
        position: fixed;
        bottom: 0px;
        z-index: 1000;
        background: white;
        /*padding: 40px 30px;*/
        height: fit-content;
        top: unset;
        left: unset;
        transform: unset;
    }

    #rsp-popup {
        display: none;
        width: 100%;
        border: 1px solid gray;
        border-bottom-left-radius: unset;
        border-bottom-right-radius: unset;
        max-height: 400px;
        position: fixed;
        bottom: 0px;
        z-index: 1000;
        background: white;
        height: fit-content;
        top: unset;
        left: unset;
        transform: unset;
    }

    #comm-btn {
        min-width: 100%;
    }

    .bottom-sticky-btn {
        display: block;
    }

    .act-container {
        display: block;
    }

    /***Discount***/
    #discount-wrap {
        min-width: 100%;
        margin-left: unset;
        padding: 10px;
        gap: 5px;
    }

    .discount-txt-wrap {
        display: flex;
        flex-direction: column;
        line-height: normal;
        gap: 3px;
        padding: 0px 20px;
    }

    .disc-offer {
        justify-content: space-between;
    }

    .disc-cta {
        font-size: 12px;
        max-width: unset;
        padding: 0px 30px;
    }

    .disc-code {
        padding: 5px 13px;
    }

    .close-discount-wrap {
        right: 10px;
    }

    .share-page-web {
        display: none;
    }

    .share-page-mbl {
        display: flex;
    }
}

@media screen and (max-width: 497px) {
    #popupDetails {
        max-width: 90vw;
    }

    #enlargedImg {
        max-width: 90vw;
    }

    .st-title {
        font-size: 15px;
    }

    .c-details {

        font-size: 15px;
    }

    #posted-questions p {
        font-size: 15px;
    }

    table td {
        font-size: 15px;
    }

    #sname {
        font-weight: 600;
    }

    .r-more {
        font-size: 14px;
    }

    .s-title {
        font-size: 16px;
    }

    /**Discount***/
    .disc-cta {
        padding: 0px 10px;
    }

}

/****Loader****************/

.loader-overlay-container {
    visibility: hidden;
    width: 100vw;
    height: 100vh;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 50;
}

.spinner {
    visibility: hidden;
    border-bottom: 5px solid #425D8D;
    border-top: 5px solid #425D8D;
    width: 50px;
    height: 50px;
    border-radius: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}