* {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: "Segoe UI", system-ui, sans-serif;
        }










        .hero {
          position: relative;
          width: 100%;
          padding: 80px 20px;
          /* background-image: url('https://png.pngtree.com/thumb_back/fh260/background/20240912/pngtree-doctor-holding-clipboard-in-hospital-corridor-medical-stock-photo-image_16150320.jpg'); */
          background-image: url("../images/resources-section.png");
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          margin-top: -75px;

          min-height: 90vh;
        }



        .hero-stats {
          display: flex;
          gap: 40px;
          margin-left: 40px;
          margin-top: 10px;
          margin-bottom: -70px;
          /* padding-top: 25px; */
        }

        .stat-box h3 {
          font-size: 36px;
          font-weight: 700;
          color: #2f63ff;
          margin-bottom: 6px;
        }

        .stat-box p {
          font-size: 14px;
          color: #555;
          max-width: 180px;
          line-height: 1.4;
        }

        /* Mobile Responsive */
        /* @media (max-width: 768px) {
          .hero-stats {
            margin-left: 0;
            justify-content: center;
            text-align: center;
            gap: 25px;
            flex-wrap: wrap;
          }

          .stat-box h3 {
            font-size: 28px;
          }

          .stat-box p {
            font-size: 13px;
          }
        }
 */


        .hero-overlay {
          position: absolute;
          inset: 0;
          background: linear-gradient(90deg,
              /* rgba(255, 255, 255, 0.95) 30%, */
              rgba(255, 255, 255, 0.6) 10%,
              rgba(255, 255, 255, 0.2) 100%);
        }

        .hero-container {
          position: relative;
          max-width: 1400px;
          margin: auto;
          display: flex;
          align-items: center;
          gap: 50px;
        }

        .hero-content {
          flex: 1;
        }

        .hero-content h1 {
          font-size: 48px;
          font-weight: 700;
          line-height: 1.2;
          color: #111;
          margin-bottom: 30px;
          margin-top: 40px;
          margin-left: 40px;
        }

        .hero-content p {
          font-size: 20px;
          color: #444;
          max-width: 500px;
          margin-bottom: 40px;
          margin-left: 40px;
        }

        .hero-btn {
          display: inline-block;
          background: #4f7cff;
          color: #fff;
          padding: 14px 28px;
          border-radius: 8px;
          text-decoration: none;
          font-weight: 600;
          margin-left: 40px;
        }

        .hero-btn i {
          margin-right: 8px;
        }

        .hero-image {
          flex: 1;
        }





        /* ===== OUTER WRAP ===== */
        .sgrh-quickbar {
          width: 100%;
          background: transparent;
          margin-top: -1px;
        }

        /* ===== CENTERED BAR ===== */
        .sgrh-quickbar-inner {
          width: 92%;
          max-width: 1050px;
          margin: 0 auto;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 50px;
          /* height kam rakhi */
          border-radius: 0 0 18px 18px;
          /* neeche curve left-right */
          box-shadow: 0 6px 18px #c3c8d4;
          overflow: hidden;
        }

        /* ===== ITEM ===== */
        .qb-item {
          flex: 1;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          text-decoration: none;
          font-size: 14px;
          font-weight: 500;
          color: #111;
          border-right: 1px solid #e4e4e4;
          transition: color .2s ease, background .2s ease;
        }

        /* last divider remove */
        .qb-item:last-child {
          border-right: none;
        }

        /* ===== ICON ===== */
        .qb-item i {
          font-size: 18px;
          color: #4f7cff;
          transition: color .2s ease;
        }


        /* ===== HOVER (BLUE ONLY) ===== */
        .qb-item:hover {
          color: #ffff;
          background: #3586ef;

          /* border-radius: 8px; */
        }

        .qb-item:hover i {
          color: #ffff;
        }

        /* ===== RESPONSIVE ===== */

        /* ================= TABLET (<=1024px) ================= */
        @media (max-width: 1024px) {
          .hero {
            padding: 70px 20px;
            min-height: auto;
          }

          .hero-content h1 {
            font-size: 40px;
            margin-left: 20px;
          }

          .hero-content p,
          .hero-btn {
            margin-left: 20px;
          }

          .hero-stats {
            gap: 30px;
            margin-left: 20px;
          }
        }


        /* ================= MOBILE (<=768px) ================= */
        @media (max-width: 768px) {
          .hero {
            padding: 60px 16px;
            margin-top: 0;
          }

          .hero-overlay {
            background: linear-gradient(to bottom,
                rgba(255, 255, 255, 0.96) 0%,
                rgba(255, 255, 255, 0.85) 60%,
                rgba(255, 255, 255, 0.6) 100%);
          }

          .hero-container {
            flex-direction: column;
            text-align: center;
            gap: 30px;
          }

          .hero-content h1 {
            font-size: 32px;
            margin-left: 0;
          }

          .hero-content p {
            font-size: 15px;
            margin-left: 0;
            max-width: 100%;
          }

          .hero-btn {
            margin-left: 0;
            font-size: 14px;
            padding: 13px 26px;
          }

          .hero-stats {
            justify-content: center;
            margin: 20px 0 0;
            gap: 25px;
            flex-wrap: wrap;
            text-align: center;
          }

          .stat-box h3 {
            font-size: 28px;
          }

          .stat-box p {
            font-size: 13px;
          }

          .sgrh-quickbar-inner {
            flex-wrap: wrap;
            height: auto;
          }

          .qb-item {
            width: 50%;
            height: 56px;
            border-bottom: 1px solid #e4e4e4;
          }
        }


        /* ================= SMALL MOBILE (<=480px) ================= */
        @media (max-width: 480px) {
          .hero {
            padding: 50px 14px;
          }

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

          .hero-content p {
            font-size: 14px;
          }

          .hero-btn {
            padding: 12px 22px;
            font-size: 13px;
          }

          .qb-item {
            width: 100%;
          }
        }





































        /* ================= Services Section ================= */

        .services-section {
          padding: 60px 10px;
          background: #fff;
          margin-top: 10px;
          text-align: center;
        }

        .services-section button {
          padding: 10px 70px;
          margin-top: -80px;
          margin-bottom: 40px;
          border-radius: 25px;
          color: #ffffff;
          background-color: #6c90fa;
          border: 0px solid #4f7cff;
          font-size: 18px;
          margin-top: 0px;
          box-shadow: 10px 6px 20px rgba(21, 21, 21, 0.25);
        }

        .services-title {
          text-align: center;
          /* font-size: 32px; */
          margin-bottom: 40px;
          /* font-weight: 600; */

        }


        .services-wrapper {
          max-width: 1220px;
          margin: auto;
          display: flex;
          gap: 40px;
          /* cards ke beech kam gap */
        }


        .services-btn {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 28px;
          background: #ffffff;
          border: 1px solid #e5e7eb;
          border-radius: 40px;
          font-size: 18px;
          font-weight: 600;
          cursor: pointer;
          margin: 0 auto;
        }

        .services-btn .leaf img {
          width: 24px;
          height: auto;
          display: block;
        }

        .left-leaf {
          margin-right: 6px;
        }

        .right-leaf {
          margin-left: 6px;
        }

        /* COMMON CARD */
        .service-card {
          background: #fff;
          border-radius: 18px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
          overflow: hidden;
          color: #4f7cff;
        }


        /* IMAGE CARD */
        .image-card {
          width: 33%;

        }

        .image-card img {
          width: 100%;
          height: 270px;
          object-fit: cover;
          /* align-items: start; */
          margin-top: -35px;
        }

        .card-content {
          padding: 26px;
        }

        /* CENTER */
        .center-stack {
          width: 40%;
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .text-card {
          padding: 30px;
        }

        /* TEXT */
        .service-card h3 {
          font-size: 22px;
          margin-bottom: 12px;
          color: #333333;
        }

        .service-card p {
          font-size: 15px;
          color: #555;
          line-height: 1.6;
        }

        .service-card a {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          margin-top: 18px;
          color: #4f7cff;
          font-weight: 500;
          text-decoration: none;
        }

        .service-card a span {
          background: #4f7cff;
          color: #fff;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        /* ================= SERVICES RESPONSIVE FIX ================= */

        /* Large Tablet */
        @media (max-width: 1100px) {
          .services-wrapper {
            gap: 30px;
          }

          .image-card img {
            height: 240px;
          }
        }

        /* Tablet */
        @media (max-width: 992px) {
          .services-section {
            padding: 50px 16px;
          }

          .services-wrapper {
            flex-direction: column;
            gap: 28px;
          }

          .image-card,
          .center-stack {
            width: 100%;
          }

          .image-card img {
            height: 260px;
          }

          .center-stack {
            gap: 20px;
          }
        }

        /* Mobile */
        @media (max-width: 600px) {
          .services-title {
            font-size: 26px;
            margin-bottom: 30px;
          }

          .service-card h3 {
            font-size: 20px;
          }

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

          .image-card img {
            height: 220px;
          }

          .text-card {
            padding: 24px;
          }
        }

        /* Small Mobile */
        @media (max-width: 420px) {
          .services-section {
            padding: 40px 12px;
          }

          .image-card img {
            height: 200px;
          }

          .service-card h3 {
            font-size: 18px;
          }

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























        /* ================= About Banner Section ================= */


        .about-wrap {
          width: 100%;
          background: #ffffff;
          padding: 70px 20px;
        }

        .about-inner {
          max-width: 1200px;
          margin: auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 40px;
          flex-wrap: wrap;
        }

        /* LEFT */
        .about-text {
          flex: 1;
          min-width: 320px;
        }

        .about-tag {
          color: #4f7cff;
          font-size: 14px;
          letter-spacing: 1px;
          display: inline-block;
          margin-bottom: 10px;
          position: relative;
        }

        /* 
        .about-tag::after {
          content: "";
          display: block;
          width: 50px;
          height: 2px;
          background: #4f7cff;
          margin-top: 6px;
        } */

        .about-text h1 {
          font-size: 42px;
          font-weight: 400;
          margin: 18px 0;
          color: #111;
        }

        .about-text h1 strong {
          font-weight: 700;
        }

        .about-text p {
          font-size: 16px;
          line-height: 1.9;
          color: #222;
          max-width: 520px;
        }

        .learn-btn {
          display: inline-block;
          margin-top: 30px;
          padding: 14px 36px;
          border-radius: 40px;
          /* background: #4f7cff; */
          color: #4f7cff;
          border: 1.5px solid #4f7cff;
          font-size: 14px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
          text-decoration: none;
          border-radius: 20px;

        }

        /* RIGHT */
        .about-visual {
          flex: 1;
          min-width: 320px;
          position: relative;
          display: flex;
          justify-content: center;
        }

        /* Big Image */
        .main-image {
          width: 360px;
          height: 460px;
          border-radius: 180px;
          background: url("../images/About MedSoft.png") center/cover no-repeat;
        }

        /* Anniversary Badge */
        /* .badge { */
        /* position: absolute;
          bottom: 20px;
          right: 20px;
          width: 260px;
          height: 320px; */
        /* background: #c999e8; */
        /* background: url("../images/about-wrap small.png"); */
        /* background: url(https://www.shutterstock.com/image-photo/doctor-scrubs-analyzing-medical-data-600nw-2635200709.jpg); */
        /* background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
          border-radius: 160px;
          color: #fff;
          text-align: center;
          padding: 40px 20px;
          box-shadow: 0 20px 40px rgba(0, 0, 0, .15); */
        /* } */

        /* .badge span {
          font-size: 12px;
          letter-spacing: 2px;
        }

        .badge h2 {
          font-size: 68px;
          margin: 10px 0;
          font-weight: 700;
        }

        .badge h2 span {
          font-size: 28px;
          vertical-align: top;
        }

        .badge p {
          font-size: 29px;
          margin-top: -10px;
        }

        .badge small {
          font-size: 20px;
          letter-spacing: 1px;
        } */

        /* Small Circle Image */
        .small-circle {
          position: absolute;
          top: 20px;
          right: 30px;
          width: 90px;
          height: 90px;
          border-radius: 50%;
          background: url("https://cdn-icons-png.flaticon.com/512/3024/3024328.png") center/cover no-repeat;
          border: 6px solid #fff;
        }

        /* =====================================================
   ABSOLUTE FINAL FIX — ABOUT SECTION (MOBILE)
   ===================================================== */

        @media (max-width: 768px) {

          /* FORCE SIMPLE STACK */
          .about-inner {
            display: block;
            text-align: center;
          }

          /* TEXT */
          .about-text {
            width: 100%;
            min-width: 100%;
            margin-bottom: 30px;
          }

          /* VISUAL WRAPPER */
          .about-visual {
            width: 100%;
            min-width: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
          }

          /* MAIN IMAGE — SAFE */
          .main-image {
            width: 240px;
            height: 320px;
            border-radius: 120px;
          }

          /* BADGE — NO ABSOLUTE, NO OVERLAP */
          /* .badge {
            position: static;
            margin-top: 24px;
            width: 200px;
            height: 260px;
            padding: 28px 16px;
          }

          .badge h2 {
            font-size: 56px;
          } */

          /* REMOVE FLOATING CIRCLE COMPLETELY */
          .small-circle {
            display: none;
          }
        }

        /* VERY SMALL MOBILE */
        @media (max-width: 420px) {
          .main-image {
            width: 220px;
            height: 300px;
            border-radius: 110px;
          }

          .badge {
            width: 180px;
            height: 240px;
          }

          .badge h2 {
            font-size: 50px;
          }
        }




























        /* 
        body {
          margin: 0;
          font-family: "Segoe UI", system-ui, sans-serif;
          background: #fff;
          color: #333;
        }

        .treatment-section {
          max-width: 1200px;
          margin: 100px auto;
          display: flex;
          gap: 60px;
          min-height: 100vh;
        }

        .treatment-sidebar {
          width: 320px;
          position: sticky;
          top: 100px;
        }

        .treatment-sidebar ul {
          list-style: none;
          padding: 0;
        }

        .treatment-sidebar li {
          padding: 18px 22px;
          border-radius: 16px;
          margin-bottom: 16px;
          cursor: pointer;
          border: 1px solid #eee;
          transition: .3s;
          font-size: 18px;
        }

        .treatment-sidebar li.active {
          background: #8b5a4a;
          color: #fff;
        }

        .treatment-content {
          flex: 1;
        }

        .treatment-content img {
          width: 100%;
          max-height: 300px;
          object-fit: cover;
          border-radius: 26px;
          margin-bottom: 28px;
        }

        .treatment-content h2 {
          font-size: 42px;
          color: #8b5a4a;
          margin-bottom: 16px;
        }

        .treatment-content p {
          font-size: 18px;
          max-width: 720px;
          margin-bottom: 22px;
        }

        .points {
          padding-left: 20px;
        }

        .points li {
          font-size: 17px;
          margin-bottom: 10px;
        }

        @media(max-width:992px) {
          .treatment-section {
            flex-direction: column;
          }

          .treatment-sidebar {
            width: 100%;
            position: relative;
          }
        } */


































        .medsoft-emr {
          background: #f3f7ff;
          padding: 80px 20px 130px;
          text-align: center;
        }

        .medsoft-emr-container {
          max-width: 1250px;
          margin: auto;
        }

        .medsoft-emr-title {
          font-size: 48px;
          font-weight: 700;
          color: #000;
          line-height: 1.25;
          margin-bottom: 18px;
        }

        .medsoft-emr-subtitle {
          font-size: 18px;
          color: #222;
          line-height: 1.6;
          margin-bottom: 90px;
        }

        .medsoft-emr-cards {
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;
        }

        /* CARD BASE */
        .medsoft-emr-card {
          width: 220px;
          height: 220px;
          background: #fff;
          border-radius: 22px;
          box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;
        }

        /* ICON */
        .medsoft-icon-wrap {
          width: 70px;
          height: 70px;
          background: #e9fbfb;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 18px;
          position: relative;
        }

        .medsoft-icon-wrap i {
          font-size: 30px;
          color: #1bb6b0;
        }

        /* TITLE */
        .medsoft-emr-card h3 {
          font-size: 18px;
          font-weight: 600;
          line-height: 1.4;
          color: #000;
        }

        /* 🔥 STAGGERED POSITIONS (SCREENSHOT MATCH) */
        .card-1 {
          transform: translateY(-35px);
        }

        .card-2 {
          transform: translateY(35px);
        }

        .card-3 {
          transform: translateY(-55px);
        }

        .card-4 {
          transform: translateY(35px);
        }

        .card-5 {
          transform: translateY(-35px);
        }


        /* ================= TABLET & BELOW ================= */
        @media (max-width: 992px) {
          .medsoft-emr-cards {
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
          }

          .medsoft-emr-card {
            transform: translateY(0) !important;
          }
        }

        /* ================= MOBILE : 2–2 CARDS ================= */
        @media (max-width: 576px) {
          .medsoft-emr-title {
            font-size: 32px;
          }

          .medsoft-emr-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            justify-items: center;
          }

          .medsoft-emr-card {
            width: 100%;
            height: 200px;
            transform: translateY(0) !important;
          }
        }

        /* ================= EXTRA SMALL MOBILES ================= */
        @media (max-width: 360px) {
          .medsoft-emr-title {
            font-size: 28px;
          }

          .medsoft-emr-cards {
            gap: 12px;
          }

          .medsoft-emr-card {
            height: 190px;
          }
        }






































        /* Trusted Section */
        .trusted-section {
          text-align: center;
          padding: 80px 20px;
          background: #ffffff;
        }

        .trusted-section h2 {
          font-size: 40px;
          font-weight: 600;
          margin-bottom: 20px;
        }

        .trusted-text {
          max-width: 900px;
          margin: 0 auto 60px;
          font-size: 18px;
          line-height: 1.7;
          color: #333;
        }

        /* Marquee Container */
        .logo-marquee {
          overflow: hidden;
          width: 100%;
          position: relative;
          max-width: 1210px;
          margin: 0 auto;

        }

        /* Moving Track */
        .logo-track {
          display: flex;
          gap: 80px;
          width: max-content;
          animation: scrollLeft 25s linear infinite;
        }

        /* Pause animation on hover */
        .logo-marquee:hover .logo-track {
          animation-play-state: paused;
        }

        /* Logos */
        .logo-track img {
          height: 45px;
          width: auto;
          object-fit: contain;
          opacity: 0.9;
          transition: opacity 0.3s ease;
        }

        .logo-track img:hover {
          opacity: 1;
        }

        /* Animation */
        @keyframes scrollLeft {
          from {
            transform: translateX(0);
          }

          to {
            transform: translateX(-50%);
          }
        }

        /* Responsive */
        @media (max-width: 768px) {
          .trusted-section h2 {
            font-size: 32px;
          }

          .trusted-text {
            font-size: 16px;
          }

          .logo-track {
            gap: 50px;
          }

          .logo-track img {
            height: 35px;
          }
        }



























        .scroll-indicator {
          position: fixed;
          left: 20px;
          bottom: 30px;
          width: 60px;
          height: 60px;
          z-index: 9999;
        }

        .scroll-indicator svg {
          width: 100%;
          height: 100%;
          transform: rotate(-90deg);
        }

        .scroll-indicator circle {
          fill: none;
          stroke-width: 8;
        }

        .scroll-indicator .bg {
          stroke: #e6e6e6;
        }

        .scroll-indicator .progress {
          stroke: #4f7cff;
          stroke-dasharray: 283;
          stroke-dashoffset: 283;
        }

        .scroll-indicator .arrow {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26px;
          font-weight: bold;
          color: #111;
          pointer-events: none;
        }


























        .euclid-section {
          background: #f3f7ff;
          padding: 70px 20px;
        }

        /* Upper Heading */
        .section-header {
          max-width: 800px;
          margin: 0 auto 45px auto;
          text-align: center;
          color: #4f7cff;
        }

        .section-header h1 {
          font-size: 40px;
          margin-bottom: 15px;
        }

        .section-header p {
          font-size: 16px;
          line-height: 1.6;
          opacity: 0.9;
        }

        /* White Card */
        .tabs-wrapper {
          max-width: 1200px;
          margin: auto;
          background: #fff;
          border-radius: 16px;
          padding: 40px;
        }

        /* Tabs */
        .tabs {
          display: flex;
          gap: 40px;
          border-bottom: 1px solid #ddd;
          margin-bottom: 50px;
          /* Screenshot jaisa gap */
        }

        .tab {
          background: none;
          border: none;
          padding: 15px 0;
          font-size: 14px;
          font-weight: 600;
          color: #777;
          cursor: pointer;
          position: relative;
        }

        .tab.active {
          color: #0099ff;
        }

        .tab.active::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: -1px;
          width: 100%;
          height: 3px;
          background: #0099ff;
        }

        /* Content */
        .content {
          display: none;
        }

        .content.active {
          display: block;
        }

        .content-inner {
          display: flex;
          align-items: center;
          gap: 40px;
        }

        .text {
          flex: 1;
        }

        .text h2 {
          color: #0099ff;
          font-size: 32px;
          margin-bottom: 20px;
        }

        .text p {
          color: #444;
          line-height: 1.7;
          margin-bottom: 15px;
        }

        .btn {
          display: inline-block;
          margin-top: 15px;
          color: #4f7cff;
          font-weight: bold;
          text-decoration: none;
          border-bottom: 2px solid #4f7cff;
        }

        .image {
          flex: 1;
        }

        .image img {
          width: 100%;
          border-radius: 12px;
        }

        /* Responsive */
        @media (max-width: 768px) {
          .tabs {
            flex-direction: column;
            gap: 10px;
          }

          .content-inner {
            flex-direction: column;
          }
        }






















































        /* ================= Patient Stories Section ================= */

        .patient-stories {
          padding: 60px 10px;
          background: #fff;
        }

        .section-title {
          text-align: center;
          font-size: 32px;
          font-weight: 600;
          margin-bottom: 40px;
          color: #4f7cff;
        }

        .stories-layout {
          max-width: 1250px;
          margin: auto;
          display: grid;
          grid-template-columns: 1fr 1.2fr 1.6fr 1.2fr 1fr;
          grid-template-rows: 260px 260px;
          gap: 20px;
        }

        /* FIXED POSITIONS */
        .s1 {
          grid-column: 1;
          grid-row: 1 / span 2;
        }

        .s2 {
          grid-column: 2;
          grid-row: 1;
        }

        .s3 {
          grid-column: 2;
          grid-row: 2;
        }

        .s4 {
          grid-column: 3;
          grid-row: 1 / span 2;
        }

        .s5 {
          grid-column: 4;
          grid-row: 1;
        }

        .s6 {
          grid-column: 4;
          grid-row: 2;
        }

        .s7 {
          grid-column: 5;
          grid-row: 1 / span 2;
        }

        /* LEFT & RIGHT SINGLE — slightly smaller & centered */
        .s1,
        .s7 {
          align-self: center;
          height: 460px;
        }

        /* CARD */
        .story {
          position: relative;
          border-radius: 22px;
          overflow: hidden;
        }

        .story img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          filter: blur(0.7px);
        }

        /* OVERLAY */
        .overlay {
          position: absolute;
          inset: 0;
          background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, .15));
          color: #fff;
          padding: 20px;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
        }

        .overlay h3 {
          font-size: 15px;
          font-weight: 600;
          margin-bottom: 4px;
        }

        .overlay .name {
          font-size: 13px;
          opacity: .85;
        }

        .overlay .quote {
          font-size: 13px;
          line-height: 1.5;
          margin-top: 10px;
          opacity: 0;
          transform: translateY(10px);
          transition: .35s ease;
        }

        /* HOVER MESSAGE */
        .story:hover .overlay .quote {
          opacity: 1;
          transform: translateY(0);
        }

        /* =====================================================
   ABSOLUTE FINAL FIX — PATIENT STORIES
   ===================================================== */
        @media (max-width: 768px) {

          .stories-layout {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            /* 🔥 IMPORTANT */
            gap: 18px;
          }

          .s1,
          .s2,
          .s3,
          .s4,
          .s5,
          .s6,
          .s7 {
            grid-column: auto !important;
            grid-row: auto !important;
            height: auto !important;
            align-self: stretch !important;
            /* 🔥 IMPORTANT */
          }

          .story {
            height: 240px;
          }
        }

        /* SMALL MOBILE */
        @media (max-width: 420px) {
          .story {
            height: 220px;
          }
        }






















































        /* ================= Info Section ================= */
        /* 

        .info-section {
          background: #f7f7f7;
          padding: 40px 20px;
        }

        .info-grid {
          max-width: 1200px;
          margin: auto;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 26px;
        }

        .info-card {
          background: #ffffff;
          border-radius: 18px;
          padding: 26px;
          display: flex;
          justify-content: space-between;
          gap: 20px;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        }

        .card-content h3 {
          color: #007c7a;
          font-size: 20px;
          margin-bottom: 12px;
        }

        .card-content p {
          color: #333;
          font-size: 14px;
          line-height: 1.6;
          margin-bottom: 18px;
        }

        .card-content a {
          font-size: 14px;
          color: #000;
          text-decoration: none;
          font-weight: 500;
        }

        .card-content a span {
          margin-left: 6px;
        }

        .card-icon img {
          width: 44px;
          height: 44px;
        }


        @media (max-width: 1024px) {
          .info-grid {
            gap: 22px;
          }

          .info-card {
            padding: 24px;
          }

          .card-content h3 {
            font-size: 18px;
          }
        }

        @media (max-width: 992px) {
          .info-section {
            padding: 40px 16px;
          }

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

        @media (max-width: 600px) {
          .info-grid {
            grid-template-columns: 1fr;
          }

          .info-card {
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
          }

          .card-icon img {
            width: 40px;
            height: 40px;
          }

          .card-content h3 {
            font-size: 17px;
          }

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

        @media (max-width: 420px) {
          .info-section {
            padding: 32px 12px;
          }

          .info-card {
            padding: 22px;
          }

          .card-content h3 {
            font-size: 16px;
          }
        } */