: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:#FF7517;} /* ================= 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; } .whitecolor { color: #fff!important; } .wd-hg-100 { height: 100%; width: 100%; } .mt-35 { margin-top: 35px; } /* gallery strip */ .vstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .vstrip .ph{aspect-ratio:4/3;border-radius:var(--r)} .vstrip .ph:nth-child(1){aspect-ratio:4/5;grid-row:span 2;border-radius:var(--r-lg)} /* editorial rows */ .vrow{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:80px} .vrow:last-child{margin-bottom:0} .vrow.flip .vrow-media{order:2} .vrow-media{position:relative} .vrow-media .ph{aspect-ratio:4/3;border-radius:var(--r-xl)} .vrow-media .stack{position:absolute;right:-32px;bottom:-32px;width:46%;z-index:3} .vrow-media .stack .ph{aspect-ratio:1/1;border-radius:var(--r-lg);border:6px solid var(--paper);box-shadow:var(--shadow-l)} .vrow h3{font-size:clamp(26px,3vw,36px);margin-bottom:18px} .vrow p{color:var(--muted);font-size:16.5px;margin-bottom:16px} .vrow p:last-of-type{margin-bottom:0} .vrow strong{color:var(--ink)} .vrow .note{margin-top:24px;padding-left:20px;border-left:3px solid var(--coral);font-family:var(--serif);font-size:19px;line-height:1.45;color:var(--ink)} /* image cards */ .vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .vcard{border-radius:var(--r-lg);overflow:hidden;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .vcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)} .vcard .ph{aspect-ratio:16/10} .vcard .body{padding:24px;display:flex;flex-direction:column;gap:9px;flex:1} .vcard h3{font-size:20px} .vcard p{font-size:14.8px;color:var(--muted);line-height:1.55} .vcard .meta{margin-top:auto;padding-top:12px;font-size:13.5px;font-weight:600;color:var(--coral-text)} /* Hide extra treatment cards initially */ .extra-treatment { display: none; } /* Show More button */ .treatment-toggle { text-align: center; margin-top: 30px; } .treatment-toggle button { border: 1px solid var(--coral-text); background: transparent; color: var(--coral-text); padding: 12px 28px; border-radius: 30px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .25s ease; } .treatment-toggle button:hover { background: var(--coral-text); color: #fff; } /* When expanded */ .vcards.show-all .extra-treatment { display: flex; } .procedure-extra { display: none; } #procedures.show-all .procedure-extra { display: grid; } .procedure-toggle { text-align: center; margin-top: 10px; } .procedure-toggle button { border: 1px solid var(--coral-text); background: transparent; color: var(--coral-text); padding: 12px 28px; border-radius: 30px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .25s ease; } .procedure-toggle button:hover { background: var(--coral-text); color: #fff; } /* full-bleed image band with overlaid cards */ .vband{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden;background: #18214E;} .vband .ph{position:absolute;inset:0} .vband .veil{position:absolute;inset:0;z-index:2;} .vband .wrap{position:relative;z-index:3;color:#fff;padding-block:64px} .vband h2{color:#fff;font-size:clamp(28px,3.3vw,42px);max-width:16ch} .vband > .wrap > p{color:#CDD2E8;font-size:17px;max-width:48ch;margin-top:14px} .vtech{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px} .vtech div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:var(--r);padding:22px;backdrop-filter:blur(6px)} .vtech svg{color:#FF7517;margin-bottom:10px} .vtech strong{display:block;font-size:16px;color:#fff} .vtech span{display:block;font-size:13.5px;color:#CDD2E8;margin-top:6px;line-height:1.5} .table-100 { width: 100%; } .sec-head1 h2 { max-width: 43ch; } /* ---------- listing cards: news, events, blog ---------- */ .list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .list-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .list-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-l)} .list-card .ph{aspect-ratio:16/10} .list-card .body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1} .list-card .tagline{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--muted)} .list-card .tag{background:var(--coral-soft);color:var(--coral-text);font-weight:700;padding:4px 11px;border-radius:99px} .list-card h3{font-size:20px;line-height:1.32} .list-card p{font-size:14.5px;color:var(--muted);line-height:1.55} .list-card .read{margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;color:var(--indigo)} .list-card.hidden{display:none} /* featured item at the top of a listing */ .featured{display:grid;grid-template-columns:1.15fr .85fr;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:32px} .featured .ph{min-height:340px} .featured .body{padding:40px;display:flex;flex-direction:column;justify-content:center;gap:12px} .featured h2{font-size:clamp(24px,2.7vw,33px);line-height:1.25} .featured p{font-size:16px;color:var(--muted)} .featured .btn{align-self:flex-start;margin-top:10px} /* ================================ SERVICES CAROUSEL ================================ */ .services-slider { position: relative; display: flex; align-items: center; gap: 15px; } .services-track { display: flex !important; gap: 24px; overflow: hidden; scroll-behavior: smooth; flex: 1; padding: 5px; scrollbar-width: none; } .services-track::-webkit-scrollbar { display: none; } .services-track .card { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; } /* ================================ ARROWS ================================ */ .service-arrow { width: 42px; height: 42px; min-width: 42px; border: 1px solid #ddd; border-radius: 50%; background: #fff; color: #18214E; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .25s ease; z-index: 2; } .service-arrow:hover { background: #18214E; color: #fff; border-color: #18214E; } .service-arrow:disabled { opacity: .35; cursor: not-allowed; } /* ================================ DOTS ================================ */ .service-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 28px; } .service-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #cfcfcf; cursor: pointer; transition: all .3s ease; } .service-dot.active { width: 24px; border-radius: 10px; background: #18214E; } /* ================================ TABLET ================================ */ @media (max-width: 991px) { .services-track .card { flex: 0 0 calc((100% - 24px) / 2); } } /* ================================ MOBILE ================================ */ @media (max-width: 767px) { .services-slider { gap: 8px; } .services-track { gap: 16px; } .services-track .card { flex: 0 0 100%; } .service-arrow { width: 36px; height: 36px; min-width: 36px; font-size: 17px; } .service-dots { margin-top: 22px; } } /* ========================================================== HEADER — mega menu with icons and hover states ========================================================== */ 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:22px;min-height:82px} .logo{display:flex;align-items:center;gap:11px;flex:none} .logo svg{width:38px;height:38px;flex:none;transition:transform .3s cubic-bezier(.2,.7,.3,1)} .logo:hover svg{transform:rotate(-8deg) scale(1.05)} .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;gap:2px} .nav-item{position:static} .nav-link{ display:flex;align-items:center;gap:3px;padding:10px 7px;border-radius:10px; font-size:14px;font-weight:500;color:var(--muted);background:none;border:0;cursor:pointer; position:relative;transition:color .16s ease,background .16s ease; } .nav-link .lead-ic{color:var(--muted);transition:color .18s ease,transform .18s ease} .nav-link .caret{transition:transform .22s ease;opacity:.7} .nav-link::after{ content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px; background:var(--coral);border-radius:2px;transform:scaleX(0);transform-origin:left; transition:transform .22s cubic-bezier(.2,.7,.3,1); } .nav-link:hover{color:var(--ink);background:var(--sky)} .nav-link:hover .lead-ic{color:var(--coral);transform:translateY(-1px)} .nav-link:hover::after{transform:scaleX(1)} .nav-item.open > .nav-link{color:var(--ink);background:var(--sky)} .nav-item.open > .nav-link .caret{transform:rotate(180deg)} .nav-item.open > .nav-link::after{transform:scaleX(1)} .nav-link[aria-current="page"]{color:var(--ink)} .nav-link[aria-current="page"]::after{transform:scaleX(1);background:var(--indigo)} /* mega panel */ .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:30px 32px;display:none; } .nav-item.open .mega{display:block;animation:megaIn .2s cubic-bezier(.2,.7,.3,1)} @keyframes megaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){ .nav-item.open .mega{animation:none} .nav-link::after,.nav-link .lead-ic,.logo svg{transition:none} } .mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px} .mega-col h4{ font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.06em; color:var(--coral-text);margin-bottom:12px;text-transform:uppercase; } .mega-col ul{display:grid;gap:2px} /* one link inside the panel: icon + label + hint */ .mlink{ display:flex;gap:12px;align-items:flex-start;padding:9px 11px;border-radius:10px; transition:background .15s ease,transform .15s ease; } .mlink:hover{background:var(--sand);transform:translateX(3px)} .mlink .ic{ width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center; background:var(--sky);color:var(--indigo);transition:background .18s ease,color .18s ease; } .mlink:hover .ic{background:var(--coral-soft);color:var(--coral-text)} .mlink strong{display:block;font-size:14.5px;font-weight:600;line-height:1.3} .mlink span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4} /* promo card at the end of a panel */ .mega-promo{ background:var(--blush);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:9px; } .mega-promo .ph{aspect-ratio:16/10;border-radius:9px;margin-bottom:2px} .mega-promo h5{font-family:var(--serif);font-size:17px;font-weight:600;margin:0} .mega-promo p{font-size:13px;color:var(--muted);line-height:1.45} .mega-promo a{font-size:13.5px;font-weight:600;color:var(--coral-text);margin-top:auto;display:inline-flex;align-items:center;gap:6px} .mega-promo a svg{transition:transform .18s ease} .mega-promo a:hover svg{transform:translateX(3px)} /* footer strip inside a panel */ .mega-foot{ margin-top:24px;padding-top:18px;border-top:1px solid var(--line-cool); display:flex;gap:22px;flex-wrap:wrap;align-items:center;font-size:13.5px;color:var(--muted); } .mega-foot a{font-weight:600;color:var(--indigo);display:inline-flex;align-items:center;gap:7px} .mega-foot a:hover{color:var(--coral-text)} .mega-foot .sep{margin-left:auto} .head-actions{display:flex;align-items:center;gap:9px;flex:none} .head-actions .btn{white-space:nowrap} .burger{display:none;border:1px solid var(--line-cool);background:none;border-radius:10px;padding:10px 12px;cursor:pointer} .burger:hover{border-color:var(--indigo);color:var(--indigo)} /* ---------- header responsive: mega becomes an accordion ---------- */ @media (max-width:1200px){ header.site .wrap{gap:14px} nav.main{display:none} .burger{display:block;order:3} .head-actions .btn-line{display:none} 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:10px;max-height:78vh;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:flex-start;padding:15px 12px;font-size:16px;color:var(--ink)} nav.main.open .nav-link .caret{margin-left:auto} nav.main.open .nav-link::after{display:none} nav.main.open .mega{ position:static;box-shadow:none;border:0;padding:0 12px 18px;border-radius:0;animation:none; } nav.main.open .mega-grid{grid-template-columns:1fr;gap:20px} nav.main.open .mega-promo{display:none} nav.main.open .mega-foot{margin-top:14px} } nav.main a { display: flex; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width:1080px){ nav.main{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--paper);border-bottom:1px solid var(--line-cool);padding:10px;box-shadow:var(--shadow-l)} nav.main.open{display:flex} nav.main a{padding:14px} .burger{display:block;order:3} header.site .wrap{position:relative;gap:14px} .head-actions .btn-line{display:none} .rail-inner,.rail-inner.five{grid-template-columns:repeat(2,1fr)} .rail-inner div{border-bottom:1px solid var(--line-cool)} .rail-inner div:nth-child(even){border-right:0} .two-col,.profile{grid-template-columns:1fr;gap:38px} .book-card{position:static} .grid-3,.grid-4,.doctors,.doctors.cols-3,.stories,.spec-list,.where,.outcomes{grid-template-columns:repeat(2,1fr)} .centres{grid-template-columns:1fr} .steps{grid-template-columns:repeat(2,1fr)} .profile .facts{grid-template-columns:repeat(2,1fr)} .profile .facts div{border-bottom:1px solid var(--line)} .profile .facts div:nth-child(even){border-right:0} } @media (max-width:760px){ body{font-size:16px;padding-bottom:64px} html{scroll-padding-top:132px} .wrap{padding-inline:18px} .sec{padding-block:54px} .util .hours,.util a:not(.call){display:none} .util .wrap{justify-content:center} .banner,.banner.tall{min-height:400px} .banner .wrap{padding-block:28px 38px} .rail{margin-top:-28px} .subnav{top:80px} .subnav .book{display:none} .grid-3,.grid-4,.grid-2,.doctors,.doctors.cols-3,.stories,.spec-list,.where,.outcomes,.steps,.centres{grid-template-columns:1fr} .sec-head.row{flex-direction:column;align-items:flex-start;gap:16px} .centre{flex-direction:column} .centre .ph{width:100%;aspect-ratio:16/9} .band{grid-template-columns:1fr;padding:32px 26px} .card{padding:24px} .profile{padding-block:32px} .profile .portrait{max-width:280px} .schedule td,.schedule th{padding:12px 16px} .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} } .youtube { background: url(https://webs.hashtagit.in/pacificonehealth/image/2157.webp) center / cover no-repeat; color: var(--on-dark); } .spbanner { background-image: url(https://webs.hashtagit.in/pacificonehealth/image/2158.webp)!important; background-position: center; background-repeat: no-repeat; background-size: cover; padding-block: 44px 56px; border-bottom: 1px solid var(--line); padding: 100px 0px!important; } .place1 { 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) / 2); } article.place.place1 { padding: 25px; } .place1 p { font-size: 14.5px; color: var(--muted); line-height: normal; margin-top: 15px; } /* video gallery */ .vidgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .vid{display:block} .vid .thumb{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10} .vid .thumb .ph{position:absolute;inset:0} .vid .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:54px;height:54px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;box-shadow:0 8px 22px -6px rgba(231,97,58,.85);transition:transform .18s ease} .vid:hover .play{transform:translate(-50%,-50%) scale(1.08)} .vid .len{position:absolute;right:10px;bottom:10px;z-index:3;background:rgba(21,26,56,.82);color:#fff;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:6px} .vid h3{font-size:17.5px;margin-top:14px;line-height:1.35} .vid p{font-size:13.5px;color:var(--muted);margin-top:5px} .vid.hidden{display:none} .tariff tbody tr.group td { background: var(--sand); font-weight: 700; font-family: var(--serif); font-size: 16px; } .tariff td:last-child, .tariff th:last-child { text-align: right; white-space: nowrap; } .readmore { background: #18214E; color: #fff!important; } .readmore:hover { background: #FF7517!important; color: #fff!important; } /* forms: application and appointment */ .form-wide{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:36px} .form-wide h3{font-size:21px;margin-bottom:6px} .form-wide > p{font-size:14.5px;color:var(--muted);margin-bottom:24px} .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .fgrid .f{display:flex;flex-direction:column;gap:7px;min-width:0} .fgrid .f.full{grid-column:1/-1} .fgrid label{font-size:13.5px;font-weight:600;color:var(--muted)} .fgrid input,.fgrid select,.fgrid textarea{padding:13px 15px;border:1px solid var(--line-cool);border-radius:12px;background:var(--paper);font-size:15.5px;width:100%} .fgrid textarea{resize:vertical} .fgrid 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} .fgrid input:focus,.fgrid select:focus,.fgrid textarea:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px var(--coral-soft)} .fgrid .err{font-size:13px;color:var(--coral-text);display:none} .fgrid .f.invalid input,.fgrid .f.invalid select,.fgrid .f.invalid textarea{border-color:var(--coral)} .fgrid .f.invalid .err{display:block} .fgrid .hint{font-size:12.8px;color:var(--muted)} .dropzone{border:2px dashed var(--line-cool);border-radius:var(--r);padding:28px;text-align:center;cursor:pointer;transition:border-color .16s ease,background .16s ease} .dropzone:hover{border-color:var(--coral);background:var(--coral-soft)} .dropzone svg{color:var(--muted);margin-bottom:10px} .dropzone strong{display:block;font-size:15px} .dropzone span{display:block;font-size:13px;color:var(--muted);margin-top:4px} .dropzone input{display:none} .consent{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--muted);margin-top:6px} .consent input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--coral)} /* appointment summary rail */ .appt{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start} .summary{position:sticky;top:110px;background:var(--sky);border:1px solid var(--line-cool);border-radius:var(--r-lg);padding:28px} .summary h3{font-size:19px;margin-bottom:16px} .summary dl{display:grid;gap:0} .summary dl div{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid rgba(22,32,60,.09);font-size:14.5px} .summary dl div:last-child{border-bottom:0} .summary dt{color:var(--muted)} .summary dd{margin:0;font-weight:600;text-align:right} .summary .btn{margin-top:20px} .summary .note{margin-top:12px;font-size:12.8px;color:var(--muted);text-align:center} /* ================= floating quick-action dock ================= */ .dock { position: fixed; left: 50%; bottom: 24px; z-index: 85; display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.86); backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 99px; padding: 7px; box-shadow: 0 10px 20px rgba(22,32,60,.08), 0 30px 60px -24px rgba(22,32,60,.4); transform: translate(-50%,150%); opacity: 0; pointer-events: none; transition: transform .4s cubic-bezier(.2,.7,.3,1), opacity .3s ease; } .dock.on { transform: translate(-50%,0); opacity: 1; pointer-events: auto; } /* ================= DOCK LINKS ================= */ .dock a { display: flex; align-items: center; gap: 9px; padding: 11px 17px; border-radius: 99px; font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; transition: background .16s ease, color .16s ease, transform .16s ease; } .dock a .ic { display: grid; place-items: center; color: var(--muted); transition: color .16s ease, transform .2s ease; } .dock a:hover { background: var(--sky); } .dock a:hover .ic { color: var(--coral); transform: translateY(-2px); } .dock a .lbl-short { display: none; } /* ================= PRIMARY ================= */ .dock .primary { background: var(--coral); color: #fff; box-shadow: 0 8px 18px -8px rgba(231,97,58,.9); } .dock .primary .ic { color: #fff; } .dock .primary:hover { background: #CF4E29; color: #fff; } .dock .primary:hover .ic { color: #fff; } /* ================= EMERGENCY ================= */ .dock .urgent { color: var(--coral-text); } .dock .urgent .ic { color: var(--coral-text); } .dock .urgent:hover { background: var(--coral-soft); } /* ================= SEPARATOR ================= */ .dock .sep { width: 1px; align-self: stretch; background: var(--line); margin: 8px 4px; flex: none; } /* ================= CLOSE BUTTON ================= */ .dock-close { width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; cursor: pointer; color: var(--muted); display: grid; place-items: center; flex: none; margin-left: 2px; transition: background .16s ease, color .16s ease; } .dock-close:hover { background: var(--sand); color: var(--ink); } /* ===================================================== OUR HOSPITALS BUTTON ===================================================== */ .dock-hospital-wrap { position: relative; flex: none; } /* Hospital button */ .dock-hospital-btn { display: flex; align-items: center; gap: 9px; padding: 11px 17px; border: 0; border-radius: 99px; background: transparent; color: var(--ink); font-family: inherit; font-size: 14.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .16s ease, color .16s ease; } .dock-hospital-btn .ic { display: grid; place-items: center; color: var(--muted); transition: color .16s ease, transform .2s ease; } .dock-hospital-btn:hover { background: var(--sky); } .dock-hospital-btn:hover .ic { color: var(--coral); transform: translateY(-2px); } /* ===================================================== HOSPITAL DROPDOWN ===================================================== */ .hospital-dock-dropdown { position: absolute; left: 50%; bottom: calc(100% + 14px); width: 245px; padding: 9px; background: rgba(255,255,255,.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(24,33,78,.10); border-radius: 18px; box-shadow: 0 12px 30px rgba(24,33,78,.12), 0 25px 60px rgba(24,33,78,.16); transform: translate(-50%,12px) scale(.96); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, transform .25s cubic-bezier(.2,.7,.3,1), visibility .22s ease; } /* OPEN */ .hospital-dock-dropdown.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%,0) scale(1); } /* Dropdown arrow */ .hospital-dock-dropdown::after { content: ""; position: absolute; bottom: -7px; left: 50%; width: 13px; height: 13px; background: rgba(255,255,255,.97); border-right: 1px solid rgba(24,33,78,.10); border-bottom: 1px solid rgba(24,33,78,.10); transform: translateX(-50%) rotate(45deg); } /* ===================================================== DROPDOWN TITLE ===================================================== */ .hospital-drop-title { padding: 8px 10px 10px; border-bottom: 1px solid rgba(24,33,78,.08); margin-bottom: 5px; } .hospital-drop-title span { display: block; color: var(--ink); font-size: 14px; font-weight: 700; } .hospital-drop-title small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; } /* ===================================================== HOSPITAL ITEMS ===================================================== */ .hospital-dock-dropdown a { display: flex !important; align-items: center; gap: 11px; width: 100%; padding: 10px 9px !important; border-radius: 11px !important; color: var(--ink); text-decoration: none; background: transparent; font-size: 13px; } .hospital-dock-dropdown a:hover { background: var(--sky) !important; transform: none !important; } /* Hospital icon */ .hospital-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; background: var(--coral-soft); color: var(--coral); font-size: 21px; font-weight: 300; } /* Hospital name */ .hospital-dock-dropdown a strong { display: block; font-size: 13px; font-weight: 700; line-height: 1.2; } /* Hospital sub text */ .hospital-dock-dropdown a small { display: block; margin-top: 3px; color: var(--muted); font-size: 10.5px; } /* ===================================================== REDUCED MOTION ===================================================== */ @media (prefers-reduced-motion: reduce) { .dock { transition: opacity .2s ease; } .dock a .ic { transition: none; } } /* ===================================================== TABLET ===================================================== */ @media (max-width:1080px) { .dock a { padding: 11px 14px; font-size: 14px; } .dock a .lbl-long { display: none; } .dock a .lbl-short { display: inline; } /* Hospital button tablet */ .dock-hospital-btn { padding: 11px 14px; font-size: 14px; } .dock-hospital-btn .lbl-long { display: none; } .dock-hospital-btn .lbl-short { display: inline; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width:760px) { .dock { left: 0; right: 0; bottom: 0; transform: translateY(120%); border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; padding: 0; gap: 0; display: grid; grid-template-columns: repeat(5,1fr); background: rgba(255,255,255,.97); box-shadow: 0 -4px 20px rgba(22,32,60,.1); } .dock.on { transform: translateY(0); } .dock a { flex-direction: column; gap: 5px; padding: 11px 4px 10px; border-radius: 0; font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2; } .dock a .lbl-long { display: none; } .dock a .lbl-short { display: inline; } .dock .primary { background: var(--coral); color: #fff; box-shadow: none; } .dock .sep, .dock-close { display: none; } /* ================================================= MOBILE HOSPITAL BUTTON ================================================= */ .dock-hospital-wrap { width: 100%; } .dock-hospital-btn { width: 100%; height: 100%; flex-direction: column; justify-content: center; gap: 5px; padding: 11px 4px 10px; border-radius: 0; font-size: 11px; line-height: 1.2; } .dock-hospital-btn .lbl-long { display: none; } .dock-hospital-btn .lbl-short { display: inline; } /* Mobile dropdown */ .hospital-dock-dropdown { position: fixed; left: 50%; bottom: 70px; width: min(280px, calc(100vw - 30px)); transform: translate(-50%,12px) scale(.96); } .hospital-dock-dropdown.open { transform: translate(-50%,0) scale(1); } .hospital-dock-dropdown::after { display: none; } } /* ===================================================== FULL WIDTH DOCK SHADOW ===================================================== */ .dockshadow { position: fixed; left: 0; right: 0; bottom: 0; width: 100vw; max-width: none; height: 130px; margin: 0; padding: 0; z-index: 84; pointer-events: none; background: linear-gradient( to top, #18214ea6 0%, #18214e82 18%, #18214e61 40%, #18214e47 65%, rgba(0,0,0,0) 100% ); opacity: 0; transform: translateY(35px); visibility: hidden; transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1), visibility 0s linear .45s; } .dockshadow { overflow: visible !important; } .dockshadow .dock { overflow: visible !important; } .dock-hospital-wrap { position: relative; z-index: 100; } .hospital-dock-dropdown { z-index: 9999; } /* ===================================================== SHADOW ACTIVE ===================================================== */ .dockshadow.show { opacity: 1; transform: translateY(0); visibility: visible; transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1), visibility 0s linear 0s; } /* ===================================================== DOCK ABOVE SHADOW ===================================================== */ .dockshadow .dock { z-index: 85; pointer-events: auto; } /* ===================================================== WHEN CLOSED Dock + Shadow both hide ===================================================== */ .dockshadow.closed { opacity: 0 !important; visibility: hidden !important; transform: translateY(35px) !important; pointer-events: none !important; transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s; } .dockshadow.closed .dock { opacity: 0 !important; pointer-events: none !important; transform: translate(-50%, 150%) !important; } /* ========================================== FINAL HOSPITAL DROPDOWN FIX ========================================== */ .dockshadow { overflow: visible !important; } .dockshadow .dock { overflow: visible !important; } .dock-hospital-wrap { position: relative !important; z-index: 999 !important; } .dock-hospital-btn { position: relative; z-index: 1000; } .hospital-dock-dropdown { display: block !important; position: absolute !important; left: 50% !important; bottom: calc(100% + 14px) !important; width: 245px !important; z-index: 99999 !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 12px) scale(.96) !important; transition: opacity .22s ease, transform .25s cubic-bezier(.2,.7,.3,1), visibility .22s ease !important; } .hospital-dock-dropdown.open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translate(-50%, 0) scale(1) !important; } /* ========================================== MOBILE ========================================== */ @media (max-width:760px) { .hospital-dock-dropdown { position: fixed !important; left: 50% !important; bottom: 70px !important; width: min(280px, calc(100vw - 30px)) !important; transform: translate(-50%, 12px) scale(.96) !important; } .hospital-dock-dropdown.open { transform: translate(-50%, 0) scale(1) !important; } } /*close*/ /*close*/ /* contact */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start} .contact-block{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px} .contact-block h3{font-size:21px;margin-bottom:18px} .contact-line{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--line-cool);align-items:flex-start} .contact-line:last-child{border-bottom:0} .contact-line .ic{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--sky);color:var(--indigo)} .contact-line dt{font-size:13px;color:var(--muted)} .contact-line dd{margin:0;font-size:15.5px;font-weight:600;line-height:1.4} .contact-line dd a:hover{color:var(--coral-text)} @media (max-width:1080px){ .story-row{grid-template-columns:1fr;gap:32px;margin-bottom:52px} .story-row.flip .story-media{order:0} .leadquote{grid-template-columns:1fr} .leadquote .ph{min-height:240px} .leadquote .body{padding:32px} .values,.awards{grid-template-columns:1fr 1fr} .certs{grid-template-columns:1fr 1fr} .milestones{grid-template-columns:1fr 1fr} .contact-grid{grid-template-columns:1fr} } @media (max-width:760px){ .values,.awards,.certs,.milestones{grid-template-columns:1fr} .milestone{padding-right:0;border-left:2px solid var(--line);padding-left:22px;padding-top:0;margin-bottom:26px} .milestone::before{top:4px;left:-8px} .milestones{border-top:0} .job{grid-template-columns:1fr;gap:16px;padding:22px} .contact-block{padding:24px} } /* ================================ INSURANCE & TPA SECTION ================================ */ /*.poh-insurance-section {*/ /* width: 100%;*/ /* padding: 90px 0;*/ /* background: #f7f8fa;*/ /*}*/ .poh-insurance-wrap { width: min(1420px, calc(100% - 60px)); margin: 0 auto; } /* ---------- Heading ---------- */ .poh-insurance-heading { max-width: 760px; margin: 0 auto 55px; text-align: center; } .poh-insurance-kicker { display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #ff7517; } .poh-insurance-heading h2 { margin: 0 0 16px; color: #18214e; font-size: clamp(32px, 4vw, 48px); line-height: 1.12; font-weight: 700; } .poh-insurance-heading p { margin: 0 auto; max-width: 680px; color: #687083; font-size: 16px; line-height: 1.7; } /* ---------- Grid ---------- */ .poh-insurance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 36px; } /* ---------- Card ---------- */ .poh-insurance-card { position: relative; min-height: 140px; display: flex; align-items: center; justify-content: center; padding: 12px; background: #ffffff; border: 1px solid #e9ebef; border-radius: 2px; box-shadow: 0 10px 30px rgba(24, 33, 78, 0.08); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } /* Small top accent */ .poh-insurance-card::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 3px; background: #ff7517; transition: width 0.3s ease; } /* Hover */ .poh-insurance-card:hover { transform: translateY(-6px); border-color: #e1e4ea; box-shadow: 0 18px 38px rgba(24, 33, 78, 0.13); } .poh-insurance-card:hover::before { width: 100%; } /* ---------- Logo Area ---------- */ .poh-insurance-logo { width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; } .poh-insurance-logo img { display: block; max-width: 82%; max-height: 95px; width: auto; height: auto; object-fit: contain; transition: transform 0.3s ease; } .poh-insurance-card:hover .poh-insurance-logo img { transform: scale(1.04); } /* ================================ TABLET ================================ */ @media (max-width: 1100px) { .poh-insurance-section { padding: 75px 0; } .poh-insurance-grid { grid-template-columns: repeat(3, 1fr); gap: 25px; } .poh-insurance-card { min-height: 170px; } } /* ================================ MOBILE ================================ */ @media (max-width: 767px) { .poh-insurance-section { padding: 60px 0; } .poh-insurance-wrap { width: min(100% - 30px, 600px); } .poh-insurance-heading { margin-bottom: 35px; } .poh-insurance-heading h2 { font-size: 32px; } .poh-insurance-heading p { font-size: 15px; line-height: 1.6; } .poh-insurance-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .poh-insurance-card { min-height: 135px; padding: 18px; } .poh-insurance-logo { height: 90px; } .poh-insurance-logo img { max-width: 90%; max-height: 70px; } } /* ================================ SMALL MOBILE ================================ */ @media (max-width: 480px) { .poh-insurance-grid { grid-template-columns: 1fr; } .poh-insurance-card { min-height: 150px; } .poh-insurance-logo { height: 100px; } } /* careers: job list */ .jobs{display:grid;gap:14px} .job{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); padding:24px 28px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center; transition:border-color .16s ease,box-shadow .16s ease; } .job:hover{border-color:var(--coral);box-shadow:var(--shadow-s)} .job h3{font-size:20px} .job .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .job .tags span{font-size:12.5px;padding:5px 12px;border-radius:99px;background:var(--sky);color:var(--indigo)} .job .tags .dept{background:var(--coral-soft);color:var(--coral-text)} .job.hidden{display:none} /* ========================================= COE - ABOUT HOD ========================================= */ .coe-hod-section { position: relative; overflow: hidden; } .coe-hod-section:before { /*content: "";*/ /*position: absolute;*/ /*width: 420px;*/ /*height: 420px;*/ /*border-radius: 50%;*/ /*background: rgba(255, 117, 23, 0.05);*/ /*top: -180px;*/ /*right: -120px;*/ } .coe-hod-wrap { margin: 0 auto; display: grid; grid-template-columns: 1.85fr 1.15fr; gap: 90px; align-items: center; } /* ========================================= IMAGE ========================================= */ .coe-hod-profile { position: relative; padding: 0 25px 25px 0; } .coe-hod-image-box { position: relative; height: 540px; overflow: hidden; border-radius: 0 55px 0 55px; background: #e9edf1; } .coe-hod-image-box:after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 55%, rgba(24, 33, 78, 0.12) ); pointer-events: none; } .coe-hod-image-box img { width: 100%; height: 100%; display: block; object-fit: cover; } /* orange decorative block */ .coe-hod-profile:after { /*content: "";*/ /*position: absolute;*/ /*width: 100px;*/ /*height: 100px;*/ /*right: 0;*/ /*bottom: 0;*/ /*background: #ff7517;*/ /*z-index: -1;*/ } /* ========================================= BADGE ========================================= */ .coe-hod-badge { position: absolute; left: 25px; bottom: 25px; z-index: 2; display: flex; align-items: center; gap: 13px; padding: 15px 20px; background: #fff; box-shadow: 0 15px 40px rgba(24, 33, 78, 0.16); border-radius: 4px; } .coe-hod-badge-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #ff7517; color: #fff; font-size: 24px; font-weight: 400; } .coe-hod-badge strong { display: block; color: #18214e; font-size: 14px; line-height: 1.3; } .coe-hod-badge small { display: block; margin-top: 3px; color: #7b8499; font-size: 11px; } /* ========================================= CONTENT ========================================= */ .coe-hod-content { position: relative; } .coe-hod-kicker { display: flex; align-items: center; gap: 10px; color: #ff7517; font-size: 13px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 15px; } .coe-hod-kicker span { width: 35px; height: 2px; display: inline-block; background: #ff7517; } .coe-hod-content h2 { margin: 0 0 18px; color: #18214e; /*font-family: Georgia, "Times New Roman", serif;*/ font-size: clamp(40px, 4vw, 58px); font-weight: 500; line-height: 1.05; } .coe-hod-intro { max-width: 650px; margin: 0 0 25px; color: #52627f; font-size: 19px; line-height: 1.7; } .coe-hod-divider { width: 70px; height: 3px; background: #ff7517; margin: 25px 0 27px; } .coe-hod-content > p:not(.coe-hod-intro) { max-width: 700px; margin: 0 0 18px; color: #60708c; font-size: 15px; line-height: 1.85; } /* ========================================= HIGHLIGHTS ========================================= */ .coe-hod-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 32px; } .coe-hod-highlight { min-height: 105px; padding: 17px 15px; background: #fff; border: 1px solid #e5e9ef; display: flex; gap: 11px; align-items: flex-start; transition: all 0.3s ease; } .coe-hod-highlight:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(24, 33, 78, 0.09); border-color: rgba(255, 117, 23, 0.35); } .coe-hod-highlight > strong { color: #ff7517; font-size: 13px; font-weight: 700; } .coe-hod-highlight b { display: block; color: #18214E; font-size: 15px; margin-bottom: 5px; } .coe-hod-highlight span { display: block; color: #7a8599; font-size: 11px; line-height: 1.5; } .abouthod { font-size: clamp(28px, 3.3vw, 41px)!important; max-width: 28ch!important; margin-bottom: 14px!important; } /* ========================================= RESPONSIVE ========================================= */ @media (max-width: 991px) { .coe-hod-section { padding: 70px 0; } .coe-hod-wrap { grid-template-columns: 1fr; gap: 50px; } .coe-hod-profile { max-width: 600px; width: 100%; margin: 0 auto; } .coe-hod-image-box { height: 500px; } .coe-hod-content { max-width: 700px; margin: 0 auto; } } @media (max-width: 600px) { .coe-hod-section { padding: 55px 0; } .coe-hod-wrap { width: 90%; gap: 35px; } .coe-hod-profile { padding: 0 12px 12px 0; } .coe-hod-image-box { height: 390px; border-radius: 0 35px 0 35px; } .coe-hod-badge { left: 15px; bottom: 15px; padding: 11px 13px; } .coe-hod-badge-icon { width: 34px; height: 34px; font-size: 20px; } .coe-hod-badge strong { font-size: 12px; } .coe-hod-badge small { font-size: 10px; } .coe-hod-content h2 { font-size: 38px; } .coe-hod-intro { font-size: 16px; line-height: 1.6; } .coe-hod-content > p:not(.coe-hod-intro) { font-size: 14px; line-height: 1.75; } .coe-hod-highlights { grid-template-columns: 1fr; } .coe-hod-highlight { min-height: auto; } } /* outcomes over an image */ .vout{position:relative;border-radius:var(--r-xl);overflow:hidden;padding:64px 56px;isolation:isolate;background: #18214E;} .vout .ph{position:absolute;inset:0;z-index:-2} .vout::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,rgba(21,26,56,.92),rgba(21,26,56,.72))} .vout h2{color:#fff;font-size:clamp(27px,3.1vw,40px);max-width:18ch} .vout > p{color:#CDD2E8;margin-top:14px;max-width:52ch;font-size:16px} .vout-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px} .vout-grid div{border-top:2px solid rgba(255,255,255,.28);padding-top:20px} .vout-grid b{ font-size:46px;font-weight:600;color:#fff;display:block;line-height:1} .vout-grid strong{display:block;font-size:15.5px;color:#fff;margin-top:12px} .vout-grid span{display:block;font-size:13.5px;color:#CDD2E8;margin-top:5px;line-height:1.5} .newspr { width: 55%; margin-left: 43%; } .mega-gridd { grid-template-columns: repeat(2, 1fr); } /* ========================================= ABOUT US MEGA DROPDOWN ========================================= */ .util-nav-item { position: relative; } .util-nav-link { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; } .util-nav-link svg { transition: transform 0.25s ease; } /* Dropdown */ .util-mega { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%) translateY(10px); width: min(1050px, calc(100vw - 40px)); background: #fff; border: 1px solid rgba(24, 33, 78, 0.08); border-radius: 18px; padding: 26px; box-shadow: 0 20px 55px rgba(24, 33, 78, 0.14), 0 5px 18px rgba(24, 33, 78, 0.07); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; z-index: 9999; } /* Small top arrow */ .util-mega::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; background: #fff; border-left: 1px solid rgba(24, 33, 78, 0.08); border-top: 1px solid rgba(24, 33, 78, 0.08); transform: translateX(-50%) rotate(45deg); } /* Hover open */ .util-nav-item:hover .util-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .util-nav-item:hover .util-nav-link svg { transform: rotate(180deg); } /* ========================================= ABOUT US GRID ========================================= */ .util-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; position: relative; z-index: 2; } /* Heading */ .util-mega-grid h4 { margin: 0 0 13px; color: #18214e; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; } /* List */ .util-mega-grid ul { list-style: none; padding: 0; margin: 0; } .util-mega-grid li { margin: 0; padding: 0; } .util-mega-grid li + li { margin-top: 5px; } /* Normal links */ .util-mega-grid li > a:not(.mlink) { display: block; padding: 8px 10px; border-radius: 8px; color: #4c536b; font-size: 13px; line-height: 1.4; text-decoration: none; transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease; } .util-mega-grid li > a:not(.mlink):hover { color: #18214e; background: #f5f7fb; padding-left: 14px; } /* ========================================= ICON LINKS ========================================= */ .util-mega-grid .mlink { display: flex; align-items: flex-start; gap: 11px; padding: 9px 10px; color: #18214e; text-decoration: none; border-radius: 10px; transition: background 0.2s ease, transform 0.2s ease; } .util-mega-grid .mlink:hover { background: #f5f7fb; transform: translateX(2px); } .util-mega-grid .mlink .ic { width: 30px; height: 30px; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; background: #f1f4fa; color: #18214e; border-radius: 8px; transition: background 0.2s ease, color 0.2s ease; } /*.util-mega-grid .mlink:hover .ic {*/ /* background: #18214e;*/ /* color: #fff;*/ /*}*/ .util-mega-grid .mlink strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--muted); } .util-mega-grid .mlink > span:last-child > span { display: block; margin-top: 3px; color: #73798b; font-size: 11px; line-height: 1.35; } /* ========================================= FEATURE CARD ========================================= */ .util-mega-feature { padding: 18px; background: linear-gradient( 145deg, #f3f6f3 0%, #eef2f0 100% ); border-radius: 14px; min-height: 205px; display: flex; flex-direction: column; justify-content: center; } .util-ph { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-bottom: 13px; background: #fff; color: #18214e; border-radius: 12px; box-shadow: 0 6px 20px rgba(24, 33, 78, 0.08); } .util-mega-feature h5 { margin: 0 0 7px; color: #18214e; font-size: 15px; font-weight: 700; } .util-mega-feature p { margin: 0 0 13px; color: #62697b; font-size: 12px; line-height: 1.55; } .util-mega-feature > a { display: inline-flex; align-items: center; color: #18214e; font-size: 12px; font-weight: 700; text-decoration: none; } .util-mega-feature > a::after { content: "→"; margin-left: 7px; transition: transform 0.2s ease; } .util-mega-feature > a:hover::after { transform: translateX(4px); } /* ========================================= MOBILE ========================================= */ @media (max-width: 1100px) { .util-mega { width: min(900px, calc(100vw - 30px)); } .util-mega-grid { grid-template-columns: 1fr 1fr; } .util-mega-feature { grid-column: span 2; } } @media (max-width: 700px) { .util-mega { position: fixed; top: 75px; left: 15px; width: calc(100vw - 30px); transform: translateY(10px); max-height: calc(100vh - 95px); overflow-y: auto; } .util-nav-item:hover .util-mega { transform: translateY(0); } .util-mega-grid { grid-template-columns: 1fr; gap: 18px; } .util-mega-feature { grid-column: auto; } .util-mega::before { display: none; } } /* ========================================= FIX ABOUT US HOVER GAP ========================================= */ .util-nav-item { position: relative; } /* Invisible hover bridge */ .util-nav-item::after { content: ""; position: absolute; left: -20px; right: -20px; top: 100%; height: 22px; background: transparent; z-index: 9998; } /* About dropdown */ .util-mega { position: absolute; top: calc(100% + 18px); left: -60%; transform: translateX(-50%) translateY(10px); width: min(690px, calc(100vw - 40px)); background: #fff; border: 1px solid rgba(24, 33, 78, 0.08); border-radius: 18px; padding: 26px; box-shadow: 0 20px 55px rgba(24, 33, 78, 0.14), 0 5px 18px rgba(24, 33, 78, 0.07); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility .25s ease; z-index: 9999; } /* Dropdown open */ .util-nav-item:hover .util-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* Arrow */ .util-mega::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; background: #fff; border-left: 1px solid rgba(24, 33, 78, 0.08); border-top: 1px solid rgba(24, 33, 78, 0.08); transform: translateX(-50%) rotate(45deg); } /* ---------- about: alternating story rows ---------- */ .story-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:72px} .story-row:last-child{margin-bottom:0} .story-row.flip .story-media{order:2} .story-media .ph{aspect-ratio:4/3;border-radius:var(--r-lg)} .story-row h3{font-size:clamp(24px,2.7vw,33px);margin-bottom:16px} .story-row p{color:var(--muted);font-size:16.5px;margin-bottom:16px} .story-row p:last-child{margin-bottom:0} .story-row strong{color:var(--ink)} /* values */ .values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .value{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px} .value .n{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--coral-text);display:block;margin-bottom:14px} .value h3{font-size:21px;margin-bottom:9px} .value p{font-size:15px;color:var(--muted);line-height:1.55} /* milestones */ .milestones{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--line)} .milestone{padding:26px 24px 0 0;position:relative} .milestone::before{content:"";position:absolute;top:-8px;left:0;width:14px;height:14px;border-radius:50%;background:var(--coral);border:3px solid var(--paper)} .milestone .yr{font-family:var(--serif);font-size:24px;font-weight:600;display:block} .milestone p{font-size:14.8px;color:var(--muted);margin-top:8px;line-height:1.5} /* awards + certificates */ .awards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .award{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:9px} .award .ic{width:46px;height:46px;border-radius:14px;background:var(--coral-soft);color:var(--coral-text);display:grid;place-items:center;margin-bottom:5px} .award .yr{font-size:12.5px;font-weight:700;color:var(--muted)} .award h3{font-size:19px} .award p{font-size:14.5px;color:var(--muted);line-height:1.55} .certs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .cert{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;text-align:center} .cert .seal{width:60px;height:60px;border-radius:50%;background:var(--sage-soft);color:var(--sage);display:grid;place-items:center;margin:0 auto 16px} .cert strong{display:block;font-family:var(--serif);font-size:19px} .cert span{display:block;font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.5} /* chairman / leader quote */ .leadquote{ background:var(--indigo-ink);color:#fff;border-radius:var(--r-xl); display:grid;grid-template-columns:320px 1fr;overflow:hidden; } .leadquote .ph{height:100%;min-height:340px} .leadquote .body{padding:48px} .leadquote blockquote{margin:0;font-family:var(--serif);font-size:clamp(21px,2.3vw,29px);line-height:1.42;color:#fff} .leadquote .who{margin-top:28px;padding-top:22px;border-top:1px solid rgba(239,241,248,.2)} .leadquote .who strong{display:block;font-size:16.5px;color:#fff} .leadquote .who span{font-size:14px;color:var(--on-dark-muted)} @media (max-width:1080px){ .story-row{grid-template-columns:1fr;gap:32px;margin-bottom:52px} .story-row.flip .story-media{order:0} .leadquote{grid-template-columns:1fr} .leadquote .ph{min-height:240px} .leadquote .body{padding:32px} .values,.awards{grid-template-columns:1fr 1fr} .certs{grid-template-columns:1fr 1fr} .milestones{grid-template-columns:1fr 1fr} .contact-grid{grid-template-columns:1fr} } @media (max-width:760px){ .values,.awards,.certs,.milestones{grid-template-columns:1fr} .milestone{padding-right:0;border-left:2px solid var(--line);padding-left:22px;padding-top:0;margin-bottom:26px} .milestone::before{top:4px;left:-8px} .milestones{border-top:0} .job{grid-template-columns:1fr;gap:16px;padding:22px} .contact-block{padding:24px} } /* ========================================= PACIFIC ONEHEALTH - LEADERSHIP SECTION ========================================= */ .poh-leadership-section { width: 100%; padding: 35px 0 60px; background: #fff; } .poh-leadership-wrap { /*width: 100%;*/ /*max-width: 1440px;*/ /*margin: 0 auto;*/ /*padding: 0 48px;*/ } /* ========================= TABS ========================= */ .poh-leadership-tabs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 38px; } .poh-leadership-tab { appearance: none; border: 1px solid #dce2f0; background: #fff; color: #08143f; border-radius: 40px; padding: 10px 18px; font-size: 14px; line-height: 1; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .poh-leadership-tab:hover { border-color: #18214e; color: #18214e; } .poh-leadership-tab.active { background: #18214e; border-color: #18214e; color: #fff; } /* ========================= GRID ========================= */ .poh-leadership-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; } /* ========================= CARD ========================= */ .poh-leader-card { border: 1px solid #e1e1e1; border-radius: 28px; overflow: hidden; background: #fff; min-width: 0; transition: transform 0.35s ease, box-shadow 0.35s ease; animation: pohLeaderCardIn 0.45s ease both; } .poh-leader-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(20, 31, 70, 0.09); } /* ========================= IMAGE AREA ========================= */ .poh-leader-image { height: 345px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* Soft backgrounds */ .poh-leader-bg-one { background: linear-gradient( 145deg, #fff5ee 0%, #f7edf5 52%, #edf0fb 100% ); } .poh-leader-bg-two { background: linear-gradient( 145deg, #eef3fc 0%, #eeeaf8 48%, #fff0e9 100% ); } .poh-leader-bg-three { background: linear-gradient( 145deg, #eef8f6 0%, #edf3f8 50%, #fff6f0 100% ); } .poh-leader-bg-four { background: linear-gradient( 145deg, #fff4ee 0%, #f4eaf5 50%, #edf2fc 100% ); } .poh-leader-bg-five { background: linear-gradient( 145deg, #f0f5fc 0%, #f5eef9 55%, #fff1eb 100% ); } .poh-leader-bg-six { background: linear-gradient( 145deg, #eef7f5 0%, #edf2fb 50%, #fff4ee 100% ); } /* ========================= REAL IMAGE ========================= */ .poh-leader-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================= PLACEHOLDER ICON ========================= */ .poh-leader-placeholder { color: #aeb5c6; display: flex; align-items: center; justify-content: center; } .poh-leader-placeholder svg { width: 42px; height: 42px; } /* ========================= IMAGE LABEL ========================= */ .poh-image-label { position: absolute; left: 15px; bottom: 14px; background: rgba(255, 255, 255, 0.94); color: #294378; padding: 8px 13px; border-radius: 20px; font-size: 12px; line-height: 1; font-weight: 600; box-shadow: 0 3px 12px rgba(20, 30, 60, 0.04); } /* ========================= CONTENT ========================= */ .poh-leader-content { padding: 26px 26px 27px; min-height: 230px; } .poh-leader-content h3 { margin: 0 0 10px; color: #18214E; font-size: 21px; line-height: 1.3; font-weight: 700; } .poh-leader-designation { margin: 0; color: #657395; font-size: 14.5px; line-height: 1.55; font-weight: 400; } /* ========================= NOTE ========================= */ .poh-leader-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; color: #5e6a8a; font-size: 13.5px; line-height: normal; } .poh-location-icon { flex: 0 0 18px; margin-top: 3px; color: #168d7d; } .poh-location-icon svg { display: block; } /* ========================= HIDDEN CARD ========================= */ .poh-leader-card.poh-leader-hidden { display: none; } /* ========================= ANIMATION ========================= */ @keyframes pohLeaderCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ========================= TABLET ========================= */ @media (max-width: 1100px) { .poh-leadership-wrap { padding: 0 30px; } .poh-leadership-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .poh-leader-image { height: 360px; } } /* ========================= MOBILE ========================= */ @media (max-width: 650px) { .poh-leadership-section { padding: 25px 0 45px; } .poh-leadership-wrap { padding: 0 16px; } .poh-leadership-tabs { gap: 8px; margin-bottom: 25px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 5px; scrollbar-width: none; } .poh-leadership-tabs::-webkit-scrollbar { display: none; } .poh-leadership-tab { flex: 0 0 auto; padding: 12px 17px; font-size: 14px; } .poh-leadership-grid { grid-template-columns: 1fr; gap: 20px; } .poh-leader-image { height: 330px; } .poh-leader-content { padding: 23px 21px 25px; min-height: auto; } .poh-leader-content h3 { font-size: 20px; } .poh-leader-designation, .poh-leader-note { font-size: 15px; } } /* ---------- health checkup detail ---------- */ .pkg-hero{background:var(--blush);padding-block:40px 56px;border-bottom:1px solid var(--line)} .pkg-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:start} .pkg-hero h1{font-size:clamp(34px,4.4vw,54px);margin-top:14px;letter-spacing:-.024em} .pkg-hero .lede{margin-top:16px;font-size:18px;color:var(--muted);max-width:52ch} .pkg-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} .pkg-facts span{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:9px 16px;font-size:14px;font-weight:500} .pkg-facts svg{color:var(--sage)} .price-card{background:var(--paper);border:1px solid var(--line-cool);border-radius:var(--r-lg);box-shadow:var(--shadow-l);padding:28px;position:sticky;top:110px} .price-card .tag{display:inline-block;font-size:12px;font-weight:700;color:var(--coral-text);background:var(--coral-soft);padding:4px 11px;border-radius:99px} .price-card .price{display:flex;align-items:baseline;gap:10px;margin-top:14px} .price-card .price b{font-family:var(--serif);font-size:42px;font-weight:600;line-height:1} .price-card .price s{font-size:17px;color:var(--muted)} .price-card .save{font-size:13.5px;font-weight:600;color:var(--sage);margin-top:6px} .price-card .rows{margin:20px 0;padding-top:16px;border-top:1px solid var(--line-cool);display:grid} .price-card .rows div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:14.5px} .price-card .rows span{color:var(--muted)} .price-card .rows b{font-weight:600;text-align:right} .price-card .btn + .btn{margin-top:10px} .price-card .note{margin-top:12px;font-size:12.8px;color:var(--muted);text-align:center} /* grouped test list */ .testgroups{display:grid;gap:12px} .testgroups details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r)} .testgroups details[open]{border-color:var(--line-cool);box-shadow:var(--shadow-s)} .testgroups summary{ padding:18px 22px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px; font-weight:600;font-size:16px; } .testgroups summary::-webkit-details-marker{display:none} .testgroups summary .ic{width:36px;height:36px;border-radius:10px;background:var(--sky);color:var(--indigo);display:grid;place-items:center;flex:none} .testgroups details:nth-child(3n+2) summary .ic{background:var(--coral-soft);color:var(--coral-text)} .testgroups details:nth-child(3n) summary .ic{background:var(--sage-soft);color:var(--sage)} .testgroups summary .count{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted);background:var(--sand);padding:4px 11px;border-radius:99px} .testgroups summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-left:6px;margin-top:-4px;transition:transform .2s ease} .testgroups details[open] summary::after{transform:rotate(225deg);margin-top:3px} .testgroups ul{padding:0 22px 20px 72px;display:grid;grid-template-columns:1fr 1fr;gap:9px 24px} .testgroups li{font-size:14.5px;color:var(--muted);display:flex;gap:9px;align-items:flex-start} .testgroups li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--coral);flex:none;margin-top:9px} .tg-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap} .tg-tools p{font-size:15px;color:var(--muted)} .tg-tools b{color:var(--ink)} /* comparison table */ .compare td,.compare th{text-align:center} .compare td:first-child,.compare th:first-child{text-align:left} .compare .yes{color:var(--sage);font-weight:700} .compare .no{color:var(--line-cool)} .compare tr.cur td{background:var(--coral-soft)} .compare thead th.cur{background:var(--coral);color:#fff} /* add-ons */ .addons{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .addon{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px} .addon strong{display:block;font-size:15px} .addon span{display:block;font-size:13px;color:var(--muted);margin-top:2px} .addon b{font-family:var(--serif);font-size:18px;font-weight:600;white-space:nowrap} @media (max-width:1080px){ .pkg-grid{grid-template-columns:1fr;gap:32px} .price-card{position:static} .addons{grid-template-columns:1fr 1fr} } @media (max-width:760px){ .testgroups ul{grid-template-columns:1fr;padding-left:22px} .addons{grid-template-columns:1fr} .compare{font-size:13.5px} .compare td,.compare th{padding:10px 8px} } /* ========================= PROCEDURES ========================= */ .poh-procedures { position: relative; padding: 110px 0 100px; /*background: #f4f6f8;*/ overflow: hidden; } .poh-proc-wrap { /*width: 100%;*/ /*max-width: 1440px;*/ margin: auto; padding: 0 40px; } /* HEADER */ .poh-proc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 55px; } .poh-proc-kicker { display: inline-block; margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: 3px; color: #ff7517; } .poh-proc-head h2 { margin: 0; /*font-family: "Source Serif 4", serif;*/ font-size: clamp(42px, 5vw, 70px); line-height: .95; font-weight: 500; color: #18214e; } .poh-proc-head p { max-width: 460px; margin: 0; font-size: 16px; line-height: 1.8; color: #667085; } /* SLIDER */ .poh-proc-slider { width: 100%; overflow: hidden; } .poh-proc-track { display: flex; gap: 20px; width: max-content; animation: pohProcedureMove 32s linear infinite; } .poh-proc-track:hover { animation-play-state: paused; } /* CARD */ .poh-proc-card { position: relative; width: 310px; min-height: 390px; padding: 30px 28px 28px; background: #ffffff; border: 1px solid rgba(24, 33, 78, .08); display: flex; flex-direction: column; transition: transform .45s ease, background .45s ease, border-color .45s ease; overflow: hidden; } /* BIG NUMBER */ .poh-proc-number { position: absolute; top: 20px; right: 25px; font-size: 54px; line-height: 1; font-weight: 700; color: rgba(24, 33, 78, .055); transition: color .4s ease; } /* ORANGE LINE */ .poh-proc-line { width: 45px; height: 3px; margin-top: 70px; margin-bottom: 27px; background: #ff7517; transition: width .4s ease, background .4s ease; } /* HEADING */ .poh-proc-card h3 { margin: 0 0 18px; /*font-family: "Source Serif 4", serif;*/ font-size: 27px; line-height: 1.15; font-weight: 500; color: #18214e; } /* TEXT */ .poh-proc-card p { margin: 0; font-size: 14px; line-height: 1.75; color: #667085; } /* LINK */ .poh-proc-link { margin-top: auto; padding-top: 28px; display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #18214e; text-decoration: none; transition: gap .3s ease, color .3s ease; } .poh-proc-link span { font-size: 18px; line-height: 1; } /* HOVER */ .poh-proc-card:hover { transform: translateY(-10px); background: #18214e; border-color: #18214e; } .poh-proc-card:hover .poh-proc-number { color: rgba(255,255,255,.08); } .poh-proc-card:hover .poh-proc-line { width: 75px; } .poh-proc-card:hover h3 { color: #ffffff; } .poh-proc-card:hover p { color: rgba(255,255,255,.72); } .poh-proc-card:hover .poh-proc-link { color: #ff7517; gap: 14px; } /* AUTO ANIMATION */ @keyframes pohProcedureMove { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* BOTTOM */ .poh-proc-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 38px; } .poh-proc-dots { display: flex; align-items: center; gap: 7px; } .poh-proc-dots span { width: 28px; height: 3px; background: #d5d9e1; transition: width .3s ease, background .3s ease; } .poh-proc-dots span.active { width: 55px; background: #ff7517; } .poh-proc-scroll { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #98a0b3; } /* ========================= TABLET ========================= */ @media (max-width: 1100px) { .poh-proc-wrap { padding: 0 25px; } .poh-proc-head { align-items: flex-start; flex-direction: column; gap: 25px; } .poh-proc-card { width: 290px; } } /* ========================= MOBILE ========================= */ @media (max-width: 767px) { .poh-procedures { padding: 75px 0 65px; } .poh-proc-wrap { padding: 0 18px; } .poh-proc-head { margin-bottom: 35px; } .poh-proc-head h2 { font-size: 42px; } .poh-proc-head p { font-size: 14px; line-height: 1.7; } .poh-proc-track { gap: 14px; animation-duration: 28s; } .poh-proc-card { width: 275px; min-height: 360px; padding: 25px 23px; } .poh-proc-bottom { margin-top: 28px; } .poh-proc-scroll { display: none; } } /* ========================================= PACIFIC ONEHEALTH - ROOMS COLLAGE ========================================= */ .poh-rooms-section { width: 100%; padding: 100px 0; overflow: hidden; } .poh-rooms-container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 25px; } /* ---------- Heading ---------- */ .poh-rooms-heading { max-width: 700px; margin-bottom: 55px; } .poh-rooms-eyebrow { display: inline-block; margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: 2.5px; color: #ff7517; } .poh-rooms-heading h2 { margin: 0 0 18px; font-size: 48px; line-height: 1.12; font-weight: 600; color: #18214e; } .poh-rooms-heading p { margin: 0; max-width: 600px; font-size: 16px; line-height: 1.8; color: #687087; } /* ========================================= COLLAGE ========================================= */ .poh-room-collage { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px; gap: 16px; } /* ---------- Cards ---------- */ .poh-room-card { position: relative; display: block; overflow: hidden; border-radius: 18px; text-decoration: none; isolation: isolate; background: #18214e; box-shadow: 0 10px 30px rgba(24, 33, 78, 0.08); /* Animation */ opacity: 0; transform: translateY(35px); animation: pohRoomReveal 0.8s ease forwards; } /* Different sizes */ .poh-room-large { grid-column: span 2; grid-row: span 2; } .poh-room-tall { grid-column: span 1; grid-row: span 2; } .poh-room-normal { grid-column: span 1; grid-row: span 1; } .poh-room-wide { grid-column: span 2; grid-row: span 1; } /* Staggered animation */ .poh-room-card:nth-child(1) { animation-delay: .05s; } .poh-room-card:nth-child(2) { animation-delay: .12s; } .poh-room-card:nth-child(3) { animation-delay: .19s; } .poh-room-card:nth-child(4) { animation-delay: .26s; } .poh-room-card:nth-child(5) { animation-delay: .33s; } .poh-room-card:nth-child(6) { animation-delay: .40s; } .poh-room-card:nth-child(7) { animation-delay: .47s; } .poh-room-card:nth-child(8) { animation-delay: .54s; } @keyframes pohRoomReveal { to { opacity: 1; transform: translateY(0); } } /* ---------- Image ---------- */ .poh-room-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(.2,.65,.25,1), filter 0.5s ease; } /* ---------- Overlay ---------- */ .poh-room-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to top, rgba(10, 17, 45, .90) 0%, rgba(10, 17, 45, .38) 45%, rgba(10, 17, 45, 0) 75% ); transition: background .5s ease; } /* ---------- Content ---------- */ .poh-room-content { position: absolute; z-index: 2; left: 25px; right: 25px; bottom: 24px; display: flex; align-items: flex-end; gap: 15px; color: #fff; transform: translateY(8px); transition: transform .5s ease; } .poh-room-content h3 { margin: 0 0 7px; font-size: 22px; line-height: 1.2; font-weight: 600; color: #fff; } .poh-room-number { display: flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; font-size: 11px; letter-spacing: 1px; color: #fff; transition: all .4s ease; } .poh-room-link { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .5px; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; } .poh-room-link i { display: inline-block; margin-left: 6px; font-style: normal; color: #ff7517; transition: transform .3s ease; } /* ========================================= HOVER EFFECT ========================================= */ .poh-room-card:hover img { transform: scale(1.09); filter: saturate(1.08); } .poh-room-card:hover .poh-room-overlay { background: linear-gradient( to top, rgba(10, 17, 45, .96) 0%, rgba(10, 17, 45, .52) 50%, rgba(10, 17, 45, .12) 100% ); } .poh-room-card:hover .poh-room-content { transform: translateY(0); } .poh-room-card:hover .poh-room-link { opacity: 1; transform: translateY(0); } .poh-room-card:hover .poh-room-number { background: #ff7517; border-color: #ff7517; } .poh-room-card:hover .poh-room-link i { transform: translateX(5px); } /* ---------- Orange corner effect ---------- */ .poh-room-card::after { content: ""; position: absolute; right: 0; top: 0; width: 0; height: 0; border-top: 3px solid #ff7517; border-right: 3px solid #ff7517; opacity: 0; transition: width .45s ease, height .45s ease, opacity .3s ease; z-index: 3; } .poh-room-card:hover::after { width: 65px; height: 65px; opacity: 1; } /* ========================================= RESPONSIVE - TABLET ========================================= */ @media (max-width: 991px) { .poh-rooms-section { padding: 75px 0; } .poh-rooms-heading h2 { font-size: 40px; } .poh-room-collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 250px; } .poh-room-large { grid-column: span 2; grid-row: span 2; } .poh-room-tall { grid-column: span 1; grid-row: span 2; } .poh-room-normal { grid-column: span 1; grid-row: span 1; } .poh-room-wide { grid-column: span 2; grid-row: span 1; } } /* ========================================= RESPONSIVE - MOBILE ========================================= */ @media (max-width: 600px) { .poh-rooms-section { padding: 60px 0; } .poh-rooms-container { padding: 0 15px; } .poh-rooms-heading { margin-bottom: 35px; } .poh-rooms-heading h2 { font-size: 32px; } .poh-rooms-heading p { font-size: 14px; line-height: 1.7; } .poh-room-collage { grid-template-columns: 1fr 1fr; grid-auto-rows: 190px; gap: 10px; } .poh-room-large { grid-column: span 2; grid-row: span 2; } .poh-room-tall { grid-column: span 1; grid-row: span 2; } .poh-room-normal { grid-column: span 1; grid-row: span 1; } .poh-room-wide { grid-column: span 2; grid-row: span 1; } .poh-room-content { left: 15px; right: 15px; bottom: 15px; gap: 9px; } .poh-room-content h3 { font-size: 16px; margin-bottom: 3px; } .poh-room-number { min-width: 28px; height: 28px; font-size: 9px; } .poh-room-link { font-size: 10px; } /* Always show link on mobile */ .poh-room-link { opacity: 1; transform: translateY(0); } }