/* ==========================================================================
   Middle East Star Metal – layout refinements for the static HTML site.
   Loaded after the Elementor styles on every page.
   ========================================================================== */

/* ---------- Global ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; }
a[href^="mailto:"], a[href^="tel:"] { overflow-wrap: anywhere; }

/* ---------- Footer (template 367, shared by every page) ---------- */
.elementor-367 .elementor-element.elementor-element-741f2be7 {
  padding: 56px 0 32px !important;
  margin: 0 !important;
}
.elementor-367 .elementor-element.elementor-element-271b5146 img { width: 220px !important; max-width: 100%; }
.elementor-367 .elementor-element.elementor-element-226c49c4 { max-width: 360px; }
.elementor-367 .elementor-element.elementor-element-226c49c4 p { margin: 12px 0 0; line-height: 1.7; }
.elementor-367 .elementor-element.elementor-element-f6c25c,
.elementor-367 .elementor-element.elementor-element-218afd18 { margin-bottom: 18px !important; }
.elementor-367 .elementor-icon-list-item > a { transition: color .2s ease; }
.elementor-367 .elementor-icon-list-item > a:hover .elementor-icon-list-text { color: #4BADED !important; }

/* copyright bar */
.elementor-367 .elementor-element.elementor-element-4bf1856d {
  border-top: 1px solid rgba(255, 255, 255, .15) !important;
}
.elementor-367 .elementor-element.elementor-element-377fc83e { padding: 18px 16px !important; }
.elementor-367 .elementor-element.elementor-element-377fc83e p {
  margin: 0; font-size: 14px; text-align: center; opacity: .85;
}

/* desktop: brand | quick links | information (two lists) */
@media (min-width: 1025px) {
  .elementor-367 .elementor-element.elementor-element-3a9a93bd { width: 34% !important; }
  .elementor-367 .elementor-element.elementor-element-59958fc0 { width: 18% !important; }
  .elementor-367 .elementor-element.elementor-element-3ba0b9bd { width: 25% !important; }
  .elementor-367 .elementor-element.elementor-element-3c61c0c5 { width: 23% !important; }
  .elementor-367 .elementor-element.elementor-element-59958fc0 > .elementor-element-populated,
  .elementor-367 .elementor-element.elementor-element-3ba0b9bd > .elementor-element-populated,
  .elementor-367 .elementor-element.elementor-element-3c61c0c5 > .elementor-element-populated { padding: 0 10px !important; }
}

/* tablet: brand on top, then three link columns */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-367 .elementor-element.elementor-element-3a9a93bd { width: 100% !important; margin-bottom: 28px; }
  .elementor-367 .elementor-element.elementor-element-59958fc0,
  .elementor-367 .elementor-element.elementor-element-3ba0b9bd,
  .elementor-367 .elementor-element.elementor-element-3c61c0c5 { width: 33.333% !important; }
  .elementor-367 .elementor-element.elementor-element-3a9a93bd > .elementor-element-populated,
  .elementor-367 .elementor-element.elementor-element-59958fc0 > .elementor-element-populated,
  .elementor-367 .elementor-element.elementor-element-3ba0b9bd > .elementor-element-populated,
  .elementor-367 .elementor-element.elementor-element-3c61c0c5 > .elementor-element-populated { padding: 0 20px !important; }
}

/* mobile: single column, the two "Information" lists read as one */
@media (max-width: 767px) {
  .elementor-367 .elementor-element.elementor-element-741f2be7 { padding: 44px 0 24px !important; }
  .elementor-367 .elementor-element.elementor-element-3a9a93bd,
  .elementor-367 .elementor-element.elementor-element-59958fc0,
  .elementor-367 .elementor-element.elementor-element-3ba0b9bd,
  .elementor-367 .elementor-element.elementor-element-3c61c0c5 { width: 100% !important; }
  .elementor-367 .elementor-element.elementor-element-3a9a93bd > .elementor-element-populated,
  .elementor-367 .elementor-element.elementor-element-59958fc0 > .elementor-element-populated,
  .elementor-367 .elementor-element.elementor-element-3ba0b9bd > .elementor-element-populated,
  .elementor-367 .elementor-element.elementor-element-3c61c0c5 > .elementor-element-populated { padding: 0 20px !important; }
  .elementor-367 .elementor-element.elementor-element-3a9a93bd,
  .elementor-367 .elementor-element.elementor-element-59958fc0 { margin-bottom: 32px; }
  .elementor-367 .elementor-element.elementor-element-271b5146 img { width: 190px !important; }
  .elementor-367 .elementor-element.elementor-element-e246c38 > .elementor-widget-container { padding-top: 7px !important; }
  .elementor-367 .elementor-element.elementor-element-377fc83e p { font-size: 13px; }
}
@media (max-width: 1024px) {
  .elementor-367 .elementor-element.elementor-element-3c61c0c5 > .elementor-element-populated { padding-top: 0 !important; }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  /* entrance animations leave blank areas while scrolling on phones – show content straight away */
  .elementor-invisible { visibility: visible !important; }
  .elementor-element.animated { animation: none !important; }

  /* tighter vertical rhythm between sections */
  .elementor-element.elementor-element-12839a13,
  .elementor-element.elementor-element-497de928,
  .elementor-element.elementor-element-591451a2 { padding-top: 48px !important; }
  .elementor-element.elementor-element-7588350d { padding-bottom: 48px !important; }
  .elementor-element.elementor-element-1c1a9aaf,
  .elementor-element.elementor-element-2a5613b5,
  .elementor-element.elementor-element-43eac459,
  .elementor-element.elementor-element-7dfd5ebd { padding-top: 48px !important; padding-bottom: 48px !important; }
  .elementor-element.elementor-element-3da25f9e { padding-top: 40px !important; }

  /* home hero: no need for a full-screen block on a phone */
  .elementor-element.elementor-element-b73bc74 > .elementor-container { min-height: 0 !important; }
  .elementor-element.elementor-element-b06be6a > .elementor-container { min-height: 520px !important; }

  /* home service cards: shorter, with even spacing */
  .elementor-element.elementor-element-7588350d .elementor-spacer-inner { height: 115px !important; }
  .elementor-element.elementor-element-5064a03e > .elementor-element-populated,
  .elementor-element.elementor-element-2fb89048 > .elementor-element-populated,
  .elementor-element.elementor-element-13e70380 > .elementor-element-populated,
  .elementor-element.elementor-element-1cc2e0f9 > .elementor-element-populated { padding: 0 0 16px !important; }

  /* project grids: two per row */
  .elementor-widget-loop-grid { --grid-columns: 2 !important; --grid-column-gap: 14px !important; --grid-row-gap: 22px !important; }
  .elementor-widget-loop-grid .elementor-loop-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .elementor-widget-loop-grid .e-loop-item,
  .elementor-widget-loop-grid .e-loop-item > .e-con-inner,
  .elementor-widget-loop-grid .e-loop-item .elementor-widget-container { padding: 0 !important; }
  .elementor-widget-loop-grid .e-loop-item .elementor-widget { margin: 0 !important; }
  .elementor-widget-loop-grid .elementor-image-box-img { width: 100% !important; margin: 0 0 10px !important; }
  .elementor-widget-loop-grid .elementor-image-box-img img { width: 100% !important; aspect-ratio: 4 / 3; object-fit: cover; }
  .elementor-widget-loop-grid .elementor-image-box-title { font-size: 16px !important; line-height: 1.3 !important; margin: 0 !important; }

  /* single project template */
  .elementor-element.elementor-element-5a3f6c9 { padding: 32px 16px !important; }
  .elementor-element.elementor-element-1450fd1,
  .elementor-element.elementor-element-6eae547 { padding-top: 32px !important; padding-bottom: 32px !important; }

  /* contact details: "Follow Us" and "Email" stacked so the address fits on one line */
  .elementor-element.elementor-element-2979228a,
  .elementor-element.elementor-element-72414364 { width: 100% !important; }
  .elementor-element.elementor-element-2979228a { margin-bottom: 16px; }

  /* less dark space between the contact block and the footer */
  .elementor-element.elementor-element-43eac459 { padding-bottom: 32px !important; }
  .elementor-367 .elementor-element.elementor-element-741f2be7 { padding-top: 32px !important; }

  /* buttons sit side by side when they fit */
  .elementor-element.elementor-element-955cd92 { flex-direction: row !important; flex-wrap: wrap; gap: 12px !important; }
}

/* ---------- Project photo galleries (WordPress gallery markup) ---------- */
.elementor-widget-image-gallery .gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 !important;
}
.elementor-widget-image-gallery .gallery br { display: none; }
.elementor-widget-image-gallery .gallery-item {
  width: auto !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important;
}
.elementor-widget-image-gallery .gallery-item img {
  width: 100% !important; height: 100% !important;
  aspect-ratio: 4 / 3; object-fit: cover; border: 0 !important; display: block;
}
@media (max-width: 767px) {
  .elementor-widget-image-gallery .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* ---------- Header menu on phones & tablets (template 52) ---------- */
@media (max-width: 1024px) {
  .elementor-52 .elementor-element.elementor-element-7c98b01 { position: relative; }
  .elementor-52 .elementor-element.elementor-element-7c98b01 > .elementor-container,
  .elementor-52 .elementor-element.elementor-element-48d237a2,
  .elementor-52 .elementor-element.elementor-element-48d237a2 > .elementor-widget-wrap,
  .elementor-52 .elementor-element.elementor-element-a5007a2,
  .elementor-52 .elementor-element.elementor-element-a5007a2 > .elementor-widget-container { position: static !important; }
  .elementor-52 .elementor-element.elementor-element-48d237a2 > .elementor-widget-wrap { justify-content: flex-end; }
  .elementor-52 .elementor-element.elementor-element-a5007a2 .elementor-menu-toggle { margin-left: auto; }

  /* dropdown opens as a full-width panel over the page instead of stretching the header */
  .elementor-52 .elementor-element.elementor-element-a5007a2 .elementor-nav-menu--dropdown {
    position: absolute !important;
    top: 100% !important; left: 0 !important; right: 0 !important;
    width: 100% !important; margin: 0 !important;
    z-index: 9999;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .18);
  }
  .elementor-52 .elementor-element.elementor-element-a5007a2 .elementor-nav-menu--dropdown a {
    padding: 14px 20px !important;
    font-size: 16px !important;
    white-space: nowrap;
  }
  .elementor-52 .elementor-element.elementor-element-a5007a2 .elementor-nav-menu--dropdown .sub-menu a { padding-left: 36px !important; font-size: 15px !important; }
  /* sub-menu (Our Services) expands in place and pushes the items below down */
  .elementor-52 .elementor-element.elementor-element-a5007a2 .elementor-nav-menu--dropdown .sub-menu {
    position: static !important;
    width: 100% !important; max-width: none !important;
    margin: 0 !important; box-shadow: none !important;
  }
  /* very long menus scroll inside the panel */
  .elementor-52 .elementor-element.elementor-element-a5007a2 .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
  }
}
@media (min-width: 1025px) {
  .mesm-mobile-contact { display: none !important; }
}

/* ---------- Header on phones & tablets: icon on the right, no social icons in the top bar ---------- */
@media (max-width: 1024px) {
  .elementor-52 .elementor-element.elementor-element-799bb9f3 { display: none !important; }   /* top-bar social icons */
  .elementor-52 .elementor-element.elementor-element-3727b69a { padding-top: 8px !important; padding-bottom: 8px !important; }
  .elementor-52 .elementor-element.elementor-element-a5007a2 .elementor-menu-toggle {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  .elementor-52 .elementor-element.elementor-element-48d237a2 > .elementor-widget-wrap { padding-right: 16px !important; }
  .elementor-52 .elementor-element.elementor-element-39d70931 > .elementor-widget-wrap { padding-left: 16px !important; }
}