@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap);
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.hero-caption h1 span,
.page-heading h1 span {
    font-family: Marydale-bold;
    line-height: 40px;
    letter-spacing: 1px
}
.pl-0{
    padding-left: 0!important;
}
#news,
#aboutuspage,
#becomeprovider,
#contactus {
    background-size: cover;
    padding: 113px 0
}

.about-sec.become-provider,
section#earnmoney,
section#faqs,
section#getintouch,
section#latestjobs,
section#services,
section#team {
    padding: 60px 0
}

.about-sec .about-img img,
.job-head .profile img,
.team-member img {
    object-position: center;
    object-fit: cover
}

.msform,
.great-box,
.job-experience h2,
.job-experience p,
.slider-arrow a,
.team-member h4,
.team-member p,
ul.slick-dots {
    text-align: center
}

#progressbar li:after,
#progressbar li:last-of-type:after {
    content: '';
    height: 2px;
    background: #d3d3d3;
    left: 50%;
    top: 10px;
    z-index: 0;
}

@font-face {
    font-family: Marydale;
    src: url('../fonts/MarydaleBold.eot');
    src: url('../fonts/MarydaleBold.eot?#iefix') format('embedded-opentype'), url('../fonts/MarydaleBold.woff2') format('woff2'), url('../fonts/MarydaleBold.woff') format('woff'), url('../fonts/MarydaleBold.ttf') format('truetype'), url('../fonts/MarydaleBold.svg#MarydaleBold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Marydale-bold;
    src: url('../fonts/Marydale.eot');
    src: url('../fonts/Marydale.eot?#iefix') format('embedded-opentype'), url('../fonts/Marydale.woff2') format('woff2'), url('../fonts/Marydale.woff') format('woff'), url('../fonts/Marydale.ttf') format('truetype'), url('../fonts/Marydale.svg#Marydale') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

:root {
    --notosans: "Noto Sans", sans-serif;
    --poppins: "Poppins", sans-serif;
    --color-1: #91278F;
    --color-2: #251C25;
    --color-3: #1F2933;
    --color-4: #ffffff;
    --color-5: #1c75bc;
    --color-6: #f3f2f3;
}

body {
    font-family: var(--poppins)
}

img {
    max-width: 100%
}

a.navbar-brand img {
    width: 105px
}

.bg-light {
    background-color: var(--color-4) !important
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0
}

.btn-outline-primary,
.btn-primary {
    border-color: var(--color-1) !important;
    border-radius: 8px;
    font-weight: 700 !important;
    padding: 13.5px 23.2px !important
}

.navbar-light .navbar-nav .nav-link {
    color: var(--color-2);
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    position: relative;
    margin: 0 0 0 10px
}
.navbar-light .navbar-nav {
    align-items: center;
}
div#login .modal-header,
div#providerlogin .modal-header,
div#resetpassword .modal-header,
div#customersignup .modal-header,
div#providersignup .modal-header {
    padding: 2rem 2rem 0rem 2rem;
    border-bottom: 0px solid #dee2e6;
}
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show>.nav-link {
    color: var(--color-1);
    position: relative
}

.navbar-light .navbar-nav .nav-link.active:after {
    position: absolute;
    background: var(--color-1);
    height: 3px;
    width: 100%;
    content: '';
    bottom: -18px;
    left: 0
}
div#passwordError div.error {
    display: flex;
    align-items: flex-end;
}

.navbar-light .navbar-nav .nav-link:after {
    position: absolute;
    background: var(--color-1);
    height: 3px;
    width: 0%;
    content: '';
    bottom: -18px;
    left: 0;
    transition: .3s
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--color-1)
}

.navbar-light .navbar-nav .nav-link:hover:after {
    position: absolute;
    background: var(--color-1);
    height: 3px;
    width: 100%;
    content: '';
    bottom: -18px;
    left: 0;
    transition: .3s
}

.btn-outline-primary {
    color: var(--color-1) !important;
    background-color: transparent
}

.btn-outline-primary:hover {
    color: #1776ba !important;
    background-color: transparent;
    border-color: #1776ba !important;
}

.btn-primary {
    color: var(--color-4) !important;
    background-color: var(--color-1) !important
}

* {
    box-shadow: none !important;
    outline: 0 !important
}

.btn-primary:hover {
    color: var(--color-4) !important;
    background-color: var(--color-5) !important;
    border-color: var(--color-5) !important
}

.msform fieldset:not(:first-of-type),
.navbar-light .navbar-nav a.nav-link.btn:after {
    display: none
}

.slide {
    background-size: cover;
    background-repeat: no-repeat;
    padding: 200px 0;
    position: relative
}

.slide:before {
    position: absolute;
    background: rgb(25 1 25 / 50%);
    content: '';
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    z-index: 1
}
.servicespage .slide:before {
    background: rgb(0 0 0 / 50%);
}

.about-sec.bg-gray,
section#latestjobs {
    background-color: var(--color-6)
}

.hero-caption {
    position: relative;
    z-index: 9;
    background: rgba(255, 255, 255, .8);
    border-radius: 16px;
    padding: 50px 30px
}

.hero-caption h1 {
    font-family: Poppins, sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 52.8px;
    margin-bottom: 30px
}

.hero-caption h1 span {
    font-size: 56px;
    font-weight: 900;
    color: var(--color-1)
}

.become-provider .about-desc a:hover,
.hero-caption h1 span span {
    color: var(--color-5)
}

.hero-caption h4 {
    font-size: 22px;
    font-weight: 500;
    line-height: 33px;
    color: var(--color-2);
    margin-bottom: 20px
}

.hero-caption p {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    margin-bottom: 20px
}

.hero-caption a {
    margin-right: 12px
}

button.slick-next,
button.slick-prev {
    font-size: 0;
    border: none;
    background: var(--white);
    height: 52px;
    width: 52px;
    border-radius: 50%;
    position: absolute;
    color: var(--color-1);
    transition: .3s;
    opacity: .6;
    top: 50%;
    transform: translateY(-50%);
    background-size: 24px
}

#news,
#aboutuspage,
#becomeprovider,
#contactus,
#experience,
button.slick-next,
button.slick-prev {
    background-repeat: no-repeat;
    background-position: center center
}

#news,
#aboutuspage,
#becomeprovider,
#contactus,
#experience,
.msform,
.msform fieldset,
#progressbar li,
#sign-up,
.job-experience,
.page-heading,
ul.slick-dots {
    position: relative
}

button.slick-prev {
    background-image: url(../images/left-arrow.png);
    left: 1.5%
}

button.slick-next {
    background-image: url(../images/right-arrow.png);
    right: 1.5%
}

button.slick-next:hover,
button.slick-prev:hover {
    opacity: 1
}

ul.slick-dots {
    list-style-type: none;
    padding: 0;
    margin: -50px 0 25px;
    z-index: 9
}

ul.slick-dots li {
    display: inline-block;
    margin: 0 4px
}

.msform fieldset h1,
.msform fieldset h2,
.msform fieldset p,
.footer-link ul li {
    margin-bottom: 10px
}
.msform fieldset p img {
    width: 24px;
}
ul.slick-dots li.slick-active button {
    background: var(--color-4);
    border: 2px solid var(--color-4);
}

ul.slick-dots li button {
    font-size: 0;
    border: 2px solid #b6b3b6;
    background: 0 0;
    border-radius: 50%;
    height: 15px;
    width: 15px
}

.services-box {
    border-radius: 32px;
    overflow: hidden;
    background: var(--color-6);
    margin-bottom: 30px
}

.services-box img {
    width: 100%;
    height: 212px;
    max-height: 300px;
    object-fit: cover
}

.great-box h3,
.services-box .service-details h3 {
    font-family: Poppins;
    font-size: 24px;
    font-weight: 700;
    line-height: 26.4px;
    color: var(--color-2)
}

.services-box .service-details p {
    height: 90px;
    font-family: Noto Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    color: var(--color-3);
    overflow: hidden;
}

.services-box .service-details a {
    border: 2px solid var(--color-1);
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    text-align: center;
    color: var(--color-1);
    text-decoration: none;
    width: 100%;
    display: block;
    border-radius: 8px;
    padding: 12px;
    transition: .3s
}

.services-box .service-details a:hover {
    border: 2px solid var(--color-1);
    color: var(--color-4);
    background-color: var(--color-1)
}

.service-details {
    padding: 26px
}

.heading-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px
}

.heading-left h1,
.heading-left h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 39.6px;
    color: var(--color-2);
    margin-bottom: 0
}

.heading-left p {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: var(--color-2)
}

section#makesgreat {
    background: var(--color-6);
    padding: 60px 0
}

.great-box {
    background: var(--color-4);
    padding: 30px;
    border-radius: 32px;
    margin-bottom: 30px
}

.contactus h2,
.heading-center h1,
.heading-center h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 39.6px;
    color: var(--color-2);
    margin-bottom: 30px
}

.great-box img {
    width: 64px;
    margin-bottom: 20px
}

.great-box p {
    font-family: Poppins;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: var(--color-3);
    margin-bottom: 0
}

.earn-money-box {
    display: flex;
    align-items: center;
    background: var(--color-5);
    border-radius: 24px;
    overflow: hidden
}

.earn-money-box .poster-img {
    width: 50%
}

.earn-money-box .poster-img img {
    width: 100%
}

.poster-description {
    width: 50%;
    padding: 30px
}

.poster-description h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 39.6px;
    color: var(--color-4);
    margin-bottom: 20px
}

.page-heading h4,
.poster-description h4 {
    font-size: 22px;
    font-weight: 500;
    line-height: 33px;
    color: var(--color-4);
    margin-bottom: 20px
}

.footer-info label,
.footer-link ul li a,
.poster-description a {
    line-height: 27px;
    font-size: 18px
}

.page-heading p,
.poster-description p {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: var(--color-4);
    margin-bottom: 20px
}

.poster-description a {
    background-color: var(--color-4);
    text-decoration: none;
    font-weight: 700;
    color: var(--color-5);
    display: inline-block;
    padding: 14px 24px;
    border-radius: 8px;
    transition: .3s;
    border: 2px solid var(--color-4);
}

.poster-description a:hover {
    color: var(--color-4);
    background: var(--color-5);
    border: 2px solid var(--color-4);
}

footer {
    background: var(--color-2);
    padding-top: 80px
}

.become-provider .about-desc ul,
.footer-link ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 20px
}

.footer-link ul li a {
    text-decoration: none;
    color: var(--color-4);
    font-weight: 400;
    transition: .3s;
    text-transform: capitalize;
}

.footer-link ul li a:hover {
    padding-left: 10px;
    color: var(--color-1)
}

.footer-info a img {
    width: 180px;
    margin-bottom: 20px;
    max-width: 100%
}

.footer-info>label {
    color: var(--color-4);
    margin-bottom: 10px;
    font-weight: 400;
    display: block;
    text-transform: capitalize;
}

.footer-info form {
    display: flex;
    gap: 10px;
    align-items: stretch
}

.footer-info form input.form-control {
    border-color: #868186;
    background: 0 0;
    height: 56px;
    font-size: 18px;
    font-weight: 400;
    color: var(--color-4);
}

.footer-info form button {
    background: var(--color-1);
    border: none;
    padding: 10px 26px;
    border-radius: 8px;
    color: var(--color-4);
    font-weight: 700;
    height: 56px;
    font-size: 18px;
    text-transform: uppercase;
    transition: .3s
}

.footer-info form button:hover {
    background: var(--color-4);
    color: var(--color-1)
}

.footer-copy ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px
}

.about-sec .row,
.get-touch {
    align-items: center;
    display: flex
}
#contactUsForm .form-label {
    padding: 0px;
    pointer-events: none;
    position: absolute;
    left: 12px;
    top: 15px;
    transition: 0.2s;
    transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity: 1;
    margin-bottom: 0;
}
#contactUsForm input:focus + label, #contactUsForm input:not(:placeholder-shown) + label {
    opacity: 1;
    transform: scale(1) translateY(-112%) translateX(0px);
    background: #fff;
    padding: 0 4px !important;
}
#contactUsForm textarea:focus + label, #contactUsForm textarea:not(:placeholder-shown) + label {
    opacity: 1;
    transform: scale(1) translateY(-112%) translateX(0px);
    background: #fff;
    padding: 0 4px !important;
}
.footer-copy ul li a img {
    width: 36px;
    transition: .3s
}

.footer-copy ul li a img:hover {
    opacity: .8
}

.footer-copy p {
    font-family: var(--notosans);
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    color: #b6b3b6;
    margin-bottom: 0;
    text-transform: capitalize;
}

.job-experience h2,
.job-experience p,
.page-heading h1 {
    margin-bottom: 30px;
    color: var(--color-4);
}

.footer-copy {
    margin: 30px 0
}

#aboutuspage {
    background-image: url(../images/about-bg.jpg)
}
#news {
    background-image: url(../images/news-01.jpg)
}
.servicespage {
    background-image: none !important;
    padding: 0 !important;
}

.servide-details:before,
#aboutuspage:before,
#news:before,
#becomeprovider:before,
#contactus:before {
    position: absolute;
    background: rgb(0 0 0 / 50%);
    content: '';
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    z-index: 1
}
.servicespage:before{
    display: none;
}
.page-heading {
    z-index: 9;
    color: var(--color-4);
}

.page-heading h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 52.8px
}

.about-sec .about-desc h2,
.job-experience h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 39.6px
}

.page-heading h1 span {
    font-size: 56px;
    font-weight: 900
}

.about-sec {
    padding: 40px 0
}

.about-sec .about-img img {
    height: 340px;
    width: 100%;
    border-radius: 32px
}

.about-sec .about-desc h2 {
    color: var(--color-2);
    margin-bottom: 20px
}

.about-sec .about-desc p {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: var(--color-2);
    margin-bottom: 0
}

#experience {
    background-image: url(../images/experience.jpg);
    background-size: cover;
    padding: 100px 0
}

#experience:before {
    background: rgba(0, 0, 0, .6);
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1
}

.job-experience {
    z-index: 2
}

.job-experience p {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px
}

a.btn.btn-white {
    color: var(--color-1) !important;
    background-color: var(--color-4) !important;
    border-color: var(--color-4) !important;
    border-radius: 8px;
    font-weight: 700 !important;
    padding: 13.5px 23.2px !important;
    transition: .3s
}

a.btn.btn-white:hover {
    color: var(--color-4) !important;
    background-color: transparent !important;
    border-color: var(--color-4) !important
}

.team-member img {
    height: 120px;
    width: 120px;
    border-radius: 50%;
    margin-bottom: 16px
}

.team-member h4 {
    font-size: 24px;
    font-weight: 700;
    line-height: 26.4px;
    color: var(--color-2);
    margin-bottom: 8px
}

.become-provider .about-desc ul li,
.team-member p {
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px
}

.team-member p {
    color: var(--color-3);
}

.accordion-header button.accordion-button {
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    color: var(--color-2);
    background-color: #cde9ff
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23251C25'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}

.accordion-item {
    background-color: var(--color-4);
    border: none;
    border-bottom: 1px solid #b6b3b6
}
section#faqs .accordion-item {
    background-color: transparent;
}

section#faqs {
    background-color: #cde9ff
}

.accordion-body {
    padding: 0 1.25rem 1rem;
    background: #cde9ff
}
.accordion-body a {
    color: #91278f;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    transition: .3s;
    display: inline-block;
    margin-top: 20px;
}
.accordion-body a:hover {
    color: #1c75bc;
}
.get-touch {
    justify-content: flex-end;
    gap: 20px;
    margin-top: 20px
}

.get-touch p {
    margin: 0;
    font-size: 18px;
    color: #554e55;
    line-height: 27px;
    font-weight: 400
}

#becomeprovider {
    background-image: url(../images/become-provider.jpg)
}

.about-sec.become-provider .about-img img {
    height: 400px
}

.msform fieldset .btn-primary,
.become-provider .about-desc p {
    margin-bottom: 20px
}

.become-provider .about-desc ul li {
    display: flex;
    align-items: center;
    gap: 10px
}

.become-provider .about-desc ul li img,
.job-head .rating img,
.sign-up-info img,
.slider-arrow a img {
    width: 24px
}

.become-provider .about-desc a {
    color: var(--color-1);
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    transition: .3s
}

#contactus {
    background-image: url(../images/contact-benner.jpg)
}

.contactus h4 {
    font-size: 22px;
    font-weight: 500;
    line-height: 33px;
    color: var(--color-2);
    margin-bottom: 30px
}

.contactus p,
.job-desc p,
.login-links p,
section#getintouch form input.form-control,
section#getintouch form textarea.form-control {
    font-size: 18px;
    line-height: 27px;
    font-weight: 400
}

.contactus p,
.login-links p {
    color: var(--color-2)
}

section#getintouch form input.form-control {
    border: 1px solid #868186;
    margin-bottom: 20px;
    border-radius: 4px;
    height: 56px;
    color: var(--color-2)
}

section#getintouch form textarea.form-control {
    border: 1px solid #868186;
    margin-bottom: 20px;
    resize: none;
    color: var(--color-2)
}

.donejob-box {
    background: var(--color-4);
    border-radius: 24px;
    margin: 0 10px;
    padding: 20px
}

.job-det,
.job-head {
    display: flex;
    margin-bottom: 10px
}

.job-head {
    align-items: center;
    justify-content: space-between
}

.job-det .servicename,
.job-head .profile,
.job-head .rating {
    display: flex;
    align-items: center;
    gap: 10px
}

.job-head .profile img {
    height: 48px;
    width: 48px;
    border-radius: 50%
}

.job-head .profile p {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 26.4px;
    color: var(--color-2)
}

.job-det .servicename p,
.job-head .rating p {
    font-size: 22px;
    line-height: 33px;
    margin: 0;
    font-weight: 500
}

.job-head .rating p {
    color: var(--color-2)
}

.job-det {
    align-items: flex-start;
    justify-content: space-between
}

.sign-up-info,
.slider-arrow {
    align-items: center;
    display: flex
}

.job-det .servicename img {
    width: 64px
}

.msform fieldset h1,
.msform fieldset h2,
.job-det .price-time h3 {
    font-weight: 700;
    font-size: 36px;
    line-height: 39.6px
}

.job-det .price-time h3 {
    margin: 0
}

.job-desc p {
    margin: 0;
    color: var(--color-3);
}

.donejob-slider button.slick-next,
.donejob-slider button.slick-prev {
    opacity: 0 !important;
    display: none !important
}

.slider-arrow {
    gap: 14px
}

.slider-arrow a {
    height: 32px;
    width: 32px;
    background: var(--color-4);
    display: inline-block;
    line-height: 32px;
    border-radius: 50%;
    border: 1px solid #868186;
    transition: .3s;
    line-height: 28px;
}

.slider-arrow a:hover {
    background: var(--color-6)
}

.msform {
    margin-top: 20px
}
div#login .modal-content, div#providerlogin .modal-content, div#resetpassword .modal-content, div#customersignup .modal-content, div#providersignup .modal-content {
    border-radius: 24px;
}
.msform fieldset {
    background: var(--color-4);
    border: 0;
    border-radius: .5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 0px
}

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

#progressbar {
    overflow: hidden;
    color: #d3d3d3;
    width: 50%;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    padding: 0;
}
.login-links p, .sign-up-info p {
    color: #868186;
    font-size: 16px !important;
    line-height: 22px !important;
    margin-bottom: 6px !important;
}
.passitalic label.form-label {
    font-style: italic;
}
#login .form-label,
#providerlogin .form-label,
#resetpassword .form-label,
#customersignup .form-label,
#providersignup .form-label {
    left: 10px;
    top: 30%;
    color: #868186;
    font-style: italic;
}
#login .form-group,
#providerlogin .form-group,
#resetpassword .form-group,
#customersignup .form-group,
#providersignup .form-group {
    margin: 20px 0;
}
#login input:focus + label, #login input:not(:placeholder-shown) + label,
#providerlogin input:focus + label, #providerlogin input:not(:placeholder-shown) + label,
#resetpassword input:focus + label, #resetpassword input:not(:placeholder-shown) + label,
#providersignup input:focus + label, #providersignup input:not(:placeholder-shown) + label,
#customersignup input:focus + label, #customersignup input:not(:placeholder-shown) + label {
    opacity: 1;
    transform: scale(1) translateY(-120%) translateX(0px);
    background: #fff;
    padding: 0 6px;
    font-size:14px;
    font-style: normal;
    color: #212529;
}
#progressbar .active {
    color: #673ab7
}
div#passwordError2 {
    display: flex;
    align-items: flex-end;
}
#progressbar li {
    list-style-type: none;
    font-size: 15px;
    width: 16.66%;
    float: left;
    font-weight: 400
}

#progressbar #account:before,
#progressbar #confirm:before,
#progressbar #payment:before,
#progressbar #profile:before,
#progressbar #interested:before,
#progressbar #pictureprofile:before,
#progressbar #personal:before {
    content: "";
    background-image: url(../images/white-check-icon.png);
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center center
}

#progressbar li:before {
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: block;
    font-size: 20px;
    color: var(--color-4);
    background: #d3d3d3;
    border-radius: 50%;
    margin: 0 auto 10px;
    padding: 2px;
    position: relative;
    z-index: 2;
}

#progressbar li:after {
    width: 100%;
    position: absolute
}

#progressbar li:last-of-type:after {
    width: 0%;
    position: absolute
}

#progressbar li.active:after {
    background: #d3d3d3;
}
#progressbar li.active:before {
    background: #198038;
}

.signup-logo img {
    width: 160px
}

.msform fieldset p,
.form-card .form-check label {
    font-weight: 400;
    font-size: 18px;
    line-height: 27px
}

.form-card .form-control {
    border-radius: 4px;
    margin-bottom: 22px;
    height: 56px;
    color: var(--color-2)
}
.form-card.servsele label.form-check-label {
    transform: unset !important;
}
.form-card {
    margin-bottom: 24px
}

.sign-up-info {
    justify-content: center;
    gap: 10px
}

.sign-up-info p {
    margin-bottom: 0 !important;
    font-size: 14px !important;
    line-height: 21px !important
}

.msform fieldset hr {
    margin: 20px 0
}

.login-links p a {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: #cc57ca;
    text-decoration: none;
}

.msform fieldset img.regdone {
    /*background: #219653;*/
    border-radius: 50%;
    /*padding: 20px;*/
    height: 114px;
    width: 114px;
    margin-bottom: 30px
}

#sign-up {
    min-height: 100vh
}

.close-signup {
    position: absolute;
    top: 3%;
    right: 3%;
    width: 40px;
    height: 50px
}

.form-card .form-check {
    display: flex;
    padding: 10px 0 20px 10%;
    width: 50%;
    float: left;
    gap: 10px;
    align-items: center;
    justify-content: flex-start
}
div#addservice .form-card .form-check {
    padding: 10px 0 20px 4%;
}

.msform fieldset p.other-service {
    color: var(--color-2);
    margin-bottom: 16px;
    display: block;
    clear: both
}

.form-card .form-check label {
    color: var(--color-2)
}

.form-check-input {
    height: 24px;
    width: 24px
}

.form-check-input:checked {
    background-color: var(--color-1);
    border-color: var(--color-1)
}
section#serviceslist .about-desc a.btn {
    margin-top: 20px;
    margin-right: 10px;
}
section#serviceslist .about-sec {
    padding: 50px 0;
}
section#serviceposter {
    padding: 80px 0;
    background: #0F3C62;
}
section#serviceposter .earn-money-box {
    background: #CDE9FF;
}
section#serviceposter .poster-description h2 {
    color: #0F3C62;
}
section#serviceposter .poster-description h4 {
    color: var(--color-2);
}
section#serviceposter .poster-description p {
    color: var(--color-2);
}
section#serviceposter .poster-description a {
    color: var(--color-5);
    border-color: var(--color-5);
    background-color: transparent;
}
section#serviceposter .poster-description a:hover {
    color: var(--color-4);
    border-color: var(--color-5);
    background-color: var(--color-5);
}
.search-location {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.search-location input.form-control {
    padding-left: 52px;
}
.search-location img {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 34px;
}
section.s-details {
    background: #FFF2FF;
    padding: 80px 0;
}
section.s-details .about-img img {
    object-fit: cover;
    object-position: center;
    height: 340px;
    width: 100%;
    border-radius: 32px;
}
section.s-details .about-desc p {
    font-size: 18px;
    line-height: 27px;
    font-weight: 400;
    margin-bottom: 30px;
}
section#availablenow {
    padding: 80px 0;
}
section#latestarticles {
    padding: 80px 0;
}
section#providerinsights {
    padding: 80px 0;
    background: var(--color-6);
}
.available-box {
    background: var(--color-6);
    border-radius: 24px;
    margin: 0 10px;
    padding: 20px;
    text-align: center;
}
.available-box>a>img {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    margin: 0 auto;
    margin-bottom: 10px;
}
#availablenow button.slick-prev, #availablenow button.slick-next,
#latestarticles button.slick-prev, #latestarticles button.slick-next,
#providerinsights button.slick-prev, #providerinsights button.slick-next{
    display: none!important;
}
.u-det {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}
.u-det div {
    display: flex;
    align-items: center;
    gap: 6px;
}
.u-det div img {
    width: 20px;
}
.u-det div span {
    background: #219653;
    height: 20px;
    width: 20px;
    border-radius: 50%;
}
.u-det div p {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    line-height: 33px;
    color: var(--color-2);
}
.available-box h4 {
    font-size: 36px;
    font-weight: 700;
    line-height: 39.6px;
    color: var(--color-2);
    margin-bottom: 0;
}
.error {
    text-align: left;
    margin-top: -10px;
    font-size: 15px;
    margin-bottom: 20px;
    color: #e74c3c;
    clear: both;
}
section#latestreviews {
    padding: 80px 0;
}
.reviews-box {
    background: var(--color-6);
    border-radius: 24px;
    margin: 0 10px;
    padding: 20px;
}
.reviews-box span {
    display: block;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #554E55;
    margin-bottom: 12px;
}
.reviews-box p {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: var(--color-2);
    margin-bottom: 0px;
}
.reviews-box .reviews-head {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    justify-content: space-between;
}
.reviews-box .profile {
    display: flex;
    align-items: center;
    gap: 10px;
}
.reviews-box .profile img {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    object-position: center;
    object-fit: cover;
}
.reviews-box .profile p {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 26.4px;
    color: var(--color-2);
}
.reviews-box .reviews-head .rating{
    display: flex;
    align-items: center;
    gap: 10px;
}
.reviews-box .reviews-head .rating img {
    width: 24px;
}
.reviews-box .reviews-head .rating p {
    font-size: 22px;
    line-height: 33px;
    margin: 0;
    font-weight: 500;
    color: var(--color-2);
}
.mowing-reviews button.slick-next, .mowing-reviews button.slick-prev {
    display: none !important;
}
section#serviceposter .earn-money-box.poster-provide{
    background: #FFF2FF;
}
section#serviceposter .poster-provide .poster-description h2{
    color: #4C004C;
}
section#serviceposter .poster-provide .poster-description h4{
    color: var(--color-2);
}
section#serviceposter .poster-provide .poster-description p{
    color: var(--color-2);
}
section#serviceposter .poster-provide .poster-description a {
    color: var(--color-1);
    border-color: var(--color-1);
    background-color: transparent;
}
.servide-details {
    position: relative;
    background-image: url(../images/servide-details.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 113px 0;
}
.articles-box {
    background: var(--color-6);
    border-radius: 24px;
    margin: 0 10px;
    overflow: hidden;
}
.articles-box a {
    text-decoration: none;
}
.articles-box a img {
    height: 260px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}
.articles-box a h4 {
    margin: 14px 10px;
    padding: 0 20px;
    color: var(--color-2);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.articles-box a p {
    margin: 0 10px;
    padding: 0 20px 20px 20px;
    color: var(--color-3);
}
.provider-insights .articles-box {
    background: var(--color-4);
}
section#experience-greatjob {
    padding: 80px 0;
    background: #CDE9FF;
}
.experience-text p {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: center;
    color: #333333;
    margin-bottom: 30px;
}
.experience-text a {
    margin: 0 4px;
}
ol.breadcrumb {
    margin: 0;
}
section#breadcrumb {
    background: var(--color-4);
    padding: 40px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.15)
}
ol.breadcrumb li.breadcrumb-item a {
    color: var(--color-1);
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
}
ol.breadcrumb li.breadcrumb-item.active {
    color: var(--color-2);
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}
.breadcrumb-item+.breadcrumb-item::before {
    color: var(--color-2);
}
.articles-heading {
    padding: 40px 0;
}
.articles-heading h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 52.8px;
    color: var(--color-2);
    margin-bottom: 10px;
}
.articles-heading span {
    color: var(--color-2);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.atricle-banner {
    margin-bottom: 40px;
}
.atricle-banner img {
    height: 500px;
    object-fit: cover;
    object-position: center;
    width: 100%;
}
.articles-desc p {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #333;
    margin-bottom: 30px;
}

.articles-desc h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 39.6px;
    color: var(--color-2);
    margin-bottom: 20px;
}
.articles-desc img {
    width: 100%;
    height: 450px;
    border-radius: 32px;
    margin-bottom: 30px;
    object-fit: cover;
    object-position: center;
}
.social-share {
    display: flex;
    align-items: center;
    gap: 10px;
}
.social-share a img {
    width: 24px;
    height: 24px;
}
.articles-desc {
    padding-bottom: 30px;
}
.articles-desc hr {
    background-color: #B6B3B6;
    opacity: 1;
    margin: 30px 0
}
section#terms-privacy {
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    background-size: cover;
    padding: 100px 0;
}
.terms {
    background-image: url(../images/terms-banner.jpg);
}
.privacy-policy {
    background-image: url(../images/privacy-banner.jpg);
}
section#terms-privacy:before {
    position: absolute;
    background: rgb(0 0 0 / 50%);
    content: '';
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    z-index: 1;
}
.tp-heading {
    position: relative;
    z-index: 9;
    color: var(--color-4);
}
.tp-heading h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 52.8px;
    color: var(--color-4);
    margin-bottom: 14px;
}
.tp-heading p {
    font-size: 22px;
    font-weight: 500;
    line-height: 33px;
    color: var(--color-4);
    margin-bottom: 0;
}
section#terms-privacy-desc {
    padding: 60px 0;
}
.terms-privacy-description h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 39.6px;
    color: var(--color-2);
    margin-bottom: 12px;
}
.terms-privacy-description span {
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    color: #757575;
    display: block;
    margin-bottom: 30px;
}
.terms-privacy-description p {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #333333;
    margin-bottom: 30px;
}
.terms-privacy-description p:nth-last-of-type(1) {
    margin-bottom: 0;
}
.slide {
    background-position: center;
}
.account-profile {
    position: relative;
    width: 188px;
    margin: 0 auto;
}
.profile-upload {
    position: absolute;
    width: 48px;
    top: 140px;
    right: 0px;
}
input#profilepic {
    display: none;
}
.profile-img img.profile-pic {
    width: 188px;
    height: 188px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}
.availability {
    position: relative;
    width: 95%;
    margin-left: 5%;
}
.availability .availability {
    margin-left: 0;
}
fieldset .availability {
    position: relative;
    width: 100%;
    margin-left: 5%;
}

.availability button.edit-availability {
    border: none;
    padding: 0;
    outline: none;
    box-shadow: none;
    width: 48px;
    height: 48px;
    position: absolute;
    right: 0;
    top: 0;
    background: transparent;
}
table.availability-time {
    width: 90%;
    border-collapse: separate;
    background: #CDE9FF;
    border-radius: 16px;
    padding: 24px;
    text-align: left;
    border-spacing: 0px 10px;
}
table.availability-time td img {
    width: 16px;
}
table.availability-time tr td {
    color: #251C25;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}
table.availability-time tr th {
    color: #251C25;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
}
div#availability .modal-body table,
div#availabilityadd .modal-body table {
    width: 100%;
    text-align: left;
    border-collapse: separate;
    border-spacing: 0px 6px;
}
div#availability .modal-body table .form-switch .form-check-input,
div#availabilityadd .modal-body table .form-switch .form-check-input {
    width: 3em;
    background-color: #E7E6E7;
    border-color: #E7E6E7;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1.25%29'/%3e%3c/svg%3e");
}
div#availability .modal-body table .form-check-input:checked,
div#availabilityadd .modal-body table .form-check-input:checked {
    background-color: #219653;
    border-color: #219653;
}
div#availability .modal-body table tr,
div#availabilityadd .modal-body table tr {
    font-size: 14px;
}
div#availability .modal-footer,
div#availabilityadd .modal-footer {
    border: none;
}
div#availability .modal-body,
div#availabilityadd .modal-body {
    padding: 60px 60px 10px 60px;
}
.img-error {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    margin-top: -10px;
    margin-bottom: 0px;
}
.img-error div#passwordError1 {
    margin-bottom: 0;
    margin-top: 0;
    font-size: 18px;
    line-height: 27px;
}
.img-error img {
    width: 24px;
    margin-right: 6px;
}
section#getintouch form .form-control::-webkit-input-placeholder,
.footer-info form input.form-control::-webkit-input-placeholder {
    font-style: italic;
}
section#getintouch form .form-control:-moz-placeholder,
.footer-info form input.form-control:-moz-placeholder {
    font-style: italic;
}
section#getintouch form .form-control::-moz-placeholder,
.footer-info form input.form-control::-moz-placeholder {
    font-style: italic;
}
section#getintouch form .form-control:-ms-input-placeholder,
.footer-info form input.form-control:-ms-input-placeholder {
    font-style: italic;
}
.user-input-wrp {
    position: relative;
    width: 100%;
}
.user-input-wrp .floating-label {
    padding: 0px;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    transition: 0.2s;
    transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity: 1;
    left: 10px;
    top: 30%;
    color: #868186;
    font-style: italic;
}
.user-input-wrp input:focus + label, .user-input-wrp input:not(:placeholder-shown) + label{
    opacity: 1;
    transform: scale(1) translateY(-120%) translateX(0px);
    background: #fff;
    padding: 0 6px;
    font-size: 14px;
    font-style: normal;
    color: #212529;
}
.user-input-wrp.textarea-label .floating-label {
    padding: 0px;
    pointer-events: none;
    position: absolute;
    transition: 0.2s;
    transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity: 1;
    left: 10px;
    top: 4%;
    olor: #868186;
    font-style: italic;
}
.user-input-wrp textarea:focus + label, .user-input-wrp textarea:not(:placeholder-shown) + label{
    opacity: 1;
    transform: scale(1) translateY(-92%) translateX(0px);
    background: #fff;
    padding: 0 6px;
    font-size: 14px;
    font-style: normal !important;
    color: #212529;
}
.footer-info .user-input-wrp input:focus + label, .footer-info form .user-input-wrp input:not(:placeholder-shown) + label {
    transform: scale(1) translateY(-110%) translateX(0px);
    background: #251c25;
    color: #fff;
}
@media only screen and (max-width:991px) {
    .job-det .price-time h3 {
        font-size: 26px;
    }
    .navbar-light .navbar-nav .nav-link.active:after,
    .navbar-light .navbar-nav .nav-link:hover:after {
        display: none
    }
    .navbar-light .navbar-nav li.nav-item {
        margin-bottom: 10px;
        width: 100%;
    }
    .team-member {
        margin-bottom: 30px
    }
    .form-card .form-check {
        padding: 10px 0 20px 10%
    }
    .navbar-light .navbar-nav {
        align-items: flex-start;
    }
    /*header {
        position: fixed;
        z-index: 9999;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
    }*/
    section#hero, .servicespage, .servide-details, section#aboutuspage, section#news, section#breadcrumb, #becomeprovider, section#terms-privacy, #contactus {
        margin-top: 0px!important;
    }
    section#hero button.slick-next, section#hero button.slick-prev,
    section#aboutuspage button.slick-next, section#aboutuspage button.slick-prev{
        display: none!important;
    }
    section.s-details .heading-left {
        align-items: center;
        flex-direction: column;
    }
}

@media only screen and (max-width:767px) {
    .about-sec.bg-gray .row {
        flex-direction: column-reverse
    }
    .about-sec .row {
        gap: 20px
    }
}

@media only screen and (max-width:576px) {
    ol.breadcrumb li.breadcrumb-item a, ol.breadcrumb li.breadcrumb-item.active {
        font-size: 16px;
    }
    .articles-heading h1 {
        font-size: 32px;
        line-height: 36px;
    }
    .articles-desc h2 {
        font-size: 26px;
        line-height: 30px;
    }
    .slide {
        padding: 100px 0
    }
    .heading-left {
        align-items: center;
        flex-direction: row;
        gap: 10px
    }
    .earn-money-box {
        flex-direction: column
    }
    section#services .heading-left {
        flex-direction: column;
    }
    .earn-money-box .poster-img,
    .poster-description {
        width: 100%
    }
    .msform fieldset h1,
    .msform fieldset h2,
    .about-sec .about-desc h2,
    .heading-center h1,
    .heading-center h2,
    .heading-left h1,
    .heading-left h2,
    .job-experience h2,
    .poster-description h2 {
        font-size: 22px
    }
    .great-box h3,
    .services-box .service-details h3 {
        font-size: 18px
    }
    .hero-caption h1,
    .page-heading h1 {
        font-size: 32px;
        margin-bottom: 14px
    }
    .hero-caption h1 span,
    .page-heading h1 span {
        font-size: 42px
    }
    .hero-caption h4{
        font-size: 18px;
    }
    .hero-caption p{
        font-size: 16px;
    }
    .articles-desc p {
        font-size: 16px;
        line-height: 24px;
    }
    fieldset  table.availability-time {
        width: 100%;
    }
}

@media only screen and (min-width:576px) {
    .articles-heading h1 {
        font-size: 32px;
        line-height: 36px;
    }
    .articles-desc h2 {
        font-size: 26px;
        line-height: 30px;
    }
    .articles-desc p {
        font-size: 16px;
        line-height: 24px;
    }
    .msform fieldset h1,
    .msform fieldset h2,
    .about-sec .about-desc h2,
    .heading-center h1,
    .heading-center h2,
    .heading-left h1,
    .heading-left h2,
    .job-experience h2,
    .poster-description h2 {
        font-size: 24px
    }
    .slide {
        padding: 100px 0
    }
    .heading-left {
        align-items: center;
        flex-direction: row;
        gap: 10px
    }
    .earn-money-box {
        flex-direction: column
    }
    .earn-money-box .poster-img,
    .poster-description {
        width: 100%
    }
    .great-box h3,
    .services-box .service-details h3 {
        font-size: 18px
    }
    .hero-caption h1,
    .page-heading h1 {
        font-size: 32px;
        margin-bottom: 18px
    }
    .hero-caption h1 span,
    .page-heading h1 span {
        font-size: 46px
    }
    .hero-caption h4{
        font-size: 18px;
    }
    .hero-caption p{
        font-size: 16px;
    }
}

@media only screen and (min-width:768px) {
    .articles-heading h1 {
        font-size: 36px;
        line-height: 40px;
    }
    .articles-desc h2 {
        font-size: 30px;
        line-height: 36px;
    }
    .heading-left {
        flex-direction: row
    }
    .msform fieldset h1,
    .msform fieldset h2,
    .about-sec .about-desc h2,
    .heading-center h1,
    .heading-center h2,
    .heading-left h1,
    .heading-left h2,
    .job-experience h2,
    .poster-description h2 {
        font-size: 30px
    }
    .great-box h3,
    .services-box .service-details h3 {
        font-size: 20px
    }
    .hero-caption h1,
    .page-heading h1 {
        font-size: 36px;
        margin-bottom: 20px
    }
    .hero-caption h1 span,
    .page-heading h1 span {
        font-size: 50px
    }
    .hero-caption h4{
        font-size: 18px;
    }
    .hero-caption p{
        font-size: 16px;
    }
}

@media only screen and (min-width:992px) {
    .articles-heading h1 {
        font-size: 40px;
        line-height: 46px;
    }
    .articles-desc h2 {
        font-size: 32px;
        line-height: 38px;
    }
    .articles-desc p {
        font-size: 18px;
        line-height: 27px;
    }
    .slide {
        padding: 100px 0
    }
    .servicespage .slide {
        padding: 60px 0
    }
    .earn-money-box {
        flex-direction: row
    }
    .earn-money-box .poster-img,
    .poster-description {
        width: 50%
    }
    .msform fieldset h1,
    .msform fieldset h2,
    .about-sec .about-desc h2,
    .heading-center h1,
    .heading-center h2,
    .heading-left h1,
    .heading-left h2,
    .job-experience h2,
    .poster-description h2 {
        font-size: 30px
    }
    .great-box h3,
    .services-box .service-details h3 {
        font-size: 22px
    }
    .hero-caption h1,
    .page-heading h1 {
        font-size: 40px;
        margin-bottom: 24px
    }
    .hero-caption h1 span,
    .page-heading h1 span {
        font-size: 54px
    }
    .hero-caption h4{
        font-size: 20px;
    }
    .hero-caption p{
        font-size: 16px;
    }
}

@media only screen and (min-width:1200px) {
    .articles-heading h1 {
        font-size: 48px;
        line-height: 52.8px;
    }
    .articles-desc h2 {
        font-size: 36px;
        line-height: 39.6px;
    }
    .slide {
        padding: 140px 0
    }
    .servicespage .slide {
        padding: 113px 0
    }

    .msform fieldset h1,
    .msform fieldset h2,
    .about-sec .about-desc h2,
    .heading-center h1,
    .heading-center h2,
    .heading-left h1,
    .heading-left h2,
    .job-experience h2,
    .poster-description h2 {
        font-size: 36px
    }
    .great-box h3,
    .services-box .service-details h3 {
        font-size: 24px
    }
    .hero-caption h1,
    .page-heading h1 {
        font-size: 48px;
        margin-bottom: 30px
    }
    .hero-caption h1 span,
    .page-heading h1 span {
        font-size: 52px
    }
    .hero-caption h4{
        font-size: 22px;
    }
    .hero-caption p{
        font-size: 18px;
    }
}

@media only screen and (min-width:1440px) {
    .slide {
        padding: 170px 0;
    }
}
@media only screen and (min-width:1640px) {
    .slide {
        padding: 200px 0;
    }
}











/*dashboard css*/
.dashboardnav .navbar-nav .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dashboardnav>.container  {
    align-items: flex-end;
}
.dashboardnav .navbar-nav .nav-link:after {
    bottom: -8px;
}
.dashboardnav .navbar-nav .nav-link.active:after {
    bottom: -8px;
}
.dashboardnav .navbar-nav .nav-link:hover:after {
    bottom: -8px;
}
.dashboardnav .navbar-nav .nav-link {
    margin: 0 0 0 20px;
}
main#dashboard{
    background-color: #F3F2F3;
}
.dheading, .chat-dheading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dheading h1, .chat-dheading h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 52.8px;
    text-align: left;
    color: #251C25;
    margin: 0;
}
.dheading p, .chat-dheading p {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #251C25;
}
section#pageheading {
    padding: 66px 0;
}
.jobs-bookings-box {
    background: #fff;
    padding: 40px 30px 30px 30px;
    border-radius: 28px;
    margin-bottom: 50px;
}
.jobs-bookings-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 0 30px 0;
}
.jobs-bookings-heading h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 39.6px;
    color: #251C25;
    margin-bottom: 0;
}
.jobs-bookings-heading a {
    display: flex;
    text-decoration: none;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    text-align: center;
    color: #91278F;
    align-items: flex-end;
}
.jobbooking-list {
    border: 1px solid #E7E6E7;
    border-radius: 16px;
    padding: 20px;
}
.jobbooking-list p {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #251C25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jobbooking-list p b{
    font-weight: 700;
}
.list-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}
.uprofile .pro {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.uprofile .pro img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}
.uprofile .pro p {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #251C25;
}
.uprofile .prorating {
    display: flex;
    align-items: center;
    gap: 10px;
}
.uprofile .prorating p {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #251C25;
}
.utime {
    background: #F3F2F3;
    border-radius: 8px;
    padding: 10px;
}
.utime .time-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}
.utime .time-icon p {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: #554E55;
}
.jobbooking-list.active .utime {
    background: #FFF2FF;
}
.jobbooking-list.active .utime .time-icon p {
    color: #554E55;
    font-weight: 700;
}
.uprofile .prorating span {
    color: #FFB300;
}
.available-providers {
    background: #fff;
    border-radius: 28px;
    padding: 50px 30px 30px 30px;
    margin-bottom: 40px;
}
.widget-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}
.widget-heading h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 39.6px;
    color: #251C25;
    margin: 0;
}
.widget-heading a {
    color: #91278F;
    text-decoration: none;
    line-height: 12px;
}
.providers-list {
    border: 1px solid #E7E6E7;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    height: 96px;
}
.pro-name {
    display: flex;
    gap: 10px;
    align-items: center;
}
.pro-name img {
    height: 48px;
    width: 48px;
    min-width: 48px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}
.pro-name b {
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    color: #251C25;
}
.pro-det {
    display: flex;
    align-items: center;
    gap: 20px;
}
.pro-stars {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pro-stars span {
    color: #FFB300;
}
.pro-stars p {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #251C25;
}
.location {
    display: flex;
    align-items: center;
    gap: 6px;
}
.location span{
    color: #554E55;
}
.location p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #554E55;
}
.provider-exp {
    display: flex;
    align-items: center;
    gap: 6px;
}
.provider-exp span {
    height: 20px;
    width: 20px;
    background: #e3e3e3;
    border-radius: 50%;
}
.provider-exp span.pro {
    background: #219653;
}
.provider-exp span.int {
    background: #1C75BC;
}
.provider-exp span.ent {
    background: #FFB300;
}
.provider-exp p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #554E55;
}
.provider-work-icon img {
    width: 32px;
}
.available-providers .providers-list:nth-last-of-type(1) {
    margin-bottom: 0;
}
.noti-list {
    background: #fff;
    border-radius: 28px;
    padding: 50px 30px 30px 30px;
    margin-bottom: 40px;
}
.notifications-list {
    border: 1px solid #E7E6E7;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 24px;
    gap: 20px;
    height: 96px;
}
.noti-short-desc {
    width: 80%;
}
.noti-short-desc p {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 0;
    color: #251C25;
}
.noti-short-desc span {
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 21px;
    color: #868186;
}
.noti-list .notifications-list:nth-last-of-type(1) {
    margin-bottom: 0;
}
.link-box {
    background: #fff;
    border-radius: 28px;
    padding: 48px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    transition: all 0.3s;
}
.link-box:hover {
    transform: scale(1.02);
}
.link-box div {
    display: flex;
    align-items: center;
    gap: 10px;
}
.link-box p {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    color: #554E55;
}
.link-box a {
    color: #91278F;
    width: 40px;
    text-align: center;
    height: 27px;
}
.job-requests-list {
    border: 1px solid #E7E6E7;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 20px;
    height: 96px;
}
.available-providers .job-requests-list:nth-last-of-type(1) {
    margin-bottom: 0;
}
.job-requests-list .jobname {
    display: flex;
    gap: 10px;
    align-items: center;
}
.job-requests-list .jobname img {
    width: 32px;
}
.job-requests-list .jobname p {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #251C25;
}
.job-requests-list .jobname p b {
    font-weight: 700;
}
.jobtime span {
    background: #F3F2F3;
    padding: 8px 6px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #554E55;
}
.provider-work-icon.noti-uprofile img {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.profile-box {
    background: #F3F2F3;
    border-radius: 32px;
    padding: 30px;
    margin-bottom: 30px;
}
.pro-img img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto;
    display: block;
    margin-bottom: 30px;
    object-fit: cover;
}
.pro-img h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 39.6px;
    text-align: center;
    color: #251C25;
    margin-bottom: 30px;
    position: relative;
}
.pro-img h2 span {
    color: #1C75BC;
    position: absolute;
    display: inline-block;
    top: -10px;
}
#myprofile{
    background-color: #fff;
}
.pro-overview {
    background: #E7E6E7;
    border-radius: 12px;
    margin-bottom: 30px;
    padding: 16px 20px;
}
.profile-box ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.profile-box ul li {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
}
.profile-box ul li span {
    color: #554E55;
}
.profile-box ul li p {
    margin: 0;
    color: #554E55;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
}
.profile-box h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    text-align: left;
    color: #251C25;
    margin-bottom: 10px;
}
.about-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.about-title h3 {
    font-size: 36px;
    font-weight: 700;
    line-height: 39.6px;
    text-align: left;
    color: #251C25;
}
.about-title a.edit-desc {
    color: #91278F;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
}
.about-title a.edit-desc span {
    font-size: 16px;
    margin-right: 6px;
}
.about-desc {
    margin-bottom: 30px;
}
.about-desc p {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #251C25;
}
.about-me .mowing-reviews {
    margin-bottom: 30px;
    margin-top: 10px;
}
.about-me .photos-slider {
    margin-top: 10px;
    margin-bottom: 30px;
}
.photos-slider .photos-slider-box {
    margin: 0 10px;
}
.photos-slider .photos-slider-box img {
    height: 220px;
    width: 100%;
    border-radius: 32px;
    object-fit: cover;
}
.about-me {
    margin-bottom: 60px;
}
.additem {
    background: #F3F2F3;
    text-align: center;
    vertical-align: middle;
    border-radius: 32px;
    height: 220px;
    padding: 75px 0;
    position: relative;
}
.additem .addphoto {
    text-decoration: none;
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 78.5px;
    cursor: pointer;
    border-radius: 32px;
}
.additem .addphoto span {
    font-size: 36px;
    color: #554E55;
}
.additem .addphoto p {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    margin: 0;
    color: #554E55;
}
/*.additem input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}*/
.photos-slider button.slick-next, .photos-slider button.slick-prev {
    display: none !important;
}
.profile-box ul li a {
    display: flex;
    gap: 10px;
    text-decoration: none;
}
.profile-box ul li a:hover p,
.profile-box ul li a:hover span{
    color: #91278f;
}
.profile-box ul li a p {
    color: #868186;
}
.service-listing {
    display: flex;
    gap: 80px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.services-list {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.services-list img {
    width: 32px;
}
.services-list p {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: left;
    color: #251C25;
}
.add-services a {
    display: flex;
    gap: 6px;
    text-decoration: none;
}
.add-services {
    display: flex;
    gap: 16px;
}
.add-services span {
    color: #868186;
}
.add-services p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #868186;
}
nav.dashboardnav {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.sidebar-filter {
    border-radius: 32px;
    background: #F3F2F3;
    padding: 32px;
}
.sidebar-filter .form-check .form-check-input {
    width: 20px;
    height: 20px;
}
.sidebar-filter .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.sidebar-filter hr {
    background-color: #B6B3B6;
    opacity: 1;
    margin: 2rem 0 1.5rem 0;
}
.sidebar-filter .form-check label {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #251C25;
    transform: scale(1) translateY(0) translateX(0) !important;
}
.sidebar-filter .form-check label img{
    width: 20px;
}
.sidebar-filter h4 {
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    color: #251C25;
}
.providers-listing {
    background: #F3F2F3;
    border-radius: 32px;
    padding: 32px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.prov-profile img {
    min-width: 80px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}
.prov-name-exp {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}
.prov-name-exp h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 26.4px;
    color: #251C25;
    margin: 0;
}
.prorating {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}
.prorating div {
    display: flex;
    align-items: center;
    gap: 10px;
}
.prorating div span {
    color: #554E55;
}
.prorating div p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #251C25;
}
.prorating .pro-location span,
.prorating .pro-location p{
    color: #554E55;
}
.prorating .pro-donejob span,
.prorating .pro-donejob p{
    color: #333333;
}
.prov-moredet {
    display: flex;
    gap: 16px;
    align-items: center;
}
.shorodesc {
    margin-bottom: 10px;
}
.shorodesc p {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #251C25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 0;
}
.bookprov .btn {
    min-width: 180px;
}
.pro-tag a {
    text-decoration: none;
    color: #554E55;
    background: #9E9A9E1A;
    padding: 3px 10px;
    display: inline-block;
    border-radius: 12px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
}
div#availability .modal-dialog,
div#availabilityadd .modal-dialog,
div#availabity .modal-dialog.modal-xl {
    border-radius: 24px !important;
    overflow: hidden;
}
#addservice div#achievementError6, #addservice div#achievementError7 {
    width: 80%;
    margin: -10px auto 20px auto;
}
div#availability,
div#availabilityadd {
    background: rgba(0, 0, 0, 0.4);
}
div#availabity .modal-header {
    border-bottom: 0px solid #dee2e6;
}
div#availabity .modal-header a {
    color: #251C25;
}
.availabity-update h1 {
    font-size: 36px;
    font-weight: 700;
    line-height: 39.6px;
    margin-bottom: 20px;
    color: #251C25;
}
.availabity-update .signup-logo {
    margin-bottom: 20px;
}
.availabity-update p {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #868186;
    margin-bottom: 20px;
}
.noti-list-page .notifications-list {
    background: #fff;
    border: 1px solid #E7E6E7;
}
.noti-list-page {
    margin-bottom: 50px;
}
.nav-pills .nav-link:hover, .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #554E55;
    background-color: #F3F2F3;
}
.settings-all .nav-link {
    color: #554E55;
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    border-radius: 12px;
    transition: all 0.3s;
}
.settings-all div#v-pills-tab {
    position: relative;
    padding-bottom: 53px;
    min-width: 250px;
}
.settings-all form .form-group .update {
    position: absolute;
    top: 0;
    right: 0;
    color: #91278F;
    cursor: pointer;
}
.settings-all form .form-group .update a span {
    font-size: 20px;
    color: #91278F;
}
.settings-all form .form-group .update a.readonly span {
    color: #868186;
}
.settings-all form .form-group {
    position: relative;
    margin: 20px 0 20px 0;
}
.form-group{
    position: relative;
}
.settings-all form .form-group .form-control{
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #91278f;
    border: none;
    border-bottom: 2px solid #91278f;
    border-radius: 0;
    padding-left: 0;
}
.form-control[readonly] {
    background-color: #ffffff;
    opacity: 1;
    color: #251C25!important;
    border-bottom: 1px solid #B6B3B6 !important;
}
.settings-all form .form-group label {
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
    color: #868186;
    padding: 0;
}
.settings-all .tab-pane h4 {
    font-size: 24px;
    font-weight: 700;
    line-height: 26.4px;
    color: #251C25;
    margin-bottom: 12px;
}
.form-label {
    padding: 0px;
    pointer-events: none;
    position:absolute;
    left:0;
    top:0;
    transition: 0.2s;
    transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity:1;
}
input:focus + label, input:not(:placeholder-shown) + label {
    opacity:1;
    transform: scale(1) translateY(-100%) translateX(0px);
}
input:focus + label, input:not(:-ms-input-placeholder) + label {
    opacity:1;
    transform: scale(1) translateY(-100%) translateX(00px);
}

textarea:focus + label, textarea:not(:placeholder-shown) + label {
    opacity: 1;
    transform: scale(1) translateY(-50%) translateX(20px);
    background: #fff;
    padding: 0 5px;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    color: #251C25;
}
textarea:focus + label, textarea:not(:-ms-textarea-placeholder) + label {
    opacity:1;
    transform: scale(1) translateY(-50%) translateX(20px);
}
textarea + label, textarea:not(:placeholder-shown) + label {
    padding: 0px 5px !important;
}
.settings-all div#v-pills-tab a.logout {
    /*position: absolute;
    bottom: 0;
    width: 100%;*/
}
.settings-all {
    margin-bottom: 60px;
}
.settings-all .tab-pane form {
    margin-top: 40px;
}
.infotext span.vcodeinfo {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #868186;
}
.settings-all form .form-group.infotext label.form-label {
    top: 30px;
}
.settings-all form .form-group.infotext input:focus + label,
.settings-all form .form-group.infotext input:not(:placeholder-shown) + label {
    transform: scale(1) translateY(-200%) translateX(0px);
}
.settings-all form .form-group.infotext input:focus + label,
.settings-all form .form-group.infotext input:not(:-ms-input-placeholder) + label {
    transform: scale(1) translateY(-200%) translateX(00px);
}
.edits div#editcard {
    display: flex;
    transition: all 0.3s;
}
div#editcard {
    transition: all 0.3s;
    display: none;
}
button.add-card {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #868186;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    transition: all 0.3s;
}
button.add-card:hover {
    color: #91278f;
}
.settings-all.mybooking div#v-pills-tab button:nth-last-of-type(1){
    position: unset;
}
.bookings-box {
    background: #F3F2F3;
    border-radius: 32px;
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 12px;
}
.booking-title p {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    line-height: 33px;
    color: #251C25;
}

.booking-title p span {
    font-weight: 700;
}
.booking-title {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.tmunmstr {
    display: flex;
    align-items: center;
    gap: 30px;
    background: #E7E6E7;
    border-radius: 12px;
    padding: 10px;
    width: max-content;
    margin-bottom: 20px;
}
.tmunmstr div {
    display: flex;
    gap: 10px;
}
.tmunmstr div p {
    color: #554E55;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}
.tmunmstr div span{
    color: #554E55;
}
.tmunmstr div.rat span {
    color: #FFB300;
}
.tmunmstr div.rat p {
    color: #251C25;
}
.dookingsdsc p {
    word-break: break-word;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #251C25;
    margin-bottom: 0;
    word-break: break-word;
}
div#jobdescription div#jobDescriptionBody p{
    word-break: break-word;
}
.bookaction {
    width: 50% !important;
}
.timeline {
    color: #251C25;
    padding: 14px 30px;
    border: 2px solid #1C75BC;
    border-radius: 12px;
    margin-bottom: 10px;
    font-family: Poppins;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    text-align: center;
    background: #CDE9FF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.timeline span {
    line-height: 28px;
    color: #251C25;
    border: 2px solid #251C25;
    margin-left: 10px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.3s;
    font-size: 20px;
}
.timeline a:hover span {
    background: #251C25;
    color: #fff;
    border-color: #251C25;
}
.bookaction .moreinfo a.btn.btn-primary {
    width: 100%;
    margin-bottom: 10px;
}
.btn.btn-link {
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    color: #91278F;
    text-decoration: none;
    padding: 13.5px 23.2px !important;
    text-align: center;
    transition: all 0.3s;
}
.btn.btn-link:hover {
    color: #1176bd;
}
.moreinfo .btn.btn-link {
    width: 100%;
}
.moreinfo h3 {
    font-size: 36px;
    font-weight: 700;
    line-height: 39.6px;
    text-align: center;
    color: #251C25;
    margin-bottom: 0;
}
section#experience-Greatjob {
    padding: 80px 0;
    background: #CDE9FF;
}
.allmodel .modal-content {
    border-radius: 24px;
}
.allmodel .modal-header {
    padding: 2rem 2rem 0rem 2rem;
    border-bottom: 0px solid #dee2e6
}
.allmodel .btn-close {
    color: #251C25;
    opacity: 1;
}
.allmodel h1 {
    font-size: 36px;
    font-weight: 700;
    line-height: 39.6px;
    text-align: center;
    color: #251C25;
}
.allmodel p {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: center;
    color: #251C25;
}
.allmodel .info-text p {
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #868186;
}
.addimages {
    background: #CDE9FF;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: 12px;
}
.addimages input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}
.addimages span {
    font-size: 36px;
    margin-bottom: 10px;
    color: #554E55;
}
.addimages p {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: center;
    color: #868186;
}
div#aboutme textarea {
    resize: none;
    padding: 12px;
}
.jobname {
    justify-content: center;
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
}
.jobname p {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #251C25;
}
.jobname img {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.moreopt button {
    background: #E7E6E7;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    text-align: center;
    padding: 0;
}
.moreopt button span {
    font-size: 30px;
    line-height: 50px;
    color: #251C25;
}
.moreopt button:after {
    display: none;
}
.moreopt .dropdown-item.active, .moreopt .dropdown-item:active {
    background-color: #91278f;
}
.job-inf {
    display: flex;
    align-items: center;
    background: #E7E6E7;
    padding: 8px 10px;
    border-radius: 12px;
    gap: 30px;
    width: fit-content;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 12px;
}
.job-inf div {
    display: flex;
    align-items: center;
    gap: 10px;
}
.job-inf .prof img {
    height: 32px;
    width: 32px;
    object-fit: cover;
    border-radius: 50%;
}
.job-inf div p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #554E55;
}
.job-inf .schedules span {
    color: #554E55;
}
.job-inf .starrat span {
    color: #FFB300;
}
.job-inf .starrat p {
    color: #251C25;
}
.jobname {
    margin-top: 20px;
}
.ratetime {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E7E6E7;
    gap: 30px;
    border-radius: 12px;
    padding: 8px 10px;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 16px;
}
.ratetime div {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ratetime div p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #554E55;
}
.ratetime div b {
    color: #554E55;
}
textarea{
    resize: none;
}
.time-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
    gap: 30px;
}
.time-unit {
    display: flex;
    margin: 0 10px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.time-unit input {
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
    width: 58px;
    height: 36px;
}
.btn-up,
.btn-down {
    border: none;
    background: transparent;
    cursor: pointer;
}
div#editdatetime .form-label {
    left: 10px;
    top: 6px;
}
div#editdatetime input:focus + label, div#editdatetime input:not(:placeholder-shown) + label {
    opacity: 1;
    transform: scale(1) translateY(-76%) translateX(0px);
    background: #fff;
    padding: 0px 6px;
}
.jobds {
    display: flex;
    align-items: center;
    justify-content: center;
}
.jobds p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.job-inf .schedules a span,
.jobds a span {
    color: #91278f;
    font-size: 22px;
}
.datespick {
    position: relative;
}
.datespick span {
    position: absolute;
    top: 5px;
    right: 6px;
    color: #251C25;
}
.ui-state-active, .ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active, a.ui-button:active {
    border: 1px solid #91278F !important;
    background: #91278F !important;
    color: #ffffff!important;
}
.ui-button.ui-state-active:hover{
    border: 1px solid #91278F !important;
    background: #fff !important;
    color: #91278F!important;
}
.ui-state-default, .ui-widget-content .ui-state-default {
    border: 1px solid #fff;
    background: #fff;
    font-weight: normal;
    color: #454545;
    height: 30px;
    width: 30px;
    text-align: center;
    border-radius: 50%;
}
.ui-state-default, .ui-widget-content .ui-state-default:hover {
    background: #fff;
    color: #91278f;
    border: 1px solid #91278f;
}
.done-check-circle {
    height: 100px;
    background: #219653;
    width: 100px;
    text-align: center;
    border-radius: 50%;
    margin: 10px auto;
}
.done-check-circle span {
    font-size: 60px;
    color: #fff;
    line-height: 100px;
}


.rate {
    display: inline-block;
    border: 0;
}
.rate > input {
    display: none;
}
.rate > label {
    float: right;
    transform: unset !important;
    color: #9e9e9e;
}
.rate > label:before {
    display: inline-block;
    font-size: 3rem;
    padding: .3rem .6rem;
    margin: 0;
    cursor: pointer;
    font-family: FontAwesome;
    content: "\f005 ";
}
.rate .half:before {
    content: "\f089 ";
    position: absolute;
    padding-right: 0;
}
#starrate input:checked ~ label,
#starrate label:hover,
#starrate label:hover ~ label {
    color: #ffb300;
    transform: unset;
}

#starrate input:checked + label:hover,
#starrate input:checked ~ label:hover,
#starrate input:checked ~ label:hover ~ label,
#starrate label:hover ~ input:checked ~ label {
    color: #FFB300;
    transform: unset;
}
div#reviewsp .form-group label.form-label {
    left: 4px;
    top: 1px;
}
.info-text-1 p {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: center;
    color: #868186;
}
a.backtojob span {
    color: #251C25;
    font-size: 32px;
}
.jobds p a.more-desc {
    color: #251C25;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    transition: all 0.3s;
}
.jobds p a.more-desc:hover {
    color: #91278f;
}
a.btn.btn-timer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    text-align: center;
    color: #251C25;
    background: #CDE9FF;
    border: 2px solid #1C75BC;
    border-radius: 12px;
    padding: 9px 20px;
}
a.btn.btn-timer.starttimer.started .timecount {
    display: block;
}
/*a.btn.btn-timer.starttimer .timecount {*/
/*    display: none;*/
/*}*/
span#button-stop {
    display: none;
}
span#button-stop span {
    line-height: 24px;
    color: #251C25;
    border: 2px solid #251C25;
    margin-left: 6px;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.3s;
    font-size: 20px;
}
.edit-time {
    background: #CDE9FF;
    display: inline-flex;
    padding: 8px 14px;
    border-radius: 12px;
    gap: 10px;
    align-items: center;
    margin-bottom: 2rem;
    margin-top: 1rem;
}
.edit-time button {
    border: 2px solid #91278F;
    border-radius: 8px;
    background: transparent;
    padding: 6px 14px;
    color: #91278F;
    font-size: 20px;
}
.edit-time span {
    font-size: 22px;
    font-weight: 700;
    line-height: 33px;
    color: #554E55;
}
.addqualifi .form-label {
    left: 10px;
    top: 30%;
    font-style: italic;
}
.addqualifi  input:focus + label, .addqualifi input:not(:placeholder-shown) + label {
    transform: scale(1) translateY(-120%) translateX(0px);
    background: #fff;
    padding: 0 4px;
    font-style: normal;
}
.addqualifi input.form-control {
    height: 56px;
    font-size: 18px;
}
.sub-heading p{
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #251C25;
    margin-bottom: 30px;
}
.booktime p{
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    text-align: center;
    color: #251C25;
    margin-bottom: 0;
    width: 160px;
}
.timerhead p {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #251C25;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}
.timerhead span.timeline {
    margin-bottom: 0;
    font-weight: 500;
}
.timerhead span.timeline a {
    text-decoration: none;
    margin-right: 4px;
    color: #251C25;
}
div#addservice .form-card .form-check {
    width: 33%;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
div#addservice .form-card .form-check input:not(:placeholder-shown) + label {
    opacity: 1;
    transform: scale(1) translateY(0%) translateX(0px);
}
div#addservice .newcontrol .form-label,
div#bookservice .newcontrol .form-label {
    left: 10px;
    top: 30%;
    font-style: italic;
    color:#868186;
}
div#addservice .newcontrol input:focus + label,
div#bookservice .newcontrol input:focus + label,
div#addservice .newcontrol input:not(:placeholder-shown) + label,
div#bookservice .newcontrol input:not(:placeholder-shown) + label {
    transform: scale(1) translateY(-113%) translateX(0px);
    background: #fff;
    padding: 0 8px;
    font-style: normal;
    color:#251C25;
}
div#addservice #progressbar {
    display: flex;
    justify-content: center;
    padding: 0;
}
div#addservice .newcontrol,
div#bookservice .newcontrol {
    width: 80%;
    margin: 0 auto;
}
div#addservice .form-card.form-card1 .form-check {
    width: 50%;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10%;
}
div#addservice .sign-up-info p {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: center;
    color: #868186;
}

div#addservice .msform fieldset p.other-services{
    color: #251C25;
}
.success_message1, .error_message1 {
    display: none;
}
.verifyemailicon {
    margin: 20px 0;
    text-align: center;
}
.select-service {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}
.select-service .serv-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 20%;
}
.serv-box .sericon {
    position: relative;
    height: 100px;
    width: 100px;
    background: #fff;
    text-align: center;
    line-height: 100px;
    border-radius: 50%;
    border: 2px solid #E7E6E7;
    margin-bottom: 10px;
    overflow: hidden;
}
.serv-box .sericon.service-selected {
    border: 2px solid #91278F;
    background: #FFF2FF;
}
.serv-box .sericon input {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    opacity: 0;
}
.serv-box .sericon img {
    width: 56px;
}
.select-service .serv-box label {
    color: #251C25;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
}
.booktime {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
}
.booktime .timedatebox {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #B6B3B6;
    padding: 14px 20px;
    border-radius: 4px;
}
.booktime .timedatebox.time-selected {
    border: 1px solid #91278F;
    background-color: #FFF2FF;
}
.timedatebox input {
    height: 20px;
    width: 20px;
}
input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 2px solid #554E55;
    border-radius: 50%;
    padding: 3px;
    cursor: pointer;
    outline: 2px solid #fff !important;
    outline-offset: -4px !important;
    height: 20px;
    width: 20px;
}
input[type="radio"]:checked {
    background-color: #91278f !important;
    outline: 2px solid #fff !important;
    outline-offset: -4px !important;
    border-color: #91278f;
    background-image: none!important;
}
.timedatebox label {
    transform: unset!important;
}
.booktime div p {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    margin: 0;
    color: #251C25;
    width: 30px;
}
.estimatetime {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 20px;
}
.estimatetime-box {
    display: flex;
    align-items: center;
    gap: 10px;
}
.estimatetime-box label {
    transform: unset !important;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: #251C25;
}
.moreestimatetime {
    width: 130px;
    margin: 0 auto;
    margin-bottom: 20px;
    position: relative;
}
.moreestimatetime select.form-control.moretime {
    border: none;
    outline: none;
    box-shadow: none;
    color: #91278F;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    padding-left: 30px;
}
.moreestimatetime:before {
    position: absolute;
    height: 7px;
    width: 7px;
    background: #fff;
    content: '';
    z-index: 99;
    left: 6px;
    top: 16px;
    transform: rotate(45deg);
    border-top: 1px solid #91278f;
    border-right: 1px solid #91278f;
}
.selected-datatime {
    margin-bottom: 20px;
}
textarea.form-control {
    min-height: calc(4.5em + (.75rem + 2px))!important;
}
.w80p .error {
    width: 80%;
    margin: -10px auto 20px auto;
}
section#avalnoti .job-requests-list .jobname img {
    height: auto;
    border-radius: 0;
    width: auto;
    object-fit: unset;
}
.addcard input.form-control {
    border-radius: 4px;
    margin-bottom: 22px;
    height: 56px;
    color: var(--color-2);
}
.addcard .form-label {
    left: 10px;
    top: 30%;
}
.addcard input:focus + label, .addcard input:not(:placeholder-shown) + label {
    transform: scale(1) translateY(-116%) translateX(0px);
    background: #fff;
    padding: 0 2px;
}
.viewabout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
}
.uprofile {
    width: 160px;
    min-width: 160px;
}
.prothumbh {
    position: relative;
}
.prothumbh button {
    position: absolute;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    top: 0;
    right: 0;
}
.udesc {
    position: relative;
}
.udesc p {
    text-align: left;
    width: 90%;
}
.udesc button {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    padding: 0;
    width: 40px;
    height: 40px;
}
.prothumbh img#prothumbh_update {
    height: 150px;
    width: 150px;
    min-width: 150px;
    border-radius: 50%;
    object-fit: cover;
}
div#addservice .form-card.servsele .form-check {
    padding: 10px 0 20px 10%;
    width: auto;
    float: left;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    margin-left: 20px;
    margin-right: 20px;
}
.not-found {
    font-size: 18px;
    color: #696969;
    text-align: center;
    font-weight: 400;
}
.tooltip-inner a {
    color: #92268e;
    font-weight: 800;
}
.tooltip-inner {
    border-radius: 8px;
}

.providers-listing input.selectprovider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}

.providers-listing.checked {
    border: 2px solid #91278f;
}

.providers-listing {
    position: relative;
    border: 2px solid transparent;
}

/* Chat layout UI */
.chat-dheading span {
    font-size: 58px;
    opacity: 0.3;
    color: #912a8a;
}
.user-list ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.user-list ul li {
    margin: 10px 0;
}
.user-list .uprofiles img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #91278f;
    padding: 2px;
    min-width: 50px;
    object-fit: cover;
}
.user-list ul li a {
    text-decoration: none;
    color: #251C25;
    background: #f5f5f5;
    display: block;
    border-radius: 12px;
    padding: 8px 14px;
    transition: all 0.5s;
    border: 1px solid transparent;
}
.user-list ul li a.active, .user-list ul li a:hover, .user-list ul li a:focus {
    background: rgb(145 39 143 / 10%);
    transition: all 0.5s;
    border: 1px solid #91278f;
}
.chat-window {
    height: calc(100vh - 220px);
    overflow: hidden;
    border: 1px solid #f5f5f5;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 60px;
}
.chat-window .user-list {
    width: 300px;
    min-width: 300px;
    height: 100%;
    overflow: auto;
    padding: 0 10px 0 0px;
}
.chat-window .user-list::-webkit-scrollbar {
    width: 6px;
}
.chat-window .user-list::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 10rem;
    border: 1px solid #fff;
}

.chat-window .user-list::-webkit-scrollbar-track-piece:start {
    background: transparent;
}

.chat-window .user-list::-webkit-scrollbar-track-piece:end {
    background: transparent;
}
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5f5f5;
    padding: 10px 20px;
    border-radius: 12px;
}
.user-chat {
    width: 100%;
}
.chat-header .uprofiles img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #91278f;
    padding: 2px;
    object-fit: cover;
}
.uname b{
    font-size: 16px;
    color: #251c25;
}
.chat-options .dropdown-toggle::after{
    display: none;
}
.chat-options button {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
.chat-options button:hover,
.chat-options button:focus,
.chat-options button:active {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
}
.chat-options button span {
    font-size: 30px;
    color: #251c25;
}
.chat-message {
    height: calc(100% - 154px);
    overflow: auto;
    width: 100%;
    margin: 10px 0;
}
.sent {
    text-align: right;
    width: auto;
    display: flex;
    max-width: 80%;
    justify-content: flex-end;
    margin: 0 0 0px auto;
    padding: 4px 10px;
    border-radius: 12px;
    flex-direction: column;
    clear: both;
}
.sent p {
    background: #90278e;
    text-align: right;
    width: auto;
    float: right;
    max-width: 100%;
    justify-content: flex-end;
    margin: 0 0 4px auto;
    padding: 10px 20px;
    border-radius: 12px 4px 4px 12px;
    color: #fff;
}
.sent span {
    font-size: 12px;
    font-weight: 500;
    color: #a1a1a1;
}
.recived {
    float: left;
    width: auto;
    display: flex;
    max-width: 80%;
    margin: 0 auto 10px 0;
    padding: 4px 10px;
    border-radius: 12px;
    flex-direction: column;
    align-items: flex-start;
    clear: both;
}
.recived p {
    background: #dfdfdf;
    text-align: left;
    width: auto;
    max-width: 100%;
    justify-content: flex-start;
    margin: 0 0 4px auto;
    padding: 10px 20px;
    border-radius: 4px 12px 12px 4px;
    color: #251c25;
}
.recived span {
    font-size: 12px;
    font-weight: 500;
    color: #a1a1a1;
}
section#pageheading.messageheading {
    padding: 20px 0;
}
.chat-input form {
    position: relative;
}
.userprofileinput {
    position: absolute;
    top: 7px;
    left: 7px;
}
.userprofileinput img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #91278f;
    padding: 2px;
}
.chat-input input[type="text"] {
    width: 100%;
    background: #ebebeb;
    border-radius: 32px;
    border: none;
    padding: 20px 70px;
}
.chat-input button{
    position: absolute;
    top: 7px;
    right: 7px;
    border: none;
    padding: 0;
    background: transparent;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 70px;
    border-radius: 50%;
}
.chat-input button span{
    font-size: 32px;
}

.dates {
    position: sticky;
    top: 0;
    font-size: 14px;
    text-align: center;
    clear: both;
}
.dates span {
    background: #e3e3e3;
    /*padding: 4px 6px;*/
    border-radius: 12px;
    display: inline-block;
    /*width: 116px;*/
    text-align: center;
}

@media only screen and (max-width: 1366px) {
    .uprofile {
        width: auto;
        min-width: auto;
    }
    .settings-all div#v-pills-tabContent {
        width: 100%;
    }
    .myaccount div#v-pills-tabContent {
        width: 100%;
    }
}
@media only screen and (min-width: 991px) and (max-width: 1200px) {
    .dashboardnav .navbar-nav .nav-link {
        margin: 0 0 0 10px;
    }
    .dashboardnav .navbar-nav .nav-link {
        flex-direction: column;
        gap: 10px;
        margin-left: 0;
    }
    .dashboardnav .navbar-nav li.nav-item {
        margin-bottom: 0;
        width: auto;
    }
    .widget-heading h2, .jobs-bookings-heading h2 {
        font-size: 26px;
    }
    .chat-dheading h1 {
        font-size: 38px;
    }
    .link-box {
        padding: 38px 20px;
    }

}
@media only screen and (max-width:1200px) {
    .jobbooking-list {
        padding: 10px;
    }
    .list-head {
        margin-bottom: 10px;
    }
    div#addservice .form-card.form-card1 .form-check {
        width: 50%;
        justify-content: left;
    }
    .select-service .serv-box label {
        font-size: 18px;
        line-height: 33px;
    }
    .bookaction {
        width: 100% !important;
    }
    .tmunmstr {
        width: auto;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
    .ratetime {
        gap: 10px;
        flex-wrap: wrap;
    }
    .pro-img h2 {
        font-size: 24px;
        line-height: 30px;
    }
    .pro-img h2 span {
        top: -9px;
        font-size: 20px;
    }
    .about-title h3 {
        font-size: 30px;
    }
    .msform fieldset hr {
        margin: 30px 0;
    }
}
@media only screen and (max-width:448px) {
    a.btn.btn-timer {
        margin-bottom: 20px;
    }
}
@media only screen and (max-width:991px) {
    .uprofile .pro {
        margin-bottom: 0px;
    }
    .jobbooking-list p {
        font-size: 16px;
        line-height: 24px;
    }
    .uprofile .pro p {
        font-size: 16px;
        line-height: 24px;
    }
    .uprofile .prorating p {
        font-size: 16px;
        line-height: 24px;
    }
    .utime .time-icon p {
        font-size: 14px;
        line-height: 22px;
    }
    .reviews-box .profile p {
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
    }
    .reviews-box {
        border-radius: 24px;
        padding: 14px 16px;
    }

    .reviews-box span {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 10px;
    }
    .reviews-box p {
        font-size: 16px;
        line-height: 24px;
    }
    .reviews-box .reviews-head {
        align-items: flex-start;
        justify-content: space-between;
        flex-direction: column;
    }
    .form-card .form-check {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    .profile-img img.profile-pic {
        width: 140px;
        height: 140px;
    }
    .profile-upload {
        position: absolute;
        width: 40px;
        top: 90px;
        right: 10px;
    }
    .msform fieldset hr {
        margin: 20px 0;
    }
    .tp-heading h1 {
        font-size: 38px;
    }
    .terms-privacy-description h2 {
        font-size: 30px;
    }
    .timerhead p {
        flex-direction: column;
    }
    .about-title h3 {
        font-size: 26px;
    }
    .pro-img h2 {
        font-size: 20px;
        line-height: 28px;
    }
    .pro-img h2 span {
        top: -8px;
        font-size: 18px;
    }
    .availability button.edit-availability {
        width: 30px;
        height: 30px;
    }
    /*div#addservice .form-card.form-card1 .form-check {
    }*/
    div#addservice .form-card.form-card1 .form-check {
        justify-content: center;
        width: 100%;
        padding-left: 0;
    }
    div#addservice .form-card .form-check {
        width: 100%;
    }
    .sidebar-filter {
        padding: 20px 16px;
    }
    .booktime p {
        text-align: left;
    }
    .link-box {
        padding: 38px 20px;
    }
    nav.dashboardnav .navbar-toggler {
        margin-bottom: 10px;
    }
    section#pageheading {
        padding: 40px 0;
    }
    .dashboardnav .navbar-nav .nav-link {
        flex-direction: row;
        gap: 10px;
        margin-left: 0;
    }
    .jobbooking-list {
        margin-bottom: 30px;
    }
    .chat-dheading h1 {
        font-size: 38px;
        line-height: 46px;
    }
    .select-service {
        align-items: center;
        justify-content: center;
        gap: 20px;
        display: inline-block;
        margin-bottom: 20px;
        flex-direction: column;
    }
    .booktime {
        gap: 10px;
        flex-direction: column;
    }
    .estimatetime {
        gap: 10px;
        flex-direction: column;
    }
    .select-service .serv-box label {
        font-size: 18px;
        line-height: 30px;
    }
    .select-service .serv-box {
        width: 50%;
        display: inline-block;
        text-align: center;
        float: left;
    }
    .serv-box .sericon {
        margin: 0 auto;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    .serv-box .sericon {
        height: 80px;
        width: 80px;
        line-height: 80px;
    }
    .serv-box .sericon img {
        width: 46px;
    }
    header:has(.dashboardnav){
        position: unset!important;
    }
    div#addservice .newcontrol, div#bookservice .newcontrol {
        width: 100%;
        margin: 0 auto;
    }
    .w80p .error {
        width: 100%;
    }
    .modal{
        max-height: 100vh;
        overflow: auto;
    }
    .prov-moredet {
        gap: 16px;
        align-items: flex-start;
        flex-direction: column;
    }
    .prorating {
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 10px;
        flex-direction: column;
    }
    .uprofile .prorating {
        flex-direction: row;
    }
    .shorodesc p {
        -webkit-line-clamp: 3;
    }
    .settings-all .d-flex {
        flex-direction: column;
    }
    .bookaction {
        width: 100% !important;
    }
    .bookings-box {
        flex-direction: column;
    }
    .bookings-box {
        margin-bottom: 20px;
    }
    .tmunmstr {
        width: auto;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .job-det .servicename img {
        width: 54px;
    }
}
@media only screen and (max-width:768px) {
    .profile-box {
        border-radius: 20px;
        padding: 10px;
    }
    .pro-overview {
        border-radius: 10px;
        margin-bottom: 20px;
        padding: 10px;
    }
    .tp-heading h1 {
        font-size: 30px;
    }
    .terms-privacy-description h2 {
        font-size: 26px;
    }
    div#addservice .form-card .form-check {
        width: 100%;
    }
    .job-det .servicename img {
        width: 44px;
    }
    .sidebar-filter {
        padding: 30px;
    }
    .chat-dheading h1 {
        font-size: 30px;
        line-height: 38px;
    }
    .sidebar-filter {
        margin-bottom: 30px;
    }
    .about-title h3 {
        font-size: 32px;
    }
    .uprofile .prorating {
        flex-direction: row;
    }
    .chat-window .user-list {
        width: 250px;
        min-width: 250px;
    }
}
@media only screen and (max-width:576px) {
    .terms-privacy-description h2 {
        font-size: 22px;
    }
    .tp-heading h1 {
        font-size: 28px;
    }
    .job-det {
        align-items: center;
    }
    .job-det .price-time h3 {
        margin: 0;
        font-size: 24px;
    }
    .noti-short-desc p {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .booking-title p {
        font-size: 20px;
        line-height: 28px;
    }
    .about-title h3 {
        font-size: 28px;
    }
    .chat-dheading h1 {
        font-size: 22px;
        line-height: 30px;
    }
    .widget-heading h2, .jobs-bookings-heading h2 {
        font-size: 20px;
    }
    .jobs-bookings-heading h2 {
        font-size: 20px;
    }
    .providers-list {
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 24px;
        height: auto;
        flex-direction: column;
    }
    .pro-det {
        gap: 10px;
        justify-content: space-between;
        width: 100%;
    }
    .availabity-update h1 {
        font-size: 22px;
        line-height: 30px;
    }
    .availability {
        width: 100%;
        margin-left: 0%;
    }
    .availability button.edit-availability {
        right: -10px;
        top: -20px;
        width: 38px;
        height: 38px;
    }
    .allmodel h1 {
        font-size: 22px;
        line-height: 30px;
    }
}
@media only screen and (max-width:450px) {
    .chat-dheading {
        align-items: stretch;
        justify-content: space-between;
        flex-direction: column;
        gap: 10px;
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        max-width: 740px;
    }
    .settings-all div#v-pills-tabContent {
        width: 100%;
    }
    .myaccount div#v-pills-tabContent {
        width: 60%;
    }
}
.previous-btn {
    height: 53px;
    display: inline-block;
    border: 2px solid #91278f;
    font-size: 18px;
    font-weight: 500;
    color: #91278f;
    margin-right: 10px;
    margin-bottom: 20px;
    border-radius: 8px;
}
@media (max-width: 768px) {
    div#addservice .form-card.servsele .form-check {
        padding: 10px 0 20px 10%;
        width: 100%;
    }
    div#login .modal-header, div#providerlogin .modal-header, div#resetpassword .modal-header, div#customersignup .modal-header, div#providersignup .modal-header {
        padding: 1rem 1rem 0rem 1rem;
    }
    .allmodel .modal-header {
        padding: 1rem 1rem 0rem 1rem;
    }
    .msform {
        margin-top: 10px;
    }
    #progressbar {
        margin: 10px auto 0px auto;
    }
    .modal-body {
        padding: 0rem 1rem 1rem 1rem;
    }
    .msform fieldset .btn-primary {
        margin-bottom: 14px;
    }
    .sign-up-info img {
        width: 22px;
    }
    .sign-up-info p {
        font-size: 13px !important;
        text-align: left;
    }
    .msform fieldset p {
        font-size: 16px;
        line-height: 24px;
    }
    .login-links p a {
        font-size: 16px;
        line-height: 24px;
    }
    .form-card .form-control {
        height: 50px;
    }
    .modal .mb-4 {
        margin-bottom: 1rem !important;
    }
    .form-card .form-check {
        padding: 10px 0 10px 10%;
    }
    #progressbar {
        width: 80%;
    }
    .modal .btn.mb-5 {
        margin-bottom: 1.5rem !important;
    }
    .time-picker {
        margin: 30px 0 10px 0;
    }
    .info-text.mb-5 {
        margin-bottom: 1.5rem !important;
    }
    .serv-box .sericon {
        margin-bottom: 4px;
    }
    .moreinfo h3 {
        font-size: 30px;
    }
    .allmodel .mb-5{
        margin-bottom: 1.5rem !important;
    }
    .viewabout {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .form-label {
        text-align: left;
        font-size: 14px;
    }
    .great-box p {
        font-size: 16px;
    }
    .page-heading p, .poster-description p {
        font-size: 16px;
        line-height: 24px;
    }
    .about-sec .about-desc p {
        font-size: 16px;
        line-height: 24px;
    }
    .job-experience p {
        font-size: 16px;
        line-height: 24px;
    }
    .accordion-header button.accordion-button {
        font-size: 16px;
        line-height: 24px;
    }
    .experience-text p {
        font-size: 16px;
        line-height: 24px;
    }
    .become-provider .about-desc ul li, .team-member p {
        font-size: 16px;
        line-height: 24px;
    }
    .footer-info form input.form-control {
        height: 48px;
        font-size: 16px;
    }
    .footer-info form button {
        height: 48px;
    }
    .accordion-body a {
        font-size: 16px;
        line-height: 24px;
    }
}
.prov-det {
    width: 100%;
}
.prov-moredet {
    justify-content: space-between;
}
.bookings-box .bookdet {
    width: 100%;
}
form#customerSignupForm span.select2.select2-container {
    width: 100% !important;
    height: 50px;
    text-align: left;
}
form#customerSignupForm .select2-container--default .select2-selection--single {
    height: 50px!important;
    border: 1px solid #ced4da!important;
}
form#customerSignupForm .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 50px!important;
}
form#customerSignupForm .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px!important;
}
form#customerSignupForm .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #868186!important;
    font-style: italic;
}

form#bookServiceForm span.select2.select2-container {
    width: 100% !important;
    height: 50px;
    text-align: left;
}
form#bookServiceForm .select2-container--default .select2-selection--single {
    height: 50px!important;
    border: 1px solid #ced4da!important;
}
form#bookServiceForm .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 50px!important;
}
form#bookServiceForm .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px!important;
}
form#bookServiceForm .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #868186!important;
    font-style: italic;
}


form#msform1 span.select2.select2-container {
    width: 100% !important;
    height: 50px;
    text-align: left;
}
form#msform1 .select2-container--default .select2-selection--single {
    height: 50px!important;
    border: 1px solid #ced4da!important;
}
form#msform1 .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 50px!important;
}
form#msform1 .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px!important;
}
form#msform1 .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #868186!important;
    font-style: italic;
}
section#direct-link a {
    text-decoration: none;
}
.link-box div.d-linkbox span {
    color: #554E55;
}
.link-box>span {
    color: #91278f;
}
.profile-done h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 39.6px;
    text-align: center;
    color: #251C25;
}
.profile-done ul.checklist {
    text-align: center;
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    display: block;
    width: 50%;
    margin-bottom: 20px;
}
.profile-done ul.checklist li {
    border-bottom: 1px solid #B6B3B6;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    font-weight: 600;
}
.profile-done ul.checklist li:nth-last-of-type(1) {
    border-bottom: 0;
}
.profile-done button.btn.btn-primary {
    margin: 0 auto;
    display: block;
}
.dheading h1 span{
    font-weight: 400;
}
.sidebar-filter .form-check .form-check-input:hover {
    cursor: pointer;
}
.providers-listing input.selectprovider:hover {
    cursor: pointer;
}
a.backButton, a.backButton1 {
    margin-left: 10px;
    font-weight: 700;
    color: #91278f;
    padding: 13.5px 23.2px !important;
}

/*Message css*/
/*.dheading span {*/
/*    font-size: 58px;*/
/*    opacity: 0.3;*/
/*    color: #912a8a;*/
/*}*/
.user-list ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.user-list ul li {
    margin: 10px 0;
}
.user-list .uprofiles img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #91278f;
    padding: 2px;
    min-width: 50px;
    object-fit: cover;
}
.user-list ul li a {
    text-decoration: none;
    color: #251C25;
    background: #f5f5f5;
    display: block;
    border-radius: 12px;
    padding: 8px 14px;
    transition: all 0.5s;
    border: 1px solid transparent;
}
.user-list ul li a.active, .user-list ul li a:hover, .user-list ul li a:focus {
    background: rgb(145 39 143 / 10%);
    transition: all 0.5s;
    border: 1px solid #91278f;
}
.chat-window {
    height: calc(100vh - 220px);
    overflow: hidden;
    border: 1px solid #f5f5f5;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 60px
}
.chat-window .user-list {
    width: 300px;
    min-width: 300px;
    height: 100%;
    overflow: auto;
    padding: 0 10px 0 0px;
}
.chat-window .user-list::-webkit-scrollbar {
    width: 6px;
}
.chat-window .user-list::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 10rem;
    border: 1px solid #fff;
}

.chat-window .user-list::-webkit-scrollbar-track-piece:start {
    background: transparent;
}

.chat-window .user-list::-webkit-scrollbar-track-piece:end {
    background: transparent;
}
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5f5f5;
    padding: 10px 20px;
    border-radius: 12px;
}
.user-chat {
    width: 100%;
    position: relative;
}
.chat-header .uprofiles img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #91278f;
    padding: 2px;
    object-fit: cover;
}
.uname b{
    font-size: 16px;
    color: #251c25;
}
.chat-options .dropdown-toggle::after{
    display: none;
}
.chat-options button {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
.chat-options button:hover,
.chat-options button:focus,
.chat-options button:active {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
}
.chat-options button span {
    font-size: 30px;
    color: #251c25;
}
.chat-message {
    height: calc(100% - 154px);
    overflow: auto;
    width: 100%;
    margin: 10px 0;
}
.sent {
    text-align: right;
    width: auto;
    display: flex;
    max-width: 80%;
    justify-content: flex-end;
    margin: 0 0 0px auto;
    padding: 4px 10px;
    border-radius: 12px;
    flex-direction: column;
    clear: both;
}
.sent p {
    background: #90278e;
    text-align: right;
    width: auto;
    float: right;
    max-width: 100%;
    justify-content: flex-end;
    margin: 0 0 4px auto;
    padding: 10px 20px;
    border-radius: 12px 4px 4px 12px;
    color: #fff;
}
.sent span {
    font-size: 14px;
    font-weight: 600;
    color: #a1a1a1;
}
.recived {
    float: left;
    width: auto;
    display: flex;
    max-width: 80%;
    margin: 0 auto 10px 0;
    padding: 4px 10px;
    border-radius: 12px;
    flex-direction: column;
    align-items: flex-start;
    clear: both;
}
.recived p {
    background: #dfdfdf;
    text-align: left;
    width: auto;
    max-width: 100%;
    justify-content: flex-start;
    margin: 0 0 4px auto;
    padding: 10px 20px;
    border-radius: 4px 12px 12px 4px;
    color: #251c25;
}
.recived span {
    font-size: 14px;
    font-weight: 600;
    color: #a1a1a1;
}
section#pageheading.messageheading {
    padding: 20px 0;
}
.chat-input form {
    position: relative;
}
.userprofileinput {
    position: absolute;
    top: 7px;
    left: 7px;
}
.userprofileinput img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #91278f;
    padding: 2px;
}
.chat-input input[type="text"] {
    width: 100%;
    background: #ebebeb;
    border-radius: 32px;
    border: none;
    padding: 20px 70px;
}
.chat-input button{
    position: absolute;
    top: 7px;
    right: 7px;
    border: none;
    padding: 0;
    background: transparent;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 70px;
    border-radius: 50%;
}
.chat-input button span{
    font-size: 32px;
}
@media only screen and (max-width:768px) {
    .chat-window .user-list {
        width: 250px;
        min-width: 250px;
    }
}
@media only screen and (max-width:600px) {
    .chat-window .user-list {
        width: 100px;
        min-width: 100px;
    }
    .uname {
        display: none;
    }
}
.msg-loading {
    width: 100%;
    height: 100%;
    padding: 10px;
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    color: #ccc;
    transition: 0.3s linear;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.4);
    align-items: center;
    justify-content: center;
    z-index: 99;
}
.loaders {
    width: 48px;
    height: 48px;
    border: 5px solid #ededed;
    border-bottom-color: #90278e;
    border-radius: 50%;
    display: inline-block;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
.name-pro {
    position: relative;
    width: auto;
    margin: 0 auto !important;
    text-align: center;
}
.name-pro h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    padding: 0 20px;
    position: relative;
    padding-top: 10px;
    max-width: 100%;
    line-height:34px;
}
.name-pro span {
    position: absolute;
    top: 0px;
    right: 0px;
}
@keyframes rotation{
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.d-none { display: none; }

.not-found{
    margin: 40px auto 0;
    font-size: larger;
    font-weight: 600;
}
.myProfile{
    margin-top: 30px;
    a{
        font-size: 18px;
        font-weight: 600;
        color: #91278f;
    }
}
div#editdatetime .datespick {
    width: 60%;
    margin: 0 auto;
}


#selectedDateTime{
    font-weight: 600;
}
.upcomingNotStarted{
    font-weight: 400;
}
.chat-dheading .material-symbols-outlined{
    cursor: default !important;
}
.not_found_conversation{
    font-weight: 500;
    margin: 40px auto 0;
    font-size: 18px;
    text-align: center;
}
fieldset#about_me_part .form-group textarea + label, fieldset#about_me_part .form-group textarea:not(:placeholder-shown) + label {
    font-style: normal;
}
fieldset#about_me_part .form-group label.form-label {
    font-style: italic;
}
.ml-2{
    margin-left: 20px;
}


.noti-list-page .notifications-list {
    border: 1px solid #E7E6E7;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 24px;
    gap: 20px;
    min-height: 96px;
}

.noti-list-page .noti-short-desc p {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 0;
    color: #251C25;
    overflow: none;
    white-space: unset;
}
/* Success and cancel Page CSS */

.success.payment {
    text-align: center;
    border: 1px solid #2cc96e;
    border-radius: 8px;
    padding: 40px 30px;
    background: #d1ffe1;
}
.failed.payment {
    text-align: center;
    border: 1px solid #f45757;
    border-radius: 8px;
    padding: 40px 30px;
    background: #ffd8d8;
}
.payment img {
    width: 200px;
    max-width: 100%;
    margin: 0 auto;
    height: 200px;
    border: 1px solid #2ecb71;
    border-radius: 50%;
    padding: 0px;
    margin-bottom: 20px;
    background: #fff;
    object-fit: cover;
}
.failed.payment img{
    border: 1px solid #f45757;
}
.success h1 {
    color: #2ac76d;
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.failed h1 {
    color: #f45757;
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.success p {
    font-size: 20px;
    color: #545454;
    margin-bottom: 0;
}
.failed p {
    font-size: 20px;
    color: #545454;
    margin-bottom: 0;
}
.payment {
    margin: 100px 0;
}
.dash-noti {
    height: 460px;
    overflow: auto;
    padding-right:30px;
    padding-left:6px;
    padding-top:3px;
}
.dash-noti::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
    border-radius: 4px;
}
.dash-noti::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(83, 83, 83, 0.07);
    background-color: #f1f1f1;
    border-radius: 4px;
}
.dash-noti::-webkit-scrollbar {
    width: 6px;
    background-color: #f1f1f1;
    border-radius: 4px;
}
.dash-noti::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 4px;
}

div#viewProfilePic .modal-header{
    padding: 1rem 1rem 0rem 1rem;
}
div#viewProfilePic .account-profile{
    width: 100%;
}
div#viewProfilePic .profile-img img.profile-pic{
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 0;
}
.public-profile p{
    text-align: left;
}

.profile-box ul li.qualificationli span {
    color: #868186;
}
.increase-width{
    min-width: 270px !important;
}
.basicJobSummary{
    cursor: pointer;
}