/* Custom site-wide refinements */

/* Product & Blog Card Alignment */
.service-media-bx,
.item-box,
.blog-post.post-style-1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 30px;
}

.service-media-bx .dlab-media,
.item-box .item-img,
.blog-post .dlab-post-media {
  width: 100%;
  aspect-ratio: 1/1; /* Square images for better grid consistency */
  overflow: hidden;
  position: relative;
}

.service-media-bx .dlab-media img,
.item-box .item-img img,
.blog-post .dlab-post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
}

.service-media-bx .dlab-info,
.item-box .item-info,
.blog-post .dlab-post-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;
}

.service-media-bx .dlab-title,
.item-box .item-title,
.blog-post .post-title {
  margin-top: 0;
  margin-bottom: 10px;
  min-height: 2.5em; /* Ensure titles align */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 18px;
}

/* Force buttons to the bottom */
.service-media-bx .site-button,
.item-box .site-button,
.blog-post .dlab-post-readmore {
  margin-top: auto !important;
}

.service-media-bx .item-price,
.item-box .item-price {
  margin-bottom: 15px;
}

/* Specific for Blog carousel items to fill height */
.blog-carousel .item,
.about-ser-carousel .item {
  height: 100%;
}

.blog-carousel .owl-stage,
.about-ser-carousel .owl-stage {
  display: flex;
}

/* Mobile Menu Refinements */
@media only screen and (max-width: 991px) {
  .header-nav.navbar-collapse {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    right: -100% !important;
    transition: all 0.5s;
    visibility: visible;
    display: block !important;
    background: #fff;
    z-index: 9999;
    margin: 0 !important;
    padding: 60px 20px !important;
  }
  .header-nav.navbar-collapse.show {
    right: 0 !important;
  }
  .nav-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10000;
  }
  .nav-close .navbar-toggler {
    display: block;
    background: transparent;
    border: 0;
    font-size: 24px;
    color: #000;
    padding: 0;
  }
}

/* Language switcher toggle */
.lang-btn {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 3px;
  transition: color 0.2s;
}
.lang-btn:hover {
  color: var(--color-primary, #e7272d);
}

/* Fix: Keep carousel nav arrows visible */
.about-carousel-ser .owl-carousel .owl-nav.disabled {
  display: block !important;
}
.about-carousel-ser .owl-btn-3.owl-carousel .owl-nav button.owl-prev,
.about-carousel-ser .owl-btn-3.owl-carousel .owl-nav button.owl-next {
  margin: 0 10px !important;
}

/* ── Nested sub-menu flyout direction ───────────────────────────────────────
   style.css and rtl.css have equal specificity so cascade order can be
   unreliable across browsers/cache. These [dir]-scoped rules win decisively.
   ──────────────────────────────────────────────────────────────────────── */

/* LTR: flyout opens to the RIGHT */
[dir="ltr"] .header-nav .nav > li .sub-menu li > .sub-menu {
  left: 220px;
  right: auto;
}
[dir="ltr"] .header-nav .nav > li .sub-menu li:hover > .sub-menu {
  left: 220px;
  right: auto;
}

/* RTL: flyout opens to the LEFT */
[dir="rtl"] .header-nav .nav > li .sub-menu li > .sub-menu {
  left: auto;
  right: 220px;
}
[dir="rtl"] .header-nav .nav > li .sub-menu li:hover > .sub-menu {
  left: auto;
  right: 220px;
}

/* ── Quote Request Modal ──────────────────────────────────────────────────── */
#quoteRequestModal .quote-modal-header {
  background-color: var(--color-primary, #228F3B);
  border-bottom: none;
  padding: 16px 20px;
}

#quoteRequestModal .quote-modal-header .modal-title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

#quoteRequestModal .quote-modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.85;
}

/* RTL: keep close button on the visual left (reading-start) */
[dir="rtl"] #quoteRequestModal .quote-modal-header {
  flex-direction: row-reverse;
}

[dir="rtl"] #quoteRequestModal .quote-modal-header .btn-close {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

#quoteRequestModal .form-control:focus {
  border-color: var(--color-primary, #228F3B);
  box-shadow: 0 0 0 0.2rem rgba(34, 143, 59, 0.15);
}

#quoteRequestModal textarea.form-control {
  min-height: 100px;
  resize: vertical;
}

#quoteRequestModal .quote-form-label {
  font-weight: 500;
  color: #444;
  margin-bottom: 4px;
}

[dir="rtl"] #quoteRequestModal .quote-form-label,
[dir="rtl"] #quoteRequestModal .invalid-feedback {
  text-align: right;
}

/* Arabic / RTL uses Tajawal (loaded via Google Fonts for every locale) */
html[dir="rtl"],
html[dir="rtl"] body {
  font-family: 'Tajawal', sans-serif;
}

/* Breadcrumb banner: same settings background image on all screen sizes */
.breadcrumb-banner {
  background-position: center !important;
  background-size: auto !important;
  background-repeat: no-repeat;
  background-color: #021B10 !important;
  background-image: var(--breadcrumb-bg-image);
}

@media only screen and (max-width: 767px) {
  .breadcrumb-banner .dlab-bnr-inr-entry {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: unset;
  }

  .breadcrumb-banner h1 {
    margin-bottom: 0;
    text-align: inherit;
  }

  .breadcrumb-banner .breadcrumb-row ul {
    width: auto;
    text-align: inherit;
  }
}

/* Keep phone numbers readable in RTL layouts */
.ltr-phone {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Footer: stack links vertically, no underline */
.site-footer.style1 a,
.site-footer.style1 .widget_about a,
.site-footer.style1 .footer-useful-links a,
.site-footer.style1 .footer-bottom a,
.site-footer.style1 .footer-bottom-in a,
.site-footer.style1 .dlab-social-icon a,
.site-footer.style1 a:hover,
.site-footer.style1 a:focus,
.site-footer.style1 a:active,
.site-footer.style1 .widget_about a:hover,
.site-footer.style1 .widget_about a:focus,
.site-footer.style1 .footer-useful-links a:hover,
.site-footer.style1 .footer-useful-links a:focus {
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: none !important;
}

.site-footer.style1 .footer-useful-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

.site-footer.style1 .footer-useful-links li {
  display: block;
  width: 100%;
  float: none;
  padding: 0 0 12px 0;
  font-size: 16px;
}

.site-footer.style1 .footer-useful-links li::before {
  content: none;
}

.site-footer.style1 a.footer-link {
  color: #9ae6b0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
}

.site-footer.style1 a.footer-link:hover,
.site-footer.style1 a.footer-link:focus {
  color: #c6f6d5;
}

.site-footer.style1 .footer-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #fff;
}

/* Sticky header without fixed-position layout jump */
.site-header .sticky-header.main-bar-wraper {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
}

.site-header .sticky-header.is-fixed .main-bar {
  position: static !important;
  box-shadow: none;
}

/* Prefer swap for icon/web fonts to reduce FOIT (PageSpeed font-display audit) */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../plugins/fontawesome/webfonts/fa-solid-900.woff2") format("woff2");
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../plugins/fontawesome/webfonts/fa-regular-400.woff2") format("woff2");
}

@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../plugins/fontawesome/webfonts/fa-brands-400.woff2") format("woff2");
}

@font-face {
  font-family: "LineAwesome";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../plugins/line-awesome/fonts/line-awesome.woff2?v=1.1.") format("woff2");
}

@font-face {
  font-family: "themify";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../plugins/themify/fonts/themify.woff?-fvbane") format("woff");
}

@font-face {
  font-family: "Flaticon";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../plugins/flaticon/Flaticon.woff") format("woff");
}

@font-face {
  font-family: "Flaticon";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../plugins/flaticon/beer/Flaticon.woff") format("woff");
}

/* Footer decorative background — WebP with PNG fallback */
.footer-top-bg {
  background-size: contain;
  background-image: url("../images/background/bg2.png");
  background-image: image-set(
    url("../images/background/bg2.webp") type("image/webp"),
    url("../images/background/bg2.png") type("image/png")
  );
}

.footer-contact-label {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* Topbar quote CTA — improve contrast for PageSpeed a11y */
.top-bar .topbar-quote-btn,
.top-bar .site-button.btnhover13 {
  background-color: #1a6b2c;
  border-color: #1a6b2c;
  color: #fff;
}
.top-bar .topbar-quote-btn:hover,
.top-bar .topbar-quote-btn:focus,
.top-bar .site-button.btnhover13:hover,
.top-bar .site-button.btnhover13:focus {
  background-color: #145522;
  border-color: #145522;
  color: #fff;
}

/* Product title links on gray backgrounds */
.about-carousel-ser .dlab-title a,
.service-media-bx .dlab-title a {
  color: #1a1a1a;
}
.about-carousel-ser .dlab-title a:hover,
.service-media-bx .dlab-title a:hover {
  color: #1a6b2c;
}

/* Larger Owl dots for touch targets */
.owl-dots-primary-full .owl-dots .owl-dot,
.owl-theme .owl-dots .owl-dot {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}
.owl-dots-primary-full .owl-dots .owl-dot span,
.owl-theme .owl-dots .owl-dot span {
  width: 12px;
  height: 12px;
  margin: 0;
}