/* ══════════════════════════════════════════════════════════ RTL overrides — loaded only on /ur/* pages, after app.css. Most flex/grid layouts already mirror automatically because flips the inline (start/end) axis natively. This file only fixes PHYSICAL left/right/margin declarations that don't respond to `dir` on their own. ══════════════════════════════════════════════════════════ */ :root { --font-display: 'Noto Nastaliq Urdu', serif; --font-body: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', sans-serif; } body { line-height: 1.9; } /* Nastaliq's diagonal stroke needs much more vertical room than the Latin display font these headings were tuned for — otherwise wrapped lines visually overlap. */ .hero h1{line-height:2.2;} .section-title{line-height:2;} .navbar-brand-name{line-height:1.8;} .brand-name{line-height:1.8;} .js-content h3{line-height:2;} .consult-box h2{line-height:1.9;} .doctor-info h2{line-height:1.9;} .package-left h3,.package-right h3{line-height:1.9;} /* ── NAVBAR ── */ .nav-cta{margin-left:0;margin-right:6px;} .nav-lang-toggle{margin-left:0;margin-right:8px;} .ann-social{margin-left:0;margin-right:16px;} .play-btn svg{margin-left:0;margin-right:4px;} /* ── DOCTOR PHOTO BADGE ── */ .doctor-badge-box{right:auto;left:-10px;} @media(max-width:768px){.doctor-badge-box{left:auto;}} /* ── BEFORE / AFTER ── */ .ba-top-pill{left:auto;right:18px;} /* ── VISUAL TREATMENT JOURNEY ── */ .jp-badge{left:auto;right:14px;} /* ── IMAGE MODAL ── */ .modal-close{right:auto;left:22px;} .modal-prev{left:auto;right:14px;} .modal-next{right:auto;left:14px;} /* ── WARNING BOX ── */ .warning-box{border-left:none;border-right:5px solid #c03030;} .warning-box ul{padding-left:0;padding-right:18px;} /* ── COMPARISON TABLE ── */ thead th{text-align:right;} thead th:first-child{border-radius:0 20px 0 0;} thead th:last-child{border-radius:20px 0 0 0;} tbody td:first-child{text-align:right;} /* ── PACKAGE TIMELINE ── */ .timeline::before{left:auto;right:15px;} .timeline li{padding:0 46px 22px 0;} .timeline li::before{left:auto;right:4px;} /* ── JOURNEY / HOW IT WORKS ── */ .js-num{right:auto;left:calc(50% - 40px);} @media(max-width:768px){.js-num{left:auto;right:42px;}} @media(max-width:768px){.journey-step{text-align:right;}}