/* Fonts index.html ke me se load hote hain (@import render block karta tha). */
:root{
--primary:#8f0b4f;
--primary-2:#bd246a;
--secondary:#007f89;
--secondary-2:#10a8b1;
--accent:#f2a51f;
--ink:#192738;
--muted:#667487;
--soft:#f5f8fb;
--line:#dfe8ee;
--white:#fff;
--shadow:0 18px 55px rgba(25,39,56,.12);
--radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
margin:0;
color:var(--ink);
background:#fff;
font-family:'Inter','Noto Sans Devanagari',sans-serif;
line-height:1.65;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.container{width:min(1180px,calc(100% - 36px));margin:auto}
.top-strip{background:#6f073e;color:#fff;font-size:.88rem}
.top-strip__inner{display:flex;justify-content:flex-end;gap:28px;padding:8px 0}
.top-strip a{color:#fff}
.header{
position:sticky;top:0;z-index:1000;
background:rgba(255,255,255,.94);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(223,232,238,.7);
transition:.25s ease;
}
.header.scrolled{box-shadow:0 10px 35px rgba(21,38,56,.09)}
.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:11px;min-width:max-content}
.brand__logo{display:block;height:42px;width:auto}
.brand__text{display:flex;flex-direction:column;line-height:1.2}
.brand__text strong{font-family:'Noto Sans Devanagari',sans-serif;font-size:1.03rem;color:var(--primary)}
.brand__text small{font-size:.7rem;color:var(--muted);margin-top:4px}
.nav-links{display:flex;align-items:center;gap:18px;font-weight:600;font-size:.9rem}
/* Links kabhi do line me na tooten - "Rate List" / "About Us" warna wrap ho jate hain. */
.nav-links>a{white-space:nowrap}
.nav-links>a:not(.btn){position:relative}
.nav-links>a:not(.btn):after{
content:"";position:absolute;left:0;bottom:-7px;width:0;height:2px;
background:var(--primary);transition:.25s ease;
}
.nav-links>a:hover:after{width:100%}
.nav-toggle{display:none;border:0;background:transparent;padding:6px}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--ink);margin:5px}
.btn{
display:inline-flex;align-items:center;justify-content:center;
min-height:50px;padding:0 24px;border-radius:14px;border:1px solid transparent;
font-weight:700;transition:.25s ease;gap:8px;
}
.btn:hover{transform:translateY(-2px)}
.btn--small{min-height:42px;padding:0 18px;border-radius:12px}
.btn--primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 12px 30px rgba(143,11,79,.22)}
.btn--secondary{background:linear-gradient(135deg,var(--secondary),var(--secondary-2));color:#fff}
.btn--light{background:#fff;color:var(--primary);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.btn--outline{border-color:var(--primary);color:var(--primary);background:#fff}
.btn--outline:hover{background:var(--primary);color:#fff}
.btn--full{width:100%}
.hero{
position:relative;min-height:760px;color:#fff;
background:#1b1b1b url('assets/Hero5.jpg') center 45%/cover no-repeat;
padding:102px 0 55px;isolation:isolate;
}
.hero__slider{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.hero__slide{
position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;object-position:center 45%;
opacity:0;transform:scale(1.06);
transition:opacity 1.2s ease,transform 7s linear;
}
.hero__slide.is-active{opacity:1;transform:scale(1)}
.hero__overlay{
position:absolute;inset:0;z-index:-1;
background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.34) 38%,rgba(0,0,0,.06) 68%,transparent 100%);
}
.hero__grid{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:70px}
.hero__content{max-width:700px}
.eyebrow{
display:inline-flex;align-items:center;gap:8px;
text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:800;
color:#ffe0ef;
}
.eyebrow:before{content:"";width:28px;height:2px;background:currentColor}
.eyebrow--dark{color:var(--primary)}
.hero h1{font-size:clamp(2.8rem,5vw,5.1rem);line-height:1.08;margin:20px 0 22px;letter-spacing:-.04em}
.hero h1 span{color:#ffd061}
.hero__content>p{max-width:650px;font-size:1.13rem;color:#f5eaf0;margin:0 0 30px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap}
.hero__badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;font-size:.88rem}
.hero__badges span{padding:9px 13px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.09);backdrop-filter:blur(8px)}
.hero__offer-card{
justify-self:end;width:min(100%,350px);padding:32px;border-radius:28px;
color:var(--ink);background:rgba(255,255,255,.94);box-shadow:var(--shadow);
border:1px solid rgba(255,255,255,.85);backdrop-filter:blur(14px);
}
.offer-card__tag{display:inline-block;color:#fff;background:var(--secondary);border-radius:999px;padding:7px 12px;font-size:.75rem;font-weight:800}
.hero__offer-card>p{font-weight:700;margin:20px 0 2px;color:var(--primary)}
.hero__offer-card>strong{font-size:2.1rem}
.offer-card__price{display:flex;align-items:end;gap:14px;margin:13px 0 20px}
.offer-card__price del{color:#8993a0}
.offer-card__price span{font-size:2.35rem;line-height:1;color:var(--primary);font-weight:800}
.offer-card__tests{
list-style:none;margin:0 0 16px;padding:0;
display:grid;gap:7px;font-size:.86rem;color:var(--ink);
}
.offer-card__tests li{display:flex;align-items:flex-start;gap:8px;line-height:1.4}
.offer-card__tests li:before{content:"✓";color:var(--secondary);font-weight:800;flex:0 0 auto}
.offer-card__report{
display:flex;align-items:center;gap:7px;margin-bottom:16px;
padding:9px 12px;border-radius:12px;font-size:.82rem;font-weight:700;
color:var(--secondary);background:rgba(0,127,137,.09);
}
.hero__offer-card small{display:block;color:var(--muted);margin-top:12px;font-size:.74rem}
.stats{
margin-top:80px;padding:25px 30px;border-radius:22px;
display:grid;grid-template-columns:repeat(4,1fr);
background:rgba(255,255,255,.95);color:var(--ink);box-shadow:var(--shadow)
}
.stats div{display:flex;flex-direction:column;padding:0 25px;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats strong{font-size:1.6rem;color:var(--primary)}
.stats span{font-size:.83rem;color:var(--muted)}
.section{padding:100px 0}
.section--soft{background:linear-gradient(180deg,#f7fafc,#fff)}
.section--dark{background:linear-gradient(135deg,#3b0627,#790a47);color:#fff}
.section-heading{max-width:690px;margin-bottom:48px}
.section-heading--center{text-align:center;margin-left:auto;margin-right:auto}
.section-heading--center .eyebrow{justify-content:center}
.section h2{font-size:clamp(2rem,3.5vw,3.45rem);line-height:1.15;letter-spacing:-.035em;margin:14px 0 18px}
.section-heading p{color:var(--muted);font-size:1.04rem}
.intro__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.quick-services{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.quick-card{
padding:26px;border:1px solid var(--line);border-radius:20px;
background:#fff;box-shadow:0 12px 36px rgba(20,41,61,.07);
transition:.25s ease;
}
.quick-card:hover{transform:translateY(-6px);border-color:rgba(143,11,79,.25)}
.quick-card span{font-size:1.85rem}
.quick-card h3{margin:10px 0 6px}
.quick-card p{margin:0;color:var(--muted);font-size:.9rem}
.package-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.package-card{
position:relative;display:flex;flex-direction:column;
padding:27px;border:1px solid var(--line);border-radius:24px;background:#fff;
box-shadow:0 12px 38px rgba(28,47,67,.07);transition:.25s ease;overflow:hidden
}
.package-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.package-card--featured{border:2px solid var(--primary);transform:translateY(-12px)}
.package-card--featured:hover{transform:translateY(-17px)}
.popular-badge{position:absolute;top:0;right:0;color:#fff;background:var(--primary);padding:7px 12px;border-radius:0 0 0 14px;font-size:.68rem;font-weight:800}
.package-card__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:21px}
.package-no{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--secondary),var(--secondary-2));font-weight:800}
.package-count{font-size:.78rem;font-weight:800;color:var(--primary);background:#f9e9f1;padding:7px 10px;border-radius:999px}
.package-card h3{font-size:1.27rem;margin:0 0 8px}
.package-for{color:var(--muted);font-size:.82rem;min-height:66px;margin:0}
.package-price{display:flex;align-items:end;gap:12px;margin:20px 0}
.package-price del{color:#8d98a5}
.package-price strong{font-size:2rem;color:var(--primary)}
.package-card ul{padding:0;margin:0 0 24px;list-style:none;flex:1}
.package-card li{padding:8px 0 8px 24px;border-bottom:1px dashed var(--line);font-size:.88rem;position:relative}
.package-card li:before{content:"✓";position:absolute;left:0;color:var(--secondary);font-weight:800}
.arthritis-card{
margin-top:28px;padding:35px 38px;border-radius:26px;
display:flex;justify-content:space-between;align-items:center;gap:30px;
color:#fff;background:linear-gradient(120deg,var(--primary),#4e0832);
box-shadow:var(--shadow)
}
/* Headline offer - packages grid ke upar wala wide banner. Arthritis card jaisa hi
layout, par teal gradient taaki dono alag dikhen. */
.combo-card{
margin:0 0 30px;padding:35px 38px;border-radius:26px;
display:flex;justify-content:space-between;align-items:center;gap:30px;
color:#fff;background:linear-gradient(120deg,var(--secondary),#04525a);
box-shadow:var(--shadow)
}
.combo-card h3{font-size:2rem;margin:10px 0}
.combo-card p{max-width:760px;color:#d7f0f2;margin:0}
.combo-card .eyebrow{color:#b7e9ed}
.combo-card__report{
display:inline-flex;align-items:center;gap:7px;margin:16px 0 4px;
padding:8px 14px;border-radius:999px;font-size:.84rem;font-weight:700;
background:rgba(255,255,255,.16);
}
.combo-card .arthritis-card__price strong{color:#ffd061}
.combo-card .arthritis-card__price del{color:#a9d8dc}
.arthritis-card h3{font-size:2rem;margin:10px 0}
.arthritis-card p{max-width:760px;color:#f5dbe8}
.arthritis-card__price{display:flex;gap:16px;align-items:center}
.arthritis-card__price strong{font-size:1.45rem;color:#ffd061}
/* Cardiac Profile - grouped test list wala bada package card. */
.cardiac-card{
margin-top:28px;padding:36px 38px;border-radius:26px;
display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start;
background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
}
.cardiac-card__head h3{font-size:2rem;margin:10px 0}
.cardiac-card__head p{color:var(--muted);margin:0 0 18px}
.cardiac-card__price strong{font-size:1.6rem;color:var(--primary)}
.cardiac-card__price{margin-bottom:20px}
/* Grid ki jagah CSS columns - groups ki lambai alag-alag hai, columns unhe apne aap
balance kar leti hain (grid me chhote group ke neeche badi khaali jagah bachti thi). */
.cardiac-card__groups{columns:2;column-gap:34px}
.cardiac-group{break-inside:avoid;margin-bottom:24px}
.cardiac-group h4{
margin:0 0 10px;font-size:.76rem;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:var(--secondary);
}
.cardiac-group ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.89rem}
.cardiac-group li{display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.cardiac-group li:before{content:"•";color:var(--primary);font-weight:800;flex:0 0 auto}
.accordion{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 14px 45px rgba(27,46,64,.07)}
.accordion-item+ .accordion-item{border-top:1px solid var(--line)}
.accordion-button{
width:100%;display:flex;justify-content:space-between;align-items:center;
padding:21px 24px;border:0;background:#fff;color:var(--ink);font-weight:700;text-align:left
}
.accordion-button b{font-size:1.35rem;color:var(--primary);transition:.25s ease}
.accordion-content{max-height:0;overflow:hidden;transition:max-height .32s ease;background:#f8fafc}
.accordion-content p{padding:0 24px 22px;margin:0;color:var(--muted)}
.accordion-item.active .accordion-content{max-height:150px}
/* FAQ ke jawab lambe hain, isliye zyada room */
.faq .accordion-item.active .accordion-content{max-height:320px}
.accordion-item.active .accordion-button b{transform:rotate(45deg)}
.other-profiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.profile-mini{padding:24px;border-radius:20px;background:#f7fafc;border:1px solid var(--line)}
.profile-mini span{font-size:1.55rem}
.profile-mini h3{margin:10px 0 5px}
.profile-mini p{margin:0;color:var(--muted);font-size:.9rem}
/* ---- Test rate list ---- */
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.rate-search{position:relative;max-width:520px;margin:0 auto 26px}
.rate-search input{
width:100%;padding:15px 18px 15px 46px;font:inherit;color:var(--ink);
border:1px solid var(--line);border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23788b9c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 17px center/18px;
box-shadow:0 10px 26px rgba(25,42,59,.06);
}
.rate-search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(143,11,79,.12)}
.rate-search__count{margin:10px 0 0;text-align:center;font-size:.85rem;color:var(--muted);min-height:1.2em}
.rate-table-wrap{
overflow-x:auto;background:#fff;border:1px solid var(--line);
border-radius:22px;box-shadow:0 12px 34px rgba(25,42,59,.06);
}
.rate-table{width:100%;border-collapse:collapse;font-size:.94rem}
.rate-table th{
padding:16px 18px;text-align:left;white-space:nowrap;
background:var(--primary);color:#fff;font-weight:700;font-size:.85rem;
letter-spacing:.03em;
}
.rate-table th:first-child{border-radius:22px 0 0 0}
.rate-table th:last-child{border-radius:0 22px 0 0}
.rate-table td{padding:15px 18px;border-top:1px solid var(--line);vertical-align:middle}
/* Search filter rows ko hidden karta hai - ye mobile ke display:block rule ko beat karna chahiye. */
.rate-table tr[hidden]{display:none}
.rate-table tbody tr:nth-child(even){background:#fafbfc}
.rate-table tbody tr:hover{background:#fdf3f8}
.rate-table td:first-child{color:var(--muted);width:52px}
.rate-table td:nth-child(3){color:var(--muted);font-size:.88rem;min-width:230px}
.rate-price{font-weight:800;color:var(--primary);white-space:nowrap}
.rate-action{text-align:right;white-space:nowrap}
.rate-empty{margin:0;padding:34px 18px;text-align:center;color:var(--muted)}
.rate-note{
margin:22px auto 0;max-width:820px;text-align:center;
font-size:.86rem;color:var(--muted);line-height:1.7;
}
/* ---- Equipment / machines ---- */
.equipment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.equip-card{
display:flex;flex-direction:column;overflow:hidden;
border:1px solid var(--line);border-radius:22px;background:#fff;
box-shadow:0 12px 34px rgba(25,42,59,.07);transition:.25s ease;
}
.equip-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.equip-card>img{width:100%;height:210px;object-fit:contain;background:#f7fafc;padding:14px}
.equip-card__body{padding:22px 24px 26px}
.equip-card__tag{
display:inline-block;margin-bottom:10px;padding:5px 11px;border-radius:999px;
font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
color:var(--secondary);background:rgba(0,127,137,.1);
}
.equip-card h3{margin:0 0 3px;font-size:1.22rem}
.equip-card__type{margin:0 0 12px;font-size:.8rem;font-weight:700;color:var(--primary)}
.equip-card__body>p:last-child{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}
.equip-note{margin:26px 0 0;text-align:center;font-size:.8rem;color:var(--muted)}
/* ---- Gallery + lightbox ---- */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.gallery-item{margin:0}
.gallery-open{
display:block;width:100%;padding:0;border:0;background:none;
border-radius:20px;overflow:hidden;position:relative;cursor:zoom-in;
box-shadow:0 12px 34px rgba(25,42,59,.08);
}
.gallery-open img{width:100%;height:210px;object-fit:cover;transition:transform .5s ease}
/* Board / banner / poster alag grid me hain. Ye photos nahi, graphics hain - inhe crop
karne par text kat jata hai, isliye poora dikhate hain. Photos ke saath ek hi grid me
milane par dono kharab lagte the, isliye alag rakha hai aur jagah bhi zyada di hai. */
.gallery-subhead{
margin:52px 0 20px;text-align:center;
font-size:.78rem;font-weight:800;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);
}
.gallery-grid--boards{grid-template-columns:repeat(3,1fr)}
.gallery-grid--boards .gallery-open{
background:#fff;border:1px solid var(--line);
box-shadow:0 8px 22px rgba(25,42,59,.05);
}
.gallery-grid--boards .gallery-open img{height:250px;object-fit:contain;padding:18px}
.gallery-grid--boards .gallery-open:hover img{transform:scale(1.04)}
.gallery-open:after{
content:"⤢";position:absolute;right:12px;bottom:12px;
width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
color:#fff;background:rgba(0,0,0,.45);font-size:1rem;
opacity:0;transition:opacity .3s ease;
}
.gallery-open:hover img{transform:scale(1.07)}
.gallery-open:hover:after,.gallery-open:focus-visible:after{opacity:1}
.gallery-open:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.gallery-item figcaption{margin-top:11px;font-size:.86rem;font-weight:600;color:var(--muted);text-align:center}
.lightbox{
position:fixed;inset:0;z-index:2000;
display:grid;place-items:center;padding:70px 20px;
/* Yahan pehle backdrop-filter:blur(4px) tha. Poori screen par backdrop-filter lagane se
browser ko har frame me apne peeche ka pura page dobara blur karna padta hai - aur
peeche hero slideshow hamesha animate hota rehta hai, saath me header/offer-card ke
apne backdrop-filter bhi hain. Isse browser hang ho jata tha. Background waise bhi
lagbhag opaque hai, isliye blur se koi farak nahi padta tha. */
background:rgba(10,4,8,.96);
}
.lightbox[hidden]{display:none}
.lightbox__figure{margin:0;display:grid;justify-items:center;gap:14px;max-width:100%}
.lightbox__figure img{
max-width:min(1100px,92vw);max-height:76vh;width:auto;height:auto;
border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lightbox__figure figcaption{color:#f3e6ee;font-size:.95rem;font-weight:600;text-align:center}
.lightbox__close,.lightbox__nav{
position:absolute;border:0;cursor:pointer;color:#fff;
background:rgba(255,255,255,.13);border-radius:50%;
display:grid;place-items:center;transition:background .2s ease;
}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.28)}
.lightbox__close:focus-visible,.lightbox__nav:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lightbox__close{top:18px;right:18px;width:46px;height:46px;font-size:2rem;line-height:1}
.lightbox__nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2.2rem;line-height:1}
.lightbox__nav--prev{left:18px}
.lightbox__nav--next{right:18px}
.facilities{background:#f7fafc}
.facilities__grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}
.facilities__image{position:relative}
.facilities__image img{width:100%;height:520px;object-fit:cover;border-radius:28px;box-shadow:var(--shadow)}
.image-badge{
position:absolute;right:-25px;bottom:30px;padding:20px 25px;border-radius:18px;
display:flex;flex-direction:column;background:#fff;box-shadow:var(--shadow)
}
.image-badge strong{font-size:1.4rem;color:var(--primary)}
.image-badge span{font-size:.82rem;color:var(--muted)}
.facilities__content h2{font-size:clamp(2rem,3.4vw,3.25rem);line-height:1.15;margin:14px 0 25px}
.facility-list{margin-bottom:28px}
.facility-list>div{display:flex;gap:16px;padding:17px 0;border-bottom:1px solid var(--line)}
.facility-list span{width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--secondary);font-weight:800}
.facility-list p{margin:0;color:var(--muted)}
.facility-list strong{color:var(--ink)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.about-grid h2{color:#fff}
.about-grid p{color:#eadbe3}
.about-points{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.about-points>div{padding:22px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.08)}
.about-points span{color:#ffd061;font-weight:800}
.about-points p{margin:8px 0 0;font-size:.9rem}
.about-points strong{color:#fff}
.booking{background:linear-gradient(135deg,#fff7fb,#f2fbfc)}
.booking__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:65px;align-items:center}
.booking__content h2{font-size:clamp(2rem,3.4vw,3.35rem);line-height:1.15;margin:14px 0 18px}
.booking__content>p{color:var(--muted)}
.booking-contact{display:flex;flex-direction:column;gap:9px;margin-top:25px}
.booking-contact a{font-weight:700;color:var(--primary)}
.booking-form{padding:32px;border-radius:25px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.booking-form label{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:.85rem;margin-bottom:16px}
.booking-form input,.booking-form select,.booking-form textarea{
width:100%;border:1px solid #d8e3e9;border-radius:13px;padding:14px 15px;color:var(--ink);background:#fbfdfe;outline:none
}
.booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(143,11,79,.08)}
.form-note{font-size:.76rem;color:var(--muted);text-align:center;margin:12px 0 0}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.contact-card{
display:flex;flex-direction:column;justify-content:center;
padding:28px;text-align:center;border:1px solid var(--line);border-radius:22px;
background:#fff;box-shadow:0 12px 34px rgba(25,42,59,.06);
}
.contact-card span{font-size:2rem}
.contact-card--photo{padding:0;overflow:hidden;justify-content:flex-start}
.contact-card--photo img{
display:block;width:100%;height:210px;object-fit:cover;object-position:center 55%;
transition:transform .5s ease;
}
.contact-card--photo:hover img{transform:scale(1.05)}
.contact-card__body{padding:24px 26px 28px}
.contact-card h3{margin:10px 0}
.contact-card p{margin:0;color:var(--muted)}
.contact-card a{color:var(--primary);word-break:break-word}
.map-card{
margin-top:34px;border-radius:22px;overflow:hidden;line-height:0;
border:1px solid var(--line);box-shadow:var(--shadow);
}
.map-card iframe{display:block;width:100%;height:420px;border:0}
.map-actions{display:flex;margin-top:18px}
.notice{margin-top:28px;padding:20px 24px;border-radius:16px;background:#fff7da;border-left:5px solid var(--accent);color:#66511f}
.footer{background:#101a26;color:#c4cdd6;padding:68px 0 22px}
.footer__grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:48px}
/* Logo ke andar "P" aur flask transparent hain, isliye dark footer par white chip zaroori hai */
.brand--footer .brand__logo{height:38px;background:#fff;padding:8px 11px;border-radius:13px;box-sizing:content-box}
.brand--footer .brand__text strong{color:#fff}
.brand--footer .brand__text small{color:#aab7c4}
.footer p{font-size:.88rem}
.footer h3{color:#fff;margin:0 0 16px}
.footer__grid>div:not(:first-child){display:flex;flex-direction:column;align-items:flex-start}
.footer__grid a{margin:5px 0;font-size:.9rem}
.footer__grid a:hover{color:#fff}
.footer__bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #273344;margin-top:45px;padding-top:20px;font-size:.78rem}
.floating-whatsapp{
position:fixed;right:22px;bottom:22px;z-index:800;
width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
background:#17a85b;color:#fff;font-weight:800;box-shadow:0 12px 30px rgba(23,168,91,.35)
}
.mobile-call{display:none}
.toast{
position:fixed;left:50%;bottom:28px;z-index:1200;transform:translate(-50%,150%);
color:#fff;background:#172333;padding:13px 18px;border-radius:12px;box-shadow:var(--shadow);
transition:.35s ease;font-size:.85rem
}
.toast.show{transform:translate(-50%,0)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@media (max-width:1050px){
.equipment-grid{grid-template-columns:1fr 1fr}
.nav-links{gap:12px;font-size:.85rem}
/* Jagah banane ke liye brand ka text hata dete hain, logo rehta hai. */
.brand__text{display:none}
.package-grid{grid-template-columns:1fr 1fr}
.package-card--featured{transform:none}
.package-card--featured:hover{transform:translateY(-7px)}
.hero__grid{grid-template-columns:1fr .7fr;gap:35px}
.hero h1{font-size:3.8rem}
}
@media (max-width:820px){
.top-strip__inner{justify-content:center;flex-wrap:wrap;gap:12px;padding:8px 0}
/* Hero images 1440x540 (bahut wide) hain. Mobile par hero content ki wajah se
bahut lambi ho jati hai, aur cover use karne par image zabardasti stretch hokar
apne native size se bhi bada ho jata tha - zoomed aur blurry dikhta tha.
Isliye mobile par slideshow ko upar ek banner bana diya hai, jahan image apne
natural ratio ke aas-paas rehti hai. Text neeche brand gradient par aata hai. */
.hero{
/* Header sticky hai (flow me hai), isliye mobile par upar padding ki zaroorat
nahi - warna banner ke upar khaali maroon patti dikhti hai. */
min-height:auto;padding-top:0;
background:linear-gradient(165deg,#34031f 0%,#70073e 58%,#8f0b4f 100%);
}
.hero__slider{
position:relative;z-index:0;
width:100%;aspect-ratio:16/9;height:auto;
margin-bottom:32px;
}
.hero__slide{object-position:center 50%;transform:none;transition:opacity 1s ease}
.hero__slide.is-active{transform:none}
.hero__overlay{display:none}
.hero__grid,.intro__grid,.facilities__grid,.about-grid,.booking__grid{grid-template-columns:1fr}
.hero__offer-card{justify-self:start}
.stats{grid-template-columns:1fr 1fr;margin-top:55px}
.stats div:nth-child(2){border-right:0}
.stats div{padding:15px;border-bottom:1px solid var(--line)}
.stats div:nth-child(3),.stats div:nth-child(4){border-bottom:0}
.other-profiles{grid-template-columns:1fr 1fr}
.facilities__image img{height:400px}
.image-badge{right:15px}
.contact-grid{grid-template-columns:1fr}
.footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
.container{width:min(100% - 24px,1180px)}
.top-strip{font-size:.75rem}
.brand__text strong{font-size:.88rem}
.brand__text small{font-size:.58rem}
.brand__logo{height:34px}
.brand--footer .brand__logo{height:32px}
.section{padding:72px 0}
.hero h1{font-size:2.75rem}
.hero__content>p{font-size:1rem}
.hero__actions{display:grid}
.hero__actions .btn{width:100%}
.hero__offer-card{width:100%}
.stats{padding:14px}
.stats strong{font-size:1.28rem}
.stats span{font-size:.73rem}
.quick-services,.package-grid,.other-profiles,.about-points,.form-row,.footer__grid{grid-template-columns:1fr}
.package-card{padding:23px}
.arthritis-card,.combo-card{flex-direction:column;align-items:flex-start;padding:28px}
.combo-card .btn{width:100%}
.cardiac-card{grid-template-columns:1fr;gap:26px;padding:28px}
.cardiac-card__groups{columns:1}
.cardiac-card__head .btn{width:100%}
/* Offer card mobile par sabse upar - site kholte hi offer dikhna chahiye. */
.hero__offer-card{order:-1}
.arthritis-card__price{flex-direction:column;align-items:flex-start;gap:2px}
.rate-table-wrap{overflow-x:visible;background:transparent;border:0;border-radius:0;box-shadow:none}
.rate-table,.rate-table tbody,.rate-table tr,.rate-table td{display:block;width:100%}
.rate-table thead{display:none}
.rate-table tbody tr,.rate-table tbody tr:nth-child(even){
background:#fff;border:1px solid var(--line);border-radius:18px;
padding:6px 4px;margin-bottom:14px;box-shadow:0 8px 22px rgba(25,42,59,.05);
}
.rate-table td{border-top:0;padding:7px 16px;display:flex;gap:12px;align-items:baseline}
.rate-table td:before{
content:attr(data-label);flex:0 0 74px;
font-size:.72rem;font-weight:800;text-transform:uppercase;
letter-spacing:.05em;color:var(--muted);
}
.rate-table td:first-child{display:none}
.rate-table td:nth-child(3){min-width:0;font-size:.85rem}
.rate-action{padding:10px 16px 14px}
.rate-action:before{display:none}
.rate-action .btn{width:100%}
.equipment-grid{grid-template-columns:1fr;gap:18px}
.equip-card>img{height:180px}
.gallery-grid{grid-template-columns:1fr 1fr;gap:14px}
.gallery-open img{height:150px}
.gallery-item figcaption{font-size:.78rem;margin-top:8px}
/* Board ek column me - do column me itne chhote ho jate hain ki text hi nahi padhta. */
.gallery-grid--boards{grid-template-columns:1fr}
.gallery-grid--boards .gallery-open img{height:190px;padding:12px}
.gallery-subhead{margin:34px 0 16px}
.lightbox{padding:64px 12px}
.lightbox__figure img{max-height:70vh}
.lightbox__nav{width:44px;height:44px;font-size:1.8rem}
.lightbox__nav--prev{left:8px}
.lightbox__nav--next{right:8px}
.facilities__image img{height:300px}
.map-card iframe{height:300px}
.map-actions .btn{width:100%}
.booking-form{padding:22px}
.footer__bottom{flex-direction:column}
.floating-whatsapp{bottom:76px}
.mobile-call{
display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:790;
min-height:50px;align-items:center;justify-content:center;color:#fff;
border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary-2));
font-weight:800;box-shadow:0 12px 30px rgba(143,11,79,.28)
}
}
/* One-click Hindi / English language switch */
.language-switch{
display:inline-flex;
align-items:center;
padding:4px;
border:1px solid var(--line);
border-radius:999px;
background:#f5f8fb;
min-width:max-content;
}
.lang-btn{
border:0;
background:transparent;
color:var(--muted);
padding:8px 12px;
border-radius:999px;
font-weight:800;
font-size:.78rem;
line-height:1;
transition:.22s ease;
}
.lang-btn:hover{color:var(--primary)}
.lang-btn.active{
color:#fff;
background:linear-gradient(135deg,var(--primary),var(--primary-2));
box-shadow:0 5px 14px rgba(143,11,79,.22);
}
/* Nav ka apna breakpoint (baaki mobile styles 820px par hain). Nav me 9 links +
language switch + button hai - 1000px se neeche ye ek line me nahi aate, isliye
hamburger menu yahin se shuru ho jata hai. */
@media (max-width:1000px){
.nav-toggle{display:block}
.nav-links{
position:absolute;left:18px;right:18px;top:84px;
display:none;flex-direction:column;align-items:stretch;gap:0;
background:#fff;border:1px solid var(--line);border-radius:18px;padding:15px;box-shadow:var(--shadow)
}
.nav-links.open{display:flex}
.nav-links a{padding:11px 10px}
.language-switch{width:100%;justify-content:center;margin:7px 0 11px}
.lang-btn{flex:1;padding:11px 14px}
/* Menu ab hamburger me hai, isliye brand ka text wapas dikha sakte hain. */
.brand__text{display:flex}
}