.elementor-21 .elementor-element.elementor-element-6451a63 > .elementor-background-overlay{background-color:#000000;opacity:0.71;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-21 .elementor-element.elementor-element-6451a63{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-21 .elementor-element.elementor-element-91b60b0:not(.elementor-motion-effects-element-type-background), .elementor-21 .elementor-element.elementor-element-91b60b0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-21 .elementor-element.elementor-element-91b60b0 > .elementor-background-overlay{background-color:#00000000;opacity:0.71;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-21 .elementor-element.elementor-element-91b60b0{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-21 .elementor-element.elementor-element-d7db12a:not(.elementor-motion-effects-element-type-background), .elementor-21 .elementor-element.elementor-element-d7db12a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F1F0F0;}.elementor-21 .elementor-element.elementor-element-d7db12a > .elementor-background-overlay{background-color:#00000000;opacity:0.71;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-21 .elementor-element.elementor-element-d7db12a{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-21 .elementor-element.elementor-element-c45871b .elementor-button{background-color:#004990;fill:#FFFFFF;color:#FFFFFF;}.elementor-21 .elementor-element.elementor-element-375496b{padding:100px 0px 100px 0px;}body.elementor-page-21 .container{max-width:1200px;}body.elementor-page-21 .elementor-section.elementor-section-boxed>.elementor-container{max-width:1200px;}/* Start custom CSS for section, class: .elementor-element-91b60b0 *//* ============================================================
   AL AWAN PHARMACY - PERFECT CIRCLE CATEGORY CARDS (MAXIMUM IMPORTANCE)
   Copy & paste into WordPress > Appearance > Customize > Additional CSS.
   Fixes vertical stretching into ovals and ensures 100% perfect round circles!
   ============================================================ */

html body .elementor-widget-medibazar-product-categories {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 24px 16px !important;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  box-sizing: border-box !important;
}

/* 1. Add "Shop by Category" Section Title Automatically */
html body .elementor-widget-medibazar-product-categories .elementor-widget-container::before {
  content: "Shop by Category" !important;
  display: block !important;
  text-align: center !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #003764 !important;
  margin-bottom: 32px !important;
  letter-spacing: -0.5px !important;
}

/* 2. 4 Column Grid Layout (Desktop) */
html body .elementor-widget-medibazar-product-categories .product-categories {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  justify-items: center !important;
  align-items: center !important;
}

/* Reset Theme Bootstrap Column Constraints & Prevent Stretch */
html body .elementor-widget-medibazar-product-categories .product-categories > [class*="col-"],
html body .elementor-widget-medibazar-product-categories .product-categories > li {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 3. GUARANTEED PERFECT CIRCLE CARD UI (STRICT 1:1 DIMENSIONS & FLEX NO-STRETCH) */
html body .elementor-widget-medibazar-product-categories .item {
  width: 145px !important;
  height: 145px !important;
  min-width: 145px !important;
  max-width: 145px !important;
  min-height: 145px !important;
  max-height: 145px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  background-color: #ffffff !important;
  padding: 14px 10px !important;
  text-align: center !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1.5px solid #e2e8f0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 20px rgba(0, 45, 90, 0.05) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  position: relative !important;
}

html body .elementor-widget-medibazar-product-categories .item:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 30px rgba(0, 55, 100, 0.14) !important;
  border-color: #004880 !important;
  background-color: #ffffff !important;
}

/* 4. Vertical Alignment inside Circle */
html body .elementor-widget-medibazar-product-categories .item .row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
}

html body .elementor-widget-medibazar-product-categories .item [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

/* 5. Icon Container & Deep Royal Blue Tint Filter */
html body .elementor-widget-medibazar-product-categories .logo-img {
  margin-bottom: 6px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

html body .elementor-widget-medibazar-product-categories .logo-img a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .elementor-widget-medibazar-product-categories .logo-img img {
  width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  transition: transform 0.3s ease !important;
  filter: brightness(0) saturate(100%) invert(18%) sepia(85%) saturate(2250%) hue-rotate(195deg) brightness(92%) contrast(104%) !important;
}

html body .elementor-widget-medibazar-product-categories .item:hover .logo-img img {
  transform: scale(1.12) !important;
}

/* 6. Title Text Styling (Auto-clamped, prevents height expansion) */
html body .elementor-widget-medibazar-product-categories h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  max-width: 100% !important;
  word-break: break-word !important;
}

html body .elementor-widget-medibazar-product-categories h3 a {
  color: #1e293b !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  transition: color 0.2s ease !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .elementor-widget-medibazar-product-categories h3 a:hover {
  color: #004880 !important;
}

html body .elementor-widget-medibazar-product-categories p {
  display: none !important;
}

/* 7. MOBILE VIEW: PERFECT COMPACT CIRCLES (FIXED 4 CARDS IN 1 ROW) */
@media (max-width: 768px) {
  html body .elementor-widget-medibazar-product-categories {
    padding: 12px 6px !important;
  }

  html body .elementor-widget-medibazar-product-categories .elementor-widget-container::before {
    font-size: 20px !important;
    margin-bottom: 16px !important;
  }

  html body .elementor-widget-medibazar-product-categories .product-categories {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    justify-items: center !important;
  }

  /* Fixed Equal Circle Width & Height for Mobile */
  html body .elementor-widget-medibazar-product-categories .item {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    padding: 6px 4px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04) !important;
  }

  html body .elementor-widget-medibazar-product-categories .logo-img {
    margin-bottom: 2px !important;
  }

  html body .elementor-widget-medibazar-product-categories .logo-img img {
    width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    max-height: 20px !important;
  }

  html body .elementor-widget-medibazar-product-categories h3 {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  html body .elementor-widget-medibazar-product-categories h3 a {
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.3px !important;
    color: #1e293b !important;
    -webkit-line-clamp: 2 !important;
  }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-d7db12a *//* ============================================================
   AL AWAN PHARMACY - SHOP BY CATEGORY (EXACT MATCH CSS)
   ============================================================ */

.elementor-widget-medibazar-product-categories {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 20px 16px !important;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
}

/* 1. Add "Shop by Category" Section Title Automatically */
.elementor-widget-medibazar-product-categories .elementor-widget-container::before {
  content: "Shop by Category" !important;
  display: block !important;
  text-align: center !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  color: #003764 !important;
  margin-bottom: 36px !important;
  letter-spacing: -0.5px !important;
}

/* 2. 4 Column Grid Layout */
.elementor-widget-medibazar-product-categories .product-categories {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Reset Theme Bootstrap Column Constraints */
.elementor-widget-medibazar-product-categories .product-categories > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* 3. Card Box UI (Soft Off-White Box + Smooth Rounded Corners) */
.elementor-widget-medibazar-product-categories .item {
  background-color: #f7f9fa !important;
  border-radius: 16px !important;
  min-height: 180px !important;
  padding: 32px 16px 28px 16px !important;
  text-align: center !important;
  transition: all 0.25s cubic-bezier(0.2, 0, 0, 1) !important;
  border: 1px solid rgba(230, 235, 240, 0.8) !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0, 55, 100, 0.02) !important;
  cursor: pointer !important;
}

.elementor-widget-medibazar-product-categories .item:hover {
  background-color: #ffffff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px rgba(0, 55, 100, 0.08) !important;
  border-color: #e2e8f0 !important;
}

/* 4. Vertical Center Alignment (Icon Top, Text Bottom) */
.elementor-widget-medibazar-product-categories .item .row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  width: 100% !important;
}

.elementor-widget-medibazar-product-categories .item [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  float: none !important;
}

/* 5. Icon Container & Deep Blue Tint Filter */
.elementor-widget-medibazar-product-categories .logo-img {
  margin-bottom: 16px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 54px !important;
}

.elementor-widget-medibazar-product-categories .logo-img a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.elementor-widget-medibazar-product-categories .logo-img img {
  width: auto !important;
  max-width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  transition: transform 0.3s ease !important;
  /* Turns image icons into the exact deep navy blue (#003764) matching your image */
  filter: brightness(0) saturate(100%) invert(14%) sepia(91%) saturate(2852%) hue-rotate(192deg) brightness(96%) contrast(105%) !important;
}

.elementor-widget-medibazar-product-categories .item:hover .logo-img img {
  transform: scale(1.1) !important;
}

/* 6. Title Text Styling */
.elementor-widget-medibazar-product-categories h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.elementor-widget-medibazar-product-categories h3 a {
  color: #003764 !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  text-transform: capitalize !important;
  transition: color 0.2s ease !important;
  display: inline-block !important;
}

.elementor-widget-medibazar-product-categories h3 a:hover {
  color: #004880 !important;
}

.elementor-widget-medibazar-product-categories p {
  display: none !important;
}

/* 7. Mobile & Tablet Responsive Layout (2 Columns on Mobile) */
@media (max-width: 991px) {
  .elementor-widget-medibazar-product-categories .product-categories {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .elementor-widget-medibazar-product-categories .item {
    min-height: 160px !important;
    padding: 24px 16px !important;
  }
}

@media (max-width: 576px) {
  .elementor-widget-medibazar-product-categories .elementor-widget-container::before {
    font-size: 24px !important;
    margin-bottom: 24px !important;
  }
  .elementor-widget-medibazar-product-categories .product-categories {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .elementor-widget-medibazar-product-categories .item {
    min-height: 140px !important;
    padding: 20px 12px !important;
    border-radius: 14px !important;
  }
  .elementor-widget-medibazar-product-categories .logo-img {
    height: 42px !important;
    margin-bottom: 10px !important;
  }
  .elementor-widget-medibazar-product-categories .logo-img img {
    max-width: 38px !important;
    height: 38px !important;
  }
  .elementor-widget-medibazar-product-categories h3 a {
    font-size: 14.5px !important;
  }
}/* End custom CSS */
/* Start custom CSS for medibazar-product-tab, class: .elementor-element-3e6813f *//* ========================================================
   1. DESKTOP: Compact & Sleek (fits more pills on one line)
   ======================================================== */
.elementor-21 .elementor-element.elementor-element-3e6813f .row:has(.section-title) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.elementor-21 .elementor-element.elementor-element-3e6813f .row:has(.section-title) > div {
  width: auto !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}

.elementor-21 .elementor-element.elementor-element-3e6813f .section-title.mb-25,
.elementor-21 .elementor-element.elementor-element-3e6813f .product-tab.mb-25 {
  margin-bottom: 0 !important;
}

.elementor-21 .elementor-element.elementor-element-3e6813f .section-title h2 {
  margin: 0 !important;
  font-size: 20px !important; /* Slightly smaller title for more tab space */
  font-weight: 700;
  color: #24292e;
  line-height: 1.2;
  white-space: nowrap;
}

.elementor-21 .elementor-element.elementor-element-3e6813f .section-title p {
  display: none !important;
}

/* Tabs Container */
.elementor-21 .elementor-element.elementor-element-3e6813f .product-nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px 8px !important; /* Tight spacing between buttons */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  list-style: none !important;
}

/* Hide Shield Icons */
.elementor-21 .elementor-element.elementor-element-3e6813f .product-nav .nav-link i {
  display: none !important;
}

/* Compact Pill Buttons (Desktop/Tablet) */
.elementor-21 .elementor-element.elementor-element-3e6813f .product-nav .nav-item {
  margin: 0 !important;
  display: inline-flex !important;
}

.elementor-21 .elementor-element.elementor-element-3e6813f .product-nav .nav-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important; /* Reduced height from 38px */
  padding: 0 13px !important; /* Reduced padding from 18px */
  font-size: 13px !important; /* Reduced font size from 14px */
  font-weight: 500 !important;
  line-height: 1 !important;
  color: #4b5563 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 50px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

/* Active & Hover */
.elementor-21 .elementor-element.elementor-element-3e6813f .product-nav .nav-link:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #004b93 !important;
}

.elementor-21 .elementor-element.elementor-element-3e6813f .product-nav .nav-link.active {
  color: #ffffff !important;
  background-color: #004b93 !important;
  border-color: #004b93 !important;
}

/* ========================================================
   2. MOBILE VIEW: Extra Compact to Fit Maximum in 1st Row
   ======================================================== */
@media (max-width: 768px) {
  /* Stack title above tabs so tabs have 100% full screen width */
  .elementor-21 .elementor-element.elementor-element-3e6813f .row:has(.section-title) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .elementor-21 .elementor-element.elementor-element-3e6813f .row:has(.section-title) > div {
    width: 100% !important;
  }

  .elementor-21 .elementor-element.elementor-element-3e6813f .section-title h2 {
    font-size: 17px !important;
  }

  /* Fill width & reduce gap to squeeze maximum tabs */
  .elementor-21 .elementor-element.elementor-element-3e6813f .product-nav {
    justify-content: flex-start !important;
    gap: 5px 6px !important; /* Minimal 5px vertical & 6px horizontal gap */
    width: 100% !important;
  }

  /* Extra compact mobile pill buttons */
  .elementor-21 .elementor-element.elementor-element-3e6813f .product-nav .nav-link {
    height: 28px !important;       /* Compact 28px height */
    padding: 0 9px !important;     /* Slim 9px horizontal padding */
    font-size: 11.5px !important;   /* Crisp 11.5px font size */
    letter-spacing: -0.2px !important;
  }
}/* End custom CSS */