/* =========================================================
   LALL PHYSIOTHERAPY SERVICES
   MASTER STYLE SHEET
   Main Website: https://lps.aklsup.co.in
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

  --primary: #087f6b;
  --primary-dark: #056556;
  --primary-light: #e4f5f1;

  --text: #17332f;
  --muted: #657773;

  --background: #f7faf9;
  --surface: #ffffff;
  --surface-soft: #eef7f5;

  --border: #dbe8e5;

  --danger: #c62828;
  --success: #15803d;
  --warning: #b77900;

  --radius: 16px;

  --shadow:
    0 8px 30px rgba(20, 60, 52, 0.08);

  --container: 1180px;

}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {

  margin: 0;

  background: var(--background);

  color: var(--text);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 16px;

  line-height: 1.6;

}

img {

  max-width: 100%;

  height: auto;

}

a {

  color: inherit;

  text-decoration: none;

}

button,
input,
textarea,
select {

  font: inherit;

}


/* =========================================================
   CONTAINER
========================================================= */

.container {

  width: min(
    calc(100% - 40px),
    var(--container)
  );

  margin-left: auto;

  margin-right: auto;

}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

  margin-top: 0;

  color: var(--text);

  line-height: 1.2;

}

h1 {

  font-size:
    clamp(36px, 6vw, 64px);

  letter-spacing: -1.5px;

}

h2 {

  font-size:
    clamp(28px, 4vw, 44px);

  letter-spacing: -0.7px;

}

h3 {

  font-size: 22px;

}

p {

  margin-top: 0;

}

.eyebrow {

  display: inline-block;

  margin-bottom: 10px;

  color: var(--primary);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 1.4px;

  text-transform: uppercase;

}


/* =========================================================
   HEADER / NAVIGATION
========================================================= */

.topbar {

  position: sticky;

  top: 0;

  z-index: 1000;

  background: rgba(255, 255, 255, 0.96);

  border-bottom: 1px solid var(--border);

  backdrop-filter: blur(12px);

}

.nav {

  min-height: 78px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

}

.brand {

  display: flex;

  align-items: center;

  flex-shrink: 0;

}

.brand-logo {

  width: 170px;

  max-height: 60px;

  object-fit: contain;

}

nav {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 5px;

}

nav a {

  padding: 9px 11px;

  border-radius: 9px;

  color: var(--text);

  font-size: 14px;

  font-weight: 650;

  transition:
    background 0.2s ease,
    color 0.2s ease;

}

nav a:hover {

  background: var(--primary-light);

  color: var(--primary);

}

nav a.active {

  background: var(--primary);

  color: #ffffff;

}


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

.menu-btn {

  display: none;

  width: 44px;

  height: 44px;

  padding: 0;

  border: 1px solid var(--border);

  border-radius: 10px;

  background: #ffffff;

  color: var(--text);

  cursor: pointer;

}

.menu-icon {

  font-size: 23px;

  line-height: 1;

}


/* =========================================================
   HERO
========================================================= */

.hero {

  padding:
    90px 0
    80px;

  background:
    linear-gradient(
      135deg,
      #edf9f6,
      #ffffff
    );

}

.hero-grid {

  display: grid;

  grid-template-columns:
    1.2fr
    0.8fr;

  gap: 50px;

  align-items: center;

}

.hero h1 {

  max-width: 760px;

  margin-bottom: 20px;

}

.hero p {

  max-width: 680px;

  color: var(--muted);

  font-size: 18px;

}

.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 28px;

}


/* =========================================================
   PAGE HERO
========================================================= */

.page-hero {

  padding:
    70px 0
    60px;

  background:
    linear-gradient(
      135deg,
      #edf9f6,
      #ffffff
    );

  border-bottom: 1px solid var(--border);

}

.page-hero h1 {

  max-width: 800px;

  margin-bottom: 12px;

}

.page-hero p {

  max-width: 700px;

  margin-bottom: 0;

  color: var(--muted);

  font-size: 17px;

}


/* =========================================================
   SECTIONS
========================================================= */

.section {

  padding:
    75px 0;

}

.section-head {

  max-width: 780px;

  margin:
    0 auto 40px;

  text-align: center;

}

.section-head h2 {

  margin-bottom: 12px;

}

.section-head p {

  color: var(--muted);

}


/* =========================================================
   BUTTONS
========================================================= */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 46px;

  padding:
    10px 18px;

  border:
    1px solid transparent;

  border-radius: 10px;

  font-size: 14px;

  font-weight: 750;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;

}

.btn:hover {

  transform: translateY(-1px);

}

.btn.primary {

  background: var(--primary);

  color: #ffffff;

}

.btn.primary:hover {

  background: var(--primary-dark);

}

.btn.secondary {

  background: #ffffff;

  border-color: var(--border);

  color: var(--text);

}

.btn.secondary:hover {

  border-color: var(--primary);

  color: var(--primary);

}


/* =========================================================
   CARDS
========================================================= */

.cards {

  display: grid;

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

  gap: 20px;

}

.card {

  padding: 25px;

  background: var(--surface);

  border:
    1px solid var(--border);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

}

.card h3 {

  margin-bottom: 10px;

}

.card p {

  margin-bottom: 0;

  color: var(--muted);

  line-height: 1.7;

}

.card-icon {

  width: 45px;

  height: 45px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 18px;

  border-radius: 12px;

  background: var(--primary-light);

  color: var(--primary);

  font-weight: 900;

}


/* =========================================================
   ABOUT PAGE
========================================================= */

.about-intro {

  display: grid;

  grid-template-columns:
    1.5fr
    0.8fr;

  gap: 45px;

  align-items: center;

}

.about-content h2 {

  margin-bottom: 18px;

}

.about-content p {

  color: var(--muted);

  line-height: 1.8;

}

.about-highlight {

  padding: 35px;

  text-align: center;

  background: #ffffff;

  border:
    1px solid var(--border);

  border-radius: 22px;

  box-shadow: var(--shadow);

}

.about-highlight img {

  width: min(190px, 70%);

  margin:
    0 auto 25px;

  display: block;

}

.about-highlight h3 {

  margin: 7px 0;

  color: var(--primary);

}


/* =========================================================
   FOUNDER
========================================================= */

.founder-card {

  max-width: 900px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  gap: 25px;

  padding: 30px;

  background: #ffffff;

  border:
    1px solid var(--border);

  border-radius: 20px;

  box-shadow: var(--shadow);

}

.founder-avatar {

  width: 90px;

  height: 90px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--primary);

  color: #ffffff;

  font-size: 22px;

  font-weight: 900;

}

.founder-card h3 {

  margin-bottom: 10px;

}

.founder-card p {

  color: var(--muted);

}


/* =========================================================
   SERVICE PILLS
========================================================= */

.service-pills {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 12px;

  margin-bottom: 30px;

}

.service-pills span {

  padding:
    11px 16px;

  background: #ffffff;

  border:
    1px solid var(--border);

  border-radius: 999px;

  font-size: 14px;

  font-weight: 600;

  box-shadow:
    0 4px 14px
    rgba(0,0,0,0.04);

}


/* =========================================================
   FORMS
========================================================= */

.form-card {

  max-width: 850px;

  margin: 0 auto;

  padding: 30px;

  background: #ffffff;

  border:
    1px solid var(--border);

  border-radius: 18px;

  box-shadow: var(--shadow);

}

.form-grid {

  display: grid;

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

  gap: 18px;

}

.form-group {

  display: flex;

  flex-direction: column;

  gap: 7px;

}

.form-group.full {

  grid-column:
    1 / -1;

}

.form-group label {

  color: var(--text);

  font-size: 14px;

  font-weight: 700;

}

.form-group input,
.form-group textarea,
.form-group select {

  width: 100%;

  padding:
    12px 13px;

  background: #ffffff;

  border:
    1px solid var(--border);

  border-radius: 9px;

  color: var(--text);

  outline: none;

}

.form-group textarea {

  min-height: 130px;

  resize: vertical;

}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {

  border-color: var(--primary);

  box-shadow:
    0 0 0 3px
    rgba(8,127,107,0.10);

}

.form-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 22px;

}


/* =========================================================
   CONTACT
========================================================= */

.contact-grid {

  display: grid;

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

  gap: 25px;

}

.contact-card {

  padding: 25px;

  background: #ffffff;

  border:
    1px solid var(--border);

  border-radius: 18px;

  box-shadow: var(--shadow);

}

.contact-item {

  display: flex;

  align-items: flex-start;

  gap: 14px;

  padding: 15px 0;

  border-bottom:
    1px solid var(--border);

}

.contact-item:last-child {

  border-bottom: 0;

}

.contact-icon {

  width: 42px;

  height: 42px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  border-radius: 10px;

  background: var(--primary-light);

  color: var(--primary);

  font-size: 20px;

}

.contact-item strong {

  display: block;

  margin-bottom: 3px;

}

.contact-item a {

  color: var(--primary);

  word-break: break-word;

}


/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonial-grid {

  display: grid;

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

  gap: 20px;

}

.testimonial-card {

  padding: 28px;

  background: #ffffff;

  border:
    1px solid var(--border);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

}

.testimonial-stars {

  margin-bottom: 15px;

  color: #e6a400;

  font-size: 18px;

  letter-spacing: 2px;

}

.testimonial-card blockquote {

  margin:
    0 0 22px;

  color: var(--text);

  line-height: 1.7;

}

.testimonial-author {

  display: flex;

  flex-direction: column;

  gap: 2px;

  padding-top: 15px;

  border-top:
    1px solid var(--border);

}

.testimonial-author span {

  color: var(--muted);

  font-size: 13px;

}


/* =========================================================
   FEEDBACK REQUEST
========================================================= */

.feedback-request {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  padding: 32px;

  background: #ffffff;

  border:
    1px solid var(--border);

  border-radius: 22px;

  box-shadow: var(--shadow);

}

.feedback-request h2 {

  margin-bottom: 8px;

}

.feedback-request p {

  margin: 0;

  color: var(--muted);

}


/* =========================================================
   BLOG
========================================================= */

.blog-grid {

  display: grid;

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

  gap: 22px;

}

.blog-card {

  overflow: hidden;

  background: #ffffff;

  border:
    1px solid var(--border);

  border-radius: 18px;

  box-shadow: var(--shadow);

}

.blog-image {

  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: var(--surface-soft);

}

.blog-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.blog-content {

  padding: 20px;

}

.blog-category {

  color: var(--primary);

  font-size: 12px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .5px;

}

.blog-content h3 {

  margin:
    7px 0 10px;

}

.blog-content p {

  color: var(--muted);

  font-size: 14px;

}

.blog-content a {

  color: var(--primary);

  font-size: 14px;

  font-weight: 800;

}


/* =========================================================
   ARTICLE META
========================================================= */

.article-meta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin:
    20px 0 30px;

  padding:
    16px 18px;

  background: #ffffff;

  border:
    1px solid var(--border);

  border-radius: 14px;

  box-shadow: var(--shadow);

}

.author-info {

  display: flex;

  align-items: center;

  gap: 12px;

}

.author-avatar {

  width: 44px;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--primary);

  color: #ffffff;

  font-size: 14px;

  font-weight: 800;

}

.author-info strong {

  display: block;

  font-size: 14px;

}

.author-info span {

  display: block;

  color: var(--muted);

  font-size: 12px;

}

.article-dates {

  display: flex;

  flex-direction: column;

  gap: 4px;

  color: var(--muted);

  font-size: 12px;

  text-align: right;

}


/* =========================================================
   RELATED ARTICLES
========================================================= */

.related-section {

  padding: 70px 0;

}

.related-grid {

  display: grid;

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

  gap: 22px;

}

.related-card {

  overflow: hidden;

  background: #ffffff;

  border:
    1px solid var(--border);

  border-radius: 18px;

  box-shadow: var(--shadow);

  transition:
    transform .2s ease;

}

.related-card:hover {

  transform:
    translateY(-4px);

}

.related-image {

  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: var(--surface-soft);

}

.related-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.related-content {

  padding: 20px;

}

.related-category {

  color: var(--primary);

  font-size: 12px;

  font-weight: 800;

  text-transform: uppercase;

}

.related-content h3 {

  margin:
    7px 0 8px;

}

.related-content p {

  color: var(--muted);

  font-size: 14px;

}

.related-content a {

  color: var(--primary);

  font-size: 14px;

  font-weight: 800;

}


/* =========================================================
   NOTICE / DISCLAIMER
========================================================= */

.notice {

  padding: 20px 22px;

  background: var(--surface-soft);

  border:
    1px solid var(--border);

  border-left:
    4px solid var(--primary);

  border-radius: 12px;

}

.notice strong {

  display: block;

  margin-bottom: 5px;

}

.notice p {

  margin: 0;

  color: var(--muted);

  font-size: 14px;

}


/* =========================================================
   CTA
========================================================= */

.cta-section {

  padding:
    20px 0
    75px;

}

.cta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  padding:
    35px;

  background:
    linear-gradient(
      135deg,
      #e8f7f3,
      #ffffff
    );

  border:
    1px solid var(--border);

  border-radius: 22px;

}

.cta h2 {

  margin-bottom: 10px;

}

.cta p {

  margin-bottom: 0;

  color: var(--muted);

}


/* =========================================================
   404 PAGE
========================================================= */

.error-page {

  min-height: 70vh;

  display: flex;

  align-items: center;

  padding:
    70px 0;

}

.error-card {

  width: min(
    760px,
    100%
  );

  margin: 0 auto;

  padding:
    55px 35px;

  text-align: center;

  background: #ffffff;

  border:
    1px solid var(--border);

  border-radius: 25px;

  box-shadow: var(--shadow);

}

.error-code {

  margin-bottom: 5px;

  color: var(--primary);

  font-size:
    clamp(70px, 14vw, 130px);

  font-weight: 900;

  line-height: 1;

  letter-spacing: -5px;

}

.error-card h1 {

  margin:
    8px 0 12px;

}

.error-card p {

  max-width: 600px;

  margin:
    0 auto;

  color: var(--muted);

  font-size: 17px;

}

.error-card .hero-actions {

  justify-content: center;

  margin-top: 28px;

}

.error-links {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 30px;

  padding-top: 25px;

  border-top:
    1px solid var(--border);

}

.error-links a {

  padding:
    8px 12px;

  border-radius: 9px;

  background: var(--surface-soft);

  color: var(--primary);

  font-size: 14px;

  font-weight: 700;

}


/* =========================================================
   FOOTER
========================================================= */

footer {

  margin-top: 30px;

  padding:
    55px 0
    20px;

  background: #123b35;

  color: #ffffff;

}

.footer-grid {

  display: grid;

  grid-template-columns:
    1.5fr
    1fr;

  gap: 50px;

}

.footer-logo {

  width: 170px;

  max-height: 65px;

  object-fit: contain;

  margin-bottom: 15px;

}

footer p {

  color: rgba(255,255,255,.78);

}

footer h3 {

  color: #ffffff;

  font-size: 17px;

}

footer a {

  display: block;

  width: fit-content;

  margin:
    7px 0;

  color: rgba(255,255,255,.82);

  font-size: 14px;

}

footer a:hover {

  color: #ffffff;

}

.copyright {

  margin-top: 35px;

  padding-top: 20px;

  border-top:
    1px solid
    rgba(255,255,255,.15);

  color:
    rgba(255,255,255,.65);

  font-size: 13px;

}


/* =========================================================
   UTILITY
========================================================= */

.text-center {

  text-align: center;

}

.hidden {

  display: none !important;

}

.mt-20 {

  margin-top: 20px;

}

.mb-20 {

  margin-bottom: 20px;

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1050px) {

  .nav {

    min-height: 70px;

  }

  .brand-logo {

    width: 145px;

  }

  nav {

    gap: 2px;

  }

  nav a {

    padding:
      8px 8px;

    font-size: 13px;

  }

  .cards {

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

  }

  .hero-grid {

    grid-template-columns: 1fr;

  }

  .about-intro {

    grid-template-columns:
      1fr;

  }

}


/* =========================================================
   RESPONSIVE — MOBILE NAV
========================================================= */

@media (max-width: 850px) {

  .menu-btn {

    display: flex;

    align-items: center;

    justify-content: center;

  }

  nav {

    position: absolute;

    top: 100%;

    left: 20px;

    right: 20px;

    display: none;

    flex-direction: column;

    align-items: stretch;

    padding: 10px;

    background: #ffffff;

    border:
      1px solid var(--border);

    border-radius: 14px;

    box-shadow:
      0 15px 40px
      rgba(0,0,0,.12);

  }

  nav.open {

    display: flex;

  }

  nav a {

    width: 100%;

    padding:
      12px;

  }

}


/* =========================================================
   RESPONSIVE — SMALL TABLET
========================================================= */

@media (max-width: 900px) {

  .testimonial-grid {

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

  }

  .related-grid {

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

  }

  .contact-grid {

    grid-template-columns:
      1fr;

  }

  .footer-grid {

    grid-template-columns:
      1fr;

  }

  .cta {

    align-items: flex-start;

    flex-direction: column;

  }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {

  .container {

    width:
      min(
        calc(100% - 28px),
        var(--container)
      );

  }

  .section {

    padding:
      55px 0;

  }

  .page-hero {

    padding:
      50px 0;

  }

  .hero {

    padding:
      60px 0;

  }

  .hero-actions {

    width: 100%;

  }

  .hero-actions .btn {

    width: 100%;

  }

  .cards {

    grid-template-columns:
      1fr;

  }

  .testimonial-grid {

    grid-template-columns:
      1fr;

  }

  .related-grid {

    grid-template-columns:
      1fr;

  }

  .form-grid {

    grid-template-columns:
      1fr;

  }

  .form-group.full {

    grid-column:
      auto;

  }

  .feedback-request {

    align-items: flex-start;

    flex-direction: column;

    padding: 24px;

  }

  .article-meta {

    align-items: flex-start;

    flex-direction: column;

  }

  .article-dates {

    width: 100%;

    padding-top: 12px;

    border-top:
      1px solid var(--border);

    text-align: left;

  }

  .founder-card {

    align-items: center;

    flex-direction: column;

    text-align: center;

  }

  .service-pills {

    justify-content: flex-start;

  }

  .service-pills span {

    font-size: 13px;

  }

  .error-card {

    padding:
      40px 20px;

  }

  .error-card .hero-actions {

    flex-direction: column;

  }

  .error-card .hero-actions .btn {

    width: 100%;

  }

  .error-links {

    flex-direction: column;

  }

  .error-links a {

    width: 100%;

  }

}


/* =========================================================
   VERY SMALL SCREENS
========================================================= */

@media (max-width: 400px) {

  h1 {

    font-size: 34px;

  }

  h2 {

    font-size: 28px;

  }

  .brand-logo {

    width: 130px;

  }

  .card {

    padding: 20px;

  }

  .form-card {

    padding: 20px;

  }

  .cta {

    padding: 25px 20px;

  }

}