:root {
          --primary: #2451A6;
          --primary-light: #e4f2ff;
          --secondary: #4F8EF7;
          --accent: #00C896;
          --accent-light: #00e6a8;
          --accent-opacity: #e6fff9;
          --bg: #F8FBFF;
          --text: #1F2937;
          --gray-100: #f3f4f6;
          --border: #e5e5e5;
          --light-font: #37415199;
          --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
          --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
          --btn-accent: linear-gradient(135deg, var(--accent), var(--accent-light));
          --btn-accent-dark: #01ad7f;
          --primary-opacity: #0d6efd40;
          --star-yellow: #f5a623;
          --main-heading: #072c70;
          --bg-odd: #f9fafb;
          --bg-even: #f2f5f6;
          --navy-blue: #14284a;
        }

        body {
          font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
          color: var(--text);
          background-color: var(--bg);
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

        .primary-color {
          color: var(--primary);
        }

        .secondary-color {
          color: var(--secondary);
        }

        .accent-color {
          color: var(--accent);
        }

        .accent-light-color {
          color: var(--accent-light);
        }

        .accent-opacity-color {
          color: var(--accent-opacity);
        }

        .bg-color {
          color: var(--bg);
        }

        .text-color {
          color: var(--text);
        }

        .light-font {
          color: var(--light-font);
        }

        .gray-100 {
          color: var(--gray-100)
        }

        .border,
        .border-top,
        .border-bottom,
        .border-start,
        .border-end,
        .card,
        .border-color {
          border-color: var(--border) !important;
        }

        .primary-color-background {
          background-color: var(--primary);
        }

        .primary-light-background {
          background-color: var(--primary-light);
        }

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

        .accent-color-background {
          background-color: var(--accent);
        }

        .accent-light-color-background {
          background-color: var(--accent-light);
        }

        .accent-opacity-background {
          background-color: var(--accent-opacity);
        }

        .bg-color-background {
          background-color: var(--bg);
        }

        .text-color-background {
          background-color: var(--text);
        }

        .gray-100-background {
          background-color: var(--gray-100)
        }

        .primary-opacity {
          background-color: var(--primary-opacity);
        }

        .navy-bg {
          background-color: var(--navy-blue);
        }

        .star-rating {
          color: #f5a623;
        }

        .main-heading-color {
          color: var(--main-heading);
        }

        /* font-size */
        .font10 {
          font-size: 10px;
        }

        .font11 {
          font-size: 11px;
        }

        .font12 {
          font-size: 12px;
        }

        .font13 {
          font-size: 13px;
        }

        .font15 {
          font-size: 15px;
        }

        .font18 {
          font-size: 18px;
        }

        .bg-icon-large {
          height: 60px;
          width: 60px;
          min-width: 60px;
        }

        .bg-icon {
          height: 44px;
          width: 44px;
          min-width: 44px;
        }

        .bg-icon-small {
          height: 24px;
          width: 24px;
          min-width: 24px;
        }

        .bg-odd {
          background-color: var(--bg-odd);
        }

        .bg-even {
          background-color: var(--bg-even);
        }

        .p32 {
          padding: 32px;
        }

        .table-hover>tbody>tr:hover>* {
          background: var(--accent-opacity);
        }

        .table-hover>thead>tr>*,
        .table-hover>tbody>tr>* {
          padding: 10px 20px;
        }

        .table-hover>tbody>tr:last-child td {
          border-bottom: 0px !important;
        }

        /* Common transition for interactive elements */
        .navbar,
        .navbar-brand,
        .navbar-nav .nav-link,
        .btn-header-cta,
        .btn-cta-outline,
        .navbar-toggler,
        .offcanvas .nav-link,
        .btn-close,
        .blue-border-btn,
        .primary-btn,
        .btn-accent,
        .white-border-btn,
        .service-card,
        .view-profile-btn {
          transition: var(--transition);
        }

        /* ===== NAVBAR ===== */
        .navbar {
          background: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border-bottom: 1px solid var(--border);
        }

        .navbar-brand {
          letter-spacing: -0.6px;
          color: var(--primary);
        }

        .navbar-brand .brand-accent {
          color: var(--accent);
        }

        .navbar-brand:hover {
          color: var(--secondary);
          transform: translateY(-1px);
        }

        /* Desktop Nav Links */
        .navbar-nav .nav-link {
          color: var(--text);
          position: relative;
        }

        .navbar-nav .nav-link::after,
        .navbar-nav .nav-link.active::after {
          content: '';
          position: absolute;
          bottom: 4px;
          left: 50%;
          transform: translateX(-50%) scaleX(0);
          width: 20px;
          height: 2px;
          background: var(--accent);
          border-radius: 2px;
          transition: transform 0.2s ease;
        }

        .navbar-nav .nav-link.active::after {
          transform: translateX(-50%);
        }

        .nav-link.active {
          color: var(--accent) !important;
        }

        .navbar-nav .nav-link:hover {
          color: var(--primary);
        }

        .navbar-nav .nav-link:hover::after {
          transform: translateX(-50%) scaleX(1);
        }

        /* CTA Button */
        .btn-header-cta {
          background: linear-gradient(135deg, var(--primary), var(--secondary));
          white-space: nowrap;
          letter-spacing: 0.2px;
        }

        .btn-header-cta:hover {
          background: linear-gradient(135deg, var(--accent), var(--accent-light));
          transform: translateY(-1px);
        }

        .blue-border-btn {
          border: 1px solid var(--primary);
        }

        .blue-border-btn:hover {
          background: linear-gradient(135deg, var(--primary), var(--secondary));
          color: #fff !important;
        }

        .primary-btn {
          background: linear-gradient(135deg, var(--primary), var(--secondary));
          color: #fff;
        }

        .primary-btn:hover {
          background: linear-gradient(135deg, var(--secondary), var(--primary));
        }

        .btn-accent {
          background: var(--btn-accent);
          transition: unset;
        }

        .btn-accent:hover {
          background: var(--btn-accent-dark) !important;
        }

        .white-border-btn {
          background-color: transparent;
          border: 1px solid #fff;
        }

        .white-border-btn:hover {
          background: rgba(255, 255, 255, 0.18);
          border-color: rgba(255, 255, 255, 0.5);
        }

        /* Hamburger */
        .navbar-toggler:hover {
          background: var(--gray-100);
        }

        /* ===== OFFCANVAS ===== */
        .offcanvas {
          border-left: 1px solid var(--border);
        }

        .offcanvas-header {
          border-bottom: 1px solid var(--border);
        }

        .offcanvas-title {
          color: var(--primary);
          letter-spacing: -0.4px;
        }

        .offcanvas .nav-link {
          color: var(--text);
        }

        .offcanvas .nav-link:hover {
          background-color: rgba(0, 200, 150, 0.08);
          color: var(--accent);
          padding-left: 1.5rem;
        }

        .offcanvas-footer-fixed {
          border-top: 1px solid var(--border);
        }

        .btn-close {
          opacity: 0.5;
        }

        .btn-close:hover {
          opacity: 0.8;
          transform: rotate(90deg);
        }


        /* Hero Section Starts */
        .hero-section {
          min-height: 90vh;
          background: linear-gradient(rgb(36 81 166 / 64%), rgba(0, 119, 182, .64)), url(/assets/images/bannerbg.webp) center / cover no-repeat;
        }

        .pseudoborder::after {
          content: "";
          background-color: var(--border);
          height: 80%;
          width: 1px;
          position: absolute;
          top: 10%;
          left: 44%;
        }

        /* Section 2 css starts */
        .blue-badge {
          background: var(--primary-light);
          border: 1px solid var(--primary);
          color: var(--primary);
          letter-spacing: 1px;
        }

        .green-badge {
          background: var(--accent-opacity);
          border: 1px solid var(--accent);
          color: var(--btn-accent-dark);
          letter-spacing: 1px;
        }

        .image-card img {
          object-fit: cover;
          transition: transform 0.5s ease;
        }

        .image-card:hover img {
          transform: scale(1.08);
        }

        .image-card-lg {
          aspect-ratio: 16 / 10;
        }

        .image-card-sm {
          aspect-ratio: 4 / 3;
        }

        /* Section 3 css starts */
        .iconround {
          color: var(--primary);
          border-width: 2px;
          border-color: var(--primary);
        }

        .specialty-card:hover .iconround {
          background-color: var(--primary);
        }

        .specialty-card:hover .iconround i {
          color: #fff;
        }

        /* Section 4 css starts */
        .service-card:hover {
          border-color: var(--accent) !important;
          transform: translateY(-1px);
        }

        .service-card .card-media,
        .fullimg-card .card-media {
          flex: 0 0 40%;
          max-width: 40%;
        }

        .service-card .card-media .badge-label,
        .fullimg-card .card-media .badge-label {
          position: absolute;
          top: 12px;
          left: 12px;
          padding: 4px 10px;
          letter-spacing: 0.05em;
          border: 1px solid var(--accent);
        }

        .service-card .card-body,
        .fullimg-card .card-body {
          flex: 1 1 auto;
        }

        .service-card .card-head h3,
        .fullimg-card .card-head h3 {
          font-size: 18px;
          letter-spacing: -0.01em;
          line-height: 1.3;
          margin: 0;
        }

        .service-card .card-head .meta-tag,
        .fullimg-card .card-head .meta-tag {
          flex-shrink: 0;
          font-size: 11px;
          letter-spacing: 0.05em;
        }

        .service-card .status-dot,
        .fullimg-card .status-dot {
          width: 8px;
          height: 8px;
          background: #22c55e;
          box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 20%, transparent);
        }

        .service-card:hover .link-action,
        .fullimg-card:hover .link-action {
          color: var(--accent) !important;
        }

        /* Section 6 css starts */
        .header-text h2:after {
          content: "";
          position: absolute;
          display: block;
          width: 50px;
          height: 3px;
          background: var(--accent);
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
        }

        .filter-form .field-wrap i {
          position: absolute;
          top: 50%;
          left: 12px;
          transform: translateY(-50%);
          font-size: 14px;
          color: #3741518c;
          pointer-events: none;
        }

        .filter-form .form-control,
        .filter-form .form-select,
        .filter-form .filter-btn {
          height: 40px;
          padding: 8px 12px 8px 36px;
          border: 1px solid var(--border);
          border-radius: 6px;
          color: var(--light-font);
          font-size: 14px;
          transition: all 0.2s ease;
        }

        .image-box-square {
          height: 80px;
          width: 80px;
          min-width: 80px;
        }

        .image-box-square-small {
          height: 50px;
          width: 50px;
          min-width: 50px;
        }

        .fullimg-card .card-body {
          padding: 44px 56px 44px;
        }


        /* footer css starts */
        footer h5::before {
          content: "";
          position: absolute;
          display: block;
          width: 20px;
          height: 2px;
          background: var(--accent);
          bottom: 0;
          left: 0;
        }

        footer ul>li>a:hover {
          color: var(--accent) !important;
        }

        .social-links a {
          height: 36px;
          width: 36px;
          background: rgba(255, 255, 255, 0.18);
        }


        /* Pricing page css starts */
        .breadcrumb-item+.breadcrumb-item::before {
          color: #Fff;
        }

        .hero-section#inner-page {
          min-height: 45vh;
          background: linear-gradient(90deg, #02337da3, #0c79b2a3), url(/assets/images/bg1.jpg) center / cover no-repeat;
        }

        /* pricing-slider css starts */
        .popular-card .card {
          border: 1px solid var(--accent) !important;
        }

        .popular-ribbon {
          top: -1px;
        }

        .slider-track {
          overflow-x: hidden;
        }

        .slider-cards {
          display: flex;
          gap: 1.5rem;
          transition: transform 0.35s ease;
        }

        .slider-card {
          flex: 0 0 calc(33.333% - 1rem);
          min-width: 280px;
        }


        .nav-arrow {
          width: 38px;
          height: 38px;
          cursor: pointer;
          transition: 0.2s;
        }

        .nav-arrow:hover {
          background: #e9ecef;
        }

        .dot {
          width: 8px;
          height: 8px;
          background: #cbd5e1;
          border-radius: 50%;
          cursor: pointer;
          transition: 0.2s;
        }

        .dot.active {
          background: #0d6e6e;
          width: 24px;
          border-radius: 12px;
        }

        /* About Us Page css starts */
        .metric-value {
          min-width: 100px;
        }


        /* Show overlay on hover */
        .overlay-cards .card {
          height: 400px;
          border: none;
          overflow: hidden;
          cursor: pointer;
          border-radius: 20px;
        }

        .overlay-cards .image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform .6s ease;
        }

        .overlay-cards .overlay {
          background: linear-gradient(to top,
              rgba(0, 0, 0, 0.95) 0%,
              rgba(0, 0, 0, 0.75) 50%,
              rgba(0, 0, 0, 0.05) 100%);
          display: flex;
          align-items: flex-end;
          justify-content: center;
          padding: 30px 20px;

          opacity: 0;
          transition: all .4s ease;
        }

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

        .overlay-cards .overlay-content {
          width: 100%;
          text-align: center;
          transform: translateY(60px);
          opacity: 0;
          transition: all .45s ease;
        }

        .overlay-cards .card:hover .overlay-content {
          transform: translateY(0);
          opacity: 1;
        }

        .overlay-cards .card:hover .image {
          transform: scale(1.08);
        }



        .overlay-cards .doctor-name {
          font-weight: 700;
          margin-bottom: 5px;
        }

        .overlay-cards .doctor-designation {
          opacity: .85;
          margin-bottom: 18px;
        }

        .overlay-cards .social-links a {
          width: 42px;
          height: 42px;
          border-radius: 50%;
          border: 1px solid rgba(255, 255, 255, .3);
          color: #fff;
          text-decoration: none;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: .3s;
        }

        .overlay-cards .social-links a:nth-child(1) {
          transition-delay: .05s;
        }

        .overlay-cards .social-links a:nth-child(2) {
          transition-delay: .10s;
        }

        .overlay-cards .social-links a:nth-child(3) {
          transition-delay: .15s;
        }

        .overlay-cards .social-links a:nth-child(4) {
          transition-delay: .20s;
        }

        .overlay-cards .card:hover .social-links a {
          transform: translateY(0);
          opacity: 1;
        }

        .overlay-cards .social-links a {
          transform: translateY(20px);
          opacity: 0;
        }

        .overlay-cards .social-links a:hover {
          background: #fff;
          color: #0d6efd;
          transform: translateY(-5px) !important;
        }


        .overlay-cards .view-profile-btn:hover {
          background: #0d6efd;
          color: #fff;
        }

        /* testimonial-container  */
        .testimonial-card {
          min-height: 192px !important;
        }

        /* 3‑column grid: left (sliding area) | center (FIXED) | right (sliding area) */
        .testimonial-container .slider-layout {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 1.2rem;
          align-items: stretch;
          margin: 1rem 0 1rem;
        }

        /* left & right columns – they contain multiple "slide" versions but only one active */

        /* each slide group (left or right) – we show/hide via JS */
        .testimonial-container .slide-group {
          display: flex;
          flex-direction: column;
          width: 100%;
          gap: 1.8rem;
        }

        .testimonial-container .slide-group.hidden {
          display: none;
        }

        /* testimonial card style – minimal */

        .testimonial-container hr {
          margin: 0.5rem 0 0.2rem;
          border: none;
          border-top: 1px solid var(--border);
        }

        .testimonial-container .patient-meta {
          font-size: 0.65rem;
          color: #7c98b0;
        }

        /* FIXED CENTER – never changes */
        .testimonial-container .center-fixed {
          min-height: 280px;
          height: 400px;
        }


        /* navigation – minimal */


        .testimonial-container .nav-btn {
          width: 40px;
          height: 40px;
          cursor: pointer;
          font-size: 1.1rem;
          color: #2c5f7a;
          transition: 0.1s;
        }

        .testimonial-container .nav-btn:hover {
          background: #eef3f8;
        }

        .testimonial-container .dots {
          display: flex;
          gap: 0.5rem;
        }

        .testimonial-container .dot {
          width: 7px;
          height: 7px;
          background: #cbdde6;
          border-radius: 20px;
          border: none;
          cursor: pointer;
          transition: 0.1s;
        }

        .testimonial-container .dot.active {
          background: #2c5f7a;
          width: 22px;
        }

        .accreditations-img {
          height: 100px;
          width: 100px;
        }

        /* FAQ Section - Bootstrap Accordion Override */
        .accordion-button:focus {
          box-shadow: none;
          border-color: var(--accent);
        }

        .accordion-button:not(.collapsed) {
          background-color: #fff;
          color: var(--accent);
        }

        .accordion-item {
          border: 1px solid var(--border);
          margin-bottom: 16px;
          border-radius: 6px !important;
          overflow: hidden;
        }

        .accordion-button {
          padding: 20px 24px;
          font-weight: 600;
          font-size: 1rem;
          background: #fff;
          color: #1e293b;
        }

        .accordion-button::after {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
        }

        .accordion-button:not(.collapsed)::after {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
        }

        .accordion-body {
          padding: 10px 24px 24px 24px;
          color: #212529;
          border-top: 1px solid var(--border);
        }

        /* News page css starts */
        .blog-card {
          transition: .3s ease;
        }

        .blog-img img {
          height: 280px;
          transition: .4s ease;
        }

        .blog-card:hover .blog-img img {
          transform: scale(1.05) translateY(-5px);
        }

        .date-badge {
          transform: translateY(-50%);
          background: rgba(13, 27, 72, .9);
          padding: 15px 20px;
          clip-path: polygon(20% 0, 100% 0, 100% 100%, 20% 100%, 0 50%);
        }

        .meta-item:not(:last-child)::after {
          content: "";
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 1px;
          height: 14px;
          background: #dcdcdc;
        }

        /* feature detail page css starts */
        .detail-img {
          max-width: 500px;
          height: auto;
        }


        .benefits-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 30px;
        }

        /* News details page css starts */
        .stable-image-grid {
          --grid-gap: 1rem;
        }

        .stable-image-grid .img-container {
          position: relative;
          width: 100%;
          background: #eef2f5;
          border-radius: 20px;
          overflow: hidden;
        }

        .stable-image-grid .img-container.small-img {
          height: 192px;
        }

        .stable-image-grid .img-container.large-img {
          height: 400px;
        }

        .stable-image-grid .img-container img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          display: block;
          transition: transform 0.3s ease;
        }

        .stable-image-grid .img-count-badge {
          position: absolute;
          top: 10px;
          left: 10px;
          background: rgba(0, 0, 0, 0.6);
          backdrop-filter: blur(4px);
          color: white;
          padding: 4px 12px;
          border-radius: 25px;
          font-size: 0.7rem;
          font-weight: 500;
          z-index: 2;
          pointer-events: none;
        }

        .stable-image-grid .img-container:hover img {
          transform: scale(1.02);
        }

        .share-links .bg-icon-small:hover {
          background: var(--primary);
        }

        .share-links .bg-icon-small:hover a i {
          color: #fff !important;
        }

        .articlelist {
          display: grid;
          grid-template-columns: auto auto;
        }

        .articleimage {
          width: 200px;
        }

        @media (max-width: 1200px) {

          .navbar-nav a,
          .navbar a.btn {
            font-size: 13px;
          }

          .service-card .card-media {
            max-width: 100%;
          }
        }

        @media (min-width: 992px) {
          .object-fit-cover {
            min-height: 100%;
          }
        }

        @media (max-width: 992px) {
          .slider-card {
            flex: 0 0 calc(50% - 0.75rem);
          }
        }

        @media (max-width: 780px) {
          .testimonial-container .slider-layout {
            grid-template-columns: 1fr;
            gap: 1.2rem;
          }

          .testimonial-container .center-fixed {
            order: 1;
            min-height: 180px;
          }

          .testimonial-container .cards-column {
            order: 2;
          }
        }


        @media screen and (max-width: 768px) {
          .fullimg-card .card-body {
            padding: 20px;
          }

          .mobile-border-end {
            border-right: 0px !important;
          }

          .fullimg-card .card-media {
            max-width: 100%;
          }

          .slider-card {
            flex: 0 0 100%;
            min-width: unset;
          }

          .stable-image-grid .img-container.small-img,
          .stable-image-grid .img-container.large-img {
            height: 220px;
          }

          .benefits-grid {
            grid-template-columns: repeat(2, 1fr);
          }

          .articlelist {
            display: auto;
          }
        }

        @media screen and (max-width: 576px) {

          .btn,
          .sort-tags {
            width: 100%;
          }

          .accreditations-img {
            height: 80px;
            width: 80px;
          }

          .stable-image-grid .img-container.small-img,
          .stable-image-grid .img-container.large-img {
            height: 180px;
          }

          .benefits-grid {
            grid-template-columns: repeat(1, 1fr);
          }

        }

        @media (max-width: 480px) {
          .testimonial-container .testimonial-header h1 {
            font-size: 1.6rem;
          }

          .testimonial-container .testimonial-header h2 {
            font-size: 1.1rem;
          }

          .testimonial-container .testimonial-card {
            padding: 0.8rem;
          }
        }