/* MS Visual Library V40.1.2 - service image display fix */
/* تكبير صور خدمات MS Visual داخل الصفحة الرئيسية وصفحات الخدمات بدون تغيير التصميم العام */

/* Service cards on homepage and listing sections */
.services-grid .service-card .service-img,
.service-card .service-img,
.services-grid .service-card picture,
.service-card picture {
  min-height: 185px !important;
  height: 185px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 10px 4px !important;
  overflow: visible !important;
}

.services-grid .service-card .service-img img,
.service-card .service-img img,
a.service-card img[src*="service-"],
.msm-service-card img[src*="service-"] {
  width: 100% !important;
  max-width: 245px !important;
  height: 165px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  margin: 0 auto 10px !important;
  transition: transform .25s ease;
}

.service-card:hover .service-img img,
a.service-card:hover img[src*="service-"] {
  transform: scale(1.04);
}

/* Main service page visual image */
.main-service-visual,
.service-hero img[src*="service-"],
.content img[src*="service-"],
section img[src*="/assets/images/service-"]:not(.brand img) {
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep logo and small header images safe */
.site-header .brand img,
.brand img,
.logo img,
img[src*="logo"],
img[src$="we.png"] {
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 768px) {
  .services-grid .service-card .service-img,
  .service-card .service-img {
    min-height: 160px !important;
    height: 160px !important;
  }

  .services-grid .service-card .service-img img,
  .service-card .service-img img,
  a.service-card img[src*="service-"] {
    max-width: 220px !important;
    height: 145px !important;
  }

  .content img[src*="service-"],
  section img[src*="/assets/images/service-"]:not(.brand img) {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
  }
}

/* === V40.2.1 RELATED SERVICES HOTFIX ===
   Fix related service cards overlap inside service content pages.
   Keeps images contained and prevents text/cards from covering each other. */
.content-box .related-services,
section .related-services,
.related-services{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:16px !important;
  align-items:stretch !important;
  overflow:visible !important;
  width:100% !important;
  max-width:100% !important;
  margin:22px 0 32px !important;
}

.content-box .related-card,
section .related-card,
.related-card{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-align:center !important;
  padding:14px !important;
  box-sizing:border-box !important;
}

.content-box .related-card img,
section .related-card img,
.related-card img{
  width:100% !important;
  max-width:170px !important;
  height:118px !important;
  object-fit:contain !important;
  object-position:center !important;
  flex:0 0 auto !important;
  display:block !important;
  margin:0 auto !important;
}

.related-card h4,
.related-card p{
  width:100% !important;
  max-width:100% !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.related-card h4{font-size:16px !important;line-height:1.45 !important;}
.related-card p{font-size:13px !important;line-height:1.7 !important;}

@media(max-width:900px){
  .content-box .related-services,
  section .related-services,
  .related-services{grid-template-columns:1fr !important;}
  .content-box .related-card img,
  section .related-card img,
  .related-card img{max-width:190px !important;height:125px !important;}
}