/* ==========================================================================
   E-COMMERCE DEVELOPMENT STYLESHEET
   Page: ecommerce-developemet.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE TYPOGRAPHY (MATCHING REMAINING PAGES)
   -------------------------------------------------------------------------- */
body.ecommerce-page,
.ecommerce-page button,
.ecommerce-page input,
.ecommerce-page select,
.ecommerce-page textarea {
  font-family: Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   0. SERVICES HEADER FLEX ALIGNMENT
   -------------------------------------------------------------------------- */
.services-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 500px;
}

/* --------------------------------------------------------------------------
   1. HERO SHOWCASE FRAME
   -------------------------------------------------------------------------- */
.ecommerce-hero-showcase {
  margin-top: 50px;
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  display: flex;
  justify-content: center;
}

.ecommerce-showcase-wrapper {
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: #FAFAFA;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Initial state: scaled down, slightly transparent */
  transform: scale(0.82);
  opacity: 0.4;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.7s ease-out,
              box-shadow 0.4s ease;
  will-change: transform, opacity;
}

/* Grown state triggered by scroll */
.ecommerce-showcase-wrapper.is-visible {
  transform: scale(1);
  opacity: 1;
}

.ecommerce-showcase-wrapper.is-visible:hover {
  transform: scale(1.015) translateY(-4px);
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.ecommerce-hero-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 28px;
}

/* --------------------------------------------------------------------------
   2. MORE THAN AN ONLINE STORE (BUYING JOURNEY)
   -------------------------------------------------------------------------- */
.ecommerce-journey-section {
  background-color: #FFFFFF;
  padding: 100px 0;
}

.ecommerce-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}

.ecommerce-card {
  background: #FFFFFF;
  border: 1px solid #EDEDF2;
  border-radius: 24px;
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.ecommerce-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06);
  border-color: #D1E4C5;
}

.ecommerce-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(84, 158, 45, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition: background-color 0.3s ease;
}

.ecommerce-card:hover .ecommerce-card-icon {
  background: rgba(84, 158, 45, 0.15);
}

.ecommerce-card-title {
  font-family: Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: #111827;
  margin-bottom: 14px;
}

.ecommerce-card-desc {
  font-family: Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: #64748B;
  margin: 0;
}

/* --------------------------------------------------------------------------
   3. PLATFORM SELECTION (SHOPIFY, WOOCOMMERCE, CUSTOM)
   -------------------------------------------------------------------------- */
.ecommerce-platforms-section {
  background-color: #FFFFFF;
  padding: 100px 0;
}

.ecommerce-platforms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}

.ecommerce-platform-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 28px;
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.ecommerce-platform-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
  border-color: #85BD56;
}

.platform-card-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}

.platform-logo-badge {
  width: 56px;
  height: 56px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.platform-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.platform-title {
  font-family: Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
}

.platform-desc {
  font-family: Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: #64748B;
  margin-bottom: 28px;
}

.platform-feature-list {
  list-style: none;
  padding: 0;
  margin: auto 0 0 0;
  border-top: 1px solid #F1F5F9;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.platform-feature-list li {
  font-family: Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #334155;
  position: relative;
  padding-left: 24px;
}

.platform-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  background-image: url('../assets/home/parivartan-leaf.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* --------------------------------------------------------------------------
   4. MOBILE COMMERCE COMES FIRST
   -------------------------------------------------------------------------- */
.ecommerce-mobile-section {
  background-color: #FFFFFF;
  padding: 100px 0;
}

.ecommerce-mobile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}

.ecommerce-mobile-grid > :nth-child(4) {
  grid-column: 1 / span 1;
}

.mobile-pillar-card {
  background: #FFFFFF;
  border: 1px solid #EDEDF2;
  border-radius: 22px;
  padding: 36px 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.mobile-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.05);
  border-color: #D1E4C5;
}

.mobile-pillar-num {
  font-family: Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #549E2D;
  line-height: 1;
  margin-bottom: 18px;
}

.mobile-pillar-title {
  font-family: Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 12px;
}

.mobile-pillar-desc {
  font-family: Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: #64748B;
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. PAYMENTS, SHIPPING & BUSINESS INTEGRATIONS
   -------------------------------------------------------------------------- */
.ecommerce-integrations-section {
  background-color: #FFFFFF;
  padding: 100px 0;
}

.ecommerce-integrations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.integration-badge-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 18px;
  padding: 24px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.integration-badge-card:hover {
  transform: translateY(-4px);
  border-color: #549E2D;
  box-shadow: 0 12px 28px rgba(84, 158, 45, 0.08);
}

.integration-badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(84, 158, 45, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.integration-badge-title {
  font-family: Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1E293B;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   6. E-COMMERCE BUILT TO BE FOUND
   -------------------------------------------------------------------------- */
.ecommerce-search-section {
  background-color: #FFFFFF;
  padding: 100px 0;
}

.ecommerce-search-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 56px;
}

.search-pillar-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  padding: 16px 28px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.search-pillar-item:hover {
  transform: translateY(-3px);
  border-color: #549E2D;
  box-shadow: 0 8px 20px rgba(84, 158, 45, 0.1);
}

.search-pillar-dot {
  width: 16px;
  height: 16px;
  background-image: url('../assets/home/parivartan-leaf.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.search-pillar-text {
  font-family: Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7. PERFORMANCE MATTERS IN E-COMMERCE
   -------------------------------------------------------------------------- */
.ecommerce-perf-section {
  background-color: #FFFFFF;
  padding: 100px 0;
}

.ecommerce-perf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}

.perf-focus-card {
  background: #FFFFFF;
  border: 1px solid #EDEDF2;
  border-radius: 22px;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.perf-focus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06);
  border-color: #D1E4C5;
}

.perf-card-top {
  margin-bottom: 18px;
}

.perf-card-badge {
  display: inline-block;
  font-family: Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #549E2D;
  background: rgba(84, 158, 45, 0.1);
  padding: 5px 14px;
  border-radius: 999px;
}

.perf-card-title {
  font-family: Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: #0F172A;
  margin-bottom: 12px;
}

.perf-card-desc {
  font-family: Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: #64748B;
  margin: 0;
}

/* --------------------------------------------------------------------------
   8. PROCESS (10 STEPS CONNECTED TIMELINE)
   -------------------------------------------------------------------------- */
.dev-process-card {
  background: #FFFFFF;
  border: 1px solid #EDEDF2;
  border-radius: 28px;
  padding: 56px 64px;
  margin-top: 56px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.dev-process-steps-list {
  display: flex;
  flex-direction: column;
}

.dev-process-step {
  display: flex;
  gap: 36px;
  position: relative;
}

.dev-step-col-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 44px;
}

.dev-step-digit {
  font-family: Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #549E2D;
  line-height: 1;
  background: #FFFFFF;
  z-index: 2;
  padding-bottom: 4px;
}

.dev-step-dashline {
  flex-grow: 1;
  width: 2px;
  border-left: 2px dashed #CBD5E1;
  margin: 8px 0;
  min-height: 48px;
}

.dev-step-col-info {
  padding-bottom: 40px;
  flex-grow: 1;
}

.dev-process-step:last-child .dev-step-col-info {
  padding-bottom: 0;
}

.dev-step-heading {
  font-family: Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
}

.dev-step-para {
  font-family: Satoshi, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #64748B;
  margin: 0;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE QUERIES
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .ecommerce-integrations-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .ecommerce-cards-grid,
  .ecommerce-platforms-grid,
  .ecommerce-mobile-grid,
  .ecommerce-perf-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ecommerce-mobile-grid > :nth-child(4) {
    grid-column: auto;
  }

  .ecommerce-integrations-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dev-process-card {
    padding: 40px 32px;
  }
}

@media (max-width: 768px) {
  .ecommerce-cards-grid,
  .ecommerce-platforms-grid,
  .ecommerce-mobile-grid,
  .ecommerce-perf-grid,
  .ecommerce-integrations-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .dev-process-card {
    padding: 32px 20px;
  }

  .dev-process-step {
    gap: 20px;
  }

  .ecommerce-search-grid {
    flex-direction: column;
    align-items: stretch;
  }

  .search-pillar-item {
    border-radius: 16px;
    padding: 14px 20px;
  }

  .search-pillar-text {
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   10. WHY CHOOSE US - APPROACH CARDS FLEX LAYOUT
   -------------------------------------------------------------------------- */
body.ecommerce-page .why-approach-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

body.ecommerce-page .why-approach-row {
  display: flex !important;
  flex-direction: row;
  width: 100%;
  gap: 16px;
  justify-content: center;
  align-items: stretch;
  box-sizing: border-box;
}

body.ecommerce-page .why-approach-row-top .uiux-why-card-outer {
  flex: 1 1 0;
  width: calc(25% - 12px);
  max-width: calc(25% - 12px);
  min-width: 0;
  box-sizing: border-box;
}

body.ecommerce-page .why-approach-row-bottom .uiux-why-card-outer {
  flex: 1 1 0;
  width: calc(33.333% - 11px);
  max-width: calc(33.333% - 11px);
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 992px) {
  body.ecommerce-page .why-approach-row {
    flex-wrap: wrap !important;
  }
  body.ecommerce-page .why-approach-row-top .uiux-why-card-outer,
  body.ecommerce-page .why-approach-row-bottom .uiux-why-card-outer {
    flex: 1 1 calc(50% - 10px);
    width: calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}

@media (max-width: 640px) {
  body.ecommerce-page .why-approach-row-top .uiux-why-card-outer,
  body.ecommerce-page .why-approach-row-bottom .uiux-why-card-outer {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   11. ECOMMERCE UNIFORM SECTION SPACING MATCHING INDEX.HTML
   -------------------------------------------------------------------------- */
body.ecommerce-page .uiux-hero-section {
  margin-bottom: 60px !important;
  padding-top: 24px !important;
  padding-bottom: 0 !important;
}

body.ecommerce-page .uiux-section,
body.ecommerce-page .ecommerce-journey-section,
body.ecommerce-page .ecommerce-platforms-section,
body.ecommerce-page .ecommerce-mobile-section,
body.ecommerce-page .ecommerce-integrations-section,
body.ecommerce-page .ecommerce-search-section,
body.ecommerce-page .ecommerce-perf-section,
body.ecommerce-page .uiux-why-choose-section,
body.ecommerce-page .why-approach-section,
body.ecommerce-page .faqs-section,
body.ecommerce-page .cta-section,
body.ecommerce-page #buying-journey,
body.ecommerce-page #platforms,
body.ecommerce-page #mobile-commerce,
body.ecommerce-page #integrations,
body.ecommerce-page #search-visibility,
body.ecommerce-page #performance,
body.ecommerce-page #process,
body.ecommerce-page #why-choose-us,
body.ecommerce-page #faqs {
  margin-top: 0 !important;
  margin-bottom: 60px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.ecommerce-page .uiux-container,
body.ecommerce-page .faqs-container,
body.ecommerce-page .cta-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.ecommerce-page .ecommerce-cards-grid,
body.ecommerce-page .ecommerce-platforms-grid,
body.ecommerce-page .ecommerce-perf-grid {
  gap: 28px !important;
  margin-top: 48px !important;
}

body.ecommerce-page .ecommerce-card,
body.ecommerce-page .ecommerce-platform-card,
body.ecommerce-page .perf-focus-card {
  padding: 26px 26px !important;
}

body.ecommerce-page .ecommerce-card-icon {
  margin-bottom: 12px !important;
}

/* Tablet Uniform Section Spacing (<= 960px) */
@media (max-width: 960px) {
  body.ecommerce-page .uiux-hero-section,
  body.ecommerce-page .uiux-section,
  body.ecommerce-page .ecommerce-journey-section,
  body.ecommerce-page .ecommerce-platforms-section,
  body.ecommerce-page .ecommerce-mobile-section,
  body.ecommerce-page .ecommerce-integrations-section,
  body.ecommerce-page .ecommerce-search-section,
  body.ecommerce-page .ecommerce-perf-section,
  body.ecommerce-page .uiux-why-choose-section,
  body.ecommerce-page .why-approach-section,
  body.ecommerce-page .faqs-section,
  body.ecommerce-page .cta-section,
  body.ecommerce-page #buying-journey,
  body.ecommerce-page #platforms,
  body.ecommerce-page #mobile-commerce,
  body.ecommerce-page #integrations,
  body.ecommerce-page #search-visibility,
  body.ecommerce-page #performance,
  body.ecommerce-page #process,
  body.ecommerce-page #why-choose-us,
  body.ecommerce-page #faqs {
    margin-bottom: 44px !important;
  }
}

/* Mobile Uniform Section Spacing (<= 640px) */
@media (max-width: 640px) {
  body.ecommerce-page .uiux-hero-section,
  body.ecommerce-page .uiux-section,
  body.ecommerce-page .ecommerce-journey-section,
  body.ecommerce-page .ecommerce-platforms-section,
  body.ecommerce-page .ecommerce-mobile-section,
  body.ecommerce-page .ecommerce-integrations-section,
  body.ecommerce-page .ecommerce-search-section,
  body.ecommerce-page .ecommerce-perf-section,
  body.ecommerce-page .uiux-why-choose-section,
  body.ecommerce-page .why-approach-section,
  body.ecommerce-page .faqs-section,
  body.ecommerce-page .cta-section,
  body.ecommerce-page #buying-journey,
  body.ecommerce-page #platforms,
  body.ecommerce-page #mobile-commerce,
  body.ecommerce-page #integrations,
  body.ecommerce-page #search-visibility,
  body.ecommerce-page #performance,
  body.ecommerce-page #process,
  body.ecommerce-page #why-choose-us,
  body.ecommerce-page #faqs {
    margin-bottom: 36px !important;
  }
}

/* --------------------------------------------------------------------------
   12. COMPLETE E-COMMERCE MOBILE RESPONSIVENESS OVERRIDES
   -------------------------------------------------------------------------- */
body.ecommerce-page {
  overflow-x: clip;
}

@media (max-width: 992px) {
  body.ecommerce-page .ecommerce-cards-grid,
  body.ecommerce-page .ecommerce-platforms-grid,
  body.ecommerce-page .ecommerce-mobile-grid,
  body.ecommerce-page .ecommerce-perf-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  body.ecommerce-page .ecommerce-integrations-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  body.ecommerce-page .cta-inner-box {
    flex-direction: column !important;
    padding: 36px 24px !important;
    gap: 32px !important;
  }

  body.ecommerce-page .cta-left-content,
  body.ecommerce-page .cta-right-content {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  body.ecommerce-page .services-main-heading {
    font-size: clamp(24px, 5.5vw, 32px) !important;
    line-height: 1.3 !important;
  }

  body.ecommerce-page .services-header-desc,
  body.ecommerce-page .services-header-subhead {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 640px) {
  /* Hide static break tags on mobile for natural text flow */
  body.ecommerce-page .services-main-heading br,
  body.ecommerce-page .cta-main-heading br,
  body.ecommerce-page .uiux-why-card-title br,
  body.ecommerce-page .platform-title br {
    display: none;
  }

  /* Hero Showcase */
  body.ecommerce-page .ecommerce-hero-showcase {
    margin-top: 20px !important;
  }

  body.ecommerce-page .ecommerce-showcase-wrapper {
    border-radius: 18px !important;
  }

  body.ecommerce-page .ecommerce-hero-img {
    border-radius: 18px !important;
  }

  /* Single Column Grids */
  body.ecommerce-page .ecommerce-cards-grid,
  body.ecommerce-page .ecommerce-platforms-grid,
  body.ecommerce-page .ecommerce-mobile-grid,
  body.ecommerce-page .ecommerce-perf-grid,
  body.ecommerce-page .ecommerce-integrations-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 28px !important;
  }

  /* Card Padding Adjustments */
  body.ecommerce-page .ecommerce-card,
  body.ecommerce-page .ecommerce-platform-card,
  body.ecommerce-page .mobile-pillar-card,
  body.ecommerce-page .perf-focus-card,
  body.ecommerce-page .integration-badge-card {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }

  body.ecommerce-page .platform-card-header {
    gap: 14px;
    margin-bottom: 16px;
  }

  body.ecommerce-page .platform-logo-badge {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }

  body.ecommerce-page .platform-title {
    font-size: 20px;
  }

  body.ecommerce-page .platform-desc {
    margin-bottom: 20px;
    font-size: 14px;
  }

  /* Search Pillars */
  body.ecommerce-page .ecommerce-search-grid {
    flex-direction: column;
    align-items: stretch;
    gap: 12px !important;
    margin-top: 28px !important;
  }

  body.ecommerce-page .search-pillar-item {
    width: 100%;
    box-sizing: border-box;
    border-radius: 16px;
    padding: 14px 18px;
    justify-content: flex-start;
  }

  body.ecommerce-page .search-pillar-text {
    white-space: normal;
    word-break: break-word;
    font-size: 14px;
  }

  /* Connected 10-Step Timeline Process */
  body.ecommerce-page .dev-process-card {
    padding: 24px 18px !important;
    border-radius: 20px !important;
    margin-top: 28px !important;
  }

  body.ecommerce-page .dev-process-step {
    gap: 16px !important;
  }

  body.ecommerce-page .dev-step-col-num {
    width: 32px !important;
  }

  body.ecommerce-page .dev-step-digit {
    font-size: 20px !important;
  }

  body.ecommerce-page .dev-step-col-info {
    padding-bottom: 24px !important;
  }

  body.ecommerce-page .dev-step-heading {
    font-size: 18px !important;
    margin-bottom: 6px;
  }

  body.ecommerce-page .dev-step-para {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* Why Choose Us Cards */
  body.ecommerce-page .why-approach-cards-wrap {
    gap: 14px !important;
  }

  body.ecommerce-page .uiux-why-card-outer {
    border-radius: 20px !important;
    padding: 8px !important;
  }

  body.ecommerce-page .uiux-why-card-inner {
    padding: 22px 18px !important;
    border-radius: 16px !important;
    min-height: unset !important;
  }

  body.ecommerce-page .uiux-why-card-title {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  /* FAQs Section Mobile Optimization */
  body.ecommerce-page .faqs-outer-card {
    padding: 10px !important;
    border-radius: 16px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.ecommerce-page .faqs-single-column,
  body.ecommerce-page .faqs-inner-grid,
  body.ecommerce-page .faqs-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  body.ecommerce-page .faq-item-card {
    padding: 14px 16px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.ecommerce-page .faq-question-row {
    padding: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
  }

  body.ecommerce-page .faq-question-text {
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    color: #060612 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    text-align: left !important;
    word-break: break-word !important;
  }

  body.ecommerce-page .faq-toggle-btn {
    flex-shrink: 0 !important;
    width: 26px !important;
    height: 26px !important;
    margin-top: 2px !important;
  }

  body.ecommerce-page .faq-toggle-btn svg {
    width: 24px !important;
    height: 24px !important;
  }

  body.ecommerce-page .faq-answer-row {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid #F0F2F5 !important;
    width: 100% !important;
  }

  body.ecommerce-page .faq-answer-text {
    max-width: 100% !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #69686E !important;
    width: 100% !important;
  }

  /* CTA Banner & Button Responsiveness */
  body.ecommerce-page .available-book-call-btn,
  body.ecommerce-page .start-project-btn {
    padding: 12px 16px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }

  body.ecommerce-page .available-book-call-btn span,
  body.ecommerce-page .start-project-btn span {
    white-space: nowrap !important;
    font-size: 13.5px !important;
    line-height: 1.3 !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }

  body.ecommerce-page .cta-inner-box {
    padding: 28px 18px !important;
    border-radius: 20px !important;
  }

  body.ecommerce-page .cta-main-heading {
    font-size: clamp(22px, 5.5vw, 28px) !important;
    line-height: 1.3 !important;
  }

  body.ecommerce-page .cta-description {
    font-size: 14px !important;
  }

  body.ecommerce-page .cta-actions-group {
    flex-direction: column;
    width: 100%;
  }

  body.ecommerce-page .cta-actions-group a {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  body.ecommerce-page .uiux-container,
  body.ecommerce-page .faqs-container,
  body.ecommerce-page .cta-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.ecommerce-page .available-book-call-btn span,
  body.ecommerce-page .start-project-btn span {
    font-size: 12.5px !important;
  }
}