/* E-Commerce & Retail Industry Page */

html.dark-theme-html .mt-4.rounded-2xl.bg-white.border {
  background-color: #1a1a1a !important;
  border-color: #404040 !important;
}

.modern-btn {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: black;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.modern-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.modern-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.chatbot-widget {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.chatbot-window {
  width: 400px;
  max-width: 95vw;
  border-radius: 22px;
  box-shadow: 0 8px 32px rgba(47, 63, 147, 0.18);
  overflow: hidden;
  display: none;
  flex-direction: column;
  margin-bottom: 12px;
}

@media (min-width: 1400px) {
  .fs-lg-medium {
    font-size: 24px !important;
  }

  .fs-6xl {
    font-size: 60px !important;
    line-height: 120%;
    font-weight: 600;
  }

  .fs-sm-semibold {
    font-size: 18px !important;
  }

  .fs-5xl {
    font-size: 18px !important;
  }
}

@media (min-width: 1120px) and (max-width: 1400px) {
  .fs-lg-medium {
    font-size: 18px !important;
  }

  .fs-6xl {
    font-size: 52px;
    line-height: 120%;
    font-weight: 600;
  }

  .fs-sm-semibold {
    font-size: 18px !important;
  }

  .fs-lg-semibold {
    font-size: 20px !important;
  }

  .fs-5xl {
    font-size: 18px !important;
  }
}

@media (min-width: 769px) and (max-width: 1120px) {
  .fs-6xl {
    font-size: 45px !important;
  }

  .fs-lg-medium {
    font-size: 20px !important;
  }

  .fs-lg-semibold {
    font-size: 20px !important;
  }

  .fs-base-medium {
    font-size: 18px !important;
  }

  .text-5xl {
    font-size: 24px !important;
  }
}

@media (min-width: 426px) and (max-width: 769px) {
  .fs-6xl {
    font-size: 35px !important;
    line-height: 1.4;
  }

  .fs-lg-medium {
    font-size: 20px !important;
  }

  .text-5xl {
    font-size: 24px !important;
  }

  .fs-lg-semibold {
    font-size: 18px !important;
  }

  .fs-base-medium {
    font-size: 18px !important;
  }
}

@media (min-width: 320px) and (max-width: 426px) {
  .fs-lg-medium {
    font-size: 18px !important;
  }

  .text-5xl {
    font-size: 20px !important;
  }

  .fs-6xl {
    font-size: 30px !important;
    line-height: 1.3;
  }

  .fs-lg-semibold {
    font-size: 16px !important;
  }

  .fs-base-medium {
    font-size: 16px !important;
  }
}

/* ============================================================ */
/* Internal <style> block migrated from ind-er HTML page       */
/* ============================================================ */
.section-container {
      position: relative;
      background-color: #f5f5f7 !important;
      z-index: 40;
    }

    .faq-container {
      position: relative;
      background-color: #f5f5f7 !important;
      z-index: 40;
    }

    .footer-container {
      position: relative;
      background-color: #262626 !important;
      z-index: 40;
    }

    .banner-container { position:relative; background-color:#0D0D0D!important; z-index:40; padding:90px 0 100px; overflow:hidden; }

    .slidermain_box swiper-container::part(button-prev) {
      left: -205px !important;
    }

    .slidermain_box swiper-container::part(button-next) {
      right: -205px !important;
    }



    /* ==================== SWIPER SLIDER STYLES ==================== */
    .celebrate_slider {
      position: relative;
    }

    .celebrate_slider .swiper {
      width: 100%;
      padding-top: 20px;
      padding-bottom: 50px;
    }

    .celebrate_slider .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 100%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .celebrate_slider .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Navigation Arrows */
    .celebrate_slider .swiper-button-next,
    .celebrate_slider .swiper-button-prev {
      width: 44px;
      height: 44px;
      margin-top: -22px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
    }

    .celebrate_slider .swiper-button-next:hover,
    .celebrate_slider .swiper-button-prev:hover {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }

    .celebrate_slider .swiper-button-next::after,
    .celebrate_slider .swiper-button-prev::after {
      font-size: 16px;
      font-weight: 600;
      color: #1F2937;
    }

    .celebrate_slider .swiper-button-next {
      right: 10px;
    }

    .celebrate_slider .swiper-button-prev {
      left: 10px;
    }

    /* Pagination Dots */
    .celebrate_slider .swiper-pagination {
      bottom: 10px !important;
      left: 50%;
      transform: translateX(-50%);
      width: auto !important;
      position: absolute;
    }

    .celebrate_slider .swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      background: rgba(255, 255, 255, 0.5);
      margin: 0 4px;
      opacity: 1;
      transition: all 0.3s ease;
    }

    .celebrate_slider .swiper-pagination-bullet-active {
      background: linear-gradient(95.58deg, #2F3F93 3%, #3B54A1 26%, #5684C1 59%, #85DAF9 100%);
      width: 32px;
      border-radius: 6px;
    }

    /* ==================== SERVICE CARD STYLES ==================== */
    .service_card {
      position: relative;
      overflow: hidden;
      border-radius: 16px;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .service_card:hover {
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    }

    .service_card-caption {
      text-align: start;
      transform: translateY(73%);
      position: relative;
      z-index: 10;
      height: 340px;
    }

    .service_card:hover .service_card,
    .service_card:hover .service_card-caption {
      /* transform: translateY(0); */
      background: #1F478F !important;
    }

    .service_card .group-hover\:opacity-100 {
      transition: opacity 0.3s ease;
    }


    .service_card .opacity-0 {
      opacity: 0;
    }

    .service_card .group-hover\:opacity-100:hover,
    .service_card:hover .group-hover\:opacity-100 {
      opacity: 1 !important;
    }




    /* ==================== UTILITY STYLES ==================== */
    .slider_box {
      position: relative;
      width: 100%;
    }

    .celebrate_slider .swiper-wrapper {
      padding-bottom: 20px;
    }

    .celebrate_slider .swiper-scrollbar {
      background: rgba(0, 0, 0, 0.1);
      border-radius: 10px;
    }

    .celebrate_slider .swiper-scrollbar-drag {
      background: linear-gradient(95.58deg, #2F3F93 3%, #3B54A1 26%, #5684C1 59%, #85DAF9 100%);
      border-radius: 10px;
    }

    .scrollbar-hide::-webkit-scrollbar {
      display: none;
    }

    .scrollbar-hide {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .step-card h3 {
      min-height: 65px;
      height: 65px
    }

    /* ==================== RESPONSIVE STYLES ==================== */

    @media (max-width: 768px) {
      .section-container {
        padding-top: 60px;
      }

      .celebrate_slider {
        padding: 0 10px;
      }

      .celebrate_slider .swiper-button-next,
      .celebrate_slider .swiper-button-prev {
        width: 36px;
        height: 36px;
        margin-top: -18px;
      }

      .celebrate_slider .swiper-button-next::after,
      .celebrate_slider .swiper-button-prev::after {
        font-size: 14px;
      }

      .celebrate_slider .swiper-button-next {
        right: 5px;
      }

      .celebrate_slider .swiper-button-prev {
        left: 5px;
      }

      .celebrate_slider .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin: 0 3px;
      }

      .celebrate_slider .swiper-pagination-bullet-active {
        width: 24px;
      }
    }

    @media (max-width: 480px) {
      .celebrate_slider {
        padding: 0 5px;
      }

      .service_card {
        border-radius: 12px;
      }
    }

    @media (min-width: 1120px) and (max-width: 1401px) {
      .service_card-caption {
        transform: translateY(74%);
        height: 353px;
      }

      .step-card h3 {
        min-height: 99px !important;
      }

      .modal-content {
        min-height: 450px !important;
      }

      #tech-heading {
        font-size: 28px !important;
      }

      #tech-grid img {
        width: 50px !important;
      }

      .marketplace-banner {
        height: 440px !important;
      }

      .fs-6xl {
        font-size: 52px !important;
      }

      .fs-lg-medium {
        font-size: 18px !important;
      }

      .fs-lg-semibold {
        font-size: 18px !important
      }

      .fs-base-medium {
        font-size: 18px !important;
      }

      .card-2 {
        height: 200px !important;
      }

      .step-card h3 {
        min-height: 60px !important;
        height: 60px !important;
      }
    }

    @media (min-width:1024px) and (max-width: 1121px) {
      .service_card-caption {
        transform: translateY(76%);
      }

      .step-card h3 {
        min-height: auto;
        height: auto;
      }
    }

    @media (min-width: 1400px) {
      .fs-lg-medium {
        font-size: 22px !important;
      }

      .fs-6xl {
        font-size: 60px;
        line-height: 120%;
        font-weight: 600;
      }

      .fs-sm-semibold {
        font-size: 18px;
      }

      .fs-sm-medium {
        font-size: 20px;
      }
    }

    @media (min-width: 768px) and (max-width: 991px) {
      .step-card h3 {
        font-size: 18px !important;
        line-height: 28px !important;
      }

      .fs-6xl {
        font-size: 45px !important;
      }

      .fs-lg-medium {
        font-size: 20px !important;
      }

      .fs-lg-semibold {
        font-size: 20px !important;
      }

      .fs-base-medium {
        font-size: 18px !important;
      }

      .step-card h3 {
        min-height: auto;
        height: auto;
      }
    }

    @media (max-width: 1024px) {
      .section-container {
        padding-top: 80px;
      }
    }

    @media (min-width: 320px) and (max-width: 426px) {
      .fs-lg-medium {
        font-size: 18px !important;
      }

      .fs-lg-semibold {
        font-size: 18px !important;
      }

      .fs-base-medium {
        font-size: 16px !important;
      }

      .fs-6xl {
        font-size: 28px !important;
      }

      .fs-xl {
        font-size: 18px !important;
      }

      .service_card-caption {
        transform: translateY(76%);
      }

      .step-card h3 {
        font-size: 20px !important;
        line-height: 28px !important;
        min-height: auto;
        height: auto;
      }

    }

    @media (min-width: 426px) and (max-width: 769px) {
      .fs-6xl {
        font-size: 35px !important;
      }

      .fs-lg-medium {
        font-size: 20px !important;
      }

      .fs-lg-semibold {
        font-size: 20px !important;
      }

      .fs-base-medium {
        font-size: 18px !important;
      }
    }
  
    /* === SECTION PALETTE === */
    .section-white { background: #ffffff !important; }
    .section-soft  { background: #f5f5f7 !important; }
    .section-dark  { background: #0D0D0D !important; }
    .section-dark h2,.section-dark h3,.section-dark h4,
    .section-dark .fs-7xl,.section-dark .fs-6xl,.section-dark .fs-5xl { color:#ffffff !important; }
    .section-dark .fs-lg-semibold { color:#ffffff !important; }
    .section-dark .gray-text-1    { color:rgba(255,255,255,0.5) !important; }
    .section-dark .black-text-1   { color:#ffffff !important; }
    .section-dark .step-border    { border-bottom-color:rgba(133,218,249,0.4)!important; }
    .section-dark .step-card.visible .step-border {
      border-image:linear-gradient(90deg,#85DAF9 0%,#2F3F93 100%)!important;
      border-image-slice:1!important;
    }
    .banner-container::before {
      content:'';position:absolute;inset:0;
      background:radial-gradient(ellipse at 50% -10%,rgba(47,63,147,0.45) 0%,transparent 65%);
      pointer-events:none;
    }
    .banner-container::after {
      content:'';position:absolute;inset:0;
      background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
                       linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
      background-size:56px 56px;pointer-events:none;
    }

/* ============================================================ */
/* Inline styles migrated from ind-er HTML page                */
/* ============================================================ */
.ind-er-s001 { font-family:'Urbanist',sans-serif; }
.ind-er-s002 { width:860px;max-width:96vw;padding:26px 26px 18px; }
.ind-er-s003 { background:linear-gradient(135deg,#2F3F93,#85DAF9) }
.ind-er-s004 { background:#2F3F93; }
.ind-er-s005 { color:#a0a0b8; }
.ind-er-s006 { background-image: url('/src/assets/img/marketplace-slider-card.png'); }
.ind-er-s007 { font-size:clamp(26px,3.2vw,46px); }
.ind-er-s008 { background:#f8f8fc;border:1px solid #ebebf5; }
.ind-er-s009 { position:absolute;top:16px;left:24px;font-size:90px;opacity:0.1;font-family:Georgia,serif;line-height:1; }
.ind-er-s010 { color:#1A1A1A;font-size:clamp(15px,1.4vw,18px); }
.ind-er-s011 { background:linear-gradient(135deg,#2F3F93,#85DAF9); }
.ind-er-s012 { color:#1A1A1A; }
.ind-er-s013 { background:#07070d;border:1px solid rgba(133,218,249,0.1); }
.ind-er-s014 { position:absolute;top:16px;left:24px;font-size:90px;opacity:0.08;font-weight:900;color:#85DAF9;line-height:0.9; }
.ind-er-s015 { color:rgba(255,255,255,0.82);font-weight:600;line-height:1.6;margin-bottom:2rem;position:relative;z-index:10;font-size:clamp(15px,1.4vw,18px); }
.ind-er-s016 { background:rgba(133,218,249,0.15);color:#85DAF9;border:1px solid rgba(133,218,249,0.2); }
.ind-er-s017 { font-weight:700;color:#fff;font-size:15px; }
.ind-er-s018 { font-size:13px;color:rgba(255,255,255,0.4); }
.ind-er-s019 { background:linear-gradient(135deg,#f0f4ff,#f8fbff);border:1px solid #d8e0ff; }
.ind-er-s020 { position:absolute;top:16px;left:24px;font-size:90px;opacity:0.08;font-family:Georgia,serif;line-height:1; }
.ind-er-s021 { color:#1A1A1A;font-size:clamp(15px,1.4vw,19px); }
.ind-er-s022 { background:#07070d;position:relative;overflow:hidden;font-family:'Urbanist',sans-serif; }
.ind-er-s023 { position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(47,63,147,0.55) 0%,transparent 65%);pointer-events:none; }
.ind-er-s024 { position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:52px 52px;pointer-events:none; }
.ind-er-s025 { position:relative;z-index:1; }
.ind-er-s026 { display:inline-flex;align-items:center;gap:8px;padding:6px 18px;border-radius:999px;background:rgba(47,63,147,0.25);border:1px solid rgba(133,218,249,0.2);margin-bottom:32px; }
.ind-er-s027 { width:8px;height:8px;border-radius:50%;background:#85DAF9;display:inline-block;animation:pulse 2s infinite; }
.ind-er-s028 { color:#85DAF9;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em; }
.ind-er-s029 { color:white;font-size:clamp(30px,5vw,60px);font-weight:800;line-height:1.1;margin-bottom:20px; }
.ind-er-s030 { background:linear-gradient(135deg,#85DAF9 0%,#6fa8f8 45%,#2F3F93 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.ind-er-s031 { color:rgba(255,255,255,0.5);font-size:18px;max-width:540px;margin:0 auto 40px;line-height:1.7; }
.ind-er-s032 { display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center; }
.ind-er-s033 { background:#85DAF9;color:#07070d;font-weight:700;font-size:16px;padding:16px 36px;border-radius:14px;text-decoration:none; }
.ind-er-s034 { display:inline-flex;align-items:center;gap:10px;color:white;font-weight:600;font-size:16px;padding:16px 36px;border-radius:14px;text-decoration:none;border:1px solid rgba(255,255,255,0.15); }
.ind-er-s035 { color:rgba(255,255,255,0.2);font-size:13px;margin-top:24px; }
.ind-er-s036 { background:#1a1a1a;font-family:'Urbanist',sans-serif; }
.ind-er-s037 { margin-bottom:20px;display:block; }
.ind-er-s038 { color:rgba(255,255,255,0.4);font-size:14px;line-height:1.7;margin-bottom:20px; }
.ind-er-s039 { display:flex;flex-direction:column;gap:8px;color:rgba(255,255,255,0.45);font-size:13px; }
.ind-er-s040 { color:inherit;text-decoration:none; }
.ind-er-s041 { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.3);margin-bottom:20px; }
.ind-er-s042 { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;font-size:14px;color:rgba(255,255,255,0.55); }
.ind-er-s043 { list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:12px;font-size:14px;color:rgba(255,255,255,0.55); }
.ind-er-s044 { border-radius:18px;padding:24px;background:rgba(47,63,147,0.2);border:1px solid rgba(47,63,147,0.3); }
.ind-er-s045 { color:white;font-weight:600;font-size:15px;margin:0 0 16px; }
.ind-er-s046 { display:block;text-align:center;font-weight:700;font-size:14px;border-radius:12px;padding:12px 0;background:#85DAF9;color:#07070d;text-decoration:none;margin-bottom:10px; }
.ind-er-s047 { font-size:11px;text-align:center;color:rgba(255,255,255,0.3);margin:0; }
.ind-er-s048 { display:flex;gap:10px;margin-top:20px; }
.ind-er-s049 { width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center; }
.ind-er-s050 { height:4px;background:linear-gradient(to right,#2F3F93,#85DAF9,#2F3F93); }
.ind-er-s051 { background:#111;padding:20px 16px; }
.ind-er-s052 { display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,0.3);font-size:13px;text-align:center; }
.ind-er-s053 { position: absolute;
    left: 0; }
.ind-er-s054 { padding: 10px 7px; }
.ind-er-s055 { position: absolute;
    right: 0; }
.ind-er-s056 { background-size: cover;
    background-position: center; }


/* Fix: Restore dark text inside light-bg cards within dark sections (Why Choose Walkwel) */
.section-dark .bg-\[\#fafafd\] .fs-lg-semibold,
.section-dark .bg-\[\#fafafd\] h2,
.section-dark .bg-\[\#fafafd\] h3,
.section-dark .bg-\[\#fafafd\] h4 { color: #1A1A1A !important; }
.section-dark .bg-\[\#fafafd\] .fs-base-medium { color: #1A1A1A !important; }

/* Hover states migrated from onmouseover/onmouseout handlers */
.ind-er-s033:hover { background: #64c9f0; }
.ind-er-s034:hover { border-color: rgba(133,218,249,0.5); }
.ind-er-s040:hover { color: white; }
.ind-er-s046:hover { background: #64c9f0; }
.ind-er-s049:hover { background: #2F3F93; }
/* End migrated styles for ind-er */