@font-face {
    font-family: 'ManropeVariable';
    src: url('../font/Manrope-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 800;
    /* Range */
    font-style: normal;
}



* {
    font-family: 'ManropeVariable', sans-serif;
}

.container {
    max-width: 1226px;
}

header {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

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

.header-logo {
    width: 130px;
}

.header-section .nav-link {
    color: rgb(0 0 0 / 69%) !important;
    font-weight: 500;
}

.header-section .nav-link.active {
    color: #006837 !important;
}

.header-section .nav-icons i {
    font-size: 18px;
    display: block;
}

.header-section .nav-icons span {
    font-size: 11px;
    display: block;
    text-transform: uppercase;
}

.header-section .navbar-expand-lg .navbar-nav .nav-link {
    /* padding-right: 35px;
    padding-left: 35px; */
    font-size: 14px;
}

.header-section li.nav-item {
    margin-left: 25px;
    margin-right: 25px;
}

.nav-icons a {
    color: rgb(0 0 0 / 69%);
    font-weight: 600;
}

.border-hover-animation {
    position: relative;
    display: inline-block;
    padding: 6px 2px;
    transition: 0.3s ease;
}

/* Letter spacing on hover */
.border-hover-animation:hover {
    /* letter-spacing: 2px; */
    color: #006837 !important;
}

/* Bottom border line (hidden initially) */
.border-hover-animation::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, #9ee1cb, #016837);
    transition: 0.4s ease;
}

/* Line grows from left → right */
.border-hover-animation:hover::after {
    width: 100%;
}





/* .nav-icons .bi-search::before {
    content: "\f52a";
    font-weight: 600 !important;
}

.nav-icons .bi-person::before {
    content: "\f4e1";
    font-weight: 600 !important;
} */

/* footer */

.footer {
    padding: 55px 0 50px;
    border-top: 1px solid rgba(187, 187, 187, 1);
}

.footer .social-icons a {
    display: inline-block;
    transition: all 0.3s ease;
}

.footer .social-icons i {
    font-size: 20px;
    margin-right: 10px;
    color: #fff;
    background: rgba(46, 142, 97, 1);
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.footer .social-icons a:hover i {
    background: rgba(11, 127, 73, 1);
    transform: rotate(360deg);
    border-radius: 50%;
}

.social-icons a {
    text-decoration: none;
}

.footer .footer-links li {
    list-style: none;
    margin-bottom: 10px;
}

.footer .footer-links a {
    color: rgba(97, 94, 91, 1);
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
}

.footer .footer-links a::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0B7F49;
    transition: width 0.3s ease;
}

.footer .footer-links a:hover {
    color: #0B7F49;
    margin-left: 5px;
    transform: translateX(3px);
}

.footer .footer-links a:hover::after {
    width: 100%;
}

.btn-green {
    background: linear-gradient(264.16deg, #11824D -0.17%, #509B78 131.02%);
    color: white;
    border-radius: 6px;
    padding: 15px 30px;
    font-weight: 700;
}

.app-store-buttons img {
    height: 45px;
    margin-right: 10px;
}

.p-width {
    color: rgba(97, 94, 91, 1);
    font-size: 17px;
    font-weight: 500;
    margin-top: 35px;
    margin-bottom: 45px;
    width: 75%;
}

p.copyright-text {
    color: black;
    font-size: 15px;
    font-weight: 500;
}

img.footer-logo {
    width: 174px;
    margin-top: -25px;
    margin-left: -20px;
}

.footer-link-head {
    font-size: 20px;
    color: rgba(32, 32, 32, 1);
    /* font-weight: 400; */
}

ul.footer-links {
    padding-left: 0;
}

section.copy-right {
    border-top: 1px solid rgba(230, 230, 230, 1);
}

section.copy-right .container p {
    color: rgba(32, 32, 32, 1);
    /* margin-bottom: 20px; */
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    padding-top: 20px;
    /* border-top: 1px solid rgba(230, 230, 230, 1); */
}

.footer-bottom {
    margin-top: 50px;
    display: grid;
    grid-template-columns: 515px 308px 377px;
}

.footer-location-details p {
    width: 65%;
    color: rgba(97, 94, 91, 1);
    font-size: 15px;
}

.footer-location-details h6 {
    font-size: 19px;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 10px;
}

.app-store-buttons {
    display: flex;
    gap: 20px;
}

.app-store-btn-flex {
    color: white;
    display: flex;
    padding: 6px 21px;
    border-radius: 10px;
    gap: 10px;
    background: #1C1B1E;
    align-items: flex-end;
    text-decoration: none;
}

.app-store-btn-flex i {
    font-size: 30px;
}

.app-store-btn-flex p {
    font-size: 10px;
    margin-bottom: 0px;
}

.nav-icons img {
    margin-bottom: 5px;
    width: 20px;
}

/* about us page */
.about-us-banner .container {
    max-width: 1320px;
}

.about-us-banner {
    background-image: url(../image/about-us-banner.webp);
    position: relative;
    padding: 9% 0px;
    background-repeat: no-repeat;
    background-size: cover;
}


.about-us-banner-content h1 {
    font-size: 45px;
    font-weight: 600;
    color: black;
    line-height: 60px;
    margin-bottom: 40px;
}

.about-us-banner-content p {
    font-size: 17px;
    color: rgba(56, 56, 56, 1);
    line-height: 1.6;
    font-weight: 400;
}

@media (max-width: 768px) {
    .about-us-banner-content h1 {
        font-size: 2.2rem;
    }

    .about-us-banner-content p {
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    .about-us-banner-content h1 {
        font-size: 1.8rem;
        line-height: 35px;
    }
}


/* vision mission section */

.vision-mission-section {
    position: relative;
    /* overflow: hidden; */
    margin-bottom: 20%;
}

.vm-image {
    width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;
}

.vm-contents {
    position: absolute;
    left: 120px;
    right: 120px;
    background-image: url(../image/vm-img.png);
    padding: 52px 60px 55px;
    bottom: -50%;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 375px;
    height: auto;
    border-radius: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.vision-section p {
    margin-bottom: 15px !important;
}

.vision-mission-grid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 3rem;
    align-items: start;
}

.divider {
    width: 3px;
    height: 80%;
    background: rgba(68, 196, 136, 1);
    justify-self: center;
    margin-left: -52px;
    margin-top: 40px;
}

.vision-mission-section h2 {
    font-size: 55px;
    /* font-weight: 600; */
    color: white;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.vision-mission-section p {
    color: white;
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
}

.mission-points {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: -2rem;
}

.mission-points li {
    color: white;
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 0px;
    position: relative;
    padding-left: 15px;
}

.mission-points li::before {
    content: "•";
    color: white;
    font-weight: bold;
    position: absolute;
    left: 0;
}

@media (max-width: 576px) {


    .vm-image {
        height: auto;
    }
}

@media (max-width: 992px) {
    .vision-mission-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .divider {
        display: none;
    }

    .overlay-content {
        margin-top: 30px;
        padding: 2rem 1.5rem 1.5rem;
    }

    .vision-mission-section h2 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .hero-image {
        height: 400px;
    }

    .overlay-content {
        margin-top: 50px;
    }

    .vision-mission-section h2 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    .vision-mission-section p,
    .mission-points li {
        font-size: 0.9rem;
    }
}

/* our team */

.team-section {
    padding: 30px 0px;
}

.team-title {
    font-size: 48px;
    margin-bottom: 35px;
    font-weight: 500;
    text-align: center;
    color: #000000;
    font-size: 37px;
    margin-bottom: 15px;
    text-align: center;
}

p.team-description {
    margin-bottom: 60px;
    margin-top: 20px;
    text-align: center;
    width: 72%;
    margin-right: auto;
    margin-left: auto;
}

/* .team-description {
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    color: #383838;
    margin: 0 auto 85px;
    max-width: 900px;
    padding: 0 16px;
    line-height: 1.7;
} */

/* Tablet */
@media (max-width: 768px) {
    .team-description {
        font-size: 15px;
        margin-bottom: 60px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .team-description {
        font-size: 14px;
        margin-bottom: 40px;
    }
}


.team-card {
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff;
    text-align: center;
    position: relative;
    transition: 0.3s ease;
    /* width: 92%; */
}

.team-card img.team-photo {
    width: 95%;
    height: 330px;
    display: block;
    border-radius: 30px;
    object-fit: cover;
}

.overlay-hover {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #007B41, #73737300 70%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 1;
    border-radius: 29px;
    width: 95%;
}

.linkedin-hover {
    position: absolute;
    bottom: 25px;
    right: 35px;
    width: 30px;
    height: 30px;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    color: white;
}

a.linkedin-hover i {
    font-size: 23px;
}

a.linkedin-hover:hover {
    color: white;
}

.team-card:hover .overlay-hover {
    opacity: 1;
}

.team-card:hover .linkedin-hover {
    opacity: 1;
}

.team-card-body {
    padding: 16px 12px;
    background-color: #fff;
    position: relative;
    z-index: 2;
    width: 95%;
}

.team-name {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 4px;
}

.team-role {
    font-size: 17px;
    color: #6F6F6F;
    font-weight: 500;
}

section.our-team-section {
    padding-top: 90px;
}

@media (max-width: 767.98px) {
    .team-card img.team-photo {
        height: 280px;
    }
}

.partnership-content {
    margin: 0 auto;
    position: relative;
    text-align: center;
    padding-top: 100px;
}

.partnership-title {
    font-size: 45px;
    font-weight: 600;
    color: black;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.partnership-subtitle {
    font-size: 39px;
    font-weight: 500;
    color: black;
    margin-bottom: 55px;
    line-height: 1.2;
}

.cta-button {
    background: #0B7F49;
    color: white;
    padding: 15px 33px;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(45, 125, 62, 0.3);
    text-decoration: none;
    display: inline-block;
}

.cta-button:hover {
    color: #ffffff;          /* prevent blue on hover */
    text-decoration: none;
    background-color: #218838;
}

section.hero-partnership {
    background-image: url(../image/partnership-bg.webp);
    padding: 100px 0px;
    background-repeat: no-repeat;
    background-size: cover;
    height: 670px;
    margin-top: 70px;
}

.partners-brand {
    margin-top: 100px;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}

section.hero-partnership .owl-carousel .owl-item img {
    width: 210px !important;
    opacity: 0.6;
    height: 53px;
}

/* index page */

section.banner-section h1 {
    font-size: 43px;
    line-height: 58px;
    font-weight: 500;
    width: 500px;
}

section.banner-section {
    padding-top: 40px;
    padding-bottom: 70px;
    background-image: url(../image/banner-img.jpg);
    background-position: right;
    position: relative;
}

.head-width {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
}

.banner-img img {
    width: 95%;
}

section.banner-section p {
    width: 80%;
    margin-top: 25px;
    font-size: 18px;
    color: black;
    font-weight: 400;
}

.button-margin {
    position: absolute;
    bottom: 85px;
    display: flex;
    gap: 18px;
}

.button-margin .btn:focus {
    outline: 0;
    box-shadow: none;
}

.button-margin .btn-success {
    color: #fff;
    background-color: #0B7F49;
    border-color: #0B7F49;
    font-weight: 600;
    font-size: 18px;
    border-radius: 7px;
    padding: 13px 25px;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
}

.button-margin .btn-outline-secondary {
    color: rgba(59, 80, 83, 1);
    border-color: white;
    background: white;
    font-weight: 600;
    font-size: 18px;
    border-radius: 7px;
    padding: 13px 25px;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.button-margin .btn-success::before,
.button-margin .btn-outline-secondary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(144deg, #a7d9c2, #198552 50%, #369166);
    transition: all 0.5s ease;
    z-index: 0;
}

.button-margin .btn-success:hover::before {
    left: 0;
}

.button-margin .btn-success:hover {
    color: #fff;
}

.button-margin .btn-outline-secondary:hover::before {
    left: 0;
}

.button-margin .btn-outline-secondary:hover {
    color: #fff;
    border-color: #016837;
}

.button-margin .btn-success span,
.button-margin .btn-outline-secondary span {
    position: relative;
    z-index: 1;
}

.feature-card {
    display: flex;
    align-items: center;
    background: #ffffffe0;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 27px 6px 27px 30px;
    width: 320px;
    gap: 15px;

    /* Animation for top-to-bottom */
    animation: moveUpDown 3s ease-in-out infinite alternate;
}

@keyframes moveUpDown {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(20px);
    }
}



.card-position-1 {
    position: absolute;
    top: 59%;
    left: -107px;
}

.card-position-2 {
    position: absolute;
    top: 47%;
    right: -60px;
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-right: 15px;
}

.feature-card img {
    width: 75px;
}

.banner-right {
    position: relative;
}

.feature-card h6 {
    font-size: 21px;
    font-weight: 600;
}

/* why glokonnect */

.gk-section {
    background-image: url(../image/gk-bg.webp);
    padding: 5% 0px;
    background-size: cover;
    background-repeat: no-repeat;
}

.gk-box {
    background: #ffffff8a;
    border-radius: 40px;
    text-align: center;
    padding: 65px 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.5s ease;
    width: 85%;
    border: 2px solid white;
    height: 345px;
}

.gk-box:hover {
    transform: translateY(-35px) scale(1.03);
}


.gk-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.gk-text {
    margin-bottom: 0;
    font-weight: 500;
    margin-top: 50px;
    font-size: 17px;
    color: rgba(0, 0, 0, 1);
}

.gk-icon-wrap img {
    width: 110px;
}

.gk-contents {
    margin-top: 100px;
}

.head-title {
    font-size: 40px;
    margin-bottom: 55px;
    text-align: center;
    line-height: 55px;
}

/* service */

.service-card {
    position: relative;
    height: 350px;
    border-radius: 30px;
    overflow: hidden;
    color: white;
    text-align: left;
    width: 88%;
}

.service-card .bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.service-card h3 {
    position: relative;
    z-index: 2;
    padding: 40px 40px;
    font-size: 35px;
    font-weight: 500;
}

.service-card .icon-image {
    position: absolute;
    bottom: -5px;
    right: -9px;
    width: 100%;
    z-index: 2;
    transition: transform 0.4s ease-in-out;
}

.service-card:hover .icon-image {
    transform: scale(1.1);
}

section.gk-service-section {
    background: #EEF8E8;
    padding: 7% 0px 10%;
}

.service-margin {
    margin-top: 70px;
}

/* explore salons */

.explore-salons {
    padding: 60px 0px 9%;
    background-color: white;
}

.explore-salons .nav-tabs {
    border: none;
    justify-content: flex-end;
    margin-bottom: 0px;
}

.explore-salons .nav-tabs .nav-link {
    border: none;
    border-radius: 25px;
    padding: 7px 27px;
    margin: 0 10px;
    background-color: white;
    color: rgba(132, 132, 132, 1);
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 19px;
}

.explore-salons .nav-tabs .nav-link:hover {
    border-color: #28a745;
    color: #28a745;
}

.explore-salons .nav-tabs .nav-link.active {
    color: black;
    font-weight: 600;
    border: 3px solid rgba(11, 127, 73, 1);
}

.salon-image {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
}

.salon-image img {
    width: 589px;
    height: 383px;
    object-fit: cover;
}

.explore-salons .fade-in {
    animation: fadeIn 0.5s ease-in;
}

.heading-start {
    text-align: start;
    margin-bottom: 10px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@media (max-width: 768px) {

    .explore-salons .nav-tabs {
        justify-content: center;
        flex-wrap: wrap;
    }

    .explore-salons .nav-tabs .nav-link {
        padding: 7px 20px;
        font-size: 16px;
        margin: 15px 0px 0px;
    }

    .salon-image {
        height: 300px;
        margin-bottom: 20px;
    }
}

/* why choose us */

.why-choose-section {
    background-color: #ECF7E7;
    padding: 7% 0px 7%;
}


.why-choose-card {
    text-align: center;
    margin-bottom: 40px;
    transition: 0.5s;
}

.why-choose-card .why-choose-icon-wrapper {
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
}

.why-choose-card:hover {
    transform: translateY(-15px);
}

.why-choose-icon-wrapper img {
    width: 70px;

}

.why-choose-title {
    font-size: 22px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 8px;
}

.why-choose-description {
    font-size: 15px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

.why-choose-margin {
    margin-top: 70px;
}

@media (max-width: 768px) {
    .why-choose-card {
        margin-bottom: 60px;
    }
}

/* our partners */

.our-partners-section {
    padding: 115px 0px 9%;
    background-color: white;
}

.our-partners-section .nav-tabs {
    border: none;
    justify-content: center;
    margin-bottom: 0px;
}

.our-partners-section .nav-tabs .nav-link {
    border: none;
    border-radius: 25px;
    padding: 7px 27px;
    margin: 0 10px;
    background-color: white;
    color: rgba(132, 132, 132, 1);
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 20px;
}

.our-partners-section .nav-tabs .nav-link:hover {
    border-color: rgba(11, 127, 73, 1);
    color: rgba(11, 127, 73, 1);
}

.our-partners-section .nav-tabs .nav-link.active {
    border: 3px solid rgba(11, 127, 73, 1);
    color: black;
    font-weight: 600;
}

.our-partners-section .fade-in {
    animation: fadeIn 0.5s ease-in;
}

.our-partners-section .head-title {
    margin-bottom: 20px;
}

/* .our-partners-section .owl-carousel .owl-item img {
    width: 225px !important;
    height: 62px;
} */

div#OurPartnerTabsContent {
    margin-top: 60px;
}

/* .our-partners-section .owl-item {
    width: 296px !important;
} */

/* testimonials */
.testimonial-section {
    background-color: #A7D9C2;
    padding: 4% 0px 7%;
}

.testimonial-card {
    background: #fff;
    border-radius: 15px;
    padding: 15px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-text {
    font-size: 15px;
    margin-bottom: 20px;
}

.testimonial-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.testimonial-user {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.rating-stars i {
    color: #0B7F49;
}

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

.testimonial-user .name {
    font-weight: 500;
    margin: 0;
    font-size: 19px;
}

.testimonial-user .date {
    font-size: 15px;
    color: #999;
    margin-bottom: 0px;
}

/* .testimonial-section .owl-item {
    width: 380px !important;
    margin-right: 25px !important;
} */

.stars img {
    width: 100px !important;
}

/* contact us page */

.contact-section {
    display: flex;
    align-items: center;
    background: #0B7F49;
    padding-top: 25px;
    padding-bottom: 50px;
}

.contact-info {
    color: white;
}

.contact-form {
    background-color: white;
    border-radius: 20px;
    padding: 2rem;
}

.contact-section .btn-green {
    background: rgba(11, 127, 73, 1);
    color: white;
    padding: 12px 20px;
    font-weight: 400;
    font-size: 13px;
    margin-top: 8px;
    border-radius: 5px;
}

.contact-section .btn:focus {
    outline: 0;
    box-shadow: none;
}


/* .contact-section .btn-green:hover {
    background-color: #005e2f;
    color: white;
} */

.contact-info h2 {
    font-size: 50px;
}

p.contact-content {
    width: 65%;
    font-size: 18px;
    margin-top: 30px;
    font-weight: 300;
}

.contact-details {
    margin-top: 85px;
}

.contact-details p {
    font-size: 17px;
    font-weight: 300;
}

.contact-form h5 {
    font-size: 25px;
    line-height: 33px;
}

.contact-form form label {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 5px;
}

.contact-form form {
    margin-top: 30px;
}

.contact-form form .form-control {
    padding: 16px 15px;
    border-radius: 9px;
    border-color: #D9D9D9;
    color: black;
    font-size: 14px;
}

.contact-form form .form-control::placeholder {
    color: #9A9A9A;
    font-size: 11px;

}

.contact-form form .form-control:focus {
    outline: 0;
    box-shadow: none;
}

/* Slide-in Overlay */
#menuOverlay {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(20, 20, 20, 0.95);
    z-index: 9999;
    transition: left 0.5s ease;
}

#menuOverlay.active {
    left: 0;
}

/* Menu Content */
.overlay-content {
    text-align: center;
}

.overlay-content a {
    display: block;
    font-size: 1.8rem;
    text-decoration: none;
    color: white;
    margin: 15px 0;
    font-weight: 500;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.5s ease forwards;
}

#menuOverlay .bi-x-lg::before {
    content: "\f659";
    color: black;
    background: #0000001c;
    padding: 10px 9px 8px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600 !important;
}

.overlay-content a.active {
    background: #2e8b57;
    color: white;
    font-weight: 600;
}

.overlay-content a:nth-child(1) {
    animation-delay: 0.2s;
}

.overlay-content a:nth-child(2) {
    animation-delay: 0.35s;
}

.overlay-content a:nth-child(3) {
    animation-delay: 0.5s;
}

.overlay-content a:nth-child(4) {
    animation-delay: 0.65s;
}

.overlay-content a:nth-child(5) {
    animation-delay: 0.8s;
}

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

/* Close Button */
.close-btn {
    position: absolute;
    top: 20px;
    right: 15px;
    font-size: 1.5rem;
    background: transparent;
    border: none;
    color: white;
}

.mobile-menu {
    display: none;
}

/* sign up */

.back-btn {
    font-size: 35px;
    color: #000;
    text-decoration: none;
}

.toggle-btn {
    padding: 6px 20px;
    font-weight: 500;
    font-size: 14px;
}

section.sign-up-section .nav-pills .nav-link {
    background: 0 0;
    border: 2px solid #656565;
    border-radius: 30px;
    color: #656565;
    padding: 5px 14px;
}

section.sign-up-section .nav-pills .nav-link.active,
section.sign-up-section .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #0B7F49;
}

.toggle-btn.active {
    background-color: #0b8c43;
    color: #fff;
    border: none;
}

section.sign-up-section .nav {
    gap: 15px;
}

.toggle-btn.inactive {
    background-color: #fff;
    color: #000;
    border: 1px solid #ccc;
}

.signup-form {
    max-width: 350px;
    margin-top: 40px;
}

p.signup-content {
    color: #969696;
    margin-top: 10px;
}

.form-floating>.form-control,
.form-floating>.form-control:focus {
    border-radius: 8px;
    border: 1px solid #ddd;
    height: 56px;
    padding: 1rem .75rem;
    box-shadow: none;
    margin-bottom: 18px;
}

/* Default label style */
.form-floating>label {
    position: absolute;
    top: 0;
    left: 12px;
    height: auto;
    padding: 15px 7px;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: top .1s ease-in-out, color .1s ease-in-out, font-size .1s ease-in-out;
    font-size: 16px;
    color: #9A9A9A;
    /* grey when not focused */
    /* line-height: 1.2; */
}

/* Float the label when focused or filled */
.form-floating>input:focus~label,
.form-floating>input:not(:placeholder-shown)~label,
.form-floating>textarea:focus~label,
.form-floating>textarea:not(:placeholder-shown)~label {
    top: -3px;
    background: white;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 15px;
    font-weight: 500;
}

/* Color change only on focus */
.form-floating>input:focus~label,
.form-floating>textarea:focus~label {
    color: #367AFF;
    /* blue on focus only */
}

.form-floating>.form-control:not(:placeholder-shown):not(:focus) {
    border: 2px solid #ddd;
}


.password-wrapper .toggle-password .bi-eye-slash::before,
.password-wrapper .toggle-password .bi-eye::before {
    font-size: 20px;
    color: #9A9A9A;
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    opacity: 1;
}


.signup-form form {
    margin-top: 30px;
}

.form-floating>.form-control:focus {
    /* border-color: #367AFF; */
    outline: none;
    border: 2px solid #367AFF;
}

.form-floating>.form-control:focus,
.form-floating>.form-control:not(:placeholder-shown) {
    padding: 1rem .75rem;
}

.password-wrapper {
    position: relative;
}

.password-wrapper .toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    z-index: 5;
}

.signup-btn {
    background-color: #0B7F49;
    color: #fff;
    height: 50px;
    border-radius: 8px;
    font-weight: 500;
    border: none;
}

button.btn.signup-btn:focus {
    outline: 0;
    box-shadow: none;
}

.google-btn {
    height: 50px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #E6E8E7;
}

button.btn.google-btn:hover {
    color: black;
}

.right-text h2 {
    position: absolute;
    bottom: 25px;
    left: 40px;
    color: white;
    width: 70%;
    font-size: 60px;
}

section.sign-up-section {
    padding-top: 1%;
    /* padding-bottom: 5%; */
}

.signup-form hr {
    color: #D9D9D9;
    background-color: #D9D9D9;
    opacity: 1;
}

.back-button {
    margin-left: 50px;
    margin-bottom: -10px;
}

.btn:hover {
    color: #ffffff;
}

.app-store-buttons a:hover {
    color: #ffffff;
}

.marquee-wrapper {
    overflow: hidden;
    width: 100%;
}

.marquee-content {
    display: flex;
    white-space: nowrap;
}

.partner-img {
    flex: 0 0 auto;
}

.partner-img img {
    height: 50px;
    display: block;
    user-select: none;
    width: 70% !important;
}

.right-section {
    position: absolute;
    top: 50px;
    width: 43%;
    height: 650px;
    border-radius: 40px;
    background-repeat: no-repeat;
    background-position: top;
    margin-left: -100px;
}

.right-section-img1 {
    background: url(../image/sign-up-img.png);
}

.right-section-img2 {
    background: url(../image/sign-up-img2.png);
}

.right-section-img3 {
    background: url(../image/login-img.webp);
}

.sign-in-div p {
    color: #212529a1;
    font-size: 15px;
}

.sign-in-div {
    margin-top: 10px;
    text-align: center;
}

.sign-in-div a {
    color: #367AFF;
    font-weight: 600;
    text-decoration-thickness: 1px;
    text-decoration-color: #367aff73;
}

.signup-form h2 {
    font-weight: 700;
    font-size: 35px;
}

/* service dashboard */

/* Sidebar Tabs */
section.service-dashboard .nav-pills .nav-link {
    border-radius: 0;
    color: #00000078;
    font-weight: 400;
    padding: 12px 16px;
    text-align: left;
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
    font-size: 15px;
    margin-bottom: 20px;
}



section.service-dashboard .nav-pills .nav-link.active,
section.service-dashboard .nav-pills .show>.nav-link {
    color: #000000;
    background-color: #beeccb00;
    font-weight: 600;
    font-size: 17px;
}

section.service-dashboard .nav-pills .nav-link span {
    padding: 2px 11px;
    border-radius: 50%;
    background: #fdfdfd4f;
    font-size: 20px;
    font-weight: 600;
    border: 2px solid #ffffff00;
    margin-right: 10px;
}

/* Form Section */
section.service-dashboard .form-section {
    padding: 40px 20px 20px 40px;
}

section.service-dashboard .form-section h4 {
    font-weight: 500;
    margin-bottom: 18px;
    color: #202020;
    font-size: 37px;
}

section.service-dashboard .form-section p {
    color: rgba(115, 119, 145, 1);
    font-size: 17px;
}

section.service-dashboard .form-label {
    font-weight: 500;
    color: black;
    font-size: 14px;
    margin-bottom: 8px;
}

section.service-dashboard .form-control {
    border-radius: 8px;
    border: 1px solid #ced4da;
    padding: 15px 13px;
    font-size: 14px;
    width: 100%;
    color: black;
    font-weight: 500;
}

section.service-dashboard .form-control::placeholder,
section.service-dashboard .form-select::placeholder {
    font-weight: 400;
    font-size: 13px;
    color: #212529;
}

section.service-dashboard .form-select {
    width: 100%;
    border-radius: 8px !important;
    border: 1px solid #ced4da;
    font-size: 14px;
    padding: 17px 13px;
    color: black;
    font-weight: 500;
}

section.service-dashboard .form-group {
    margin-top: 27px;
}

section.service-dashboard form {
    width: 75%;
    margin-top: 30px;
}


section.service-dashboard .form-control:focus,
section.service-dashboard .form-select:focus {
    border-color: none;
    box-shadow: none;
}

/* Button Styling */
section.service-dashboard .btn-success {
    background-color: #01a159;
    padding: 10px 40px;
    font-weight: 600;
    border-radius: 6px;
    font-size: 15px;
    color: #fff;
    border: 1.71px solid #01a159;
    transition: all 0.3s ease;
    cursor: pointer;
}

section.service-dashboard .btn-success:focus {
    outline: 0;
    box-shadow: none;
}

section.service-dashboard .btn-success:hover {
    background-color: #65cf9a;
    border-color: #c0eccb70;
    color: white;
}

section.service-dashboard .submit-btn {
    background-color: #198754;
    border-color: #198754;
    padding: 10px 20px;
    font-weight: 500;
    border-radius: 6px;
    font-size: 14px;
}

section.service-dashboard .submit-btn:hover {
    background-color: #198754;
    border-color: #198754;
    color: white;
}

section.service-dashboard {
    background: #ECF7E7;
    padding-top: 35px;
    padding-bottom: 45px;
}

.service-dashboard-contents {
    background-color: #fff;
    padding: 20px 15px;
    border-radius: 25px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    position: relative;
}

.service-dashboard-contents .row {
    display: flex;
    align-items: stretch;
    min-height: 100dvh;
}

.service-dashboard-sidemenu {
    width: 100%;
    background-image: url(../image/salon-dashboard-bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 45px 20px 20px;
    border-radius: 20px;
    position: sticky;
    top: 0;
    height: calc(100dvh - 0px);
    overflow-y: auto;
    scrollbar-width: none;
}

.service-dashboard-contents div#tabContent {
    flex: 1;
    min-height: 100dvh;
    position: relative;
}

section.service-dashboard .col-md-3 {
    width: 30%;
}

section.service-dashboard .col-md-9 {
    width: 70%;
}

section.service-dashboard .nav-pills .nav-link.active span {
    /* color: red; */
    background: white;
    font-weight: 700;
    border-color: #0B7F49;
    padding: 4px 13px;
}

.nxt-step-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}

/* service */

.service-section-banner .search-bar {
    max-width: 565px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 5px 5px 5px 30px;
    display: flex;
    align-items: center;
    margin-top: 55px;
    border: 1.84px solid rgba(139, 139, 139, 1);
    box-sizing: border-box;
}

.service-section-banner .search-bar input {
    border: none;
    box-shadow: none;
    outline: none;
    flex: 1;
    border-radius: 50px;
    padding: 10px 15px;
    font-size: 14px;
    /* background: rgba(132, 132, 132, 1); */
    color: rgba(132, 132, 132, 1);
}

.service-section-banner .search-bar .search-btn {
    border-radius: 50px;
    padding: 9px 26px;
    font-size: 14px;
    background: rgba(36, 36, 36, 1);
    color: white;
}

.service-section-banner .search-bar .btn:focus {
    outline: 0;
    box-shadow: none;
}

.service-section-banner .search-bar .search-btn:hover {
    /* background: #13ae6b; */
    background-color: #0f773f;
}

.service-section-banner .icon {
    color: #666;
}

.service-section-banner {
    background-image: url(../image/service-bg.png);
    /* height: 724px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 8%;
    padding-bottom: 10%;
    /* border-radius: 30px; */
    margin-right: 30px;
    margin-left: 30px;
    margin-top: 35px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.service-section-banner h1 {
    width: 766px;
    max-width: 100%;
    font-size: 57px;
    text-align: center;
    line-height: 77px;
    box-sizing: border-box;
}

.search-icon {
    display: flex;
    align-items: center;
}

.search-icon .btn-clear-search {
    padding: 0px !important;
}


.popular-service-card {
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease-in-out;
}

.popular-service-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.popular-service-card .card-body {
    padding: 25px 30px;
}

.popular-service-card h5 {
    font-size: 18px;
    margin: 0;
    font-weight: 500;
}

.popular-service-card a {
    color: black;
    text-decoration: none;
}

section.popular-services {
    background: rgba(236, 247, 231, 1);
    margin-top: 5px;
    padding-top: 90px;
    padding-bottom: 35px;
}

h1.section-title {
    font-size: 38px;
    /* font-weight: 600; */
}

.popular-service-list {
    margin-top: 45px;
}

.popular-service-list .col-lg-4.col-md-6.col-sm-12 {
    margin-bottom: 50px;
}

.search-location {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
    padding-left: 25px;
    margin-left: 15px;
}

.search-location::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 28px;
    background: rgba(139, 139, 139, 1);
}

.offer-badge {
    position: absolute;
    top: 0px;
    left: 0;
    color: #fff;
    font-weight: 600;
    padding: 7px 20px;
    border-radius: 15px 0 15px 0;
    font-size: 22px;
    background: linear-gradient(117.51deg, #0B7F49 38.45%, #47C98C 123.14%);
}

span.off-bold {
    font-weight: 400;
}

.custom-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.custom-card-title {
    font-size: 17px;
}

.custom-card {
    width: 100%;
    max-width: 100%;
    border-radius: 15px;
    overflow: hidden;
    border: 1.47px solid rgba(148, 148, 148, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.custom-card img {
    height: 220px;
    object-fit: cover;
}

.service-details-card .category-btn {
    border: 1px solid #444 !important;
    border-radius: 20px !important;
    padding: 2px 12px !important;
    font-size: 13px !important;
    background: #fff;
    margin-top: 5px;
}

.rating {
    font-size: 11px;
}

.rating-div {
    gap: 2px;
}

.service-details-card p {
    font-size: 13px;
}

.service-list-details .col-lg-4.col-md-6.col-sm-12 {
    margin-bottom: 33px;
}

.service-details-card span {
    font-size: 13px;
    color: rgba(11, 11, 11, 1);
}

.header-section .dropdown:hover .dropdown-menu {
    display: block;
    /* Show dropdown on hover */
}

.header-section .dropdown-menu {
    min-width: 150px;
    padding: 0px;
    border: none;
}

.header-section .dropdown-toggle::after {
    display: none;
}

.header-section a.dropdown-item {
    display: flex;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 10px;
    font-weight: 700;
    font-size: 14px;
    align-items: center;
}

.header-section .bi-speedometer2::before {
    content: "\f580";
    font-size: 16px;
    margin-right: 8px;
}

.header-section .dropdown-item:focus,
.header-section .dropdown-item:hover {
    color: black;
    background-color: #bfefcd45;
}

li.logout-border {
    border-top: 1px solid #00000017;
}

.header-section ul.dropdown-menu.text-center {
    padding: 0px;
    border: none;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border: 1px solid #0000000a;
    border-left: 3px solid #0f773f !important;
    border-radius: 8px;
}

.header-section .bi-power::before {
    content: "\f4ff";
    font-weight: 600 !important;
    margin-right: 5px;
}

.filter-flex {
    display: flex;
    justify-content: space-between;
}

.filter-flex-1 {
    display: flex;
    gap: 25px;
}

.filter-div .custom-select {
    position: relative;
    padding: 0px !important;
    background: none !important;
    border: none !important;
    display: unset !important;
}

.custom-select select {
    display: none;
    /* hide default select */
}

.select-selected {
    background-color: white;
    padding: 9px 12px;
    cursor: pointer;
    user-select: none;
    width: 205px;
    border: 1px solid rgba(182, 182, 182, 1);
    border-radius: 10px;
    font-size: 15px;
    color: rgba(0, 0, 0, 1);
}

.select-items {
    position: absolute;
    background-color: #fff;
    width: 100%;
    z-index: 99;
    display: none;
    max-height: 150px;
    overflow-y: auto;
    border-radius: 5px;
    margin-top: 2px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.select-items div:hover {
    /* background-color: #47c98c29; */
    color: #0b7f49;
}

.select-items div {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid rgb(182 182 182 / 51%);
    font-weight: 600;
    font-size: 15px;
    transition: 0.5s;
}


.custom-select .select-items div.active {
    color: #0b7f49;
    font-size: 16px;
}

.custom-select .select-items div.active::after {
    content: "\f272";
    font-family: "bootstrap-icons";
    position: absolute;
    right: 10px;
    color: #0b7f49;
    font-weight: bold;
    /* margin-top: 2px; */
    font-size: 19px;
}

.service-details-section {
    padding-top: 20px !important;
}

/* .filter-div {
    margin-bottom: 35px;
} */

button.btn.near-me-btn i {
    margin-right: 7px;
}

button.btn.near-me-btn {
    border: 1px solid rgba(182, 182, 182, 1);
    background: white;
    text-align: left;
    font-size: 14px;
    color: rgba(0, 0, 0, 1);
    padding: 9px 18px 9px 9px;
    border-radius: 10px;
}

.near-me-btn.active {
    background: linear-gradient(117.51deg, #0B7F49 38.45%, #47C98C 123.14%) !important;
    color: #fff !important;
}

.near-me-btn.active i {
    color: #fff;
}

button.btn.near-me-btn:focus {
    outline: 0;
    box-shadow: none;
}

.filterbtn {
    border: 1px solid rgba(182, 182, 182, 1);
    background: white;
    text-align: left;
    font-size: 14px;
    color: rgba(0, 0, 0, 1);
    padding: 9px 13px 9px 10px;
    border-radius: 10px;
}

button.filterbtn img {
    width: 15px;
    margin-right: 5px;
    margin-top: -2px;
}


.filterbtn:focus {
    outline: 0;
    box-shadow: none;
}

.filter-btn {
    position: relative;
    display: inline-block;
}

.filter-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 314px;
    overflow: auto;
    border: none;
    z-index: 1;
    padding: 17px 17px 30px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    margin-top: 2px;
    border-radius: 5px;
    /* right: 0; */
    top: 100%;
}

.filter-content h5 {
    font-size: 17px;
    font-weight: 700;
}

.filter-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.filter-btn a:hover {
    background-color: #ddd;
}

.filter-content.show {
    display: block;
}

/* Mobile and Tablet Filter Dropdown - Slide from Left to Right */
@media (max-width: 991px) {
    .filter-content {
        position: fixed;
        top: 0;
        left: -100%;
        width: 85%;
        max-width: 400px;
        height: 100vh;
        min-width: auto;
        margin-top: 0;
        border-radius: 0;
        z-index: 9999;
        overflow: hidden;
        transition: left 0.3s ease-in-out;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
        padding: 45px 20px;
        display: flex;
        flex-direction: column;

    }

    .filter-bottom-btn {
        position: absolute;
        bottom: 0;
        background: white;
        padding: 15px 30px 15px 0px;
        margin-top: 20px;
        border-top: 1px solid #e0e0e0;
        width: 100%;
    }

    .filter-content.show {
        left: 0;
        display: block;
    }

    /* Add overlay to body when filter is open */
    body.filter-open {
        overflow: hidden;
    }

    body.filter-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        cursor: pointer;
    }

    /* Filter close button for mobile */
    .filter-close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        background: transparent;
        border: none;
        font-size: 24px;
        color: #333;
        cursor: pointer;
        z-index: 10000;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        transition: background-color 0.3s;
    }

    .filter-close-btn:hover {
        background-color: #f0f0f0;
    }

    .filter-close-btn:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(11, 127, 73, 0.3);
    }
}

/* Hide close button on desktop */
@media (min-width: 992px) {
    .filter-close-btn {
        display: none;
    }
}

/* Tablet specific adjustments (601px - 991px) */
@media (min-width: 601px) and (max-width: 991px) {
    .filter-content {
        width: 70%;
        max-width: 350px;
    }

    .service-details-section .section-title {
        font-size: 28px;
    }

    .filter-flex-1 {
        gap: 20px;
    }
}

/* Medium screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .filter-content {
        min-width: 300px;
    }

    /* .select-selected {
        width: 180px;
    } */
}

/* Filter section responsive */
.filter-div {
    margin-bottom: 25px;
}

/* .filter-flex {
        flex-direction: column;
        gap: 15px;
    } */

/* .filter-flex-1 {
        flex-wrap: wrap;
        gap: 15px;
        width: 100%;
    } */

/* .filter-btn {
        width: 100%;
    } */

/* button.filterbtn {
        width: 100%;
        justify-content: center;
    } */

/* .filter-div .custom-select {
        flex: 1;
        min-width: 150px;
    } */

/* .select-selected {
        width: 100%;
        font-size: 14px;
    } */

/* button.btn.near-me-btn {
        width: 100%;
        justify-content: center;
    } */

/* Service details section responsive */
.service-details-section {
    padding-top: 30px !important;
}

.service-details-section .section-title {
    font-size: 24px;
    padding: 0 15px;
}

.service-list-details .custom-card {
    width: 100%;
    margin-bottom: 20px;
}

.service-list-details .custom-card img {
    width: 100%;
    height: 200px;
}

.service-details-card {
    padding: 18px 15px 18px !important;
}

.service-list-details .custom-card a {
    color: black;
    text-decoration: none;
}

/* .custom-card-title {
    font-size: 18px;
} */

.offer-badge {
    font-size: 18px;
    padding: 5px 15px;
}

/* Filter content adjustments for mobile */
.filter-content h5 {
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 15px;
}

/* .filter-content {
        padding-top: 50px;
    } */

.category-list,
.maximum-price,
.venue-type,
.booking-option {
    margin-bottom: 20px;
    padding-bottom: 15px;
}

.filter-bottom-btn {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 15px 0;
    margin-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.filter-bottom-btn button {
    font-size: 15px;
    padding: 10px 20px;
}

@media (max-width: 991px) {
    .filter-bottom-btn {
        position: absolute;
        bottom: 0;
        background: white;
        padding: 15px 30px 15px 0px;
        margin-top: 20px;
        border-top: 1px solid #e0e0e0;
        width: 100%;
    }
}


/* Extra small devices */
@media (max-width: 480px) {
    .filter-content {
        width: 90%;
    }

    .service-details-section .section-title {
        font-size: 20px;
    }

    .filter-flex-1 {
        flex-direction: column;
    }

    .filter-div .custom-select {
        width: 100%;
    }

    .select-selected {
        width: 100%;
    }
}

.category-list-details div {
    margin-bottom: 10px;
}

.category-list-details {
    margin-left: 15px;
    margin-top: 11px;
}

.category-list-details label.form-check-label {
    font-size: 15px;
}

.category-list-details .form-check-input:checked {
    background-color: #0b7f49;
    border-color: #0b7f49;
}

.category-list-details .form-check-input:focus {
    outline: 0;
    box-shadow: none;
    border-color: #0b7f49;
}

.range-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: linear-gradient(90deg, #04AA6D 50%, #d3d3d3 50%);
    outline: none;
    transition: background 0.3s ease;
}

/* Webkit browsers (Chrome, Safari, Edge) */
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #04AA6D;
    border: 2px solid white;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Firefox */
.range-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #04AA6D;
    border: 2px solid white;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.range-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
}

.range-slider::-moz-range-track {
    height: 8px;
    border-radius: 5px;
    background: #d3d3d3;
}

/* Firefox */
.range-slider::-moz-range-track {
    height: 8px;
    border-radius: 5px;
    background: #d3d3d3;
}

.range-slider::-moz-range-progress {
    height: 8px;
    background: #04AA6D;
    border-radius: 5px;
}

.range-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #04AA6D;
    border: 2px solid white;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}


.category-list {
    border-bottom: 1px solid #00000017;
    padding-bottom: 10px;
}

.maximum-price {
    margin-top: 20px;
    border-bottom: 1px solid #00000017;
    padding-bottom: 30px;
}

span#price-range {
    float: right;
    font-size: 15px;
    color: #0b7f49;
}

.venue-type-btn button {
    background: white;
    border: 1px solid #00000030;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 22px;
    border-radius: 30px;
}

.venue-type-btn {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.venue-type {
    margin-top: 20px;
    border-bottom: 1px solid #00000017;
    padding-bottom: 25px;
}

.venue-type-btn button.active {
    background: #04AA6D;
    color: #fff;
    border-color: #04AA6D;
}

.booking-option {
    margin-top: 20px;
}

.booking-option-btn button {
    background: white;
    border: 1px solid #00000030;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 22px;
    border-radius: 30px;
}

.booking-option-btn button {
    background: white;
    border: 1px solid #00000030;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 22px 9px 19px;
    border-radius: 30px;
}

.booking-option-btn button.active {
    background: #04AA6D;
    color: #fff;
    border-color: #04AA6D;
}

.booking-option-btn .bi-tag::before {
    content: "\f5b0";
    font-size: 17px;
    margin-right: 5px;
}

.booking-option-btn {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.filter-bottom-btn {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 7px;
}

button.btn.clear-all-btn {
    background: transparent;
    border: 1px solid #00000030;
    font-size: 16px;
    font-weight: 600;
    padding: 9px 30px 9px 30px;
    border-radius: 5px;
    color: #808080c2;
    width: 50%;
}

button.btn.apply-btn {
    background: #04aa6d;
    border: 1px solid #00000030;
    font-size: 16px;
    font-weight: 600;
    padding: 9px 35px 9px 35px;
    border-radius: 5px;
    color: white;
    width: 50%;
}

button#toggleCategories {
    color: #0b7f4a;
    font-weight: 700;
    font-size: 14px;
    padding: 4px 15px;
    border-radius: 30px;
}

.btn.btn-link:focus {
    outline: 0;
    box-shadow: none;
}

.blog-card {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    transition: transform 0.3s ease;
    /* cursor: pointer; */
}



.blog-meta {
    font-size: 13px;
    color: rgba(0, 0, 0, 1);
    display: flex;
}

.read-more {
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.read-more i {
    margin-left: 0px;
    font-size: 0.9rem;
}

.right-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.right-column .card {
    flex: 1;
}

.right-column img {
    height: 206px !important;
    border-radius: 10px;
    object-fit: cover;
}

section.industry-insights-section {
    padding: 7% 0px 6%;
    background-color: white;
}

.blog-header-flex a {
    background: rgba(11, 127, 73, 1);
    padding: 10px 30px;
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
}

.blog-header-flex h2 {
    margin-bottom: 0px;
}

.blog-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 70px;
}

.insights-left-img {
    object-fit: cover;
    height: 240px !important;
    border-radius: 16px !important;
}

.blog-meta .bi-clock::before {
    content: "\f293";
    font-weight: 600 !important;
    color: rgba(101, 101, 101, 1);
    margin-right: 10px;
    font-size: 18px;
}

.insights-card-left {
    padding-top: 23px;
    padding-left: 0px;
}

.insights-card-left h5 {
    margin-top: 17px;
    margin-bottom: 23px;
    font-size: 22px;
}

p.card-text {
    font-size: 15px;
    color: rgba(70, 70, 70, 1);
    line-height: 20px;
    margin-top: 10px;
}

.insights-card-left .card-text {
    height: 60px;
}

.insights-card-left a {
    color: rgba(0, 0, 0, 1);
    font-size: 12px;
    display: flex;
    align-items: center;
    /* gap: 8px; */
}

.bi-arrow-up-right::before {
    content: "\f144";
    margin-left: 10px;
}

.insights-card-right {
    padding: 5px 0px 11px 30px;
}

.insights-card-right h5 {
    margin-top: 15px;
    font-size: 22px;
    width: 80%;
    line-height: 29px;
    height: 58px;
}

.insights-card-right p.card-text {
    color: rgba(70, 70, 70, 1);
    font-size: 16px;
    margin-top: 20px;
    height: 40px;
}

.insights-card-right a {
    color: rgba(0, 0, 0, 1);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

/* Blog Card Hover Effects - Image Zoom Only */
/* Image container overflow for zoom effect */
.blog-card .col-5 {
    overflow: hidden;
    position: relative;
}

/* Image zoom effect on card hover - zoom inside container */
.blog-card:hover .col-5 img,
.blog-card:hover img.insights-left-img,
.blog-card:hover .card-img-top {
    transform: scale(1.1);
    transition: transform 0.6s ease;
}

.blog-card .col-5 img,
.blog-card img.insights-left-img,
.blog-card .card-img-top {
    transition: transform 0.6s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Card title color change on hover */
.blog-card:hover .card-title {
    color: rgba(11, 127, 73, 1);
    transition: color 0.3s ease;
}

.blog-card .card-title {
    transition: color 0.3s ease;
}

/* Read more hover effect */
.blog-card:hover .read-more {
    color: rgba(11, 127, 73, 1);
    transition: color 0.3s ease;
}

.blog-card .read-more {
    transition: color 0.3s ease;
}

.blog-card:hover .read-more i {
    /* transform: translate(1px, -1px); */
    transition: transform 0.3s ease;
}

.blog-card .read-more i {
    transition: transform 0.3s ease;
}

.login-forgot-password-flex {
    display: flex;
    justify-content: space-between;
    margin-top: -5px;
    margin-bottom: 30px;
}

.login-forgot-password-flex .form-check-input:checked {
    background-color: rgba(11, 127, 73, 1);
    border-color: rgba(11, 127, 73, 1);
}

.login-forgot-password-flex .form-check-input {
    width: 15px;
    height: 15px;
    border-radius: 3px;
}

.login-forgot-password-flex label.form-check-label {
    font-size: 13px;
    color: rgba(161, 161, 161, 1);
    margin-top: 2px;
}

.login-forgot-password-flex .form-check {
    display: flex;
    gap: 8px;
}

.login-forgot-password-flex a {
    color: rgba(11, 127, 73, 1);
    font-size: 12px;
    text-decoration: none;
    font-weight: 600;
}

.forgot-password-headings img {
    background: rgba(239, 239, 239, 0.42);
    padding: 9px 15px;
    border-radius: 10px;
}

.forgot-password-headings h1 {
    font-size: 35px;
    font-weight: 600;
    margin-top: 25px;
}

.forgot-password-headings {
    text-align: center;
}

.forgot-password-headings p {
    color: rgba(150, 150, 150, 1);
    font-size: 17px;
    margin-top: 15px;
}

.forgot-password-headings p span {
    color: black;
}

.otp-input {
    width: 65px;
    height: 70px;
    border: 1.43px solid rgba(101, 101, 101, 1);
    border-radius: 8px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
}

.otp-input:focus {
    border-color: rgba(11, 127, 73, 1);
    outline: none;
}

.continue-otp-btn {
    margin-top: 40px;
}

.otp-input-box {
    gap: 7px;
}

.resend-email p {
    margin-top: 20px;
    text-align: center;
    color: rgba(108, 108, 108, 1);
    font-size: 17px;
}

.resend-email p a {
    font-weight: 600;
    color: rgba(54, 122, 255, 1);
    margin-left: 5px;
}

.resend-email {
    display: flex;
    flex-direction: column;
    align-items: center;
}

a.back-to-login {
    color: rgba(56, 56, 56, 1);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
}

a.back-to-login .bi-arrow-left::before {
    content: "\f12f";
    font-size: 17px;
    font-weight: 500 !important;
    margin-right: 5px;
}

section.forgot-password {
    position: relative;
}

.password-right-section {
    position: absolute;
    top: 0;
    right: 0;
    width: 53%;
    bottom: 0;
    background: linear-gradient(317.18deg, #BFEECC 3.14%, #FFFFFF 91.57%);
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-right-section img {
    width: 400px;
    height: 400px;
    rotate: 4deg;
}

input:-webkit-autofill {
    background-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    /* force background */
    -webkit-text-fill-color: #000;
    /* text color */
    transition: background-color 5000s ease-in-out 0s;
    /* prevent yellow flash */
}

.forgot-password-card {
    border: none;
    /* text-align: center; */
    /* max-width: 420px; */
    width: 100%;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.step-tabs {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 30px;
}

.step-tabs .nav-link {
    border: none;
    border-radius: 50px;
    width: 76px;
    height: 8px;
    /* margin: 0 4px; */
    background: #e0e0e0;
    cursor: pointer;
    padding: 0px;
}

.forgot-password .signup-form {
    margin-top: 20px;
}

.forgot-password .continue-otp-btn {
    margin-top: 30px;
}

.step-tabs .nav-link.active {
    background: rgba(11, 127, 73, 1);
}

img.forgot-password-right-img {
    rotate: -11deg;
}

.sign-up-section.step4-active {
    background: linear-gradient(317.18deg, #BFEECC 3.14%, #FFFFFF 91.57%);
    height: 100dvh;
}

.password-all-done-step img {
    width: 150px;
    height: 150px;
}

.password-all-done-step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 80px;
    padding-bottom: 100px;
}

.password-all-done-step h1 {
    font-size: 50px;
    margin-top: 50px;
    font-weight: 600;
}

.password-all-done-step p {
    color: rgba(150, 150, 150, 1);
    font-size: 23px;
    margin-top: 15px;
    margin-bottom: 25px;
}

.password-all-done-step a.back-to-login {
    color: black;
}

.forgot-password-header-img img {
    padding-top: 28px;
    padding-bottom: 28px;
}

img.set-new-password-img {
    rotate: 7deg;
    width: 500px;
    height: 500px;
}

.progress-container {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 0px 25px;
}

.progress-line {
    height: 8px;
    flex: 1;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.progress-line.bg-orange {
    background-color: rgba(248, 189, 108, 1);
}

.progress-line.inactive {
    background-color: #e9ecef;
}



section.email-template-section {
    background: rgba(238, 255, 243, 1);
    padding: 60px;
}

.email-container {
    background: #ffffff;
    border-radius: 4px;
}

.email-details {
    padding: 40px 100px;
}

.email-body {
    height: 500px;
}

.email-body h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 30px;
}

.email-body button {
    border: none;
    background: rgba(243, 243, 243, 1);
    /* padding: 30px 30px; */
    width: 139px;
    height: 45px;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 30px;
}

.email-body p {
    text-align: left;
    font-size: 17px;
    color: rgba(104, 104, 104, 1);
}

.email-body a {
    color: rgba(21, 132, 149, 1);
    text-decoration: none;
}

.service-details-slider-div img {
    height: 370px;
    object-fit: cover;
    border-radius: 20px;
}

section.service-details1-section {
    padding-top: 40px;
}



.service-details-slider-div .owl-carousel .owl-nav button.owl-next,
.service-details-slider-div .owl-carousel .owl-nav button.owl-prev,
.service-details-slider-div .owl-carousel button.owl-dot {
    padding: 5px 13px !important;
}

.service-details-slider-div .owl-prev {
    position: absolute;
    top: 43%;
    color: black !important;
    left: 20px;
    font-size: 30px !important;
    background: rgba(255, 255, 255, 0.79) !important;
    border-radius: 50% !important;
}

.service-details-slider-div .bi-chevron-left::before,
.service-details-slider-div .bi-chevron-right::before {
    font-weight: bold !important;
}

.service-details-slider-div button.owl-next {
    position: absolute;
    top: 43%;
    color: black !important;
    right: 20px;
    font-size: 30px !important;
    background: rgba(255, 255, 255, 0.79) !important;
    padding: 5px 14px 11px 12px !important;
    border-radius: 50% !important;
}

.salon-card {
    border-radius: 8px;
    background: #fff;
    margin-top: 50px;
}

.salon-card h5 {
    font-weight: 600;
    margin-bottom: 25px;
    font-size: 45px;
}

.salon-rating {
    font-size: 25px;
    font-weight: 500;
    color: rgba(11, 11, 11, 1);
}

.salon-rating .bi-star-fill {
    font-size: 16px;
}

.discount-badge {
    background-color: rgba(107, 223, 132, 0.48);
    color: rgba(12, 144, 41, 1);
    font-size: 15px;
    padding: 5px 18px;
    border-radius: 5px;
    font-weight: 500;
    border: 1px solid rgba(13, 129, 75, 1);
}

.salon-info p {
    margin-bottom: 17px;
    font-size: 17px;
    color: rgba(101, 101, 101, 1);
    display: flex;
    gap: 15px;
}

.salon-card .bi-star-fill::before {
    content: "\f586";
    font-size: 22px;
    margin-right: 3px;
    margin-left: 3px;
    margin-top: 3px;
}

span.rating-count {
    color: rgba(9, 9, 9, 1);
    font-weight: 400;
    font-size: 24px;
}

.rating-details {
    display: flex;
    align-items: center;
    gap: 30px;
}

.product-all-details {
    border-right: 1px solid black;
}

/* .product-all-details {
    border-right: 2px solid rgba(148, 148, 148, 1);
    padding-right: 50px;
} */

.salon-info {
    padding-left: 80px;
}

.salon-info .bi-clock::before {
    content: "\f293";
    font-size: 20px;
    color: rgba(101, 101, 101, 1);
    margin-top: 5px;
}

.salon-info .bi-geo-alt::before {
    content: "\f3e8";
    font-size: 20px;
    color: rgba(101, 101, 101, 1);
    margin-top: 5px;
}

.salon-info span {
    margin-right: -9px;
    color: rgba(12, 144, 41, 1);
    font-weight: 500;
}

.service-products-details-list {
    margin-top: 50px;
}

.service-products-details-list ul li {
    border: 2px solid rgba(101, 101, 101, 1);
    padding: 6px 20px;
    border-radius: 30px;
    list-style-type: none;
}

.service-products-details-list ul li a {
    text-decoration: none;
    font-size: 18px;
    color: rgba(30, 30, 30, 1);
    font-weight: 500;
}

.service-products-details-list ul li a.active {
    color: white;
}

.service-products-details-list ul li:has(a.active) {
    background: rgba(11, 127, 73, 1);
    /* color: #fff !important; */
    font-weight: 600;
    /* border-radius: 4px; */
    border: 2.27px solid rgba(185, 255, 222, 1);
}

.service-list-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* border: 1px solid #ccc; */
    border-radius: 25px;
    padding: 35px 25px;
    margin-bottom: 20px;
    border: 1.47px solid rgba(148, 148, 148, 1);
}

.service-list-items h6 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.service-list-items small {
    color: #666;
}

.service-price {
    font-weight: 600;
    margin-right: 45px;
    color: rgba(0, 0, 0, 1);
    font-size: 19px;
}

.service-item .btn {
    border-radius: 25px;
    padding: 35px 23px;
}

.service-section-1 h1 {
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 50px;
}

.service-list-items h6 {
    font-size: 20px;
    color: rgba(0, 0, 0, 1);
    font-weight: 500;
    margin-bottom: 10px;
}

.service-list-items small {
    color: rgba(101, 101, 101, 1);
    font-size: 18px;
    font-weight: 500;
}

.price-list-book button {
    background: rgba(11, 127, 73, 1);
    color: white;
    padding: 10px 28px;
    border-radius: 30px;
    font-size: 18px;
}

.price-list-book {
    display: flex;
    align-items: center;
}

.service-section-1 {
    margin-top: 50px;
}

.service-products-scroll-wrapper ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    gap: 25px;
}

.service-products-scroll-wrapper ul li {
    flex: 0 0 15%;
    box-sizing: border-box;
    text-align: center;
}

.service-products-scroll-container {
    position: relative;
    display: flex;
}

.service-products-scroll-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
    flex: 1;

    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;

    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}


.service-products-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.service-products-scroll-btn {
    border: none;
    background: none;
    padding: 6px 10px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 23px;
}

.service-products-scroll-container .bi-chevron-right::before,
.service-products-scroll-container .bi-chevron-left::before {
    font-weight: 800 !important;
}

.service-products-scroll-btn:disabled {
    cursor: not-allowed;
}


.service-all-products-scroll {
    position: relative;
    /* Full viewport height */
    overflow: hidden;
}

.service-list-items-all-details {
    max-height: 610px;
    overflow: auto;
    scrollbar-width: none;
    margin-bottom: 20px;
}

.calendar-container {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

.week-days {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 15px 0;
}

.day-box div {
    font-size: 25px;
    font-weight: 500;
}

.day-box small {
    font-weight: 500;
    font-size: 13px;
}

.day-box {
    border: 1px solid rgba(101, 101, 101, 1);
    border-radius: 10px;
    padding: 13px 15px;
    cursor: pointer;
    width: 70px;
}

.day-box.today {
    background: rgba(11, 127, 73, 1);
    color: white;
}

.day-box.active {
    background: rgba(11, 127, 73, 1);
    border: 1px solid rgba(11, 127, 73, 1);
    color: white;
}

.toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 38px 0;
}

.book-now-calendar-popup .salon-card {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    gap: 15px;
    margin: auto;
    max-width: 640px;
    background: rgba(238, 238, 238, 1);
}

.book-now-calendar-popup .salon-card img {
    width: 150px;
    border-radius: 10px;
    object-fit: cover;
    height: 130px;
}

.book-now-calendar-popup .salon-info {
    padding-left: 0px;
    width: 215px;
    border-right: 1.03px solid rgba(158, 158, 158, 1);
}

.book-now-calendar-popup .salon-card h5 {
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 20px;
    margin-top: 2px;
}

.book-now-calendar-popup .salon-info p {
    margin-bottom: 17px;
    font-size: 12px;
    color: rgba(101, 101, 101, 1);
}

.book-now-calendar-popup .salon-info h6 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
}

.book-now-calendar-popup .price-info {
    padding-top: 15px;
    padding-left: 15px;
    width: 210px;
}

.book-now-calendar-popup .price-info span {
    float: right;
}

.book-now-calendar-popup .price-info h5 {
    font-weight: 700;
    font-size: 18px;
    border-top: 1.03px solid rgba(158, 158, 158, 1);
    padding-top: 17px;
}

.book-now-calendar-popup .price-info div {
    font-size: 12px;
    color: rgba(101, 101, 101, 1);
    margin-bottom: 10px;
}

span.total-price-amt {
    font-size: 21px;
}

.book-now-calendar-popup button.btn-close:focus {
    box-shadow: none;
    outline: 0;
}

.btn-continue {
    background: #00844c;
    color: #fff;
    border-radius: 8px;
    padding: 10px 25px;
    border: none;
    display: block;
    margin: 25px auto 0;
}

.book-now-calendar-popup .modal-header {
    border-bottom: none;
}

.book-now-calendar-popup .modal-dialog {
    max-width: 785px;
}

.book-now-calendar-popup .modal-content {
    border-radius: 15px;
    padding-top: 15px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 10px;
}

.book-now-calendar-popup .btn-close {
    background: none;
    opacity: 1;
}

.book-now-calendar-popup .bi-x::before {
    content: "\f62a";
    font-size: 27px;
    background: rgba(232, 232, 232, 1);
    border-radius: 50%;
    color: black;
    /* font-weight: 600 !important; */
    padding: 6px 6px 5px;
}

.book-now-calendar-popup .modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 3px 1rem 1rem;
}

.calendar-container h3 {
    font-size: 30px;
    margin-bottom: 28px;
}

button#prevWeek {
    position: absolute;
    left: 30px;
    top: 92px;
    padding: 0px;
    border: none;
    font-size: 20px;
}

button#prevWeek:hover {
    color: black;
}

button#prevWeek:focus {
    box-shadow: none;
    border: none;
}

button#nextWeek {
    position: absolute;
    right: 30px;
    top: 92px;
    padding: 0px;
    border: none;
    font-size: 20px;
}

button#nextWeek:hover {
    color: black;
}

button#nextWeek:focus {
    box-shadow: none;
    border: none;
}

.calendar-container .btn.disabled {
    color: rgba(0, 0, 0, 0.36);
}

.custom-date {
    width: 195px;
    float: right;
    font-size: 12px;
    color: rgba(101, 101, 101, 1);
    font-weight: 500;
    margin-top: -7px;
}

input#customDate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    cursor: pointer;
    border: none;
}

/* time picker */

.timepicker-container {
    max-width: 400px;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.time-picker-flex .form-label {
    font-weight: 400;
    color: rgba(101, 101, 101, 1);
    margin-bottom: 0px;
    font-size: 14px;
}

.time-picker-flex .form-control {
    border: none;
    padding: 0px;
    background: white !important;
    padding-left: 2px;
    color: rgba(101, 101, 101, 1);
    font-size: 19px;
    font-weight: 500;
}

.time-picker-flex .form-control:focus {
    box-shadow: none;
    outline: 0;
}

.time-picker-flex .input-group-text {
    background-color: white;
    /* color: #fff; */
    border: none;
    padding-right: 5px !important;
    padding: 0px;
    padding-right: 5px;
}

.time-picker-flex .input-group-text:hover {
    background-color: white;
}

.time-picker-flex .bi-clock::before {
    content: "\f293";
    color: rgba(101, 101, 101, 1);
    font-size: 13px;
}

/* Custom Time Picker Dropdown */
.time-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    /* border-radius: 8px; */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    /* padding: 0px 10px; */
    width: 220px;
}

.time-picker-dropdown.show {
    display: block;
}

.time-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.time-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-spinner input {
    width: 50px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 4px;
    font-size: 16px;
    font-weight: bold;
}

.spinner-btn {
    background: none;
    color: black;
    border: none;
    width: 30px;
    height: 25px;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.spinner-btn:hover {
    background: #0b7f491a;
}

.ampm-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: 5px;
}

.ampm-btn {
    padding: 6px 8px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
}

.ampm-btn.active {
    background: #0b7f49;
    color: white;
    border-color: #0b7f49;
}

.time-picker-flex {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 55px;
}

.time-picker-box {
    border: 1px solid rgba(101, 101, 101, 1);
    width: 22%;
    padding: 8px 15px;
    border-radius: 10px;
    cursor: pointer;
}

.time-picker-flex .input-group {
    margin-top: -3px;
}

.time-picker-box.active {
    border: 1.41px solid rgba(17, 17, 17, 1)
}

.time-picker-box.active .form-control {
    color: rgba(25, 25, 25, 1);
}

i.bi.bi-chevron-down.time-picker-chevron-down {
    font-size: 13px;
    margin-top: 5px;
    margin-right: 5px;
}

.toggle-container .form-switch .form-check-input:checked {
    background-color: #0b7f49 !important;
}

.toggle-container .form-switch .form-check-input:focus {
    box-shadow: none;
    outline: 0;
}

.toggle-container .form-switch .form-check-input:focus {
    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='%23fff'/%3e%3c/svg%3e");
}

.toggle-container .form-switch .form-check-input {
    width: 60px;
    height: 30px;
    border: 1px solid rgba(239, 239, 239, 1);
    background-color: rgba(239, 239, 239, 1);
    margin-top: -4px;
    margin-right: 10px;
}

.toggle-container label.form-check-label {
    color: rgba(101, 101, 101, 1);
    font-weight: 500;
    font-size: 14px;
}

.signup-form form a {
    text-decoration: none;
}

.form-floating ul {
    padding-left: 5px;
    margin-top: -9px !important;
}

.form-floating ul li {
    list-style-type: none;
    font-size: 13px;
    color: red;
}

#map {
    height: 160px !important;
    width: 100% !important;
    margin-bottom: 45px;
}

.drop-zone {
    border: 2px dashed #ced4da;
    border-radius: 5px;
    text-align: center;
    color: #6c757d;
    background-color: #fff;
    min-height: 150px;
    position: relative;
    transition: border-color 0.3s;
    cursor: pointer;
    padding: 10px 10px 20px;
}

.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

.image-preview-item {
    position: relative;
    width: 100px;
}

.image-preview {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
}

.delete-icon {
    position: absolute;
    top: -10px;
    right: -5px;
    cursor: pointer;
    background: rgb(236 247 231 / 87%);
    font-size: 18px;
    border-radius: 50%;
    color: #dc3545;
    font-weight: 600 !important;
    padding: 3px 4px 4px 2px;
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 1;
}

.delete-icon .bi-x::before {
    content: "\f62a";
    font-weight: 600 !important;
}

.drop-message {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.upload-images-preview img {
    width: 133px;
    height: 90px;
    border-radius: 10px;
}

.upload-images-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.upload-images-preview .image-wrapper {
    position: relative;
    display: inline-block;
}

.upload-images-preview .remove-btn {
    position: absolute;
    top: -8px;
    right: -6px;
    background: rgb(236 247 231);
    color: #dc3545;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.form-service-category-select option {
    padding: 8px 10px;
    font-size: 14px;
}

.form-service-category-select {
    padding: 0px 0px !important;
    scrollbar-width: thin;
}

.success-card-section {
    background-color: rgba(236, 247, 231, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding-top: 25px;
    padding-bottom: 25px;
}

.success-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 12% 30px 12%;
    text-align: center;
}

.success-icon img {
    width: 135px;
}

.success-icon i {
    font-size: 32px;
    color: #22c55e;
    /* Darker green check */
}

.success-card h4 {
    font-weight: 700;
    font-size: 30px;
    margin-top: 25px;
    margin-bottom: 15px;
}

.success-card p {
    color: rgba(101, 101, 101, 1);
    font-size: 17px;
}

.success-bottom-btn {
    margin-top: 80px;
}

.btn-view {
    background-color: rgba(11, 127, 73, 1);
    color: white;
    border-radius: 6px;
    padding: 12px 19px;
    font-size: 13px;
}

.btn-view:hover {
    background-color: rgba(11, 127, 73, 1);
    color: white;
}

.btn-secondary-custom {
    background-color: white;
    /* border: 1px solid #d1d5db; */
    color: rgba(101, 101, 101, 1);
    border-radius: 6px;
    padding: 11px 19px;
    margin-left: 10px;
    border: 2px solid rgba(121, 121, 121, 1);
    font-size: 13px;
}

.btn-secondary-custom:hover {
    background-color: white;
    color: rgba(101, 101, 101, 1);
}

.notification-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.notification-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
}

.notification-bell img {
    width: 22px;
    height: 22px;
}

/* ✅ PERFECT BADGE */
.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background-color: #dc3545;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid #fff;
    box-sizing: border-box;
}

.notification-text {
    font-size: 12px;
    color: #333;
}

/* Notification Dropdown */
.notification-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 450px;
    max-width: 90vw;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.notification-dropdown.show {
    display: block;
}

.notification-header {
    padding: 20px 20px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.notification-header h5 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    text-align: left;
}

.notification-list {
    max-height: 500px;
    overflow-y: auto;
    padding: 0;
}

/* Hide notifications beyond the first 5 in dropdown */
.notification-list .notification-item:nth-child(n+6) {
    display: none !important;
}

.notification-list::-webkit-scrollbar {
    width: 6px;
}

.notification-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.notification-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.notification-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s;
    cursor: pointer;
}

.notification-item:hover {
    background-color: rgba(236, 247, 231, 0.5);
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 12px;
}

.notification-icon img {
    margin-bottom: 0px;
}

.notification-icon.payment-icon {
    background-color: #cfffb996;
    color: rgba(11, 127, 73, 1);
}

.notification-icon.cancellation-icon {
    background-color: rgba(237, 60, 60, 0.1);
    color: rgba(237, 60, 60, 1);
}

.notification-icon i {
    font-size: 20px;
}

.notification-content {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.notification-text {
    font-size: 15px;
    margin: 0;
    line-height: 1.5;
    text-align: left;
    word-wrap: break-word;
}

.notification-text .notification-title {
    font-size: 14px !important;
    font-weight: 600;
    color: #333;
    margin-right: 5px;
    display: inline !important;
    text-transform: capitalize !important;
}

/* Legacy support for h6 notification-title */
.notification-content h6.notification-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 5px 0;
    line-height: 1.3;
    display: block;
}

.notification-time {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    margin-left: 12px;
    flex-shrink: 0;
    padding-top: 2px;
}

.notification-footer {
    padding: 15px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
}

.btn-show-all {
    width: 100%;
    padding: 10px 20px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-show-all:hover {
    background-color: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.3);
}

.btn-show-all:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(11, 127, 73, 0.2);
}

/* Close dropdown when clicking outside */
.notification-wrapper {
    position: relative;
}

/* Notification Overlay (Right Side) */
.notification-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 450px;
    max-width: 90vw;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notification-overlay.show {
    right: 0;
}

.notification-overlay-header {
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.notification-overlay-header h5 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.notification-overlay-close {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.notification-overlay-close:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.notification-overlay-close:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(11, 127, 73, 0.2);
}

.notification-overlay-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

/* Ensure notification items in overlay are properly styled */
.notification-overlay-list .notification-item {
    display: flex;
    align-items: flex-start;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s;
    cursor: pointer;
}

.notification-overlay-list .notification-item:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.notification-overlay-list::-webkit-scrollbar {
    width: 6px;
}

.notification-overlay-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.notification-overlay-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.notification-overlay-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Overlay background when notification overlay is open */
body.notification-overlay-open {
    overflow: hidden;
}

body.notification-overlay-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    cursor: pointer;
}

/* Notification Overlay Responsive */
@media (max-width: 768px) {
    .notification-overlay {
        width: 85%;
        max-width: 400px;
    }

    .notification-overlay-header {
        padding: 15px;
    }

    .notification-overlay-header h5 {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .notification-overlay {
        width: 90%;
        max-width: 350px;
    }
}

/* Notification Dropdown Responsive */
@media (max-width: 768px) {
    .notification-dropdown {
        width: 320px;
        right: -10px;
    }

    .notification-item {
        padding: 12px 15px;
    }

    .notification-icon {
        width: 35px;
        height: 35px;
        margin-right: 10px;
    }

    .notification-icon i {
        font-size: 18px;
    }

    .notification-title {
        font-size: 14px;
    }

    .notification-text {
        font-size: 13px;
    }

    .notification-time {
        font-size: 11px;
        margin-left: 8px;
    }

    .notification-header {
        padding: 15px 15px 12px;
    }

    .notification-header h5 {
        font-size: 18px;
    }

    .notification-footer {
        padding: 12px 15px;
    }

    .btn-show-all {
        padding: 8px 15px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .notification-dropdown {
        width: calc(100vw - 40px);
        right: -20px;
        max-width: 320px;
    }
}

.selected-option-list {
    padding: 9px 15px;
    background-color: #64cb99;
    color: #ffffff;
    border-radius: 8px 8px 0px 0px;
    /* margin-top: 20px; */
}

.category-form {
    margin-bottom: 10px;
    border: 1px solid #00000017;
    border-radius: 8px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.category-form .bi-x::before {
    content: "\f62a";
    background: #0b7f493d;
    border-radius: 50%;
    font-size: 20px;
}

div#selected-categories-forms {
    margin-top: 20px;
}

.status-box {
    background-color: white;
    transition: all 0.3s ease;
    padding: 9px 15px;
    border: 0.98px solid rgba(217, 217, 217, 1);
    border-radius: 5px;
    margin-top: 10px;
}

.status-indicator {
    width: 9px;
    height: 9px;
    background-color: rgba(89, 255, 125, 1);
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    transition: background-color 0.3s ease;
    margin-top: 3px;
}

.status-indicator.inactive {
    background-color: #dc3545;
}

.status-text {
    font-weight: 500;
    color: rgba(51, 47, 47, 1);
    transition: color 0.3s ease;
    font-size: 14px;
}

.status-section {
    margin-top: 10px;
    padding: 10px 15px 20px;
}

.status-label {
    display: block;
    font-weight: 500;
    color: rgba(51, 47, 47, 1);
    font-size: 14px;
    margin-bottom: 8px;
}

.category-status-toggle:checked {
    background-color: #05a75f !important;
    border-color: #05a75f !important;
}

.form-switch .category-status-toggle {
    width: 35px;
    height: 20px;
    cursor: pointer;
}

.category-status-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25) !important;
}

.service-status-toggle:checked {
    background-color: #05a75f !important;
    border-color: #05a75f !important;
}

.form-switch .service-status-toggle {
    width: 35px;
    height: 20px;
    cursor: pointer;
}

.service-status-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25) !important;
}

.selected-option-list .closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.selected-option-list .closebtn:hover {
    color: white;
}

.selected-option-list .service-closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.selected-option-list .service-closebtn:hover {
    color: white;
}

section.service-dashboard .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: 0px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}


.custom-select-wrapper {
    width: 100%;
    position: relative;
}

#selectedServicesForms .bi-x::before {
    content: "\f62a";
    background: #0b7f493d;
    border-radius: 50%;
    font-size: 20px;
}

#selectedServicesForms .row {
    min-height: auto;
}

#selectedServicesForms .service-form {
    margin-bottom: 10px;
    border: 1px solid #00000017;
    border-radius: 8px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.service-pricing-details-div {
    padding: 10px 15px 10px;
}

#selectedServicesForms .status-box {
    border-radius: 8px;
    padding: 13px 15px;
    margin-top: 0px;
}

/* Select box */
.custom-select {
    padding: 12px;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border 0.3s;
}

.custom-select.open {
    border-color: #0bbd6c;
}

.arrow {
    font-size: 16px;
    opacity: 0.6;
    transition: transform 0.3s ease;
}

.arrow.rotate {
    transform: rotate(180deg);
}

/* Options box */
.service-dashboard-contents .options-container {
    position: absolute;
    width: 100%;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    margin-top: 6px;
    display: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    z-index: 99;
}

.service-dashboard-contents .option {
    padding: 7px 10px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 14px;
}

.service-dashboard-contents .option:hover {
    background: #f3f8ff;
}

/* Selected option */
.service-dashboard-contents .selected-option {
    background: #64cb99 !important;
    font-weight: 600;
    color: white;
}

.service-dashboard-contents span.selected-text {
    font-size: 14px;
}

.remove-category {
    padding: 2px 8px;
    border-radius: 50%;
    background: #ff00000f;
    border: none;
}

.choices__list--multiple .choices__item {
    background-color: #165b33 !important;
    border: #165b33 !important;
}

.choices__inner,
.choices__input {
    background-color: #c5eed00f;
}

.choices[data-type*=select-multiple] .choices__button,
.choices[data-type*=text] .choices__button {
    border-left: 1px solid #ffffff;
}

/* Service Details 1 Responsive Styles */
@media (max-width: 1399px) {
    .service-details-slider-div img {
        height: 320px;
    }

    .salon-card h5 {
        font-size: 38px;
    }

    .salon-rating {
        font-size: 22px;
    }

    .product-all-details {
        padding-right: 40px;
    }

    .salon-info {
        padding-left: 60px;
    }

    .service-section-1 h1 {
        font-size: 32px;
    }

    .service-list-items {
        padding: 30px 20px;
    }

    .service-list-items h6 {
        font-size: 18px;
    }

    .service-list-items small {
        font-size: 16px;
    }

    .service-price {
        font-size: 17px;
        margin-right: 35px;
    }
}

@media (max-width: 1199px) {
    .service-details-slider-div img {
        height: 300px;
    }

    .salon-card h5 {
        font-size: 35px;
    }

    .product-all-details {
        padding-right: 30px;
    }

    .salon-info {
        padding-left: 40px;
    }

    .service-section-1 h1 {
        font-size: 30px;
        margin-bottom: 40px;
    }

    .service-list-items {
        padding: 25px 20px;
    }

    .service-products-scroll-wrapper ul li {
        flex: 0 0 18%;
    }
}

@media (max-width: 991px) {
    section.service-details1-section {
        padding-top: 30px;
    }

    .service-details-slider-div img {
        height: 280px;
    }

    .service-details-slider-div .owl-prev {
        left: 10px;
        font-size: 24px !important;
    }

    .service-details-slider-div button.owl-next {
        right: 10px;
        font-size: 24px !important;
    }

    .salon-card {
        margin-top: 30px;
    }

    .salon-card h5 {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .salon-rating {
        font-size: 20px;
    }

    .rating-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .product-all-details {
        border-right: none;
        border-bottom: none;
        padding-right: 0;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .salon-info {
        padding-left: 0;
        /* padding-top: 20px; */
    }

    .salon-info p {
        font-size: 14px;
        /* flex-wrap: wrap; */
    }

    .salon-info .bi-clock::before,
    .salon-info .bi-geo-alt::before {
        font-size: 14px;
    }

    .service-products-details-list {
        margin-top: 30px;
    }

    .service-products-scroll-wrapper ul li {
        flex: 0 0 25%;
    }

    .service-section-1 {
        margin-top: 30px;
    }

    .service-section-1 h1 {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .service-list-items {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 15px;
    }

    .service-list-items h6 {
        font-size: 18px;
    }

    .service-list-items small {
        font-size: 15px;
    }

    .price-list-book {
        width: 100%;
        gap: 10px;
    }

    .service-price {
        margin-right: 0;
        font-size: 16px;
    }

    .price-list-book button {
        padding: 8px 20px;
        font-size: 16px;
    }

    .service-list-items-all-details {
        /* height: 500px; */
    }

    .header-flex2 {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .account-mobile-flex a {
        flex-direction: column;
        display: flex;
        align-items: center;
    }

    .account-mobile-flex span {
        font-size: 11px;
        display: block;
        text-transform: uppercase;
        color: black;
        margin-top: 5px;
    }

    span#notificationBadge {
        color: white;
    }
}

@media (max-width: 768px) {
    section.service-details1-section {
        padding-top: 20px;
    }

    /* Scroll buttons responsive */
    .service-products-scroll-btn {
        font-size: 18px;
        padding: 4px 8px;
    }

    .scrollable-prv-next-btn {
        display: flex;
        gap: 5px;
    }

    .service-details-slider-div img {
        height: 250px;
    }

    .salon-card {
        margin-top: 20px;
        padding: 20px;
    }

    .salon-card h5 {
        font-size: 24px;
    }

    .salon-rating {
        font-size: 18px;
    }

    span.rating-count {
        font-size: 18px;
    }

    .discount-badge {
        font-size: 13px;
        padding: 4px 12px;
        margin-left: 0px !important;
    }

    .service-products-scroll-wrapper ul li {
        flex: 0 0 30%;
    }

    .service-products-scroll-wrapper ul {
        gap: 15px;
    }

    .service-products-details-list ul li {
        padding: 5px 15px;
    }

    .service-products-details-list ul li a {
        font-size: 15px;
    }

    .service-section-1 h1 {
        font-size: 22px;
        margin-bottom: 25px;
    }

    .service-list-items {
        padding: 15px;
    }

    .service-list-items h6 {
        font-size: 16px;
    }

    .service-list-items small {
        font-size: 14px;
    }

    .service-price {
        font-size: 15px;
    }

    .price-list-book button {
        padding: 8px 18px;
        font-size: 14px;
    }

    .service-list-items-all-details {
        /* height: 470px; */
    }
}

@media (max-width: 480px) {
    .service-details-slider-div img {
        height: 200px;
    }

    .service-details-slider-div .owl-prev {
        left: 5px;
        font-size: 20px !important;
        padding: 3px 8px !important;
    }

    .service-details-slider-div button.owl-next {
        right: 5px;
        font-size: 20px !important;
        padding: 3px 8px !important;
    }

    .salon-card {
        padding: 15px;
    }

    .salon-card h5 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .salon-rating {
        font-size: 16px;
    }

    span.rating-count {
        font-size: 16px;
    }

    .rating-details {
        gap: 10px;
    }

    .service-products-scroll-wrapper ul li {
        flex: 0 0 40%;
    }

    .service-products-details-list ul li {
        padding: 4px 12px;
    }

    .service-products-details-list ul li a {
        font-size: 13px;
    }

    .service-section-1 h1 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .service-list-items {
        padding: 12px;
    }

    .service-list-items h6 {
        font-size: 15px;
    }

    .service-list-items small {
        font-size: 13px;
    }

    .service-price {
        font-size: 14px;
    }
    
    .service-list-items-all-details {
        /* height: 430px; */
    }

    /* Modal responsive */
    .book-now-calendar-popup .modal-dialog {
        max-width: 95%;
        margin: 10px auto;
    }

    .book-now-calendar-popup .salon-card {
        flex-direction: column;
        padding: 15px;
    }

    .book-now-calendar-popup .salon-card img {
        width: 100%;
        height: 200px;
    }

    .book-now-calendar-popup .salon-info {
        padding-left: 0;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(158, 158, 158, 1);
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .book-now-calendar-popup .price-info {
        width: 100%;
        padding-left: 0;
    }

    .calendar-container h3 {
        font-size: 24px;
    }

    .day-box {
        width: 60px;
        padding: 10px 12px;
    }

    .day-box div {
        font-size: 20px;
    }

    .time-picker-flex {
        flex-direction: column;
        gap: 15px;
    }

    .time-picker-box {
        width: 100%;
    }

    /* Calendar responsive */
    .week-days {
        gap: 10px;
        flex-wrap: wrap;
    }

    .day-box {
        width: 65px;
        padding: 8px 10px;
    }

    .day-box div {
        font-size: 18px;
    }

    .day-box small {
        font-size: 11px;
    }

    button#prevWeek {
        left: -15px;
    }

    button#nextWeek {
        right: -15px;
    }

    button#prevWeek,
    button#nextWeek {
        font-size: 34px;
    }

    .calendar-container h3 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    /* Modal responsive */
    .book-now-calendar-popup .modal-content {
        padding: 15px;
    }

    .book-now-calendar-popup .modal-body {
        padding: 10px;
    }
}

/* Additional responsive for tablets */
@media (min-width: 601px) and (max-width: 768px) {
    .service-details-slider-div img {
        height: 240px;
    }

    .salon-card h5 {
        font-size: 26px;
    }

    .service-section-1 h1 {
        font-size: 24px;
    }

    .service-products-scroll-wrapper ul li {
        flex: 0 0 28%;
    }
}

/* Tablet specific (601px - 991px) for service-details1 */
@media (min-width: 601px) and (max-width: 991px) {
    .service-details-slider-div img {
        height: 350px;
    }

    .salon-card h5 {
        font-size: 30px;
    }

    .product-all-details {
        padding-right: 25px;
    }

    .salon-info {
        padding-left: 30px;
    }

    .service-products-scroll-wrapper ul li {
        flex: 0 0 22%;
    }
}

/* Medium desktop (992px - 1199px) for service-details1 */
@media (min-width: 992px) and (max-width: 1199px) {
    .service-details-slider-div img {
        height: 290px;
    }

    .salon-card h5 {
        font-size: 36px;
    }

    .product-all-details {
        padding-right: 35px;
    }

    .salon-info {
        padding-left: 50px;
    }

    .service-products-scroll-wrapper ul li {
        flex: 0 0 16%;
    }
}

/* Large desktop (1200px - 1399px) for service-details1 */
@media (min-width: 1200px) and (max-width: 1399px) {
    .service-details-slider-div img {
        height: 330px;
    }

    .salon-card h5 {
        font-size: 40px;
    }

    .product-all-details {
        padding-right: 45px;
    }

    .salon-info {
        padding-left: 70px;
    }
}


/* Desktop: 5 images */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .our-partners-section .partner-img {
        width: calc(100% / 4);
    }
}

/* Tablet: 3 images */
/* @media (min-width: 768px) and (max-width: 1023px) {
    .partner-img {
        width: calc(100% / 3);
    }
} */

/* Mobile: 1 image */
@media (max-width: 767px) {
    .partner-img {
        width: 100%;
    }
}



@media (max-width: 768px) {
    .signup-container {
        padding: 20px;
    }

    .signup-form {
        padding: 30px 25px;
    }

    .hero-section {
        margin-bottom: 30px;
        min-height: 200px;
        text-align: center;
    }

    .hero-title,
    .hero-subtitle {
        font-size: 32px;
    }

    .hero-image {
        position: relative;
        width: 100%;
        height: 100px;
        margin-top: 20px;
    }
}

@media screen and (max-width: 600px) {
    .footer-link-head {
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 20px !important;
    }

    .footer-link-head {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px !important;
        margin-top: 15px;
    }

    .app-store-buttons {
        flex-wrap: wrap;
    }

    .footer-location-details p {
        width: 100%;
        margin-bottom: 0px;
    }

    .our-partners-section .nav-tabs .nav-link {
        padding: 3px 15px;
        font-size: 16px;
        margin: 0px;
    }

    .mobile-menu {
        display: block;
    }

    .overlay-content a {
        display: flex;
        align-items: center;
        margin: 5px 0 15px;
        font-size: 16px;
        padding: 10px;
        border-radius: 8px;
        color: black;
    }

    .desktop-menu {
        display: none;
    }

    section.banner-section h1 {
        font-size: 30px;
        line-height: 40px;
        width: 100%;
    }

    section.banner-section p {
        width: 100%;
        margin-top: 20px;
    }

    .feature-card img {
        width: 50px;
    }

    .feature-card {
        margin-top: 20px;
        margin-right: auto;
        margin-left: auto;
        width: 100%;
        padding: 15px 6px 15px 13px;
        gap: 0px;
        animation: none;
    }

    .card-position-1 {
        position: unset;
    }

    .card-position-2 {
        position: unset;
    }

    .banner-img img {
        width: 100%;
    }

    .feature-card h6 {
        font-size: 18px;
    }

    .button-margin {
        position: unset;
        gap: 15px;
        justify-content: center;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .button-margin button {
        padding: 10px 21px;
        font-size: 17px;
    }

    .gk-box {
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 15px;
        padding: 50px 20px;
        width: 95%;
    }

    .gk-box:hover {
        transform: none;
    }

    .head-title {
        font-size: 25px;
        line-height: 35px;
        font-weight: 600;
    }

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

    .why-choose-section {
        padding: 12% 0px 7%;
    }

    .why-choose-margin {
        margin-top: 30px;
    }

    .our-partners-section {
        padding: 60px 0px 60px;
    }

    .service-card {
        margin-right: auto;
        margin-left: auto;
        width: 95%;
    }

    .service-card h3 {
        padding: 30px 35px;
        font-size: 36px;
    }

    .head-width {
        width: 100%;
    }

    .blog-header-flex {
        margin-bottom: 50px;
        flex-direction: column;
        gap: 17px;
    }

    section.industry-insights-section {
        padding: 11% 0px 6%;
    }

    .service-card .icon-image {
        width: 85%;
    }

    .footer-bottom {
        display: flex;
        margin-top: 0px;
        flex-direction: column;
        gap: 10px;
    }

    .footer-width {
        margin-bottom: 20px;
    }

    .social-icons {
        margin-bottom: 30px;
    }

    .footer {
        padding: 50px 10px 35px 10px;
    }

    .insights-card-left .card-text {
        height: auto;
    }

    .blog-card {
        flex-direction: column !important;
    }

    .col-md-4.mobile-center {
        text-align: center;
        margin-bottom: 20px;
    }

    .testimonial-section {
        padding: 7% 0px 7%;
    }

    .insights-card-right {
        padding: 20px 0px 11px 0px;
    }

    .right-column .card .col-5 {
        width: 100%;
    }

    .p-width {
        margin-top: 20px;
        margin-bottom: 20px;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

    .our-partners-section .owl-carousel .owl-item img {
        width: 175px !important;
        height: 50px;
    }

    div#OurPartnerTabsContent {
        margin-top: 20px;
    }

    .mobile-menu .bi-list::before {
        content: "\f479";
        font-size: 31px;
    }

    .mobile-menu .btn:focus {
        outline: 0;
        box-shadow: none;
    }

    .nav-icons a {
        background: #ffffff2e;
        padding: 7px 50px 7px 7px;
        width: fit-content;
        border-radius: 35px;
    }

    .header-section .nav-icons i {
        font-size: 15px;
        display: block;
        margin-right: 7px;
        background: #ffffff4d;
        padding: 3px 7px;
        border-radius: 50%;
    }

    .header-section .nav-icons span {
        font-size: 13px;
    }

    #menuOverlay {
        background-color: rgb(255 255 255);
    }

    .vm-contents {
        position: unset;
        padding: 45px 33px 31px;
        border-radius: 40px;
        margin-top: 30px;
    }

    section.our-team-section {
        padding-top: 0px;
    }

    .vision-mission-section {
        margin-bottom: 0%;
    }

    .team-section {
        padding: 60px 25px 0px;
    }

    .team-card img.team-photo {
        height: 375px;
        margin-right: auto;
        margin-left: auto;
    }

    .overlay-hover,
    .team-card-body {
        margin-right: auto;
        margin-left: auto;
    }

    section.hero-partnership {
        padding: 0px;
        margin-top: 70px;
        height: auto;
        background-color: #ecf7e8;
        background-image: none;
        padding-bottom: 55px;
    }

    .partnership-content {
        padding-top: 55px;
    }

    .partnership-subtitle {
        font-size: 17px;
        margin-bottom: 30px;
    }

    .partners-brand {
        width: 100%;
        margin-top: 60px;
    }

    .partnership-title {
        margin-bottom: 13px;
        font-size: 27px;
        letter-spacing: 0px;
    }

    .cta-button {
        padding: 10px 20px;
        font-size: 15px;
    }

    p.contact-content {
        width: 100%;
    }

    .contact-form {
        margin-top: 30px;
        padding: 2rem 20px;
    }

    .contact-form h5 {
        font-size: 22px;
    }

    .app-store-btn-flex {
        padding: 6px 10px;
    }

    footer.footer .col-md-2 {
        width: 50%;
    }

    .footer .footer-links li {
        margin-bottom: 8px;
        font-size: 15px;
    }

    .footer .footer-links a {
        font-size: 15px;
    }

    .service-margin {
        margin-top: 35px;
    }

    .gk-contents {
        margin-top: 0px;
    }

    .right-section {
        position: relative;
        top: 0px;
        width: 100%;
        height: 400px;
        border-radius: 20px;
        margin-left: 0px;
        background-size: cover !important;
    }

    .right-text h2 {
        left: 25px;
        font-size: 30px;
        width: 75%;
    }

    .signup-form {
        padding: 0px 10px;
        max-width: 100%;
        margin-top: 0px;
    }

    .back-button {
        margin-left: 15px;
        margin-bottom: 0px;
        margin-top: 20px;
    }

    .service-dashboard-sidemenu {
        padding: 20px 0px 20px;
        height: auto;
        background-image: none;
        background: #ccf0d6;
        border-radius: 20px 20px 0px 0px;
    }


    section.service-dashboard .form-section {
        padding: 40px 5px 20px 5px;
    }

    section.service-dashboard form {
        width: 100%;
    }

    .nxt-step-btn {
        margin-top: 30px;
        float: inline-end;
        margin-bottom: 10px;
        position: unset;
    }

    section.service-dashboard .col-md-3 {
        width: 100%;
    }

    section.service-dashboard .col-md-9 {
        width: 100%;
    }

    section.service-dashboard .nav-pills .nav-link {
        margin-bottom: 7px;
    }

    section.service-dashboard .nav-pills .nav-link.active,
    section.service-dashboard .nav-pills .show>.nav-link {
        font-size: 15px;
    }

    section.email-template-section {
        padding: 20px 10px;
    }

    .email-details {
        padding: 0px;
    }

    .email-footer {
        font-size: 15px;
        padding-top: 3px;
        padding-bottom: 20px;
    }

    .email-bottom {
        padding: 20px 15px;
        flex-direction: column;
    }

    .contact-section {
        padding-top: 35px;
    }

    .contact-details {
        margin-top: 10px;
    }

    section.service-dashboard .form-section h4 {
        font-size: 24px;
    }

    .upload-images-preview {
        justify-content: space-around;
    }

    /* .upload-images-preview img {
        width: 100%;
    } */

    /* Service page responsive styles */
    .service-section-banner {
        margin-right: 15px;
        margin-left: 15px;
        margin-top: 20px;
        padding-top: 40px;
        padding-bottom: 50px;
        background-size: cover;
    }

    .service-section-banner h1 {
        width: 100%;
        font-size: 28px;
        line-height: 38px;
        padding: 0 15px;
    }

    .service-section-banner .search-bar {
        max-width: 100%;
        flex-direction: column;
        padding: 15px;
        margin-top: 30px;
        border-radius: 15px;
        gap: 10px;
    }

    .service-section-banner .search-bar .search-icon,
    .service-section-banner .search-bar .search-location {
        width: 100%;
        margin-left: 0;
        padding-left: 15px;
        border-bottom: 1px solid rgba(139, 139, 139, 0.3);
        padding-bottom: 10px;
    }

    .service-section-banner .search-bar .search-location::before {
        display: none;
    }

    .service-section-banner .search-bar .search-icon:last-of-type,
    .service-section-banner .search-bar .search-location:last-of-type {
        border-bottom: none;
    }

    .service-section-banner .search-bar input {
        width: 100%;
        padding: 12px 48px 12px 15px;
    }

    .service-section-banner .search-bar .search-btn {
        width: 100%;
        padding: 12px 26px;
        margin-top: 10px;
        border-radius: 15px;
    }

    .btn-clear-search {
        top: 43% !important;
        right: 20px !important;
    }

    section.popular-services {
        padding-top: 50px;
        padding-bottom: 25px;
    }

    section.popular-services .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    h1.section-title {
        font-size: 28px;
        padding: 0 15px;
    }

    .popular-service-list {
        margin-top: 30px;
        /* padding: 0 15px; */
    }

    .popular-service-card .card-body {
        padding: 20px;
    }

    .popular-service-card h5 {
        font-size: 18px;
    }

    .filter-flex {
        gap: 20px;
    }

    .service-details-slider-div .owl-carousel .owl-nav button.owl-next,
    .service-details-slider-div .owl-carousel .owl-nav button.owl-prev,
    .service-details-slider-div .owl-carousel button.owl-dot {
        padding: 6px 10px !important;
        font-size: 18px !important;
    }

    .service-dashboard-contents div#tabContent {
        min-height: auto;
    }

    p.team-description {
        width: 100%;
    }

    section.hero-partnership .owl-carousel .owl-item img {
        width: 160px !important;
        height: 40px;
    }

    .header-flex2 {
        display: flex;
        align-items: center;
        gap: 0px;
    }

    .account-mobile-flex a {
        flex-direction: column;
        display: flex;
        align-items: center;
    }

    .account-mobile-flex img {
        width: 20px;
    }

    .account-mobile-flex span {
        font-size: 11px;
        display: block;
        text-transform: uppercase;
        color: black;
        margin-top: 5px;
    }

    .account-mobile-flex {
        margin-top: 5px;
    }

    .service-list-items {
        border-radius: 15px;
    }

    .price-list-book {
        justify-content: space-between;
    }

    .price-list-book button {
        padding: 5px 22px;
        font-size: 15px;
    }

    .notification-bell {
        font-size: 21px;
        color: #111;
    }

    span#notificationBadge {
        color: white;
    }

}

/* Extra small devices (phones, less than 480px) */
@media screen and (max-width: 480px) {
    .service-section-banner h1 {
        font-size: 24px;
        line-height: 32px;
    }

    .service-section-banner {
        padding-top: 30px;
        padding-bottom: 40px;
        margin-right: 0px;
        margin-left: 0px;
        padding-right: 10px;
        padding-left: 10px;
        margin-top: 0px;
    }

    .service-section-banner .search-bar {
        padding: 12px;
        margin-top: 20px;
    }

    h1.section-title {
        font-size: 24px;
    }

    section.popular-services {
        padding-top: 40px;
    }

    .popular-service-card .card-body {
        padding: 15px;
    }

    .popular-service-card h5 {
        font-size: 16px;
    }

    .popular-service-card img {
        height: 180px;
    }
}

/* Ensure service section container is responsive */
.service-section {
    overflow-x: hidden;
}

.service-section .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.popular-services .pagination {
    justify-content: center !important;
}

.popular-services .page-item.active .page-link {
    background-color: #2e8e61;
    border-color: #2e8e61;
}

.popular-services .page-link {
    color: #2e8e61;
    font-weight: 700;
    font-size: 15px;
}

.popular-services .page-link:focus {
    box-shadow: none;
    border-color: #2e8e61;
}

.account-actions {
    margin-top: auto;
    padding-top: 5px;
    border-top: 2px solid #dee2e6;
    position: absolute;
    bottom: 30px;
    width: 89%;
}

.account-actions a.dashboard {
    color: #2e8b57;
}

.account-actions a {
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1.1rem 0 0px;
    border-bottom: none;
    margin-bottom: 0px;
    font-size: 18px;
}

.account-actions a i {
    width: 5%;
}

.account-actions a.logout {
    color: #dc3545;
}

.overlay-content a i {
    margin-right: 16px;
}

#menuBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6); /* overlay color */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 998;
}

/* Show backdrop */
#menuBackdrop.active {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
    .service-section .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .popular-service-list .row {
        margin-left: 0;
        margin-right: 0;
    }

    .popular-service-list .col-lg-4,
    .popular-service-list .col-md-6,
    .popular-service-list .col-sm-12 {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media only screen and (min-width: 601px) and (max-width: 991px) {
    section.service-dashboard .form-section h4 {
        font-size: 30px;
    }

    .upload-images-preview {
        margin-top: 15px;
        justify-content: space-around;
        height: 200px;
        overflow: auto;
        padding-top: 10px;
    }

    div#tab3 .nxt-step-btn {
        bottom: 10px;
    }

    .mobile-menu {
        display: block;
    }

    .desktop-menu {
        display: none;
    }

    .mobile-menu .bi-list::before {
        content: "\f479";
        font-size: 31px;
    }

    #menuOverlay {
        background-color: rgb(255 255 255);
        width: 50%;
    }

    .overlay-content a {
        display: flex;
        align-items: center;
        margin: 5px 0 15px;
        font-size: 17px;
        padding: 10px;
        border-radius: 8px;
        color: black;
    }

    .banner-img {
        width: 70%;
        margin-right: auto;
        margin-left: auto;
    }

    .card-position-1 {
        top: 58%;
        left: 20px;
    }

    .card-position-2 {
        top: 45%;
        right: 60px;
    }

    .feature-card img {
        width: 60px;
    }

    .feature-card h6 {
        font-size: 19px;
    }

    section.banner-section .col-md-6 {
        width: 100%;
    }

    .feature-card {
        padding: 20px 6px 20px 18px;
        width: 300px;
        gap: 0px;
    }

    .button-margin {
        position: unset;
    }

    section.banner-section h1 {
        text-align: center;
        width: 100%;
    }

    section.banner-section p {
        text-align: center;
        width: 100%;
    }

    .button-margin {
        position: unset;
        justify-content: center;
        margin-top: 30px;
    }

    .gk-section .gk-contents .col-md-4 {
        width: 50%;
    }

    .gk-box {
        margin-bottom: 30px;
        padding: 45px 20px;
        width: 95%;
        height: 320px;
    }

    section.gk-service-section .col-md-4 {
        width: 50%;
    }

    section.gk-service-section .row {
        justify-content: center;
    }

    .gk-contents {
        margin-top: 60px;
    }

    .explore-salons .row>* {
        width: 50%;
    }

    .explore-salons .nav-tabs .nav-link {
        margin: 0 5px;
    }

    .our-partners-section .owl-carousel .owl-item img {
        width: 200px !important;
    }

    footer.footer .col-md-2 {
        width: 25%;
    }

    .social-icons {
        margin-bottom: 40px;
    }

    .p-width {
        margin-top: 10px;
        margin-bottom: 25px;
        width: 60%;
        margin-right: auto;
        margin-left: auto;
    }

    .footer {
        padding: 55px 20px 25px;
    }

    .col-md-4.mobile-center {
        flex: 0 0 auto;
        width: 100%;
        text-align: center;
    }

    .footer-bottom {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 20px;
    }

    .footer-location-details p {
        width: 100%;
    }

    .btn-green {
        margin-bottom: 20px;
    }

    .service-card {
        margin-right: auto;
        margin-left: auto;
    }

    .gk-box {
        margin-right: auto;
        margin-left: auto;
        width: 95%;
    }

    .vm-contents {
        left: 50px;
        right: 50px;
        padding: 50px 60px 100px;
        border-radius: 30px;
    }

    .vm-image {
        width: 100%;
        height: 490px;
    }

    .team-section {
        padding: 60px 30px 0px;
    }

    section.our-team-section .col-md-3 {
        flex: 0 0 auto;
        width: 50%;
    }

    .team-card img.team-photo {
        height: auto;
    }

    .contact-section .col-md-6 {
        width: 100%;
    }

    .contact-form {
        margin-top: 30px;
    }

    .right-section {
        position: relative;
        top: 0px;
        width: 100%;
        margin-left: 0px;
    }

    .login-section .signup-form {
        padding: 30px 10px;
        max-width: 75%;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;
    }

    .back-button {
        margin-left: 15px;
        margin-bottom: 10px;
        margin-top: 20px;
    }

    .signup-form {
        max-width: 100%;
        margin-top: 0px;
    }

    section.service-dashboard .col-md-3 {
        width: 40%;
    }

    section.service-dashboard .col-md-9 {
        width: 60%;
    }

    .service-pricing-details-div .col-md-4,
    .service-pricing-details-div .col-md-3 {
        width: 50% !important;
    }

    section.service-dashboard .form-section {
        padding: 40px 20px 20px 0px;
    }

    section.service-dashboard form {
        width: 100%;
    }

    .service-dashboard-contents .row,
    .service-dashboard-contents div#tabContent {
        min-height: 70dvh;
    }

    .nxt-step-btn {
        position: absolute;
        bottom: 40px;
        right: 7%;
    }

    .service-dashboard-sidemenu {
        border-radius: 20px;
        padding: 45px 5px 20px;
        height: calc(70dvh - 0px);
    }

    .industry-insights-content .col-md-6 {
        flex: 0 0 auto;
        width: 100%;
    }

    .contact-section {
        padding-right: 15px;
        padding-left: 15px;
    }

    .contact-details {
        margin-top: 20px;
    }

    section.hero-partnership {
        padding: 135px 0px 0px;
        height: 430px;
    }

    .partnership-content {
        padding-top: 0px;
    }

    .partnership-subtitle {
        margin-bottom: 20px;
        font-size: 20px;
    }

    .cta-button {
        padding: 11px 33px;
        font-size: 14px;
    }

    .partners-brand {
        margin-top: 35px;
    }

    .partnership-title {
        font-size: 35px;
    }

    /* Service page tablet responsive styles */
    .service-section-banner {
        margin-right: 20px;
        margin-left: 20px;
        padding-top: 60px;
        padding-bottom: 70px;
        background-size: cover;
    }

    .service-section-banner h1 {
        width: 90%;
        font-size: 42px;
        line-height: 55px;
    }

    .service-section-banner .search-bar {
        max-width: 90%;
        padding: 8px 8px 8px 25px;
    }

    section.popular-services {
        padding-top: 70px;
        padding-bottom: 30px;
    }

    h1.section-title {
        font-size: 34px;
    }

    p.team-description {
        width: 100%;
    }

    section.hero-partnership .owl-carousel .owl-item img {
        width: 170px !important;
        height: 45px;
    }

    .header-section .bi-speedometer2::before {
        content: "\f580";
        font-size: 20px;
        margin-right: 8px;
        font-weight: 600 !important;
    }

    .header-section .bi-box-arrow-right::before {
        content: "\f1c3";
        font-size: 20px;
        font-weight: 600 !important;
        /* margin-top: 4px; */
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

    .footer-bottom {
        grid-template-columns: 335px 260px 375px;
    }

    /* Service page medium desktop responsive styles */
    .service-section-banner h1 {
        width: 85%;
        font-size: 50px;
        line-height: 65px;
    }

    .service-section-banner .search-bar {
        max-width: 80%;
    }

    .mobile-menu {
        display: none;
    }

    .container {
        max-width: 960px;
    }

    section.banner-section h1 {
        font-size: 37px;
        line-height: 45px;
    }

    .feature-card {
        padding: 16px 6px 16px 15px;
        width: 250px;
        gap: 0px;
    }

    .feature-card img {
        width: 50px;
    }

    .feature-card h6 {
        font-size: 16px;
    }

    .card-position-2 {
        top: 47%;
        right: -23px;
    }

    .card-position-1 {
        left: -76px;
    }

    .gk-box {
        padding: 40px 20px;
        width: 100%;
        height: 310px;
    }

    .insights-card-left h5 {
        margin-top: 0px;
        margin-bottom: 12px;
    }

    .insights-card-left .card-text {
        height: 70px;
    }

    .service-card {
        height: 320px;
        width: 100%;
    }

    .service-card .icon-image {
        width: 85%;
    }

    .insights-card-right p.card-text {
        margin-top: 9px;
        height: 55px;
    }

    .insights-card-right h5 {
        width: 95%;
    }

    .our-partners-section .owl-carousel .owl-item img {
        width: 180px !important;
        height: 50px;
    }

    .vm-contents {
        left: 50px;
        right: 50px;
        border-radius: 30px;
    }

    .team-card img.team-photo {
        height: auto;
    }

    .team-section {
        padding: 60px 0px 0px;
    }

    section.hero-partnership .owl-carousel .owl-item img {
        width: 170px !important;
        height: 50px;
    }

    .partners-brand {
        margin-top: 80px;
        width: 100%;
    }

    .right-section {
        width: 50%;
        height: 635px;
    }

    .right-text h2 {
        bottom: 25px;
        left: 30px;
        font-size: 47px;
    }

    .service-dashboard-sidemenu {
        border-radius: 20px;
    }

    section.service-dashboard .form-section {
        padding: 40px 10px 20px 10px;
    }

    section.service-dashboard .col-md-9 {
        width: 65%;
    }

    section.service-dashboard .col-md-3 {
        width: 33%;
    }

    .service-dashboard-sidemenu {
        padding: 45px 0px 20px;
        border-radius: 20px;
    }

    p.contact-content {
        width: 90%;
    }

    .partnership-title {
        font-size: 34px;
    }

    .partnership-subtitle {
        font-size: 33px;
        margin-bottom: 30px;
    }

    .about-us-banner-content h1 {
        font-size: 35px;
    }

    section.service-dashboard form {
        width: 100%;
    }

    .upload-images-preview img {
        width: 130px;
    }

    .upload-images-preview {
        justify-content: center;
    }

    section.sign-up-section {
        padding-bottom: 5%;
    }

    .signup-form {
        max-width: 350px;
        margin-top: 20px;
    }

    section.forgot-password {
        padding-bottom: 0px !important;
    }

    .step-tabs {
        margin-top: 60px;
    }

    p.team-description {
        width: 100%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .card-position-2 {
        top: 46%;
        right: -23px;
    }

    .feature-card {
        padding: 20px 6px 20px 14px;
        width: 290px;
        gap: 0px;
    }

    .card-position-1 {
        top: 59%;
        left: -75px;
    }


    .vm-contents {
        border-radius: 30px;
    }

    p.contact-content {
        width: 90%;
    }

    .right-text h2 {
        left: 35px;
        font-size: 50px;
    }

    .right-section {
        width: 45%;
    }

    .signup-form {
        max-width: 400px;
        margin-left: 50px;
    }
}

@media (min-width: 1400px) {

    /* Desktop and up */
    .testimonial-section .owl-item {
        width: 380px !important;
        margin-right: 25px !important;
    }

    .our-partners-section .owl-item {
        width: 296px !important;
    }

}

/* Mobile Menu Overlay */
.search-icon {
    position: relative;
}


/* Clear icon color */
.search-bar .btn-clear-search i {
    color: #000;
    font-size: 25px;
    font-weight: 800;
    margin-right: -23px;
}

/* Hover effect (optional, subtle) */
.search-bar .btn-clear-search:hover i {
    color: rgb(11 127 73);
}

/* Remove focus outline */
.search-bar .btn-clear-search:focus,
.search-bar .btn-clear-search:active {
    outline: none;
    box-shadow: none;
}


.btn-clear-search {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.popular-service-card {
    cursor: pointer;
    transition: transform 0.2s;
}

.popular-service-card:hover {
    transform: translateY(-5px);
}

.service-details-card {
    padding: 15px;
}

.custom-card-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.rating-div {
    font-size: 0.9rem;
}

.rating {
    color: #ffc107;
}

.category-btn {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    padding: 5px 15px;
    font-size: 0.85rem;
}

/* Skeleton Loading Styles */
.skeleton-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

.skeleton-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

.skeleton-title {
    width: 80%;
    height: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    margin-bottom: 10px;
    border-radius: 4px;
}

.skeleton-text {
    width: 60%;
    height: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.limit-text-multi {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Optional, ensures ... */
}

.limit-text {
    /* Keep text in one line */
    overflow: hidden;
    /* Hide extra text */
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    /* Add ... */
    /* Required: set fixed width */
    display: -webkit-box;
    /* Or inline-block */
}

.limit-text-single {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

ul.mission-points ul {
    list-style: none;
}


/* updated by amal on 08/12/2025 START */
.notification-popup {
    position: absolute;
    top: 120%;
    right: 0;
    width: 460px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    z-index: 9999;
    overflow: hidden;
}

.notification-header {
    padding: 16px 18px;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid #e5e5e5;
    text-align: left;
}

.notification-card {
    display: flex;
    /* align-items: center; */
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    margin: 10px 12px;
    cursor: pointer;
    transition: 0.2s;
    background: #fff;
    text-align: left;
}

.notification-card.unread {
    background: #eef8ee;
}

.notification-card:hover {
    background: #e9f7ec;
}

.notif-title {
    font-size: 40px;
    /* ✅ match your original design */
    font-weight: 800;
    line-height: 1.2;
}


/* ✅ Left Icon Box */
.notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 12px;
}

/* ✅ Green Success */
.notif-success {
    background: #cfffb996;
    color: rgba(11, 127, 73, 1);
}

/* ✅ Red Cancellation */
.notif-danger {
    background: #fee2e2;
    color: #b91c1c;
}

/* ✅ Center Content */
.notif-content {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.notif-content p {
    margin: 0;
    font-size: 13.5px;
    color: #666;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ✅ Right Time */
.notif-time {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
}


/* ✅ Show All Button */
.notification-footer {
    padding: 14px;
    border-top: 1px solid #eee;
}

.notif-close-btn {
    background: transparent;
    border: none;
    font-size: 28px;
    font-weight: bold;
    color: #777;
    cursor: pointer;
    line-height: 1;
}

.notif-close-btn:hover {
    color: #000;
}

.notification-popup .notification-header .notif-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #000;
}

.notification-popup .notification-header {
    font-size: 15px;
}

.show-all-btn {
    display: block;
    width: 100%;
    padding: 10px 0;
    border: 1.5px solid #bdbdbd;
    border-radius: 12px;
    background: #fff;
    color: #000;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: 0.2s ease;
}

.show-all-btn:hover {
    background: #f3f3f3;
    color: #000;
}

/* END  */


/* Add padding top & bottom to modal */
.booking-success-content {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 61px 50px;
    gap: 15px;
    margin: auto;
}

/* Custom green close button */
.btn-success-custom {
    background-color: #28a745;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
}

.btn-success-custom:hover {
    background-color: #218838;
    color: #fff;
}

.booking-success-modal .modal-dialog {
    max-width: 700px;
}

/* Mobile fixes for forgot-password page */
@media (max-width: 768px) {
    section.forgot-password {
        padding: 20px 0 40px;
    }

    .step-tabs .nav-link {
        width: 50px;
    }

    .forgot-password-card {
        min-height: auto;
        padding: 0 12px 20px;
        display: block;
    }

    .password-right-section {
        display: none;
    }

    .password-right-section img,
    img.forgot-password-right-img,
    img.set-new-password-img {
        width: 260px;
        height: auto;
        rotate: 0deg;
        display: block;
        margin: 0 auto;
    }



    .forgot-password-headings {
        text-align: center;
        padding-top: 6px;
    }

    .forgot-password-headings h1 {
        font-size: 26px;
        margin-top: 12px;
    }

    .forgot-password-headings p {
        font-size: 15px;
    }

    .step-tabs {
        margin-top: 25px;
    }

    .otp-input {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .resend-email {
        align-items: center;
    }

    .password-all-done-step h1 {
        font-size: 30px;
    }

    .password-all-done-step img {
        width: 100px;
        height: 100px;
    }

    .password-all-done-step p {
        font-size: 20px;
    }
}

/* Tablet / small-desktop fixes (769px - 1199px) */
@media (min-width: 769px) and (max-width: 1199px) {
    section.forgot-password {
        padding: 30px 0 40px;
    }

    /* Let Bootstrap columns control layout instead of absolute positioning */
    .password-right-section {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        background: transparent !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 18px 0 6px;
    }

    /* Scale down images for mid-size screens */
    .password-right-section img,
    img.forgot-password-right-img,
    img.set-new-password-img {
        width: 340px;
        max-width: 90%;
        height: auto;
        rotate: 0deg;
        margin: 0 auto;
        display: block;
    }

    .forgot-password-card {
        min-height: auto;
        padding-bottom: 20px;
    }

    .signup-form {
        max-width: 420px;
        margin: 0 auto;
        padding: 0 12px;
    }

    .step-tabs {
        margin-top: 45px;
    }

    .step-tabs .nav-link {
        width: 64px;
    }
}

/* Signup button hover animation */
.signup-btn {
    position: relative;
    overflow: hidden;
    transition: transform 220ms cubic-bezier(.2, .9, .4, 1), box-shadow 220ms ease, background-position 600ms ease;
    transform-origin: center;
    will-change: transform;
}

.signup-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
    opacity: 0;
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
}

.signup-btn:hover,
.signup-btn:focus {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 20px rgba(1, 104, 63, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.signup-btn:hover::after,
.signup-btn:focus::after {
    opacity: 1;
}

.signup-btn:active {
    transform: translateY(-1px) scale(0.995);
    box-shadow: 0 6px 15px rgba(1, 104, 63, 0.14);
}

.signup-btn:focus-visible {
    outline: 3px solid rgba(0, 104, 63, 0.12);
    outline-offset: 3px;
}

.header-username {
    max-width: 120px;
    /* adjust based on header space */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

.shop-time {
    min-height: auto !important;
    margin-bottom: 20px;
}

.near-me-btn.active {
    background: linear-gradient(117.51deg, #0B7F49 38.45%, #47C98C 123.14%) !important;
    color: #fff !important;
}

.near-me-btn.active i {
    color: #fff;
}

/* Add to your stylesheet or <style> tag */
.form-floating .btn {
    padding: 0;
    line-height: 1;
    z-index: 5;
    color: #000000;
}

.form-floating input.form-control {
    padding-right: 3.5rem !important;
    /* Extra space for icon */
}

.error-popup .modal-header {
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
}

.error-popup .btn-close {
    opacity: 1;
}

.error-btn {
    font-weight: 600;
    padding: 10px;
}

.error-popup .modal-content {
    border-radius: 17px;
}

.error-popup .modal-title {
    font-size: 18px;
}

.error-popup .modal-title {
    font-size: 18px;
}

.error-popup .modal-body {
    padding: 50px 50px 30px;
}

.error-popup .modal-body p {
    font-size: 16px;
    color: #313131;
    margin-bottom: 16px;
    line-height: 1.5;
    font-weight: 600;
}

.salon-info p a {
    text-decoration: none !important;
    color: rgba(101, 101, 101, 1);
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 38px;
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
}