/* HSRMed overrides on top of the allfocusit.com template (same palette: navy #00283a, lime #92c500, green #6f9600). */
body, input, select, textarea, button { font-family: "Open Sans", Arial, sans-serif; }
html.lang-ar body, html.lang-ar input, html.lang-ar select, html.lang-ar textarea, html.lang-ar button { font-family: "Noto Sans Arabic", "Open Sans", Tahoma, sans-serif; }
html.lang-zh body, html.lang-zh input, html.lang-zh select, html.lang-zh textarea, html.lang-zh button { font-family: "Open Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[id] { scroll-margin-top: 110px; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #92c500; outline-offset: 2px; }

/* Top bar */
#topbar a, #topbar a:visited { color: #fff; }
#topbar a:hover strong { color: #92c500; }
#topbar p { opacity: 0.7; }
.lang-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 26px; }
.lang-bar .demo-link { color: #92c500 !important; font-size: 0.75em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid #92c500; border-radius: 3px; padding: 1px 10px; }
.lang-bar .demo-link:hover { background: #92c500; color: #00283a !important; }
.lang-label i { color: #fff; opacity: 0.7; font-size: 1.1em; }
#lang-select { background: #00283a; color: #fff; border: 1px solid #2a4d5e; border-radius: 3px; font-size: 0.8em; height: 26px; padding: 0 6px; width: auto; margin: 0; }

/* Logo */
.logo-link { display: flex; align-items: center; gap: 12px; padding: 14px 0; text-decoration: none; }
.logo-mark { width: 46px; height: 46px; flex: none; }
p.logo { top: 0; margin: 0; line-height: 1; font-size: 1.9em; letter-spacing: 0.02em; }
p.logo .logo-by { display: block; font-size: 0.32em; font-weight: 400; text-transform: none; letter-spacing: 0.04em; color: #92c500; margin-top: 6px; }

/* Navigation: six items, room for longer translations */
.top-nav li a { padding: 2.1em 1em 2.3em; font-size: 0.85em; }
@media screen and (min-width: 769px) and (max-width: 1100px) { .top-nav li a { padding: 2.1em 0.6em 2.3em; font-size: 0.78em; } }
.nav-text { cursor: pointer; }

/* Carousel cards (colors from the original inline styles) */
.card-grey { background-color: #cccccc; }
.card-olive { background-color: #cccc00; }
.card-blue { background-color: #ccccff; }
#carousel .text .margin > div { padding: 12px 14px; }
#carousel .text h3 { font-size: 1em; font-weight: 700; color: #00283a; margin: 0 0 6px; }
#carousel .text li { font-size: 0.85em; color: #00283a; }
#carousel .text p { background: none; color: #00283a; padding: 6px 0 0; font-weight: 600; font-size: 0.85em; }
#carousel .text blockquote { font-size: 0.75em; margin: 6px 0; }
#carousel .text ul { padding: 0 0 0 1.1em; margin: 0; }
#owl-demo, #owl-demo .owl-wrapper-outer { direction: ltr; }

/* Problem statement */
#first-block .fb-lead { color: #c9d6dc; font-size: 1.05em; line-height: 1.7; max-width: 760px; margin: 0 auto 0.5em; }
#first-block h1 { font-size: 2.4em; text-wrap: balance; }
.fb-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fb-buttons .white-btn { display: inline-block; min-width: 160px; }

/* Section leads */
.section-lead { max-width: 760px; margin: -1.2em auto 2.5em; text-align: center; color: #555; font-size: 1.05em; line-height: 1.6; }
.section-lead.light { color: #f1f7e1; }
h2.section-title { text-wrap: balance; }
html.lang-ar h2.section-title, html.lang-ru h2.section-title, html.lang-sw h2.section-title, html.lang-fr h2.section-title, html.lang-pt h2.section-title, html.lang-es h2.section-title { font-size: 3em; }
#features .feature { padding: 0 1em; }
#features h2 { min-height: 2.6em; }

/* Products */
#services .group-title { color: #fff; font-size: 1.35em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 10px; margin: 1.5em 0 1.4em; display: flex; align-items: center; gap: 14px; }
#services .group-title i { width: 44px; height: 44px; line-height: 44px; font-size: 1.1em; float: none; margin: 0; flex: none; }
#services .prod { min-height: 120px; }
#services .prod p { font-size: 0.85em; line-height: 1.55; opacity: 0.95; }
#services .platform-note { color: #fff; text-align: center; max-width: 820px; margin: 2em auto 0; font-size: 0.9em; line-height: 1.6; border-top: 1px solid rgba(255,255,255,0.35); padding-top: 1.6em; clear: both; }

/* How it works */
#how { background: #f3f3f3; padding: 6em 2em; position: relative; z-index: 3; box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.steps li { background: #fff; border-top: 4px solid #92c500; padding: 1.6em 1.4em; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.step-n { display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background: #00283a; color: #92c500; text-align: center; font-weight: 800; font-size: 1.1em; }
.steps h3 { color: #00283a; font-size: 1em; font-weight: 700; text-transform: uppercase; margin: 0.8em 0 0.5em; }
.steps p { color: #666; font-size: 0.88em; line-height: 1.6; }
@media screen and (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Who we serve */
#clients { background: #fff; padding: 6em 2em; position: relative; z-index: 2; box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); }
.who-intro { display: flex; flex-wrap: wrap; align-items: center; }
.who-intro .globe img { max-width: 220px; display: block; margin: 0 auto; }
.who-intro h3 { color: #6f9600; font-size: 1.7em; font-weight: 800; text-transform: uppercase; margin: 0 0 0.4em; }
.who-lead { font-size: 1.1em; line-height: 1.7; color: #444; max-width: 640px; }
.who-grid { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 2em; }
.who-card { border: 1px solid #e3e8ea; border-radius: 3px; padding: 1.5em 1.4em; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; }
.who-card:hover { border-color: #92c500; box-shadow: 0 2px 10px rgba(0,40,58,0.12); }
/* Who we serve cards are links to the detail pages (serve_*.html) */
a.who-card, a.who-card:visited { display: flex; flex-direction: column; color: inherit; text-decoration: none; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
a.who-card:hover, a.who-card:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,40,58,0.16); }
a.who-card p { flex: 1; }
.who-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 0.6em; color: #6f9600; font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.who-arrow { display: inline-block; transition: transform 0.2s; }
a.who-card:hover .who-arrow { transform: translateX(4px); }
html[dir=rtl] .who-arrow { transform: scaleX(-1); }
html[dir=rtl] a.who-card:hover .who-arrow { transform: scaleX(-1) translateX(4px); }
@media (prefers-reduced-motion: reduce) { a.who-card, .who-arrow { transition: none; } a.who-card:hover { transform: none; } }
.who-card i { display: inline-block; width: 52px; height: 52px; line-height: 52px; border-radius: 50%; background: #00283a; color: #92c500; text-align: center; font-size: 1.3em; }
.who-card h3 { color: #00283a; font-size: 0.98em; font-weight: 700; text-transform: uppercase; margin: 0.9em 0 0.5em; }
.who-card p { color: #666; font-size: 0.88em; line-height: 1.6; }
@media screen and (max-width: 900px) { .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 560px) { .who-grid { grid-template-columns: 1fr; } }

/* About */
#about-us article h2 { text-wrap: balance; }
html.lang-ru #about-us article h2, html.lang-sw #about-us article h2, html.lang-fr #about-us article h2, html.lang-pt #about-us article h2, html.lang-es #about-us article h2 { font-size: 3.2em; }
#about-us .media-container article { padding-top: 0; }
#about-us .media-container p { font-size: 1em; line-height: 1.7; }

/* Contact */
#contact .ct-product { color: #777; margin-bottom: 0.8em; }
#contact address a { color: #00283a; font-weight: 600; }
#contact address a:hover { color: #6f9600; }
#contact-form label { display: block; font-size: 0.85em; color: #00283a; font-weight: 600; margin-bottom: 4px; }
#contact-form select, #contact-form input[type=text], #contact-form input[type=email], #contact-form input[type=tel], #contact-form textarea { width: 100%; margin-bottom: 10px; }
#contact-form .pad-r { padding-right: 10px; }
#contact-form .consent { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 6px; }
#contact-form .consent input { width: auto; margin-top: 4px; flex: none; }
#contact-form .consent label { font-weight: 400; color: #444; margin: 0; }
#contact .phi-note { font-size: 0.78em; color: #8a5a00; background: #fff7e6; border-left: 3px solid #e0a000; padding: 8px 10px; line-height: 1.5; margin: 6px 0 10px; }
#contact .form-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
#contact .form-buttons .color-btn { display: inline-block; min-width: 110px; }
#contact .form-status { font-size: 0.85em; min-height: 1.4em; margin-top: 10px; }
#contact .form-status.error { color: #a33a3a; }
#contact .form-status.ok { color: #4d6b00; }

/* Footer */
footer p.disclaimer { line-height: 1.6; text-align: right; }
@media screen and (max-width: 768px) {
  footer p.disclaimer { text-align: left; margin-top: 1em; }
  .lang-bar { justify-content: center; padding-bottom: 4px; }
  #topbar p { text-align: center; }
  .logo-link { justify-content: center; }
  h2.section-title, html[lang] h2.section-title { font-size: 2.2em; }
  #first-block h1 { font-size: 1.8em; }
  #about-us article h2, html[lang] #about-us article h2 { font-size: 2.6em; }
  #contact-form .pad-r { padding-right: 0; }
  #features h2 { min-height: 0; }
  #how, #clients, #features, #services, #contact { padding: 4em max(16px, 1em); }
}

/* Right-to-left (Arabic) */
html[dir=rtl] body { text-align: right; }
html[dir=rtl] .s-1, html[dir=rtl] .s-2, html[dir=rtl] .s-3, html[dir=rtl] .s-4, html[dir=rtl] .s-5, html[dir=rtl] .s-6,
html[dir=rtl] .s-7, html[dir=rtl] .s-8, html[dir=rtl] .s-9, html[dir=rtl] .s-10, html[dir=rtl] .s-11, html[dir=rtl] .s-12 { float: right; }
html[dir=rtl] .right { float: left; }
html[dir=rtl] .top-nav li { float: right; }
html[dir=rtl] #services i { float: right; margin-right: 0; margin-left: 0.625em; }
html[dir=rtl] #services .group-title i { float: none; margin: 0; }
html[dir=rtl] #contact-form .pad-r { padding-right: 0; padding-left: 10px; }
html[dir=rtl] .about-us-icons i { float: right; margin-right: 0; margin-left: 0.625em; }
html[dir=rtl] article ul li { padding: 0 1em 0 0; }
html[dir=rtl] article ul li:before { margin-left: 0.625em; margin-right: -1em; }
html[dir=rtl] #carousel .text { direction: rtl; text-align: right; }
html[dir=rtl] #carousel .text ul { padding: 0 1.1em 0 0; }
html[dir=rtl] footer p.disclaimer { text-align: left; }
html[dir=rtl] #contact .phi-note { border-left: 0; border-right: 3px solid #e0a000; }
html[dir=rtl] .right-align { text-align: left; }
html[dir=rtl] h2.section-title, html[dir=rtl] #features, html[dir=rtl] #first-block { text-align: center; }
html[dir=rtl] h2.section-title, html[dir=rtl] article h2, html[dir=rtl] .who-intro h3 { letter-spacing: 0; }
@media screen and (max-width: 768px) {
  html[dir=rtl] .top-nav li { float: none; }
  html[dir=rtl] footer p.disclaimer { text-align: right; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Fixes after first render */
#features h2.section-title { font-size: 3.8em; font-weight: 700; margin: 0 0 1.25em; text-transform: uppercase; }
#features > .line > .margin, #services .margin { display: flex; flex-wrap: wrap; }
#features > .line > .margin > div, #services .margin > div { float: none; }
#about-us article p { margin-bottom: 0.9em; }
#contact .form-buttons .color-btn { width: auto; }
@media screen and (max-width: 768px) { #features h2.section-title { font-size: 2.2em; } }

/* Trademark service description (wording as filed; keep verbatim) */
.service-description { margin: 3em auto 0; max-width: 900px; background: #fff; border: 1px solid #dfe5e8; border-left: 4px solid #00283a; padding: 1.6em 1.8em; }
.service-description h3 { color: #00283a; font-size: 1em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.7em; }
.service-description .tm-mark { color: #6f9600; }
.service-description p { color: #333; font-size: 0.95em; line-height: 1.7; text-align: left; }
html[dir=rtl] .service-description { border-left: 1px solid #dfe5e8; border-right: 4px solid #00283a; }
p.logo sup.tm { font-size: 0.35em; font-weight: 400; vertical-align: super; margin-left: 2px; }
/* Show the mark exactly as written: HSRMed */
p.logo { text-transform: none; }
.service-description h3 { text-transform: none; font-size: 1.1em; letter-spacing: 0; }
.logo-link { direction: ltr; }
@media screen and (max-width: 768px) { .top-nav { clear: both; position: relative; z-index: 2; } }

/* Demo band and calls to action */
#demo { background: #00283a; padding: 4em 2em; position: relative; z-index: 3; box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); }
.demo-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.demo-text { flex: 1 1 420px; min-width: 0; }
.demo-text h2 { color: #fff; font-size: 2.2em; font-weight: 300; margin: 0 0 0.4em; text-wrap: balance; }
.demo-text p { color: #c9d6dc; font-size: 1.05em; line-height: 1.6; max-width: 620px; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.demo-primary, .demo-secondary { display: inline-block; padding: 0.8em 1.6em; border-radius: 3px; font-weight: 700; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.04em; transition: all 0.2s linear; }
.demo-primary { background: #92c500; color: #00283a !important; border: 1px solid #92c500; }
.demo-primary:hover { background: #a8dc0a; }
.demo-secondary { color: #fff !important; border: 1px solid #fff; }
.demo-secondary:hover { border-color: #92c500; color: #92c500 !important; }
.fb-buttons .white-btn.demo-btn { background: #92c500; border-color: #92c500; color: #00283a; font-weight: 700; }
.fb-buttons .white-btn.demo-btn:hover { background: #a8dc0a; }
.top-nav li.nav-demo a { color: #92c500; }
@media screen and (min-width: 769px) and (max-width: 1100px) { .top-nav li a { padding: 2.1em 0.45em 2.3em; font-size: 0.74em; } }
@media screen and (max-width: 768px) { #demo { padding: 3em max(16px, 1em); } .demo-text h2 { font-size: 1.7em; } }

/* HSRMed brand logo in the navigation bar (replaces the text logo) */
.logo-link { padding: 8px 0; }
.logo-img { display: block; height: 66px; width: auto; max-width: 100%; }
@media screen and (min-width: 769px) and (max-width: 1100px) { .logo-img { height: 54px; } }
@media screen and (max-width: 768px) { .logo-link { padding: 10px 0 6px; } .logo-img { height: 60px; margin: 0 auto; } }

/* Contact form: required fields, errors, spam trap */
#contact .req-note { font-size: 0.8em; color: #777; margin: -0.3em 0 0.8em; }
#contact-form .is-invalid { border-color: #a33a3a !important; box-shadow: 0 0 0 2px rgba(163, 58, 58, 0.15); }
#contact-form .consent input.is-invalid { outline: 2px solid #a33a3a; outline-offset: 2px; }
#contact .form-status.busy { color: #555; }
#contact-form button[disabled] { opacity: 0.6; cursor: wait; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }