html,
body,
#__next {
  background: #0b1220 !important;
}

body {
  color: #f8fafc !important;
}

/* Main container */
#page_container {
  max-width: 1220px !important;
  margin: 0 auto !important;
  background: transparent !important;
}

/* Section title */
.services-group h2,
.services-group .text-theme-800 {
  color: #f8fafc !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  margin-bottom: 24px !important;
}

/* 2 large app tiles */
.services-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 30px !important;
}

/* Shared card styling */
.service-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 270px !important;
  padding: 36px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease !important;
}

/* Water Tanker card */
.service-card:nth-child(1) {
  background: linear-gradient(135deg, #60a5fa, #6366f1) !important;
  box-shadow: 0 18px 45px rgba(96,165,250,0.22) !important;
}

/* Daily Groceries card */
.service-card:nth-child(2) {
  background: linear-gradient(135deg, #34d399, #14b8a6) !important;
  box-shadow: 0 18px 45px rgba(52,211,153,0.20) !important;
}

/* Hover */
.service-card:hover {
  transform: translateY(-8px) scale(1.015) !important;
}

.service-card:nth-child(1):hover {
  box-shadow: 0 24px 55px rgba(96,165,250,0.34) !important;
}

.service-card:nth-child(2):hover {
  box-shadow: 0 24px 55px rgba(52,211,153,0.32) !important;
}

/* Giant decorative icons inside cards */
.service-card:nth-child(1)::after {
  content: "💧";
  position: absolute;
  right: 24px;
  bottom: 8px;
  font-size: 120px;
  line-height: 1;
  opacity: 0.13;
  pointer-events: none;
}

.service-card:nth-child(2)::after {
  content: "🛒";
  position: absolute;
  right: 24px;
  bottom: 8px;
  font-size: 110px;
  line-height: 1;
  opacity: 0.13;
  pointer-events: none;
}

/* Bigger real icons at top-left */
.service-card img,
.service-card svg {
  width: 78px !important;
  height: 78px !important;
  margin-right: 24px !important;
  filter: brightness(0) invert(1) !important;
}

/* Let content use the card well */
.service-card > div {
  align-items: flex-start !important;
}

/* Bigger title */
.service-card .service-name {
  color: #ffffff !important;
  font-size: 38px !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  max-width: 80% !important;
  margin-bottom: 10px !important;
}

/* Bigger subtitle */
.service-card .service-description {
  color: rgba(255,255,255,0.92) !important;
  font-size: 21px !important;
  line-height: 1.45 !important;
  max-width: 78% !important;
}

/* Remove light theme remnants */
.bg-theme-50,
.bg-theme-100,
.bg-theme-200,
.dark\:bg-theme-800,
.dark\:bg-theme-900 {
  background: transparent !important;
}

/* Mobile layout */
@media (max-width: 768px) {
  .services-list {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .service-card {
    min-height: 200px !important;
    padding: 26px !important;
    border-radius: 24px !important;
  }

  .service-card img,
  .service-card svg {
    width: 60px !important;
    height: 60px !important;
  }

  .service-card .service-name {
    font-size: 30px !important;
    max-width: 75% !important;
  }

  .service-card .service-description {
    font-size: 17px !important;
    max-width: 75% !important;
  }

  .service-card:nth-child(1)::after,
  .service-card:nth-child(2)::after {
    font-size: 82px;
    right: 18px;
    bottom: 10px;
  }
}

/* ===== FINAL APP-SPECIFIC CARD STYLING ===== */

/* Water Tanker */
a.service-card[href*="/water"] {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
}

/* Daily Groceries */
a.service-card[href*="/groceries"] {
  background: linear-gradient(135deg, #10b981 0%, #0d9488 100%) !important;
}

/* Remove previous pseudo artwork */
.service-card::after {
  content: none !important;
}

/* WATER TANKER large artwork */
a.service-card[href*="/water"]::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  width: 170px !important;
  height: 170px !important;
  right: 28px !important;
  bottom: 18px !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M50 5C42 20 20 43 20 64a30 30 0 0 0 60 0C80 43 58 20 50 5z'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' d='M35 65c2 10 9 15 18 16'/%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  opacity: 0.18 !important;
  pointer-events: none !important;
}

/* GROCERIES large artwork */
a.service-card[href*="/groceries"]::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  width: 180px !important;
  height: 180px !important;
  right: 25px !important;
  bottom: 12px !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='white' stroke-width='7' stroke-linecap='round' stroke-linejoin='round' d='M10 17h12l8 44h43l12-31H27'/%3E%3Ccircle fill='white' cx='40' cy='78' r='7'/%3E%3Ccircle fill='white' cx='72' cy='78' r='7'/%3E%3Cpath fill='none' stroke='white' stroke-width='5' d='M39 28v29M55 28v29M70 28l-5 29'/%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  opacity: 0.19 !important;
  pointer-events: none !important;
}

/* Make existing small icons larger and white */
a.service-card[href*="/water"] img,
a.service-card[href*="/water"] svg,
a.service-card[href*="/groceries"] img,
a.service-card[href*="/groceries"] svg {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  color: white !important;
  filter: brightness(0) invert(1) !important;
}

/* Give text more presence */
.service-card .service-name {
  font-size: 38px !important;
  font-weight: 850 !important;
  color: white !important;
  line-height: 1.05 !important;
}

.service-card .service-description {
  font-size: 22px !important;
  line-height: 1.4 !important;
  color: rgba(255,255,255,0.92) !important;
  max-width: 65% !important;
}

/* Keep text above artwork */
.service-card > * {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 768px) {
  a.service-card[href*="/water"]::after,
  a.service-card[href*="/groceries"]::after {
    width: 105px !important;
    height: 105px !important;
    right: 15px !important;
    bottom: 12px !important;
  }

  .service-card .service-name {
    font-size: 29px !important;
  }

  .service-card .service-description {
    font-size: 17px !important;
    max-width: 68% !important;
  }
}

/* ===== CORRECT CARD TARGETING ===== */

/* Water Tanker */
.service-card:has(a[href*="/water"]),
div:has(> a[href*="/water"].service-card) {
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
}

/* Daily Groceries */
.service-card:has(a[href*="/groceries"]),
div:has(> a[href*="/groceries"].service-card) {
  background: linear-gradient(135deg, #059669, #14b8a6) !important;
}

/* Large Water artwork */
.service-card:has(a[href*="/water"])::after {
  content: "💧" !important;
  position: absolute !important;
  right: 45px !important;
  bottom: 25px !important;
  font-size: 135px !important;
  opacity: 0.20 !important;
  display: block !important;
}

/* Large Groceries artwork */
.service-card:has(a[href*="/groceries"])::after {
  content: "🛒" !important;
  position: absolute !important;
  right: 45px !important;
  bottom: 25px !important;
  font-size: 125px !important;
  opacity: 0.20 !important;
  display: block !important;
}

/* Make the cards able to hold decorative artwork */
.service-card {
  position: relative !important;
  overflow: hidden !important;
}

/* Bigger icon + text */
.service-card .service-name {
  font-size: 40px !important;
  font-weight: 850 !important;
}

.service-card .service-description {
  font-size: 22px !important;
  line-height: 1.45 !important;
  max-width: 65% !important;
}

/* Make the large decorative icons clearly visible */
.service-card:has(a[href*="/water"])::after {
  opacity: 0.42 !important;
  font-size: 150px !important;
  right: 40px !important;
  bottom: 18px !important;
}

.service-card:has(a[href*="/groceries"])::after {
  opacity: 0.42 !important;
  font-size: 145px !important;
  right: 38px !important;
  bottom: 16px !important;
}

/* Make the normal title icons larger and white */
.service-card img,
.service-card svg {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  margin-right: 24px !important;
  color: white !important;
  fill: white !important;
  filter: brightness(0) invert(1) !important;
}

/* Keep text clear of the big artwork */
.service-card .service-name,
.service-card .service-description {
  max-width: 60% !important;
}