/* MarzaCare Dental Arabic V2 - local, hosting-safe stylesheet */ :root {
  --navy:#123b57;
  --navy2:#0b2d42;
  --teal:#19a89f;
  --teal2:#087f83;
  --mint:#eaf9f7;
  --ice:#f5fbfc;
  --gold:#e5b85f;
  --text:#243746;
  --muted:#71818c;
  --line:#e1edf0;
  --white:#fff;
--shadow:0 18px 50px rgba(18,59,87,.10)}

* {
box-sizing:border-box}

html {
scroll-behavior:smooth}

body {
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.9;
overflow-x:hidden}

a {
transition:.2s ease}

.topbar {
  background:var(--navy2);
  color:#dcebf0;
  font-size:13px;
  padding:7px 0;
  direction: ltr;
}

.topbar a {
  color:#fff;
text-decoration:none}

.navbar {
min-height:78px}

.navbar-brand {
  font-size:25px;
  font-weight:800;
  color:var(--navy);
  display:flex;
align-items:center}

.brand-mark {
  display:inline-flex;
  width:42px;
  height:42px;
  border-radius:13px;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,var(--teal),#52c7b9);
  color:#fff;
  margin-left:9px;
box-shadow:0 7px 18px rgba(25,168,159,.25)}

.navbar-brand span:last-child span {
color:var(--teal)}

.nav-link {
  font-weight:700;
  color:var(--text);
padding:.8rem .6rem!important}

.nav-link:hover,.nav-link.active {
color:var(--teal)}

.dropdown-menu {
  border:0;
  border-radius:16px;
  box-shadow:0 18px 45px rgba(18,59,87,.14);
padding:10px}

.dropdown-item {
  border-radius:10px;
padding:9px 14px}

.dropdown-item:hover {
  background:var(--mint);
color:var(--teal2)}

.btn-primary {
  background:linear-gradient(135deg,var(--teal),#0e8e93);
  border-color:var(--teal);
box-shadow:0 8px 20px rgba(25,168,159,.20)}

.btn-primary:hover {
  background:linear-gradient(135deg,#128e88,#08767a);
  border-color:#128e88;
transform:translateY(-1px)}

.btn-outline-light:hover {
color:var(--navy)}

/* Hero */ .hero {
  position:relative;
  min-height:690px;
  display:flex;
  align-items:center;
  overflow:hidden;
background:linear-gradient(110deg,#092f49 0%,#123b57 47%,#1c7180 100%)}

.hero:before {
  content:"";
  position:absolute;
  inset:0;
background:radial-gradient(circle at 12% 22%,rgba(92,219,201,.24),transparent 30%),radial-gradient(circle at 82% 78%,rgba(255,255,255,.13),transparent 32%)}

.hero:after {
  content:"";
  position:absolute;
  width:620px;
  height:620px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  right:-180px;
  top:-150px;
box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018)}

.hero .container {
  position:relative;
z-index:2}

.hero .content {
  max-width:760px;
color:#fff}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#bff4ee;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);
  border-radius:50px;
  padding:6px 15px;
  margin-bottom:18px;
font-weight:700}

.hero h1 {
  font-size:clamp(38px,5.2vw,68px);
  font-weight:900;
  line-height:1.18;
letter-spacing:-1px}

.hero p {
  font-size:19px;
  color:#e5f1f4;
max-width:690px}

.hero-badges {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
margin-top:25px}

.hero-badge {
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  padding:7px 12px;
  font-size:13px;
color:#fff}

.hero-card {
  position:absolute;
  left:5%;
  bottom:12%;
  z-index:3;
  width:330px;
  background:rgba(255,255,255,.96);
  color:var(--text);
  padding:24px;
  border-radius:25px;
  box-shadow:0 25px 65px rgba(0,0,0,.22);
backdrop-filter:blur(8px)}

.hero-card .mini-title {
  font-weight:800;
  color:var(--navy);
font-size:18px}

.hero-card ul {
  list-style:none;
  padding:0;
margin:15px 0 0}

.hero-card li {
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:9px 0;
font-size:14px}

.hero-card i {
  color:var(--teal);
  font-size:18px;
margin-top:3px}

/* Shared sections */ .section {
padding:88px 0}

.section-soft {
background:var(--mint)}

.section-ice {
background:var(--ice)}

.section-title {
  text-align:center;
  margin:0 auto 48px;
max-width:850px}

.section-title .eyebrow {
  color:var(--teal2);
  background:#e4f7f4;
border:0}

.section-title h2 {
  font-size:clamp(30px,4vw,29px);
  color:var(--navy);
  font-weight:900;
  line-height:1.3;
margin-bottom:12px}

.section-title p {
  color:var(--muted);
font-size:17px}

.card-modern {
  height:100%;
  border:1px solid rgba(18,59,87,.07);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow);
  padding:29px;
transition:.25s}

.card-modern:hover {
  transform:translateY(-7px);
box-shadow:0 24px 60px rgba(18,59,87,.15)}
.card-modern h4{
    font-size: 27px;
    font-weight: 600;
    color: #109295;
}
.icon-box {
  width:62px;
  height:62px;
  border-radius:18px;
  background:linear-gradient(145deg,#e3f8f4,#f4fcfb);
  color:var(--teal2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:27px;
margin-bottom:18px}

.number-chip {
  display:inline-flex;
  width:38px;
  height:38px;
  border-radius:50%;
  align-items:center;
  justify-content:center;
  background:var(--navy);
  color:#fff;
font-weight:800}

.muted {
color:var(--muted)}

/* Service list */ .service-card {
  position:relative;
  padding:30px;
  border-radius:25px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 14px 42px rgba(18,59,87,.08);
overflow:hidden}

.service-card:before {
  content:"";
  position:absolute;
  width:115px;
  height:115px;
  border-radius:50%;
  background:var(--mint);
  left:-35px;
top:-35px}

.service-card>* {
position:relative}

.service-head {
  display:flex;
  align-items:center;
  gap:14px;
margin-bottom:15px}

.service-check {
  width:55px;
  height:55px;
  flex:0 0 55px;
  border-radius:15px;
  background:linear-gradient(145deg,#5ad5c4,#079879);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:27px;
box-shadow:0 8px 18px rgba(8,152,121,.22)}

.service-card h3 {
  font-size:22px;
  font-weight:900;
  color:var(--navy);
margin:0}

.service-card p {
  color:var(--muted);
margin-bottom:17px}

.service-link {
  font-weight:800;
  color:var(--teal2);
text-decoration:none}

.service-link:hover {
color:var(--navy)}

/* Trust strip */ .trust-strip {
  margin-top:-38px;
  position:relative;
z-index:5}

.trust-box {
  background:#fff;
  border-radius:22px;
  box-shadow:0 20px 50px rgba(18,59,87,.13);
  padding:22px 25px;
border:1px solid rgba(18,59,87,.06)}

.trust-item {
  display:flex;
  align-items:center;
gap:12px}

.trust-item i {
  font-size:27px;
color:var(--teal)}

.trust-item strong {
  display:block;
color:var(--navy)}

.trust-item span {
  display:block;
  color:var(--muted);
font-size:13px}

/* Feature */ .feature-wrap {
position:relative}

.feature-img {
  width:100%;
  height:auto;
  min-height:0;
  object-fit:contain;
  display:block;
  border-radius:30px;
box-shadow:0 24px 55px rgba(18,59,87,.16)}

.floating-note {
  position:absolute;
  bottom:-20px;
  right:-20px;
  background:#fff;
  border-radius:20px;
  padding:18px 20px;
  box-shadow:0 16px 38px rgba(18,59,87,.16);
max-width:250px}

.floating-note strong {
  color:var(--navy);
display:block}

.check-list {
  list-style:none;
padding:0}

.check-list li {
  margin:14px 0;
  display:flex;
  align-items:flex-start;
gap:9px}

.check-list i {
  color:var(--teal);
  font-size:19px;
margin-top:5px}

/* Steps */ .process-step {
  height:100%;
  position:relative;
  padding:28px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
box-shadow:0 12px 35px rgba(18,59,87,.07)}

.step-no {
  width:48px;
  height:48px;
  background:linear-gradient(145deg,var(--teal),var(--teal2));
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  margin-bottom:15px;
box-shadow:0 8px 18px rgba(25,168,159,.22)}

/* Stats */ .stats {
  background:linear-gradient(120deg,var(--navy2),var(--navy));
  color:#fff;
  position:relative;
overflow:hidden}

.stats:after {
  content:"";
  position:absolute;
  width:430px;
  height:430px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  left:-200px;
top:-250px}

.stat {
  position:relative;
z-index:2}

.stat h3 {
  font-size:42px;
  color:#fff;
  font-weight:900;
margin-bottom:0}

.stat p {
  margin:0;
color:#b9ced8}

/* CTA */ .cta {
  position:relative;
  overflow:hidden;
  background:linear-gradient(110deg,var(--teal),#147b90);
  color:#fff;
  border-radius:30px;
  padding:48px;
box-shadow:0 20px 50px rgba(18,59,87,.13)}

.cta:after {
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  left:-90px;
bottom:-140px}

.cta>* {
  position:relative;
z-index:1}

/* Page hero */ .page-hero {
  background-image:linear-gradient(90deg,rgba(5,31,48,.92),rgba(5,31,48,.72)),var(--page-hero-image);
  background-size:cover;
  background-position:center;
  padding:92px 0;
  color:#fff;
  position:relative;
  overflow:hidden;
isolation:isolate}

.page-hero:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.16));
z-index:-1}

.page-hero:after {
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  left:-100px;
bottom:-220px}

.page-hero .container {
  position:relative;
z-index:2}

.page-hero h1 {
  font-size:clamp(35px,5vw,52px);
  font-weight:900;
  line-height:1.25;
overflow-wrap:anywhere}

.page-hero .lead {
  max-width:820px;
color:rgba(255,255,255,.88)}

.breadcrumb a {
  color:#cceeed;
text-decoration:none}

/* Footer & floating */ .footer {
  background:#08283a;
color:#b8cbd4}

.footer h5 {
  color:#fff;
margin-bottom:18px}

.footer a {
  display:block;
  color:#b8cbd4;
  text-decoration:none;
margin:7px 0}

.footer a:hover {
color:#fff}

.footer .navbar-brand {
  display:inline-flex;
color:#fff}

.socials {
  display:flex;
gap:10px}

.socials a {
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  display:flex;
  align-items:center;
justify-content:center}

.copyright {
  border-top:1px solid rgba(255,255,255,.1);
  padding:16px 0;
  font-size:13px;
  direction: ltr;
}

.copyright a {
  display:inline;
color:#b8cbd4}

.floating-actions {
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:999;
  display:flex;
gap:10px}

.floating-actions a {
  width:53px;
  height:53px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:22px;
  text-decoration:none;
box-shadow:0 8px 20px rgba(0,0,0,.22)}

.floating-actions .wa {
background:#25d366}

.floating-actions .call {
background:var(--teal)}

.form-control,.form-select {
  border-radius:12px;
  padding:12px;
border-color:#dbe5ea}

.accordion-button {
font-weight:700}

.accordion-button:not(.collapsed) {
  background:var(--mint);
color:var(--navy)}

/* Responsive */ @media(max-width:1199px) {
  .hero-card {
    left:2%;
  width:300px}

  .nav-link {
    font-size:14px;
    padding-left:.45rem!important;
  padding-right:.45rem!important}

}

@media(max-width:991px) {
  .topbar {
  display:none}

  .hero {
  min-height:670px}

  .hero-card {
    position:relative;
    left:auto;
    bottom:auto;
    margin-top:35px;
  width:min(100%,520px)}

  .hero .content {
  max-width:100%}

  .section {
  padding:65px 0}

  .page-hero {
  padding:65px 0}

  .trust-strip {
  margin-top:-25px}

  .floating-note {
    position:relative;
    right:auto;
    bottom:auto;
  margin:-35px 15px 0 auto}

  .navbar-collapse {
  padding:15px 0}

  .navbar .btn {
    margin-top:10px;
  width:100%}

}

.g-translator {
    display: block;
    position: fixed;
    left: 1%;
    top: 60%;
    z-index: 99999;
}
.goog-te-gadget {
    color: transparent !important;
    font-size: 0px;
}
#google_translate_element select {
    background: #287bb1;
    color: #ffffff;
    border: none;
    font-weight: bold;
    border-radius: 3px;
    padding: 12px 12px;
    width: 150px;
}
.VIpgJd-ZVi9od-l4eHX-hSRGPd{
    display:none !important;
}

@media(max-width:575px) {
  .hero {
  min-height:760px}

  .hero h1 {
  font-size:38px}

  .hero p {
  font-size:16px}

  .section {
  padding:55px 0}

  .section-title {
  margin-bottom:35px}

  .section-title h2 {
  font-size:30px}

  .cta {
    padding:32px 25px;
  border-radius:22px}

  .floating-actions {
    left:12px;
  bottom:12px}

  .floating-actions a {
    width:48px;
    height:48px;
  font-size:20px}

  .service-card {
  padding:23px}

}

/* V3 homepage media sections */ .hero-video-shell {
  position:relative;
  min-height:680px;
  overflow:hidden;
background:#08263a}

.hero-video-carousel,.hero-video-carousel .carousel-inner,.hero-video-carousel .carousel-item {
height:680px}

.hero-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
filter:saturate(.95) contrast(1.04)}

.hero-video-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(3,20,33,.96) 0%,rgba(4,27,43,.84) 48%,rgba(4,27,43,.58) 100%);
box-shadow:inset 0 0 0 1000px rgba(2,18,30,.14)}

[dir="rtl"] .hero-video-overlay {
background:linear-gradient(270deg,rgba(3,20,33,.96) 0%,rgba(4,27,43,.84) 48%,rgba(4,27,43,.58) 100%)}

.hero-video-content {
  position:relative;
  z-index:4;
  padding:115px 18px 80px;
  color:#fff;
  max-width:1320px;
margin-inline:auto}

.hero-video-content h1 {
  font-size:clamp(2.2rem,5vw,2.3rem);
  font-weight:800;
  line-height:1.15;
  max-width:760px;
  overflow-wrap:anywhere;
word-break:normal}
.hero-video-content h2 {
  font-size:clamp(2.2rem,5vw,2.3rem);
  font-weight:800;
  line-height:1.15;
  max-width:760px;
  overflow-wrap:anywhere;
word-break:normal}

.hero-video-content p {
  font-size:1.12rem;
  line-height:1.95;
  max-width:690px;
color:rgba(255,255,255,.86)}

.video-caption {
  position:absolute;
  z-index:5;
  left:32px;
  bottom:30px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px);
  color:#fff;
  padding:10px 16px;
  border-radius:999px;
font-size:.85rem}

[dir="rtl"] .video-caption {
  left:auto;
right:32px}

.hero-video-carousel .carousel-indicators {
  z-index:8;
margin-bottom:28px}

.hero-video-carousel .carousel-control-prev,.hero-video-carousel .carousel-control-next {
  z-index:8;
width:8%}

.service-image {
  width:100%;
  object-fit:cover;
border-radius:22px 22px 0 0}

.service-card-image {
  padding:0;
overflow:hidden}

.service-card-image .service-body {
padding:24px}

.image-tile {
  position:relative;
  overflow:hidden;
  border-radius:24px;
  min-height:260px;
box-shadow:0 14px 35px rgba(8,38,58,.10)}

.image-tile img {
  width:100%;
  height:100%;
  min-height:260px;
  object-fit:cover;
transition:transform .6s ease}

.image-tile:hover img {
transform:scale(1.07)}

.image-tile .tile-label {
  position:absolute;
  right:16px;
  bottom:16px;
  left:16px;
  background:rgba(4,27,43,.72);
  backdrop-filter:blur(7px);
  color:#fff;
  border-radius:16px;
padding:12px 15px}

.ba-card {
  background:#fff;
  border-radius:28px;
  padding:14px;
  box-shadow:0 15px 45px rgba(8,38,58,.10);
height:100%}

.ba-visual {
  position:relative;
  height:360px;
  border-radius:20px;
  overflow:hidden;
background:#eaf4f5}

.ba-visual img {
  width:100%;
  height:100%;
object-fit:cover}

.ba-split {
  display:grid;
  grid-template-columns:1fr 1fr;
height:100%}

.ba-half {
  background-size:cover;
background-position:center}

.ba-half.before {
border-left:2px solid #fff}

.ba-half.after {
border-right:2px solid #fff}

.ba-tag {
  position:absolute;
  top:14px;
  padding:7px 13px;
  border-radius:999px;
  background:#fff;
  font-weight:700;
  font-size:.8rem;
box-shadow:0 6px 20px rgba(0,0,0,.10)}

.ba-tag.before {
right:14px}

.ba-tag.after {
left:14px}

.ba-divider {
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:3px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
transform:translateX(-50%)}

.ba-divider:after {
  content:'↔';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#70dfd2;
  color:#083449;
  font-weight:800;
box-shadow:0 7px 20px rgba(0,0,0,.18)}

.gallery-card {
  border-radius:24px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 35px rgba(8,38,58,.08);
height:100%}

.gallery-card img {
  width:100%;
object-fit:cover}

.gallery-card .gallery-caption {
  padding:16px;
  font-weight:700;
  text-align:center;
color:var(--navy)}

.soft-note {
  background:#f3faf9;
  border:1px solid #d7efec;
  border-radius:20px;
  padding:18px 20px;
color:#315768}

.display-6  {
  font-size: 1.5rem;
}
.city-title {
    font-weight: 700;
    color: #0f9194;
}
.cont-call{
    color: #0f9194;
    font-weight: 600;
}
.cont-call a{
        color: #123b57;
}
.blue-clr{color: #123b57;}
.green-clr{
    color: #109295;
}
@media(max-width:767px) {
  .hero-video-shell,.hero-video-carousel,.hero-video-carousel .carousel-inner,.hero-video-carousel .carousel-item {
    min-height:710px;
  height:710px}

  .hero-video {
  object-position:center center}

  .hero-video-overlay,[dir="rtl"] .hero-video-overlay {
  background:rgba(3,22,35,.78)}

  .hero-video-content {
    width:100%;
    max-width:100%;
    padding:72px 22px 88px;
    margin:0;
  overflow:hidden}

  .hero-video-content .eyebrow {
    max-width:100%;
    white-space:normal;
    font-size:.86rem;
  padding:6px 12px}

  .hero-video-content h1 {
    font-size:clamp(1.5rem,6.2vw,2.45rem);
    line-height:1.28;
    max-width:100%;
  margin-inline:0}
  .hero-video-content h2 {
    font-size:clamp(1.5rem,6.2vw,2.45rem);
    line-height:1.28;
    max-width:100%;
  margin-inline:0}

  .hero-video-content h1 br {
  display:none}
  .hero-video-content h2 br {
  display:none}

  .hero-video-content p {
    font-size:.98rem;
    line-height:1.8;
  max-width:100%}

  .hero-video-content .d-flex {
  gap:10px!important}

  .hero-video-content .btn {
    width:100%;
    margin:0!important;
    font-size:.98rem;
  padding:.75rem 1rem!important}

  .hero-badges {
    gap:7px;
  margin-top:18px}

  .hero-badge {
    font-size:.75rem;
  padding:6px 9px}

  .hero-video-carousel .carousel-control-prev,.hero-video-carousel .carousel-control-next {
  width:7%}

  .video-caption {
    right:18px!important;
    left:18px!important;
    bottom:18px;
  text-align:center}

  .page-hero {
    padding:58px 0;
  background-position:center}

  .page-hero .container {
  padding-inline:22px}

  .page-hero h1 {
    font-size:clamp(2rem,9vw,2.6rem);
  max-width:100%}

  .page-hero .lead {
    font-size:1rem;
  line-height:1.8}

  .breadcrumb {
    font-size:.88rem;
  white-space:normal}

  .ba-visual {
      
  }

  .service-image {
  }
  .g-translator {
    right: -18%;
    bottom: 1%;
    left: auto;
    top: auto;
}
.copyright {
    padding: 16px 0 70px;
}

}