/* ====== OKAB-Style Theme (RTL) - Web Services ====== */
:root {
  --primary: #022454;
  --primary-dark: #011a3d;
  --green: #8bc34a;
  --green-dark: #7eb143;
  --dark: #2e2e2e;
  --dark-2: #363636;
  --gray-text: #636363;
  --light-bg: #f7f7f7;
  --border: #e1e1e1;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Cairo", "Droid Arabic Naskh", Helvetica, Arial, sans-serif;
  color: #636363;
  font-size: 15px;
  line-height: 30px;
  background: #fff;
  direction: rtl;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.dima-button, .widget-title, .dima-table-title, .pricing .currency {
  font-family: "Cairo", "Droid Arabic Kufi", Helvetica, Arial, sans-serif;
}

h2, h3, h4, h5, h6 { color: #2a2a2a; font-weight: 800; }

a { text-decoration: none; color: var(--primary); }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; }

.container { max-width: 1200px; }

/* ====== TOPBAR ====== */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2000;
  -webkit-transition: transform 0.35s ease; transition: transform 0.35s ease;
}
#header.header-hidden { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
.dima-topbar {
  position: relative;
  min-height: 22px;
  background: #022454 !important;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  z-index: 1031;
  font-size: 11px;
  line-height: 22px;
}
.dima-topbar a { color: #fff !important; }
.dima-topbar .dima-menu li a,
.dima-topbar .dima-menu li { color: #fff; }
.dima-topbar .dima-menu { list-style: none; margin: 0; padding: 0; font-size: 11px; font-weight: 700; }
.dima-topbar .dima-menu li { display: inline-block; margin-left: 14px; }
.dima-topbar .dima-menu li:last-child { margin-left: 0; }
.dima-topbar .dima-menu i { margin-left: 6px; }
.dima-topbar .social-icons { list-style: none; margin: 0; padding: 0; }
.dima-topbar .social-icons li { display: inline-block; }
.dima-topbar .social-icons a {
  color: #fff; display: inline-block; width: 26px; text-align: center;
  border-right: 1px solid rgba(255,255,255,0.2);
}
.dima-topbar .social-icons a:hover { background: rgba(255,255,255,0.15); }

/* ====== NAVBAR ====== */
.dima-navbar {
  position: relative;
  background: #022454 !important;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  z-index: 1030;
  -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
.dima-navbar.scrolled { background: #022454 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.dima-navbar-global { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.dima-navbar .logo img { max-height: 43px; }
.dima-logo-text {
  display: block; font-family: "Cairo", sans-serif; font-size: 26px; font-weight: 800;
  color: #fff; line-height: 1.2;
}
.dima-logo-sub {
  display: block; font-size: 13px; font-weight: 600; color: var(--green); letter-spacing: 0.5px;
}

.dima-nav { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.dima-nav > li { position: relative; }
.dima-nav > li > a {
  display: block; padding: 12px 15px; color: #fff;
  font-family: "Cairo", sans-serif; font-size: 16px; font-weight: 800;
}
.dima-nav > li > a:hover { color: var(--green); }
.dima-nav .search-btn a { padding: 12px 15px; color: #fff; }
.dima-nav .search-btn a:hover { color: var(--green); }
.nav-border { border-right: 1px solid rgba(255,255,255,0.25); margin-right: 8px; padding-right: 8px; }

/* "استشارة مجانية" button inside the navbar (same pill style as slider) */
.dima-nav .nav-consult {
  min-width: auto; padding: 10px 22px; margin-right: 10px; color: #fff;
  border-radius: 18em; font-size: 15px;
}
.dima-nav .nav-consult:hover { color: #fff; background: var(--green-dark); }
.mobile-nav .consult-link {
  display: inline-block; background: var(--green); color: #fff;
  border-radius: 18em; padding: 8px 16px; margin: 0;
  font-family: "Cairo", sans-serif; font-size: 13px; font-weight: 800; white-space: nowrap;
  line-height: 1.5;
}
.mobile-nav .consult-link:hover { color: #fff; background: var(--green-dark); }

.dima-navbar.scrolled { box-shadow: 0 2px 10px rgba(0,0,0,0.3); }

/* ====== SEARCH BOX ====== */
.search-box {
  display: none; background: var(--primary); padding: 25px 0;
}
.search-box.open { display: block; }
.search-box form { position: relative; }
.search-box input[type="text"] {
  width: 100%; background: transparent; border: 0; border-bottom: 2px solid #fff;
  color: #fff; font-size: 18px; padding: 10px 5px; outline: none;
  font-family: "Droid Arabic Naskh", "Cairo", sans-serif;
}
.search-box input[type="text"]::placeholder { color: rgba(255,255,255,0.7); }
.close-search-box { position: absolute; left: 0; top: 0; }
.close-search-box a { color: #fff; font-size: 20px; }
.close-search-box a:hover { color: rgba(255,255,255,0.7); }

/* ====== MOBILE NAV ====== */
.dima-btn-nav { display: none; font-size: 22px; color: #fff; }
.dima-btn-nav:hover { color: var(--green); }
.mobile-nav { display: none; background: #022454 !important; }
.mobile-nav .dima-btn-nav { color: #fff; }

/* Mobile side drawer menu */
.mobile-menu-overlay {
  position: fixed; inset: 0; z-index: 3500; background: rgba(2, 36, 84, 0.6);
  opacity: 0; visibility: hidden;
  -webkit-transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.mobile-menu-overlay.open { opacity: 1; visibility: visible; -webkit-transition-delay: 0s; transition-delay: 0s; }
.mobile-menu-panel {
  position: fixed; top: 10px; right: 10px; bottom: 10px; width: 290px; max-width: 85vw;
  background: #022454 !important; z-index: 4000; padding: 0 0 25px;
  overflow-y: auto; scrollbar-width: thin;
  box-shadow: -8px 0 30px rgba(0,0,0,0.35); border-radius: 12px;
  -webkit-transform: translateX(110%); transform: translateX(110%);
  visibility: hidden;
  -webkit-transition: transform 0.35s ease, visibility 0s linear 0.35s;
  transition: transform 0.35s ease, visibility 0s linear 0.35s;
}
.mobile-menu-panel.open {
  -webkit-transform: translateX(0); transform: translateX(0);
  visibility: visible; -webkit-transition-delay: 0s; transition-delay: 0s;
}
.mobile-menu-close { position: absolute; top: 18px; left: 18px; color: #fff; font-size: 24px; z-index: 5; }
.mobile-menu-close:hover { color: var(--green); }
.mobile-menu-brand {
  padding: 20px 20px 16px 55px; border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 8px;
}
.mobile-menu-brand .dima-brand { justify-content: center; text-align: center; }
.mobile-menu-brand .dima-logo-text { text-align: center; }
.mobile-menu-panel .dima-nav { flex-direction: column; align-items: stretch; width: 100%; padding: 0 22px; }
.mobile-menu-panel .dima-nav > li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.12); }
.mobile-menu-panel .dima-nav > li > a { width: 100%; color: #fff; padding: 16px 8px; font-size: 15px; }
.mobile-menu-panel .dima-nav > li > a:hover { color: var(--green); }
.mobile-menu-panel .dima-nav > li.active > a { color: var(--green); }

/* ====== HERO SLIDER ====== */
.hero-slider {
  position: relative; overflow: hidden; height: 70vh; min-height: 500px; margin-top: 83px;
  background: linear-gradient(0deg, #022454, #022454);
  cursor: grab;
}
.hero-slider.dragging { cursor: grabbing; }
.hero-slider.dragging .hero-slide { -webkit-user-select: none; user-select: none; }
.hero-slide {
  position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden;
  display: flex; align-items: flex-start;
  -webkit-transition: opacity 1.2s ease, visibility 0s linear 1.2s;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
.hero-slide-bg {
  position: absolute; inset: -25px; z-index: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  transform-origin: center; will-change: transform;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  -webkit-transition: transform 1.8s ease, filter 1.2s ease;
  transition: transform 1.8s ease, filter 1.2s ease;
}

/* Per-slide fade effects: each slide's background zooms/blurs differently */
.hero-slide:nth-child(6n+1) .hero-slide-bg { transform: scale(1.18); }
.hero-slide:nth-child(6n+2) .hero-slide-bg { transform: scale(1.1); }
.hero-slide:nth-child(6n+3) .hero-slide-bg { filter: blur(8px); transform: scale(1.15); }
.hero-slide:nth-child(6n+4) .hero-slide-bg { transform: scale(1.25); }
.hero-slide:nth-child(6n+5) .hero-slide-bg { filter: blur(12px); transform: scale(1.1); }
.hero-slide:nth-child(6n+6) .hero-slide-bg { transform: scale(1.2); }

.hero-slide.active {
  opacity: 1; visibility: visible;
  -webkit-transition: opacity 1.2s ease, visibility 0s linear 0s;
  transition: opacity 1.2s ease, visibility 0s linear 0s;
}
.hero-slide.active .hero-slide-bg { transform: scale(1); filter: blur(0); }
.hero-slide .container { position: relative; z-index: 5; display: flex; justify-content: flex-start; }
.hero-slide .slide-inner { position: relative; z-index: 5; padding-top: 60px; padding-right: 40px; text-align: right; }

/* Staggered text fade: title -> paragraph -> buttons */
.hero-slide .anim-item { opacity: 0; }
.hero-slide.active .anim-item { animation: heroBlurIn 0.8s 0.35s ease both; }
.hero-slide.active .anim-item.d2 { animation: heroSideIn 0.8s 0.8s ease both; }
.hero-slide.active .anim-item.d3 { animation: heroRise 0.8s 1.25s ease both; }

/* first slide (on page load): big cinematic zoom-in for the text */
.hero-slide:nth-child(6n+1).active .anim-item.d1 { animation: heroZoomIn 1.2s 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero-slide:nth-child(6n+1).active .anim-item.d2 { animation: heroZoomIn 1.2s 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero-slide:nth-child(6n+1).active .anim-item.d3 { animation: heroZoomIn 1.2s 1.35s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* per-slide variety: each slide uses different shapes for title/desc/buttons */
.hero-slide:nth-child(6n+2).active .anim-item.d1 { animation: heroFlipIn 0.9s 0.35s ease both; }
.hero-slide:nth-child(6n+2).active .anim-item.d2 { opacity: 1; animation: none; }
.hero-slide:nth-child(6n+2).active .anim-item.d3 { animation: heroScaleIn 0.9s 1.25s ease both; }

.hero-slide:nth-child(6n+3).active .anim-item.d1 { animation: heroDropIn 0.85s 0.35s ease both; }
.hero-slide:nth-child(6n+3).active .anim-item.d2 { animation: heroRise 0.85s 0.8s ease both; }
.hero-slide:nth-child(6n+3).active .anim-item.d3 { animation: heroSideIn 0.85s 1.25s ease both; }

.hero-slide:nth-child(6n+4).active .anim-item.d1 { animation: heroSideIn 0.9s 0.35s ease both; }
.hero-slide:nth-child(6n+4).active .anim-item.d2 { animation: heroScaleIn 0.9s 0.8s ease both; }
.hero-slide:nth-child(6n+4).active .anim-item.d3 { animation: heroBlurIn 0.9s 1.25s ease both; }

.hero-slide:nth-child(6n+5).active .anim-item.d1 { animation: heroBlurIn 1s 0.35s ease both; }
.hero-slide:nth-child(6n+5).active .anim-item.d2 { animation: heroFlipIn 1s 0.8s ease both; }
.hero-slide:nth-child(6n+5).active .anim-item.d3 { animation: heroRise 1s 1.25s ease both; }

.hero-slide:nth-child(6n+6).active .anim-item.d1 { animation: heroScaleIn 0.8s 0.35s ease both; }
.hero-slide:nth-child(6n+6).active .anim-item.d2 { animation: heroDropIn 0.8s 0.8s ease both; }
.hero-slide:nth-child(6n+6).active .anim-item.d3 { animation: heroSideIn 0.8s 1.25s ease both; }
.hero-slide h1,
.hero-slide h2 {
  font-family: "Cairo", sans-serif;
  font-size: clamp(23px, 3.8vw, 38px); font-weight: 800; color: #022454; line-height: 1.4; margin-bottom: 18px;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.5);
}
.hero-slide p { font-size: 18px; font-weight: 400; color: #022454; max-width: 650px; margin-bottom: 28px; line-height: 30px; text-shadow: 0 1px 6px rgba(255, 255, 255, 0.5); }
/* Hosting slide (slide 3): white text for contrast over the dark server image */
.hero-slide:nth-child(3) h1,
.hero-slide:nth-child(3) h2,
.hero-slide:nth-child(3) p {
  color: #fff;
  text-shadow: 0 2px 12px rgba(2, 36, 84, 0.8);
}
.hero-slide:nth-child(3) h1.hero-title-sm, .hero-slide:nth-child(3) h2.hero-title-sm { font-size: clamp(24px, 3.8vw, 38px); }
.hero-slide:nth-child(3) .anim-item.d3 { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
/* Hosting slide title: white neon glow */
.hero-slide.active:nth-child(3) h2.hero-title-sm {
  animation: heroDropIn 0.85s 0.35s ease both, heroTitleGlow 2.6s ease-in-out 1.2s infinite;
}
@keyframes heroTitleGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(255, 255, 255, 0.7), 0 0 18px rgba(255, 255, 255, 0.4); }
  50% { text-shadow: 0 0 14px #fff, 0 0 32px rgba(255, 255, 255, 0.9), 0 0 64px rgba(255, 255, 255, 0.6); }
}
/* Store slide (slide 1): white title + green description like the consult button */
.hero-slide:nth-child(1) h1,
.hero-slide:nth-child(1) h2 {
  color: #fff;
  text-shadow: 0 2px 12px rgba(2, 36, 84, 0.8);
  font-size: clamp(32px, 5vw, 52px);
}
.hero-slide:nth-child(1) h1 .hero-title-green, .hero-slide:nth-child(1) h2 .hero-title-green { color: var(--green); }
.hero-slide:nth-child(1) .slide-inner { padding-top: 40px; }
.hero-slide:nth-child(1) .anim-item.d3,
.hero-slide:nth-child(2) .anim-item.d3 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-slide:nth-child(1) p {
  color: #fff;
  text-shadow: 0 2px 12px rgba(2, 36, 84, 0.8);
  margin-bottom: 12px;
}
.hero-slide h1.hero-title-sm, .hero-slide h2.hero-title-sm { font-size: clamp(19px, 3.2vw, 33px); }

@keyframes heroBlurIn { from { opacity: 0; filter: blur(14px); transform: translateY(30px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes heroZoomIn { from { opacity: 0; transform: scale(2.4); filter: blur(14px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes heroFlipIn { from { opacity: 0; transform: perspective(700px) rotateX(-70deg) translateY(35px); } to { opacity: 1; transform: perspective(700px) rotateX(0) translateY(0); } }
@keyframes heroDropIn { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroRise { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroSideIn { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes heroScaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }

/* slider controls */
.hero-controls .prev, .hero-controls .next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 45px; height: 45px; background: rgba(2,36,84,0.85); color: #fff;
  border: 0; border-radius: 50%; font-size: 18px; cursor: pointer; z-index: 10;
  display: flex; align-items: center; justify-content: center;
}
.hero-controls .prev { right: 20px; }
.hero-controls .next { left: 20px; }
.hero-controls .prev:hover, .hero-controls .next:hover { background: var(--green); }
.hero-bullets { position: absolute; bottom: 20px; left: 0; right: 0; z-index: 10; text-align: center; }
.hero-bullets span {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.8); margin: 0 5px; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
.hero-bullets span.active { background: var(--green); }

/* ====== BUTTONS ====== */
.dima-button {
  display: inline-block; cursor: pointer; position: relative;
  font-family: "Droid Arabic Kufi", "Cairo", sans-serif; font-weight: 600;
  background: var(--primary); color: #fff; text-align: center; line-height: 18px;
  min-width: 160px; padding: 15px 30px; transition: background 0.3s;
}
.dima-button:hover { color: #fff; background: var(--primary-dark); }
.dima-button.di_green { background: var(--green); }
.dima-button.di_green:hover { background: var(--green-dark); }
.dima-btn-pill { border-radius: 18em; }
.dima-btn-small { min-width: 130px; padding: 12px 25px; font-size: 13px; }
.button-block { display: block; width: 100%; }

/* ====== SECTION HEADINGS ====== */
.section { padding: 80px 0; }
.section-light { background: var(--light-bg); }
.dima-custom-heading { font-size: 32px; font-weight: 700; margin-bottom: 20px; position: relative; }
.dima-custom-heading.text-center { text-align: center; }
.sec-subtitle { max-width: 700px; margin: 0 auto 20px; }

/* ====== FEATURES / ICON BOXES ====== */
.dima-iconbox .icon-box-header { margin-bottom: 20px; }
.dima-iconbox i.box-circle {
  width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 28px; font-style: normal;
  background: #f6fbff; color: var(--primary); box-shadow: 0 0 0 1px var(--primary);
  transition: all 0.3s;
}
.dima-iconbox:hover i.box-circle { background: var(--primary); color: #fff; }
.features-title { font-size: 18px; margin-bottom: 10px; }
.text-center .icon-box-header { text-align: center; }
.text-center i.box-circle { margin: 0 auto; }
.features-content p { margin-bottom: 0; }

/* Features-start (OKAB demo: icon right, text beside it) */
.ok-row { position: relative; margin: 0 -15px; clear: both; }
.ok-row::after { content: ""; display: table; clear: both; }
.ok-xsd-12, .ok-md-6 { position: relative; float: right; padding: 0 15px; box-sizing: border-box; }
.ok-xsd-12 { width: 100%; }
.ok-md-6 { width: 50%; }

.features-start { position: relative; padding: 30px; }
.features-start.no-box { padding: 0; }
.features-start .icon-box-header { width: auto; margin-left: 30px; float: right; }
.features-start .icon-box-header i { display: block; position: relative; top: 0; z-index: 10; color: #363636; transition: all 0.2s ease-in; }
.features-start .features-content { overflow: hidden; }
.features-start .features-content .features-title { text-align: right; }
.features-start .features-content p { text-align: right; padding: 0; }
.features-start .features-title { font-size: 18px; line-height: 1.4em; margin-bottom: 13px; color: #1565c0; transition: color 0.2s ease-in; }

/* box-circle icon (OKAB demo: 85px blue circle) */
.features-start .icon-box-header i.box-circle {
  width: 85px; height: 85px; font-size: 45px; line-height: 85px; border-radius: 50%;
  text-align: center; background: #f6fbff; box-shadow: 0 0 0 2px #1565c0; color: #1565c0;
}
.features-start:hover .icon-box-header i.box-circle { background: #1565c0 !important; color: #fff !important; box-shadow: 0 0 0 1px #f5f5f5; }

/* Mobile: keep OKAB demo layout (icon right, text beside), circles shrink on small phones */
@media (max-width: 767px) {
  .dima-topbar { display: none; }
  #header { position: sticky; top: 0; }
  .hero-slider { margin-top: 0; }
  .ok-md-6 { width: 100%; }
}
@media (max-width: 480px) {
  .features-start .icon-box-header i.box-circle { width: 64px; height: 64px; line-height: 64px; font-size: 21px; }
}

/* ====== ABOUT ====== */
.about-img-wrap { text-align: center; }
.about-img-wrap img { max-width: 380px; width: 100%; height: 420px; object-fit: cover; object-position: center top; }

/* ====== VIDEO SECTION ====== */
.video-section {
  position: relative; background: url("../images/video-bg.jpg") center center / cover fixed no-repeat;
  padding: 90px 0; color: #fff;
}
.video-section::after { content: ""; position: absolute; inset: 0; background: rgba(2,36,84,0.75); }
.video-section .container { position: relative; z-index: 5; }
.video-section h2 { color: #fff; }
.video-section p { color: #fff; opacity: 0.9; max-width: 600px; }
.play-video-btn { display: inline-block; }
.play-video-btn img { max-width: 125px; transition: transform 0.3s; }
.play-video-btn:hover img { transform: scale(1.08); }

/* ====== PROGRESS BARS ====== */
.dima-progressbar { margin-bottom: 35px; }
.dima-progressbar .progress {
  height: 25px; background: #f0f0f0; border-radius: 0; overflow: hidden; position: relative;
}
.dima-progressbar .progress-bar {
  width: 0; height: 100%; background: var(--primary); color: #fff;
  font-size: 12px; line-height: 25px; position: relative;
  transition: width 1.5s ease;
  background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
  box-shadow: inset 0 1px 5px rgba(0,0,0,0.45);
}
.dima-progressbar .progress-bar.green { background-color: var(--green); }
.dima-progressbar .percent { position: absolute; left: 10px; top: 0; font-family: "Droid Arabic Kufi", sans-serif; }
.h-skill-bar { color: var(--gray-text); font-weight: 400; margin: 10px 0 0; font-size: 15px; }

/* ====== SERVICES ====== */
.features-box { padding: 25px; background: #fff; border: 1px solid var(--border); transition: all 0.3s; height: 100%; }
.features-box:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08); border-color: var(--primary); }
.features-box i.box-circle {
  background: transparent; color: var(--primary); box-shadow: 0 0 0 1px var(--primary);
}
.features-box:hover i.box-circle { background: var(--primary); color: #fff; }

/* ====== CALLOUT ====== */
.callout-section {
  position: relative; background: var(--primary); padding: 55px 0;
  overflow: hidden;
}
.callout-section .callout-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url("../images/callout-bg.jpg");
  background-size: cover; background-position: center;
  background-attachment: fixed;
}
.callout-section .callout-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(2,36,84,0.92) 0%, rgba(2,36,84,0.6) 100%);
}
.callout-section .callout-grid {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 46px 46px;
}
#calloutParticles {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  pointer-events: none;
}
.callout-section .container { position: relative; z-index: 5; }
.callout-section h3 { color: #fff; font-size: 26px; margin-bottom: 10px; }
.callout-section p { color: rgba(255,255,255,0.85); margin-bottom: 0; }
.callout-section .callout-btn { text-align: left; }
@media (max-width: 767px) {
  .callout-section { padding: 35px 0; }
  .callout-section .callout-bg { background-attachment: scroll; }
  .callout-section h3 { font-size: 22px; }
  .callout-section .callout-btn { text-align: right; margin-top: 18px; }
}

/* ====== FAQ ====== */
.dima-faq-item {
  background: #fff;
  border: 1px solid #e6ecf5;
  border-radius: 10px;
  margin-bottom: 14px;
  padding: 18px 24px;
  box-shadow: 0 4px 14px rgba(2, 36, 84, 0.06);
  text-align: right;
}
.dima-faq-item h3 {
  font-family: "Cairo", sans-serif;
  font-size: 18px; font-weight: 700; color: #022454; margin-bottom: 6px;
}
.dima-faq-item p { color: #5a6b80; margin: 0; line-height: 28px; }

/* ====== PORTFOLIO (home-03 style) ====== */
.section-portfolio { background: #fafafa; }

.filters-box.filters ul { border: none; margin: 0; text-align: center; }
.filters-box.filters ul li { display: inline-block; padding: 0 4px 10px 4px; cursor: pointer; }
.filters-box.filters ul li a {
  border: 1px solid #e1e1e1; padding: 0.75em 1.2em; font-size: 14px; line-height: 14px;
  display: inline-block; background: #fff; color: #707070; font-weight: 400;
  -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
}
.filters-box.filters ul li a:hover { border-color: #022454; color: #fff; background: #022454 !important; }
.filters-box.filters ul .current a { border-color: #022454; color: #fff; background: #022454 !important; }

#dima-isotope-container { display: flex; flex-wrap: wrap; }
#dima-isotope-container .isotope-item { width: 25%; }
#dima-isotope-container .isotope-item.dima-hide { display: none; }

.work-item { position: relative; overflow: hidden; width: 100%; }
.work-item .post-feature { position: relative; overflow: hidden; }
.work-item img { width: 100%; display: block; transition: transform 0.5s ease; }
.work-item:hover img { transform: scale(1.06); }

.work-item .post-icon.link_overlay {
  position: absolute; inset: 0; background: #022454 !important; opacity: 0;
  display: flex; align-items: center; justify-content: center; z-index: 5;
  -webkit-transition: all 0.25s ease-in; transition: all 0.25s ease-in;
}
.work-item:hover .post-icon.link_overlay { opacity: 1; }

.icons-media { list-style: none; margin: 0; padding: 0; display: flex; position: relative; z-index: 99; }
.icons-media li { display: inline-block; margin: 0 8px; }
.icons-media li a {
  display: inline-block; width: 50px; height: 50px; border: 1px solid #fff;
  font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 20px; line-height: 48px;
  color: #fff; text-align: center; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
}
.icons-media li a:hover { border-color: #fff; background: #fff; color: #022454; }

.topaz-hover { width: 100%; position: absolute; top: 0; left: 0; z-index: 5; }

/* ====== LIGHTBOX ====== */
.lightbox-modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 100000;
  display: none; align-items: center; justify-content: center; overflow: hidden;
}
.lightbox-modal.open { display: flex; }
.lightbox-modal img { max-width: 90%; max-height: 90%; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
/* Tall screenshots: autoplay vertical pan (height set inline by JS so width fits viewport); other images fit normally */
.lightbox-modal.lb-tall img { max-width: none; max-height: none; height: 260vh; transition: transform 0.15s ease-out; will-change: transform; }
.lightbox-modal.lb-tall img.lb-anim { transition: none; }
.lightbox-modal .lb-close {
  position: absolute; top: 20px; left: 30px; color: #fff; font-size: 32px; cursor: pointer; z-index: 10;
}
.lightbox-modal .lb-close:hover { color: #022454; }

/* ====== PRICING ====== */
.dima-pricing-table { width: 100%; }
.dima-pricing-col {
  background: #fff; border: 1px solid var(--border); text-align: center;
  padding: 0 0 35px; margin-bottom: 30px; transition: all 0.3s;
}
.dima-pricing-col:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.dima-pricing-col .header { background: var(--dark-2); color: #fff; padding: 18px 10px; }
.dima-pricing-col .header h4 { color: #fff; margin: 0; font-size: 20px; }
.dima-pricing-col.featured .header { background: var(--green); }
.dima-pricing-row {
  padding: 25px 0; border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.dima-pricing-row .pricing { font-size: 42px; font-weight: 700; color: var(--dark-2); font-family: "Droid Arabic Kufi", sans-serif; }
.dima-pricing-row .currency { vertical-align: super; font-size: 22px; }
.dima-pricing-row .interval { font-size: 14px; color: var(--gray-text); }
.dima-pricing-col.featured .dima-pricing-row { color: var(--green); }
.dima-pricing-col.featured .dima-pricing-row .pricing { color: var(--green); }
.icon-list { list-style: none; padding: 0 25px; margin: 0 0 25px; }
.icon-list li { padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }

/* ====== TESTIMONIALS ====== */
.testimonial-section {
  position: relative; background: url("../images/testimonial-bg.jpg") center center / cover fixed no-repeat;
  padding: 90px 0;
}
.testimonial-section::after { content: ""; position: absolute; inset: 0; background: rgba(46,46,46,0.85); }
.testimonial-section .container { position: relative; z-index: 5; }
.testimonial-section .dima-custom-heading { color: #fff; }
.testimonials-slider { max-width: 800px; margin: 0 auto; text-align: center; }
.testimonial-item { display: none; }
.testimonial-item.active { display: block; animation: fadeInUp 0.7s ease; }
.testimonial-item blockquote { border: 0; padding: 0 30px; }
.testimonial-item blockquote p { color: #fff; font-size: 18px; line-height: 34px; font-style: italic; }
.dima-testimonial-meta { color: #fff; display: block; margin-top: 20px; }
.dima-testimonial-meta strong { color: var(--green); font-family: "Droid Arabic Kufi", sans-serif; }
.dima-testimonial-meta span { color: rgba(255,255,255,0.7); }
.testimonial-dots { margin-top: 30px; }
.testimonial-dots span {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.4); margin: 0 5px; cursor: pointer;
}
.testimonial-dots span.active { background: var(--green); }

/* ====== BLOG ====== */
.blog-card { background: #fff; border: 1px solid var(--border); margin-bottom: 30px; transition: all 0.3s; }
.blog-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.blog-card .post-img { position: relative; overflow: hidden; }
.blog-card .post-img img { width: 100%; transition: transform 0.5s; }
.blog-card:hover .post-img img { transform: scale(1.05); }
.blog-card .post-img .link_overlay {
  position: absolute; inset: 0; background: rgba(2,36,84,0.8); opacity: 0; transition: opacity 0.4s;
  display: flex; align-items: center; justify-content: center;
}
.blog-card:hover .post-img .link_overlay { opacity: 1; }
.blog-card .post-img .link_overlay a { color: #fff; font-size: 22px; }
.blog-card .post-meta { padding: 12px 20px; background: #f7f7f7; font-size: 12px; color: var(--gray-text); }
.blog-card .post-meta ul { list-style: none; margin: 0; padding: 0; }
.blog-card .post-meta li { display: inline-block; }
.blog-card .post-meta li:last-child { float: left; }
.blog-card .post-meta a { color: var(--gray-text); }
.blog-card .post-meta a:hover { color: var(--primary); }
.blog-card .entry-content { padding: 15px 20px 25px; }
.blog-card .entry-title { font-size: 17px; margin-bottom: 8px; }
.blog-card .entry-title a { color: #2a2a2a; }
.blog-card .entry-title a:hover { color: var(--primary); }

/* ====== FOOTER ====== */
.top-footer { background: var(--dark-2); padding: 70px 0 50px; color: #898989; }
.top-footer p { color: #fff; }
.top-footer .widget-title { color: #fff; font-size: 18px; margin-bottom: 25px; padding-bottom: 12px; position: relative; }
.top-footer .widget-title::after {
  content: ""; position: absolute; bottom: 0; right: 0; width: 35px; height: 2px; background: #fff;
}
.top-footer .social-media { list-style: none; padding: 0; margin: 20px 0 0; }
.top-footer .social-media li { display: inline-block; margin-left: 8px; }
.top-footer .social-media a {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.1);
  color: #fff; display: flex; align-items: center; justify-content: center; transition: all 0.3s;
}
.top-footer .social-media a:hover { background: var(--primary); }
.top-footer ul.footer-links { list-style: none; padding: 0; margin: 0; }
.top-footer ul.footer-links li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.top-footer ul.footer-links li:last-child { border-bottom: 0; }
.top-footer ul.footer-links a { color: #a6a6a6; font-size: 15px; font-weight: 700; }
.top-footer ul.footer-links a:hover { color: #fff; }
.top-footer .post-date { display: block; font-size: 12px; color: #6a6a6a; }
.top-footer .feedburner-email {
  width: 100%; background: rgba(255,255,255,0.08); border: 0; color: #fff;
  padding: 12px 15px; margin-bottom: 12px; outline: none;
}
.dima-footer { background: var(--dark); color: #898989; padding: 50px 0; }
.dima-footer .copyright { float: right; }
.dima-footer .dima-menu { list-style: none; margin: 0; padding: 0; float: left; }
.dima-footer .dima-menu li { display: inline-block; margin-left: 15px; }
.dima-footer .dima-menu a { color: #a6a6a6; font-size: 15px; font-weight: 700; }
.dima-footer .dima-menu a:hover { color: #fff; }
@media (max-width: 767px) {
  .dima-footer .dima-menu { display: none; }
  .dima-footer .copyright { float: none; text-align: center; }
}

/* ====== BACK TO TOP ====== */
#scrollToTop {
  position: fixed; bottom: 25px; left: 25px; width: 45px; height: 45px; border-radius: 50%;
  background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 20px; z-index: 999; opacity: 0; visibility: hidden; transition: all 0.3s;
}
#scrollToTop.show { opacity: 1; visibility: visible; }
#scrollToTop:hover { background: var(--green); }
@media (max-width: 767px) {
  #scrollToTop { bottom: 18px; left: 18px; width: 42px; height: 48px; }
}

/* ====== LOADER ====== */
#dima-loading {
  position: fixed; inset: 0; background: #fff; z-index: 99999;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
#dima-loading.hidden { opacity: 0; visibility: hidden; transition: all 0.5s; }
.loader-spinner {
  width: 45px; height: 45px; border-radius: 50%; border: 4px solid var(--border);
  border-top-color: var(--primary); animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Branded preloader */
.loader-brand { display: flex; flex-direction: column; align-items: center; gap: 20px; animation: loaderIn 0.6s ease both; }
.loader-logo {
  font-family: "Cairo", sans-serif; font-size: 42px; font-weight: 800; color: var(--primary);
  line-height: 1.25; text-align: center;
}
.loader-logo span {
  display: block; font-size: 15px; font-weight: 600; color: var(--green); letter-spacing: 1px;
}
.loader-bar { width: 190px; height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; }
.loader-bar i { display: block; width: 45%; height: 100%; border-radius: 4px; background: var(--green); animation: loaderBar 1.1s ease-in-out infinite; }
@keyframes loaderBar { from { transform: translateX(220%); } to { transform: translateX(-250%); } }
@keyframes loaderIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 767px) {
  .loader-logo { font-size: 32px; }
  .loader-logo span { font-size: 13px; }
  .loader-bar { width: 150px; }
}

/* ====== ANIMATIONS (scroll reveal) ====== */
[data-animate] { opacity: 0; }
[data-animate].animated { animation-duration: 1s; animation-fill-mode: both; }
[data-animate="fadeInUp"].animated { animation-name: fadeInUp; }
[data-animate="flipInY"].animated { animation-name: flipInY; }
[data-animate="zoomIn"].animated { animation-name: zoomIn; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 40px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes flipInY {
  from { opacity: 0; transform: perspective(400px) rotate3d(0, 1, 0, 90deg); }
  to { opacity: 1; transform: perspective(400px) rotate3d(0, 1, 0, 0deg); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

/* ====== RESPONSIVE ====== */
@media (max-width: 991px) {
  .desk-nav { display: none; }
  .mobile-nav { display: block; }
  .dima-btn-nav { display: inline-block; }
  .dima-navbar-global { padding: 12px 0; }
  .mobile-nav .dima-navbar-global { display: grid; grid-template-columns: auto auto 1fr; align-items: center; }
  .mobile-nav .dima-btn-nav { justify-self: start; margin-right: 6px; }
  .mobile-nav .logo { justify-self: start; margin-right: 16px; }
  .mobile-nav .consult-link { justify-self: end; margin-left: 8px; }
  .hero-slide h1, .hero-slide h2 { font-size: 34px; }
  .hero-slider { height: 440px; }
  .section { padding: 60px 0; }
  #dima-isotope-container .isotope-item { width: 50%; }
}
@media (min-width: 768px) {
  .hero-slide:nth-child(4) .hero-slide-bg {
    background-image: url('../images/support-desktop.png') !important;
  }
  .hero-slide:nth-child(4) h2 {
    color: var(--green);
    text-shadow: 0 2px 12px rgba(2, 36, 84, 0.8);
  }
  .hero-slide:nth-child(4) p {
    color: #fff;
    text-shadow: 0 2px 12px rgba(2, 36, 84, 0.8);
  }
  .hero-slide:nth-child(3) { align-items: stretch; }
  .hero-slide:nth-child(3) .slide-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 60px;
  }
  .hero-slide:nth-child(3) .anim-item.d3 { margin-top: auto; }
  .hero-slide:nth-child(3) h1, .hero-slide:nth-child(3) h2 { color: var(--green); }
  .hero-slide:nth-child(3) .hero-slide-bg {
    background-image: url('../images/hostingkw.jpg') !important;
  }
}
@media (max-width: 767px) {
  .hero-slider { height: 720px; min-height: 0; }
  .hero-controls .prev, .hero-controls .next { display: none; }
  .hero-slide:nth-child(1) .hero-slide-bg {
    background-image: url('../images/store-mobile.png') !important;
    background-size: cover !important;
    background-position: center center;
    background-color: #022454;
    inset: 0;
    transform: none !important;
    filter: none !important;
    -webkit-transition: none; transition: none;
  }
  .hero-slide:nth-child(2) .hero-slide-bg {
    background-image: url('../images/mawqa-mobile.png') !important;
    background-size: cover !important;
    background-position: center center;
    background-color: #022454;
    inset: 0;
    transform: none !important;
    filter: none !important;
    -webkit-transition: none; transition: none;
  }
  .hero-slide:nth-child(3) .hero-slide-bg {
    background-image: url('../images/hosting-mobile.jpg') !important;
    background-size: cover !important;
    background-position: center center;
    background-color: #022454;
    inset: 0;
    transform: none !important;
    filter: none !important;
    -webkit-transition: none; transition: none;
  }
  .hero-slide:nth-child(4) .hero-slide-bg {
    background-image: url('../images/support-mobile.png') !important;
    background-size: cover !important;
    background-position: center center;
    background-color: #022454;
    inset: 0;
    transform: none !important;
    filter: none !important;
    -webkit-transition: none; transition: none;
  }
  .hero-slide:nth-child(3) h1, .hero-slide:nth-child(3) h2 { color: var(--green); }
  .hero-slide:nth-child(4) h2,
  .hero-slide:nth-child(4) p {
    color: #fff;
    text-shadow: 0 2px 12px rgba(2, 36, 84, 0.8);
  }
  .hero-slide:nth-child(3) .anim-item.d3 a:last-child { display: none; }
  .hero-slide:nth-child(3) { align-items: stretch; }
  .hero-slide:nth-child(3) .slide-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 120px;
  }
  .hero-slide:nth-child(3) .anim-item.d3 { margin-top: auto; }
  .hero-slide:nth-child(3) .anim-item.d3 .dima-button { padding: 18px 44px; font-size: 20px; }
}
@media (max-width: 575px) {
  .hero-slide h1, .hero-slide h2 { font-size: 26px; }
  .hero-slider { height: auto; min-height: 0; aspect-ratio: 736 / 1440; }
  .hero-slide:nth-child(1) .dima-button,
  .hero-slide:nth-child(2) .dima-button { min-width: 0; padding: 12px 18px; font-size: 14px; }
  .dima-custom-heading { font-size: 26px; }
  #dima-isotope-container .isotope-item { width: 100%; }
}

/* ====== INNER PAGES (WORKS / WORK DETAIL) ====== */
.page-head {
  position: relative;
  background-image: url("../images/callout-bg.jpg");
  background-size: cover; background-position: center;
  color: #fff; padding: 140px 0 60px; margin-top: 83px; text-align: center;
  overflow: hidden;
}
.page-head::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(2,36,84,0.92) 0%, rgba(2,36,84,0.6) 100%);
}
.page-head::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 46px 46px;
}
.page-head .title-particles {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none;
}
.page-head .container { position: relative; z-index: 2; }
.page-head h1 { color: #fff; font-size: 34px; font-weight: 800; margin: 0 0 10px; position: relative; z-index: 2; }
.page-head .breadcrumb {
  background: transparent; justify-content: center; margin: 20px 0 0; padding: 0;
  font-size: 14px; line-height: 20px; font-weight: 400;
}
.page-head .breadcrumb li { color: #fff; }
.page-head .breadcrumb li + li::before { color: #fff; content: "/"; padding: 0 5px; font-weight: 400; }
.page-head .breadcrumb a { color: #fff; }
.page-head .breadcrumb a:hover { color: #fff; text-decoration: underline; }

/* Works listing (same grid style as the homepage portfolio) */
.works-section { padding-top: 60px; }

.work-tag {
  display: inline-block; background: var(--green); color: #fff; border-radius: 18em;
  font-size: 13px; font-weight: 700; padding: 4px 16px; margin-bottom: 14px;
}
.work-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Work detail page */
.work-detail { padding-top: 60px; }
.work-detail .detail-img { box-shadow: 0 12px 35px rgba(2,36,84,0.15); }
.work-detail .detail-img a { display: block; cursor: zoom-in; }
.work-detail .detail-img img { width: auto; max-width: 100%; max-height: 80vh; display: block; margin: 0 auto; }
.detail-title { font-size: 32px; font-weight: 800; color: #2a2a2a; margin: 10px 0 14px; }
.detail-desc { line-height: 32px; margin-bottom: 15px; }
.detail-feats { list-style: none; margin: 0 0 22px; padding: 0; }
.detail-feats li { padding: 6px 0; font-size: 15px; }
.detail-feats i { color: var(--green); margin-left: 8px; }
.detail-meta { margin: 20px 0 25px; padding: 18px 20px; background: #f7f7f7; border-right: 3px solid var(--green); }
.detail-meta span { display: block; font-size: 14px; color: var(--gray-text); margin-bottom: 6px; }
.detail-meta span:last-child { margin-bottom: 0; }
.detail-meta strong { color: var(--primary); }
.detail-back {
  display: inline-block; margin-top: 25px; font-weight: 700; color: var(--primary);
}
.detail-back i { margin-left: 7px; }
.detail-back:hover { color: var(--green); }

.work-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 15px;
  margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--border);
}
.work-nav a { color: #2a2a2a; font-weight: 700; font-size: 15px; }
.work-nav a:hover { color: var(--primary); }
.work-nav i { color: var(--green); }

@media (max-width: 991px) {
  .page-head { margin-top: 0; padding: 95px 0 45px; }
}
@media (max-width: 767px) {
  .detail-title { font-size: 26px; }
  .work-nav { flex-direction: column; text-align: center; }
}

/* ====== CONTACT PAGE ====== */
.contact-section { padding-top: 60px; padding-bottom: 25px; }
.contact-form-card {
  background: #fff; border: 1px solid var(--border); padding: 35px;
  box-shadow: 0 8px 30px rgba(2,36,84,0.08);
  height: 100%;
}
.contact-form-card > h3 { font-size: 24px; margin: 0 0 8px; }
.contact-form-card > p { margin-bottom: 25px; }
.contact-form .form-control {
  border-radius: 0; border: 1px solid var(--border); padding: 12px 15px;
  font-family: "Cairo", sans-serif; margin-bottom: 18px; background: #fafafa;
  font-size: 15px;
}
.contact-form .form-control:focus {
  border-color: var(--primary); box-shadow: none; background: #fff;
}
.contact-form textarea.form-control { min-height: 220px; resize: vertical; }
.contact-form .form-control.is-invalid { border-color: #dc3545; background: #fff5f5; }

.contact-info-list { list-style: none; margin: 0; padding: 0; }
.contact-info-list li {
  display: flex; align-items: center; gap: 18px; padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.contact-info-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-info-list .ci-icon {
  flex: 0 0 55px; height: 55px; border-radius: 50%;
  background: #f6fbff; color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; box-shadow: 0 0 0 1px var(--primary);
}
.contact-info-list h5 { margin: 0 0 3px; font-size: 16px; font-weight: 800; }
.contact-info-list p { margin: 0; font-size: 14px; color: var(--gray-text); }

.contact-success { text-align: center; padding: 45px 20px; }
.contact-success i { font-size: 56px; color: var(--green); margin-bottom: 15px; }
.contact-success h4 { font-size: 22px; margin-bottom: 8px; }
.contact-success p { margin: 0; }

.contact-map-section { padding-top: 0; }
.map-wrap {
  position: relative; overflow: hidden;
  box-shadow: 0 8px 30px rgba(2,36,84,0.12);
}
.map-wrap iframe { width: 100%; height: 420px; border: 0; display: block; }
.contact-map-card {
  display: flex; align-items: center; gap: 20px; margin-top: 25px;
  padding: 22px; background: #fff; border: 1px solid var(--border);
  box-shadow: 0 8px 25px rgba(2,36,84,0.08);
}
.contact-map-card > i {
  flex: 0 0 55px; height: 55px; border-radius: 50%; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.contact-map-card h5 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.contact-map-card p { margin: 0; color: var(--gray-text); font-size: 14px; }

@media (max-width: 575px) {
  .contact-form-card { padding: 25px 20px; }
  .map-wrap iframe { height: 300px; }
}

/* ====== WHATSAPP FLOATING BUTTON ====== */
.whatsapp-float {
  position: fixed; bottom: 150px; left: 25px; z-index: 9990;
  display: flex; align-items: center; justify-content: center;
  width: 55px; height: 55px; border-radius: 50%;
  background: #25d366; color: #fff;
  box-shadow: 0 6px 20px rgba(37,211,102,0.45);
  text-decoration: none; transition: transform 0.3s, background 0.3s;
}
.whatsapp-float i { font-size: 30px; }
.whatsapp-float:hover { background: #1eb858; color: #fff; transform: translateY(-3px); }
@media (max-width: 767px) {
  .whatsapp-float { bottom: 135px; left: 18px; width: 50px; height: 48px; }
  .whatsapp-float i { font-size: 27px; }
}

/* ====== CALL FLOATING BUTTON ====== */
.call-float {
  position: fixed; bottom: 90px; left: 25px; z-index: 9990;
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 20px;
  box-shadow: 0 6px 20px rgba(2,36,84,0.35);
  text-decoration: none; transition: transform 0.3s, background 0.3s;
}
.call-float:hover { background: var(--green); color: #fff; transform: translateY(-3px); }
@media (max-width: 767px) {
  .call-float { bottom: 75px; left: 18px; width: 46px; height: 46px; }
}

/* Online dot (WhatsApp + Call) */
.wa-online {
  position: absolute; top: 1px; left: 1px; width: 13px; height: 13px; border-radius: 50%;
  background: #2fe360; border: 2px solid #fff;
  animation: waPing 1.8s ease-out infinite;
}
@keyframes waPing {
  0% { box-shadow: 0 0 0 0 rgba(47,227,96,0.55); }
  70% { box-shadow: 0 0 0 10px rgba(47,227,96,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,227,96,0); }
}

/* WhatsApp availability card */
.wa-card {
  position: fixed; bottom: 222px; left: 25px; z-index: 9989;
  max-width: 235px; padding: 13px 16px; background: #fff;
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(2,36,84,0.16);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}
.wa-card.show { opacity: 1; visibility: visible; transform: translateY(0); }
.wa-card::after {
  content: ''; position: absolute; bottom: -8px; left: 26px;
  width: 14px; height: 14px; background: #fff;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}
.wa-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Cairo", sans-serif; font-size: 13px; font-weight: 800; color: #128c4b;
}
.wa-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #2fe360;
  animation: waBlink 1.6s ease infinite;
}
@keyframes waBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.wa-card p { margin: 6px 0 0; font-size: 14px; line-height: 1.8; color: var(--dark); transition: opacity 0.3s ease; }
.wa-card p.wa-fade { opacity: 0; }
.wa-card-close {
  position: absolute; top: 7px; left: 9px; width: 20px; height: 20px; padding: 0;
  border: 0; background: transparent; color: #9aa3ad; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.wa-card-close:hover { color: var(--primary); }
@media (max-width: 767px) {
  .wa-card { bottom: 200px; left: 18px; max-width: 208px; padding: 11px 14px; }
}

/* ====== NAV DROPDOWN (خدماتنا) ====== */
.dima-nav > li.has-dropdown > a {
  display: flex; align-items: center; gap: 6px;
}
.dima-nav .dropdown-caret {
  font-size: 12px; color: var(--green);
  -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease;
}
.dima-nav > li.has-dropdown:hover .dropdown-caret,
.dima-nav > li.has-dropdown.open .dropdown-caret { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.dima-dropdown {
  position: absolute; top: 100%; right: 0; min-width: 230px;
  background: #fff; border-radius: 10px; box-shadow: 0 12px 30px rgba(2,36,84,0.16);
  list-style: none; margin: 0; padding: 8px 0; z-index: 2000;
  opacity: 0; visibility: hidden; -webkit-transform: translateY(12px); transform: translateY(12px);
  -webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s ease, visibility 0s linear 0.25s;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.dima-nav > li.has-dropdown:hover .dima-dropdown,
.dima-nav > li.has-dropdown.open .dima-dropdown {
  opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0);
  -webkit-transition-delay: 0s; transition-delay: 0s;
}
.dima-dropdown li a {
  display: block; padding: 10px 18px; color: #022454; text-align: right;
  font-family: "Cairo", sans-serif; font-size: 15px; font-weight: 600;
  border-right: 3px solid transparent; white-space: nowrap;
}
.dima-dropdown li a:hover { color: var(--green); background: #f4f8ff; border-right-color: var(--green); }

/* Mobile drawer dropdown */
.mobile-menu-panel .dima-nav > li.has-dropdown > a {
  display: flex; align-items: center; justify-content: space-between;
}
.mobile-menu-panel .dima-dropdown {
  position: static; display: none; min-width: 0; padding: 0 14px 10px;
  background: transparent; border-radius: 0; box-shadow: none;
  opacity: 1; visibility: visible; -webkit-transform: none; transform: none;
}
.mobile-menu-panel .dima-nav > li.has-dropdown.open .dima-dropdown { display: block; }
.mobile-menu-panel .dima-dropdown li { border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-menu-panel .dima-dropdown li:last-child { border-bottom: 0; }
.mobile-menu-panel .dima-dropdown li a { color: #cfe0ff; padding: 12px 16px; font-size: 14px; border-right: 0; }
.mobile-menu-panel .dima-dropdown li a:hover { color: var(--green); background: transparent; }

/* ====== FAQ ACCORDION ====== */
.dima-faq-item { cursor: pointer; }
.section .dima-faq-item h3 {
  position: relative; margin-bottom: 0; cursor: pointer; padding-left: 32px;
  -webkit-user-select: none; user-select: none;
}
.section .dima-faq-item h3::after {
  content: "+"; position: absolute; left: 0; top: 50%;
  -webkit-transform: translateY(-50%); transform: translateY(-50%);
  width: 22px; height: 22px; line-height: 20px; text-align: center;
  border: 2px solid var(--green); border-radius: 50%;
  color: var(--green); font-size: 14px; font-weight: 700;
  background: #fff;
  -webkit-transition: background 0.25s ease, color 0.25s ease;
  transition: background 0.25s ease, color 0.25s ease;
}
.section .dima-faq-item.open h3::after { content: "\2212"; background: var(--green); color: #fff; }
.section .dima-faq-item p { display: none; padding-top: 10px; }
.section .dima-faq-item.open p { display: block; }
/* ===== WhatsApp float badge + tooltip ===== */
.whatsapp-float .wa-badge {
  position: absolute; top: -10px; left: -7px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 4px;
  background: #ff3b30; color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1;
  border-radius: 999px; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  animation: waBadgePulse 2s infinite;
}
@keyframes waBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.whatsapp-float .wa-tip {
  position: absolute; bottom: calc(100% + 12px); left: 0;
  background: #fff; color: #333;
  font-size: 14px; font-weight: 600;
  padding: 8px 14px; border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  pointer-events: none; z-index: 5;
}
.whatsapp-float .wa-tip::after {
  content: ''; position: absolute; top: 100%; left: 24px;
  border: 7px solid transparent; border-top-color: #fff;
}
.whatsapp-float:hover .wa-tip,
.whatsapp-float:focus-visible .wa-tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* ===== Payment Methods Strip ===== */
.footer-bottom-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.footer-bottom-row .copyright{float:none;margin:0;}
.footer-bottom-row .dima-menu{float:none;}
.pay-inline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;}
.pay-inline img{height:38px;width:60px;border-radius:6px;display:block;object-fit:contain;}
.dima-footer{padding-bottom:26px;}
/* ===== Brand logo beside text ===== */
.dima-brand { display: flex; align-items: center; }
.dima-brand .logo-img-wrap { background: transparent; border-radius: 0; padding: 0; margin-inline-end: 6px; line-height: 0; flex-shrink: 0; }
.dima-brand .logo-img-wrap img { height: 150px; width: auto; display: block; }
@media (max-width: 576px) {
  .dima-brand .logo-img-wrap img { height: 40px; }
  .dima-brand .logo-img-wrap { padding: 0; margin-inline-end: 5px; }
  .dima-logo-text { font-size: 17px; line-height: 1.1; }
  .dima-logo-sub { font-size: 10px; letter-spacing: 0; margin-top: 7px; }
}