/* ==========================================================================
   Site-specific styles for د. محمود الإكيابي
   - Arabic-friendly font stack (Cairo online, Segoe UI / Tahoma offline)
   - Custom hero slider, small layout helpers
   ========================================================================== */

/* ---- Arabic typography: override the theme's Latin Rubik/Jost everywhere ---- */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.themesflat-button, .wp-block-button__link,
#mainnav > ul > li > a, #mainnav ul.sub-menu > li > a,
#mainnav_canvas ul li a,
.copyright, .bottom, blockquote,
article .entry-title, .widget .widget-title,
.page-title .page-title-heading,
.tf-title-section .title-section,
.counter-title, .counter-number, .counter-number-suffix,
.info-header .text, .info-header .phone, .btn-header {
  font-family: 'Cairo', 'Tajawal', 'Segoe UI', 'Tahoma', 'Geeza Pro', sans-serif !important;
}

body { background:#ffffff; }
html, body { overflow-x:hidden; max-width:100%; }
.themesflat-boxed { overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }

@media (max-width:600px){
  .tf-title-section h2 { font-size:26px; }
  .tf-title-section .pre { font-size:15px; }
  .section-pad { padding:55px 0; }
  .section-pad-sm { padding:40px 0; }
  .cta-box h2 { font-size:26px; }
  .content-section h2 { font-size:26px; }
}

/* The reference loads webfont icon sets we keep; make sure icons are not
   overridden by the Arabic font rule above. */
[class^="carenow-icon-"], [class*=" carenow-icon-"],
[class^="carenowmedical-icon-"], [class*=" carenow-medical-icon-"],
[class^="tf_social_icon-"], [class*=" tf_social_icon-"],
.fa, .fas, .far, .fab { font-family: inherit; }

/* ============================ HERO SLIDER (light, split layout) ============================ */
.hero-slider { position:relative; overflow:hidden;
  background:linear-gradient(135deg,#e7f3f6 0%,#f5fafb 55%,#ffffff 100%); }
.hero-slider .owl-stage-outer,
.hero-slider.owl-loaded { overflow:hidden; }
/* soft decorative blobs in the corners */
.hero-slider::before, .hero-slider::after { content:""; position:absolute; border-radius:50%; z-index:0; pointer-events:none; }
.hero-slider::before { width:520px; height:520px; top:-170px; left:-130px; background:radial-gradient(circle, rgba(51,185,203,.18), transparent 70%); }
.hero-slider::after  { width:480px; height:480px; bottom:-200px; right:-120px; background:radial-gradient(circle, rgba(31,110,141,.12), transparent 70%); }
.hero-slide { position:relative; min-height:600px; display:flex; align-items:center; }
.hero-slide .container { position:relative; z-index:2; }

/* custom fade slider: active slide drives height, others fade behind it */
.hero-fade .hero-slide { position:absolute; top:0; left:0; right:0; opacity:0; visibility:hidden;
  transition:opacity .7s ease; }
.hero-fade .hero-slide.is-active { position:relative; opacity:1; visibility:visible; }
.hero-dots { position:absolute; bottom:18px; left:0; right:0; text-align:center; z-index:4; }
.hero-dots button { width:11px; height:11px; margin:0 5px; padding:0; border:0; cursor:pointer;
  background:rgba(31,110,141,.3); border-radius:50%; transition:.25s; }
.hero-dots button.active { background:#33B9CB; transform:scale(1.15); }

.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:30px; }
.hero-caption { max-width:600px; color:#0f2440; padding:40px 0; }
.hero-caption .pre {
  display:inline-block; color:#1f6e8d; background:rgba(51,185,203,.13);
  padding:7px 18px; border-radius:30px; font-weight:700; font-size:15px; margin-bottom:18px;
}
.hero-caption h2 { color:#0f2440 !important; font-size:42px; line-height:1.3; margin:0 0 18px; font-weight:800; }
.hero-caption p { font-size:18px; line-height:1.9; margin:0 0 28px; color:#46586b; }
.hero-caption .hero-btns a { margin-left:14px; margin-bottom:10px; }

.btn-cyan, .btn-outline-navy, .btn-outline-light {
  display:inline-block; border-radius:14px; padding:15px 34px;
  font-weight:700; font-size:17px; transition:.25s ease; border:2px solid transparent;
}
.btn-cyan { background:#33B9CB; color:#fff; box-shadow:0 12px 26px rgba(51,185,203,.32); }
.btn-cyan:hover { background:#1f6e8d; color:#fff; box-shadow:0 12px 26px rgba(31,110,141,.32); }
.btn-outline-navy { border-color:#1f6e8d; color:#1f6e8d; }
.btn-outline-navy:hover { background:#1f6e8d; color:#fff; }
.btn-outline-light { border-color:#fff; color:#fff; }       /* kept for any dark sections */
.btn-outline-light:hover { background:#fff; color:#1f6e8d; }

/* doctor cut-out figure + glow + stat badge */
.hero-figure { position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:560px; }
.hero-glow { position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:430px; height:430px; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(51,185,203,.30), rgba(51,185,203,.07) 58%, transparent 72%); }
.hero-doc { position:relative; z-index:1; max-height:560px; width:auto;
  filter:drop-shadow(0 24px 28px rgba(9,29,62,.26)); }
.hero-doc--or { margin-bottom:40px; }   /* shorter upper-body crop sits a touch higher */
.hero-badge { position:absolute; bottom:54px; right:4%; z-index:2;
  width:120px; height:120px; border-radius:50%; background:#1f6e8d; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  border:4px solid #fff; box-shadow:0 14px 30px rgba(31,110,141,.4); }
.hero-badge b { font-size:29px; line-height:1; }
.hero-badge small { font-size:12.5px; margin-top:5px; padding:0 6px; }

.hero-slider .owl-dots { position:absolute; bottom:18px; left:0; right:0; text-align:center; z-index:3; }
.hero-slider .owl-dots .owl-dot span { width:11px; height:11px; margin:5px; background:rgba(31,110,141,.3); border-radius:50%; display:inline-block; }
.hero-slider .owl-dots .owl-dot.active span { background:#33B9CB; }

@media (max-width:991px){
  .hero-grid { grid-template-columns:1fr; text-align:center; }
  .hero-caption { max-width:none; margin:0 auto; padding:34px 0 0; }
  .hero-caption h2 { font-size:31px; }
  .hero-caption p { font-size:16.5px; }
  .hero-figure { min-height:auto; margin-top:8px; }
  .hero-doc { max-height:420px; }
  .hero-doc--or { margin-bottom:0; }
  .hero-badge { width:96px; height:96px; bottom:20px; right:16%; }
  .hero-badge b { font-size:23px; }
  .hero-badge small { font-size:11px; }
}
@media (max-width:600px){
  .hero-doc { max-height:330px; }
  .hero-caption h2 { font-size:25px; }
}

/* ============================ PAGE TITLE BANNER ============================ */
.page-header { position:relative; }
.page-title { position:relative; text-align:center; padding:120px 0 !important; background-position:center 30%; background-size:cover; }
.page-title .overlay { position:absolute !important; inset:0; background:rgba(9,29,62,.72) !important; opacity:1 !important; filter:none !important; }
.page-title .container { position:relative; z-index:2; }
.page-title-heading { color:#fff !important; font-size:44px; margin:0 0 14px; }
.breadcrumb-trail.breadcrumbs { color:#dbe6f0; }
.breadcrumb-trail .trail-items { list-style:none; display:flex; gap:10px; justify-content:center; align-items:center; padding:0; margin:0; flex-wrap:wrap; }
.breadcrumb-trail .trail-item, .breadcrumb-trail .sep { display:inline-flex; align-items:center; }
.breadcrumb-trail a, .breadcrumb-trail span { color:#dbe6f0 !important; }
.breadcrumb-trail a:hover { color:#33B9CB !important; }
.breadcrumb-trail .sep i { font-size:12px; color:#33B9CB; }
@media (max-width:600px){ .page-title { padding:80px 0 !important; } .page-title-heading { font-size:30px; } }

/* ---- Generic content / prose ---- */
.content-section p { color:#4d5663; font-size:16.5px; line-height:2; }
.content-section h2 { font-size:32px; margin-bottom:18px; }
.content-section h3 { font-size:24px; margin:26px 0 12px; }
.prose-card { background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(9,29,62,.07); padding:34px; margin-bottom:28px; }
.cv-list { list-style:none; padding:0; margin:0; }
.cv-list li { position:relative; padding:0 26px 14px 0; color:#4d5663; line-height:1.9; }
.cv-list li:before { content:"\2714"; position:absolute; right:0; top:2px; color:#33B9CB; font-weight:700; }

/* ---- Contact info boxes ---- */
.contact-box { text-align:center; background:#fff; border-radius:16px; padding:34px 24px; box-shadow:0 10px 30px rgba(9,29,62,.07); height:100%; margin-bottom:30px; }
.contact-box .cb-icon { width:70px; height:70px; line-height:70px; border-radius:50%; margin:0 auto 18px; background:#33B9CB; color:#fff; font-size:30px; }
.contact-box h4 { font-size:20px; margin:0 0 10px; }
.contact-box p, .contact-box a { color:#5f6b7a; margin:0; font-size:15.5px; word-break:break-word; }
.contact-box a:hover { color:#33B9CB; }

/* ---- Forms ---- */
.site-form .form-row { margin-bottom:18px; }
.site-form label { display:block; font-weight:600; color:#1f6e8d; margin-bottom:6px; }
.site-form input, .site-form select, .site-form textarea {
  width:100%; border:1px solid #d8e0ea; border-radius:12px; padding:13px 16px;
  font-size:15.5px; background:#fff; font-family:inherit;
  /* tel/email inputs default to LTR, which left-aligns their Arabic
     placeholder; force RTL so every field reads right-to-left like the rest */
  direction:rtl; text-align:right;
}
.site-form textarea { min-height:140px; resize:vertical; }
.site-form .radio-row label { display:inline-flex; align-items:center; gap:6px; font-weight:500; margin-left:22px; color:#4d5663; }
.site-form .radio-row input { width:auto; }
.site-form .form-note { font-size:13px; color:#8a94a3; margin-top:6px; }
.form-card { background:#fff; border-radius:18px; box-shadow:0 12px 35px rgba(9,29,62,.08); padding:38px; }
.map-embed iframe, .map-embed { width:100%; height:100%; min-height:420px; border:0; border-radius:18px; }
.map-embed { background:#e9eef3; display:flex; align-items:center; justify-content:center; color:#8a94a3; }

/* ---- Service detail page ---- */
.svc-detail .svc-hero { width:100%; border-radius:16px; margin-bottom:26px; box-shadow:0 12px 35px rgba(9,29,62,.1); }
.svc-detail .lead-p { font-size:18px; color:#1f6e8d; font-weight:600; line-height:1.9; margin-bottom:22px; }
.svc-sidebar { position:sticky; top:120px; }
.svc-sidebar .sidebar-title { font-size:20px; margin:0 0 16px; padding-bottom:12px; border-bottom:2px solid #eef2f6; }
.svc-side-list { list-style:none; padding:0; margin:0; }
.svc-side-list li { border-bottom:1px solid #eef2f6; }
.svc-side-list li:last-child { border-bottom:0; }
.svc-side-list li a { display:block; padding:12px 22px 12px 0; color:#3a4757; font-weight:500; position:relative; }
.svc-side-list li a:before { content:"\203A"; position:absolute; right:6px; color:#33B9CB; }
.svc-side-list li a:hover, .svc-side-list li.active a { color:#33B9CB; }
.side-cta { margin-top:26px; background:linear-gradient(120deg,#1f6e8d,#33B9CB); border-radius:16px; padding:30px 26px; color:#fff; text-align:center; }
.side-cta h4 { color:#fff; margin:0 0 10px; }
.side-cta p { color:#eafbff; font-size:14.5px; margin:0 0 18px; }
.side-cta .btn-white { background:#fff; color:#1f6e8d; border-radius:12px; padding:12px 26px; font-weight:700; display:inline-block; }
.side-cta .btn-white:hover { background:#091D3E; color:#fff; }
@media (max-width:767px){ .svc-sidebar { position:static; margin-top:30px; } }

/* ---- News cards ---- */
.news-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(9,29,62,.08); margin-bottom:30px; height:100%; }
.news-card .news-thumb { height:200px; background-size:cover; background-position:center; }
.news-card .news-body { padding:24px; }
.news-card .news-date { color:#33B9CB; font-size:14px; font-weight:600; display:inline-block; margin-bottom:8px; }
.news-card h3 { font-size:21px; margin:0 0 10px; }
.news-card p { color:#5f6b7a; margin:0; font-size:15px; }

/* ---- Gallery (clinic & activities) ---- */
.gallery-grid .gallery-item { position:relative; display:block; border-radius:12px; overflow:hidden; margin-bottom:24px; box-shadow:0 8px 22px rgba(9,29,62,.1); cursor:zoom-in; }
.gallery-grid .gallery-item img { width:100%; height:250px; object-fit:cover; transition:transform .35s ease; display:block; }
.gallery-grid .gallery-item:hover img { transform:scale(1.06); }
.gallery-grid .gallery-cap { position:absolute; left:0; right:0; bottom:0; padding:26px 14px 12px; color:#fff; font-size:14px; font-weight:600; background:linear-gradient(to top,rgba(9,29,62,.82),rgba(9,29,62,0)); }

/* ---- Success stories (before/after transformations) ---- */
.stories-grid .story-item { position:relative; display:block; border-radius:14px; overflow:hidden; margin-bottom:26px; box-shadow:0 10px 26px rgba(9,29,62,.1); cursor:zoom-in; background:#0d2747; }
.stories-grid .story-item img { width:100%; height:300px; object-fit:cover; object-position:top; transition:transform .35s ease; display:block; }
.stories-grid .story-item:hover img { transform:scale(1.05); }
.stories-grid .ba-tag { position:absolute; top:12px; right:12px; background:#33B9CB; color:#fff; font-size:12.5px; font-weight:700; padding:4px 14px; border-radius:20px; box-shadow:0 4px 12px rgba(9,29,62,.25); }
.stories-grid .zoom-hint { position:absolute; bottom:12px; left:12px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92); color:#1f6e8d; display:flex; align-items:center; justify-content:center; font-size:17px; opacity:0; transform:scale(.8); transition:.25s; }
.stories-grid .story-item:hover .zoom-hint { opacity:1; transform:scale(1); }

/* ---- Lightbox ---- */
body.lb-lock { overflow:hidden; }
.lb-overlay { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; background:rgba(8,20,40,.92); padding:30px; }
.lb-overlay.open { display:flex; }
.lb-stage { margin:0; max-width:92vw; max-height:88vh; display:flex; flex-direction:column; align-items:center; }
.lb-img { max-width:92vw; max-height:80vh; border-radius:8px; box-shadow:0 18px 50px rgba(0,0,0,.5); background:#0d2747; }
.lb-caption { color:#eaf6f9; font-size:15px; margin-top:14px; text-align:center; max-width:680px; }
.lb-counter { position:absolute; top:22px; left:50%; transform:translateX(-50%); color:#cfe6ee; font-size:14px; letter-spacing:1px; }
.lb-overlay .lb-close,
.lb-overlay .lb-nav { display:flex; align-items:center; justify-content:center; direction:ltr; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; line-height:1; cursor:pointer; transition:background .2s; }
.lb-overlay .lb-close:hover,
.lb-overlay .lb-nav:hover { background:#33B9CB; }
.lb-close { position:absolute; top:16px; right:16px; width:46px; height:46px; font-size:26px; }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; font-size:26px; }
.lb-nav svg { width:24px; height:24px; }
.lb-prev { right:20px; }
.lb-next { left:20px; }
@media (max-width:600px){ .lb-close { width:42px; height:42px; } .lb-nav { width:46px; height:46px; } .lb-nav svg { width:20px; height:20px; } .lb-prev{ right:8px; } .lb-next{ left:8px; } }

/* ---- Video cards ---- */
.video-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(9,29,62,.08); margin-bottom:30px; height:100%; }
.video-card .video-thumb { height:190px; background:linear-gradient(120deg,#1f6e8d,#33B9CB); display:flex; align-items:center; justify-content:center; color:#fff; font-size:54px; }
.video-card .video-frame { position:relative; width:100%; padding-top:56.25%; background:#000; }
.video-card .video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-card .video-body { padding:22px 24px; }
.video-card h4 { margin:0 0 8px; font-size:19px; }
.video-card p { margin:0; color:#5f6b7a; font-size:14.5px; }

/* ---- FAQ accordion ---- */
.faq-wrap { max-width:840px; margin:0 auto; }
.faq-item { background:#fff; border-radius:12px; box-shadow:0 6px 20px rgba(9,29,62,.06); margin-bottom:14px; overflow:hidden; }
.faq-q { width:100%; text-align:right; background:none; border:0; padding:20px 24px; font-size:18px; font-weight:600; color:#1f6e8d; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px; font-family:inherit; }
.faq-q .faq-ic { flex:0 0 auto; width:28px; height:28px; line-height:26px; text-align:center; border-radius:50%; background:rgba(51,185,203,.14); color:#33B9CB; font-size:20px; }
.faq-item.open .faq-q { color:#33B9CB; }
.faq-item.open .faq-q .faq-ic { background:#33B9CB; color:#fff; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p { padding:0 24px 20px; margin:0; color:#4d5663; line-height:1.9; }

/* ---- Calculators ---- */
.calc-card { background:#fff; border-radius:18px; box-shadow:0 12px 35px rgba(9,29,62,.08); padding:38px; max-width:620px; margin:0 auto; }
.calc-card h3 { margin-top:0; }
.calc-result { margin-top:22px; }
.calc-out { border-radius:14px; padding:24px; text-align:center; color:#fff; }
.calc-out.ok { background:linear-gradient(120deg,#1f6e8d,#33B9CB); }
.calc-out.low { background:#6c8aa6; }
.calc-out.warn { background:linear-gradient(120deg,#e0922f,#f0b450); }
.calc-out.high { background:linear-gradient(120deg,#c0392b,#e3675a); }
.calc-out .calc-num { display:block; font-size:46px; font-weight:800; line-height:1.1; }
.calc-out .calc-cat { display:block; font-size:20px; margin-top:6px; }
.calc-note { color:#5f6b7a; font-size:13.5px; margin-top:14px; }
.calc-err { color:#c0392b; font-weight:600; }

/* ============================ SECTION HELPERS ============================ */
.section-pad { padding:80px 0; }
.section-pad-sm { padding:55px 0; }
.bg-light-soft { background:#F6FBFC; }

.tf-title-section { text-align:center; margin-bottom:50px; }
.tf-title-section .pre {
  color:#33B9CB; font-weight:700; font-size:17px;
  display:block; margin-bottom:8px;
}
.tf-title-section h2 { font-size:40px; margin:0 0 14px; }
.tf-title-section p { max-width:760px; margin:0 auto; color:#5f6b7a; font-size:17px; }

/* ---- Service card ---- */
.svc-card {
  background:#fff;
  border-radius:18px;
  box-shadow:0 12px 35px rgba(9,29,62,.08);
  overflow:hidden;
  height:100%;
  transition:transform .3s ease, box-shadow .3s ease;
}
/* The flex .row stretches cards to equal height, so a margin-bottom on the
   card itself overflows the column and the wrapped rows touch. Put the gap on
   the column (the flex item) instead — it extends the flex line and gives a
   real vertical gap between rows. */
.row > [class*="col-"]:has(> .svc-card) { margin-bottom:30px; }
.svc-card:hover { transform:translateY(-6px); box-shadow:0 20px 45px rgba(9,29,62,.14); }
.svc-card .svc-thumb { height:210px; background-size:cover; background-position:center; }
.svc-card .svc-body { padding:26px 26px 30px; }
.svc-card .svc-icon {
  width:64px; height:64px; line-height:64px; text-align:center;
  border-radius:50%; background:rgba(51,185,203,.12); color:#33B9CB;
  font-size:30px; margin:-58px 0 16px; position:relative; z-index:2; background-clip:padding-box;
  border:4px solid #fff;
}
.svc-card h3 { font-size:23px; margin:0 0 12px; }
.svc-card p { color:#5f6b7a; margin:0 0 18px; font-size:15.5px; line-height:1.8; }
.svc-card .more { color:#1f6e8d; font-weight:700; }
.svc-card .more:hover { color:#33B9CB; }

/* ---- Featured flagship procedure (الأوميجالوب) ---- */
.featured-proc {
  display:flex; align-items:stretch;
  background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 18px 45px rgba(9,29,62,.12);
  border:1px solid rgba(51,185,203,.18);
  margin-bottom:46px;
}
.featured-proc .fp-media {
  flex:0 0 42%; position:relative; min-height:330px;
  background-size:cover; background-position:center;
}
.featured-proc .fp-tag {
  position:absolute; top:18px; right:18px;
  background:#33B9CB; color:#fff; font-weight:700; font-size:13px;
  padding:7px 16px; border-radius:30px; box-shadow:0 8px 20px rgba(51,185,203,.4);
}
.featured-proc .fp-body { flex:1; padding:40px 42px; }
.featured-proc .fp-body .pre { color:#33B9CB; font-weight:700; font-size:15px; display:block; margin-bottom:6px; }
.featured-proc .fp-body h3 { font-size:30px; margin:0 0 14px; color:#091D3E; }
.featured-proc .fp-body > p { color:#5f6b7a; font-size:16px; line-height:1.9; margin:0 0 20px; }
.fp-list { list-style:none; padding:0; margin:0 0 26px; display:grid; grid-template-columns:1fr 1fr; gap:11px 24px; }
.fp-list li { position:relative; padding-right:26px; color:#3a4858; font-size:15px; font-weight:600; }
.fp-list li:before { content:"\2714"; position:absolute; right:0; top:1px; color:#33B9CB; font-weight:700; }
.fp-foot { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.fp-price { display:flex; flex-direction:column; line-height:1.25; }
.fp-price small { color:#8a96a5; font-size:13px; }
.fp-price b { color:#1f6e8d; font-size:25px; font-weight:800; }
.fp-btns { display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width: 991px) {
  .featured-proc { flex-direction:column; }
  .featured-proc .fp-media { flex-basis:auto; min-height:230px; }
  .featured-proc .fp-body { padding:30px 24px; }
  .featured-proc .fp-body h3 { font-size:25px; }
  .fp-list { grid-template-columns:1fr; }
}

/* ---- About / feature icon boxes ---- */
.about-img img { border-radius:18px; box-shadow:0 18px 45px rgba(9,29,62,.15); }
.feature-box { display:flex; gap:18px; margin-bottom:26px; }
.feature-box .fb-icon {
  flex:0 0 60px; width:60px; height:60px; line-height:60px; text-align:center;
  border-radius:14px; background:rgba(51,185,203,.12); color:#33B9CB; font-size:30px;
}
.feature-box h4 { margin:0 0 6px; font-size:20px; }
.feature-box p { margin:0; color:#5f6b7a; }

/* ---- Counters ---- */
.counters-section { background:#0f2440; color:#fff; padding:70px 0; }
.counter-item { text-align:center; padding:14px 0; }
.counter-item .counter-icon { font-size:46px; color:#33B9CB; margin-bottom:12px; }
.counter-item .counter-number-wrapper { font-size:46px; font-weight:800; color:#fff; line-height:1; }
.counter-item .counter-title { margin-top:10px; font-size:17px; color:#cdd8e6; }

/* ---- Why-us icon boxes ---- */
.why-box { text-align:center; padding:34px 22px; border-radius:16px; background:#fff; box-shadow:0 10px 30px rgba(9,29,62,.07); height:100%; margin-bottom:30px; transition:.3s; }
.why-box:hover { transform:translateY(-5px); }
.why-box .wb-icon { font-size:50px; color:#33B9CB; margin-bottom:16px; }
.why-box h4 { font-size:20px; margin:0 0 10px; }
.why-box p { color:#5f6b7a; margin:0; font-size:15px; }

/* ---- CTA action box ---- */
.cta-box {
  background:linear-gradient(120deg,#1f6e8d,#33B9CB);
  border-radius:20px; color:#fff; text-align:center; padding:55px 30px;
}
.cta-box h2 { color:#fff !important; font-size:34px; margin:0 0 12px; }
.cta-box p { font-size:18px; margin:0 0 26px; color:#eafbff; }
.cta-box .btn-white { background:#fff; color:#1f6e8d; border-radius:14px; padding:15px 40px; font-weight:700; display:inline-block; }
.cta-box .btn-white:hover { background:#091D3E; color:#fff; }

/* ---- Testimonials ---- */
.testi-card { background:#fff; border-radius:16px; padding:34px 28px; box-shadow:0 10px 30px rgba(9,29,62,.08); margin:12px; }
.testi-card .quote-icon { color:#33B9CB; font-size:34px; margin-bottom:14px; }
.testi-card p { color:#4d5663; font-size:16px; line-height:1.9; margin:0 0 20px; min-height:150px; }
.testi-card .author { display:flex; align-items:center; gap:14px; }
.testi-card .author .av { width:52px; height:52px; border-radius:50%; background:#33B9CB; color:#fff; text-align:center; line-height:52px; font-weight:700; font-size:20px; }
.testi-card .author .name { font-weight:700; color:#1f6e8d; }
.testi-slider { overflow:hidden; }
.testi-track { display:flex; transition:transform .5s ease; }
.testi-track .item { flex:0 0 33.333%; max-width:33.333%; box-sizing:border-box; }
@media (max-width:1000px) { .testi-track .item { flex-basis:50%; max-width:50%; } }
@media (max-width:600px) { .testi-track .item { flex-basis:100%; max-width:100%; } }
.testi-dots { text-align:center; margin-top:24px; }
.testi-dots button { width:11px; height:11px; margin:0 5px; padding:0; border:0; cursor:pointer; background:#cfd8e3; border-radius:50%; transition:.3s; }
.testi-dots button.active { background:#33B9CB; transform:scale(1.15); }

/* ---- Footer extras ---- */
#footer .ft-contact li { display:flex; gap:12px; margin-bottom:16px; line-height:1.7; }
#footer .ft-contact li i { color:#33B9CB; font-size:20px; margin-top:3px; }
#footer .widget-title { margin-bottom:26px; position:relative; }
#footer ul { list-style:none; padding:0; margin:0; }
#footer .ft-links li { margin-bottom:12px; }
#footer .ft-links li a:before { content:"\203A"; margin-left:8px; color:#33B9CB; }
.ft-social { margin-top:20px; }
.ft-social a {
  display:inline-flex; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff !important; align-items:center; justify-content:center;
  margin-left:8px; font-size:17px; transition:.25s;
}
.ft-social a:hover { background:#33B9CB; }
.ft-news li { display:flex; gap:14px; margin-bottom:18px; }
.ft-news li img { width:64px; height:64px; object-fit:cover; border-radius:10px; }
.ft-news li .text h6 { margin:0 0 4px; font-size:15px; }
.ft-news li .text h6 a { color:#fff; }
.bottom { padding:22px 0; }
.bottom .wrap-logo-bottom img { max-height:54px; width:auto; }
.bottom-flex { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.bottom .themesflat-socials { list-style:none; display:flex; gap:10px; padding:0; margin:0; }

/* ============================ HEADER / MAIN MENU ============================ */
/* The wide-cropped logo keeps the header compact; cap its height so the bar
   stays short like the reference site. */
#header #logo a img, #header #logo-mobi a img { max-height:96px; width:auto; }

/* Top-level hover effect: a clean underline BENEATH the text (the theme default
   sits at bottom:35%, which draws the line through the middle of the word). */
#mainnav > ul > li > a:after { bottom: 2px; }

/* Nested (3rd-level) sub-menu — e.g. "الحاسبات" under "من نحن".
   In RTL the theme's over-constrained left:100%+right:0 collapses the flyout
   on TOP of its parent. Anchor it to the parent's left edge so it opens BESIDE
   (to the left of) the parent column, like the reference. */
#mainnav ul.sub-menu li ul.sub-menu {
  left: auto;
  right: 100%;
  top: 0;
}

/* The "has children" arrow on a sub-menu item (e.g. الحاسبات) must point LEFT
   and sit on the left edge, since the flyout opens to the left in RTL.
   The theme default is a right chevron pinned to the right. */
#mainnav ul.sub-menu li.menu-item-has-children > a:after {
  content: "\f053";
  left: 20px;
  right: auto;
}

/* Header phone icon sits to the RIGHT of the "إتصل بنا / phone" text (RTL), like
   the reference. The theme's base rule pins it on the left (padding-left + left:0),
   and our rtl.css doesn't flip it — so move it to the right here. */
.info-header { padding-left: 0; padding-right: 60px; }
.info-header .icon-info { left: auto; right: 0; }

/* Call icon is a tel: link; give it the same lift-on-hover as .wa-circle.
   It's vertically centred with translateY(-50%), so keep that in the hover
   transform and just add the scale. */
.info-header a.icon-info { cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.info-header a.icon-info:hover { transform:translateY(-50%) scale(1.07); box-shadow:0 8px 20px rgba(51,185,203,.4); border-color:#33B9CB; }

/* WhatsApp affordances for the doctor's number (call + WhatsApp). */
.wa-circle {
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:#25D366; color:#fff !important; font-size:24px;
  margin:0 15px; transition:transform .2s ease, box-shadow .2s ease;
}
.wa-circle:hover { transform:scale(1.07); box-shadow:0 8px 20px rgba(37,211,102,.4); }
#footer .ft-contact .wa-ico { color:#25D366; font-size:18px; display:inline-flex; margin-top:3px; flex-shrink:0; }

/* Misc */
.go-top { cursor:pointer; }
img { max-width:100%; height:auto; }
a { text-decoration:none; }