.nav-container {
         max-width: 1500px;
         margin: 0 auto;
         padding: 0 20px;
      }

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

      .tab-pane {
         margin: 0 auto;
         transition: opacity 0.3s ease-in-out;
         overflow: hidden;
      }

      .tab-pane.active {
         /* height: auto; */
         overflow: visible;
      }

      .tab-button {
         padding: 8px 16px;
         font-size: 1rem;
         color: #6B4C3A;
         font-style: italic;
         background-color: #F5E6D3;
         border: 1px solid #E8D4C4;
         /* border-radius: 0.375rem; */
         cursor: pointer;
         transition: all 0.3s ease;
         margin-right: 10px;
      }

      .tab-button.active {
         border-bottom: 2px solid #A67C5A;
         color: #A67C5A;
         font-weight: 600;
      }
   

   
      .custom-list {
         list-style-type: none;
         padding-left: 0;
      }

      .custom-list li::before {
         content: "✧";
         margin-right: 8px;
         color: #000;
         /* You can change the color of the icon here */
      }
   

   
     
      .peel-section {
         max-width: 1400px;
         background: var(--light);
         border-radius: 20px;
         overflow: hidden;
         box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
         display: grid;
         grid-template-columns: 1fr 1fr;
         animation: fadeIn 1s ease;
      }

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

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

      .peel-content {
         padding: 50px;
         display: flex;
         flex-direction: column;
         justify-content: center;
      }

      .peel-image {
         position: relative;
         overflow: hidden;
      }

      .peel-image img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: var(--transition);
      }

      .peel-image:hover img {
         transform: scale(1.03);
      }

      .peel-image::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: linear-gradient(135deg, rgba(138, 79, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%);
         z-index: 1;
      }

      .section-tag {
         display: inline-block;
         background-color: var(--primary-light);
         color: var(--primary);
         padding: 8px 15px;
         border-radius: 50px;
         font-size: 14px;
         font-weight: 600;
         margin-bottom: 15px;
      }

      .section-title {
         font-size: 2.5rem;
         color: var(--dark);
         margin-bottom: 20px;
         line-height: 1.2;
      }

      .section-title span {
         color: var(--primary);
      }

      .section-desc {
         color: #666;
         margin-bottom: 30px;
         line-height: 1.6;
      }

      .benefits-grid {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 20px;
         margin-bottom: 40px;
      }

      .benefit-item {
         display: flex;
         align-items: flex-start;
         gap: 10px;
      }

      .benefit-icon {
         color: var(--primary);
         font-size: 20px;
         margin-top: 3px;
      }

      .benefit-text {
         color: var(--dark);
         font-weight: 500;
      }

      .cta-button {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         background-color: var(--primary);
         color: white;
         padding: 15px 30px;
         border-radius: 50px;
         text-decoration: none;
         font-weight: 600;
         transition: var(--transition);
         width: fit-content;
         box-shadow: 0 10px 20px rgba(138, 79, 255, 0.2);
      }

      .cta-button:hover {
         transform: translateY(-3px);
         box-shadow: 0 15px 25px rgba(138, 79, 255, 0.3);
      }

      .cta-button i {
         margin-left: 8px;
         transition: var(--transition);
      }

      .cta-button:hover i {
         transform: translateX(5px);
      }

      /* Responsive Design */
      @media (max-width: 992px) {
         .peel-section {
            grid-template-columns: 1fr;
         }

         .peel-image {
            height: 300px;
            order: -1;
         }

         .peel-content {
            padding: 40px;
         }
      }

      @media (max-width: 576px) {
         .peel-content {
            padding: 30px 20px;
         }

         .section-title {
            font-size: 2rem;
         }

         .benefits-grid {
            grid-template-columns: 1fr;
         }
      }
   

   
      .chempeel-container {
         max-width: 1400px;
         margin: 0 auto;
         display: flex;
         padding-top: 40px;
         padding-bottom: 40px;
         border: 1px solid #e0e0e0;
      }

      .chempeel-content {
         flex: 1;
         padding: 50px 20px;
      }

      .chempeel-image {
         flex: 1;
      }

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

      .chempeel-header {
         margin-bottom: 30px;
      }

      .chempeel-title {
         font-size: 28px;
         font-weight: 600;
         color: #333;
         margin-bottom: 15px;
         /* font-family: 'Helvetica Neue', Arial, sans-serif; */
      }

      .chempeel-description {
         font-size: 16px;
         line-height: 1.6;
         color: #555;
      }

      .chempeel-benefits {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 15px;
         margin-bottom: 30px;
      }

      .chempeel-benefit {
         display: flex;
         align-items: flex-start;
      }

      .chempeel-benefit-icon {
         color: #6B4C3A;
         margin-right: 10px;
         font-size: 18px;
      }

      .chempeel-benefit-text {
         font-size: 15px;
         color: #333;
      }

      .chempeel-button {
         display: inline-block;
         background-color: #6B4C3A;
         color: white;
         padding: 12px 25px;
         text-decoration: none;
         font-weight: 500;
         font-size: 15px;
      }

      @media (max-width: 768px) {
         .chempeel-container {
            flex-direction: column;
         }

         .chempeel-image {
            order: -1;
            height: 300px;
         }

         .chempeel-content {
            padding: 30px 25px;
         }

         .chempeel-benefits {
            grid-template-columns: 1fr;
         }
      }
   

   
      .peel-process {
         background-color: #e9d1c1;
      }

      .peel-process-container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 60px 20px;
         font-family: 'Helvetica Neue', Arial, sans-serif;
      }

      .peel-process-container p {
         font-size: 16px;
         line-height: 1.6;
         color: #5A3921;
         /* margin-bottom: 30px; */
      }

      .peel-process-title {
         text-align: center;
         font-size: 32px;
         font-weight: 600;
         color: #5A3921;
         margin-bottom: 20px;
      }

      .peel-steps {
         display: flex;
         flex-direction: column;
         gap: 30px;
         position: relative;
      }



      .peel-step {
         display: flex;
         gap: 25px;
         align-items: flex-start;
         position: relative;
         z-index: 1;
      }

      .peel-step-number {
         background-color: #6B4C3A;
         color: white;
         width: 40px;
         height: 40px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-weight: bold;
         flex-shrink: 0;
         font-size: 18px;
      }

      .peel-step-content {
         padding-bottom: 30px;
         border-bottom: 1px solid #000;
         flex-grow: 1;
      }

      .peel-step-title {
         font-size: 20px;
         font-weight: 600;
         color: #333;
         margin-bottom: 10px;
      }

      .peel-step-desc {
         font-size: 16px;
         line-height: 1.6;
         color: #000;
      }

      @media (min-width: 768px) {
         .peel-steps {
            gap: 0;
         }

         .peel-step {
            width: 50%;
            padding-right: 40px;
            box-sizing: border-box;
         }

         .peel-step:nth-child(even) {
            margin-left: auto;
            padding-left: 40px;
            padding-right: 0;
         }

         .peel-step:nth-child(odd) .peel-step-content {
            text-align: right;
         }

         .peel-step:last-child .peel-step-content {
            border-bottom: none;
         }

         .peel-steps::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 1px;
            height: 100%;
            background-color: #000;
            transform: translateX(-50%);
         }
      }

      @media (max-width: 767px) {
         .peel-step:last-child .peel-step-content {
            border-bottom: none;
            padding-bottom: 0;
         }

         .peel-step-number {
            margin-top: 3px;
         }
      }
   

   
      .derm-stats-container {
         max-width: 1400px;
         margin: 0 auto;
         margin-bottom: 50px;
         padding: 10px 0;
      }

      .derm-stats-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 15px;
         padding: 0 10px;
      }

      .derm-stat-box {
         text-align: center;
         padding: 15px 10px;
         border: 1px solid #5A3921;
      }

      .derm-stat-icon {
         width: 40px;
         height: 40px;
         margin: 0 auto 10px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 20px;
         color: #6B4C3A;
         border: 2px solid #6B4C3A;
      }

      .derm-stat-number {
         font-size: 28px;
         font-weight: 700;
         color: #333;
         margin-bottom: 5px;
      }

      .derm-stat-text {
         font-size: 14px;
         color: #555;
         line-height: 1.3;
      }

      /* Tablets - 2 columns */
      @media (max-width: 992px) {
         .derm-stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
         }
      }

      /* Mobile - 2 columns with tighter spacing */
      @media (max-width: 576px) {
         .derm-stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            padding: 0 5px;
         }

         .derm-stat-box {
            padding: 12px 5px;
         }

         .derm-stat-icon {
            width: 35px;
            height: 35px;
            font-size: 18px;
         }

         .derm-stat-number {
            font-size: 24px;
         }

         .derm-stat-text {
            font-size: 12px;
         }
      }
   

   
      .about-peels-container {
         max-width: 1400px;
         margin: 0 auto;
         padding: 60px 20px;
         /* font-family: 'Helvetica Neue', Arial, sans-serif; */
      }

      .about-peels-header {
         text-align: center;
         margin-bottom: 60px;
      }

      .about-peels-title {
         font-size: 30px;
         font-weight: 700;
         color: #222;
         margin-bottom: 15px;
         position: relative;
         display: inline-block;
      }

      /* .about-peels-title:after {
         content: '';
         position: absolute;
         bottom: -10px;
         left: 50%;
         transform: translateX(-50%);
         width: 80px;
         height: 3px;
         background: #6B4C3A;
      } */

      .about-peels-subtitle {
         font-size: 18px;
         color: #555;
         max-width: 700px;
         margin: 0 auto;
         line-height: 1.6;
      }

      .about-peels-content {
         display: flex;
         /* align-items: center; */
         gap: 50px;
      }

      .about-peels-image {
         flex: 1;
         position: relative;
      }

      .about-peels-image img {
         width: 100%;
         height: auto;
         display: block;
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      }

      .about-peels-text {
         flex: 1;
      }

      .about-peels-accordion {
         margin-top: 30px;
      }

      .accordion-item {
         margin-bottom: 15px;
      }

      .accordion-header {
         padding: 18px 25px;
         background: #5a392180;
         cursor: pointer;
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-weight: 600;
         color: #0a0a0a;
      }

      .accordion-header:hover {
         background: #5a392180;
      }

      .accordion-icon {
         transition: transform 0.3s ease;
      }

      .accordion-item.active .accordion-icon {
         transform: rotate(45deg);
      }

      .accordion-content {
         padding: 0 25px;
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.3s ease;
         color: #555;
         background-color: #e9d1c1;
         line-height: 1.6;
      }

      .accordion-item.active .accordion-content {
         padding: 20px 25px;
         max-height: 300px;
      }

      @media (max-width: 900px) {
         .about-peels-content {
            flex-direction: column;
         }

         .about-peels-title {
            font-size: 30px;
         }

         .about-peels-subtitle {
            font-size: 16px;
         }
      }
   

   
      .peel-faq-container {
         max-width: 1400px;
         margin: 0 auto;
         padding-bottom: 40px;
         padding-left: 20px;
         padding-right: 20px;
         padding-top: 60px;
         font-family: 'Helvetica Neue', Arial, sans-serif;
         /* background-color: #faf6f0; */
         /* Cream background */
      }

      .peel-faq-header {
         text-align: center;
         margin-bottom: 60px;
      }

      .peel-faq-title {
         font-size: 36px;
         font-weight: 700;
         color: #5a3921;
         /* Deep skin tone */
         margin-bottom: 15px;
         position: relative;
         display: inline-block;
      }



      .peel-faq-subtitle {
         font-size: 18px;
         color: #7a5c44;
         /* Medium-dark skin tone */
         max-width: 700px;
         margin: 0 auto;
         line-height: 1.6;
      }

      .peel-faq-grid {
         display: grid;
         grid-template-columns: 1fr;
         gap: 20px;
         max-width: 1000px;
         margin: 0 auto;
      }

      .peel-faq-item {
         background: white;
         border: 1px solid #e8d5c0;
         /* Light skin-tone border */
         border-radius: 0;
         overflow: hidden;
         box-shadow: 0 3px 10px rgba(199, 154, 123, 0.1);
         /* Subtle skin-tone shadow */
      }

      .peel-faq-question {
         padding: 20px 25px;
         background-color: #fff9f0;
         /* Light cream */
         color: #5a3921;
         /* Deep skin tone */
         font-weight: 600;
         font-size: 18px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         cursor: pointer;
         transition: all 0.3s ease;
      }

      .peel-faq-question:hover {
         background-color: #fffbf5;
         /* Warmer cream */
      }

      .peel-faq-icon {
         color: #c79a7b;
         /* Medium skin tone */
         transition: transform 0.3s ease;
         font-size: 20px;
      }

      .peel-faq-item.active .peel-faq-icon {
         transform: rotate(45deg);
         color: #9c6f4a;
         /* Darker skin tone */
      }

      .peel-faq-answer {
         padding: 0 25px;
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.3s ease;
         color: #7a5c44;
         /* Medium-dark skin tone */
         line-height: 1.6;
         background: #fff9f0;
      }

      .peel-faq-item.active .peel-faq-answer {
         padding: 0 25px 25px;
         max-height: 500px;
      }

      @media (max-width: 768px) {
         .peel-faq-title {
            font-size: 30px;
         }

         .peel-faq-subtitle {
            font-size: 16px;
         }

         .peel-faq-question {
            padding: 18px 20px;
            font-size: 16px;
         }
      }
   

   
      .choose-us-container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 80px 20px;
         font-family: 'Helvetica Neue', Arial, sans-serif;
         position: relative;
         text-align: center;
      }

      .choose-us-header {
         margin-bottom: 60px;
      }

      .choose-us-title {
         font-size: 36px;
         font-weight: 700;
         color: #5a3921;
         margin-bottom: 15px;
         position: relative;
         display: inline-block;
      }

      .choose-us-title:after {
         content: '';
         position: absolute;
         bottom: -10px;
         left: 50%;
         transform: translateX(-50%);
         width: 80px;
         height: 3px;
         background: #c79a7b;
      }

      .choose-us-subtitle {
         font-size: 18px;
         color: #7a5c44;
         max-width: 700px;
         margin: 0 auto;
         line-height: 1.6;
      }

      .choose-us-content {
         position: relative;
         min-height: 500px;
         margin: 60px auto;
      }

      .choose-us-image {
         width: 300px;
         height: 300px;
         margin: 0 auto;
         border-radius: 50%;
         overflow: hidden;
         position: relative;
         z-index: 2;
         border: 8px solid #f5e9d9;
         box-shadow: 0 10px 30px rgba(199, 154, 123, 0.2);
      }

      .choose-us-image img {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }

      .choose-us-point {
         position: absolute;
         width: 220px;
         padding: 25px;
         background: white;
         border: 1px solid #e8d5c0;
         box-shadow: 0 5px 15px rgba(199, 154, 123, 0.1);
         z-index: 3;
      }

      .choose-us-point.top-left {
         top: 0;
         left: 10%;
      }

      .choose-us-point.top-right {
         top: 0;
         right: 10%;
      }

      .choose-us-point.bottom-left {
         bottom: 0;
         left: 10%;
      }

      .choose-us-point.bottom-right {
         bottom: 0;
         right: 10%;
      }

      .choose-us-point.left-center {
         left: 5%;
         top: 50%;
         transform: translateY(-50%);
      }

      .choose-us-point.right-center {
         right: 5%;
         top: 50%;
         transform: translateY(-50%);
      }

      .point-icon {
         width: 50px;
         height: 50px;
         margin: 0 auto 15px;
         display: flex;
         align-items: center;
         justify-content: center;
         background: #f5e9d9;
         color: #9c6f4a;
         font-size: 20px;
         border-radius: 50%;
      }

      .point-title {
         font-size: 18px;
         font-weight: 600;
         color: #5a3921;
         margin-bottom: 10px;
      }

      .point-desc {
         font-size: 15px;
         color: #7a5c44;
         line-height: 1.5;
      }

      @media (max-width: 992px) {
         .choose-us-content {
            min-height: 400px;
         }

         .choose-us-point {
            width: 180px;
            padding: 20px;
         }
      }

      @media (max-width: 768px) {
         .choose-us-content {
            display: flex;
            flex-direction: column;
            min-height: auto;
            margin: 40px auto;
         }

         .choose-us-image {
            width: 200px;
            height: 200px;
            margin-bottom: 40px;
         }

         .choose-us-point {
            position: static;
            width: 100%;
            max-width: 400px;
            margin: 0 auto 20px;
            transform: none !important;
         }

         .choose-us-point:last-child {
            margin-bottom: 0;
         }
      }

      @media (max-width: 576px) {
         .choose-us-title {
            font-size: 30px;
         }

         .choose-us-subtitle {
            font-size: 16px;
         }
      }
   

   
      .why-choose {
         background-color: #E9D1C1;
      }

      .split-choose-container {
         max-width: 1400px;
         margin: 0 auto;
         padding: 60px 20px;
         font-family: 'Helvetica Neue', Arial, sans-serif;
      }

      .split-choose-wrapper {
         display: flex;
         align-items: center;
         gap: 40px;
      }

      .split-choose-left {
         flex: 1;
      }

      .split-choose-right {
         flex: 1;
      }

      .split-choose-title {
         font-size: 34px;
         font-weight: 600;
         color: #5a3921;
         margin-bottom: 20px;
         position: relative;
         /* padding-bottom: 10px; */
      }



      .split-choose-subtitle {
         font-size: 17px;
         color: #7a5c44;
         line-height: 1.5;
         margin-bottom: 30px;
      }

      .split-choose-image {
         width: 100%;
         border-radius: 4px;
         overflow: hidden;
         box-shadow: 0 15px 30px rgba(199, 154, 123, 0.15);
      }

      .split-choose-image img {
         width: 100%;
         height: auto;
         display: block;
      }

      .split-choose-grid {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 20px;
      }

      .split-choose-card {
         background: #F6E4DA;
         padding: 25px;
         border: 1px solid #f0e4d4;
      }

      .split-choose-icon {
         width: 50px;
         height: 50px;
         border: 1px solid #9c6f4a;
         margin-bottom: 15px;
         display: flex;
         align-items: center;
         justify-content: center;
         background: #f9f2e8;
         color: #9c6f4a;
         font-size: 20px;
         border-radius: 50%;
      }

      .split-choose-card-title {
         font-size: 18px;
         font-weight: 600;
         color: #5a3921;
         margin-bottom: 10px;
      }

      .split-choose-card-desc {
         font-size: 15px;
         color: #7a5c44;
         line-height: 1.5;
      }

      @media (max-width: 992px) {
         .split-choose-wrapper {
            flex-direction: column;
            gap: 30px;
         }

         .split-choose-left,
         .split-choose-right {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
         }

         .split-choose-title {
            text-align: center;
         }

         .split-choose-title:after {
            left: 50%;
            transform: translateX(-50%);
         }

         .split-choose-subtitle {
            text-align: center;
         }
      }

      @media (max-width: 576px) {
         .split-choose-grid {
            grid-template-columns: 1fr;
         }

         .split-choose-title {
            font-size: 28px;
         }
      }
   

   
      /* Footer Section */
      .footer-main-section {
         background-color: #F1C6B3;
         padding: 80px 0 40px;
      }

      .footer-content-wrapper {
         max-width: 1400px;
         margin: 0 auto;
         padding: 0 20px;
      }

      .footer-grid-layout {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr 1fr;
         gap: 60px;
         margin-bottom: 60px;
      }

      /* Brand Section */
      .brand-identity-area {
         display: flex;
         flex-direction: column;
      }

      .brand-logo-container {
         margin-bottom: 30px;
      }

      .brand-logo-image {
         width: 180px;
         height: auto;
         display: block;
      }

      .brand-description-text {
         font-size: 1rem;
         line-height: 1.7;
         color: #6b4c3a;
         margin-bottom: 40px;
         font-weight: 400;
      }

      .social-media-links {
         display: flex;
         gap: 20px;
         margin-top: auto;
      }

      .social-link-item {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background-color: #6b4c3a;
         color: #fff;
         display: flex;
         align-items: center;
         justify-content: center;
         text-decoration: none;
         transition: background-color 0.3s ease;
      }

      .social-link-item:hover {
         background-color: #5a4037;
         color: #fff;
      }

      /* Services Section */
      .services-navigation-area {
         padding-left: 10px;
      }

      .additional-services-area {
         padding-left: 10px;
      }

      .footer-section-title {
         font-size: 2rem;
         font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         font-weight: 400;
         color: #5a4037;
         margin-bottom: 30px;
      }

      .services-menu-list {
         list-style: none;
         padding: 0;
         margin: 0;
      }

      .service-menu-item {
         margin-bottom: 15px;
      }

      .service-link-text {
         color: #8b6f47;
         text-decoration: none;
         font-size: 1rem;
         transition: color 0.3s ease;
      }

      .service-link-text:hover {
         color: #6b4c3a;
      }

      /* Pages and Appointment Section */
      .pages-appointment-area {
         padding-left: 10px;
      }

      .other-pages-section {
         margin-bottom: 50px;
      }

      .pages-grid-layout {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 15px 20px;
         margin-top: 20px;
      }

      .page-navigation-link {
         color: #8b6f47;
         text-decoration: none;
         font-size: 1rem;
         transition: color 0.3s ease;
      }

      .page-navigation-link:hover {
         color: #6b4c3a;
      }

      .appointment-cta-area {
         margin-top: 40px;
      }

      .cta-description-text {
         font-size: 0.95rem;
         line-height: 1.6;
         color: #6b4c3a;
         margin-bottom: 25px;
      }

      .appointment-cta-button {
         display: inline-block;
         padding: 14px 28px;
         background-color: #b87c5d;
         color: #fff;
         text-decoration: none;
         font-size: 1rem;
         font-weight: 500;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         transition: all 0.3s ease;
      }

      .appointment-cta-button:hover {
         background-color: #a67c5a;
         color: #fff;
         transform: translateY(-2px);
      }

      /* Copyright Section */
      .copyright-section {
         text-align: center;
         padding-top: 40px;
         border-top: 1px solid #d4b896;
      }

      .copyright-text {
         color: #8b6f47;
         font-size: 0.95rem;
         margin: 0;
      }

      /* Responsive Design */
      @media (max-width: 1200px) {
         .footer-grid-layout {
            grid-template-columns: 1fr 1fr 1fr;
            gap: 50px;
         }

         .pages-appointment-area {
            grid-column: 1 / -1;
            padding-left: 0;
            margin-top: 30px;
         }

         .other-pages-section {
            margin-bottom: 30px;
         }
      }

      @media (max-width: 992px) {
         .footer-grid-layout {
            grid-template-columns: 1fr 1fr;
            gap: 50px;
         }

         .additional-services-area,
         .pages-appointment-area {
            grid-column: 1 / -1;
            padding-left: 0;
            margin-top: 30px;
         }

         .brand-logo-image {
            width: 150px;
         }

         .footer-main-section {
            padding: 60px 0 30px;
         }
      }

      @media (max-width: 768px) {
         .footer-grid-layout {
            grid-template-columns: 1fr;
            gap: 40px;
         }

         .services-navigation-area,
         .additional-services-area,
         .pages-appointment-area {
            padding-left: 0;
         }

         .footer-content-wrapper {
            padding: 0 20px;
         }

         .brand-logo-image {
            width: 130px;
         }

         .pages-grid-layout {
            grid-template-columns: 1fr 1fr;
            gap: 15px 20px;
         }
      }

      @media (max-width: 576px) {
         .footer-main-section {
            padding: 40px 0 20px;
         }

         .footer-content-wrapper {
            padding: 0 15px;
         }

         .brand-logo-image {
            width: 120px;
         }

         .footer-section-title {
            font-size: 1.7rem;
         }

         .brand-description-text {
            font-size: 0.95rem;
         }

         .pages-grid-layout {
            grid-template-columns: 1fr;
            gap: 12px;
         }

         .social-media-links {
            gap: 15px;
         }

         .social-link-item {
            width: 35px;
            height: 35px;
         }

         .appointment-cta-button {
            padding: 12px 24px;
            font-size: 0.9rem;
         }
      }
   

   
      /* Before & After Section */
      .transformation-showcase {
         background-color: #f0e6d6;
         padding: 80px 0;
      }

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

      .showcase-header {
         text-align: center;
         margin-bottom: 30px;
      }

      .showcase-title {
         font-size: 3rem;
         font-weight: 600;
         color: #5a4037;
         margin-bottom: 10px;
         font-style: italic;
      }

      .treatment-tabs {
         display: flex;
         justify-content: center;
         gap: 0;
         margin-bottom: 50px;
      }

      .tab-button {
         padding: 15px 40px;
         background-color: transparent;
         color: #8B6F47;
         border: 2px solid #d4b896;
         cursor: pointer;
         font-size: 1.1rem;
         font-weight: 500;
         font-style: italic;
         transition: all 0.3s ease;
      }

      .tab-button:first-child {
         border-right: none;
      }

      .tab-button.tab-active {
         background-color: #d4b896;
         color: #5a4037;
      }

      .comparison-wrapper {
         max-width: 900px;
         margin: 0 auto;
      }

      .image-comparison-container {
         position: relative;
         width: 100%;
         height: 500px;
         overflow: hidden;
         background-color: #e9d1c1;
         border: 3px solid #d4b896;
      }

      .before-image,
      .after-image {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
      }

      .after-image {
         clip-path: inset(0 50% 0 0);
      }

      .comparison-slider {
         position: absolute;
         top: 0;
         left: 50%;
         width: 4px;
         height: 100%;
         background-color: #fff;
         cursor: ew-resize;
         z-index: 10;
         transform: translateX(-50%);
      }

      .slider-handle {
         position: absolute;
         top: 50%;
         left: 50%;
         width: 40px;
         height: 40px;
         background-color: #fff;
         border: 3px solid #b87c5d;
         transform: translate(-50%, -50%);
         cursor: ew-resize;
         display: flex;
         align-items: center;
         justify-content: center;
      }

      .slider-arrows {
         display: flex;
         gap: 2px;
      }

      .arrow-left,
      .arrow-right {
         width: 0;
         height: 0;
         border-style: solid;
      }

      .arrow-left {
         border-left: 4px solid transparent;
         border-right: 6px solid #b87c5d;
         border-top: 4px solid transparent;
         border-bottom: 4px solid transparent;
      }

      .arrow-right {
         border-left: 6px solid #b87c5d;
         border-right: 4px solid transparent;
         border-top: 4px solid transparent;
         border-bottom: 4px solid transparent;
      }

      .comparison-labels {
         display: flex;
         justify-content: space-between;
         margin-top: 20px;
         font-weight: 500;
         color: #6b4c3a;
      }

      .label-before {
         text-align: left;
      }

      .label-after {
         text-align: right;
      }

      /* Tab Content */
      .tab-content-panel {
         display: none;
      }

      .tab-content-panel.panel-active {
         display: block;
      }

      /* Responsive Design */
      @media (max-width: 768px) {
         .transformation-showcase {
            padding: 60px 0;
         }

         .showcase-title {
            font-size: 2.5rem;
         }

         .treatment-tabs {
            flex-direction: column;
            align-items: center;
            gap: 0;
         }

         .tab-button {
            padding: 12px 30px;
            font-size: 1rem;
            width: 250px;
         }

         .tab-button:first-child {
            border-right: 2px solid #d4b896;
            border-bottom: none;
         }

         .tab-button:last-child {
            border-top: none;
         }

         .image-comparison-container {
            height: 400px;
         }

         .slider-handle {
            width: 35px;
            height: 35px;
         }
      }

      @media (max-width: 576px) {
         .showcase-container {
            padding: 0 15px;
         }

         .showcase-title {
            font-size: 2rem;
         }

         .image-comparison-container {
            height: 300px;
         }

         .tab-button {
            padding: 10px 25px;
            width: 200px;
         }

         .slider-handle {
            width: 30px;
            height: 30px;
         }

         .comparison-labels {
            font-size: 0.9rem;
         }
      }

      .nav-container {
         max-width: 1500px;
         margin: 0 auto;
         padding: 0 20px;
      }
   
   
   
   
    
        .prp-treatment-slider-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            padding: 40px 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .prp-slider-header-section {
            text-align: center;
            margin-bottom: 40px;
        }

        .prp-slider-header-section h2 {
            color: #8B5A8C;
            font-size: 2.5rem;
            font-weight: 300;
            margin-bottom: 10px;
        }

        .prp-slider-wrapper-container {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            margin-bottom: 30px;
        }

        .prp-slider-track-element {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .prp-slide-item {
            flex: 0 0 50%;
            padding: 0 10px;
            position: relative;
        }

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

        .prp-navigation-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            margin-bottom: 20px;
        }

        .prp-nav-button-element {
            background: #5a3921;
            color: white;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: all 0.3s ease;
        }

        .prp-nav-button-element:hover {
            background: #E9D1C1;
            transform: scale(1.1);
        }

        .prp-dots-container-element {
            display: flex;
            justify-content: center;
            gap: 10px;
        }

        .prp-dot-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ddd;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .prp-dot-indicator.prp-dot-active {
            background: #5a3921;
            transform: scale(1.2);
        }

        /* Mobile Styles */
        @media (max-width: 768px) {
            .prp-slide-item {
                flex: 0 0 100%;
            }

            .prp-slider-header-section h2 {
                font-size: 2rem;
            }

            .prp-treatment-slider-container {
                padding: 20px 15px;
            }

            .prp-nav-button-element {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }

            .prp-navigation-controls {
                gap: 15px;
            }
        }

        @media (max-width: 480px) {
            .prp-navigation-controls {
                gap: 10px;
            }

            .prp-nav-button-element {
                width: 35px;
                height: 35px;
                font-size: 14px;
            }
        }