/* Google Fonts are now loaded via tags in each page's . Loading them here with @import forced the browser to download and parse this stylesheet before it could even discover the font URL, which delayed all text rendering. Do not re-add the @import. */ :root { --primary:#005B96;--secondary:#003F5C;--accent:#FFA500;--accent-dark:#E09000; --bg-light:#F0F4F8;--bg-white:#FFFFFF;--text:#333333;--text-light:#666666; --text-muted:#999999;--border:#E2E8F0; --shadow-sm:0 2px 8px rgba(0,91,150,0.08);--shadow-md:0 8px 30px rgba(0,91,150,0.12); --shadow-lg:0 20px 60px rgba(0,91,150,0.16); --radius-sm:6px;--radius-md:12px;--radius-lg:20px; --transition:0.3s ease;--font-head:'Poppins',sans-serif;--font-body:'Figtree',sans-serif; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--font-body);color:var(--text);background:var(--bg-white);line-height:1.7} img{max-width:100%;display:block} a{text-decoration:none;color:inherit;transition:color var(--transition)} ul{list-style:none} input,textarea,select,button{font-family:var(--font-body)} h1,h2,h3,h4,h5,h6{font-family:var(--font-head);font-weight:700;line-height:1.25;color:var(--secondary)} h1{font-size:clamp(2rem,5vw,3.5rem)} h2{font-size:clamp(1.6rem,3.5vw,2.5rem)} h3{font-size:clamp(1.1rem,2vw,1.5rem)} h4{font-size:1.1rem} p{font-size:1rem;color:var(--text-light);line-height:1.8} .text-primary{color:var(--primary)!important} .text-accent{color:var(--accent)!important} .text-white{color:#fff!important} .text-center{text-align:center} .container{max-width:1200px;margin:0 auto;padding:0 24px} .container-sm{max-width:800px;margin:0 auto;padding:0 24px} .section{padding:80px 0} .section-sm{padding:50px 0} .section-bg{background:var(--bg-light)} .section-dark{background:var(--secondary);color:#fff} .section-dark h2,.section-dark h3,.section-dark h4{color:#fff} .section-dark p{color:rgba(255,255,255,0.8)} .section-header{margin-bottom:50px} .section-label{display:inline-block;font-size:0.78rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--accent);margin-bottom:12px} .section-title{margin-bottom:16px} .section-subtitle{font-size:1.05rem;color:var(--text-light);max-width:600px} .section-header.text-center .section-subtitle{margin:0 auto} .divider{width:50px;height:4px;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:2px;margin:16px 0} .divider.center{margin:16px auto} .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:var(--radius-sm);font-family:var(--font-head);font-size:0.9rem;font-weight:600;cursor:pointer;border:2px solid transparent;transition:all var(--transition);white-space:nowrap} .btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)} .btn-primary:hover{background:var(--secondary);border-color:var(--secondary);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)} .btn-accent:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,165,0,0.3)} .btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)} .btn-outline:hover{background:var(--primary);color:#fff;transform:translateY(-2px)} .btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,0.6)} .btn-outline-white:hover{background:#fff;color:var(--primary)} .btn-lg{padding:18px 38px;font-size:1rem} .btn-sm{padding:10px 20px;font-size:0.82rem} /* NAVBAR */ .navbar{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 2px 20px rgba(0,91,150,0.1);transition:all var(--transition)} .navbar-inner{display:flex;align-items:center;justify-content:space-between;height:72px} .navbar-logo{display:flex;align-items:center;gap:12px} .logo-icon{width:44px;height:44px;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0} .logo-name{font-family:var(--font-head);font-size:1rem;font-weight:700;color:var(--secondary);line-height:1.2} .logo-tagline{font-size:0.68rem;color:var(--text-muted)} .navbar-nav{display:flex;align-items:center;gap:4px} .nav-item{position:relative} .nav-link{display:flex;align-items:center;gap:4px;padding:8px 12px;font-size:0.85rem;font-weight:500;color:var(--text);border-radius:var(--radius-sm);transition:all var(--transition);white-space:nowrap} .nav-link:hover,.nav-link.active{color:var(--primary);background:var(--bg-light)} .nav-link svg{width:13px;height:13px;transition:transform var(--transition)} .nav-item:hover .nav-link svg{transform:rotate(180deg)} .dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:240px;padding:8px 0;z-index:999;margin-top:0} .nav-item:hover .dropdown{display:block;animation:fadeDown 0.2s ease} @keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} .dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:0.875rem;color:var(--text);transition:all var(--transition)} .dropdown-item:hover{background:var(--bg-light);color:var(--primary);padding-left:26px} .dropdown-label{padding:8px 20px 4px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted)} .dropdown-divider{height:1px;background:var(--border);margin:6px 0} .nav-cta{background:var(--accent);color:#fff!important;border-radius:var(--radius-sm);padding:9px 18px!important} .nav-cta:hover{background:var(--accent-dark)!important;color:#fff!important} .nav-cta:visited{background:var(--accent)!important;color:#fff!important} .nav-cta:active{background:var(--accent-dark)!important;color:#fff!important} .nav-cta:focus{background:var(--accent)!important;color:#fff!important;outline:2px solid var(--accent-dark)} .dd-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0} .dd-icon svg{width:16px;height:16px;display:block} .card-icon svg{display:block} .icon svg{display:block} .why-icon svg{display:block} .feature-icon svg{display:block} .nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none} .nav-toggle span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:all var(--transition);display:block} .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* HERO */ .hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--secondary) 0%,var(--primary) 60%,#1a7ab8 100%);min-height:85vh;display:flex;align-items:center} .hero-content{position:relative;z-index:2;padding:80px 0} .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);padding:6px 16px;border-radius:50px;font-size:0.8rem;color:rgba(255,255,255,0.9);margin-bottom:24px;backdrop-filter:blur(4px)} .hero h1{color:#fff;margin-bottom:20px} .hero h1 span{color:var(--accent)} .hero .lead{font-size:1.1rem;color:rgba(255,255,255,0.85);max-width:540px;margin-bottom:36px} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:48px} .hero-stats{display:flex;gap:32px;flex-wrap:wrap} .stat-number{font-family:var(--font-head);font-size:1.8rem;font-weight:800;color:#fff;line-height:1} .stat-number span{color:var(--accent)} .stat-label{font-size:0.78rem;color:rgba(255,255,255,0.7);margin-top:2px} .mini-hero{background:linear-gradient(135deg,var(--secondary),var(--primary));padding:60px 0;text-align:center;position:relative;overflow:hidden} .mini-hero h1,.mini-hero h2{color:#fff;position:relative;z-index:1} .mini-hero p{color:rgba(255,255,255,0.8);position:relative;z-index:1;margin:12px auto 0;max-width:600px} .breadcrumb{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:16px;position:relative;z-index:1} .breadcrumb a,.breadcrumb span{font-size:0.82rem;color:rgba(255,255,255,0.7)} .breadcrumb a:hover{color:var(--accent)} .breadcrumb .sep{color:rgba(255,255,255,0.4)} /* CARDS */ .card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:32px;transition:all var(--transition);height:100%} .card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:transparent} .card-icon{width:60px;height:60px;background:var(--bg-light);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:20px;transition:all var(--transition)} .card:hover .card-icon{background:linear-gradient(135deg,var(--primary),#1a7ab8)} .card h3{margin-bottom:10px;font-size:1.05rem} .card p{font-size:0.9rem;margin-bottom:16px} .card-link{font-size:0.85rem;font-weight:600;color:var(--primary);display:flex;align-items:center;gap:6px} .card-link:hover{color:var(--accent)} .service-card{border-top:4px solid var(--primary)} .service-card.dental{border-top-color:var(--accent)} .grid{display:grid;gap:28px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .two-col-60{grid-template-columns:3fr 2fr} .img-box{position:relative;border-radius:var(--radius-lg);overflow:hidden} .img-box img{width:100%;height:100%;object-fit:cover} .img-box-badge{position:absolute;bottom:24px;left:24px;background:#fff;border-radius:var(--radius-md);padding:14px 20px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:12px} .badge-icon{font-size:1.6rem} .badge-num{font-family:var(--font-head);font-weight:700;font-size:1.1rem;color:var(--secondary)} .badge-label{font-size:0.72rem;color:var(--text-muted)} .feature-list{display:flex;flex-direction:column;gap:16px} .feature-item{display:flex;gap:14px;align-items:flex-start} .feature-icon{width:36px;height:36px;flex-shrink:0;background:linear-gradient(135deg,var(--primary),#1a7ab8);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:0.9rem;color:#fff;margin-top:2px} .feature-text h4{font-size:0.95rem;margin-bottom:4px} .feature-text p{font-size:0.87rem} .icon-box{text-align:center;padding:32px 20px} .icon-box .icon{width:72px;height:72px;background:linear-gradient(135deg,var(--bg-light),#dce8f4);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 20px;transition:all var(--transition)} .icon-box:hover .icon{background:linear-gradient(135deg,var(--primary),#1a7ab8)} .icon-box h3{font-size:1rem;margin-bottom:10px} .icon-box p{font-size:0.875rem} .testimonial-card{background:#fff;border-radius:var(--radius-md);padding:28px;border:1px solid var(--border);transition:all var(--transition)} .testimonial-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)} .stars{color:var(--accent);font-size:1rem;margin-bottom:14px;letter-spacing:2px} .testimonial-text{font-size:0.92rem;color:var(--text);line-height:1.7;margin-bottom:20px;font-style:italic} .testimonial-author{display:flex;align-items:center;gap:12px} .author-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1rem;font-family:var(--font-head);flex-shrink:0} .author-name{font-weight:600;font-size:0.9rem;color:var(--secondary)} .author-service{font-size:0.78rem;color:var(--text-muted)} .doctor-card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);transition:all var(--transition)} .doctor-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .doctor-card-img{height:300px;background:linear-gradient(135deg,var(--bg-light),#dce8f4);display:flex;align-items:center;justify-content:center;font-size:6rem} .doctor-card-body{padding:28px} .doctor-specialty{display:inline-block;background:var(--bg-light);color:var(--primary);font-size:0.75rem;font-weight:600;padding:4px 12px;border-radius:50px;margin-bottom:12px} .doctor-quals{font-size:0.85rem;color:var(--text-muted);margin-bottom:16px} .doctor-exp{display:flex;align-items:center;gap:8px;font-size:0.88rem;color:var(--primary);font-weight:500} .faq-item{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden} .faq-item.open{border-color:var(--primary);box-shadow:var(--shadow-sm)} .faq-question{width:100%;text-align:left;padding:18px 24px;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--font-head);font-size:0.95rem;font-weight:600;color:var(--secondary);transition:all var(--transition)} .faq-question:hover{background:var(--bg-light)} .faq-item.open .faq-question{color:var(--primary);background:rgba(0,91,150,0.04)} .faq-icon{font-size:1.2rem;transition:transform var(--transition);flex-shrink:0} .faq-item.open .faq-icon{transform:rotate(45deg)} .faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s ease} .faq-answer-inner{padding:0 24px 20px;font-size:0.92rem;color:var(--text-light);line-height:1.8} .form-group{margin-bottom:20px} .form-label{display:block;font-size:0.85rem;font-weight:600;color:var(--secondary);margin-bottom:8px} .form-control{width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:0.92rem;color:var(--text);background:#fff;transition:all var(--transition);outline:none} .form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,91,150,0.1)} .form-control::placeholder{color:var(--text-muted)} textarea.form-control{resize:vertical;min-height:120px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .appt-form-box{background:#fff;border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-lg)} .appt-form-title{font-size:1.4rem;margin-bottom:8px} .appt-form-sub{font-size:0.9rem;color:var(--text-muted);margin-bottom:28px} .cta-section{background:linear-gradient(135deg,var(--secondary),var(--primary));padding:70px 0;text-align:center;position:relative;overflow:hidden} .cta-section h2{color:#fff;position:relative;z-index:1;margin-bottom:14px} .cta-section p{color:rgba(255,255,255,0.8);position:relative;z-index:1;margin-bottom:32px;max-width:560px;margin-left:auto;margin-right:auto} .cta-section .cta-actions{position:relative;z-index:1;display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .contact-bar{background:var(--primary);padding:16px 0} .contact-bar-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px} .contact-bar-item{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,0.9);font-size:0.9rem} .contact-bar-item strong{color:#fff} .trust-bar{background:var(--bg-light);padding:28px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .trust-items{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap} .trust-item{display:flex;align-items:center;gap:10px;font-size:0.88rem;font-weight:500;color:var(--text-light)} .trust-item .icon{font-size:1.4rem} .trust-item strong{color:var(--secondary)} .floating-buttons{position:fixed;bottom:28px;right:28px;display:flex;flex-direction:column;gap:12px;z-index:999} .float-btn{display:flex;align-items:center;gap:10px;padding:13px 20px;border-radius:50px;font-size:0.85rem;font-weight:600;cursor:pointer;box-shadow:var(--shadow-md);transition:all var(--transition);white-space:nowrap;border:none;text-decoration:none} .float-btn-call{background:var(--primary);color:#fff} .float-btn-call:hover{background:var(--secondary);color:#fff;transform:translateX(-4px)} .float-btn-appt{background:var(--accent);color:#fff} .float-btn-appt:hover{background:var(--accent-dark);color:#fff;transform:translateX(-4px)} /* Floating CTA icons. The emoji span used to be the only icon, and the mobile rule below hid every span inside the button — which left two blank circles on phones. The icon is now a real SVG drawn with ::before, so it survives at all breakpoints and renders identically on every device. */ .float-btn::before{content:"";flex:0 0 auto;width:20px;height:20px;display:block; background-position:center;background-repeat:no-repeat;background-size:contain} .float-btn-call::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")} .float-btn-appt::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='12' y1='14' x2='12' y2='18'/%3E%3Cline x1='10' y1='16' x2='14' y2='16'/%3E%3C/svg%3E")} .float-btn > span:first-child{display:none} .footer{background:var(--secondary);color:rgba(255,255,255,0.8)} .footer-main{padding:70px 0 40px} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px} .footer-tagline{font-size:0.9rem;color:rgba(255,255,255,0.65);margin:16px 0 24px;line-height:1.7} .footer-contact-item{display:flex;gap:10px;margin-bottom:14px;font-size:0.875rem} .footer-contact-item .icon{color:var(--accent);flex-shrink:0;margin-top:2px} .footer h4{color:#fff;font-size:0.95rem;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid rgba(255,255,255,0.1)} .footer-links li{margin-bottom:10px} .footer-links a{font-size:0.875rem;color:rgba(255,255,255,0.65);transition:color var(--transition)} .footer-links a:hover{color:var(--accent)} .footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding:20px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px} .footer-bottom p{font-size:0.82rem;color:rgba(255,255,255,0.5)} .footer-bottom-links{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:flex-end} .footer-bottom-links a{font-size:0.82rem;color:rgba(255,255,255,0.5);white-space:nowrap} .footer-bottom-links a:hover{color:var(--accent)} .why-item{display:flex;gap:20px;align-items:flex-start;padding:24px;border-radius:var(--radius-md);border:1px solid var(--border);background:#fff;transition:all var(--transition)} .why-item:hover{box-shadow:var(--shadow-md);border-color:var(--primary);transform:translateY(-3px)} .why-icon{width:52px;height:52px;flex-shrink:0;background:linear-gradient(135deg,var(--bg-light),#dce8f4);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.5rem} .why-text h4{font-size:1rem;margin-bottom:6px} .why-text p{font-size:0.875rem} .map-wrapper{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);height:420px} .map-wrapper iframe{width:100%;height:100%;border:none} .alert{padding:16px 20px;border-radius:var(--radius-sm);margin-bottom:20px;font-size:0.9rem} .alert-success{background:#ecfdf5;border:1px solid #10b981;color:#065f46} .alert-error{background:#fef2f2;border:1px solid #ef4444;color:#991b1b} .highlight-box{background:linear-gradient(135deg,rgba(0,91,150,0.06),rgba(0,91,150,0.02));border-left:4px solid var(--primary);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:20px 24px;margin:24px 0} .highlight-box p{font-size:0.95rem;color:var(--text);margin:0} .tag-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .tag{padding:6px 14px;background:var(--bg-light);border-radius:50px;font-size:0.8rem;font-weight:500;color:var(--primary);border:1px solid rgba(0,91,150,0.2)} .steps{counter-reset:step} .step-item{display:flex;gap:20px;margin-bottom:32px} .step-item::before{counter-increment:step;content:counter(step);width:44px;height:44px;flex-shrink:0;background:linear-gradient(135deg,var(--primary),#1a7ab8);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:1rem;color:#fff;margin-top:2px} .step-content h4{margin-bottom:6px} .step-content p{font-size:0.9rem} .benefits-list{display:flex;flex-direction:column;gap:14px} .benefit-item{display:flex;gap:12px;align-items:flex-start} .benefit-check{width:22px;height:22px;flex-shrink:0;background:linear-gradient(135deg,var(--primary),#1a7ab8);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.65rem;color:#fff;margin-top:3px} .benefit-item p{font-size:0.9rem;margin:0} .mobile-nav{display:none;position:fixed;inset:0;z-index:998;background:#fff;overflow-y:auto;padding:80px 24px 32px;flex-direction:column} .mobile-nav.open{display:flex} .mobile-nav-label{font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-muted);padding:0 0 10px;border-bottom:1px solid var(--border);margin-bottom:12px} .mobile-nav-link{display:flex;align-items:center;gap:12px;padding:12px 0;font-size:1rem;color:var(--text);border-bottom:1px solid var(--bg-light);font-weight:500} .mobile-nav-link:hover{color:var(--primary)} @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} .fade-up{animation:fadeUp 0.6s ease both} .fade-up-delay-1{animation-delay:0.1s} .fade-up-delay-2{animation-delay:0.2s} .fade-up-delay-3{animation-delay:0.3s} @media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:768px){ .section{padding:56px 0} .grid-3,.grid-4{grid-template-columns:1fr 1fr} .two-col,.grid-2{grid-template-columns:1fr;gap:36px} .two-col img{order:-1;height:auto} .navbar-nav{display:none} .nav-toggle{display:flex} .footer-grid{grid-template-columns:1fr} .form-row{grid-template-columns:1fr} .hero{min-height:auto} .hero-content{padding:64px 0} .floating-buttons{bottom:16px;right:16px} .float-btn > span{display:none} .float-btn::before{width:24px;height:24px} .float-btn{padding:13px;border-radius:50%;width:48px;height:48px;justify-content:center} /* Footer bottom bar. The links used to sit in a single non-wrapping flex row, so on a phone the last item ("Medical Disclaimer") ran off the right edge while the earlier labels broke mid-phrase. They now wrap as whole labels, centred under a centred copyright line, separated by a faint dot. */ /* The floating Call / Book buttons are position:fixed and occupy the bottom ~124px of the viewport on the right. Reserve clearance underneath the footer links so they are never sitting under those buttons at the page bottom. */ .footer-bottom{flex-direction:column;align-items:center;text-align:center;gap:14px;padding:22px 0 132px} .footer-bottom p{text-align:center;line-height:1.6} /* width:100% matters — the parent is a centred column flex container, so without it this box sizes to max-content and overflows instead of wrapping. */ .footer-bottom-links{width:100%;justify-content:center;gap:10px 22px} .footer-bottom-links a{padding:5px 2px} .appt-form-box{padding:24px} } @media(max-width:480px){ .grid-3,.grid-4,.grid-2{grid-template-columns:1fr} .hero-actions{flex-direction:column;align-items:flex-start} .contact-bar-inner{flex-direction:column;align-items:flex-start} } @media(max-width:768px){ .contact-bar-item{display:none} .contact-bar-item.phone-item{display:flex} } .hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0} .hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(11,31,63,0.82) 0%,rgba(27,58,107,0.72) 60%,rgba(26,122,184,0.50) 100%);z-index:1} .page-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0} .page-hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(11,31,63,0.78) 0%,rgba(27,58,107,0.65) 100%);z-index:1} /* ---- AEO quick answer block ------------------------------------------ A short, quotable summary placed directly under the page hero. Styled to read as a highlighted definition rather than a callout box, so it stays useful to human readers as well as to search engines and AI assistants. */ .quick-answer-section{padding:36px 0 0} .quick-answer{background:var(--bg-light);border-left:4px solid var(--accent); border-radius:var(--radius-md);padding:22px 26px;box-shadow:var(--shadow-sm)} .quick-answer-label{font-family:var(--font-head);font-weight:700;font-size:0.74rem; letter-spacing:0.1em;text-transform:uppercase;color:var(--secondary);margin-bottom:8px} .quick-answer-text{font-size:1.04rem;line-height:1.75;color:var(--text);margin:0} @media(max-width:768px){ .quick-answer-section{padding:26px 0 0} .quick-answer{padding:18px 20px} .quick-answer-text{font-size:0.98rem} } /* ---- Clinic photo on narrow screens --------------------------------- The location badge ("Sapphire Mall, Sector 49") is part of the photo itself, sitting near its right edge. On a phone the fixed-height box crops the sides away and takes the badge with it. Below 768px the box drops its fixed height so the whole photo is shown at its natural proportions and the badge stays visible. Desktop is unchanged. The !important flags are needed only because the heights are set as inline styles on the elements. */ @media(max-width:768px){ .img-box-fit{height:auto !important} .img-box-fit img{height:auto !important;width:100% !important} }