/* =========================================================
   DR. PAVAN KUMAR
   SOCIAL MEDIA - 3 BOX SECTION
========================================================= */

.pk-social-section {
    position: relative;
    padding: 90px 0;
    background:
        linear-gradient(
            135deg,
            #f8fcff 0%,
            #eef8fc 50%,
            #ffffff 100%
        );
    overflow: hidden;
}


/* BACKGROUND DECORATION */

.pk-social-section::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(20, 130, 165, 0.05);
    top: -200px;
    left: -170px;
}

.pk-social-section::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(0, 80, 110, 0.04);
    right: -150px;
    bottom: -180px;
}


/* CONTAINER */

.pk-social-section .container {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}


/* =========================================================
   HEADING
========================================================= */

.pk-social-heading {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
}

.pk-social-eyebrow {
    display: inline-block;
    margin-bottom: 12px;

    color: #1682a5;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.pk-social-heading h2 {
    margin: 0 0 15px;

    color: #063c56;

    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
}

.pk-social-heading p {
    margin: 0;

    color: #667b86;

    font-size: 17px;
    line-height: 1.8;
}


/* =========================================================
   GRID
========================================================= */

.pk-social-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 28px;
}


/* =========================================================
   CARD
========================================================= */

.pk-social-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    background: #ffffff;

    border: 1px solid #e2edf1;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 12px 40px
        rgba(0, 58, 80, 0.07);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.pk-social-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 22px 55px
        rgba(0, 58, 80, 0.14);
}


/* =========================================================
   CARD HEADER
========================================================= */

.pk-social-card-header {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 22px;

    border-bottom:
        1px solid #edf2f4;
}


/* ICON */

.pk-social-icon {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #edf7fa;

    font-size: 21px;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}


/* HEADER TEXT */

.pk-social-card-header h3 {
    margin: 0 0 4px;

    color: #123f51;

    font-size: 18px;
    font-weight: 700;
}

.pk-social-card-header span {
    display: block;

    color: #7c9099;

    font-size: 13px;
}


/* =========================================================
   CONTENT
========================================================= */

.pk-social-content {
    min-height: auto;

    padding: 20px 20px 0px 20px;

    flex: 1;
}


/* =========================================================
   INSTAGRAM
========================================================= */

.instagram-content {
    display: flex;
    flex-direction: column;
}

.instagram-profile {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 22px;
}

.instagram-avatar {
    width: 60px;
    height: 60px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #f9ce34,
            #ee2a7b,
            #6228d7
        );

    color: #ffffff;

    font-size: 26px;
}

.instagram-profile-info {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.instagram-profile-info strong {
    color: #183e4d;

    font-size: 15px;
}

.instagram-profile-info span {
    color: #84969d;

    font-size: 13px;
}


/* INSTAGRAM FEED AREA */

.instagram-feed-box {
    flex: 1;

    min-height: 285px;

    padding: 25px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #fff8fc,
            #f7fbfd
        );

    border: 1px solid #edf0f2;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: column;

    text-align: center;
}

.instagram-feed-box i {
    margin-bottom: 15px;

    color: #d62976;

    font-size: 48px;
}

.instagram-feed-box h4 {
    margin: 0 0 8px;

    color: #284b5a;

    font-size: 17px;
}

.instagram-feed-box p {
    max-width: 280px;

    margin: 0;

    color: #71838b;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   X / TWITTER
========================================================= */

.twitter-content {
    padding: 0;

    min-height: 430px;

    overflow: hidden;
}

.twitter-content .twitter-timeline {
    display: block;

    width: 100%;

    min-height: 420px;
}


/* =========================================================
   LINKEDIN
========================================================= */

.linkedin-content {
    display: flex;
   
}

.linkedin-profile {
    width: 100%;

    text-align: center;
}

.linkedin-logo {
    width: 72px;
    height: 72px;

    margin: 5px auto 18px;

    border-radius: 16px;

    background: #0a66c2;

    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 32px;
}

.linkedin-profile h4 {
    margin: 0 0 7px;

    color: #163f50;

    font-size: 20px;
}

.linkedin-title {
    margin: 0;

    color: #71858d;

    font-size: 14px;
}

.linkedin-divider {
    width: 50px;
    height: 2px;

    margin: 20px auto;

    background: #1682a5;
}

.linkedin-description {
    max-width: 330px;

    margin: 0 auto 22px;

    color: #667b84;

    font-size: 14px;

    line-height: 1.8;
}


/* LINKEDIN FEED */

.linkedin-feed-placeholder {
    min-height: 120px;

    border-radius: 14px;

    background: #f6f9fb;

    border: 1px solid #e8eef1;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 8px;
}

.linkedin-feed-placeholder i {
    color: #0a66c2;

    font-size: 30px;
}

.linkedin-feed-placeholder span {
    color: #71838b;

    font-size: 13px;
}


/* =========================================================
   BUTTON
========================================================= */

.pk-social-btn {
    margin: 0 20px 20px;

    padding: 13px 18px;

    border-radius: 10px;

    background: #073f57;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 14px;
    font-weight: 600;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.pk-social-btn i {
    font-size: 12px;

    transition:
        transform 0.3s ease;
}

.pk-social-btn:hover {
    background: #1682a5;

    color: #ffffff !important;
}

.pk-social-btn:hover i {
    transform: translateX(4px);
}


/* =========================================================
   BRAND HOVER
========================================================= */

.instagram-card:hover .pk-social-icon {
    background: #fcecf5;
    color: #d62976;
}

.twitter-card:hover .pk-social-icon {
    background: #eef3f5;
    color: #000000;
}

.linkedin-card:hover .pk-social-icon {
    background: #e8f2fc;
    color: #0a66c2;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .pk-social-grid {
        grid-template-columns: 1fr 1fr;
    }

    .linkedin-card {
        grid-column: 1 / -1;

        max-width: 600px;

        width: 100%;

        margin: 0 auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */



@media (max-width: 767px) {
.btn-primary{ background:#0099cc; color:#fff; margin-bottom:20px}
.tile p {
    font-size: 14px !important;
    color: #333;
    margin: 0;
    line-height: 25px !important;
}
.ratio>iframe, .ratio>img {
position: relative !important; 
    inset: 0;
    width: 100%;
    height: 200px !important;
    border: 0;
    object-fit: inherit;    max-width: 100%;
    /* height: auto; */
}

.footer-col ul li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);}

.visual-slide img {
    width: 100% !important;
    height: auto !important;max-width:100% !important}
.hero-wrapper .hero-actions{margin:0px !important}
.btn-primary{ background:#0099cc; color:#fff; margin-bottom:20px; }
 .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
 

.header-top-row .header-actions .btn-ghost, .header-top-row .header-actions .btn-primary{ display:none}
.faq {
     border-radius: 40px;
    padding: 40px 0px  !important;
}
.blog-card h3 {
    font-size: 25px !important;
    line-height: 35px !important;
  
}
.testimonials .quote {
    margin: 0;
    padding: 25px !important}
.preventive-text-content h3 {
    font-size: 35px !important;}
.main-heading {
    font-size: 40px !important;  }
.section-divider {
    display: flex;
    align-items: center;margin-bottom:20px;
}
.awards {
    padding: 40px 0px !important;}
.reason-title span {
   
    font-size: 25px !important}

.reason-title {
    font-size: 20px !important}
  

.reason-card {
 
    padding: 25px !important}
    

.hero-section {
    padding: 30px 0 50px !important;
    display: flex;
    justify-content: flex-end;
}
.hero-headline {
    font-size: 38px !important;
   
}
.single-news-container{padding:30px !important}
.news-slide h3 {
    font-size: 28px !important;
     
}
.news-slide p {
    font-size: 16px !important;
    color: #333;
    line-height: 1.6;
}
.single-news-container{ height:auto; min-height:inherit}

.testimonials .quote-grid {
    
    grid-template-columns: repeat(1, 1fr) !important;
    
}
.blog-grid {
 
    grid-template-columns: repeat(1, 1fr) !important;
  
}

    .pk-social-section {
        padding: 65px 0;
    }

    .pk-social-heading {
        margin-bottom: 35px;
    }

    .pk-social-heading h2 {
        font-size: 32px;
    }

    .pk-social-heading p {
        font-size: 15px;
    }

    .pk-social-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .linkedin-card {
        grid-column: auto;
        max-width: none;
    }

    .pk-social-content {
        min-height: auto;
    }

    .twitter-content {
        min-height: 430px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .pk-social-section .container {
        padding: 0 15px;
    }

    .pk-social-heading h2 {
        font-size: 28px;
    }

    .pk-social-card-header {
        padding: 18px;
    }

    .pk-social-content {
        padding: 18px;
    }

    .twitter-content {
        padding: 0;
    }

    .pk-social-btn {
        margin: 0 18px 18px;
    }

}




:root{
  --bg:#0a0f14;
  --bg-2:#0f151c;
  --panel:#131b23;
  --ink:#eef2f5;
  --ink-dim:#a7b0b9;
  --line:rgba(255,255,255,.08);
  --accent:#7fe7d4;
  --accent-2:#e94b52;
  --gold:#0099cc;
  --serif:'Instrument Serif',ui-serif,Georgia,serif;
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --radius:14px;
}
.footer-col1 ul li {
    border-bottom: 1px solid #b4a7a7;
}
.footer-col1 ul li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    color: rgb(0 0 0 / 85%);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.25s ease-in-out;
}


.ecg{margin-top:44px;height:60px;width:100%;overflow:hidden}
.ecg path{fill:none;stroke:#0284c7;stroke-width:2;stroke-dasharray:1200;stroke-dashoffset:1200;animation:trace 4.5s linear infinite}
@keyframes trace{to{stroke-dashoffset:-1200}}


p{    font-weight: 500;           font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 30px;margin-bottom:15px; color:#333333;margin-bottom:20px}

/* TESTIMONIALS */
.section-head {
    padding: 0px 0px  40px 0px;
     margin: 0 auto;color:#FFFFFF
}
/*services*/
    /* Grid Layout */
	
    .grid-wrapper {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      align-items: stretch; color:#333333
    }

    /* Left Content Section */
    .content-col {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }

    /* Badge */
    .badge {
         font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #000;
    margin-bottom: 12px;
    display: block;
    }

    .badge svg {
      width: 1rem;
      height: 1rem;
      fill: currentColor;
    }

    /* Heading Styles */
    .main-heading {
        font-size: 48px;
    font-family: 'Instrument Serif', ui-serif, Georgia, serif;
     letter-spacing: -0.02em;
        color: #ffffff;
      margin-bottom: 1.5rem; font-weight:500
    }

    .highlight-text {
      background-color: #0099cc;
      color: #fff;
      padding: 0.125rem 0.5rem;
      display: inline-block;
      margin-top: 0.25rem;letter-spacing:1px
    }

    /* Subtitle & Feature List */
    .subtitle {
      color: #333;
      font-size: 0.875rem;
      line-height: 1.625;
      margin-bottom: 1.5rem;
    }

    .feature-list {
      list-style: none;
      margin-bottom: 2rem;
    }

    .feature-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-bottom: 15px;
    }

    .check-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 50%;
      background-color: #0099cc;
      color: #fff;
      flex-shrink: 0;
    }

    .check-icon svg {
      width: 0.875rem;
      height: 0.875rem;
      stroke: currentColor;
      stroke-width: 3;
    }

    /* CTA Button */
    .cta-button {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      background-color: #0099cc;
      color: #fff;
      padding: 0.75rem 1.5rem;
      border-radius: 9999px;
      font-weight: 700;
      font-size: 0.75rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .cta-button:hover {
      background-color: #f3f4f6;
    }

    .cta-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
       color: #ffffff;
    }

    .cta-arrow svg {
      width: 0.875rem;
      height: 0.875rem;
      stroke: currentColor;
      stroke-width: 2.5;
    }

    /* Carousel Right Section */
    .carousel-wrapper {
      position: relative;
    }

    .carousel-slide {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      transition: opacity 1000ms ease-in-out, transform 1000ms cubic-bezier(0.16, 1, 0.3, 1), visibility 1000ms ease-in-out;
    }

    /* Zoom Effects */
    .slide-hidden {
      opacity: 0;
      transform: scale(1.1);
      pointer-events: none;
      z-index: 0;
    }

    .slide-visible {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
      z-index: 10;
    }

    /* Cards */
    .card {
      position: relative;
      border-radius: 1rem;
      overflow: hidden;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      height: 100%;
      min-height: 230px;
    }

    .card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 500ms ease;
    }

    .card:hover img {
      transform: scale(1.05);
    }

    .card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 1.25rem;
    }

    .card-title {
      font-size: 30px;
      font-weight: 500;
      color: #ffffff;
      margin-bottom: 20px;     font-family: 'Instrument Serif', ui-serif, Georgia, serif;
    }

    .card-desc {
      font-size: 0.75rem;
      color: #d1d5db;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Staggered Offset for Right Cards */
    .offset-card {
      margin-top: 0;
    }

    /* Responsive Media Queries */
    @media (min-width: 640px) {
      
      .main-heading {
        font-size: 2.25rem;
      }
      .subtitle {
        font-size: 18px;
      }
      .carousel-slide {
        grid-template-columns: repeat(2, 1fr);
      }
      .offset-card {
        margin-top: 30px;
      }
    }

    @media (min-width: 1024px) {
      
      .grid-wrapper {
        grid-template-columns: repeat(12, 1fr);
        gap: 3rem;
      }
      .content-col {
        grid-column: span 4 / span 4;
      }
      .carousel-wrapper {
        grid-column: span 8 / span 8;
      }
    }
/* FAQ */.faq .eyebrow{ color:#000}
ul.list li {
    margin: 10px 0;
    font-size: 15px;
    font-weight: 400;
    padding-left: 25px;
    color: #333;
    text-align: left;
    position: relative;display:block
}
ul.list li:before {
    border: none;
    color: #666;
    content: "\f111";
    display: inline-block;
    font-family: fontawesome;
    font-size: 7px;
    margin-right: 10px;
    padding: 0;
    left: 0;
    position: absolute;
    top: 5px;
}
.faq .section-title{ color:#0284c7}
.faq{    background: linear-gradient(180deg, #edf7fa 0%, #ffffff 100%);
    border-radius: 80px;padding:80px 0px}
.faq-list{max-width:1000px;margin:0 auto; }
.faq-list details{border-bottom:1px solid #0284c7;padding:20px 0}
.faq-list summary{
  cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:22px;line-height:1.3;letter-spacing:-.005em;
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  color:#000;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";font-family:var(--sans);color:#000;font-size:26px;
  transition:transform .3s ease;flex:0 0 auto;
}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list p{margin:16px 0 0;color:#333;font-size:15px; }
.fa-angle-double-right{ font-size:14px}
/* BLOG */
.blog{padding:80px 0px; background: #09162c;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{padding:20px;    background: linear-gradient(120deg, #122346, #1d3464);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: #fff;display:flex;flex-direction:column;gap:16px;transition:transform .3s ease}
.blog-card:hover{transform:translateY(-4px)}
.blog-card h3{margin:0;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2;letter-spacing:-.01em}
.blog-card p{margin:0;color:#fff !important;font-size:14px;flex:1}


.testimonials .eyebrow{ color:#FFFFFF}
.testimonials .section-title{ color:#FFFFFF}
.testimonials{    background: #09162c;padding:80px 0px}
.testimonials  .rating{display:flex;align-items:center;gap:25px;font-size:15px;color:#fff;flex-wrap:wrap}
.testimonials  .stars{color:var(--gold);letter-spacing:.15em}
.testimonials  .rating-num{font-family:var(--serif);font-size:24px;color:#fff}
.testimonials  .quote-grid{margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.testimonials  .quote{margin:0;padding:44px;    background: linear-gradient(120deg, #122346, #1d3464);border:1px solid var(--line);border-radius:var(--radius);color:#fff}
.testimonials  .quote p{font-family:var(--serif);font-size:22px;line-height:1.4;margin:0 0 20px;color:#fff !important}
.testimonials  .quote footer{color:#fff;font-size:13px;letter-spacing:.05em;text-transform:uppercase; background:none; text-align:left !important; border-top:solid 1px #666}

	   /* ---------------- HERO / STATEMENT SECTION ---------------- */
        .hero-section {
            padding: 80px 0 100px;
            display: flex;
            justify-content: flex-end; /* Right aligned like Neko Health */
        }

        .hero-content {
            max-width: 720px;
        }

        .hero-headline {
            font-size: 68px;
            line-height: 1.05;
            letter-spacing: -0.02em;
            margin-bottom: 36px;
            color: #0099cc;
        }

        /* ---------------- PURE CSS SCROLL ANIMATION ---------------- */
        .scroll-word {
            display: inline-block;
            
            /* CSS Scroll-Driven Animation Settings */
            animation: textHighlight auto linear both;
            animation-timeline: view(); /* Viewport me aane par scroll ke sath sync hoga */
            animation-range: entry 10% cover 40%; /* Kitni screen scroll hone par kitna highlight hoga */
        }

        @keyframes textHighlight {
            from {
                opacity: 0.2; /* Faded Gray State */
            }
            to {
                opacity: 1; /* Dark Active State */
            }
        }

        /* Fallback: Older browsers jo CSS Scroll Timeline support nahi karte unke liye smooth hover transition */
        @supports not (animation-timeline: view()) {
            .scroll-word {
                opacity: 0.3;
                transition: opacity 0.3s ease;
            }
            .hero-headline:hover .scroll-word {
                opacity: 1;
            }
        }

        /* Neko Arrow Button */
        .neko-btn {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: #111111;
            font-size: 15px;
            font-weight: 500;
            transition: opacity 0.2s ease;
        }

        .neko-btn:hover {
            opacity: 0.7;
        }

        .neko-btn .btn-icon {
            width: 44px;
            height: 44px;
            background-color: #262c2e;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 16px;
        }

       
	
	
	 /* ---------------- NEW SECTION: ALL SERVICES / SPECIALISATIONS (AUTOMATIC CAROUSEL) ---------------- */
.spec-section {
    padding: 80px 0;
    width: 100%;
    background: linear-gradient(180deg, #edf7fa 0%, #ffffff 100%);
    border-radius: 80px 80px 0 0;
    overflow: hidden; /* Excess track scrollbar ko hide karne ke liye */
}

.spec-section h2 {
    font-size: 52px;
    letter-spacing: -0.02em;
    margin-bottom: 60px;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
}

/* Outer Container - Hides overflow and handles touch scroll */
.spec-carousel-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 40px;
}

.spec-carousel-container::-webkit-scrollbar {
    display: none;
}

/* Continuous Horizontal Sliding Track */
.spec-cards-track {
    display: flex;
    gap: 24px;
    width: max-content;
    padding-left: 24px;
    padding-right: 24px;
    /* Continuous marquee/infinite slide animation */
    animation: autoScrollSpec 35s linear infinite;
}

/* Hover par continuous scroll pause ho jayega taaki user cards par click/read kar sake */
.spec-cards-track:hover {
    animation-play-state: paused;
}

@keyframes autoScrollSpec {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Total track width shift */
        transform: translateX(-50%);
    }
}

/* Service Card Styling */
.spec-card-item {    border: solid 2px #0099cc;
    min-width: 400px;
    width: 400px;
    height: 480px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.spec-card-img {
    width: 100%;
    height: 100%;  height:auto;
 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.spec-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%;
    background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    z-index: 2;
}

.spec-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    z-index: 3;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.spec-card-content h3 {
    font-size: 28px;              font-family: 'Instrument Serif', ui-serif, Georgia, serif;

     letter-spacing: 1px; font-weight:400;
    line-height: 1.2;
    margin-bottom: 10px;
}

.spec-card-content p {
    font-size: 15px;
    opacity: 0.8;
    line-height: 1.5;
    margin-bottom: 20px;
}

.spec-learn-more {
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.spec-learn-more::after {
   content: "\f105";
    font-family: "Font Awesome 7 Free";
    font-weight: 900; /* Required for Solid icons */
    font-size: 16px;}

.spec-cta {
    text-align: center;
    margin-top: 40px;
    font-size: 16px;
    color: #333;
}

.spec-cta a {
    color: #0088cc;
    font-weight: 600;
    text-decoration: none;
}
        /* Base Reset */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            color: #333;
            background-color: #f1f5f9;
            
        }

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

        /* Serif Typography for Titles */
        .serif {
    font-family: 'Instrument Serif', ui-serif, Georgia, serif;
            font-weight: 400;
        }

        /* ---------------- SECTION 1: REVIEWS (HORIZONTAL CAROUSEL) ---------------- */
        .reviews-section {
            padding: 80px 0 60px;
            text-align: center;
        }

        .reviews-section h2 {
            font-size: 52px;
            letter-spacing: -0.02em;
            margin-bottom: 40px;
        }

        /* Horizontal Carousel Wrapper */
        .reviews-carousel-wrapper {
            position: relative;
            overflow: hidden;
            max-width: 900px;
            margin: 0 auto;
            padding: 15px 0;
        }

        .reviews-cards-track {
            display: flex;
            gap: 24px;
            animation: scrollTestimonials 12s cubic-bezier(0.45, 0, 0.55, 1) infinite;
        }

        /* Testimonial Card Styling */
        .testimonial-card-item {
            min-width: 420px;
            width: 420px;
            background: #fdfdfd;
            border: 1px solid #eaeaea;
            border-radius: 20px;
            padding: 36px 28px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
            text-align: left;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-shrink: 0;
        }

        .testimonial-badge {
            display: inline-block;
            background: #eef8fc;
            color: #0088cc;
            padding: 4px 14px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 16px;
        }

        .quote-mark {
            font-size: 32px;
            color: #0088cc;
            line-height: 1;
            margin-bottom: 8px;
            display: block;
        }

        .testimonial-card-item p {
            font-size: 16px;
            color: #222;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .stars {
            color: #ffb400;
            font-size: 15px;
            letter-spacing: 2px;
            margin-bottom: 8px;
        }

        .author {
            font-size: 15px;
            color: #666;
            font-weight: 500;
        }

        .author span {
            color: #111;
            font-weight: 700;
        }

        /* Smooth Carousel Animation between Card Sets */
        @keyframes scrollTestimonials {
            0%, 40% {
                transform: translateX(0);
            }
            50%, 90% {
                transform: translateX(-444px); /* Moves exactly 1 card + gap */
            }
            100% {
                transform: translateX(0);
            }
        }

        /* Section Divider Tag */
        .section-tag {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #222;
            padding-top: 40px;
            border-top: 1px solid #e5e5e5;
            margin-top: 80px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .section-tag::before {
            content: "?";
            font-size: 8px;
        }

        /* ---------------- SECTION 2: LATEST NEWS (FADE IN/OUT SINGLE NEWS) ---------------- */
        .news-section {
            padding: 80px 0px;
        }

        .news-grid {
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 60px;
            align-items: center;
        }

        .news-left h2 {
            font-size: 48px;    font-family: 'Instrument Serif', ui-serif, Georgia, serif;
            letter-spacing: -0.02em;
            margin-bottom: 24px;
        }

        .news-left p {
            font-size: 15px;
            color: #333;
            line-height: 1.6;
            max-width: 380px;
            margin-bottom: 32px;
        }

        .btn-round {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 15px;
            font-weight: 500;
            color: #111;
            text-decoration: none;
        }

        .btn-round .arrow-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #222;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            transition: transform 0.2s;
        }

        .btn-round:hover .arrow-circle {
            transform: translateX(3px);
        }

        /* News Card Stack Container (Single Card View) */
        .single-news-container {
            position: relative;
    background: linear-gradient(180deg, #edf7fa 0%, #edf7fa 100%);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            min-height: 350px; /* Essential to maintain section height */
            overflow: hidden;
            display: flex;
            flex-direction: column;
     font-family: 'Instrument Serif', ui-serif, Georgia, serif;
        }

.news-badge {
    display: inline-block;
    background: #000;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.05em;
    /* text-transform: uppercase; */
    align-self: flex-start;
    margin-bottom: 16px;
    z-index: 5;
    color: #fff;
}
        /* The sliding/fading news slides */
        .news-slides-wrapper {
            position: relative;
            min-height: 180px; /* Space for text inside card */
        }

        .news-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0;
            animation: fadeSlide 15s infinite; /* 3 slides, 5 sec each */
        }

        /* Delayed start for second and third slides */
        .news-slide:nth-child(1) { animation-delay: 0s; }
        .news-slide:nth-child(2) { animation-delay: 5s; }
        .news-slide:nth-child(3) { animation-delay: 10s; }

        .news-slide h3 {
            font-size:35px;
            line-height: 1.25;
            margin-bottom: 16px;
               color: #0284c7;
        }

        .news-slide p {
            font-size: 18px;
            color: #333;
            line-height: 1.6;
        }

        @keyframes fadeSlide {
            0% { opacity: 0; transform: translateY(6px); }   /* Start invisible and slightly lower */
            5% { opacity: 1; transform: translateY(0); }     /* Fade in and lift up */
            30% { opacity: 1; transform: translateY(0); }    /* Stay visible */
            35% { opacity: 0; transform: translateY(-6px); }  /* Fade out and slide up */
            100% { opacity: 0; }                             /* invisible at end */
        }

        /* ---------------- MOVING LOGOS MARQUEE BANNER ---------------- */
        .logos-banner-wrapper {
            width: 100%;
            overflow: hidden;
            padding: 50px 0 50px;
            border-bottom: 0px solid #f0f0f0;
            position: relative;
            background: #ffffff;
        }

        .logos-banner-wrapper::before,
        .logos-banner-wrapper::after {
            content: "";
            position: absolute;
            top: 0;
            width: 100px;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }

        .logos-banner-wrapper::before {
            left: 0;
            background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
        }

        .logos-banner-wrapper::after {
            right: 0;
            background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
        }

        .logos-track {
            display: flex;
            width: max-content;
            animation: scrollLogos 25s linear infinite;
        }

        .logos-track:hover {
            animation-play-state: paused;
        }

        .logo-item {
            font-weight: 800;
            font-size: 20px;
            letter-spacing: -0.02em;
            color: #111;
            text-transform: uppercase;
            padding: 0 45px;
            white-space: nowrap;
            display: flex;
            align-items: center;
        }

        .logo-midday { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 24px; letter-spacing: -1px; }
        .logo-maharashtra { font-family: 'Instrument Serif', serif; font-size: 26px; font-weight: 700; text-transform: capitalize; }
        .logo-samachar { font-family: Georgia, serif; font-weight: 700; font-size: 22px; }
        .logo-zee { font-family: 'Inter', sans-serif; font-weight: 800; background: #111; color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 16px; }
        .logo-toi { font-family: 'Instrument Serif', serif; font-weight: 700; font-size: 24px; letter-spacing: 1px; }
        .logo-express { font-family: sans-serif; font-weight: 700; font-size: 20px; font-style: italic; text-transform: uppercase; }

        @keyframes scrollLogos {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* ---------------- LIGHT BLUE CONTAINER ---------------- */
        .light-blue-wrapper {
         
          
          background: linear-gradient(120deg, #122346, #1d3464);
            overflow: hidden;
        }

        /* CTA HERO INSIDE WRAPPER */
        .cta-container {
            padding: 30px 0px 30px;
            text-align: center;
        }

        .cta-container h2 {
            font-size: 45px;color:#FFFFFF;
            letter-spacing: -0.02em;
            margin-bottom: 30px;
        }

        .cta-description {
            font-size: 16px;
            color: #fff;
            max-width: 600px;
            margin: 0 auto 36px;display:none;
            line-height: 1.6;
        }

        .cta-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background-color: #0099cc;
            color: white;
            padding: 14px 28px;
            border-radius: 30px;
            text-decoration: none;
            font-size: 15px;
            font-weight: 500;
            transition: background-color 0.2s, transform 0.2s;
        }

        .btn-primary:hover {
            background-color: #0088bb;
            transform: translateY(-2px);
        }

        .btn-whatsapp {
            background-color: #25d366;
        }

        .btn-whatsapp:hover {
            background-color: #20bd5a;
        }

        .btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background-color: #ffffff;
            color: #111;
            padding: 14px 28px;
            border-radius: 30px;
            text-decoration: none;
            font-size: 15px;
            font-weight: 500;
            border: 1px solid #d0d7de;
            transition: background-color 0.2s, transform 0.2s;
        }

        .btn-secondary:hover {
            background-color: #f6f8fa;
            transform: translateY(-2px);
        }

        /* FOOTER LINKS INSIDE WRAPPER */
        .footer-content {
            padding: 50px 0 50px;  border-radius: 40px;      background: #09162c;margin:0px 100px 30px 100px ;    border: solid 1px #1e4371;
        }

        .footer-brand-tag {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 60px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .footer-brand-tag::before {
            content: "?";
            font-size: 8px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;text-align:left
        } .footer-grid1 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;padding:0px 30px;text-align:left
        }

        .footer-col h4 {
            font-size: 20px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #fff;
            margin-bottom: 20px;
        }

        .footer-col ul {
            list-style: none;
        }

        .footer-col ul li {
            margin-bottom: 0px;
        }

        .footer-col ul li a {
            color: #fff;    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            text-decoration: none;
            font-size: 15px;
            transition: color 0.2s;
        }

        .footer-col ul li a:hover {
            color: #fff;
        }
.mt-15{margin-top:15px;}
        .social-links {
 
            gap: 8px;
            flex-wrap: wrap;
            align-items: center;
        }
		.social-links li{display:inline}
		.footer-content1 {
    padding: 30px 0 20px;
    border-radius: 40px;
    background-color: #0099cc;
    color: white;
    margin: 30px auto 0px auto;
    border: solid 1px #0099cc;
    width: 1200px;

}
  .social-links a{ color: #fff;font-size:20px;margin:0px 10px}
        .contact-info {
            margin-top: 15px;
            font-size: 15px;
            color: #fff;
        }

        .contact-info p {
            margin-bottom: 8px;
        }

        .contact-info a {
            color: #fff;
            text-decoration: none;
            font-weight: 500;
        }

        /* ---------------- BOTTOM DARK BAR ---------------- */
        .bottom-bar {
    background: linear-gradient(120deg, #122346, #1d3464);
    text-align: center;
            color: #ffffff;
            padding: 20px 0;
            font-size: 15px;
        }

        .bottom-bar-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
        }

        .copyright-text {
            color: #fff;
            font-size: 15px;
        }

        .bottom-links a {
            color: #fff;
            text-decoration: none;
            transition: color 0.2s;
        }

        .bottom-links a:hover {
            color: #ffffff;
        }

        /* Floating WhatsApp Button */
        .whatsapp-float {
            position: fixed;
            width: 50px;
            height: 50px;
            bottom: 30px;
            right: 30px;
            background-color: #25d366;
            color: #fff;
            border-radius: 50px;
            text-align: center;
            font-size: 26px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: transform 0.2s;
        }

        .whatsapp-float:hover {
            transform: scale(1.1);
        }

        /* Responsive Breakpoints */
        @media (max-width: 900px) {
            .reviews-grid, .news-grid, .footer-grid {
                grid-template-columns: 1fr;
            }
            .logos-banner {
                flex-wrap: wrap;
                gap: 20px;
            }
         .reviews-section h2, .news-left h2, .cta-container h2 {
        font-size: 32px;
        width: 270px;
        text-align: center;
        margin: 0px auto 20px auto;
    }
            .press-amount {
                font-size: 52px;
            }
            .bottom-bar-inner {
                flex-direction: column;
                text-align: center;
            }
            .light-blue-wrapper {
                margin: 20px 16px 20px 16px;
                border-radius: 24px;
            }
            .testimonial-card-item {
                min-width: 300px;
                width: 300px;
            }
        }
		/* Services Section Styles */
.services-section {
    padding: 80px 0;
    background-color: #f8fafc;
}

.services-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 48px;
    gap: 30px;
    flex-wrap: wrap;
}

.sub-heading {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #0088cc;
    margin-bottom: 8px;
}

.services-header h2 {
    font-size: 42px;
    color: #0f172a;
    line-height: 1.2;
}

.header-desc {
    max-width: 460px;
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

/* Card Styling */
.service-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #0284c7;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.08);
}

.service-img-wrapper {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.service-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(15, 23, 42, 0.85);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

.service-content {
    padding: 28px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.service-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
    line-height: 1.3;
}

.service-content p {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

.service-btn {
    text-decoration: none;
    color: #0088cc;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease;
}

.service-btn:hover {
    gap: 10px;
    color: #006699;
}

/* Responsive Styling */

@media (max-width: 768px) {
.slide-hidden{display:none}

.carousel-slide{position:relative}

    .services-header h2 {
        font-size: 32px;
    }
    .services-grid {
        grid-template-columns: 1fr;
    }
}
      /* SECTION DIVIDER */
        .section-divider {
            display: flex;
            align-items: center;
 
        }

        .divider-label {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
    color: #0099cc;
            white-space: nowrap;
            padding-right: 20px;
        }

        .divider-label::before {
            content: "";
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #111111;
        }

        .divider-line {
            width: 100%;
            height: 1px;
            background-color: #0099cc;
        }

        /* PREVENTIVE CARE BENTO GRID */
        .preventive-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px;
            align-items: start;
        }

        .left-col {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .right-col {
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        /* ---------------- COMMON CARD STYLES ---------------- */
        .card-image {
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            background-color: #eaeae5;
            will-change: clip-path, transform;
        }

        .card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.6s ease;
        }

        /* Gradient Overlay to make overlay text clear on images */
        .card-image::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 40%;
            background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
            pointer-events: none;
            z-index: 1;
        }

        /* ---------------- INDIVIDUAL ROLL EFFECTS ---------------- */

        /* 1. First Card: Roll-Up from Bottom */
        .card-science {
            height: 480px;
            animation: rollUpReveal auto linear both;
            animation-timeline: view();
            animation-range: entry 5% cover 40%;
        }

        @keyframes rollUpReveal {
            from {
                clip-path: inset(100% 0% 0% 0% round 24px);
                transform: translateY(30px);
            }
            to {
                clip-path: inset(0% 0% 0% 0% round 24px);
                transform: translateY(0px);
            }
        }

        /* 2. Second Card: Roll-In from Left to Right */
        .card-doctor {
            height: 400px;
            width: 85%;
            margin-left: auto;
            animation: rollRightReveal auto linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 45%;
        }

        @keyframes rollRightReveal {
            from {
                clip-path: inset(0% 100% 0% 0% round 24px);
                transform: translateX(-30px);
            }
            to {
                clip-path: inset(0% 0% 0% 0% round 24px);
                transform: translateX(0px);
            }
        }

        /* 3. Third Card: Center Roll Expand */
        .card-care {
            height: 520px;
            animation: rollCenterExpand auto linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 50%;
        }

        @keyframes rollCenterExpand {
            from {
                clip-path: inset(20% 20% 20% 20% round 24px);
                transform: scale(0.92);
            }
            to {
                clip-path: inset(0% 0% 0% 0% round 24px);
                transform: scale(1);

            }
        }

        /* Image Inner Zoom Animation for all cards */
        .card-image img {
            animation: imageZoom auto linear both;
            animation-timeline: view();
            animation-range: entry 5% cover 45%;
        }

        @keyframes imageZoom {
            from { transform: scale(1.2); }
            to { transform: scale(1); }
        }

        /* Fallback for non-supported browsers */
        @supports not (animation-timeline: view()) {
            .card-image {
                clip-path: none !important;
                transform: none !important;
            }
            .card-image img {
                animation: none;
            }
        }

        /* ---------------- OVERLAY BADGES INSIDE IMAGES ---------------- */
        .card-badge {
            position: absolute;
            top: 40px;
            left: 40px;
            right: 40px;
            color: #ffffff;
            z-index: 2;
        }

        .card-badge .badge-title {
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            display: block;
            margin-bottom: 10px;
            color: #ffffff;
        }

        .card-badge .badge-desc {
               font-size: 15px;
            line-height: 1.35;
            font-weight: 500;
             color: #ffffff;
            display: block;
            max-width: 280px;
        }

        /* ---------------- TEXT CONTENT ---------------- */
        .preventive-text-content {
            padding: 10px 0 0 10px;
        }

        .preventive-text-content h3 {
            font-size: 38px;
            line-height: 1.15;
            letter-spacing: -0.01em;
            margin-bottom: 20px;
            color: #111111;
        }

        .preventive-text-content p {
            font-size: 15px;
            line-height: 1.6;
            color: #333;
            margin-bottom: 28px;
        }

        /* Custom Arrow Button */
        .neko-btn {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: #111111;
            font-size: 15px;
            font-weight: 500;
            transition: opacity 0.2s ease;
        }

        .neko-btn:hover { opacity: 0.7; }

        .neko-btn .btn-icon {
            width: 44px;
            height: 44px;
            background-color: #262c2e;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 16px;
        }

        /* Scroll Spacer */
        .scroll-spacer {
            height: 50vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #888;
            font-size: 16px;
            border: 1px dashed #ccc;
            border-radius: 16px;
            margin-bottom: 40px;
        }

        @media (max-width: 900px) {
            .preventive-grid {
                grid-template-columns: 1fr;
            }
            .card-doctor {
                width: 100%;
            }
        }
	     /* ---------------- STICKY SECTION CONTAINER ---------------- */
        .lyra-scroll-section {
            position: relative;
            width: 100%;
            max-width: 1320px;
            margin: 0 auto;
            padding: 60px 24px;
            display: flex;
            gap: 60px;
        }

        /* LEFT SIDE: STATIC / STICKY IMAGE FRAME */
        .left-static-col {
            width: 45%;
            position: relative;
        }

        .sticky-image-container {
            position: sticky;
            top: 60px;
            width: 100%;
            height: 80vh;
            max-height: 680px;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.12);
            background-color: #0f172a;
        }

        .sticky-image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            display: block;
        }

        /* RIGHT SIDE: SCROLLABLE CONTENT */
        .right-scroll-col {
            width: 55%;
            padding-top: 20px;
            padding-bottom: 60px;
        }

        .section-header {
            margin-bottom: 48px;
        }

        .section-subtitle {
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #0284c7;
            margin-bottom: 12px;
            display: block;
        }

        .section-header h2 {
            font-size: 48px;
            line-height: 1.15;
            color: #0f172a;
            letter-spacing: -0.02em;
        }

        /* REASON CARDS */
        .reasons-list {
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        .reason-card {
            background-color: #ffffff;
            border: 1px solid #0284c7;
            border-radius: 20px;
            padding: 36px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
            position: relative;
        }

        .reason-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.08);
            border-color: #cbd5e1;
        }

        .card-top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .number-badge {
            width: 36px;
            height: 36px;
            background-color: #f1f5f9;
            color: #0f172a;
            font-weight: 700;
            font-size: 15px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .icon-wrapper {
            width: 48px;
            height: 48px;
            background-color: #f0f9ff;
            color: #0284c7;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .icon-wrapper svg {
            width: 26px;
            height: 26px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .reason-title {
            font-size: 26px;
            font-weight: 700;
            line-height: 1.25;
            color: #0f172a;
            margin-bottom: 12px;
        }

        .reason-title span {
            color: #0284c7;
            display: block;
        }

        .reason-desc {
            font-size: 16px;
            line-height: 1.6;
            color: #475569;
        }

        /* RESPONSIVE DESIGN */
        @media (max-width: 992px) {
            .lyra-scroll-section {
                flex-direction: column;
                gap: 40px;
            }

            .left-static-col, .right-scroll-col {
                width: 100%;
            }

            .sticky-image-container {
                position: relative;
                top: 0;
                height: 450px;
            }

            .section-header h2 {
                font-size: 38px;
            }
        }

        /* Sticky Navigation Header on Right Side */
         :root{
  --bg:#f6f4ef;
  --bg-elev:#ffffff;
  --ink:#0e1215;
  --ink-2:#39424a;
  --ink-3:#6b7580;
  --line:rgba(14,18,21,.10);
  --line-strong:rgba(14,18,21,.18);
  --accent:#7a1220;         /* deep clinical crimson */
  --accent-2:#c62828;
  --gold:#d39f42;
  --dark:#0a0f14;
  --dark-2:#141a20;
  --on-dark:#f6f4ef;
  --radius:14px;
  --radius-lg:24px;
  --shadow-1:0 1px 2px rgba(14,18,21,.06), 0 8px 24px rgba(14,18,21,.06);
  --shadow-2:0 20px 60px rgba(14,18,21,.18);
  --ff-serif:"Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --ff-sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   --pad-y:clamp(72px,10vw,140px);
}
		img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

 
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--on-dark);
  padding:12px 18px; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* Typography */
.section-title{    font-family: 'Instrument Serif', ui-serif, Georgia, serif;
 font-size:18px;
  font-weight:500;
  font-size:clamp(32px,4.8vw,64px);
  line-height:1.05;
  letter-spacing:-0.01em;
  margin:0 0 24px;
  color:#fff;
 }
 .mono1{       font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #FFCC33 !important;
    font-weight: 600;margin-bottom:10px }
 .mono-p{margin-top:22px;color:#FFCC33 !important; font-size:16px;margin-bottom:20px}
 .monotitle{font-family: 'Instrument Serif', ui-serif, Georgia, serif;      font-weight: 400; font-size:40px;margin:20px 0px;    font-size: clamp(40px, 6.4vw, 76px);
    max-width: 20ch;}
.eyebrow{
  font-size:14px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#fff ;
  margin:0 0 18px;
}
.lede{ font-size:16px; color:var(--ink-2); max-width:60ch; text-align:center; margin:20px auto}
.lede1{    
     
    text-align: center;
    margin: 20px 0px;
    color: #FFFFFF;    max-width: 62ch;
     font-size: 18px;text-align:left;
   
     line-height: 34px;}

		/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,244,239,.78);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; gap:32px;
  padding-block:14px;
}
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:600; }
.brand-mark{ color:var(--accent); font-size:22px; }
.brand-name{ font-family:var(--ff-serif); font-size:22px; letter-spacing:-.01em; }
.primary-nav{ margin-left:auto; }
.primary-nav ul{ display:flex; gap:28px; margin:0; padding:0; list-style:none; }
.primary-nav a{ font-size:14.5px; color:var(--ink-2); }
.primary-nav a:hover{ color:var(--ink); }
.header-actions{ display:flex; align-items:center; gap:10px; }
.menu-toggle{
  display:none; width:44px; height:44px;
  background:transparent; border:1px solid var(--line-strong); border-radius:10px;
  flex-direction:column; justify-content:center; align-items:center; gap:4px;
}
.menu-toggle span{ width:18px; height:1.5px; background:var(--ink); display:block; }
.mobile-nav{ background:var(--bg-elev); border-top:1px solid var(--line); }
.mobile-nav ul{ list-style:none; margin:0; padding:16px 20px; display:flex; flex-direction:column; gap:6px; }
.mobile-nav a{ display:block; padding:12px 4px; border-bottom:1px solid var(--line); font-size:16px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; min-height:44px; border-radius:999px;
  font-weight:500; font-size:15px; letter-spacing:.01em;
  border:1px solid transparent; transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{ background:#0099cc; color:#fff;  }
.btn-primary:hover{ background:var(--accent); }
.btn-outline{ background:transparent; color:var(--on-dark); border-color:rgba(255,255,255,.55); }
.btn-outline:hover{ background:rgba(255,255,255,.1); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ background:var(--ink); color:var(--on-dark); }
.btn-lg{ padding:16px 26px; min-height:52px; font-size:16px; }
.btn-block{ width:100%; }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100dvh; overflow:hidden;
  color:var(--on-dark); background:#050708;
  display:flex; align-items:center;
}
.hero-media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(0,0,0,.15), rgba(0,0,0,.55) 60%, rgba(0,0,0,.85)),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65));
}
.hero-content{ position:relative; z-index:2; }
 
.hero-title{
  font-family:var(--ff-serif);
  font-weight:400;
  font-size:clamp(44px,7.5vw,104px);
  line-height:1;
  letter-spacing:-0.02em;
  margin:0 0 24px;
 }
.hero-sub{
  font-size:clamp(16px,1.6vw,20px);
  color:rgba(255,255,255,.82);
  max-width:52ch; margin:0 0 36px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.scroll-hint{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:2; width:22px; height:36px; border:1px solid rgba(255,255,255,.5); border-radius:20px;
  display:flex; justify-content:center; padding-top:6px;
}
.scroll-hint span{ width:2px; height:6px; background:rgba(255,255,255,.8); border-radius:2px; animation:scroll 1.8s ease-in-out infinite; }
@keyframes scroll{ 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(14px);opacity:0} }

/* ---------- Reveal ---------- */
/* ---------- Awards / Marquee ---------- */
.awards{ padding:80px 0px;     background: linear-gradient(180deg, #edf7fa 0%, #edf7fa  100%);color:var(--on-dark); }
.awards .section-title{    color: #0284c7;}
.awards .eyebrow{ color:#000; }
   /* Carousel Outer Wrapper */
    .awards-carousel-wrapper {
      position: relative;
      padding: 0px 50px; /* Arrows aur Pagination Dots ke liye Spacing */
    }

    .awards-swiper {
      width: 100%;
    }
.awards-pagination {
    position: relative !important;
    bottom: 0 !important;
    text-align: center;
    margin-top: 20px;
    z-index: 5;
}
    /* ---------- Award Cards Styling ---------- */
    .award-card {
      width: 100%;
      height: 100%;
      min-height: 180px;
      background-color: #ffffff;
      border: 1px solid #0284c7;
      border-radius: 20px;
      padding: 24px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      position: relative;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .award-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
      border-color: #0284c7;
    }

    .award-year { 
      font-family: var(--ff-serif); 
      font-size: 28px;    
      color: #0284c7;
      font-weight: 600;
    }

    .award-card h3 { 
      margin: 8px 0 4px; 
      font-size: 16px;  
      color: #000000;
      line-height: 1.3;
    }

    .award-card p { 
      margin: 0; 
      font-size: 13px; 
      color: #666666;
      line-height: 1.4;
    }

    /* ---------- Navigation Arrows Styling ---------- */
    .awards-carousel-wrapper .swiper-button-next,
    .awards-carousel-wrapper .swiper-button-prev {
      color: #0284c7;
      width: 40px;
      height: 40px;
      background: #ffffff;
      border-radius: 50%;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
      top: 45%;
    }

    .awards-carousel-wrapper .swiper-button-next::after,
    .awards-carousel-wrapper .swiper-button-prev::after {
      font-size: 16px;
      font-weight: bold;
    }

    /* ---------- Navigation Dots (Pagination) Styling ---------- */
    
    .awards-carousel-wrapper .swiper-pagination-bullet {
      background: #94a3b8;
      opacity: 0.5;
    }
.swiper-pagination{display:none
}    .awards-carousel-wrapper .swiper-pagination-bullet-active {
      background: #0284c7;
      opacity: 1;
      width: 24px;
      border-radius: 10px;
      transition: all 0.3s ease;
    }
/* ---------- Profile Tabs ---------- */
        /* ---------------- STICKY SECTION CONTAINER ---------------- */
        .lyra-scroll-section {
            position: relative;
            width: 100%;
            max-width: 1320px;
            margin: 0 auto;
            padding: 60px 24px;
            display: flex;
            gap: 60px;
        }

        /* LEFT SIDE: STATIC / STICKY IMAGE FRAME */
        .left-static-col {
            width: 45%;
            position: relative;
        }

        .sticky-image-container {
            position: sticky;
            top: 60px;
            width: 100%;
            height: 80vh;
            max-height: 680px;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.12);
            background-color: #0f172a;
        }

        .sticky-image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            display: block;
        }

        /* RIGHT SIDE: SCROLLABLE CONTENT */
        .right-scroll-col {
            width: 55%;
            padding-top: 20px;
            padding-bottom: 60px;
        }

        .section-header {
            margin-bottom: 48px;
        }

        .section-subtitle {
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #0284c7;
            margin-bottom: 12px;
            display: block;
        }

        .section-header h2 {
            font-size: 48px;
            line-height: 1.15;
            color: #0f172a;
            letter-spacing: -0.02em;
        }

        /* REASON CARDS */
        .reasons-list {
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        .reason-card {
            background-color: #ffffff;
            border: 1px solid #0284c7;
            border-radius: 20px;
            padding: 36px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
            position: relative;
        }

        .reason-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.08);
            border-color: #cbd5e1;
        }

        .card-top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .number-badge {
            width: 36px;
            height: 36px;
            background-color: #f1f5f9;
            color: #0f172a;
            font-weight: 700;
            font-size: 15px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .icon-wrapper {
            width: 48px;
            height: 48px;
            background-color: #f0f9ff;
            color: #0284c7;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .icon-wrapper svg {
            width: 26px;
            height: 26px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .reason-title {
            font-size: 26px;
             line-height: 1.25;
            color: #0f172a;
            margin-bottom: 12px;
        }

        .reason-title span {
            color: #0284c7;
            display: block;     font-family: 'Instrument Serif', ui-serif, Georgia, serif;
    letter-spacing: 1px;    font-size: 30px;
        }

        .reason-desc {
            font-size: 16px;
            line-height: 1.6;
            color: #475569;
        }

        /* RESPONSIVE DESIGN */
        @media (max-width: 992px) {
            .lyra-scroll-section {
                flex-direction: column;
                gap: 40px;padding:15px
            }

            .left-static-col, .right-scroll-col {
                width: 100%;
            }

            .sticky-image-container {
                position: relative;
                top: 0;
                height: 450px;
            }

            .section-header h2 {
                font-size: 38px;
            }
        }
.footer-col p{margin-bottom:15px}
        /* Responsive Layout */
		
		.location-links  a {padding-right:20px}
		.location-links  i {color:#0284c7}
		.appointment-line{ padding:30px 0px 0px 0px; font-size:20px}



	 
/* ---------------- STICKY SCROLL SECTION ---------------- */
.neko-scroll-container {
    position: relative;
    width: 100%;
    display: flex;
}

/* LEFT SIDE: Edge-Touching Sticky Image Container */
.sticky-visual-wrapper {
    position: sticky;
    top: 0;
    width: 50vw;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0px 0;
}

.visual-card {
    position: relative;
    width: 100%;
    height: 72vh;
    border-top-right-radius: 32px;
    border-bottom-right-radius: 32px;
    overflow: hidden;
 }

/* NEKO IMAGE SLIDE-UP EFFECT */
.visual-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.6s ease;
    z-index: 1;
}

.visual-slide.active {
    opacity: 1;
    transform: translateY(0%);
    z-index: 2;
}

.visual-slide.previous {
    opacity: 0.6;
    transform: translateY(-8%) scale(0.96);
    z-index: 1;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.8s ease;
}

 

/* RIGHT SIDE: Content Track */
.scroll-content-track {
    position: relative;
    width: 50vw;
}

/* STICKY TOP TAB BAR */
.sticky-nav-header {
    position: sticky;
    top: 0;
    background:#fcfcfc;
    z-index: 100;
    padding: 20px 0 0px 60px;
    width: 100%;
}

.nav-tabs {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid #e5e5e0;
    padding-bottom: 14px;
    max-width: 600px;
}

.tab-btn {
     background: #CCCCCC;
    border: none;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;padding:10px 15px;
    letter-spacing: 0.08em;
    color: #333;
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;border-radius:5px
}

.tab-btn.active {
    color: #fff;  background: #000;
}

.tab-btn.active::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #111111;
}

/* FIXED STICKY TEXT DISPLAY CONTAINER */
.sticky-text-wrapper {
    position: sticky;
    top: 120px;
    height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    padding-left: 60px;
    padding-right: 80px;
    pointer-events: none;
}

.text-card-container {
    position: relative;
    width: 100%;
    max-width: 520px;
}

/* FADE-IN & BLUR EFFECT FOR TEXT */
.text-content-item {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    opacity: 0;
    filter: blur(8px);
    visibility: hidden;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.6s ease;
    pointer-events: auto;
}

.text-content-item.active {
    opacity: 1;
    filter: blur(0px);
    visibility: visible;
}

/* TEXT STYLING */
.text-content-item h2 {
    font-size: 48px;    
    font-family: 'Instrument Serif', ui-serif, Georgia, serif;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    color: #111111;
}

.text-content-item p {
    font-size: 15px;
    line-height: 1.6;
    color: #555550;
    margin-bottom: 36px;
    max-width: 440px;
}

.neko-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: #111111;
    font-size: 15px;
    font-weight: 500;
}

.btn-arrow-icon {
    width: 48px;
    height: 48px;
    background-color: #111111;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    transition: transform 0.2s ease;
}

.neko-action-btn:hover .btn-arrow-icon {
    transform: translateX(4px);
}

/* INVISIBLE SCROLL TRIGGER STEPS */
.scroll-step-trigger {
    height: 100vh;
    width: 100%;
}

/* ---------------- MOBILE RESPONSIVE FIX (900px ke niche) ---------------- */
@media (max-width: 900px) {
    .neko-scroll-container {
        flex-direction: column;
        display: grid;
        grid-template-areas: 
            "tabs"
            "visual"
            "text";
    }

    .scroll-content-track {
        display: contents;
    }

    .sticky-nav-header {
        grid-area: tabs;
        position: inherit;
        top: 0;
        padding: 16px 12px;
     }

    /* 400px ya usse choti screen par 2 columns (2x2 grid) mein convert karne ke liye */
    .nav-tabs {
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        border-bottom: none;
        padding-bottom: 8px;
    }

    .tab-btn {
        flex: 1 1 calc(50% - 10px); /* Har tab width ka aadha hissa lega taaki 2 column banein */
        text-align: center;
        padding: 8px 10px;
  background: #CCCCCC;        border-radius: 6px;
        font-size: 11px; color:#333
    }

    .tab-btn.active::after {
        display: none; /* Active underline hata kar background color highlight kar sakte hain ya rehne de sakte hain */
    }
    
    .tab-btn.active {
        background: #000;
        color: #ffffff;
    }

    /* Image section */
    .sticky-visual-wrapper {
        grid-area: visual;
        position: relative;
        width: 100%;
        height: 38vh;
        padding: 12px;
    }

    .visual-card {
        height: 100%;
        border-radius: 16px;
    }

    /* Text section */
    .sticky-text-wrapper {
        grid-area: text;
        position: relative;
        top: 0;
        height: auto;
        padding: 20px 16px;
    }

    .text-card-container {
        max-width: 100%;
    }

    .text-content-item {
        position: relative;
        top: 0;
        transform: none;
        margin-bottom: 0;
        display: none;
    }

    .text-content-item.active {
        display: block;
    }

    .text-content-item h2 {
        font-size: 32px;
    }

    .scroll-step-trigger {
        height: 0;
        display: none;
    }
}