@media (max-width: 786px) {
    .top-bar {
        padding: 10px 0;
    }
    .jp-top-btn {
        display: none;
    }
    .header {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        align-items: center;
        width: 100%;
        max-width: none;
        margin: 0;
        min-height: 74px;
        padding: 10px 16px;
        gap: 8px;
        border-radius: 0;
        box-shadow: none;
        border-left: none;
        border-right: none;
    }
    .logo {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        width: auto;
        max-width: 100%;
        margin-left: 0;
        padding: 0 6px;
        align-items: center;
        text-align: center;
        justify-self: center;
    }
    .logo-mark {
        font-size: 1.55rem;
    }
    .logo-subtitle {
        display: none;
    }
    .header-icons {
        position: relative;
        margin-left: 0;
        justify-self: end;
        gap: 6px;
    }
    .nav-toggle-btn,
    .header-action-btn,
    .jp-inline-search {
        width: 40px;
        min-width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .jp-inline-search {
        padding: 0 10px;
    }
    .jp-inline-search.active {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: min(220px, calc(100vw - 32px));
        z-index: 15;
    }
    .jp-inline-search.active .jp-inline-form {
        width: calc(100% - 30px);
    }
    .jp-inline-form input {
        width: 100%;
        margin-top: 0;
        padding-left: 8px;
    }
    .mobile-brand-mark {
        font-size: 1.55rem;
    }
    .mobile-brand-copy {
        font-size: 0.58rem;
        letter-spacing: 0.2em;
    }
}

@media(max-width:786px) {
    .cart-title {
        font-size: 32px;
        line-height: 1.1;
    }
    .product-row {
        text-align: center;
    }
    .qty-box {
        margin-left: 0;
        margin-right: 0;
        justify-content: center;
    }
    .cart-modal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    .cart-modal .modal-content {
        margin-top: 0;
        max-height: calc(100vh - 20px);
        max-height: calc(100svh - 20px);
        overflow: hidden;
    }
    .cart-modal .modal-body {
        max-height: calc(100vh - 140px);
        max-height: calc(100svh - 140px);
        overflow-y: auto;
    }
}


/* Mobile */

@media (max-width: 786px) {
    .contact-popup {
        align-items: flex-start;
        padding: 10px;
        overflow-y: auto;
    }
    .contact-popup-inner {
        max-width: 100%;
        width: 100%;
        margin: 10px auto 20px;
        padding: 18px 16px;
        border-radius: 12px;
        max-height: unset;
    }
    .popup-close {
        top: 8px;
        right: 12px;
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .offcanvas-body ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .offcanvas-header {
        padding: 20px 18px 10px;
    }
    .mobile-navbar {
        padding: 0 14px 10px;
    }
    .mobile-nav-list {
        gap: 6px;
    }
    .mobile-nav-list>li {
        margin-bottom: 20px;
    }
    .mobile-submenu {
        display: none;
        padding: 12px 0 2px 14px;
        background: transparent;
    }
    .mobile-drop.active>.mobile-submenu {
        display: block;
        animation: slideDown 0.3s ease;
    }
    .mobile-submenu>li>a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 14px;
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        color: #fff;
        border-left: none;
    }
    .mobile-submenu-inner {
        display: none;
        padding: 10px 0 2px 14px;
        background: transparent;
    }
    .mobile-drop-inner.active>.mobile-submenu-inner {
        display: block;
        animation: slideLeft 0.3s ease forwards;
    }
    .mobile-submenu-inner li a {
        display: block;
        padding: 4px 0;
        font-size: 0.84rem;
        color: rgba(255, 255, 255, 0.76);
    }
    .mobile-drop i,
    .mobile-drop-inner i {
        transition: 0.3s;
    }
    .mobile-drop.active>a i,
    .mobile-drop-inner.active>a i {
        transform: rotate(180deg);
    }
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes slideLeft {
        from {
            opacity: 0;
            transform: translateX(-15px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}


/* ---------------------------------------------HERO SECTION---------------------------------------------- */

@media (max-width: 768px) {
    #pageLoader {
        padding: 16px;
    }
    .jp-loader-ring {
        width: 56px;
        height: 56px;
        margin-bottom: 18px;
    }
    .jp-loader-ring span {
        width: 36px;
        height: 36px;
    }
    .jp-loader-status {
        gap: 8px;
        font-size: 0.72rem;
        letter-spacing: 0.07em;
    }
    .carousel-item {
        height: clamp(500px, calc(100vh - 132px), 620px);
        height: clamp(500px, calc(100svh - 132px), 620px);
    }
    .carousel-item img {
        height: 100%;
        object-fit: cover;
    }
    .carousel-caption h2 {
        font-size: 30px;
        font-weight: 600;
    }
    .carousel-caption p {
        font-size: 15px;
        width: auto;
        max-width: 100%;
    }
    .carousel-btn {
        padding: 14px 25px;
        /* Smaller button */
        font-size: 14px;
    }
    .slider-btn {
        width: 40px;
        height: 40px;
    }
    .carousel-control-prev {
        left: 10px;
    }
    .carousel-control-next {
        right: 10px;
    }
    .jp-hero-caption {
        left: 0;
        right: 0;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .jp-hero-layout {
        width: calc(100% - 24px);
        max-width: 560px;
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
    }
    .jp-hero-copy-col {
        padding: 18px 14px;
        border-radius: 24px;
    }
    .jp-hero-eyebrow {
        font-size: 0.62rem;
        letter-spacing: 0.08em;
    }
    .jp-hero-title {
        margin-top: 12px;
        font-size: clamp(1.55rem, 7.2vw, 2.15rem);
        line-height: 1.05;
    }
    .jp-hero-copy {
        margin-top: 10px;
        font-size: 0.91rem;
        line-height: 1.5;
    }
    .jp-hero-action-row {
        margin-top: 16px;
        justify-content: flex-start;
    }
    .jp-hero-link {
        padding: 8px 0;
    }
    .jp-hero-metrics {
        margin-top: 16px;
        justify-content: flex-start;
    }
    .jp-hero-metric {
        min-width: 115px;
        flex: 1 1 calc(50% - 8px);
    }
    .jp-hero-showcase {
        display: none;
    }
    .jp-hero-floating-chip {
        display: none;
    }
    .jp-hero-orb-one,
    .jp-hero-orb-two {
        opacity: 0.35;
    }
}

@media (max-width: 992px) and (min-width: 769px) {
    .carousel-item {
        height: clamp(560px, 75vh, 640px);
    }
    .jp-hero-layout {
        width: calc(100% - 40px);
        max-width: 940px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
        gap: 18px;
        margin-left: auto;
        margin-right: auto;
    }
    .jp-hero-copy-col {
        padding: 24px 22px;
    }
    .jp-hero-title {
        font-size: clamp(2rem, 4.5vw, 2.8rem);
    }
    .jp-hero-showcase-card {
        left: 0;
        max-width: 228px;
    }
    .jp-hero-floating-chip {
        left: 18px;
        bottom: 18px;
        font-size: 0.8rem;
    }
    
}

@media (max-width: 992px) {
    .jp-limelight-section {
        padding: 72px 16px 60px;
    }
    .jp-limelight-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .jp-limelight-top {
        margin-bottom: 24px;
    }
    .jp-limelight-visual {
        min-height: 460px;
    }
    .jp-float-one {
        left: 6px;
    }
    .jp-float-two {
        right: 2px;
        bottom: 56px;
    }
}

@media (max-width: 768px) {
    .jp-limelight-top h2 {
        font-size: clamp(1.65rem, 8vw, 2.35rem);
        line-height: 1.1;
        text-align:center;
    }
    .jp-limelight-top p {
        font-size: 0.93rem;
        text-align: justify;
    }
    .jp-limelight-top {
        text-align: left;
        margin-bottom: 20px;
    }
    .jp-limelight-main-card {
        padding: 18px 14px;
        border-radius: 20px;
    }
    .jp-limelight-main-card h3 {
        font-size: 1.5rem;
    }
    .jp-limelight-main-card p {
        font-size: 0.92rem;
    }
    .jp-limelight-main-meta {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .jp-limelight-btn {
        width: 100%;
        justify-content: center;
    }
    .jp-limelight-visual {
        min-height: 360px;
    }
    .jp-limelight-ring {
        width: min(90vw, 340px);
    }
    .jp-limelight-photo {
        width: min(88vw, 268px);
    }
    .jp-limelight-float-card {
        max-width: 176px;
        padding: 9px 10px;
    }
    .jp-float-one {
        top: 300px !important;
        left: 0;
    }
    .jp-float-two {
        right: 0;
        bottom: 24px;
    }
    .jp-limelight-track {
        gap: 20px;
        padding: 11px 0;
    }
    .jp-limelight-track span {
        font-size: 0.72rem;
    }
    .jp-limelight-track span::after {
        margin-left: 20px;
    }
}

@media (max-width: 786px) {
    .doctor-popup-overlay {
        height: 100vh;
        height: 100svh;
        align-items: flex-start;
        padding: 10px;
        overflow-y: auto;
    }
    .doctor-popup-box {
        width: 100%;
        max-width: 100%;
        margin: 115px auto 20px;
        padding: 18px 14px;
        border-radius: 12px;
    }
    .doctor-popup-left img {
        width: 87%;
        height: auto;
        max-height: 210px;
        object-fit: cover;
        border-radius: 8px;
    }
    .doctor-popup-right h2 {
        font-size: 26px;
        line-height: 1.2;
    }
    .doctor-popup-right h3 {
        font-size: 20px;
    }
    .doctor-popup-right p {
        font-size: 14px;
        line-height: 1.5;
        text-align: justify;
    }
}


/*-----------------------------------------------about area index page------------------------------*/

@media (max-width: 786px) {
    .about-area {
        padding: 13px 15px;
       
    }
    .about-title {
        font-size: 30px;
    }
    .about-stats {
        flex-direction: column;
    }
    .about-media {
        min-height: auto;
    }
    .about-image {
        position: relative;
        width: 100%;
        height: 466px;
        border-radius: 200px;
        margin-bottom: 20px;
    }
    .text-light {
    margin: 13px 0 33px;
  }
}


/*--------------------------------------------about section responsive----------------------------*/

@media (max-width: 768px) {
    .about-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    .about-media {
        width: 100%;
        min-height: auto;
        position: static;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    .about-image {
        position: relative;
        width: 280px;
        height: 400px;
        border-radius: 200px;
    }
    .about-image-primary,
    .about-image-secondary {
        top: 0;
        left: 6px;
        right: 0;
        width: 343px;
        height: 435px;
    }
    .about-info {
        width: 100%;
        text-align: center;
    }
    .about-title {
        font-size: 27px;
        line-height: 1.3;
    }
    .about-text {
        font-size: 13px;
        margin-left: 12px;
    }
    .about-stats {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .stat-item {
        width: 100%;
        max-width: 330px;
        padding: 20px 0;
    }
    .about-btn {
        padding: 18px 32px;
        margin-top: 29px;
    }
}


/* -----------------------about page--------------------- */

@media (max-width: 768px) {
    .ab-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }
    .ab-img-pri {
        width: 100%;
        max-width: 350px;
        height: auto;
        transform: translateY(0);
        margin-bottom: 20px;
    }
}


/*------------------------------------------------services--------------------------------------*/

@media (max-width: 768px) {
    .services-area {
        padding: 70px 15px;
    }
    .services-header h2 {
        font-size: 28px;
        line-height: 1.3;
    }
    .services-header p {
        font-size: 14px;
    }
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .service-card,
    .service-card-reverse {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
        border-radius: 180px;
        height: auto;
        position: relative;
        overflow: visible;
    }
    .service-image {
        width: 100%;
        height: 293px;
        margin-bottom: 50px;
        border-radius: 47%;
    }
    .service-content {
        padding-left: 0;
    }
    .service-content h3 {
        font-size: 18px;
    }
    .service-content p {
        font-size: 14px;
        margin-bottom: 38px;
    }
    .service-content a {
        font-size: 14px;
        display: inline-block;
    }
    .corner-ribbon {
        display: none;
    }
    .mobile-price {
        display: flex;
        position: absolute;
        top: -1px;
        right: 43px;
        width: 85px;
        height: 80px;
        background: #253551;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        z-index: 10;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    }
}


/*-------------------------------------------------------why choose us--------------------------------*/

@media (max-width: 768px) {
    .choose-wrapper {
        flex-direction: column;
        gap: 35px;
    }
    .choose-left,
    .choose-right {
        width: 100%;
    }
    .choose-right {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .choose-card {
        width: 100%;
        height: auto;
        padding: 28px 22px 28px 26px;
    }
    .choose-image {
        width: 100%;
        max-width: 330px;
        height: 230px;
        margin: auto;
    }
    .choose-title {
        font-size: 30px;
        text-align: center;
    }
    .choose-tag {
        text-align: center;
        display: block;
    }
    .check-icon {
        left: 18px;
        top: 22px;
    }
}


/*---------------------------------------------------testimonial,our team----------------------------------*/

@media (max-width: 768px) {
    .testimonial-header h2 {
        font-size: 28px;
    }
    .testimonial-card {
        padding: 35px;
        border-radius: 0 0 0 100px;
    }
}


/*----------------------------------------------before after------------------------------------*/

@media (max-width: 786px) {
    .ba-gallery-section {
        padding: 40px 20px;
    }
    .ba-gallery-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    .ba-left-area,
    .ba-right-area {
        flex: unset;
        width: 100%;
        padding-left: 0;
    }
    .ba-card-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .ba-slider-card {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
    }
    .ba-img img {
        object-fit: cover;
    }
    .ba-small-title {
        font-size: 16px;
        letter-spacing: 2px;
    }
    .ba-title {
        font-size: 28px;
    }
    .ba-text {
        font-size: 14px;
        line-height: 1.6;
    }
    .ba-view-btn {
        padding: 10px 25px;
        font-size: 14px;
    }
    .ba-slider-handle {
        width: 50px;
        height: 50px;
        font-size: 10px;
    }
    .ba-label {
        font-size: 11px;
        padding: 4px 10px;
    }
}


/*------------------------------------------------------contact us------------------------------*/

@media (max-width: 768px) {
    .container {
        max-width: 100%;
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    .content {
        order: 1;
    }
    .image-wrapper {
        order: 2;
    }
    .mobile {
        display: block;
    }
    .desktop {
        display: none;
    }
    .image-circle {
        width: 100%;
        height: 490px;
        margin: 0 auto;
    }
    .image-circle img {
        border-radius: 150px;
    }
    .content h1 {
        font-size: 34px;
    }
    .content p {
        font-size: 15px;
        max-width: 100%;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
    .contact-form {
        max-width: 100%;
    }
    .contact-form input {
        width: 100%;
    }
    .contact-form textarea {
        width: 100%;
        padding-right: 30px;
    }
    .contact-form button {
        width: 100%;
    }
}


/*-------------------------------------------blog Area---------------------------------------*/

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .blog-img {
        height: 240px;
    }
    .blog-header h2 {
        font-size: 30px;
    }
    .blog-card:hover .blog-img img {
        transform: none;
    }
}


/*-----------------------------------------footor area-------------------------------------------*/

@media (max-width: 768px) {
    .footer {
        padding: 0px 20px;
         
    }
    .footer-container {
        flex-direction: column;
        gap: 40px;
    }
    .footer-left {
        order: 1;
        max-width: 100%;
    }
    .footer-right {
        order: 1;
        max-width: 100%;
    }
    .footer-links {
        order: 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3px;
        margin-left: 5px;
    }
    .footer-links .contact {
        order: 3;
        grid-column: 0 / -1;
    }
    .social-icons {
        order: 4;
        margin-top: 25px;
    }
    .newsletter {
        order: 5;
        margin-top: 35px;
    }
    .footer-right {
        padding-left: 0;
        gap: 35px;
    }
    .subscribe-form {
        flex-direction: column;
        gap: 12px;
    }
    .subscribe-form input,
    .subscribe-form button {
        width: 100%;
    }
    .logo-section h2 {
        font-size: 55px;
    }
    .quick-link {
        display: none;
    }
     .footer-bottom {
      display: none;    
    }
}


/*-----------------------------------------------------about page----------------------------------------------*/

@media (max-width: 786px) {
    .our-value.reverse-layout .value-container {
        direction: ltr;
        grid-template-columns: 1fr;
        margin-right: 0;
    }
    .our-value.reverse-layout .value-container {
        display: grid;
    }
    .our-value.reverse-layout .value-left {
        display: contents;
    }
    .our-value.reverse-layout .section-tag {
        grid-row: 1;
    }
    .our-value.reverse-layout .value-left>h2 {
        grid-row: 2;
    }
    .our-value.reverse-layout .value-right {
        grid-row: 3;
        margin: 25px 0;
    }
    .our-value.reverse-layout .value-card:nth-of-type(1) {
        grid-row: 4;
    }
    .our-value.reverse-layout .value-card:nth-of-type(2) {
        grid-row: 5;
    }
    .our-value.reverse-layout .value-card:nth-of-type(3) {
        grid-row: 6;
    }
    .our-value.reverse-layout .value-right img {
        width: 100%;
        height: 500px;
        border-radius: 0px 184px 184px 0px;
        margin-top: -70px;
    }
    .our-value.reverse-layout .value-left {
        width: 100%;
        height: auto;
    }
    .our-value.reverse-layout .value-card {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 768px) {
    .breadcrumb-hero-content {
        border-radius: 75px;
        padding: 60px 20px;
    }

    .breadcrumb-hero-content h1 {
        font-size: 25px;
    }

    .breadcrumb {
        font-size: 10px;
    }

    .our-value {
        padding: 50px 0;
    }
    .value-container {
        display: flex;
        flex-direction: column;
        padding: 0 18px;
        gap: 25px;
    }
    .value-right {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding-top: 0;
    }
    .value-heading {
        position: static;
        order: 1;
        top: 0px;
    }
    .value-right img {
        height: 339px;
        width: 335px;
    }
    .our-value-reverse {
        order: 2;
        width: 340px;
        height: 300px;
        display: block;
        border-radius: 0 140px 140px 0;
    }
    .value-left {
        order: 3;
        display: flex;
        flex-direction: column;
        gap: 18px;
        width: auto;
        height: auto;
    }
    .value-card {
        width: 100%;
        height: auto;
        padding: 22px;
        border: 2px solid #002856;
        border-radius: 0px 100px 100px 0px;
        margin: 0;
    }
    .value-card h2 {
        line-height: 1.2;
        margin-bottom: 10px;
        color: #002856;
    }
}

@media (max-width: 768px) {
    .team-header {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 50px;
    }
    .team-title h2 {
        font-size: 30px;
    }
    .team-desc {
        max-width: 100%;
    }
    .team-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .team-card img {
        height: 450px;
        width: 300px;
        
    }
}


/* ------------------------------------------career------------------------------------ */

@media (max-width: 786px) {
    .career-pro-section {
        padding: 11px;
    }
    .career-pro-search {
        padding: 25px;
        border-radius: 20px;
    }
    .career-pro-input {
        height: 55px;
        font-size: 16px;
        margin-bottom: 15px;
    }
    .career-pro-search-btn {
        height: 55px;
        font-size: 16px;
        width: 100%;
    }
    .career-pro-card {
        padding: 30px 20px;
        border-radius: 20px;
    }
    .career-pro-icon {
        width: 80px;
        height: 80px;
        font-size: 30px;
        border-radius: 20px;
        margin-bottom: 15px;
    }
    .career-pro-title {
        font-size: 22px;
    }
    .career-pro-meta span {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
    }
    .career-pro-desc {
        font-size: 14px;
        max-width: 100%;
    }
    .career-pro-outline,
    .career-pro-primary {
        width: 100%;
        font-size: 15px;
        padding: 12px;
        margin-bottom: 10px;
    }
}


/*------------------------------------------- FAQ Responsive --------------------------------------------*/

@media (max-width: 768px) {
    .contact-hero-content {
        border-radius: 75px;
        padding: 97px 26px 85px 21px;
    }
    .contact-hero-content h1 {
        font-size: 32px;
    }
    .faq-wrapper {
        padding: 30px;
    }
    .faq-title {
        font-size: 32px;
    }
    .accordion {
        margin-top: 0;
    }
    .faq-section {
        padding: 0;
    }
    .choose-img {
        max-width: 100%;
    }
}


/*----------------------------------------------product page ----------------------------*/

@media (max-width: 992px) {
    .cta-health-inner {
        flex-direction: column;
        text-align: center;
    }
    .cta-health-left,
    .cta-health-right {
        width: 100%;
    }
    .cta-health-heading {
        font-size: 40px;
        margin-right: 11px;
    }
    .cta-health-right {
        margin-top: 30px;
        text-align: center;
    }
    .cta-health-btn {
        margin-left: 85px;
    }
}

@media (max-width: 768px) {
    .jp-row-gap {
        row-gap: 30px;
    }
    .jp-blob-item {
        margin-bottom: -21px;
    }
    .jp-blob-shape {
        width: 180px;
        height: 170px;
    }
    .jp-blob-title {
        font-size: 35px;
        margin-bottom: 20px;
        margin-top: -24px;
    }
}

@media (max-width: 786px) {
    .zx-beauty-section,
    .qx-beauty-section {
        padding: 40px 20px;
    }
    .zx-beauty-inner,
    .qx-beauty-inner {
        width: 100%;
    }
    .zx-card-img,
    .qx-card-img {
        height: 450px;
    }
    .zx-card-overlay,
    .qx-card-overlay {
        position: absolute;
        top: 25px;
        bottom: 25px;
        left: 25px;
        right: 25px;
        width: auto;
        padding: 30px 20px;
    }
    .qx-overlay-right {
        right: 25px;
        left: 25px;
    }
    .zx-card-title,
    .qx-card-title {
        font-size: 24px;
    }
    .zx-card-text,
    .qx-card-text {
        font-size: 14px;
    }
    .zx-card-icon,
    .qx-card-icon {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
    .zx-card-price,
    .qx-card-price {
        padding: 8px 16px;
        font-size: 14px;
    }
    .col-lg-6 {
        margin-bottom: 25px;
    }
    .image-section {
        padding: 40px 20px;
    }
    .card-animation img {
        height: 300px;
    }
    .overlay {
        opacity: 0;
        padding: 20px;
    }
    .overlay h2 {
        font-size: 22px;
    }
    .overlay h6 {
        font-size: 14px;
    }
    .overlay p {
        font-size: 14px;
    }
    .card-animation {
        margin-bottom: 20px;
    }
}


/*-----------------------------------------------------------------single post page-------------------------------------*/

@media (max-width: 768px) {
    .content-wrapper {
        padding: 0 20px;
        max-width: 100%;
    }
    .blog-section {
        margin-top: 40px;
    }
    /* Featured Image */
    .single-image-wrapper {
        height: auto;
        border-radius: 40px;
    }
    .single-featured-img {
        width: 100%;
        /* remove fixed 900px */
        height: auto;
    }
    /* Text */
    .single-blog-text p,
    .single-left-text p {
        font-size: 15px;
        line-height: 1.8;
    }
    /* Two Column → Single Column */
    .two-col-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    .single-left-text,
    .single-right-image {
        flex: 0 0 100%;
    }
    .single-side-image-wrapper {
        max-width: 100%;
        height: auto;
        border-radius: 40px;
    }
    .single-side-img {
        height: auto;
    }
    /* Footer */
    .single-blog-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .tags,
    .share {
        flex-wrap: wrap;
        gap: 12px;
    }
}


/* --------------------------------------------------Services category subcategory -------------------------------------------------------------*/


/* =========================================
   RESPONSIVE FIX – 768px
========================================= */

@media (max-width: 768px) {
    .dermal-section {
        padding: 0px 15px;
    }
    .dermal-wrapper {
        flex-direction: column;
        width: 100%;
        gap: 40px;
    }
    .dermal-sidebar {
        width: 100%;
        position: static;
        top: auto;
    }
    .dermal-category-box {
        padding: 25px;
        border-radius: 18px;
        display: none;
    }
    .dermal-category-box h4 {
        font-size: 20px;
        text-align: left;
    }
    .dermal-left-card {
        width: 100%;
        height: 280px;
        border-radius: 18px;
        margin-top: 20px;
        display: none;
    }
    .dermal-left-overlay {
        justify-content: flex-start;
        align-items: flex-end;
        text-align: left;
        padding: 20px;
    }
    .dermal-content {
        width: 100%;
    }
    .dermal-main-image img {
        height: 280px;
    }
    .dermal-text {
        font-size: 16px;
        text-align: left;
        text-align: justify;
    }
    .dermal-checklist li {
        font-size: 16px;
    }
    .care-title {
        font-size: 26px;
        text-align: left;
    }
    .care-subtitle {
        font-size: 16px;
        margin-bottom: 30px;
        text-align: left;
        text-align: justify;
    }
    .care-images {
        flex-direction: column;
        gap: 20px;
    }
    .care-images img {
        width: 100%;
        height: 220px;
    }
    .care-box-grid {
        grid-template-columns: 1fr;
    }
    .care-box {
        padding: 25px;
    }
    .enhance-image img {
        height: 280px;
    }
    .enhance-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }
    .enhance-stat-box {
        justify-content: flex-start;
        text-align: left;
    }
    .enhance-stat-box h3 {
        font-size: 30px;
    }
    .dermal-faq-question {
        font-size: 18px;
        text-align: left;
    }
    .dermal-faq-answer {
        font-size: 15px;
        text-align: left;
    }
    .dark-box p{
        text-align: justify;
    }
    .cards-p{
    text-align: justify;

    }
}


/* --------------------------------------------------------product-store--------------------------------- */

@media(max-width:992px) {
    .sx-card img {
        height: 300px;
        width: 134px;
        margin-left: 83px;
    }
    .sx-wrapper {
        padding: 30px;
    }
    .ac-product {
        flex-direction: column;
    }
    .ac-buttons {
        flex-direction: column;
    }
    .qv-product-img {
        height: 250px;
        width: 200px;
        margin-left: 50px;
    }
    .qv-add-to-cart {
        margin-left: 50px;
    }
    .qv-product-title {
        font-size: 30px;
    }
}


/* -----------------------------------new services------------------------------- */

@media(max-width:768px) {
    .svc14-col {
        width: calc(50% - 20px);
    }
}

@media(max-width:768px) {
    .svc14-col {
        width: 100%;
    }
    .svc14-main-title {
        font-size: 28px;
    }
    .svc14-card {
        margin-left: 30px;
        width: 85%;
    }
    .svc14-main-text {
        padding: 10px;
        width: 99%;
    }
    .svc14-section {
        padding: 45px 0;
    }
}


/* ---------- gallery RESPONSIVE ---------- */

@media (max-width:768px) {
    .hair-section-wrapper {
        padding: 60px 20px;
    }
    .hair-main-heading {
        font-size: 36px;
        line-height: 1.25;
        font-weight: 500;
        margin-bottom: 20px;
    }
    .hair-main-heading span {
        display: inline;
    }
    .hair-text-right-box {
        margin-top: -105px;
        padding-top: 0;
        justify-content: flex-start;
    }
    .hair-right-text {
        font-size: 16px;
        line-height: 1.7;
        max-width: 100%;
    }
    .slider-container {
        height: 260px;
        margin: 0 18px;
        border-radius: 25px;
        width: 100%;
        max-width: 350px;
    }
    .slider-handle {
        width: 50px;
        height: 50px;
    }
    .slider-line {
        width: 3px;
    }
    .labels {
        padding: 0 20px;
        top: auto;
        bottom: 18px;
    }
    .label {
        font-size: 14px;
        padding: 6px 12px;
        border-radius: 10px;
    }
    .stats-section-custom {
        padding: 70px 20px;
    }
    .stats-wrapper-custom {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        text-align: center;
        margin-left: -61px;
    }
    .stat-number-custom {
        font-size: 30px;
    }
    .stat-title-custom {
        font-size: 16px;
    }
    .hair-slider-section {
        padding: 15px 20px;
    }
    .hair-slider-wrapper {
        flex-direction: column;
        gap: 20px;
        height: auto;
    }
    .hair-slide {
        height: 260px;
        flex: none;
    }
    .hair-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}