/* Delhi Dental Cosmetics — global styles */
html{scroll-behavior:smooth}
body{margin:0;font-family:'Public Sans',sans-serif;color:#16303a;background:#fff;-webkit-font-smoothing:antialiased}
a{color:#0f8fb8;text-decoration:none}
a:hover{color:#0b6e90}
input::placeholder{color:#8aaab4}
/* Animations */
@keyframes ddFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes ddFloatSlow{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(3deg)}}
@keyframes ddPulse{0%{box-shadow:0 0 0 0 rgba(15,143,184,.35)}70%{box-shadow:0 0 0 16px rgba(15,143,184,0)}100%{box-shadow:0 0 0 0 rgba(15,143,184,0)}}
@keyframes ddSpin{to{transform:rotate(360deg)}}
/* Scroll-reveal states */
[data-reveal].dd-pre{opacity:0;transform:translateY(44px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
[data-reveal].dd-in{opacity:1;transform:translateY(0)}
/* Service cards (home page)
The photo area is an aspect-ratio spacer rather than a fixed margin on the
heading, so the text block always sits under the photo instead of being
pushed onto it once the title wraps in a narrow column. The body carries its
own top-fade, which means the card can grow with its text and still meet the
photo with no visible seam. */
.dd-svc{position:relative;overflow:hidden;border:1px solid #d9edf2;border-radius:20px;background:#ecf8fb;
transition:transform .3s ease,box-shadow .3s ease}
.dd-svc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.dd-svc-photo{position:relative;z-index:1;aspect-ratio:16/10}
.dd-svc-body{position:relative;z-index:2;margin-top:-46px;padding:46px 22px 22px;
background:linear-gradient(180deg,rgba(236,248,251,0) 0%,rgba(228,245,250,.82) 38%,rgba(236,248,251,.97) 70%,#ecf8fb 100%)}
.dd-svc-h{font-family:'Source Serif 4',serif;font-size:17px;font-weight:600;color:#0b3a4a;margin:0;line-height:1.3}
.dd-svc-p{font-size:13px;color:#51717a;line-height:1.6;margin:7px 0 0}
/* support.js does not implement the style-hover attribute the export used, so
the lift is a real CSS rule. Pointer-only: on touch it would stick after a tap. */
@media (hover:hover){
.dd-svc:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(11,58,74,.1)}
}
@media (prefers-reduced-motion:reduce){.dd-svc{transition:none}}
/* Testimonial marquee (home page)
One continuous row instead of a stepped carousel. The gap is a margin on the
card, not `gap` on the track: with `gap` the duplicated list is one gap short
of twice its own width, so a -50% translate lands half a gap off and the loop
visibly jumps. As a margin, card+gap tiles exactly and -50% is seamless. */
.dd-marq{position:relative;margin-top:44px;overflow:hidden}
.dd-marq::before,.dd-marq::after{content:'';position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.dd-marq::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.dd-marq::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.dd-marq-track{display:flex;width:max-content;animation:ddMarquee 46s linear infinite;will-change:transform}
.dd-marq:hover .dd-marq-track{animation-play-state:paused}
.dd-marq-card{width:352px;margin-right:24px;flex-shrink:0;box-sizing:border-box;background:#f1fafc;
border:1px solid #d9edf2;border-radius:20px;padding:26px 28px}
.dd-marq-stars{color:#F5B301;font-size:15px;letter-spacing:3px}
.dd-marq-q{font-size:14.5px;line-height:1.75;color:#37535e;margin:12px 0 0;font-style:italic}
.dd-marq-who{display:flex;align-items:center;gap:12px;margin-top:18px}
.dd-marq-av{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
background:linear-gradient(135deg,#0f8fb8,#4fc1d6);color:#fff;font-weight:700;font-size:15px}
.dd-marq-name{font-size:14px;font-weight:700;color:#0b3a4a}
.dd-marq-tag{font-size:12px;color:#8aaab4}
@keyframes ddMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
/* still scrollable by hand, just not moving on its own */
.dd-marq{overflow-x:auto}
.dd-marq-track{animation:none}
}
/* Responsive grid collapses */
@media (max-width:1020px){
.dd-2col{grid-template-columns:1fr !important}
.dd-4col{grid-template-columns:repeat(2,1fr) !important}
.dd-3col{grid-template-columns:repeat(2,1fr) !important}
.dd-nav-links{display:none !important}
}
@media (max-width:640px){
.dd-3col,.dd-4col{grid-template-columns:1fr !important}
}
/* Two-up service tiles down to 560px; below that a 160px-wide column cannot
hold a two-line title plus a sentence, so they go full width.
#services outranks the inline-style overrides in includes/responsive.php. */
@media (max-width:900px){
#services .dd-4col{grid-template-columns:repeat(2,1fr) !important;gap:14px !important}
.dd-svc-photo{aspect-ratio:16/11}
.dd-svc-body{margin-top:-40px;padding:40px 16px 18px}
.dd-svc-h{font-size:15.5px}
.dd-svc-p{font-size:12.5px;line-height:1.55;margin-top:6px}
}
/* The marquee reads better edge-to-edge, so it opts out of the shared section
gutters in includes/responsive.php (the id outranks those rules). */
@media (max-width:1024px){
#testimonials{padding-left:0 !important;padding-right:0 !important}
.dd-marq{margin-top:30px}
.dd-marq::before,.dd-marq::after{width:44px}
.dd-marq-card{width:290px;margin-right:16px;padding:22px 20px;border-radius:16px}
.dd-marq-q{font-size:14px;line-height:1.7}
.dd-marq-track{animation-duration:38s}
}
@media (max-width:480px){
.dd-marq::before,.dd-marq::after{width:24px}
.dd-marq-card{width:255px;margin-right:12px;padding:18px 18px}
.dd-marq-stars{font-size:13px;letter-spacing:2px}
.dd-marq-q{font-size:13.5px;margin-top:10px}
.dd-marq-who{margin-top:14px;gap:10px}
.dd-marq-av{width:32px;height:32px;font-size:13px}
.dd-marq-name{font-size:13px}
.dd-marq-tag{font-size:11.5px}
.dd-marq-track{animation-duration:30s}
}
@media (max-width:560px){
#services .dd-4col{grid-template-columns:1fr !important;gap:12px !important}
.dd-svc{border-radius:16px}
.dd-svc-photo{aspect-ratio:2.7/1}
.dd-svc-body{margin-top:-36px;padding:36px 18px 18px}
.dd-svc-h{font-size:16px}
.dd-svc-p{font-size:13px}
}