/* Add custom CSS styles below */ 
#about-us,
.about-us {
  position: relative !important;
  overflow: hidden !important;
  min-height: 500px !important;
}

#about-us > *:not(.about-us-bg-video),
.about-us > *:not(.about-us-bg-video) {
  position: relative;
  z-index: 2;
}

.about-us-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 0;
  pointer-events: none;
}

#about-us::before,
.about-us::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
  pointer-events: none;
}

/* الجوال: نفس طريقة عرض اللابتوب */
@media (max-width: 767px) {
  #about-us,
  .about-us {
    min-height: 260px !important;
    height: 260px !important;
  }

  .about-us-bg-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/*3 categories */

@media (max-width: 767px) {
  #main-cat .row,
  .main-cat .row,
  #main-cat .grid,
  .main-cat .grid,
  #main-cat [class*="grid"],
  .main-cat [class*="grid"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  #main-cat .row > *,
  .main-cat .row > *,
  #main-cat .grid > *,
  .main-cat .grid > *,
  #main-cat [class*="grid"] > *,
  .main-cat [class*="grid"] > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: unset !important;
  }

  #main-cat img,
  .main-cat img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  #main-cat,
  .main-cat {
    overflow: visible !important;
  }
}