/* ================================================
       PAYKIT CUSTOM THEME — TEAL BRAND
       ================================================ */

:root {
  --pk-primary: #0baece;
  --pk-primary-hover: #0997b0;
  --pk-accent: #5de8f5;
  --pk-dark: #0b1f2d;
  --pk-darker: #071520;
  --pk-light: #eef9fb;

  --bs-primary: #0baece;
  --bs-primary-rgb: 11, 174, 206;
  --bs-primary-bg-subtle: rgba(11, 174, 206, 0.12);
  --bs-primary-border-subtle: rgba(11, 174, 206, 0.35);
  --bs-primary-text-emphasis: #0997b0;
  --bs-link-color: #0baece;
  --bs-link-hover-color: #0997b0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  color: #374151;
  background-color: #ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  color: #111827;
}
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6 {
  color: #ffffff;
}

/* ── Buttons ── */
.btn-primary {
  background-color: var(--pk-primary);
  border-color: var(--pk-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--pk-primary-hover) !important;
  border-color: var(--pk-primary-hover) !important;
  color: #fff !important;
}

/* ── Utilities ── */
.text-primary {
  color: var(--pk-primary) !important;
}
.text-accent {
  color: var(--pk-accent) !important;
}
ss .bg-primary {
  background-color: var(--pk-primary) !important;
}
.bg-dark {
  background-color: var(--pk-dark) !important;
}
.bg-darker {
  background-color: var(--pk-darker) !important;
}
.bg-light {
  background-color: var(--pk-light) !important;
}
.border-primary {
  border-color: var(--pk-primary) !important;
}
/* Remove Bootstrap's default dropdown arrow */
.dropdown-toggle::after {
  display: none !important;
  content: none !important;
}
/* ── Spacing ── */
.section-padding {
  padding: 6rem 0;
}
.section-padding-sm {
  padding: 4rem 0;
}

/* ── Card hover ── */
.card-hover {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(11, 174, 206, 0.1);
}

/* ── Hero ── */
/*.hero-bg {
  background: linear-gradient(180deg, var(--pk-darker) 0%, var(--pk-dark) 100%);
  background-image: url("./Assets/images/Bulk-pay.webp");
  position: relative;
  overflow: hidden;
}*/
.hero-bg {
  --primary-blue: #0062ff;
  --text-dark: #111111;
  --text-light: #ffffff;

  position: relative;
  height: 100vh;
  min-height: 600px;
  width: 100%;
  /* Left-to-right black gradient */
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.4) 55%,
      rgba(0, 0, 0, 0.1) 100%
    ),
    url("../img/features/Bulk-pay.webp") center/cover no-repeat;
  display: flex;
  flex-direction: column;

  overflow: hidden;
}
.hero-bg::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11, 174, 206, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 174, 206, 0.06) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}

.hero-badge {
  background-color: rgba(11, 174, 206, 0.18) !important;
  color: #5de8f5 !important;
  border: 1px solid rgba(11, 174, 206, 0.45) !important;
}

/* ── Step circles ── */
.step-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(11, 174, 206, 0.15);
  color: var(--pk-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.step-circle.step-done {
  background-color: var(--pk-primary);
  color: #fff;
}

/* ── Navbar ── */
.nav-link {
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 1rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
  transition: color 0.2s ease;
}
.nav-link:hover {
  color: var(--pk-accent) !important;
}
.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.5px;
}

/* ── Feature icon box ── */
.feature-icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: rgba(11, 174, 206, 0.12);
  color: var(--pk-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

/* ── API section ── */
.api-feature-icon {
  color: var(--pk-primary);
  margin-top: 0.25rem;
}
.border-primary.border-opacity-25 {
  border-color: rgba(11, 174, 206, 0.3) !important;
}

/* ── Why PayKit bar ── */
.pk-accent-bar {
  width: 60px;
  height: 4px;
  background-color: var(--pk-primary);
  margin-top: 1rem;
}