/* =========================================================
MEDIXSMM — Native brand theme (real stylesheet, no JS)
Dark neon (cyan -> pink), Cairo font, pill buttons
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root{
--c:#00E5FF;
--p:#FF2E9E;
--dark:#0D0D0F;
--gray:#1A1A1F;
--gray2:#202026;
--light:#E6E6E8;
--g:linear-gradient(90deg,#00E5FF,#FF2E9E);
}

html, body{
background:var(--dark) !important;
color:var(--light) !important;
}
body, .navbar, .btn, input, select, textarea, h1, h2, h3, h4, h5, h6, p, label, a, span, li{
font-family:'Cairo', sans-serif !important;
}

/* ---------- Header / nav (blog.php, general_page.php, index.php share this markup) ---------- */
header.header, header#headerNav, nav.navbar{
background:rgba(13,13,15,.95) !important;
backdrop-filter:blur(8px);
}
header.header{
border-bottom:1px solid rgba(255,255,255,.08) !important;
box-shadow:none !important;
}
.navbar .site-logo{ filter:drop-shadow(0 0 6px rgba(0,229,255,.35)); }
.navbar-nav .nav-link, nav a, header a, .navbar-nav a{
color:var(--light) !important;
font-weight:600;
}
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
color:var(--c) !important;
}
nav a.link.btn-login{
color:var(--light) !important;
background:transparent !important;
border:1px solid rgba(255,255,255,.25) !important;
border-radius:30px !important;
padding:8px 18px !important;
}
nav a.sign-up, a.sign-up,
nav a.btn-statistics, a.btn-statistics{
background:var(--g) !important;
color:#fff !important;
border:none !important;
border-radius:30px !important;
font-weight:700;
}

/* ---------- Generic buttons / links / headings ---------- */
h1, h2, h3, h4, h5, h6{ color:#fff !important; }
a{ color:var(--c); }
.btn, .btn-primary, a.btn, button[type=submit], input[type=submit]{
background:var(--g) !important;
color:#fff !important;
border:none !important;
border-radius:30px !important;
font-weight:700;
}
.btn-outline-primary{
background:transparent !important;
border:1px solid rgba(255,255,255,.3) !important;
color:var(--light) !important;
}

/* ---------- Cards / panels / tables (services, faq, api docs content) ---------- */
.card{
background:var(--gray) !important;
border:1px solid rgba(255,255,255,.08) !important;
border-radius:16px !important;
box-shadow:none !important;
}
.card *{ color:var(--light) !important; }
.card h1, .card h2, .card h3, .card h4, .card h5{ color:#fff !important; }
.table td, .table th, table td, table th{ color:var(--light) !important; }
.table-striped>tbody>tr:nth-of-type(odd)>*{ background:rgba(255,255,255,.04) !important; }
select, .form-control, input:not([type=checkbox]):not([type=radio]), textarea{
background:var(--gray) !important;
color:var(--light) !important;
border:1px solid rgba(255,255,255,.15) !important;
border-radius:12px !important;
}
::placeholder{ color:#9a9aa0 !important; }

/* ---------- FAQ accordion ---------- */
.faqs .card, .accordion .card{ background:var(--gray) !important; }
.card-header{ background:var(--gray2) !important; border-color:rgba(255,255,255,.08) !important; }

/* ---------- Blog cards ---------- */
.blog-item, .post-item, .blog-card{
background:var(--gray) !important;
border:1px solid rgba(255,255,255,.08) !important;
border-radius:16px !important;
}
.blog-item *, .post-item *{ color:var(--light) !important; }
.blog-item h1, .blog-item h2, .blog-item h3, .blog-item h4,
.post-item h1, .post-item h2, .post-item h3, .post-item h4{ color:#fff !important; }

/* ---------- Footer (shared app/views/layouts/common/blocks/footer.php) ---------- */
.footer.footer_top{
background:#07070a !important;
border-top:1px solid rgba(255,255,255,.07) !important;
}
.footer.footer_bottom{
background:#050507 !important;
border-top:1px solid rgba(255,255,255,.06) !important;
}
.footer *{ color:var(--light) !important; }
.footer h4.title{
color:#fff !important;
position:relative;
padding-bottom:10px;
}
.footer h4.title::after{
content:"";
position:absolute;
bottom:0; inset-inline-start:0;
width:32px; height:2px;
background:var(--g);
}
.footer .quick-link a{
color:var(--light) !important;
opacity:.9;
}
.footer .quick-link a:hover{
color:var(--c) !important;
opacity:1;
}
.footer .btn-icon{
background:var(--gray) !important;
border:1px solid rgba(255,255,255,.12) !important;
color:var(--light) !important;
}
.footer .btn-icon:hover{
background:var(--g) !important;
color:#fff !important;
border-color:transparent !important;
}
.footer-lang-selector{
background:var(--gray) !important;
color:var(--light) !important;
border:1px solid rgba(255,255,255,.18) !important;
border-radius:30px !important;
}

/* ---------- Auth pages (login / signup / forgot password) ---------- */
.login-bg-image{
background:radial-gradient(circle at 15% 15%, rgba(0,229,255,.18), transparent 45%),
radial-gradient(circle at 85% 85%, rgba(255,46,158,.20), transparent 45%),
var(--dark) !important;
}
.auth-login-form .card, .auth-login-form .form-box,
.form-signin, .login-form, .register-form{
background:var(--gray) !important;
color:var(--light) !important;
border:1px solid rgba(255,255,255,.1) !important;
border-radius:24px !important;
box-shadow:0 20px 50px rgba(0,0,0,.5) !important;
}

/* ---------- Scrollbar (optional nicety, harmless for SEO) ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--dark); }
::-webkit-scrollbar-thumb{ background:var(--gray2); border-radius:10px; }

/* =========================================================
Homepage real-element visual upgrade (native markup, no JS)
Gives the existing CodeIgniter sections the dark-neon look:
circular gradient icon badges, card elevation, hero glow.
========================================================= */

/* ---- Hero (header.header) ---- */
header.header{
background:radial-gradient(circle at 15% 20%, rgba(0,229,255,.18), transparent 45%),
radial-gradient(circle at 85% 80%, rgba(255,46,158,.18), transparent 45%),
var(--dark) !important;
overflow:hidden;
}
header.header .image-container img{
filter:drop-shadow(0 20px 50px rgba(0,229,255,.25)) drop-shadow(0 10px 30px rgba(255,46,158,.15));
}
header.header .btn-getstarted{
box-shadow:0 10px 30px rgba(0,229,255,.25) !important;
}

/* ---- Stat boxes (.counts-area .count-box) ---- */
.counts-area{ padding:50px 0; }
.counts-area .count-box{
background:var(--gray) !important;
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
padding:28px 16px;
text-align:center;
transition:.25s;
}
.counts-area .count-box:hover{
border-color:var(--c);
transform:translateY(-4px);
box-shadow:0 14px 30px rgba(0,229,255,.12);
}
.counts-area .count-box > i{
display:flex;
align-items:center;
justify-content:center;
width:56px;height:56px;
margin:0 auto 14px;
border-radius:50%;
background:var(--g) !important;
color:#fff !important;
font-size:22px !important;
}
.counts-area .count-box span.purecounter{
display:block;
font-size:26px;
font-weight:800;
background:var(--g);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---- Why choose us (.why-choose-us .box) ---- */
.why-choose-us .box{
background:var(--gray) !important;
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
padding:30px 20px;
text-align:center;
transition:.25s;
}
.why-choose-us .box:hover{
border-color:var(--c);
transform:translateY(-4px);
}
.why-choose-us .box img{
width:64px;height:64px;object-fit:contain;
margin-bottom:16px;
filter:brightness(0) saturate(100%) invert(72%) sepia(84%) saturate(1000%) hue-rotate(150deg) drop-shadow(0 0 10px rgba(0,229,255,.4));
}

/* ---- Feature icon boxes (.feature .icon-box) ---- */
.feature .icon-box{
background:var(--gray) !important;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:22px;
transition:.25s;
}
.feature .icon-box:hover{ border-color:var(--p); transform:translateY(-3px); }
.feature .icon-box .icon{
width:52px;height:52px;
display:flex;align-items:center;justify-content:center;
border-radius:50%;
background:var(--g) !important;
margin-bottom:14px;
}
.feature .icon-box .icon i{ color:#fff !important; font-size:22px !important; }

/* ---- About us (.basic-1) ---- */
.basic-1 .image-container img{
border-radius:24px;
filter:drop-shadow(0 20px 40px rgba(0,229,255,.18));
}
.basic-1 .btn-getstarted{
box-shadow:0 10px 24px rgba(255,46,158,.22) !important;
}

/* ---- Platforms grid (.social-icons .feature-box) ---- */
.social-icons .feature-box{
background:var(--gray) !important;
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
padding:14px 16px;
transition:.25s;
}
.social-icons .feature-box:hover{ border-color:var(--c); transform:translateY(-2px); }
.social-icons .feature-box i{
width:40px;height:40px;
display:flex;align-items:center;justify-content:center;
border-radius:50%;
background:var(--g) !important;
color:#fff !important;
font-size:18px !important;
margin-inline-end:10px;
}

/* ---- How it works steps (.work-process-area) ---- */
.work-process-area .row{ counter-reset:mx-step; }
.work-process-area .single_work_step{
text-align:center;
position:relative;
counter-increment:mx-step;
}
.work-process-area .step-icon{
width:64px;height:64px;
margin:0 auto 18px;
border-radius:50%;
background:var(--g);
position:relative;
}
.work-process-area .step-icon::after{
content:counter(mx-step);
position:absolute; inset:0;
display:flex;align-items:center;justify-content:center;
color:#fff; font-weight:800; font-size:22px;
}

/* ---- FAQ accordion (.faq-block__card) ---- */
.faq-block__card .card{
background:var(--gray) !important;
border:1px solid rgba(255,255,255,.08) !important;
border-radius:16px !important;
margin-bottom:12px;
overflow:hidden;
}
.faq-block__header{ cursor:pointer; padding:18px 20px !important; }
.faq-block__header-title{ color:#fff !important; font-weight:700; }
.faq-block__header-title i{ color:var(--c) !important; margin-inline-end:10px; }

/* =========================================================
Hero orbit animation (logo centered, platform icons orbiting)
Native CSS, no JS - matches old mockup's rotating-icons hero
========================================================= */
.text-container{ position:relative; }
.mx-orbit{
position:relative;
width:170px;height:170px;
margin:0 auto 28px;
}
.mx-orbit-core{
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
width:72px;height:72px;
border-radius:50%;
background:var(--gray);
display:flex;align-items:center;justify-content:center;
box-shadow:0 0 35px rgba(0,229,255,.4), 0 0 15px rgba(255,46,158,.25);
z-index:2;
border:2px solid rgba(0,229,255,.5);
}
.mx-orbit-core img{ width:60%;height:60%;object-fit:contain; }
.mx-orbit-icon{
position:absolute;top:50%;left:50%;
width:34px;height:34px;margin:-17px;
border-radius:50%;
background:var(--g);
display:flex;align-items:center;justify-content:center;
color:#fff;font-size:15px;
box-shadow:0 4px 12px rgba(0,229,255,.3);
animation:mx-orbit-spin 14s linear infinite;
transform-origin:17px 17px;
}
.mx-orbit-icon:nth-of-type(1){ animation-delay:-0s; }
.mx-orbit-icon:nth-of-type(2){ animation-delay:-2.33s; }
.mx-orbit-icon:nth-of-type(3){ animation-delay:-4.67s; }
.mx-orbit-icon:nth-of-type(4){ animation-delay:-7s; }
.mx-orbit-icon:nth-of-type(5){ animation-delay:-9.33s; }
.mx-orbit-icon:nth-of-type(6){ animation-delay:-11.67s; }
@keyframes mx-orbit-spin{
from{ transform:rotate(0deg) translateX(75px); }
to{ transform:rotate(360deg) translateX(75px); }
}

/* ---- Mobile menu toggler icon (was invisible - no color set) ---- */
.navbar-toggler{ border-color:rgba(255,255,255,.25) !important; }
.navbar-toggler-awesome{ color:#fff !important; font-size:22px !important; }

/* ---- Brand name text next to logo ---- */
.mx-brand-name{
color:var(--light) !important;
font-weight:800;
font-size:20px;
margin-inline-start:10px;
letter-spacing:.5px;
background:var(--g);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.navbar-brand.logo-image{ display:flex !important; align-items:center; }

/* =========================================================
Embedded hero login card (native PHP form, real markup)
========================================================= */
.mx-hero-login-wrap{
position:relative;
z-index:3;
margin-top:-10px;
margin-bottom:40px;
display:flex;
justify-content:center;
}
.mx-login-card{
width:100%;
max-width:380px;
background:var(--gray);
border:1px solid rgba(0,229,255,.25);
border-radius:20px;
padding:28px 26px;
box-shadow:0 25px 60px rgba(0,0,0,.45), 0 0 40px rgba(0,229,255,.08);
}
.mx-login-card-title{
color:var(--light) !important;
font-weight:800;
font-size:18px;
text-align:center;
margin-bottom:18px;
}
.mx-login-card .form-group{ margin-bottom:14px; }
.mx-login-card .form-control{
background:rgba(255,255,255,.04) !important;
border:1px solid rgba(255,255,255,.12) !important;
color:var(--light) !important;
border-radius:12px !important;
height:46px;
padding:0 16px;
}
.mx-login-card .form-control::placeholder{ color:rgba(230,230,232,.5) !important; }
.mx-login-card .form-control:focus{
border-color:var(--c) !important;
box-shadow:0 0 0 3px rgba(0,229,255,.15) !important;
}
.mx-login-card .login-btn{
background:var(--g) !important;
border:none !important;
color:#fff !important;
font-weight:700;
border-radius:12px !important;
height:46px;
box-shadow:0 10px 25px rgba(0,229,255,.25);
}
.mx-login-card .login-card-footer-text{
text-align:center;
color:var(--light) !important;
opacity:.8;
margin:14px 0 0;
font-size:14px;
}
.mx-login-card .login-card-footer-text a{ color:var(--c) !important; font-weight:700; }
@media (max-width:767px){
.mx-hero-login-wrap{ padding:0 16px; }
.mx-login-card{ padding:22px 18px; }
}

/* =========================================================
New native sections: about-extra, floating icons, services
marquee, proven results, growth/phone mockup
========================================================= */
section[class^='mx-']{ padding:70px 0; position:relative; }
section[class^='mx-'] .above-heading{
display:inline-block; color:var(--c) !important; font-weight:700;
letter-spacing:.5px; margin-bottom:10px;
}
section[class^='mx-'] .h-heading{ color:var(--light) !important; font-weight:800; margin-bottom:16px; }

/* ---- About extra ---- */
.mx-about-extra-text p{ color:var(--light) !important; opacity:.8; line-height:1.9; }
.mx-about-points{ margin-top:20px; }
.mx-about-point{
color:var(--light) !important; opacity:.9; margin-bottom:12px; font-weight:600;
}
.mx-about-point i{ color:var(--c) !important; margin-inline-end:8px; }
.mx-about-extra-stats{
display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
}
.mx-about-stat{
flex:1 1 140px; background:var(--gray); border:1px solid rgba(255,255,255,.08);
border-radius:18px; text-align:center; padding:28px 14px;
}
.mx-about-stat span{
display:block; font-size:28px; font-weight:800;
background:var(--g); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.mx-about-stat p{ color:var(--light) !important; opacity:.75; margin:6px 0 0; font-size:14px; }

/* ---- Floating icons strip ---- */
.mx-float-wrap{ position:relative; height:90px; overflow:hidden; }
.mx-float-icons{ position:relative; height:100%; }
.mx-float-icon{
position:absolute; width:46px;height:46px; border-radius:50%;
background:var(--g); color:#fff; display:flex; align-items:center; justify-content:center;
font-size:18px; box-shadow:0 10px 25px rgba(0,229,255,.2);
animation:mx-float-bob 4s ease-in-out infinite;
}
.mx-float-icon.i1{ inset-inline-start:5%; top:10px; animation-delay:0s; }
.mx-float-icon.i2{ inset-inline-start:20%; top:35px; animation-delay:.6s; }
.mx-float-icon.i3{ inset-inline-start:38%; top:5px; animation-delay:1.2s; }
.mx-float-icon.i4{ inset-inline-start:56%; top:30px; animation-delay:1.8s; }
.mx-float-icon.i5{ inset-inline-start:74%; top:8px; animation-delay:2.4s; }
.mx-float-icon.i6{ inset-inline-start:90%; top:32px; animation-delay:3s; }
@keyframes mx-float-bob{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-16px); }
}

/* ---- Services marquee (خدماتنا) ---- */
.mx-services{ padding-bottom:40px; overflow:hidden; }
.mx-services-marquee{ overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.mx-services-track{
display:flex; gap:18px; width:max-content;
animation:mx-services-scroll 22s linear infinite;
}
.mx-services:hover .mx-services-track{ animation-play-state:paused; }
@keyframes mx-services-scroll{
from{ transform:translateX(0); }
to{ transform:translateX(-50%); }
}
.mx-service-card{
flex:0 0 auto; width:160px; background:var(--gray); border:1px solid rgba(255,255,255,.08);
border-radius:18px; padding:26px 14px; text-align:center;
}
.mx-service-card i{
display:flex; align-items:center; justify-content:center; width:50px;height:50px;
margin:0 auto 12px; border-radius:50%; background:var(--g); color:#fff; font-size:20px;
}
.mx-service-card span{ color:var(--light) !important; font-weight:700; }

/* ---- Proven results (نتائج مثبتة) ---- */
.mx-results{ background:radial-gradient(circle at 50% 0%, rgba(255,46,158,.08), transparent 60%); }
.mx-result-box{
background:var(--gray); border:1px solid rgba(255,255,255,.08); border-radius:20px;
padding:30px 16px; text-align:center;
}
.mx-result-box i{
display:flex; align-items:center; justify-content:center; width:56px;height:56px;
margin:0 auto 14px; border-radius:50%; background:var(--g); color:#fff; font-size:22px;
}
.mx-result-box > div{ display:inline-block; }
.mx-result-box .purecounter{
font-size:30px; font-weight:800; color:var(--light) !important;
}
.mx-result-box p{ color:var(--light) !important; opacity:.75; margin:6px 0 0; }

/* ---- Growth / phone mockup (شاهد نمو مستخدمينا) ---- */
.mx-growth-text p{ color:var(--light) !important; opacity:.8; line-height:1.9; margin-bottom:20px; }
.mx-phone-mockup{
position:relative; max-width:260px; margin:0 auto;
aspect-ratio:9/18; border-radius:36px;
background:linear-gradient(160deg, var(--gray2), var(--gray));
border:6px solid #0d0d0f; box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 60px rgba(0,229,255,.15);
padding:10px;
}
.mx-phone-mockup::before{
content:''; position:absolute; top:16px; left:50%; transform:translateX(-50%);
width:60px; height:6px; border-radius:4px; background:rgba(255,255,255,.15);
}
.mx-phone-mockup-screen{
width:100%; height:100%; border-radius:26px;
background:radial-gradient(circle at 30% 20%, rgba(0,229,255,.25), transparent 55%),
radial-gradient(circle at 75% 80%, rgba(255,46,158,.25), transparent 55%),
var(--dark);
display:flex; align-items:center; justify-content:center;
overflow:hidden;
}
.mx-phone-mockup-logo{
width:55%; opacity:.9;
filter:drop-shadow(0 0 25px rgba(0,229,255,.5));
animation:mx-logo-spin 10s linear infinite;
}
@keyframes mx-logo-spin{
from{ transform:rotate(0deg); }
to{ transform:rotate(360deg); }
}
@media (max-width:991px){
.mx-phone-mockup{ margin-top:30px; }
}

/* =========================================================
MONOKA theme - native brand styling (dark neon cyan/pink)
========================================================= */
.navbar-custom{ background:rgba(13,13,15,.95) !important; backdrop-filter:blur(8px); box-shadow:none !important; border-bottom:1px solid rgba(255,255,255,.08); }
.navbar-custom .navbar-brand img{ filter:drop-shadow(0 0 6px rgba(0,229,255,.35)); }
.navbar-custom .nav-link, .navbar-custom a, .navbar-toggler-awesome{ color:var(--light) !important; }
.navbar-custom .btn-outline-sm{ border:2px solid var(--c) !important; color:var(--light) !important; border-radius:30px; }
.navbar-custom .btn-outline-sm:hover{ background:var(--g) !important; border-color:transparent !important; }

/* ---- Hero header ---- */
header.header{
background:radial-gradient(circle at 15% 20%, rgba(0,229,255,.18), transparent 45%),
radial-gradient(circle at 85% 80%, rgba(255,46,158,.18), transparent 45%),
var(--dark) !important;
}
header.header svg path{ fill:var(--dark) !important; }
header.header h1, header.header h2, header.header .above-heading{ color:var(--light) !important; }
header.header p{ color:var(--light) !important; opacity:.85; }

/* ---- Embedded login card in hero ---- */
header.header .form-group .form-control{
background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important;
color:var(--light) !important; border-radius:12px !important; height:46px;
}
header.header .form-control::placeholder{ color:rgba(230,230,232,.55) !important; }
header.header .form-control:focus{ border-color:var(--c) !important; box-shadow:0 0 0 3px rgba(0,229,255,.15) !important; }
.btn-solid-lg{ background:var(--g) !important; border:none !important; color:#fff !important; border-radius:30px !important; font-weight:700; box-shadow:0 10px 25px rgba(0,229,255,.25); }
header.header a, header.header label, header.header .checkbox{ color:var(--light) !important; }
header.header a:hover{ color:var(--c) !important; }

/* ---- Social platform logo slider ---- */
section.social-icon{ background:var(--gray) !important; padding:40px 0; }
section.social-icon .swiper-slide img{ filter:brightness(0) saturate(100%) invert(90%) opacity(.8); max-height:40px; }

/* ---- About us ---- */
section.about-us{ background:var(--dark) !important; }
section.about-us h1, section.about-us h2, section.about-us .above-heading{ color:var(--light) !important; }
section.about-us p, section.about-us span{ color:var(--light) !important; opacity:.85; }
section.about-us img{ filter:drop-shadow(0 20px 40px rgba(0,229,255,.18)); border-radius:20px; }

/* ---- Why choose us cards ---- */
section.why-choose-us{ background:var(--dark) !important; }
section.why-choose-us .above-heading, section.why-choose-us h2{ color:var(--light) !important; }
section.why-choose-us .card{
background:var(--gray) !important; border:1px solid rgba(255,255,255,.08) !important;
border-radius:18px !important; transition:.25s;
}
section.why-choose-us .card:hover{ border-color:var(--c) !important; transform:translateY(-4px); }
section.why-choose-us .card-title{ color:var(--light) !important; font-weight:700; }
section.why-choose-us .card-body p{ color:var(--light) !important; opacity:.8; }
section.why-choose-us .card-image img{ filter:brightness(0) saturate(100%) invert(72%) sepia(84%) saturate(1000%) hue-rotate(150deg); max-width:60px; }

/* ---- How it works ---- */
.how-it-works-card, section[class*='how-it-works']{ background:transparent !important; }
.how-it-works-number{ background:var(--g) !important; box-shadow:0 10px 25px rgba(0,229,255,.25) !important; }
.how-it-works-title{ color:var(--light) !important; }
.how-it-works-description{ color:var(--light) !important; opacity:.8; }
.how-it-works-arrow-top svg path, .how-it-works-arrow-bottom svg path{ fill:var(--c) !important; opacity:.4; }

/* ---- We offer (about/services copy) ---- */
section.we-offer{ background:var(--gray) !important; }
section.we-offer h1, section.we-offer h2, section.we-offer .above-heading{ color:var(--light) !important; }
section.we-offer p, section.we-offer span{ color:var(--light) !important; opacity:.85; }

/* ---- Testimonials ---- */
section[class*='testimonial']{ background:var(--dark) !important; }
.testimonial-text{ color:var(--light) !important; opacity:.9; }
.testimonial-author{ color:var(--c) !important; font-weight:700; }
.image-wrapper img{ border-radius:50%; border:2px solid var(--c); }
.swiper-button-next, .swiper-button-prev{ color:var(--c) !important; }

/* ---- Newsletter subscriber ---- */
section.subscriber{ background:var(--gray) !important; }
section.subscriber .above-heading, section.subscriber h2, section.subscriber p{ color:var(--light) !important; }
section.subscriber .form-control{ background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important; color:var(--light) !important; }

/* ---- Footer ---- */
footer{ background:#0a0a0c !important; border-top:1px solid rgba(255,255,255,.08); }
footer, footer p, footer small{ color:var(--light) !important; opacity:.7; }
.social-icon.fab, span.social-icon{ color:var(--c) !important; }
span.social-icon:hover{ color:var(--p) !important; }

/* =========================================================
MONOKA - navbar brand text (logo + MEDIXSMM wordmark)
========================================================= */
.navbar-brand.logo-image{ display:flex; align-items:center; gap:10px; }
.navbar-brand-text{ font-weight:800; font-size:20px; letter-spacing:.5px; background:linear-gradient(90deg,#00E5FF,#FF2E9E); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* =========================================================
MEDIX ORBIT - original hero visual: logo centered, service
icons orbiting around it connected by thin glowing lines
========================================================= */
.medix-orbit-col{ display:flex; align-items:center; justify-content:center; margin-bottom:28px; }
.medix-phone-stage{ position:relative; width:340px; height:470px; max-width:100%; margin:0 auto; perspective:1100px; }
.medix-phone-glow{ position:absolute; left:8%; right:8%; top:12%; bottom:12%; border-radius:50%; background:radial-gradient(circle, rgba(0,229,255,.38) 0%, rgba(255,46,158,.2) 45%, transparent 72%); filter:blur(28px); animation:mp-glow 6s ease-in-out infinite; z-index:0; }
.medix-phone-float{ position:absolute; inset:0; z-index:2; transform-style:preserve-3d; animation:mp-float 6s ease-in-out infinite; }
.medix-phone{ --ry:-16deg; --rx:6deg; position:absolute; left:50%; top:50%; width:210px; height:430px; margin:-215px 0 0 -105px; padding:9px; border-radius:36px; font-size:12px; background:linear-gradient(145deg,#24242c,#0a0a0d); box-shadow:0 0 0 2px rgba(255,255,255,.08), 0 0 0 4px #0b0b0f, 0 0 0 5px rgba(0,229,255,.45), 0 30px 60px rgba(0,0,0,.65), 0 0 70px rgba(0,229,255,.28); transform:rotateY(var(--ry)) rotateX(var(--rx)); transition:transform .3s ease-out; direction:ltr; }
.medix-phone::after{ content:""; position:absolute; inset:9px; border-radius:28px; background:linear-gradient(120deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 35%); pointer-events:none; z-index:3; }
.medix-phone-notch{ position:absolute; top:15px; left:50%; width:62px; height:16px; margin-left:-31px; border-radius:10px; background:#000; z-index:4; }
.medix-phone-screen{ position:relative; width:100%; height:100%; border-radius:28px; overflow:hidden; background:radial-gradient(120% 60% at 50% 0%, rgba(0,229,255,.12), transparent 60%), linear-gradient(180deg,#12121a,#09090d); display:flex; flex-direction:column; gap:.75em; padding:2.6em 1em 1em; text-align:left; }
.mp-top{ display:flex; align-items:center; gap:.6em; }
.mp-avatar{ flex:0 0 auto; width:2.8em; height:2.8em; border-radius:50%; padding:2px; background:conic-gradient(from 0deg,#00E5FF,#FF2E9E,#FFC24B,#00E5FF); }
.mp-avatar img{ display:block; width:100%; height:100%; border-radius:50%; background:#0b0b10; padding:.35em; object-fit:contain; }
.mp-name{ flex:1; color:#fff; font-weight:700; font-size:1.05em; white-space:nowrap; }
.mp-name i{ color:#00E5FF; font-size:.85em; margin-left:.2em; }
.mp-more{ color:rgba(255,255,255,.6); }
.mp-stats{ display:flex; gap:.4em; }
.mp-stats > div{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.25em; padding:.55em .2em; border-radius:.8em; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:#fff; }
.mp-stats i{ font-size:.9em; color:#00E5FF; }
.mp-stats > div:nth-child(2) i{ color:#FF2E9E; }
.mp-stats > div:nth-child(3) i{ color:#FFC24B; }
.mp-stats b{ font-size:1em; font-weight:800; font-variant-numeric:tabular-nums; }
.mp-media{ position:relative; flex:1; min-height:0; border-radius:1.1em; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#0d0d14; }
.mp-media::before{ content:""; position:absolute; inset:-50%; background:conic-gradient(from 0deg, rgba(0,229,255,.5), rgba(255,46,158,.5), rgba(255,194,75,.35), rgba(0,229,255,.5)); animation:mp-spin 8s linear infinite; }
.mp-media::after{ content:""; position:absolute; inset:2px; border-radius:1em; background:radial-gradient(circle at 50% 45%, rgba(20,20,30,.5), rgba(9,9,13,.92) 75%); }
.mp-media img{ position:relative; z-index:1; width:56%; max-height:70%; object-fit:contain; filter:drop-shadow(0 0 18px rgba(0,229,255,.55)); animation:mp-logo 4s ease-in-out infinite; }
.mp-pop{ position:absolute; z-index:2; left:50%; top:50%; width:1em; margin:-.5em 0 0 -.5em; text-align:center; font-size:4.5em; color:#FF2E9E; opacity:0; filter:drop-shadow(0 0 14px #FF2E9E); animation:mp-pop 4s ease-in-out infinite; }
.mp-actions{ display:flex; align-items:center; gap:1.1em; color:#fff; font-size:1.25em; }
.mp-like{ color:#FF2E9E; animation:mp-beat 1.6s ease-in-out infinite; }
.mp-save{ margin-left:auto; }
.mp-likes{ color:#fff; font-weight:700; font-size:1em; font-variant-numeric:tabular-nums; }
.mp-likes i{ color:#FF2E9E; margin-right:.35em; }
.mp-bar{ height:.5em; border-radius:1em; background:rgba(255,255,255,.08); overflow:hidden; }
.mp-bar span{ display:block; height:100%; width:30%; border-radius:inherit; background:linear-gradient(90deg,#00E5FF,#FF2E9E); animation:mp-fill 4s ease-in-out infinite; }
.mp-heart{ position:absolute; left:var(--x,50%); bottom:30%; z-index:4; color:#FF2E9E; font-size:var(--s,16px); opacity:0; filter:drop-shadow(0 0 8px rgba(255,46,158,.9)); animation:mp-rise var(--d,3.5s) ease-out infinite; animation-delay:var(--dl,0s); }
.mp-toast{ position:absolute; z-index:5; display:flex; align-items:center; gap:.45em; padding:.5em .8em .5em .5em; border-radius:1em; font-size:12px; background:rgba(16,16,24,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.12); color:#fff; white-space:nowrap; direction:ltr; box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 22px -6px var(--c,#00E5FF); animation:mp-toast var(--d,6s) ease-in-out infinite; animation-delay:var(--dl,0s); }
.mp-toast b{ font-weight:800; font-size:1.1em; }
.mp-ico{ width:2em; height:2em; border-radius:.6em; display:flex; align-items:center; justify-content:center; background:var(--c,#00E5FF); color:#fff; font-size:1.05em; }
.mp-ico--tt{ background:#000; box-shadow:inset 2px 2px 0 #25F4EE, inset -2px -2px 0 #FE2C55; }
.mp-sub{ color:#2BE38B; font-size:.9em; }
@keyframes mp-float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
@keyframes mp-glow{ 0%,100%{opacity:.75; transform:scale(1);} 50%{opacity:1; transform:scale(1.08);} }
@keyframes mp-spin{ to{transform:rotate(360deg);} }
@keyframes mp-logo{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.06);} }
@keyframes mp-pop{ 0%,55%,100%{opacity:0; transform:scale(.3);} 62%{opacity:1; transform:scale(1.15);} 72%{opacity:1; transform:scale(.95);} 85%{opacity:0; transform:scale(1.2);} }
@keyframes mp-beat{ 0%,100%{transform:scale(1);} 15%{transform:scale(1.25);} 30%{transform:scale(1);} 45%{transform:scale(1.15);} }
@keyframes mp-fill{ 0%{width:15%;} 80%,100%{width:96%;} }
@keyframes mp-rise{ 0%{opacity:0; transform:translate(0,0) scale(.5);} 15%{opacity:1;} 100%{opacity:0; transform:translate(var(--dx,10px),-170px) scale(1.15);} }
@keyframes mp-toast{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }
@media (prefers-reduced-motion: reduce){ .medix-phone-glow, .medix-phone-float, .mp-media::before, .mp-media img, .mp-pop, .mp-like, .mp-bar span, .mp-heart, .mp-toast{ animation:none; } .mp-heart{ display:none; } }
@media (max-width:991px){ .medix-phone-stage{ width:330px; height:450px; } .medix-phone{ width:200px; height:410px; margin:-205px 0 0 -100px; font-size:11.5px; } }
@media (max-width:767px){ .medix-phone-stage{ width:310px; height:420px; } .medix-phone{ width:186px; height:380px; margin:-190px 0 0 -93px; font-size:10.8px; border-radius:32px; } .mp-toast{ font-size:11px; } }
@media (max-width:575px){ .medix-phone-stage{ width:290px; height:395px; } .medix-phone{ width:174px; height:356px; margin:-178px 0 0 -87px; font-size:10px; } .mp-toast{ font-size:10.5px; } }
@media (max-width:420px){ .medix-phone-stage{ width:270px; height:370px; } .medix-phone{ width:162px; height:332px; margin:-166px 0 0 -81px; font-size:9.4px; } .mp-toast{ font-size:10px; } }

/* =========================================================
GLOBAL RESPONSIVE FIXES - phones & tablets, all pages
========================================================= */
html, body{ max-width:100%; overflow-x:hidden; }
img, svg, video{ max-width:100%; height:auto; }
.table-responsive{ -webkit-overflow-scrolling:touch; }

@media (max-width:991px){
.medix-orbit{ width:270px; height:270px; }
.medix-orbit-center{ width:72px;height:72px;margin:-36px 0 0 -36px; }
header.header{ padding-top:30px; padding-bottom:50px; text-align:center; }
.navbar-brand-text{ font-size:17px; }
}

@media (max-width:767px){
.container{ padding-left:16px; padding-right:16px; }
header.header h1, header.header .above-heading{ font-size:26px !important; line-height:1.35; }
header.header p.p-large{ font-size:15px; }
.medix-orbit{ width:240px; height:240px; margin-bottom:14px; }
.medix-orbit-center{ width:66px;height:66px;margin:-33px 0 0 -33px; }
.medix-orbit-center img{ max-width:55%; }
section.why-choose-us .card, .how-it-works-card{ margin-bottom:20px; }
.btn-solid-lg{ width:100%; text-align:center; }
.testimonial-text{ font-size:14px; }
footer .row > div{ text-align:center; margin-bottom:14px; }
}

@media (max-width:575px){
.medix-orbit{ width:210px; height:210px; }
.medix-orbit-center{ width:58px;height:58px;margin:-29px 0 0 -29px; }
header.header .form-container{ padding:20px 14px; }
.navbar-custom .container{ padding-left:12px; padding-right:12px; }
}

/* Fix: restore icon font on FA glyph elements overridden by global Cairo rule */
.fa, .fas, .far, .fal, .fab, .navbar-toggler-awesome, [class*=" fa-"], [class^="fa-"]{ font-family:"Font Awesome 5 Free" !important; font-weight:900 !important; }
.fab{ font-family:"Font Awesome 5 Brands" !important; font-weight:400 !important; }

/* =========================================================
TRUST BADGE - stars + avatar circles + join count
(original: icon-based avatars, own copy, not scraped)
========================================================= */
.medix-trust-badge{ margin-bottom:16px; }
.medix-trust-stars{ color:#FFB800; font-size:14px; letter-spacing:3px; margin-bottom:8px; }
.medix-trust-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.medix-trust-avatars{ display:flex; }
.medix-trust-avatar{ width:32px; height:32px; border-radius:50%; background:var(--bg,#00E5FF); border:2px solid #0D0D0F; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; margin-inline-end:-10px; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.medix-trust-avatar:last-child{ margin-inline-end:0; }
.medix-trust-text{ color:#E6E6E8; font-size:14px; font-weight:600; }
.medix-trust-text strong{ color:#00E5FF; }
@media (max-width:575px){ .medix-trust-stars{ font-size:13px; } .medix-trust-avatar{ width:28px;height:28px;font-size:11px; } .medix-trust-text{ font-size:13px; } }

.medix-avatar-svg{ width:60%; height:60%; fill:#fff; opacity:.92; }
.medix-trust-avatar{ overflow:hidden; }

/* =========================================================
STATS STRIP + ABOUT US (original content, real price)
========================================================= */
.medix-stats-strip{ background:#0D0D0F; padding:50px 0 10px; }
.medix-stat-card{ background:#1A1A1F; border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:28px 20px; text-align:center; margin-bottom:24px; transition:.25s; }
.medix-stat-card:hover{ border-color:#00E5FF; transform:translateY(-4px); }
.medix-stat-icon{ width:56px; height:56px; margin:0 auto 14px; border-radius:50%; background:linear-gradient(90deg,#00E5FF,#FF2E9E); display:flex; align-items:center; justify-content:center; font-size:22px; color:#0D0D0F; }
.medix-stat-title{ color:#E6E6E8; opacity:.75; font-size:14px; margin-bottom:6px; }
.medix-stat-value{ color:#fff; font-size:24px; font-weight:800; }
.medix-about{ background:#0D0D0F; padding:20px 0 60px; }
.medix-about-title{ color:#fff; font-weight:800; margin-bottom:18px; }
.medix-about-title::after{ content:""; display:block; width:60px; height:3px; background:linear-gradient(90deg,#00E5FF,#FF2E9E); margin:12px auto 0; border-radius:2px; }
.medix-about-text{ color:#E6E6E8; opacity:.85; font-size:16px; line-height:1.9; max-width:760px; margin:0 auto; }
@media (max-width:767px){ .medix-stats-strip{ padding:36px 0 4px; } .medix-stat-card{ padding:22px 16px; } .medix-about{ padding:10px 0 44px; } .medix-about-text{ font-size:14px; } }

/* =========================================================
PLATFORM MARQUEE - slow infinite scroll of service icons
========================================================= */
.medix-platforms-marquee{ text-align:left; background:#0D0D0F; padding:36px 0 54px; overflow:hidden; border-top:1px solid rgba(255,255,255,.06); }
.medix-marquee-track{ display:flex; direction:ltr; }
.medix-marquee-scroll{ overflow-x:hidden; overflow-y:hidden; width:100%; direction:ltr; }
.medix-marquee-group{ direction:ltr; display:flex; }
.medix-marquee-item{ flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 28px; min-width:64px; }
.medix-marquee-icon{ width:58px; height:58px; border-radius:50%; background:var(--c,#00E5FF); display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.medix-marquee-icon[data-dark="1"]{ color:#0D0D0F; }
.medix-marquee-label{ color:#E6E6E8; font-size:13px; opacity:.85; white-space:nowrap; }
}
@media (max-width:767px){ .medix-marquee-icon{ width:46px;height:46px;font-size:19px; } .medix-marquee-item{ margin:0 16px; } .medix-marquee-label{ font-size:11px; } }


/* ============ Hero floating 3D icons ============ */
#home.header{ position:relative; }
.header-content{ position:relative; z-index:2; }
.medix-hero-float-icons{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; perspective:1200px; }
.medix-float-icon{ position:absolute; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:var(--c,#00E5FF); box-shadow:0 8px 24px rgba(0,0,0,.28), 0 0 18px -4px var(--c,#00E5FF); opacity:.55; --mx:0px; --my:0px; transform-style:preserve-3d; animation:medix-float var(--dur,9s) ease-in-out infinite; animation-delay:var(--delay,0s); will-change:transform; }
@keyframes medix-float{ 0%,100%{ transform:translate(var(--mx,0px),var(--my,0px)) translateY(0) rotateY(0deg); } 50%{ transform:translate(var(--mx,0px),var(--my,0px)) translateY(-20px) rotateY(180deg); } }
@media (max-width:991px){ .medix-float-icon{ opacity:.4; } }
@media (max-width:575px){
  .medix-hero-float-icons{ display:block; }
  .medix-float-icon{ width:34px !important; height:34px !important; font-size:15px !important; opacity:.65; }
  .medix-float-icon:nth-child(1){ top:5% !important; left:4% !important; right:auto !important; }
  .medix-float-icon:nth-child(2){ top:19% !important; left:4% !important; right:auto !important; }
  .medix-float-icon:nth-child(3){ top:8% !important; left:auto !important; right:4% !important; }
  .medix-float-icon:nth-child(4){ top:29% !important; left:auto !important; right:4% !important; }
  .medix-float-icon:nth-child(5){ top:12% !important; left:4% !important; right:auto !important; }
  .medix-float-icon:nth-child(6){ top:18% !important; left:auto !important; right:4% !important; }
  .medix-float-icon:nth-child(7){ top:26% !important; left:4% !important; right:auto !important; }
}
@media (prefers-reduced-motion: reduce){ .medix-float-icon{ animation:none; } }

/* ============ Marquee: smooth CSS scroll + glow on hover ============ */
.medix-marquee-track{ width:max-content; animation:medix-marquee-scroll 34s linear infinite; }
.medix-marquee-scroll:hover .medix-marquee-track{ animation-play-state:paused; }
@keyframes medix-marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.medix-marquee-icon{ transition:transform .25s ease, box-shadow .25s ease; }
.medix-marquee-item:hover .medix-marquee-icon{ transform:scale(1.14) translateY(-4px); box-shadow:0 0 30px 6px var(--c,#00E5FF), 0 6px 18px rgba(0,0,0,.35); }
.medix-marquee-item:hover .medix-marquee-label{ color:#fff; }
@media (prefers-reduced-motion: reduce){ .medix-marquee-track{ animation:none; } }

@font-face{ font-family:"FA6TikTokOnly"; src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:block; }
.fa6-tiktok{ font-family:"FA6TikTokOnly" !important; font-weight:400 !important; }
.fa6-tiktok:before{ content:"\e07b" !important; }
.medix-marquee-svg{ width:1em; height:1em; }
.medix-hero-divider{ height:4px; width:90%; max-width:1100px; margin:-45px auto 0; border-radius:6px; background:linear-gradient(90deg,#00E5FF,#FF2E9E); box-shadow:0 0 18px rgba(0,229,255,.5),0 0 18px rgba(255,46,158,.4); position:relative; z-index:2; }
@media(max-width:767px){ .medix-hero-divider{ margin-top:-25px; height:3px; } }
.medix-features{ background:#0D0D0F; padding:50px 20px 60px; text-align:center; }
.medix-features-cta{ display:inline-block; padding:14px 38px; margin-bottom:40px; border-radius:30px; background:linear-gradient(90deg,#00E5FF,#FF2E9E); color:#0D0D0F; font-weight:700; font-size:16px; text-decoration:none; box-shadow:0 8px 24px rgba(0,229,255,.25); transition:transform .2s ease; }
.medix-features-cta:hover{ transform:translateY(-2px); color:#0D0D0F; }
.medix-features-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:900px; margin:0 auto; }
.medix-feature-card{ background:#15151A; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:28px 16px; text-align:center; }
.medix-feature-icon{ width:64px; height:64px; margin:0 auto 16px; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(0,229,255,.25), rgba(255,46,158,.18)); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:30px; line-height:1; }
.medix-feature-title{ color:#fff; font-size:16px; font-weight:700; margin-bottom:8px; }
.medix-feature-desc{ color:#B8B8BE; font-size:13px; line-height:1.6; margin:0; }
@media(max-width:480px){ .medix-features-grid{ gap:12px; } .medix-feature-card{ padding:20px 12px; } .medix-feature-title{ font-size:14px; } .medix-feature-desc{ font-size:12px; } }

/* ===== Medix 10,000+ services badges + how-it-works ===== */
.medix-mega-services{ background:#0D0D0F; padding:50px 0 40px; text-align:center; overflow:hidden; }
.medix-mega-title{ color:#fff; font-size:22px; font-weight:800; margin:0 10px 10px; }
.medix-mega-number{ background:linear-gradient(90deg,#00E5FF,#FF2E9E); -webkit-background-clip:text; background-clip:text; color:transparent; }
.medix-mega-sub{ color:#B8B8BE; font-size:14px; max-width:600px; margin:0 auto 30px; padding:0 20px; }
.medix-badges-scroll{ overflow-x:hidden; overflow-y:hidden; width:100%; direction:ltr; margin-bottom:14px; }
.medix-badges-track{ display:flex; direction:ltr; }
.medix-badge{ flex-shrink:0; display:flex; align-items:center; gap:8px; margin:0 8px; padding:10px 18px; border-radius:30px; background:#15151A; border:1px solid rgba(255,255,255,.08); }
.medix-badge-icon{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; background:var(--c); flex-shrink:0; }
.medix-badge-icon[data-dark="1"]{ color:#0D0D0F; }
.medix-badge-svg{ width:14px; height:14px; }
.medix-badge-label{ color:#fff; font-size:13px; font-weight:600; white-space:nowrap; }
.medix-mega-btn{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; padding:14px 38px; border-radius:30px; background:linear-gradient(90deg,#00E5FF,#FF2E9E); color:#0D0D0F; font-weight:700; font-size:16px; text-decoration:none; box-shadow:0 8px 24px rgba(0,229,255,.25); transition:transform .2s ease; }
.medix-mega-btn:hover{ transform:translateY(-2px); color:#0D0D0F; }

.medix-how{ background:#101014; padding:60px 20px; text-align:center; scroll-margin-top:80px; }
.medix-how-title{ color:#fff; font-size:24px; font-weight:800; margin-bottom:10px; }
.medix-how-sub{ color:#B8B8BE; font-size:14px; max-width:600px; margin:0 auto 36px; }
.medix-how-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1100px; margin:0 auto 32px; }
.medix-how-step{ background:#15151A; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:28px 16px; text-align:center; position:relative; }
.medix-how-num{ width:40px; height:40px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; color:#0D0D0F; background:linear-gradient(135deg,#00E5FF,#FF2E9E); }
.medix-how-step-title{ color:#fff; font-size:15px; font-weight:700; margin-bottom:8px; }
.medix-how-step-desc{ color:#B8B8BE; font-size:13px; line-height:1.6; margin:0; }
.medix-how-cta{ display:inline-block; padding:14px 38px; border-radius:30px; border:2px solid #00E5FF; color:#00E5FF; font-weight:700; font-size:15px; text-decoration:none; transition:all .2s ease; }
.medix-how-cta:hover{ background:linear-gradient(90deg,#00E5FF,#FF2E9E); color:#0D0D0F; border-color:transparent; }

@media(max-width:767px){
.medix-mega-title{ font-size:18px; }
.medix-badge{ padding:8px 14px; margin:0 6px; }
.medix-badge-label{ font-size:12px; }
.medix-how-grid{ grid-template-columns:repeat(2,1fr); }
.medix-how-title{ font-size:20px; }
}

/* ===== Medix services showcase carousel (free swipe) ===== */
.medix-services-showcase{ background:#0D0D0F; padding:60px 20px; text-align:center; }
.medix-svc-title{ color:#fff; font-size:26px; font-weight:800; margin-bottom:14px; }
.medix-svc-brand{ background:linear-gradient(90deg,#00E5FF,#FF2E9E); -webkit-background-clip:text; background-clip:text; color:transparent; }
.medix-svc-sub{ color:#B8B8BE; font-size:14px; max-width:650px; margin:0 auto 40px; line-height:1.8; }
.medix-svc-carousel{ max-width:420px; margin:0 auto; }
.medix-svc-track{ display:flex; direction:ltr; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; gap:16px; scrollbar-width:none; -ms-overflow-style:none; }
.medix-svc-track::-webkit-scrollbar{ display:none; height:0; }
.medix-svc-card{ flex:0 0 100%; scroll-snap-align:center; direction:rtl; background:#15151A; border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:40px 30px; }
.medix-svc-icon{ width:70px; height:70px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; color:#fff; background:var(--c); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.medix-svc-icon[data-dark="1"]{ color:#0D0D0F; }
.medix-svc-name{ color:#fff; font-size:19px; font-weight:800; margin-bottom:12px; }
.medix-svc-desc{ color:#B8B8BE; font-size:14px; line-height:1.8; margin-bottom:22px; min-height:75px; }
.medix-svc-btn{ display:inline-block; padding:12px 30px; border-radius:30px; background:linear-gradient(90deg,#00E5FF,#FF2E9E); color:#0D0D0F; font-weight:700; font-size:14px; text-decoration:none; }
.medix-svc-nav{ display:flex; justify-content:center; gap:16px; margin-top:24px; }
.medix-svc-arrow{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.15); background:#15151A; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; transition:all .2s ease; }
.medix-svc-arrow:hover{ background:linear-gradient(90deg,#00E5FF,#FF2E9E); color:#0D0D0F; border-color:transparent; }
@media(max-width:480px){
.medix-svc-title{ font-size:20px; }
.medix-svc-card{ padding:30px 20px; }
.medix-svc-desc{ min-height:95px; }
}

/* ===== Medix FAQ, Need-Help, Subscriber & Footer redesign ===== */
.faqs{ background:#0D0D0F; padding:70px 20px 30px; }
.faqs .above-heading{ color:#00E5FF; letter-spacing:2px; font-weight:700; text-align:center; }
.faqs .header-desc{ color:#B8B8BE; text-align:center; margin-bottom:40px; }
.faq-block__card{ margin-bottom:16px; }
.faq-block__card .card{ background:#15151A; border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden; transition:border-color .3s ease, box-shadow .3s ease; }
.faq-block__header{ padding:20px 24px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; transition:background .3s ease; }
.faq-block__header-title h4{ color:#E6E6E8; font-size:16px; font-weight:700; margin:0; display:flex; align-items:center; gap:10px; }
.faq-block__header-title h4 i{ color:#00E5FF; }
.faq-block__header-icon i{ color:#B8B8BE; display:inline-block; transition:transform .35s ease, color .3s ease; }
.faq-block__header[aria-expanded="true"] .faq-block__header-icon i{ transform:rotate(180deg); color:#FF2E9E; }
.faq-block__header[aria-expanded="true"]{ background:linear-gradient(90deg, rgba(0,229,255,.08), rgba(255,46,158,.08)); }
.faq-block__header:not(.collapsed){ background:linear-gradient(90deg, rgba(0,229,255,.08), rgba(255,46,158,.08)); }
.faq-block__body-description{ color:#B8B8BE; padding:0 24px 22px; line-height:1.9; }
.faq-block__body.collapse{ transition:height .35s ease; }

.medix-help{ background:#0D0D0F; padding:10px 20px 70px; text-align:center; }
.medix-help-box{ max-width:640px; margin:0 auto; background:linear-gradient(145deg, #15151A, #1A1A1F); border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:50px 40px; position:relative; overflow:hidden; }
.medix-help-box::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 30% 0%, rgba(0,229,255,.12), transparent 60%), radial-gradient(circle at 80% 100%, rgba(255,46,158,.12), transparent 60%); pointer-events:none; }
.medix-help-icon{ width:70px; height:70px; margin:0 auto 20px; border-radius:50%; background:linear-gradient(90deg,#00E5FF,#FF2E9E); display:flex; align-items:center; justify-content:center; font-size:28px; color:#0D0D0F; position:relative; z-index:1; }
.medix-help-box h3{ color:#fff; font-size:24px; font-weight:800; margin-bottom:12px; position:relative; z-index:1; }
.medix-help-box p{ color:#B8B8BE; margin-bottom:26px; line-height:1.8; position:relative; z-index:1; }
.medix-help-btn{ display:inline-block; padding:14px 36px; border-radius:30px; background:linear-gradient(90deg,#00E5FF,#FF2E9E); color:#0D0D0F; font-weight:800; text-decoration:none; position:relative; z-index:1; transition:transform .25s ease; }
.medix-help-btn:hover{ transform:translateY(-2px); color:#0D0D0F; }
.medix-help-email{ margin-top:22px; color:#9A9AA2; font-size:14px; position:relative; z-index:1; }
.medix-help-email i{ color:#00E5FF; margin-left:6px; }
.medix-help-email span{ direction:ltr; display:inline-block; }

.subscriber{ background-color:#0D0D0F !important; background-image:radial-gradient(circle at 15% 20%, rgba(0,229,255,.10), transparent 50%), radial-gradient(circle at 85% 80%, rgba(255,46,158,.10), transparent 50%) !important; padding:50px 20px 35px !important; margin:0 !important; }
.subscriber::before, .subscriber::after{ background-image:none !important; opacity:0 !important; }
.subscriber .above-heading{ color:#00E5FF !important; }
.subscriber h2{ color:#fff !important; font-size:24px; }
.subscriber .form-control-input{ background:#15151A !important; border:1px solid rgba(255,255,255,.15) !important; color:#fff !important; border-radius:10px !important; }
.subscriber .form-control-submit-button{ background:linear-gradient(90deg,#00E5FF,#FF2E9E) !important; border:none !important; color:#0D0D0F !important; font-weight:800 !important; border-radius:30px !important; }

.footer{ background:#0D0D0F !important; margin:0 !important; padding-top:35px !important; border-top:1px solid rgba(255,255,255,.07); }
.medix-footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.medix-footer-brand img{ width:38px; height:38px; border-radius:50%; }
.medix-footer-brand-text{ background:linear-gradient(90deg,#00E5FF,#FF2E9E); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:22px; font-weight:800; }
.footer-col h4{ color:#fff; position:relative; margin-bottom:18px; padding-bottom:10px; }
.footer-col h4::after{ content:""; position:absolute; bottom:0; right:0; width:40px; height:2px; background:linear-gradient(90deg,#00E5FF,#FF2E9E); }
.footer-col.first h4::after{ display:none; }
.footer-col .p-small{ color:#9A9AA2 !important; line-height:1.8; }
.footer li.media{ transition:transform .2s ease; }
.footer li.media:hover{ transform:translateX(-4px); }
.footer li.media a{ color:#B8B8BE !important; transition:color .2s ease; }
.footer li.media a:hover{ color:#00E5FF !important; }
.footer li.media i{ color:#FF2E9E !important; }
.footer-lang-selector{ background:#15151A !important; border:1px solid rgba(255,255,255,.15) !important; color:#fff !important; border-radius:10px !important; }
.footer.copyright{ background:#0D0D0F !important; border-top:1px solid rgba(255,255,255,.07); padding:18px 0 !important; margin:0 !important; }
.footer.copyright .small{ color:#7A7A82 !important; }

/* ===== Fix: AOS scroll-animation gets stuck at opacity:0 on this theme (body-scroll, not window-scroll) ===== */
.aos-init:not(.aos-animate){ opacity:1 !important; transform:none !important; }

.faq{ background:#0D0D0F !important; }
.faqs .above-heading{ color:#00E5FF !important; }
.faqs .header-desc{ color:#B8B8BE !important; }

/* ===== Header AR/EN language toggle button ===== */
.medix-lang-toggle{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:52px;
padding:6px 14px;
border:1px solid rgba(0,229,255,0.5);
border-radius:20px;
color:#00E5FF !important;
font-size:13px;
font-weight:600;
letter-spacing:0.5px;
cursor:pointer;
transition:all .25s ease;
text-decoration:none !important;
}
.medix-lang-toggle:hover{
background:linear-gradient(90deg,#00E5FF,#FF2E9E);
color:#0D0D0F !important;
border-color:transparent;
box-shadow:0 0 14px rgba(0,229,255,0.5);
}

/* ===== FAQ section brand polish ===== */
.faq .card {
border: 1px solid rgba(255,255,255,0.06) !important;
transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease !important;
}
.faq .card:hover {
border-color: rgba(0,229,255,0.4) !important;
box-shadow: 0 10px 28px rgba(0,229,255,0.1) !important;
transform: translateY(-3px) !important;
}
.faq .card:has(.faq-block__header:not(.collapsed)) {
border-color: rgba(255,46,158,0.55) !important;
box-shadow: 0 0 0 1px rgba(255,46,158,0.12), 0 12px 32px rgba(255,46,158,0.14) !important;
}
.faq-block__header-title .fa-question-circle {
transition: color .3s ease, text-shadow .3s ease;
}
.faq .card:hover .faq-block__header-title .fa-question-circle,
.faq .card:has(.faq-block__header:not(.collapsed)) .faq-block__header-title .fa-question-circle {
color: #FF2E9E !important;
text-shadow: 0 0 10px rgba(255,46,158,0.5);
}
.faq-block__header-icon .fa-chevron-circle-down {
transition: color .3s ease !important;
}
.faq .card:has(.faq-block__header:not(.collapsed)) .faq-block__header-icon .fa-chevron-circle-down {
color: #FF2E9E !important;
}

/* ===== About-us "why choose us" icon badges (brand icons replacing stock illustrations) ===== */
.about-us .card{
transition: transform .3s ease, box-shadow .3s ease;
}
.about-us .card:hover{
transform: translateY(-4px);
}
.medix-icon-badge{
width:84px;
height:84px;
border-radius:22px;
background:linear-gradient(135deg,#00E5FF,#FF2E9E);
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 22px;
box-shadow:0 12px 28px rgba(0,229,255,.18), 0 12px 28px rgba(255,46,158,.14);
transition: box-shadow .3s ease, transform .3s ease;
}
.about-us .card:hover .medix-icon-badge{
box-shadow:0 16px 36px rgba(255,46,158,.32);
transform: scale(1.05);
}
.medix-icon-badge svg{
width:38px;
height:38px;
}


/* ==========================================================
   AUTH FORMS - clearer inputs, brand Google button, sign-up phone
   ========================================================== */
.logInForm .form-group{ position:relative; }
.logInForm .form-group input.form-control{ height:54px !important; padding:0 50px 0 16px !important; background:rgba(255,255,255,.06) !important; border:1.5px solid rgba(0,229,255,.38) !important; border-radius:14px !important; color:#fff !important; font-size:15.5px !important; font-weight:500 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important; transition:border-color .2s, box-shadow .2s, background-color .2s !important; }
html:not([dir="rtl"]) .logInForm .form-group input.form-control{ padding:0 16px 0 50px !important; }
.logInForm .form-group input.form-control::placeholder{ color:rgba(255,255,255,.7) !important; opacity:1 !important; }
.logInForm .form-group input.form-control:hover{ border-color:rgba(0,229,255,.6) !important; }
.logInForm .form-group input.form-control:focus{ outline:none !important; border-color:#00E5FF !important; background:rgba(0,229,255,.08) !important; box-shadow:0 0 0 4px rgba(0,229,255,.15), 0 0 24px rgba(0,229,255,.25) !important; }
.logInForm .form-group input[type="password"].form-control{ border-color:rgba(255,46,158,.38) !important; }
.logInForm .form-group input[type="password"].form-control:hover{ border-color:rgba(255,46,158,.62) !important; }
.logInForm .form-group input[type="password"].form-control:focus{ border-color:#FF2E9E !important; background:rgba(255,46,158,.08) !important; box-shadow:0 0 0 4px rgba(255,46,158,.15), 0 0 24px rgba(255,46,158,.25) !important; }
.logInForm .form-group:has(> input[type="email"])::after, .logInForm .form-group:has(> input[type="password"])::after{ content:""; position:absolute; top:27px; right:17px; width:21px; height:21px; margin-top:-10.5px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300E5FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events:none; z-index:2; }
.logInForm .form-group:has(> input[type="password"])::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF2E9E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3Ccircle cx='12' cy='15.5' r='1.3'/%3E%3C/svg%3E"); }
html:not([dir="rtl"]) .logInForm .form-group:has(> input)::after{ right:auto; left:17px; }
.logInForm input.form-control:-webkit-autofill, .sign-up-form .form-control-input:-webkit-autofill{ -webkit-text-fill-color:#fff !important; caret-color:#fff; -webkit-box-shadow:0 0 0 1000px #16161e inset !important; box-shadow:0 0 0 1000px #16161e inset !important; transition:background-color 9999s ease 0s; }
.logInForm input[type="checkbox"]{ accent-color:#00E5FF; width:18px; height:18px; vertical-align:middle; }
.medix-google-login > a, .sign-up-form .social-login .btn-google{ display:flex !important; align-items:center !important; justify-content:center !important; gap:12px !important; width:100% !important; padding:12px 16px !important; border:1.5px solid transparent !important; border-radius:14px !important; background:linear-gradient(135deg,#14141c,#0f0f15) padding-box, linear-gradient(90deg,#00E5FF,#FF2E9E) border-box !important; color:#fff !important; font-weight:700 !important; font-size:15px !important; text-decoration:none !important; box-shadow:0 0 22px -8px rgba(0,229,255,.7), 0 0 22px -8px rgba(255,46,158,.7) !important; transition:transform .2s, box-shadow .2s !important; }
.medix-google-login > a:hover, .sign-up-form .social-login .btn-google:hover{ transform:translateY(-2px); box-shadow:0 8px 26px -8px rgba(0,229,255,.8), 0 8px 26px -8px rgba(255,46,158,.8) !important; color:#fff !important; }
.medix-google-login > a svg{ width:30px !important; height:30px !important; padding:6px; border-radius:50%; background:#fff; flex:0 0 auto; box-shadow:0 0 12px rgba(0,229,255,.35); }
.sign-up-form .social-login .btn-google .google-logo{ width:30px !important; height:30px !important; padding:6px; margin:0 !important; border-radius:50%; background:#fff; object-fit:contain; box-shadow:0 0 12px rgba(0,229,255,.35); }
.sign-up-form .form-container .form-control-input, .sign-up-form .form-container select.form-control{ height:54px !important; padding:20px 16px 4px !important; background:rgba(255,255,255,.06) !important; border:1.5px solid rgba(0,229,255,.32) !important; border-radius:14px !important; color:#fff !important; font-size:15px !important; transition:border-color .2s, box-shadow .2s, background-color .2s !important; }
.sign-up-form .form-container select.form-control{ padding:0 16px !important; }
.sign-up-form .form-container .form-control-input[type="password"]{ border-color:rgba(255,46,158,.32) !important; }
.sign-up-form .form-container .form-control-input:hover, .sign-up-form .form-container select.form-control:hover{ border-color:rgba(0,229,255,.6) !important; }
.sign-up-form .form-container .form-control-input:focus, .sign-up-form .form-container select.form-control:focus{ outline:none !important; border-color:#00E5FF !important; background:rgba(0,229,255,.08) !important; box-shadow:0 0 0 4px rgba(0,229,255,.15), 0 0 24px rgba(0,229,255,.25) !important; }
.sign-up-form .form-container .form-control-input[type="password"]:focus{ border-color:#FF2E9E !important; background:rgba(255,46,158,.08) !important; box-shadow:0 0 0 4px rgba(255,46,158,.15), 0 0 24px rgba(255,46,158,.25) !important; }
.sign-up-form .form-container .label-control{ top:16px; color:rgba(255,255,255,.7) !important; font-size:14.5px; font-family:inherit; }
html[dir="rtl"] .sign-up-form .form-container .label-control{ left:auto; right:16px; }
html:not([dir="rtl"]) .sign-up-form .form-container .label-control{ left:16px; }
.sign-up-form .form-container .form-control-input:focus + .label-control, .sign-up-form .form-container .form-control-input.notEmpty + .label-control, .sign-up-form .form-container .form-control-input:-webkit-autofill + .label-control{ top:5px; font-size:11.5px; color:#00E5FF !important; }
.sign-up-form .form-container .form-control-input[type="password"]:focus + .label-control, .sign-up-form .form-container .form-control-input[type="password"].notEmpty + .label-control{ color:#FF2E9E !important; }
@media (min-width:992px){
.sign-up-form .medix-su-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:48px; align-items:center; max-width:1060px; margin:0 auto; }
.sign-up-form .medix-su-grid > .medix-orbit-col{ grid-column:2; grid-row:1 / span 2; max-width:none; flex:none; width:auto; margin:0; padding:0; }
.sign-up-form .medix-su-grid > h1{ grid-column:1; grid-row:1; align-self:end; }
.sign-up-form .medix-su-grid > .form-container{ grid-column:1; grid-row:2; align-self:start; width:100%; }
}
.sign-up-form .custom-control.custom-checkbox{ display:flex; align-items:flex-start; justify-content:center; gap:10px; padding:0; margin:4px 0 6px; cursor:pointer; }
.sign-up-form .custom-control.custom-checkbox .custom-control-input{ position:static; opacity:1; z-index:auto; width:20px; height:20px; flex:0 0 20px; margin:2px 0 0; accent-color:#00E5FF; cursor:pointer; }
.sign-up-form .custom-control.custom-checkbox .custom-control-label{ padding:0; margin:0; line-height:1.6; }
.sign-up-form .custom-control.custom-checkbox .custom-control-label::before, .sign-up-form .custom-control.custom-checkbox .custom-control-label::after{ display:none !important; }
/* Hero heading - sized for the longer brand headline */
@media (min-width:768px){ header.header h1{ font-size:38px !important; line-height:1.35 !important; } header.header p.p-large{ font-size:17px; line-height:1.85; } }
/* LTR (English) fixes */
html:not([dir="rtl"]) .medix-svc-card{ direction:ltr; }
html:not([dir="rtl"]) .medix-svc-arrow i{ transform:scaleX(-1); }

/* ===== medix-ps: popular services with live prices (home page) ===== */
.medix-ps{ background:#0D0D0F; padding:60px 20px; text-align:center; }
.medix-ps-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; max-width:1100px; margin:0 auto; }
.medix-ps-card{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:18px; border-radius:18px; text-align:start; text-decoration:none !important; background:#15151A; border:1px solid rgba(255,255,255,.08); overflow:hidden; transition:transform .2s, border-color .2s, box-shadow .2s; -webkit-tap-highlight-color:transparent; }
.medix-ps-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg, #00E5FF, #FF2E9E); opacity:.85; }
.medix-ps-card:hover{ transform:translateY(-3px); border-color:rgba(0,229,255,.35); box-shadow:0 14px 34px -16px rgba(255,46,158,.6); }
.medix-ps-card:active{ transform:scale(.98); }
.medix-ps-top{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.medix-ps-ic{ flex:0 0 auto; width:44px; height:44px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:20px; box-shadow:0 8px 20px -10px rgba(0,0,0,.8); }
.medix-ps-ic .fa-snapchat-ghost{ color:#111; }
.medix-ps-count{ font-size:11.5px; color:#B8B8BE; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); white-space:nowrap; }
.medix-ps-name{ margin:0; font-size:16px; font-weight:700; color:#fff; line-height:1.4; }
.medix-ps-from{ font-size:12px; color:#8d90a0; margin-top:6px; }
.medix-ps-price{ font-size:24px; font-weight:800; line-height:1.2; background:linear-gradient(90deg, #00E5FF, #FF2E9E); -webkit-background-clip:text; background-clip:text; color:transparent; }
.medix-ps-price small{ font-size:12px; font-weight:600; color:#8d90a0; -webkit-text-fill-color:#8d90a0; }
.medix-ps-cta{ margin-top:12px; font-size:13px; font-weight:700; color:#00E5FF; display:inline-flex; align-items:center; gap:6px; }
html[dir="ltr"] .medix-ps-cta i{ transform:scaleX(-1); }
.medix-ps-more{ margin-top:26px; }
.medix-ps-more a{ display:inline-block; padding:12px 24px; border-radius:14px; color:#fff !important; font-weight:700; text-decoration:none !important; background:linear-gradient(135deg, #00E5FF, #FF2E9E); box-shadow:0 10px 26px -10px rgba(255,46,158,.8); transition:transform .15s; }
.medix-ps-more a:active{ transform:scale(.97); }
@media (max-width:991px){ .medix-ps-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:767px){
  .medix-ps{ padding:44px 14px; }
  .medix-ps-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .medix-ps-card{ padding:14px; border-radius:16px; }
  .medix-ps-ic{ width:38px; height:38px; font-size:17px; border-radius:11px; }
  .medix-ps-count{ font-size:10.5px; padding:3px 8px; }
  .medix-ps-name{ font-size:14px; }
  .medix-ps-price{ font-size:19px; }
}
@media (prefers-reduced-motion: reduce){ .medix-ps-card, .medix-ps-more a{ transition:none; } }

/* medix: brand icons missing from Font Awesome 5.10 (TikTok, Threads) */
.fab.fa-tiktok, .fab.fa-threads{ font-family:"FA6TikTokOnly" !important; font-weight:400 !important; }
.fab.fa-tiktok:before{ content:"\e07b" !important; }
.fab.fa-threads:before{ content:"\e618" !important; }

/* ===== medix-blog + medix-links (home page) ===== */
.medix-blog{ background:#101014; padding:60px 20px; text-align:center; }
.medix-blog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; max-width:1100px; margin:0 auto; }
.medix-blog-card{ display:flex; flex-direction:column; text-align:start; border-radius:20px; overflow:hidden; background:#15151A; border:1px solid rgba(255,255,255,.08); transition:transform .2s, border-color .2s, box-shadow .2s; }
.medix-blog-card:hover{ transform:translateY(-3px); border-color:rgba(0,229,255,.35); box-shadow:0 16px 36px -18px rgba(255,46,158,.6); }
.medix-blog-img{ position:relative; display:block; aspect-ratio:16/9; background:linear-gradient(135deg, rgba(0,229,255,.15), rgba(255,46,158,.15)); overflow:hidden; }
.medix-blog-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.medix-blog-card:hover .medix-blog-img img{ transform:scale(1.04); }
.medix-blog-img::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, #00E5FF, #FF2E9E); }
.medix-blog-body{ display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; flex:1; }
.medix-blog-date{ font-size:12px; color:#8d90a0; display:inline-flex; align-items:center; gap:6px; }
.medix-blog-date i{ color:#FF2E9E; }
.medix-blog-body h3{ margin:0; font-size:17px; line-height:1.5; font-weight:700; }
.medix-blog-body h3 a{ color:#fff !important; text-decoration:none !important; }
.medix-blog-body h3 a:hover{ color:#00E5FF !important; }
.medix-blog-body p{ margin:0; color:#B8B8BE; font-size:14px; line-height:1.7; flex:1; }
.medix-blog-more{ margin-top:4px; font-size:13px; font-weight:700; color:#00E5FF !important; text-decoration:none !important; display:inline-flex; align-items:center; gap:6px; }
html[dir="ltr"] .medix-blog-more i{ transform:scaleX(-1); }
.medix-links{ background:#0D0D0F; padding:56px 20px 64px; text-align:center; }
.medix-links-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; max-width:1100px; margin:0 auto; }
.medix-link-card{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:16px; text-align:start; text-decoration:none !important; background:#15151A; border:1px solid rgba(255,255,255,.08); transition:transform .2s, border-color .2s, background .2s; -webkit-tap-highlight-color:transparent; }
.medix-link-card:hover{ transform:translateY(-2px); border-color:rgba(0,229,255,.35); }
.medix-link-card:active{ transform:scale(.98); background:linear-gradient(135deg, rgba(0,229,255,.12), rgba(255,46,158,.12)); }
.medix-link-ic{ flex:0 0 auto; width:42px; height:42px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:17px; background:linear-gradient(135deg, #00E5FF, #FF2E9E); box-shadow:0 8px 20px -10px rgba(255,46,158,.8); }
.medix-link-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.medix-link-txt strong{ color:#fff; font-size:14.5px; font-weight:700; }
.medix-link-txt small{ color:#8d90a0; font-size:12.5px; line-height:1.5; }
@media (max-width:991px){ .medix-blog-grid{ grid-template-columns:repeat(2, 1fr); } .medix-links-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:767px){
  .medix-blog, .medix-links{ padding:44px 14px; }
  .medix-blog-grid{ grid-template-columns:1fr; gap:14px; }
  .medix-links-grid{ grid-template-columns:1fr; gap:10px; }
}
@media (prefers-reduced-motion: reduce){ .medix-blog-card, .medix-blog-img img, .medix-link-card{ transition:none; } }

/* ===== MEDIX 2026-11-06: distinctive header (home + public pages) ===== */
.mx-hdr{ background:rgba(13,13,15,.72) !important; -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); border-bottom:0 !important; box-shadow:none; transition:background .25s ease, box-shadow .25s ease; }
.mx-hdr::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, #00E5FF 25%, #FF2E9E 75%, transparent); background-size:200% 100%; opacity:.75; animation:mxHdrLine 8s linear infinite; pointer-events:none; }
.mx-hdr.mx-scrolled{ background:rgba(13,13,15,.92) !important; box-shadow:0 10px 30px -12px rgba(0,0,0,.7), 0 0 24px -10px rgba(0,229,255,.25); }
@keyframes mxHdrLine{ 0%{ background-position:0% 0; } 100%{ background-position:200% 0; } }
.mx-hdr .navbar-brand, .mx-hdr .navbar-brand:hover, .mx-hdr .navbar-brand:focus, .mx-hdr .navbar-brand *{ text-decoration:none !important; border-bottom:0 !important; }
.mx-hdr .navbar-brand-text{ text-decoration:none !important; font-weight:900; letter-spacing:.6px; }
.mx-hdr .navbar-brand img{ transition:transform .3s ease, filter .3s ease; }
.mx-hdr .navbar-brand:hover img{ transform:rotate(-6deg) scale(1.06); filter:drop-shadow(0 0 10px rgba(255,46,158,.55)); }
.mx-hdr-actions{ display:flex; align-items:center; gap:10px; margin-inline-start:auto; }
.mx-lang-pill{ display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#e6e6e8 !important; font-weight:800; font-size:13.5px; letter-spacing:.3px; text-decoration:none !important; cursor:pointer; transition:border-color .2s, background .2s, transform .15s; white-space:nowrap; }
.mx-lang-pill i{ color:#00E5FF; font-size:15px; }
.mx-lang-pill:hover, .mx-lang-pill:focus{ border-color:rgba(0,229,255,.55); background:rgba(0,229,255,.08); outline:none; }
.mx-lang-pill:active{ transform:scale(.96); }
.mx-hdr .mx-burger{ width:42px; height:40px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; border:1px solid transparent !important; background:linear-gradient(#15151A,#15151A) padding-box, linear-gradient(135deg,#00E5FF,#FF2E9E) border-box !important; color:#fff !important; box-shadow:0 6px 18px -8px rgba(255,46,158,.6); }
.mx-hdr .mx-burger:focus{ outline:none; box-shadow:0 0 0 3px rgba(0,229,255,.2); }
.mx-hdr .mx-burger .navbar-toggler-awesome, .mx-hdr .mx-burger i{ font-size:18px; color:#fff !important; }
@media (min-width:992px){
  .mx-hdr .mx-hdr-actions{ order:3; margin-inline-start:14px; }
  .mx-hdr .navbar-collapse{ order:2; }
  .mx-hdr .navbar-nav .nav-link{ position:relative; }
  .mx-hdr .navbar-nav .nav-link::after{ content:""; position:absolute; left:50%; right:50%; bottom:2px; height:2px; border-radius:2px; background:linear-gradient(90deg,#00E5FF,#FF2E9E); transition:left .25s ease, right .25s ease; }
  .mx-hdr .navbar-nav .nav-link:hover::after, .mx-hdr .navbar-nav .nav-link.active::after{ left:14%; right:14%; }
}
@media (max-width:991.98px){
  .mx-hdr .navbar-collapse{ margin-top:10px; padding:10px 6px 14px; border-radius:16px; background:rgba(21,21,26,.96); border:1px solid rgba(255,255,255,.07); }
  .mx-hdr .navbar-brand-text{ font-size:18px; }
}
@media (max-width:360px){ .mx-hdr .navbar-brand-text{ display:none; } }
@media (prefers-reduced-motion: reduce){ .mx-hdr::after{ animation:none; } .mx-hdr .navbar-brand img{ transition:none; } }
.mx-hdr--page{ position:relative; }