:root {
           /* --secondary-color: #1a2b52; */
           --secondary-navy: #2d3e66;
           /* --theme-color: #e4a86e; */
           --light-cream: #f5e6d3;
           /* --title-color: #ffffff; */
           --text-dark: #333333;
       }


       .btn-primary {
           background-color: var(--theme-color);
           border-color: var(--theme-color);
           color: var(--secondary-color);
           font-weight: 600;
           padding: 0.75rem 2rem;
           border-radius: 50px;
           transition: all 0.3s;
       }

       .btn-primary:hover {
           background-color: #d4985e;
           border-color: #d4985e;
           transform: translateY(-2px);
           box-shadow: 0 5px 15px rgba(228, 168, 110, 0.3);
       }

       .btn-outline-primary {
           border-color: var(--theme-color);
           color: var(--theme-color);
           font-weight: 600;
           padding: 0.75rem 2rem;
           border-radius: 50px;
           transition: all 0.3s;
       }

       .btn-outline-primary:hover {
           background-color: var(--theme-color);
           border-color: var(--theme-color);
           color: var(--secondary-color);
       }

       .hero-overlay {
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: url('../../images/service/teeth3.png') no-repeat center center/cover;
           opacity: 0.1;
           z-index: -1;
       }

       .hero-section {
           /* background: linear-gradient(135deg, var(--secondary-color) 0%, #1e3a6f 100%); */
           color: #fff;
           padding: 11rem 0 80px;
           position: relative;
           overflow: hidden;
       }

       /* .hero-section::before {
           content: '';
           position: absolute;
           top: 0;
           right: 0;
           width: 50%;
           height: 100%;
           background: rgba(228, 168, 110, 0.1);
           clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
       } */

       .hero-section h1 {
           font-size: 3rem;
           font-weight: 700;
           margin-bottom: 1.5rem;
           color: #fff;
       }

       .hero-section .tagline {
           font-size: 1.3rem;
           color: var(--theme-color);
           margin-bottom: 1.5rem;
           font-weight: 500;
       }

       .hero-section p {
           font-size: 1.1rem;
           line-height: 1.8;
           margin-bottom: 2rem;
           color: #e0e0e0;
       }

       .section-white {
           background-color: #fff;
           padding: 80px 0;
       }

       .section-blue {
           background-color: var(--secondary-color);
           padding: 80px 0;
           color: #fff;
       }

       .section-blue h2,
       .section-blue h3 {
           color: #fff;
       }

       .section-blue p,
       .section-blue li {
           color: #e0e0e0;
       }

       .section-light-blue {
           background-color: #f8f9fc;
           padding: 80px 0;
       }

       .section-title {
           font-size: 2.5rem;
           font-weight: 700;
           margin-bottom: 1rem;
           color: var(--secondary-color);
       }

       .section-blue .section-title {
           color: var(--theme-color);
       }

       .section-subtitle {
           font-size: 1.2rem;
           color: #666;
           margin-bottom: 3rem;
       }

       /* .benefit-card {
           background: #fff;
           padding: 2rem;
           border-radius: 15px;
           box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
           transition: all 0.3s;
           height: 100%;
           border-top: 4px solid var(--theme-color);
       }

       .benefit-card:hover {
           transform: translateY(-10px);
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
       }

       .benefit-card i {
           font-size: 2.5rem;
           color: var(--theme-color);
           margin-bottom: 1rem;
       }

       .benefit-card h4 {
           color: var(--secondary-color);
           margin-bottom: 1rem;
           font-weight: 600;
       }

       .benefit-card p {
           color: #666;
           margin: 0;
       } */

       /* .benefit-crd H5:before {
           position: absolute;
           content: '\e906';
           font-family: 'icomoon';
           font-size: 16px;
           left: 0;
           top: 0;
           color: var(--theme-color) !important;
       } */

       /* .benefits-section {
           background-color: var(--title-color);
       }

       .benefit-crd {
           background-color: var(--secondary-navy);
       }

       .benefit-crd H5 {
           color: #fff;
           margin-bottom: 1rem;
           font-size: 1.3rem;
       } */

       .benefits-section {
           background-color: var(--title-color);
       }

       .benefits-list {
           list-style: none;
           padding: 0;
           margin: 0 auto;
           max-width: 800px;
       }

       .benefit-item {
           background: #223566;
           color: white;
           padding: 15px 20px;
           border-radius: 10px;
           margin-bottom: 15px;
           font-size: 1.1rem;
           font-weight: 500;
           display: flex;
           align-items: center;
           gap: 12px;
           opacity: 0;
           transform: translateY(15px);
           animation: fadeUp 0.7s ease forwards;
       }

       .benefit-item::before {
           content: "✔";
           font-size: 1.2rem;
           color: #e4a86e;
           font-weight: bold;
       }

       /* Smooth slide-in animation */

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

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

       /* Stagger animation delay */
       .benefit-item:nth-child(1) {
           animation-delay: 0.1s;
       }

       .benefit-item:nth-child(2) {
           animation-delay: 0.2s;
       }

       .benefit-item:nth-child(3) {
           animation-delay: 0.3s;
       }

       .benefit-item:nth-child(4) {
           animation-delay: 0.4s;
       }

       .benefit-item:nth-child(5) {
           animation-delay: 0.5s;
       }

       .process-step {
           border-radius: 20px;
           border: .3px solid #00000059;
           text-align: center;
           padding: 2rem;
           position: relative;
           background-color: white !important;
       }

       .process-step .step-number {
           width: 60px;
           height: 60px;
           background: var(--theme-color);
           color: var(--secondary-color);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 1.5rem;
           font-weight: 700;
           margin: 0 auto 1.5rem;
           font-family: var(--title-font);
       }

       .process-step h4 {
           color: var(--secondary-color);
           margin-bottom: 1rem;
           font-weight: 600;
       }

       .process-step p {
           color: #676767;
           margin: 0;
       }

       .why-choose-item {
           display: flex;
           align-items: flex-start;
           margin-bottom: 1.5rem;
       }

       .why-choose-item i {
           font-size: 1.5rem;
           color: var(--theme-color);
           margin-right: 1rem;
           margin-top: 0.25rem;
       }

       .why-choose-item p {
           margin: 0;
           font-size: 1.1rem;
           color: #333;
       }

       .stats-box {
           text-align: center;
           padding: 2rem;
           background: rgba(255, 255, 255, 0.1);
           border-radius: 15px;
           backdrop-filter: blur(10px);
       }

       .stats-box h3 {
           font-size: 2.5rem;
           color: var(--theme-color);
           margin-bottom: 0.5rem;
           font-weight: 700;
       }

       .stats-box p {
           color: #e0e0e0;
           margin: 0;
           font-size: 1.1rem;
       }

       .testimonials-section {
           background: #f8f9fa;
           padding: 4rem 0;
       }

       .carousel-container {
           overflow: hidden;
           width: 100%;
       }

       .carousel-track {
           display: flex;
           transition: transform 0.8s ease-in-out;
       }

       .carousel-slide {
           flex: 0 0 50%;
           padding: 10px;
       }

       .before-after-card {
           border-radius: 10px;
           overflow: hidden;
           position: relative;
       }

       .before-after-image img {
           width: 100%;
           height: auto;
           border-radius: 10px;
           display: block;
       }

       /* why choose */

       .why-choose-section {
           padding: 80px 0;
           background-color: #f8f9fa;
       }

       .why-choose-title {
           font-size: 3rem;
           font-weight: 700;
           color: var(--secondary-color);
           margin-bottom: 3rem;
           text-align: center;
       }

       /* .why-choose-content {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 4rem;
           align-items: center;
       } */

       .why-choose-list {
           list-style: none;
           padding: 0;
           margin: 0;
       }

       .why-choose-list li {
           padding: 1rem 0;
           font-size: 1.1rem;
           color: #374151;
           border-bottom: 1px solid #e5e7eb;
           display: flex;
           align-items: flex-start;
           gap: 1rem;
       }

       .why-choose-list li:last-child {
           border-bottom: none;
       }

       .why-choose-list li:before {
           content: "✓";
           color: var(--theme-color);
           font-weight: bold;
           font-size: 1.3rem;
           flex-shrink: 0;
           margin-top: -2px;
       }

       .doctor-image-container {
           position: relative;
           border-radius: 15px;
           overflow: hidden;
           box-shadow: 0 20px 40px rgba(23, 41, 81, 0.15);
       }

       .doctor-image-container img {
           width: 100%;
           height: auto;
           display: block;
           border-radius: 15px;
       }

       .image-badge {
           position: absolute;
           bottom: 20px;
           left: 20px;
           background: var(--theme-color);
           color: white;
           padding: 15px 20px;
           border-radius: 8px;
           font-weight: 600;
           font-size: 0.95rem;
           box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
       }