/* ===== KH fixes: header/hero spacing + mobile sizing ===== */
/* Old Oppo/Android does not support CSS `inset` — Slides stay in flow and make page 4x wide -> white + shift right */
.hero-slide { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
.hero-slide-bg { top: -25px !important; right: -25px !important; bottom: -25px !important; left: -25px !important; }
/* Contact form CF7 causes horizontal shift on old narrow Oppo - force 100% */
@media (max-width: 991px) {
  #contact, #contact .container, #contact .row, #contact .col-lg-8, #contact .wpcf7, #contact .wpcf7-form, #contact .form-group, #contact .wpcf7-form-control-wrap { max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; }
  #contact .form-control, #contact input, #contact textarea, #contact select { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; }
}

html, body { overflow-x: hidden; }
* { box-sizing: border-box; }
img, video, iframe { max-width: 100%; }

/* Desktop: JS sets the exact header height as margin-top (flush, no gap/overlap) */
@media (min-width: 992px) {
  .hero-slide .slide-inner { padding-top: 60px; }
}

/* Mobile: header is sticky (in-flow) on mobile, so hero needs NO top margin - prevents CLS 0.301 */
@media (max-width: 991px) {
  .hero-slider { margin-top: 0 !important; }
  .dima-logo-text { font-size: 16px; }
  .dima-logo-text .dima-logo-sub { font-size: 10px; line-height: 1.25; }
  .hero-slide .slide-inner { padding-top: 60px; padding-right: 20px; }
  .hero-slide h1,
  .hero-slide h2 { font-size: 24px !important; }
  .hero-slide .anim-item.d3 { margin-top: 28px; }
  .hero-slide .hero-title-green { font-size: 24px !important; }
  .hero-slide p { font-size: 15px; line-height: 26px; }
  /* First slide on mobile uses the shop/store image (store-mobile.png) from style.css */
  /* Inner-page title bars: header is sticky/in-flow on mobile, so drop the desktop
     top margin that would otherwise create a gap between the header and the title bar */
  .page-head { margin-top: 0; }
  .title_container { margin-top: 0; }
  /* Safety net: stray empty <p> (porting artifacts) must not add top spacing */
  .dima-main.clearfix > p { margin: 0 !important; }
}

/* ===== Dropdown sub-menu (EN section uses a static nav with .sub-menu) ===== */
.dima-nav li { position: relative; }
.dima-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  min-width: 235px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  border-radius: 0 0 10px 10px;
  display: none;
  z-index: 1050;
  text-align: left;
}
.dima-nav li:hover > .sub-menu,
.dima-nav li:focus-within > .sub-menu { display: block; }
.dima-nav .sub-menu li { display: block; width: 100%; }
.dima-nav .sub-menu a {
  display: block;
  padding: 9px 20px;
  color: #1f2d3a;
  font-size: 14px;
  white-space: nowrap;
  border-bottom: 1px solid #f1f3f5;
}
.dima-nav .sub-menu li:last-child a { border-bottom: 0; }
.dima-nav .sub-menu a:hover { background: #f4f8f6; color: #0a8a4a; }
html[dir="rtl"] .dima-nav .sub-menu { left: auto; right: 0; text-align: right; }

/* Mobile: sub-menu stays inline inside the slide-in panel */
.mobile-menu-panel .sub-menu {
  position: static;
  display: block;
  box-shadow: none;
  background: transparent;
  padding: 0 0 0 14px;
  border-radius: 0;
}
.mobile-menu-panel .sub-menu a { border-bottom: 0; padding: 8px 14px; }
.mobile-menu-panel .sub-menu a:hover { background: rgba(255,255,255,.08); }

/* ===== Mobile nav: Services submenu collapsed by default, opens on tap ===== */
@media (max-width: 991px) {
  .dima-nav li.has-dropdown > .dima-dropdown { display: none !important; }
  .dima-nav li.has-dropdown.open > .dima-dropdown { display: block !important; }
  .dima-nav li.has-dropdown > a .dropdown-caret { display: inline-block; }
  .dima-nav li.has-dropdown.open > a .dropdown-caret { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
}
/* ===== Desktop: restore hover dropdown (global rule had hidden it) ===== */
@media (min-width: 992px) {
  .dima-nav li.has-dropdown > .dima-dropdown { display: block !important; }
}

/* ===== Professional contact form fields (AR + EN) - placeholder/focus ===== */
.form-control::placeholder { color: #9aa3b2; opacity: 1; font-weight: 400; }
.form-control::-webkit-input-placeholder { color: #9aa3b2; }
.form-control::-moz-placeholder { color: #9aa3b2; opacity: 1; }
.form-control:focus::placeholder { color: #c2c8d1; }
.form-control { transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; border-radius: 8px !important; }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(2,36,84,0.08); background: #fff; outline: none; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-not-valid-tip { font-size: 12px; color: #dc3545; margin-top: 4px; }
.form-control.is-invalid, .wpcf7-not-valid { border-color: #dc3545 !important; background: #fff5f5 !important; }

/* ===== Stats counter below hero (like menuboxkw) ===== */
.kh-stats { background: #022454; padding: 28px 0; }
.kh-stats .stats { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px; text-align: center; }
.kh-stats .stat { flex: 1 1 200px; padding: 10px; min-width: 140px; }
.kh-stats .stat b { display: block; font-size: 42px; font-weight: 800; color: #fff; font-family: "Cairo", sans-serif; line-height: 1; margin-bottom: 6px; }
.kh-stats .stat i { display: block; font-size: 28px; color: #8bc34a; margin-bottom: 10px; }
.kh-stats .stat span { font-size: 15px; color: #cbd5e1; font-weight: 600; }
@media (max-width: 767px) {
  .kh-stats { padding: 20px 0; }
  .kh-stats .stat b { font-size: 32px; }
  .kh-stats .stat span { font-size: 13px; }
}
@media (max-width: 480px) {
  .kh-stats .stats { gap: 12px; }
  .kh-stats .stat { flex: 1 1 100% !important; min-width: 100% !important; max-width: 100% !important; }
}
/* First slide title - very big */
.hero-slide:first-child h1 { font-size: clamp(26px, 3vw, 36px) !important; line-height: 1.4 !important; }
.hero-slide:first-child .hero-title-green { font-size: inherit !important; }
/* Enlarge icons */
.box-circle, .icon-box-medium { font-size: 36px !important; width: 88px !important; height: 88px !important; line-height: 88px !important; }
.hero-slide:first-child .hero-title-green { font-size: inherit !important; }
@media (max-width: 360px) {
  .hero-slide:first-child h1 { font-size: 24px !important; line-height: 1.0 !important; }
  .hero-slide:first-child h1 .line1 { line-height: 1.0 !important; margin: 0 !important; padding: 0 !important; margin-bottom: -2px !important; }
  .hero-slide:first-child h1 .line2 { line-height: 1.0 !important; margin: 0 !important; padding: 0 !important; }
}
@media (min-width: 361px) and (max-width: 380px) {
  .hero-slide:first-child h1 { font-size: 24px !important; line-height: 1.0 !important; }
  .hero-slide:first-child h1 .line1 { line-height: 1.0 !important; margin: 0 !important; padding: 0 !important; margin-bottom: -2px !important; }
  .hero-slide:first-child h1 .line2 { line-height: 1.0 !important; margin: 0 !important; padding: 0 !important; }
}
@media (min-width: 381px) and (max-width: 991px) {
  .hero-slide:first-child h1 { font-size: 24px !important; line-height: 1.0 !important; }
  .hero-slide:first-child h1 .line1 { line-height: 1.0 !important; margin: 0 !important; padding: 0 !important; margin-bottom: -2px !important; }
  .hero-slide:first-child h1 .line2 { line-height: 1.0 !important; margin: 0 !important; padding: 0 !important; }
}
@media (max-width: 991px) {
  .hero-slide:first-child .hero-title-green { font-size: inherit !important; }
}

/* Flag icon - bigger, taller and wider */
.flag-icon { font-size: 1.3em; display: inline-block; transform: scaleX(1.2) scaleY(1.25); vertical-align: middle; line-height: 1; margin-right: 2px; }
@media (max-width: 991px) {
  .flag-icon { font-size: 1.15em; transform: scaleX(1.2) scaleY(1.3); }
}
/* Title split for mobile/desktop - باحتراف next to في الكويت on mobile */
.desktop-only { display: inline !important; }
.mobile-only { display: none !important; }
@media (max-width: 991px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: inline !important; }
}
/* Title desktop/mobile split - fix duplication */
.desktop-title { display: block !important; }
.mobile-title { display: none !important; }
@media (max-width: 991px) {
  .desktop-title { display: none !important; }
  .mobile-title { display: block !important; }
}
/* Hero title lines - block for reliable line breaks */
.hero-slide h1 .line1, .hero-slide h1 .line2 { display: block; }

.hero-slide h1 .line1, .hero-slide h1 .line2 { display: block; }

/* Stats v2: icon next to number, same width as arabkha, numbers with + */
.kh-stats .stat { flex: 1 1 200px; min-width: 160px; display: flex !important; align-items: center; justify-content: center; gap: 12px; text-align: right; padding: 12px; }
.kh-stats .stat-icon { width: 56px; height: 56px; min-width: 56px; background: rgba(255,255,255,0.08); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kh-stats .stat-icon i { font-size: 24px !important; color: #8bc34a !important; margin: 0 !important; display: block !important; }
.kh-stats .stat { justify-content: center !important; text-align: center !important; align-items: center !important; }
.kh-stats .stats { justify-content: center !important; align-items: center !important; }
.kh-stats .stat-content { text-align: center !important; flex: 1; }
.kh-stats .stat-content b { display: flex !important; align-items: center; justify-content: center; gap: 4px; font-size: 54px; font-weight: 800; color: #fff; font-family: "Cairo", sans-serif; line-height: 1; margin-bottom: 6px; }
.kh-stats .stat-content b .plus { font-size: 36px; color: #fff; line-height: 1; }
.kh-stats .stat span, .kh-stats .stat-content > span { display: block; font-size: 22px !important; color: #cbd5e1; font-weight: 600; }
.kh-stats .stat-icon { width: 68px !important; height: 68px !important; min-width: 68px !important; }
.kh-stats .stat-icon i { font-size: 30px !important; }
/* TEMP HIDE removed - php if(false) used */

/* ===== Mobile: smooth fade without left scroll ===== */
@media (max-width: 991px) {
  html, body { overflow-x: hidden !important; max-width: 100% !important; }
  .hero-slider { overflow: hidden !important; position: relative !important; contain: paint !important; }
  .hero-slide { overflow: hidden !important; contain: paint !important; }
  .hero-slide .slide-inner { overflow: hidden !important; contain: paint !important; }
  .hero-slide h1, .hero-slide h2, .hero-slide .anim-item { overflow: hidden !important; max-width: 100% !important; contain: paint !important; }
  .hero-slide h1 .line1, .hero-slide h1 .line2 { overflow: hidden !important; max-width: 100% !important; }
  .flag-icon { transform: none !important; display: inline-block !important; max-width: 100% !important; }
  .hero-slide-bg { inset: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; transform: none !important; filter: none !important; transition: none !important; }
  .hero-slide .container,
  .hero-slide .slide-inner { max-width: 100% !important; width: 100% !important; overflow-x: hidden !important; padding-right: 20px !important; }
  .hero-slide .anim-item,
  .hero-slide h1, .hero-slide h2, .hero-slide p { max-width: 100% !important; width: 100% !important; }
  .hero-slide .anim-item.d3 { flex-wrap: wrap !important; }
  .hero-slide .anim-item.d3 .dima-button { white-space: normal !important; }
  /* No animation on mobile to keep performance 71 and no scroll */
  .hero-slide .anim-item,
  .hero-slide.active .anim-item,
  .hero-slide:nth-child(n).active .anim-item,
  .hero-slide:nth-child(n).active .anim-item.d1,
  .hero-slide:nth-child(n).active .anim-item.d2,
  .hero-slide:nth-child(n).active .anim-item.d3 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hero-slide-bg { transform: none !important; filter: none !important; transition: none !important; }
}
/* Portfolio filter button (was <a>, now <button> for SEO) */
.filters-box.filters ul li button {
  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;
  cursor: pointer; font-family: inherit;
}
.filters-box.filters ul li button:hover { border-color: #022454; color: #fff; background: #022454 !important; }
.filters-box.filters ul .current button { border-color: #022454; color: #fff; background: #022454 !important; }


/* Fix any single wide element still causing overflow - detect & clip */
@media (max-width: 991px) {
  section, .section, .container, .row, .col-md-*, .col-lg-*, .dima-main { max-width: 100% !important; overflow-x: hidden !important; }
}
/* Mobile stats enlarge - MUST BE LAST to override base */
@media (max-width: 360px) {
  .kh-stats .stat-content b { font-size: 60px !important; }
  .kh-stats .stat-content b .plus { font-size: 40px !important; }
  .kh-stats .stat-icon { width: 72px !important; height: 72px !important; min-width: 72px !important; }
  .kh-stats .stat-icon i { font-size: 32px !important; }
}
@media (max-width: 991px) {
  .kh-stats .stat-content b { font-size: 60px !important; }
  .kh-stats .stat-content b .plus { font-size: 40px !important; }
  .kh-stats .stat-icon { width: 72px !important; height: 72px !important; min-width: 72px !important; }
  .kh-stats .stat-icon i { font-size: 32px !important; }
}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Footer contact list (address / email / phone) - clean bordered list */
.top-footer .footer-contact { list-style: none; margin: 0; padding: 0; }
.top-footer .footer-contact li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.top-footer .footer-contact li + li { margin-top: -1px; }
.top-footer .footer-contact li i {
  flex: 0 0 18px; width: 18px; height: 18px; margin-top: 5px;
  color: var(--green); font-size: 16px; line-height: 18px; text-align: center;
}
.top-footer .footer-contact li span,
.top-footer .footer-contact li a,
.top-footer .footer-contact li a:link,
.top-footer .footer-contact li a:visited,
.top-footer .footer-contact li a:active,
.top-footer .footer-contact li a:focus {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 15px; font-weight: 400; line-height: 1.9;
}
.top-footer .footer-contact li span { display: block; }
.top-footer .footer-contact li a:hover { color: var(--green) !important; text-decoration: none !important; }

/* Map label overlay above the location pin */
.map-wrap { position: relative; }
.map-wrap .map-label {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff; padding: 8px 18px; border-radius: 30px;
  font-size: 14px; font-weight: 700; z-index: 5; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3); direction: rtl; max-width: calc(100% - 24px);
  overflow: hidden; text-overflow: ellipsis;
}
.map-wrap.map-label-ltr .map-label { direction: ltr; }
@media (max-width: 480px) {
  .map-wrap .map-label { font-size: 12px; padding: 6px 12px; white-space: normal; text-align: center; }
}