@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;500;600;700&display=swap');

:root{--pink:#e00068;--purple:#7100d8;--text:#202020;--muted:#8c90a0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Titillium Web',Arial,sans-serif;color:var(--text);font-size:16px}
a{text-decoration:none;color:inherit}
.diag-header{height:143px;background:#fff;border-top:1px solid #222;position:relative;z-index:10}
.diag-header-inner{height:100%;width:calc(100% - 64px);max-width:1800px;margin:auto;display:flex;align-items:center;gap:28px}
.diag-logo{width:270px;flex:0 0 270px}
.diag-logo img{display:block;width:210px;height:auto}
.diag-location{margin-left:auto;display:flex;gap:12px;align-items:center;font-size:16px;font-weight:500;white-space:nowrap}
.pin{font-size:18px;color:#151515}
.diag-nav{display:flex;align-items:center;gap:43px;margin-left:18px}
.diag-nav>a,.diag-dropdown>button{font-size:16px;font-weight:500;color:#111;white-space:nowrap}
.diag-nav>a:hover,.diag-nav>a.active,.diag-dropdown>button:hover{color:var(--pink)}
.diag-dropdown{position:relative}
.diag-dropdown button{border:0;background:none;padding:0;cursor:pointer}
.diag-dropdown-menu{position:absolute;top:28px;left:-15px;background:#fff;min-width:170px;padding:10px 0;box-shadow:0 8px 22px rgba(0,0,0,.14);opacity:0;visibility:hidden;transform:translateY(5px);transition:.2s}
.diag-dropdown:hover .diag-dropdown-menu,.diag-dropdown.open .diag-dropdown-menu{opacity:1;visibility:visible;transform:none}
.diag-dropdown-menu a{display:block;padding:7px 16px}
.diag-actions{display:flex;margin-left:15px}
.diag-phone,.diag-appointment{height:59px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}
.diag-phone{width:236px;background:var(--purple);border-radius:5px 0 0 5px;font-size:17px;gap:10px}
.diag-appointment{width:173px;background:var(--pink);border-radius:0 5px 5px 0;font-size:17px}
.diag-menu-toggle{display:none}

/* Reference screenshot dimensions: the actual screenshot is used only as a layout reference.
   These are CSS-created layers; no screenshot is used as a page background. */
.diag-hero{height:385px;position:relative;overflow:hidden;background:#ececeb}
.diag-hero-bg{position:absolute;inset:0;background:
  linear-gradient(115deg,rgba(241,241,240,.95) 0 17%,transparent 17% 75%,rgba(240,240,239,.88) 75%),
  radial-gradient(ellipse at 83% 43%,rgba(0,83,100,.78) 0 7%,transparent 7.5%),
  linear-gradient(160deg,#e9e9e7 0%,#f7f7f5 48%,#e2e3e1 100%);
}
.diag-hero-bg:before{content:"";position:absolute;right:-4%;top:35%;width:36%;height:15%;background:linear-gradient(12deg,transparent 0 22%,rgba(38,116,129,.8) 23% 42%,rgba(224,224,221,.8) 43% 49%,rgba(42,126,139,.8) 50% 62%,transparent 63%);transform:rotate(-4deg);filter:blur(1px)}
.diag-hero-panel{position:absolute;z-index:2;left:8.7%;top:19px;width:82.9%;height:367px;background:rgba(255,255,255,.98);padding:56px 110px}
.diag-hero-panel h1{margin:0;max-width:1280px;font-size:72px;line-height:1.43;font-weight:700;letter-spacing:.2px;color:#262626}
.diag-rule{width:89px;height:4px;background:#e6e6e6;margin:34px 0 22px}
.diag-breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:19px;color:#8e92a1;font-size:20px;font-weight:300}
.diag-content{min-height:302px;background:#fff;padding:132px 11.5% 70px}
.diag-content p{margin:0;color:#8c90a0;font-size:16px;line-height:1.7;font-weight:300}
.diag-featured-img{display:block;width:100%;height:auto;margin:0 0 42px;border-radius:2px}

/* Footer: CSS layout + actual site asset reference, not a screenshot. */
.diag-footer{height:560px;position:relative;overflow:hidden;color:#fff}
.diag-footer-bg{position:absolute;inset:0;background-image:url('https://dranupama.in/wp-content/uploads/2017/10/mothers-3389671_1920-760x428.jpg');background-size:cover;background-position:center}
.diag-footer-overlay{position:absolute;inset:0;background:rgba(91,61,89,.42)}
.diag-footer-inner{position:relative;z-index:2;width:76%;max-width:1400px;margin:auto;padding-top:13px}
.diag-footer-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:60px}
.diag-card{height:411px;background:rgba(255,255,255,.98);color:#111;text-align:center;padding:50px 35px 25px}
.diag-icon{width:80px;height:80px;margin:0 auto 22px}
.diag-icon svg{width:100%;height:100%;fill:none;stroke:#df00ae;stroke-width:1.7}
.diag-card h2{margin:0;font-size:25px;line-height:1.2;font-weight:700}
.diag-card-rule{width:88px;height:3px;background:#e6e6e6;margin:35px auto 37px}
.diag-card p{margin:0;font-size:18px;line-height:1.65;color:#7d8190}
.diag-card strong{color:#202020}
.diag-card a{color:#7d8190}
.diag-card .directions{color:#444;font-weight:600}
.diag-powered{text-align:center;padding-top:72px;font-size:17px}
.diag-powered a{color:#fff}
.diag-top{position:absolute;z-index:3;right:22px;bottom:30px;width:52px;height:51px;border:0;border-radius:5px;background:#e00068;color:#fff;font-size:28px;cursor:pointer}

@media(max-width:1250px){
 .diag-header-inner{width:calc(100% - 35px)}
 .diag-location{display:none}
 .diag-logo{width:220px;flex-basis:220px}
 .diag-nav{gap:24px;margin-left:auto}
 .diag-actions{margin-left:0}
 .diag-phone{width:195px}.diag-appointment{width:140px}
 .diag-hero-panel{left:8%;width:84%;padding:48px 85px}
 .diag-hero-panel h1{font-size:60px}
}
@media(max-width:900px){
 .diag-header{height:auto;min-height:95px}
 .diag-header-inner{min-height:95px;flex-wrap:wrap;padding:13px 0}
 .diag-logo{width:auto;flex-basis:auto}
 .diag-logo img{width:180px}
 .diag-menu-toggle{display:block;border:0;background:transparent;margin-left:auto}
 .diag-menu-toggle span{display:block;width:27px;height:2px;background:#222;margin:5px}
 .diag-nav{display:none;order:5;width:100%;margin:0;flex-direction:column;align-items:stretch;gap:0}
 .diag-nav.open{display:flex}
 .diag-nav>a,.diag-dropdown>button{padding:10px 0;text-align:left}
 .diag-actions{margin-left:0}
 .diag-phone{width:50px;font-size:0}.diag-phone:first-letter{font-size:20px}
 .diag-appointment{width:115px;font-size:14px}
 .diag-hero{height:320px}
 .diag-hero-panel{left:5%;top:16px;width:90%;height:288px;padding:38px 45px}
 .diag-hero-panel h1{font-size:48px;line-height:1.2}
 .diag-breadcrumbs{font-size:16px;gap:11px}
 .diag-content{padding:80px 7% 70px}
 .diag-content p{font-size:16px}
 .diag-footer{height:auto;padding-bottom:35px}
 .diag-footer-inner{width:90%;padding-top:25px}
 .diag-footer-cards{grid-template-columns:1fr;gap:20px}
 .diag-card{height:auto;min-height:330px}
 .diag-powered{padding-top:35px;font-size:14px}
}
@media(max-width:520px){
 .diag-header-inner{width:calc(100% - 22px)}
 .diag-logo img{width:155px}
 .diag-appointment{width:100px}
 .diag-hero{height:285px}
 .diag-hero-panel{left:12px;right:12px;width:auto;height:255px;padding:30px 25px}
 .diag-hero-panel h1{font-size:34px}
 .diag-rule{margin:20px 0 16px}
 .diag-breadcrumbs{font-size:13px;gap:7px}
 .diag-content{padding:55px 20px 60px}
 .diag-content p{font-size:15px}
 .diag-card{padding:32px 20px}
 .diag-top{right:12px;bottom:12px;width:44px;height:44px}
}


/* ===== Footer icon images ===== */
.footer-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
}
.footer-icon img{
  width:52px;
  height:52px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}
@media (max-width:576px){
  .footer-icon img{
    width:48px;
    height:48px;
  }
}



.diag-breadcrumbs a:hover{
  color: #da0067;
}