:root{ color-scheme: light; --paper:#FFFFFF; --blush:#FFF5F0; --sky:#F1F5FE; --sand:#FBF7F3; --ink:#18214E; --muted:#5E6A8A; --line:#EAE7E3; --line-cool:#E3E9F6; --indigo:#2A2E6E; --indigo-deep:#1B1F52; --indigo-ink:#18214E; --coral:#FF7517; --coral-text:#FF7517; --coral-soft:#FDE9E1; --sage:#FF7517; --sage-soft:#E4F1ED; --on-dark:#EFF1F8; --on-dark-muted:#AEB5D0; --shadow-s:0 2px 4px rgba(22,32,60,.04), 0 10px 30px -14px rgba(22,32,60,.18); --shadow-l:0 8px 16px rgba(22,32,60,.06), 0 30px 60px -26px rgba(22,32,60,.32); --r:14px; --r-lg:24px; --r-xl:34px; --sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --serif:"Source Serif 4", ui-serif, Georgia, serif; --wrap:1220px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} button,input,select{font:inherit;color:inherit} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.16;margin:0;letter-spacing:-.012em} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} :focus-visible{outline:3px solid var(--coral);outline-offset:2px;border-radius:4px} .wrap{width:100%;max-width:1325px;margin-inline:auto;padding-inline:24px} .sec{padding-block:92px} .sec-blush{background:var(--blush)} .sec-sky{background:var(--sky)} .sec-sand{background:var(--sand)} /* ---------- photo slots ---------- Warm placeholder frames. Replace each .ph with an . The data-shot label tells the photographer what belongs here. */ .ph{position:relative;overflow:hidden; /*background:linear-gradient(140deg,#FCE6DA 0%,#F6E7F1 45%,#E4ECFB 100%);*/ display:grid;place-items:center} .ph::before{content:"";position:absolute;width:150%;height:150%; /*background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.72),transparent 42%),radial-gradient(circle at 78% 76%,rgba(255,255,255,.5),transparent 40%)*/ } .ph svg{position:relative;color:rgba(22,32,60,.28)} .ph[data-shot]::after{ content:attr(data-shot);position:absolute;left:12px;bottom:12px;z-index:2; background:rgba(255,255,255,.86);color:#4A5372;font-size:10.5px;font-weight:600; padding:4px 9px;border-radius:99px;letter-spacing:.02em; } .ph-cool{background:linear-gradient(140deg,#E2EBFB 0%,#EDE7F7 50%,#FBE7DC 100%)} .ph-sage{background:linear-gradient(140deg,#DFEFE9 0%,#EAF0FA 55%,#FBEDE4 100%)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:10px;border:1.5px solid transparent;font-weight:600;font-size:15.5px;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease} .btn-primary{background:var(--indigo);color:#fff} .btn-primary:hover{background:#FF7517;} .btn-coral{background:var(--coral);color:#fff;box-shadow:0 8px 20px -10px rgba(231,97,58,.9)} .btn-coral:hover{background:#18214E;} .btn-line{border-color:var(--line-cool);background:var(--paper);color:var(--ink)} .btn-line:hover{border-color:var(--indigo);color:var(--indigo)} .btn-white{background:#fff;color:var(--indigo)} .btn-white:hover{background:#F0F2FA} .btn-sm{padding:10px 18px;font-size:14.5px} /* ================= utility strip ================= */ .util{background:var(--indigo-ink);color:var(--on-dark-muted);font-size:13.5px} .util .wrap{display:flex;align-items:center;gap:22px;min-height:42px;flex-wrap:wrap} .util .hours{margin-right:auto;color:var(--on-dark);display:flex;align-items:center;gap:8px} .util .dot{width:7px;height:7px;border-radius:50%;background:#FF7517;flex:none} .util a{padding-block:5px} .util a:hover{color:#fff} .util .call{color:#fff;font-weight:600} .util .call b{color:#F5A87F} /* ================= header + mega menu ================= */ header.site{position:sticky;top:0;z-index:90;background:var(--paper);border-bottom:1px solid var(--line-cool)} header.site .wrap{position:relative;display:flex;align-items:center;gap:26px;min-height:82px} .logo{display:flex;align-items:center;gap:11px;flex:none;width: 20%;} .logo svg{width:38px;height:38px;flex:none} .logo b{font-family:var(--serif);font-size:22.5px;font-weight:600;letter-spacing:-.02em;display:block;line-height:1.05} .logo span{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.04em} nav.main{display:flex;margin-left:auto;align-items:center} .nav-item{position:static} .nav-link{ display:flex;align-items:center;gap:0px;padding:11px 6px;border-radius:10px; font-size:15px;font-weight:500;color:var(--muted);background:none;border:0;cursor:pointer; } .nav-link:hover{background:var(--sky);color:var(--ink)} .nav-link svg{transition:transform .18s ease} .nav-item.open > .nav-link{background:var(--sky);color:var(--ink)} .nav-item.open > .nav-link svg{transform:rotate(180deg)} .mega{ position:absolute;top:calc(100% + 1px);left:0;right:0;z-index:95; background:var(--paper);border:1px solid var(--line-cool);border-top:0; border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--shadow-l); padding:34px;display:none; } .nav-item.open .mega{display:block} .mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px} .mega h4{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--coral-text);margin-bottom:14px} .mega ul{display:grid;gap:9px} .mega ul a{font-size:14.8px;color:var(--muted);display:block;padding:2px 0} .mega ul a:hover{color:var(--indigo);font-weight:500} .mega-feature{background:var(--blush);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px} .mega-feature .ph{aspect-ratio:16/10;border-radius:10px;margin-bottom:4px} .mega-feature h5{font-family:var(--serif);font-size:18px;font-weight:600;margin:0} .mega-feature p{font-size:13.8px;color:var(--muted);line-height:1.5} .mega-feature a{font-size:14px;font-weight:600;color:var(--coral-text);margin-top:auto} .mega-foot{margin-top:28px;padding-top:20px;border-top:1px solid var(--line-cool);display:flex;gap:24px;flex-wrap:wrap;align-items:center;font-size:14.5px;color:var(--muted)} .mega-foot a{font-weight:600;color:var(--indigo)} .head-actions{display:flex;align-items:center;gap:10px;flex:none} .burger{display:none;border:1px solid var(--line-cool);background:none;border-radius:10px;padding:10px 12px;cursor:pointer} /* ================= hero ================= */ /*.hero{background:linear-gradient(180deg,var(--blush) 0%,rgba(255,245,240,0) 100%);padding-top:56px}*/ .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center} .eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:7px 15px 7px 8px;font-size:13.5px;font-weight:500;color:var(--muted);box-shadow:var(--shadow-s)} .eyebrow i{background:var(--sage-soft);color:var(--sage);font-style:normal;font-weight:700;font-size:11.5px;padding:3px 9px;border-radius:99px} .hero h1{font-size:clamp(40px,5vw,64px);margin-top:22px;max-width:13ch;letter-spacing:-.024em} .hero h1 em{font-style:normal;color:var(--coral-text)} .hero .lede{margin-top:22px;font-size:18.5px;color:var(--muted);max-width:46ch} .hero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap} .hero-art{position:relative} .hero-art .ph{aspect-ratio:4/5;border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 90px} .float-card{ position:absolute;background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow-l); padding:15px 18px;display:flex;align-items:center;gap:12px; } .float-card.a{bottom:34px;left:-26px;max-width:250px} .float-card.b{top:34px;right:-22px} .float-card i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;font-style:normal;font-weight:700;font-size:14px;background:var(--sage-soft);color:var(--sage)} .float-card.b i{background:var(--coral-soft);color:var(--coral-text)} .float-card strong{display:block;font-size:14.5px;line-height:1.25} .float-card span{font-size:12.8px;color:var(--muted)} .trust-row{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap} .trust-row div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 20px;box-shadow:var(--shadow-s)} .trust-row b{font-family:var(--serif);font-size:26px;font-weight:600;display:block;line-height:1.1} .trust-row span{font-size:13px;color:var(--muted)} /* search band */ .search-band{margin-top:56px;background:var(--paper);border:1px solid var(--line-cool);border-radius:var(--r-lg);padding:26px 30px;box-shadow:var(--shadow-l);position:relative;z-index:20} .search-band h2{font-size:20px;margin-bottom:16px} .search-inner{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .search-box{flex:1;min-width:260px;display:flex;align-items:center;gap:12px;border:1.5px solid var(--line-cool);border-radius:99px;padding:4px 6px 4px 20px;background:var(--sky)} .search-box svg{flex:none;color:var(--muted)} .search-box input{flex:1;border:0;background:none;padding:13px 0;font-size:16px;min-width:0} .search-box input:focus{outline:none} .results{position:absolute;top:calc(100% - 10px);left:30px;right:30px;z-index:40;background:var(--paper);border:1px solid var(--line-cool);border-radius:var(--r);box-shadow:var(--shadow-l);max-height:320px;overflow:auto;display:none} .results.open{display:block} .results li{border-bottom:1px solid var(--line-cool)} .results li:last-child{border-bottom:0} .results button{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:13px 18px;display:flex;justify-content:space-between;gap:14px;align-items:center} .results button:hover{background:var(--sky)} .results .kind{font-size:12.5px;color:var(--muted);flex:none} .results .none{padding:16px 18px;color:var(--muted);font-size:15px} .suggests{margin-top:14px;font-size:14px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center} .suggests button{background:var(--sky);border:0;cursor:pointer;color:var(--indigo);font-weight:500;font-size:13.5px;padding:6px 13px;border-radius:0px} .suggests button:hover{color:#FF7517;)} /* ================= section headings ================= */ .sec-head{ margin-bottom:46px; } .sec-head.center{margin-inline:auto;text-align:center} .sec-head.row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:44px} .kicker{display:inline-block;font-size:13px;font-weight:700;color:var(--coral-text);margin-bottom:12px} .sec-head h2{font-size:clamp(31px,3.6vw,45px)} .sec-head p{color:var(--muted);margin-top:14px;font-size:17px} .more{font-weight:600;color:var(--indigo);white-space:nowrap;display:inline-flex;align-items:center;gap:7px} .more:hover{color:var(--coral-text)} /* ================= specialities ================= */ .spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .spec-grid a{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line-cool);border-radius:var(--r);background:var(--paper);font-size:15px;font-weight:500;line-height:1.35;transition:border-color .16s ease,box-shadow .16s ease} .spec-grid a:hover{border-color:var(--coral);box-shadow:var(--shadow-s)} .spec-grid .ico{width:38px;height:38px;border-radius:12px;background:var(--sky);display:grid;place-items:center;flex:none;color:var(--indigo)} .spec-grid a:nth-child(3n) .ico{background:var(--coral-soft);color:var(--coral-text)} .spec-grid a:nth-child(3n+2) .ico{background:var(--sage-soft);color:var(--sage)} .spec-grid a.hidden{display:none} .expand{margin-top:32px;text-align:center} /* ================= doctors ================= */ .filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:32px} .filters button{padding:9px 17px;border-radius:99px;border:1px solid var(--line-cool);background:var(--paper);font-size:14.5px;font-weight:500;cursor:pointer;transition:all .14s ease} .filters button:hover{border-color:var(--muted)} .filters button[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff} .doctors{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .doc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease} .doc:hover{box-shadow:var(--shadow-l)} .doc .ph{aspect-ratio:1/1} .doc .body{padding:20px;display:flex;flex-direction:column;flex:1} .doc h3{font-size:18px;line-height:1.3} .doc .honour{display:inline-block;font-size:11.5px;font-weight:700;color:var(--coral-text);background:var(--coral-soft);padding:2px 9px;border-radius:99px;margin-left:6px;vertical-align:middle} .doc .role{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.5} .doc .where{font-size:13px;color:var(--sage);font-weight:600;margin-top:12px;display:flex;align-items:center;gap:6px} .doc .btn{margin-top:18px;width:100%} .no-match{grid-column:1/-1;border:1px dashed var(--line-cool);border-radius:var(--r-lg);padding:46px;text-align:center;color:var(--muted)} .no-match strong{display:block;font-family:var(--serif);font-size:21px;color:var(--ink);margin-bottom:8px} /* ================= presence ================= */ .places{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .place{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column} .place .ph{aspect-ratio:16/10} .place .body{padding:24px;display:flex;flex-direction:column;flex:1;gap:12px} .place h3{font-size:22px} .place address{font-style:normal;font-size:14.5px;color:var(--muted);line-height:1.55} .place .meta{display:flex;gap:8px;flex-wrap:wrap} .place .meta span{font-size:12.5px;padding:5px 12px;border-radius:99px;background:var(--sky);color:var(--indigo)} .place .row{display:flex;gap:10px;margin-top:auto;padding-top:8px} .place .row .btn{flex:1} /* ================= booking ================= */ .book-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:start} .book-side > p{color:var(--muted);margin-top:16px;font-size:17px;max-width:38ch} .book-side .ph{aspect-ratio:4/3;border-radius:var(--r-lg);margin-top:28px} .book-steps{margin-top:28px;display:grid;gap:20px;counter-reset:bs} .book-steps li{display:flex;gap:15px;counter-increment:bs} .book-steps li::before{content:counter(bs);flex:none;width:30px;height:30px;border-radius:50%;background:var(--coral-soft);color:var(--coral-text);display:grid;place-items:center;font-weight:700;font-size:14px} .book-steps strong{display:block;font-size:15.8px} .book-steps span{font-size:14.5px;color:var(--muted)} .form-card{border:1px solid var(--line-cool);border-radius:var(--r-lg);padding:34px;background:var(--paper);box-shadow:var(--shadow-l)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .f{display:flex;flex-direction:column;gap:7px;min-width:0} .f.full{grid-column:1/-1} .f label{font-size:13.5px;font-weight:600;color:var(--muted)} .f input,.f select{padding:13px 15px;border:1px solid var(--line-cool);border-radius:12px;background:var(--paper);font-size:15.5px;width:100%} .f select{appearance:none;cursor:pointer;padding-right:38px;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 14px center} .f input:focus,.f select:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px var(--coral-soft)} .f .err{font-size:13px;color:var(--coral-text);display:none} .f.invalid input,.f.invalid select{border-color:var(--coral)} .f.invalid .err{display:block} .slots{display:flex;gap:9px;flex-wrap:wrap} .slots button{padding:10px 16px;border-radius:99px;border:1px solid var(--line-cool);background:var(--paper);font-size:14.5px;cursor:pointer;transition:all .14s ease} .slots button:hover{border-color:var(--coral)} .slots button[aria-pressed="true"]{background:var(--coral);border-color:var(--coral);color:#fff} .form-foot{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap} .form-foot p{font-size:13.5px;color:var(--muted);flex:1;min-width:210px} .confirmed{text-align:center;padding:26px 0} .confirmed .tick{width:64px;height:64px;border-radius:50%;background:var(--sage-soft);color:var(--sage);display:grid;place-items:center;margin:0 auto 20px} .confirmed h3{font-size:25px} .confirmed > p{color:var(--muted);margin-top:10px;font-size:15.5px} .confirmed dl{margin:26px auto 0;max-width:350px;display:grid;gap:11px;text-align:left;font-size:15px} .confirmed dl div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line-cool);padding-bottom:10px} .confirmed dt{color:var(--muted)} .confirmed dd{margin:0;font-weight:600;text-align:right} .confirmed .btn{margin-top:26px} /* ================= wellness split ================= */ .split{display:grid;grid-template-columns:1fr 1fr;gap:24px} .panel{border-radius:var(--r-lg);padding:38px;display:flex;flex-direction:column;border:1px solid var(--line)} .panel.accent{background:var(--coral-soft);border-color:transparent} .panel h2{font-size:29px} .panel > p{color:var(--muted);margin-top:13px;font-size:15.8px;max-width:44ch} .panel.accent > p{color:#8A4A2E} .price-row{display:flex;align-items:baseline;gap:10px;margin-top:22px} .price-row b{font-family:var(--serif);font-size:36px;font-weight:600} .price-row span{color:var(--muted);font-size:14.5px} .panel ul{margin-top:24px;display:grid;gap:14px} .panel li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px} .panel li svg{flex:none;margin-top:4px;color:var(--coral-text)} .panel .btn{margin-top:28px;align-self:flex-start} .panel.accentimg{ box-shadow: 0px 3px 12px 0px #80808063; /*background: linear-gradient(rgb(24 33 78 / 39%), rgba(24, 33, 78, .88)), url(https://webs.hashtagit.in/pacificonehealth/image/lajpat-nagar.png) center / cover no-repeat;*/ } /* Dark background pe text/icons contrast fix */ /*.panel.accentimg h2{ color:#fff; }*/ /*.panel.accentimg > p{ color:#C7CBE0; }*/ /*.panel.accentimg li{ color:#EDEFF7; }*/ .panel.accentimg li svg{ color:#FF7A45; } .panel.accentimg .btn-line{ background:transparent; border-color:rgba(255,255,255,.35); color:#fff; } .panel.accentimg .btn-line:hover{ background:rgba(255,255,255,.08); } /* ================= ecosystem ================= */ .eco{ background: url(https://webs.hashtagit.in/pacificonehealth/image/2115.jpg) center / cover no-repeat; /*background: linear-gradient(rgba(255,117,23,.85), rgba(255,117,23,.85)), url('https://webs.hashtagit.in/pacificonehealth/image/lajpat-nagar.png') center/cover no-repeat;*/ color:var(--on-dark); } /*.eco{background:#18214E!important;color:var(--on-dark)}*/ .eco h2{color:#fff} .eco .sec-head p{color:var(--on-dark-muted)} .eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .eco-grid a{background:rgba(255,255,255,.05);border:1px solid rgba(239,241,248,.13);padding:28px;display:flex;flex-direction:column;gap:9px;transition:background .18s ease} .eco-grid a:hover{background:rgba(255,255,255,.1)} .eco-grid .ic{width:48px;height:48px;border-radius:14px;background:rgba(231,97,58,.18);color:#F5A87F;display:grid;place-items:center;margin-bottom:8px} .eco-grid h3{font-size:19px;color:#fff} .eco-grid p{font-size:14.5px;color:var(--on-dark-muted);line-height:1.55} /* ================= stories ================= */ .rating{display:flex;align-items:center;gap:12px;margin-bottom:30px;font-size:15px;color:var(--muted)} .rating b{font-family:var(--serif);font-size:23px;color:var(--ink)} .stars{color:var(--coral);letter-spacing:2px} .stories{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .story{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column} .story .mark{font-family:var(--serif);font-size:52px;line-height:.6;color:var(--coral);opacity:.5;margin-bottom:14px} .story .quote{font-family:var(--serif);font-size:19px;line-height:1.5} .story .by{margin-top:auto;padding-top:24px;display:flex;align-items:center;gap:13px} .story .by .ph{width:46px;height:46px;border-radius:50%;flex:none} .story .by strong{display:block;font-size:15px} .story .by span{font-size:13.5px;color:var(--muted)} /* ================= library ================= */ .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .post{display:flex;flex-direction:column;gap:14px} .post .ph{aspect-ratio:16/10;border-radius:var(--r)} .post time{font-size:13.5px;color:var(--muted)} .post h3{font-size:20.5px;line-height:1.3} .post p{font-size:14.5px;color:var(--muted)} .post .read{margin-top:auto;padding-top:6px;font-weight:600;font-size:14.5px;color:var(--indigo)} /* ================= assurance ================= */ .assure{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;display:grid;grid-template-columns:290px 1fr;gap:44px;align-items:center} .assure h3{font-size:22px} .assure > div > p{font-size:14.8px;color:var(--muted);margin-top:9px} .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .badge{display:flex;align-items:center;gap:8px;border:1px solid var(--line-cool);border-radius:12px;padding:10px 15px;font-size:13.5px;font-weight:600} .badge svg{color:var(--sage)} .insurers{display:flex;flex-wrap:wrap;gap:9px} .insurers span{padding:9px 16px;border:1px solid var(--line-cool);border-radius:99px;font-size:13.5px;color:var(--muted)} /* ================= closing band ================= */ .band{background:#18214E;color:#fff;border-radius:var(--r-xl);padding:0;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch} .band-copy{padding:56px} .band h2{font-size:clamp(28px,3.1vw,40px);color:#fff;max-width:18ch} .band p{margin-top:14px;color:#C9CDF2;max-width:44ch;font-size:16.5px} .band-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px} .band .btn-line{background:transparent;border-color:rgba(255,255,255,.42);color:#fff} .band .btn-line:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff} .band .ph{height:100%;min-height:300px} /* ================= footer ================= */ footer.site{background:var(--indigo-ink);color:var(--on-dark-muted);padding-block:66px 28px;margin-top:92px} .foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px} footer.site h4{font-family:var(--sans);font-size:14px;font-weight:700;color:#fff;margin-bottom:16px} footer.site ul{display:grid;gap:10px;font-size:14.5px} footer.site a:hover{color:#fff} .foot-contact{margin-top:20px;font-size:14.5px;line-height:1.65} .foot-contact b{color:#fff;display:block;font-size:18px;font-family:var(--serif);margin-top:12px} .socials{display:flex;gap:10px;margin-top:20px} .socials a{width:38px;height:38px;border-radius:11px;border:1px solid rgba(239,241,248,.22);display:grid;place-items:center} .socials a:hover{border-color:#fff;color:#fff} .apps{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap} .apps a{display:flex;align-items:center;gap:9px;border:1px solid rgba(239,241,248,.22);border-radius:12px;padding:9px 15px;font-size:12.5px;line-height:1.2} .apps a:hover{border-color:#fff} .apps b{display:block;font-size:14px;color:#fff;font-weight:600} .foot-end{margin-top:50px;padding-top:22px;border-top:1px solid rgba(239,241,248,.16);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px} .foot-end nav{display:flex;gap:20px;flex-wrap:wrap} /* ================= floating actions ================= */ .float{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;flex-direction:column;gap:11px} .float a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-l);transition:transform .18s ease} .float a:hover{transform:translateY(-3px)} .float .wa{background:#25D366} .float .tel{background:var(--indigo)} .mobile-bar{display:none} /* ================= responsive ================= */ @media (max-width:1180px){ nav.main{display:none} .burger{display:block;order:3} .head-actions .btn-line{display:none} } @media (max-width:1080px){ .hero-grid{grid-template-columns:1fr;gap:44px} .hero-art{max-width:460px;margin-inline:auto;width:100%} .float-card.a{left:0} .float-card.b{right:0} .promise,.coe,.doctors,.places,.eco-grid,.stories,.posts{grid-template-columns:1fr 1fr} .spec-grid{grid-template-columns:repeat(3,1fr)} .book-grid{grid-template-columns:1fr;gap:38px} .assure{grid-template-columns:1fr;gap:26px} .band{grid-template-columns:1fr} .band .ph{min-height:220px;order:-1} .video-band .overlay{padding:36px} } @media (max-width:760px){ body{font-size:16px;padding-bottom:64px} .wrap{padding-inline:18px} .sec{padding-block:60px} .util .wrap{justify-content:center;gap:14px} .util .hours,.util a:not(.call){display:none} .promise,.coe,.doctors,.places,.eco-grid,.stories,.posts,.split,.spec-grid,.form-grid{grid-template-columns:1fr} .sec-head.row{flex-direction:column;align-items:flex-start;gap:16px} .hero{padding-top:34px} .float-card.a,.float-card.b{position:static;margin-top:12px;max-width:none} .hero-art .ph{aspect-ratio:4/3;border-radius:var(--r-lg)} .search-band{padding:22px;margin-top:40px} .results{left:20px;right:20px} .video-band .overlay{position:static;background:var(--indigo-ink);padding:30px 24px} .video-band .ph{aspect-ratio:16/9} .form-card,.panel{padding:24px} .band-copy{padding:32px 26px} .foot{grid-template-columns:1fr;gap:32px} .float{display:none} .mobile-bar{display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:80;background:var(--paper);border-top:1px solid var(--line-cool)} .mobile-bar a{display:flex;align-items:center;justify-content:center;gap:7px;padding:17px 6px;font-size:14.5px;font-weight:600;border-right:1px solid var(--line-cool)} .mobile-bar a:last-child{border-right:0;background:var(--coral);color:#fff} } /* mobile mega menu becomes an accordion */ @media (max-width:1180px){ nav.main.open{ display:block;position:absolute;top:100%;left:0;right:0;background:var(--paper); border-bottom:1px solid var(--line-cool);box-shadow:var(--shadow-l); padding:12px;max-height:76vh;overflow:auto; } nav.main.open .nav-item{display:block;border-bottom:1px solid var(--line-cool)} nav.main.open .nav-item:last-child{border-bottom:0} nav.main.open .nav-link{width:100%;justify-content:space-between;padding:16px 12px;font-size:16px;color:var(--ink)} nav.main.open .mega{ position:static;box-shadow:none;border:0;padding:0 12px 20px;border-radius:0; } nav.main.open .mega-grid{grid-template-columns:1fr;gap:22px} nav.main.open .mega-feature{display:none} nav.main.open .mega-foot{margin-top:18px} } /* ---------- hero ---------- */ .hero{ /*padding: 64px 64px;*/ border-bottom: 1px solid var(--line); background-image: url(https://webs.hashtagit.in/pacificonehealth/image/2111.jpg); width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .hero-grid{display:grid;grid-template-columns:1.25fr .50fr;gap:64px;align-items:start} .hero h1{font-size:clamp(38px,4.6vw,58px);max-width:15ch;letter-spacing:-.022em} .hero .lede{margin-top:20px;font-size:18.5px;color:var(--muted);max-width:52ch} /* search */ .search{margin-top:410px;position:relative;max-width:620px} .search-box{display:flex;align-items:center;gap:12px;border:1.5px solid var(--ink);border-radius:var(--r);padding:6px 6px 6px 16px;background:var(--paper)} .search-box svg{flex:none;color:var(--muted)} .search-box input{flex:1;border:0;background:none;padding:12px 0;font-size:16.5px;min-width:0} .search-box input:focus{outline:none} .search-box input::placeholder{color:var(--muted)} .results{ position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40; background:var(--paper);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow-lift);max-height:340px;overflow:auto;display:none; } .results.open{display:block} .results li{border-bottom:1px solid var(--line)} .results li:last-child{border-bottom:0} .results button{ width:100%;text-align:left;background:none;border:0;cursor:pointer; padding:13px 16px;display:flex;justify-content:space-between;gap:16px;align-items:center; } .results button:hover,.results button:focus-visible{background:#f4f6fb} .results .kind{font-size:12.5px;color:var(--muted);flex:none} .results .none{padding:16px;color:var(--muted);font-size:15px} .suggests{margin-top:14px;font-size:14.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center} .suggests button{background:none;border:0;cursor:pointer;color:var(--indigo);font-weight:600;font-size:14.5px;border-bottom:1px solid currentColor;padding:0} .hero-figures{display:flex;gap:40px;margin-top:44px;padding:26px 0 40px;} .hero-figures div b{font-family:var(--serif);font-size:32px;font-weight:600;display:block;line-height:1.1;color:#18214E;} .hero-figures div span{font-size:14px;color:#18214E;} /* hero side panel */ .side{background:#f4f6fb;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;margin-bottom:40px;margin-top: 100px;} .side h2{font-size:19px;margin-bottom:4px} .side > p{font-size:14.5px;color:var(--muted)} .side ul{margin-top:18px;display:grid;gap:2px} .side li a{display:block;padding:14px 0;border-top:1px solid var(--line)} .side li strong{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600} .side li span{display:block;font-size:14px;color:var(--muted);margin-top:2px} .open-dot{width:7px;height:7px;border-radius:50%;background:#FF7517;flex:none} .side li a:hover strong{color:var(--indigo)} .side .btn{width:100%;margin-top:20px} /* ---------- why ---------- */ .why{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .why div{padding:28px 26px;border-right:1px solid var(--line)} .why div:last-child{border-right:0} .why svg{color:var(--coral);margin-bottom:14px} .why h3{font-size:18px;margin-bottom:7px} .why p{font-size:14.5px;line-height:1.5} /* ---------- section headings ---------- */ .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:40px} .sec-head h2{font-size:clamp(30px,3.4vw,42px);max-width:17ch} .sec-head p{color:var(--muted);max-width:44ch;font-size:16px} .more{font-weight:600;color:var(--indigo);white-space:nowrap;border-bottom:1.5px solid currentColor;padding-bottom:2px} /* ---------- centres of excellence ---------- */ /* ---------- centres of excellence ---------- */ .coe{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .coe a{ position:relative; isolation:isolate; background:var(--paper); padding:28px 26px; display:flex; flex-direction:column; gap:9px; min-height:170px; overflow:hidden; text-decoration:none; } /* background image layer */ .coe a::before{ content:""; position:absolute; inset:0; z-index:-2; background-image:var(--img); background-size:cover; background-position:center; transform:scale(1.15); opacity:0; filter:saturate(0.9); transition:opacity .5s ease, transform .6s ease; } /* dark gradient overlay so text stays readable */ .coe a::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,15,30,.15) 0%, rgba(10,15,30,.75) 100%); opacity:0; transition:opacity .45s ease; } .coe a h3{ font-size:20px; transition:color .35s ease, transform .35s ease; } .coe a p{ font-size:14.5px; color:var(--muted); line-height:1.5; transition:color .35s ease, opacity .35s ease, transform .35s ease; } .coe .tag{ margin-top:auto; font-size:13px; font-weight:600; color:var(--coral-text); transition:color .35s ease; } /* ---- hover state ---- */ .coe a:hover::before{ opacity:1; transform:scale(1); } .coe a:hover::after{ opacity:1; } .coe a:hover h3{ color:#fff; transform:translateY(-3px); } .coe a:hover p{ color:rgba(255,255,255,.85); transform:translateY(-3px); } .coe a:hover .tag{ color:#FF7517; } /* ---------- specialities ---------- */ .spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .spec-grid a{ display:flex;align-items:center;gap:13px;padding:16px 18px; border:1px solid var(--line);border-radius:var(--r);background:var(--paper); font-size:15px;font-weight:500;line-height:1.35;transition:border-color .16s ease,background .16s ease; } .spec-grid a:hover{border-color:var(--indigo);background:#f4f6fb} .spec-grid .ico{width:34px;height:34px;border-radius:8px;background:var(--coral-soft);display:grid;place-items:center;flex:none;color:var(--coral-text)} .spec-grid a.hidden{display:none} .expand{margin-top:28px;text-align:center} /*.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}*/ /*.spec-grid a{*/ /* display:flex;align-items:center;gap:13px;padding:16px 18px;*/ /* border:1px solid var(--line);border-radius:var(--r);background:var(--paper);*/ /* font-size:15px;font-weight:500;line-height:1.35;transition:border-color .16s ease,background .16s ease;*/ /*}*/ /*.spec-grid a:hover{border-color:var(--indigo);background:#f4f6fb}*/ /*.spec-grid .ico{width:34px;height:34px;border-radius:8px;background:var(--coral-soft);display:grid;place-items:center;flex:none;color:var(--coral-text)}*/ /*.spec-grid a.hidden{display:none}*/ /*.expand{margin-top:28px;text-align:center}*/ /* ---------- doctors ---------- */ .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px} .filters button{ padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--paper); font-size:14.5px;font-weight:500;cursor:pointer;transition:all .14s ease; } .filters button:hover{border-color:var(--muted)} .filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)} .doctors{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .doc{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);display:flex;flex-direction:column} .doc .portrait{ aspect-ratio:4/3;background:var(--tint-2);display:grid;place-items:center; font-family:var(--serif);font-size:34px;font-weight:600;color:var(--indigo);border-bottom:1px solid var(--line); } .doc .body{padding:18px;display:flex;flex-direction:column;flex:1} .doc h3{font-size:17.5px;line-height:1.25} .doc .role{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.45} .doc .site{font-size:13px;color:var(--sea);font-weight:600;margin-top:12px} .doc .btn{margin-top:16px;width:100%} .no-match{grid-column:1/-1;border:1px dashed var(--line);border-radius:var(--r-lg);padding:44px;text-align:center;color:var(--muted)} .no-match strong{display:block;font-family:var(--serif);font-size:20px;color:var(--ink);margin-bottom:6px} /* ---------- presence ---------- */ .places{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .place{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);display:flex;flex-direction:column} .place .cover{aspect-ratio:16/9;background:linear-gradient(135deg,var(--tint-2),#f4f6fb);border-bottom:1px solid var(--line);position:relative} .place .cover svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5;color:var(--indigo)} .place .body{padding:22px;display:flex;flex-direction:column;flex:1;gap:12px} .place h3{font-size:21px} .place address{font-style:normal;font-size:14.5px;color:var(--muted);line-height:1.55} .place .meta{display:flex;gap:7px;flex-wrap:wrap} .place .meta span{font-size:12.5px;padding:4px 10px;border-radius:999px;background:#f4f6fb;border:1px solid var(--line)} .place .row{display:flex;gap:10px;margin-top:auto;padding-top:6px} .place .row .btn{flex:1} /* ---------- ecosystem ---------- */ /*.eco{background:var(--indigo-ink);color:var(--on-dark)}*/ .eco h2{color:#fff} .eco .sec-head p{color: #fff;} .eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border:1px solid rgba(237,240,248,.16);border-radius:var(--r-lg);overflow:hidden} .eco-grid a{background:#18214e80;padding:28px;display:flex;flex-direction:column;gap:8px;transition:background .16s ease} .eco-grid a:hover{background:#1B2040} .eco-grid h3{font-size:19px;color:#fff} .eco-grid p{font-size:14.5px;color:var(--on-dark-muted);line-height:1.5} .eco-grid svg{color:var(--coral);margin-bottom:6px} /* ---------- wellness + telemedicine split ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:20px} .panel{border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;background:var(--paper);display:flex;flex-direction:column} .panel.accent{background:var(--coral-soft);border-color:transparent; box-shadow: 0px 3px 12px 0px #80808063;} .panel h2{font-size:28px} .panel p{color:var(--muted);margin-top:12px;font-size:15.5px;max-width:44ch} .panel.accent p{color:#7A3D25} .panel ul{margin-top:22px;display:grid;gap:12px} .panel li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px} .panel li svg{flex:none;margin-top:4px;color:var(--coral-text)} .panel .btn{margin-top:26px;align-self:flex-start} .price-row{display:flex;align-items:baseline;gap:10px;margin-top:20px} .price-row b{font-family:var(--serif);font-size:34px;font-weight:600} .price-row span{color:var(--muted);font-size:14.5px} /* ---------- stories ---------- */ .stories{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .story{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:var(--paper);display:flex;flex-direction:column} .story .quote{font-family:var(--serif);font-size:18.5px;line-height:1.5} .story .by{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:12px} .story .by i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:600;font-size:14px;flex:none} .story .by strong{display:block;font-size:15px} .story .by span{font-size:13.5px;color:var(--muted)} .rating{display:flex;align-items:center;gap:10px;margin-bottom:28px;font-size:15px;color:var(--muted)} .rating b{font-family:var(--serif);font-size:22px;color:var(--ink)} .stars{color:var(--coral);letter-spacing:2px} .story:hover { background: #18214E; /*color:#fff;*/ } .story .by i:hover { background: #fff; color: #18214E; } /* ---------- library ---------- */ .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .post{padding-top:20px;display:flex;flex-direction:column;gap:10px} .post time{font-size:13.5px;color:var(--muted)} .post h3{font-size:21px;line-height:1.28;border-bottom: 2px solid var(--ink); padding-bottom: 10px;} .post p{font-size:14.5px;color:var(--muted)} .post .read{margin-top:auto;padding-top:12px;font-weight:600;font-size:14.5px;color:var(--indigo)} article.post:hover { color: #FF7517; } /* ---------- closing band ---------- */ .band{background:var(--indigo);color:#fff;border-radius:var(--r-lg);padding:52px;display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center} .band h2{font-size:clamp(27px,3vw,36px);color:#fff;max-width:20ch} .band p{margin-top:12px;color:#C9CDF2;max-width:48ch;font-size:16.5px} .band-actions{display:flex;gap:12px;flex-wrap:wrap} .band .btn-line{background:transparent;border-color:rgba(255,255,255,.4);color:#fff} .band .btn-line:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff} .band .btn-coral{color:#fff} /* ---------- footer ---------- */ footer.site{background:var(--indigo-ink);color:var(--on-dark-muted);padding-block:64px 28px;margin-top:84px} .foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px} footer.site h4{font-family:var(--sans);font-size:14px;font-weight:700;color:#fff;margin-bottom:16px} footer.site ul{display:grid;gap:10px;font-size:14.5px} footer.site a:hover{color:#fff} .foot-contact{margin-top:20px;font-size:14.5px;line-height:1.6} .foot-contact b{color:#fff;display:block;font-size:17px;font-family:var(--serif);margin-top:12px} .socials{display:flex;gap:10px;margin-top:20px} .socials a{width:36px;height:36px;border-radius:8px;border:1px solid rgba(237,240,248,.22);display:grid;place-items:center;color:var(--on-dark-muted)} .socials a:hover{border-color:#fff;color:#fff} .foot-end{margin-top:48px;padding-top:22px;border-top:1px solid rgba(237,240,248,.16);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px} .foot-end nav{display:flex;gap:20px;flex-wrap:wrap} /* ---------- booking form ---------- */ .book-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start} .book-side h2{font-size:clamp(28px,3.2vw,40px)} .book-side > p{color:var(--muted);margin-top:14px;font-size:16.5px;max-width:40ch} .book-steps{margin-top:30px;display:grid;gap:18px;counter-reset:bs} .book-steps li{display:flex;gap:14px;counter-increment:bs} .book-steps li::before{ content:counter(bs);flex:none;width:28px;height:28px;border-radius:50%; background:var(--tint-2);color:#fff;display:grid;place-items:center; font-weight:700;font-size:13.5px; } .book-steps strong{display:block;font-size:15.5px} .book-steps span{font-size:14.5px;color:var(--muted)} .book-call{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)} .book-call a{font-weight:600;color:#fff;border-bottom:1.5px solid #fff;} .form-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;background:var(--paper);box-shadow:var(--shadow)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .f{display:flex;flex-direction:column;gap:6px;min-width:0} .f.full{grid-column:1/-1} .f label{font-size:13.5px;font-weight:600;color:var(--muted)} .f input,.f select{ padding:12px 14px;border:1px solid var(--line);border-radius:var(--r); background:var(--paper);font-size:15.5px;width:100%; } .f select{appearance:none;cursor:pointer;padding-right:38px; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 13px center;} .f input:focus,.f select:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--tint-2)} .f .err{font-size:13px;color:var(--coral-text);display:none} .f.invalid input,.f.invalid select{border-color:var(--coral)} .f.invalid .err{display:block} .slots{display:flex;gap:8px;flex-wrap:wrap} .slots button{ padding:9px 14px;border-radius:var(--r);border:1px solid var(--line); background:var(--paper);font-size:14.5px;cursor:pointer;transition:all .14s ease; } .slots button:hover{border-color:var(--indigo)} .slots button[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff} .form-foot{display:flex;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap} .form-foot p{font-size:13.5px;color:var(--muted);flex:1;min-width:200px} .confirmed{text-align:center;padding:24px 0} .confirmed .tick{width:56px;height:56px;border-radius:50%;background:var(--coral-soft);color:var(--coral-text);display:grid;place-items:center;margin:0 auto 18px} .confirmed h3{font-size:24px} .confirmed p{color:var(--muted);margin-top:10px;font-size:15.5px} .confirmed dl{margin:24px auto 0;max-width:340px;display:grid;gap:10px;text-align:left;font-size:15px} .confirmed dl div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:9px} .confirmed dt{color:var(--muted)} .confirmed dd{margin:0;font-weight:600;text-align:right} .confirmed .btn{margin-top:24px} /* ---------- assurance strip ---------- */ .insurers{display:flex;flex-direction:column;gap:10px;overflow:hidden} .marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .marquee-track{ display:flex; gap:30px; width:max-content; } .marquee-track span{ display: flex; align-items: center; gap: 0px; padding: 8px 15px 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 0px; color: var(--muted); background: var(--paper); white-space: nowrap; flex: none; } .marquee-track span img{ width: 155px; height: 80px; border-radius: 10px; /* object-fit: contain; */ flex: none; background: #fff; } .marquee-track span b{ font-weight:500; color:var(--muted); } .marquee-track span.more{ padding:8px 15px; } /* top row: left → right */ .marquee-ltr .marquee-track{ animation:marquee-ltr 50s linear infinite; } @keyframes marquee-ltr{ from{transform:translateX(-50%)} to{transform:translateX(0)} } /* bottom row: right → left */ .marquee-rtl .marquee-track{ animation:marquee-rtl 50s linear infinite; } @keyframes marquee-rtl{ from{transform:translateX(0)} to{transform:translateX(-50%)} } .marquee:hover .marquee-track{ animation-play-state:paused; } @media (prefers-reduced-motion: reduce){ .marquee-track{animation:none} } /* ---------- floating actions ---------- */ .float{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;gap:10px} .float a{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-lift)} .float .wa{background:#25D366} .float .tel{background:var(--indigo)} .float a:hover{transform:translateY(-2px)} .mobile-bar{display:none} /* ---------- app badges ---------- */ .apps{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap} .apps a{display:flex;align-items:center;gap:9px;border:1px solid rgba(237,240,248,.22);border-radius:var(--r);padding:9px 14px;font-size:13px;line-height:1.2} .apps a:hover{border-color:#fff} .apps b{display:block;font-size:14px;color:#fff;font-weight:600} @media (max-width:1080px){ .book-grid{grid-template-columns:1fr;gap:36px} .assure{grid-template-columns:1fr;gap:26px} } @media (max-width:680px){ body{padding-bottom:64px} .form-grid{grid-template-columns:1fr} .form-card{padding:22px} .float{display:none} .mobile-bar{ display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:80; background:var(--paper);border-top:1px solid var(--line); } .mobile-bar a{ display:flex;align-items:center;justify-content:center;gap:7px;padding:16px 6px; font-size:14.5px;font-weight:600;border-right:1px solid var(--line); } .mobile-bar a:last-child{border-right:0;background:var(--indigo);color:#fff} } /* ---------- responsive ---------- */ @media (max-width:1080px){ .hero-grid{grid-template-columns:1fr;gap:40px} .side{margin-bottom:0} .hero-figures{padding-bottom:44px} .why{grid-template-columns:1fr 1fr} .why div:nth-child(2){border-right:0} .why div:nth-child(1),.why div:nth-child(2){border-bottom:1px solid var(--line)} .coe,.doctors,.places,.eco-grid,.stories,.posts{grid-template-columns:1fr 1fr} .spec-grid{grid-template-columns:repeat(3,1fr)} } @media (max-width:860px){ nav.main{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--paper);border-bottom:1px solid var(--line);padding:10px;box-shadow:var(--shadow)} nav.main.open{display:flex} nav.main a{padding:13px} .burger{display:block;order:3} header.site .wrap{position:relative;gap:14px} .head-actions .btn-line{display:none} .util a:not(.call){display:none} .util .hours{display:none} } @media (max-width:680px){ body{font-size:16px} .wrap{padding-inline:18px} .sec{padding-block:56px} .hero{padding-top:40px} .hero-figures{gap:26px;flex-wrap:wrap} .why,.coe,.doctors,.places,.eco-grid,.stories,.posts,.split,.spec-grid{grid-template-columns:1fr} .why div{border-right:0;border-bottom:1px solid var(--line)} .why div:last-child{border-bottom:0} .sec-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:28px} .band{grid-template-columns:1fr;padding:32px 26px} .panel{padding:26px} .foot{grid-template-columns:1fr;gap:32px} } .sec-tint { background: #f4f6fb!important; } /* HEADER */ /* FILTERS */ .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 25px; } .filter { border: 1px solid #d8dfec; background: #fff; color: #071b4d; padding: 9px 15px; border-radius: 25px; font-size: 12px; cursor: pointer; } .filter.active { background: #071b4d; color: #fff; border-color: #071b4d; } /* DOCTORS GRID */ .doctors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; } /* CARD */ .doctor-card { border: 1px solid #dbe1ed; border-radius: 13px; overflow: hidden; background: #fff; } /* TOP IMAGE / INITIALS AREA */ .doctor-image { height: 170px; background: #e9edf7; display: flex; align-items: center; justify-content: center; } .doctor-image span { color: #122e72; font-family: Georgia, "Times New Roman", serif; font-size: 28px; } /* CONTENT */ .doctor-content { padding: 15px; } .doctor-content h3 { margin: 0 0 7px; color: #071b4d; line-height: 1.4; text-align: center; } .doctor-content h3 small { color: #163f8b; /*font-family: Arial, sans-serif;*/ font-size: 10px; font-weight: 400; } .designation { min-height: 40px; margin: 0 0 10px; color: #657395; font-size: 13px; line-height: 1.5; text-align: center; } .location { margin: 0 0 15px; font-size: 12px; font-weight: 600; text-align: center; } /* BUTTON */ .consult-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 36px; border: 1px solid #d8dfec; border-radius: 8px; color: #071b4d; background: #fff; text-decoration: none; font-size: 11px; font-weight: 600; transition: all .3s ease; } .consult-btn:hover { background: #071b4d; color: #fff; border-color: #071b4d; } /* TABLET */ @media (max-width: 991px) { .doctors { grid-template-columns: repeat(2, 1fr); } .sec-head { gap: 20px; } } /* MOBILE */ @media (max-width: 767px) { .sec { padding: 35px 0; } .sec-head { display: block; margin-bottom: 20px; } .sec-head h2 { font-size: 28px; margin-bottom: 15px; } .sec-head p { max-width: 100%; } .filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; } .filter { flex: 0 0 auto; white-space: nowrap; } .doctors { grid-template-columns: 1fr; gap: 15px; } .doctor-image { height: 150px; } } .footlogo img{ width: 330px; } .iconmg img{ width: 20%; border-radius: 10px; } .cover img { width:100%; height: 100%; } /* ---------- photo slots ---------- Replace each .ph with an at the same aspect ratio. data-shot describes the photograph that belongs there. */ .ph{position:relative;overflow:hidden; /*background:linear-gradient(140deg,#FCE6DA 0%,#F6E7F1 45%,#E4ECFB 100%);*/ display:grid;place-items:center} .ph::before{content:"";position:absolute;width:150%;height:150%; /*background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.7),transparent 42%),radial-gradient(circle at 78% 76%,rgba(255,255,255,.5),transparent 40%)*/ } .ph svg{position:relative;color:rgba(22,32,60,.28)} /*.ph[data-shot]:not([data-shot=""])::after{content:attr(data-shot);position:absolute;left:12px;bottom:12px;z-index:2;background:rgba(255,255,255,.88);color:#4A5372;font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:99px}*/ .ph-cool{background:linear-gradient(140deg,#E2EBFB 0%,#EDE7F7 50%,#FBE7DC 100%)} .ph-sage{background:linear-gradient(140deg,#DFEFE9 0%,#EAF0FA 55%,#FBEDE4 100%)} /*.ph-sage{*/ /* background-image: url('https://webs.hashtagit.in/pacificonehealth/image/cnetre-banner.png');*/ /* background-size: cover;*/ /* background-position: center;*/ /* background-repeat: no-repeat;*/ /*}*/ .why div:hover { background: #fff9f6; /*color:#fff;*/ } /* ---------- page banner ---------- */ .banner{position:relative;display:flex;align-items:flex-end;overflow:hidden;min-height:430px} .banner.tall{min-height:520px} .banner .ph{position:absolute;inset:0} .banner .ph::after{bottom:auto;top:16px;left:16px} .banner .veil{position:absolute;inset:0;z-index:2; /*background:linear-gradient(180deg,rgba(21,26,56,.62) 0%,rgba(21,26,56,.3) 36%,rgba(21,26,56,.9) 100%)*/ } .banner .wrap{position:relative;z-index:3;padding-block:40px 50px;color:#fff} .banner h1{font-size:clamp(34px,4.6vw,58px);color:#fff;margin-top:16px;letter-spacing:-.024em;max-width:17ch} .banner .lede{margin-top:16px;font-size:17.5px;color:rgba(255,255,255,.86);max-width:52ch} .banner .cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap} .banner .pill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);color:#fff;font-size:13.5px;font-weight:600;padding:7px 15px;border-radius:99px;backdrop-filter:blur(6px)} .banner .pill i{width:7px;height:7px;border-radius:50%;background:#4ADE80;flex:none;font-style:normal} /* light banner variant, for listing pages */ .hero-light{background:var(--blush);padding-block:44px 56px;border-bottom:1px solid var(--line)} .hero-light h1{font-size:clamp(34px,4.4vw,54px);margin-top:14px;letter-spacing:-.024em;max-width:18ch} .hero-light .lede{margin-top:16px;font-size:18px;color:var(--muted);max-width:56ch} /* ---------- breadcrumb ---------- */ .crumb{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:13.5px} .crumb svg{opacity:.6} .banner .crumb{color:rgba(255,255,255,.78);margin-bottom:22px} .banner .crumb a:hover{color:#fff} .banner .crumb [aria-current]{color:#fff;font-weight:600} .hero-light .crumb{color:var(--muted)} .hero-light .crumb a:hover{color:var(--indigo)} .hero-light .crumb [aria-current]{color:var(--ink);font-weight:600} /* ---------- stat rail ---------- */ .rail{margin-top:-44px;position:relative;z-index:20} .rail-inner{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-l);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden} .rail-inner.five{grid-template-columns:repeat(5,1fr)} .rail-inner div{padding:24px 26px;border-right:1px solid var(--line-cool)} .rail-inner div:last-child{border-right:0} .rail-inner b{font-family:var(--serif);font-size:30px;font-weight:600;display:block;line-height:1.1} .rail-inner span{font-size:13.5px;color:var(--muted)} /* ---------- sticky sub nav ---------- */ .subnav{position:sticky;top:80px;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-cool)} .subnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;align-items:center} .subnav .wrap::-webkit-scrollbar{display:none} .subnav a{padding:17px 14px;font-size:14.8px;font-weight:500;color:#fff);white-space:nowrap;border-bottom:2px solid transparent} .subnav a:hover{color:#fff)} .subnav a.active{color:var(--coral-text);border-bottom-color:var(--coral);font-weight:600} .subnav .book{margin-left:auto;padding-block:9px;border-bottom:0} /* ---------- section heads ---------- */ .kicker{display:inline-block;font-size:13px;font-weight:700;color:var(--coral-text);margin-bottom:12px} .sec-head{max-width:100%!important;margin-bottom:44px} .sec-head.row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:44px} .sec-head h2{font-size:clamp(28px,3.3vw,41px)} .sec-head p{color:var(--muted);margin-top:14px;font-size:16.5px} .more{font-weight:600;color:var(--indigo);white-space:nowrap} .more:hover{color:var(--coral-text)} /* ---------- prose + side ---------- */ .two-col{display:grid; grid-template-columns: 0.35fr 0.65fr;gap:56px;align-items:start} .prose p{color:var(--muted);margin-bottom:18px;font-size:16.8px} .prose p:last-child{margin-bottom:0} .prose strong{color:var(--ink)} .pull{border-left:3px solid var(--coral);padding:4px 0 4px 22px;margin:26px 0;font-family:var(--serif);font-size:20px;line-height:1.45;color:var(--ink)} .side-box{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;background:var(--sand)} .side-box.cool{background:var(--sky);border-color:var(--line-cool)} .side-box h3{font-size:19px;margin-bottom:16px} .side-box li{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;align-items:flex-start} .side-box li:last-child{border-bottom:0} .side-box svg{flex:none;margin-top:4px;color:var(--sage)} .side-box .btn{margin-top:18px} /* ---------- chip lists (conditions, expertise) ---------- */ .chips{display:flex;flex-wrap:wrap;gap:10px} .chips span,.chips a{display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:11px 18px;font-size:14.8px;font-weight:500} .chips a:hover{border-color:var(--coral);color:var(--coral-text)} .chips .dot{width:6px;height:6px;border-radius:50%;background:var(--coral);flex:none} .chips .hidden{display:none} .expand{margin-top:28px;text-align:center} /* ---------- generic card grids ---------- */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:10px} .card .ic{width:48px;height:48px;border-radius:14px;background:var(--sky);color:var(--indigo);display:grid;place-items:center;margin-bottom:6px} .card:nth-child(3n+2) .ic{background:var(--coral-soft);color:var(--coral-text)} .card:nth-child(3n) .ic{background:var(--sage-soft);color:var(--sage)} .card h3{font-size:20px} .card p{font-size:14.8px;color:var(--muted);line-height:1.55} .card .meta{margin-top:auto;padding-top:12px;font-size:13.5px;font-weight:600;color:var(--sage)} .card-media{padding:0;overflow:hidden} /*.card-media .ph{aspect-ratio:16/9}*/ .card-media .body{padding:24px;display:flex;flex-direction:column;gap:9px;flex:1} /* ---------- doctor cards ---------- */ .filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px} .filters button{padding:9px 17px;border-radius:99px;border:1px solid var(--line-cool);background:var(--paper);font-size:14.5px;font-weight:500;cursor:pointer;transition:all .14s ease} .filters button:hover{border-color:var(--muted)} .filters button[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff} .doctors{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .doctors.cols-3{grid-template-columns:repeat(3,1fr)} .doc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease} .doc:hover{box-shadow:var(--shadow-l)} .doc .ph{aspect-ratio:1/1} .doc .body{padding:20px;display:flex;flex-direction:column;flex:1} .doc h3{font-size:17.5px;line-height:1.3} .doc .honour{display:inline-block;font-size:11px;font-weight:700;color:var(--coral-text);background:var(--coral-soft);padding:2px 8px;border-radius:99px;margin-left:5px;vertical-align:middle} .doc .role{font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.45} .doc .line{margin-top:12px;font-size:13.5px;color:var(--muted);display:flex;gap:8px;align-items:flex-start} .doc .line svg{flex:none;margin-top:3px;color:var(--sage)} .doc .btn{margin-top:16px;width:100%} .no-match{grid-column:1/-1;border:1px dashed var(--line-cool);border-radius:var(--r-lg);padding:46px;text-align:center;color:var(--muted)} .no-match strong{display:block;font-family:var(--serif);font-size:21px;color:var(--ink);margin-bottom:8px} /* ---------- doctor profile header ---------- */ .profile{display:grid;grid-template-columns:330px 1fr;gap:48px;align-items:start;padding-block:48px} .profile .portrait{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)} .profile .portrait .ph{aspect-ratio:4/5} .profile h1{font-size:clamp(31px,3.7vw,45px);margin-top:14px;letter-spacing:-.02em} .profile .honour{display:inline-block;font-size:12px;font-weight:700;color:var(--coral-text);background:var(--coral-soft);padding:3px 11px;border-radius:99px;margin-left:8px;vertical-align:middle} .profile .role{font-size:18px;color:var(--muted);margin-top:12px;max-width:46ch} .profile .quals{margin-top:14px;font-size:15px;color:var(--ink);font-weight:600} .profile .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .profile .facts div{padding:18px 22px 18px 0;border-right:1px solid var(--line)} .profile .facts div:last-child{border-right:0} .profile .facts b{font-family:var(--serif);font-size:24px;font-weight:600;display:block;line-height:1.15} .profile .facts span{font-size:13px;color:var(--muted)} .profile .cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap} /* sticky booking card */ .book-card{position:sticky;top:110px;border:1px solid var(--line-cool);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--shadow-l);padding:26px} .book-card h3{font-size:19px;margin-bottom:6px} .book-card > p{font-size:14px;color:var(--muted)} .book-card .fee{display:flex;align-items:baseline;gap:9px;margin:18px 0;padding-bottom:18px;border-bottom:1px solid var(--line-cool)} .book-card .fee b{font-family:var(--serif);font-size:30px;font-weight:600} .book-card .fee span{font-size:13.5px;color:var(--muted)} .book-card .slot-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-cool);font-size:14.5px} .book-card .slot-row:last-of-type{border-bottom:0} .book-card .slot-row span{color:var(--muted)} .book-card .slot-row b{font-weight:600} .book-card .btn{margin-top:18px} .book-card .note{margin-top:14px;font-size:13px;color:var(--muted);text-align:center} /* ---------- schedule table ---------- */ .schedule{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)} .schedule th{text-align:left;padding:14px 22px;background:var(--sand);font-size:13px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line)} .schedule td{padding:15px 22px;border-bottom:1px solid var(--line);font-size:15px} .schedule tr:last-child td{border-bottom:0} .schedule td:first-child{font-weight:600} .schedule .off{color:var(--muted)} .schedule tr.now{background:var(--sage-soft)} .schedule tr.now td{color:var(--sage);font-weight:600} /* ---------- credentials list ---------- */ .creds{display:grid;gap:0;border-left:2px solid var(--line)} .creds li{padding:0 0 26px 26px;position:relative} .creds li:last-child{padding-bottom:0} .creds li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--coral);border:3px solid var(--paper)} .creds .yr{font-size:13px;font-weight:700;color:var(--coral-text)} .creds h4{font-family:var(--serif);font-size:18px;margin:4px 0 4px} .creds p{font-size:14.8px;color:var(--muted)} /* ---------- timeline / steps ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:st} .step{counter-increment:st;display:flex;flex-direction:column;gap:12px} .step .n{width:38px;height:38px;border-radius:50%;background:var(--coral-soft);color:var(--coral-text);display:grid;place-items:center;font-weight:700;font-size:15px;font-family:var(--serif)} .step .n::before{content:counter(st)} .step h3{font-size:19px} .step p{font-size:14.8px;color:var(--muted);line-height:1.55} /* ---------- listing toolbar (all doctors / all specialities) ---------- */ .toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:26px} .searchbox{flex:1;min-width:260px;display:flex;align-items:center;gap:12px;border:1.5px solid var(--line-cool);border-radius:99px;padding:4px 6px 4px 20px;background:var(--paper)} .searchbox svg{flex:none;color:var(--muted)} .searchbox input{flex:1;border:0;background:none;padding:12px 0;font-size:16px;min-width:0} .searchbox input:focus{outline:none} .select{position:relative} .select select{appearance:none;padding:13px 40px 13px 18px;border:1px solid var(--line-cool);border-radius:99px;background:var(--paper);font-size:15px;cursor:pointer; background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 16px center} .select select:hover{border-color:var(--muted)} .result-line{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:24px;font-size:15px;color:var(--muted)} .result-line b{color:var(--ink)} .clear{background:none;border:0;color:var(--coral-text);font-weight:600;cursor:pointer;font-size:14.5px} /* A–Z index */ .az{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:26px} .az button{width:36px;height:36px;border-radius:10px;border:1px solid var(--line-cool);background:var(--paper);font-size:14px;font-weight:600;cursor:pointer;color:var(--muted)} .az button:hover:not(:disabled){border-color:var(--indigo);color:var(--indigo)} .az button[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff} .az button:disabled{opacity:.35;cursor:not-allowed} /* tabs */ .tabs{display:flex;gap:8px;border-bottom:1px solid var(--line-cool);margin-bottom:34px;overflow-x:auto;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tabs button{padding:15px 20px;background:none;border:0;border-bottom:2px solid transparent;font-size:16px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap} .tabs button:hover{color:var(--ink)} .tabs button[aria-selected="true"]{color:var(--coral-text);border-bottom-color:var(--coral)} /* speciality group listing */ .group{margin-bottom:46px} .group:last-child{margin-bottom:0} .group > h3{font-size:23px;margin-bottom:6px} .group > p{font-size:15px;color:var(--muted);margin-bottom:22px} .spec-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .spec-item{display:flex;gap:15px;align-items:flex-start;background:var(--paper);border:1px solid var(--line-cool);border-radius:var(--r);padding:18px 20px;transition:border-color .16s ease,box-shadow .16s ease} .spec-item:hover{border-color:var(--coral);box-shadow:var(--shadow-s)} .spec-item .ic{width:38px;height:38px;border-radius:11px;background:var(--sky);color:var(--indigo);display:grid;place-items:center;flex:none} .spec-item:nth-child(3n+2) .ic{background:var(--coral-soft);color:var(--coral-text)} .spec-item:nth-child(3n) .ic{background:var(--sage-soft);color:var(--sage)} .spec-item strong{display:block;font-size:15.5px;line-height:1.35} .spec-item span{display:block;font-size:13.5px;color:var(--muted);margin-top:4px} .spec-item.hidden{display:none} /* centre cards */ .centres{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .centre{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;transition:box-shadow .2s ease} .centre:hover{box-shadow:var(--shadow-l)} .centre .ph{width:190px;flex:none} .centre .body{padding:26px;display:flex;flex-direction:column;gap:9px} .centre h3{font-size:21px} .centre p{font-size:14.5px;color:var(--muted);line-height:1.55} .centre .lead{margin-top:auto;padding-top:12px;font-size:13.5px;font-weight:600;color:var(--coral-text)} .centre.hidden{display:none} /* ---------- outcomes ---------- */ .outcomes{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .outcome{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px} .outcome b{font-family:var(--serif);font-size:40px;font-weight:600;display:block;line-height:1;color:var(--coral-text)} .outcome strong{display:block;font-size:15.5px;margin-top:12px} .outcome span{font-size:14px;color:var(--muted);display:block;margin-top:5px;line-height:1.5} /* ---------- stories ---------- */ .stories{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .story{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column} .story .mark{font-family:var(--serif);font-size:52px;line-height:.6;color:var(--coral);opacity:.5;margin-bottom:14px} .story .quote{font-family:var(--serif);font-size:18.5px;line-height:1.5} .story .by{margin-top:auto;padding-top:24px;display:flex;align-items:center;gap:13px} .story .by .ph{width:46px;height:46px;border-radius:50%;flex:none} .story .by strong{display:block;font-size:15px} .story .by span{font-size:13.5px;color:var(--muted)} .rating{display:flex;align-items:center;gap:12px;margin-bottom:28px;font-size:15px;color:var(--muted)} .rating b{font-family:var(--serif);font-size:23px;color:var(--ink)} .stars{color:var(--coral);letter-spacing:2px} /* ---------- FAQ ---------- */ /*.faq{max-width:860px;display:grid;gap:12px}*/ /*.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}*/ /*.faq summary{padding:20px 24px;cursor:pointer;font-weight:600;font-size:16.5px;display:flex;justify-content:space-between;gap:20px;align-items:center;list-style:none}*/ /*.faq summary::-webkit-details-marker{display:none}*/ /*.faq summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);flex:none;transition:transform .2s ease;margin-top:-4px}*/ /*.faq details[open]{border-color:var(--coral)}*/ /*.faq details[open] summary::after{transform:rotate(225deg);margin-top:2px}*/ /*.faq .body{padding:0 24px 22px;color:var(--muted);font-size:15.5px;max-width:70ch}*/ .faq{ max-width:100%; display:grid; grid-template-columns:repeat(2, 1fr); gap:12px 20px; align-items:start; } .faq-column{ display:grid; gap:12px; align-content:start; } .faq details{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); } .faq summary{ padding:20px 24px; cursor:pointer; font-weight:600; font-size:16.5px; display:flex; justify-content:space-between; gap:20px; align-items:center; list-style:none; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:""; width:10px; height:10px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); flex:none; transition:transform .2s ease; margin-top:-4px; } .faq details[open]{ border-color:var(--coral); } .faq details[open] summary::after{ transform:rotate(225deg); margin-top:2px; } .faq .body{ padding:0 24px 22px; color:var(--muted); font-size:15.5px; max-width:70ch; } /* Mobile */ @media(max-width:768px){ .faq{ grid-template-columns:1fr; } } /* ---------- where available ---------- */ .where{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .where-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:9px} .where-item h3{font-size:19px} .where-item address{font-style:normal;font-size:14.5px;color:var(--muted);line-height:1.5} .where-item .days{font-size:13.5px;font-weight:600;color:var(--sage);margin-top:4px} .where-item .btn{margin-top:auto;padding-top:0} /* ---------- closing band ---------- */ .band{background:#18214E;color:#fff;border-radius:var(--r-xl);padding:52px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center} .band h2{font-size:clamp(27px,3vw,38px);color:#fff;max-width:20ch} .band p{margin-top:13px;color:#fff;max-width:46ch;font-size:16.5px} .band-actions{display:flex;gap:12px;flex-wrap:wrap} .band .btn-line{background:transparent;border-color:rgba(255,255,255,.42);color:#fff} .band .btn-line:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff} .sgline { display: block!important; } .sgline h2 { max-width: 28ch; } .patient h2 { max-width: 100%; } .by img { width: 50px; height: 50px; border-radius: 50px; } /* ---------- carousel shell ---------- */ .carousel{ position:relative; } .carousel-viewport{ overflow:hidden; } .carousel-track{ display:flex; gap:24px; will-change:transform; transition:transform .6s cubic-bezier(.65,0,.35,1); } .place{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; flex:0 0 calc((100% - 24px*2)/3); } .place .cover{aspect-ratio:16/10;background:#dfe3ee;overflow:hidden} .place .cover img{width:100%;height:100%;object-fit:cover;display:block} .place .body{padding:24px;display:flex;flex-direction:column;flex:1;gap:12px} .place h3{ font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:22px; margin:0; color:#1b2148; } .place address{font-style:normal;font-size:14.5px;color:var(--muted);line-height:1.55} .place .meta{display:flex;gap:8px;flex-wrap:wrap} .place .meta span{ font-size:12.5px; padding:5px 12px; border-radius:var(--r-pill); background:var(--sky); color:var(--indigo); } .place .row{display:flex;gap:10px;margin-top:auto;padding-top:8px} /* ---------- controls ---------- */ .carousel-controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:28px; } .arrow{ width:40px;height:40px; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--ink); cursor:pointer; display:flex;align-items:center;justify-content:center; transition:background .2s ease, border-color .2s ease; flex:0 0 auto; } .arrow:hover{border-color:#c3c8db;background:#f7f8fc} .arrow svg{width:16px;height:16px} .dots{display:flex;gap:8px} .dot{ width:8px;height:8px;border-radius:50%; background:#18214e75; border:none; cursor:pointer; padding:0; transition:background .2s ease, width .2s ease; } .dot[aria-current="true"]{background:#18214E;width:22px;border-radius:99px} .blubck { background: #18214E; } .blubck h2 { color: #fff; } .blubck p { color: #fff; } .blubck strong { color: #fff; } .blubck span { color: #fff; } .wd-100 { width: 100%; } .assure{ border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; display:grid; grid-template-columns:280px 1fr; gap:44px; align-items:center; overflow:hidden; } .assure > div{ min-width:0; } .insurers{ display:flex; flex-direction:column; gap:10px; overflow:hidden; min-width:0; width:100%; } .marquee{ overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .drimg img { width: 100%; /*height: 200px;*/ } .drdetail_img img { width:100%; height: 100%; } /* Google-style reviews */ .greviews{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px; margin-bottom: 20px;} .greviews-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line-cool);margin-bottom:22px} .gscore{display:flex;align-items:center;gap:14px} .gscore .num{font-family:var(--serif);font-size:44px;font-weight:600;line-height:1} .gstars{color:#F5A623;letter-spacing:2px;font-size:16px} .gscore span{display:block;font-size:13.5px;color:#18214E;margin-top:3px} .gsource{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13.5px;color:#18214E)} .gsource .badge{width:34px;height:34px;border-radius:50%;background:var(--sky);color:var(--indigo);display:grid;place-items:center;font-weight:700;font-family:var(--serif);font-size:17px} .greview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .greview{border:1px solid var(--line-cool);border-radius:var(--r);padding:22px;display:flex;flex-direction:column} .greview.hidden{display:none} .greview-top{display:flex;gap:12px;align-items:center;margin-bottom:12px} .greview-top .ph{width:40px;height:40px;border-radius:50%;flex:none} .greview-top strong{display:block;font-size:14.5px} .greview-top span{font-size:12.5px;color:#18214E} .greview .gstars{font-size:14px;margin-bottom:9px} .greview p{font-size:14.5px;color:#18214E;line-height:1.55} .greview .src{margin-top:auto;padding-top:14px;font-size:12.5px;color:#18214E)} .greviews-foot{margin-top:22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap} .greviews-foot p{font-size:14px;color:#18214E;flex:1;min-width:220px} /* feedback strip */ .pc-feedback{ background:var(--coral-soft);border-radius:var(--r-lg);padding:32px 36px; display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center; } .pc-feedback h3{font-size:24px} .pc-feedback p{font-size:15.5px;color:#8A4A2E;margin-top:8px;max-width:52ch} .pc-feedback .actions{display:flex;gap:12px;flex-wrap:wrap} @media (max-width:1080px){ .pc-features,.pc-media{grid-template-columns:1fr} .pc-tiles{grid-template-columns:1fr 1fr} .greview-grid{grid-template-columns:1fr 1fr} } @media (max-width:760px){ .pc-tiles,.pc-videos,.greview-grid{grid-template-columns:1fr} .pc-block{padding:22px} .greviews{padding:22px} .pc-feedback{grid-template-columns:1fr;padding:26px} .gsource{margin-left:0} } /* ---------- find us: address + numbers + map ---------- */ .findus{ display:grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr); /*background:var(--paper);border:1px solid var(--line);*/ /*border-radius:var(--r-lg);*/ overflow:hidden; /*box-shadow:var(--shadow-s);*/ } .wrap-find { max-width: 1518px; } .findus-info{padding:60px 70px 60px 120px;display:flex;flex-direction:column} .findus-info .where-label{font-size:13px;font-weight:700;color:#fff;margin-bottom:0px} .findus-info h3{font-size:26px;color:#fff;} .findus-info address{font-style:normal;font-size:14px;color:#18214E;line-height:1.6;margin-top:2px;} .findus-meta{display:grid;gap:11px;margin-top:20px} .findus-meta div{display:flex;gap:11px;align-items:flex-start;font-size:14.8px;color:var(--muted)} .findus-meta svg{flex:none;margin-top:4px;color:var(--sage)} .findus-meta b{color:var(--ink);font-weight:600} .findus-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:18px} .btn-smm { padding: 4px 18px; font-size: 14px; } /* contact numbers, pinned to the bottom of the left column */ .findus-numbers{ margin-top:0px;padding-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:14px; } .numcard{ border:1px solid #FF7517;border-radius:var(--r);padding:10px 20px; display:flex;flex-direction:column;gap:4px;transition:border-color .16s ease,box-shadow .16s ease;background:#fff; } .numcard:hover{ /*border-color:var(--indigo);*/ box-shadow:var(--shadow-s)} .numcard .top{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:#FF7517;} .numcard .top .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--sky);color:var(--indigo);flex:none} .numcard b{ font-size: 24px; font-weight: 500; letter-spacing: -.01em; margin-top: 0px;} .numcard span{font-size:13px;color:#5e6a8a;} .numcard.urgent{background:#fff5f0;} .numcard.urgent .top{color:var(--coral-text)} .numcard.urgent .top .ic{background:var(--coral);color:#fff} .numcard.urgent span{color:#5e6a8a} .numcard.urgent:hover{border-color:var(--coral)} .mg-bt { margin-bottom: -88px; } /* ========================================= TOP HEADER ABOUT US DROPDOWN ========================================= */ .util-nav-item { position: relative; height: 100%; display: flex; align-items: center; } /* About Us button */ .util-nav-link { border: 0; background: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 5px; font: inherit; color: inherit; cursor: pointer; } .util-nav-link svg { transition: transform .25s ease; } /* ========================================= MEGA DROPDOWN ========================================= */ .util-mega { position: absolute; top: calc(100% + 18px); right: -20px; width: 850px; background: var(--paper, #fff); border: 1px solid var(--line, #e5e5e5); border-radius: var(--r, 14px); box-shadow: 0 20px 50px rgba(0,0,0,.14); padding: 28px 30px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; z-index: 9999; } /* Small invisible bridge */ .util-nav-item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px; } /* ========================================= GRID ========================================= */ .util-mega-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.25fr; gap: 30px; } /* ========================================= HEADINGS ========================================= */ .util-mega h4 { margin: 0 0 13px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #777; } /* ========================================= LINKS ========================================= */ .util-mega ul { list-style: none; padding: 0; margin: 0; } .util-mega li { margin: 0; padding: 0; } .util-mega li a { display: block; padding: 6px 0; color: #222; text-decoration: none; font-size: 13px; line-height: 1.45; transition: color .2s ease, padding-left .2s ease; } .util-mega li a:hover { color: #d86f3d; padding-left: 5px; } /* ========================================= FEATURE BOX ========================================= */ .util-mega-feature { padding-left: 25px; border-left: 1px solid var(--line, #e5e5e5); } .util-ph { width: 54px; height: 54px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #eef5f1; margin-bottom: 14px; } .util-mega-feature h5 { margin: 0 0 7px; font-size: 15px; line-height: 1.3; } .util-mega-feature p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; color: #666; } .util-mega-feature > a { font-size: 12.5px; font-weight: 600; color: #d86f3d; text-decoration: none; } /* ========================================= HOVER ========================================= */ .util-nav-item:hover .util-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .util-nav-item:hover .util-nav-link svg { transform: rotate(180deg); } /* ========================================= RESPONSIVE ========================================= */ @media (max-width: 900px) { .util-mega { width: 700px; right: -80px; } .util-mega-grid { grid-template-columns: repeat(2, 1fr); } .util-mega-feature { border-left: 0; padding-left: 0; border-top: 1px solid var(--line, #e5e5e5); padding-top: 20px; } } @media (max-width: 600px) { .util-mega { width: 300px; max-width: calc(100vw - 30px); right: -100px; padding: 20px; } .util-mega-grid { grid-template-columns: 1fr; gap: 20px; } } .lightorange_bck { background: #fff9f6 !important; }z