/* put your own styles to customize and override the theme */

/* ==========================================================================
   Vibrant home page theme
   ========================================================================== */

:root {
  --h-accent1: #7C3AED; --h-accent1-soft: #EDE4FB; /* violet */
  --h-accent2: #EC4899; --h-accent2-soft: #FCE4F1; /* pink   */
  --h-accent3: #F97316; --h-accent3-soft: #FDEAD7; /* orange */
  --h-accent4: #14B8A6; --h-accent4-soft: #D9F5F1; /* teal   */
  --h-accent5: #3B82F6; --h-accent5-soft: #DCEAFE; /* blue   */
  --h-accent6: #22C55E; --h-accent6-soft: #DFF7E6; /* green  */
}

/* ---- Navbar ------------------------------------------------------------ */

.navbar {
  background: #fff;
  box-shadow: 0 2px 12px rgba(20, 20, 31, .06);
}

.navbar .nav-link {
  font-weight: 600;
  position: relative;
}

.navbar .nav-item.active .nav-link,
.navbar .nav-link:hover {
  background: linear-gradient(120deg, var(--h-accent1), var(--h-accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.navbar .navbar-btn {
  background: linear-gradient(120deg, var(--h-accent1), var(--h-accent2));
  color: #fff !important;
  border: none;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(124, 58, 237, .35);
}

.navbar .navbar-btn:hover {
  filter: brightness(1.08);
  color: #fff !important;
}

/* ---- Hero ---------------------------------------------------------------- */

section.py-5:first-of-type {
  position: relative;
  overflow: hidden;
}

section.py-5:first-of-type::before,
section.py-5:first-of-type::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
  opacity: .35;
}

section.py-5:first-of-type::before {
  width: 380px;
  height: 380px;
  background: var(--h-accent1);
  top: -120px;
  right: -80px;
}

section.py-5:first-of-type::after {
  width: 320px;
  height: 320px;
  background: var(--h-accent3);
  bottom: -100px;
  left: -80px;
}

section.py-5:first-of-type .container {
  position: relative;
  z-index: 1;
}

section.py-5:first-of-type h1 {
  background: linear-gradient(120deg, var(--h-accent1), var(--h-accent2) 60%, var(--h-accent3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Icon circles (services / why-us / partner / contact) -------------- */

.icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.icon-circle.icon-sm {
  width: 44px;
  height: 44px;
}

.icon-violet { background: var(--h-accent1-soft); color: var(--h-accent1); }
.icon-pink   { background: var(--h-accent2-soft); color: var(--h-accent2); }
.icon-orange { background: var(--h-accent3-soft); color: var(--h-accent3); }
.icon-teal   { background: var(--h-accent4-soft); color: var(--h-accent4); }
.icon-blue   { background: var(--h-accent5-soft); color: var(--h-accent5); }
.icon-green  { background: var(--h-accent6-soft); color: var(--h-accent6); }

/* ---- Cards (services / partner) ----------------------------------------- */

#services .card,
#partner .card,
#contact .card {
  border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}

#services .card::before,
#partner .card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--card-accent, var(--h-accent1));
}

#services .col-12.col-md-6.col-lg-4:nth-of-type(6n+1) { --card-accent: var(--h-accent1); }
#services .col-12.col-md-6.col-lg-4:nth-of-type(6n+2) { --card-accent: var(--h-accent2); }
#services .col-12.col-md-6.col-lg-4:nth-of-type(6n+3) { --card-accent: var(--h-accent3); }
#services .col-12.col-md-6.col-lg-4:nth-of-type(6n+4) { --card-accent: var(--h-accent4); }
#services .col-12.col-md-6.col-lg-4:nth-of-type(6n+5) { --card-accent: var(--h-accent5); }
#services .col-12.col-md-6.col-lg-4:nth-of-type(6n+6) { --card-accent: var(--h-accent6); }

#partner .col-6.col-lg-3:nth-of-type(4n+1) { --card-accent: var(--h-accent1); }
#partner .col-6.col-lg-3:nth-of-type(4n+2) { --card-accent: var(--h-accent2); }
#partner .col-6.col-lg-3:nth-of-type(4n+3) { --card-accent: var(--h-accent4); }
#partner .col-6.col-lg-3:nth-of-type(4n+4) { --card-accent: var(--h-accent5); }

#services .card:hover,
#partner .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(20, 20, 31, .12) !important;
}

/* ---- Why-us bullet icons cycle colors ----------------------------------- */

.why-us-item:nth-of-type(4n+1) .icon-circle { background: var(--h-accent1-soft); color: var(--h-accent1); }
.why-us-item:nth-of-type(4n+2) .icon-circle { background: var(--h-accent2-soft); color: var(--h-accent2); }
.why-us-item:nth-of-type(4n+3) .icon-circle { background: var(--h-accent4-soft); color: var(--h-accent4); }
.why-us-item:nth-of-type(4n+4) .icon-circle { background: var(--h-accent5-soft); color: var(--h-accent5); }

/* ---- Partner section background ----------------------------------------- */

#partner {
  background: linear-gradient(180deg, #FAF7FF 0%, #FDF2F8 100%) !important;
}

#partner .btn-primary {
  background: linear-gradient(120deg, var(--h-accent1), var(--h-accent2));
  border: none;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .35);
}

/* ---- Hero CTA buttons ----------------------------------------------------- */

section.py-5:first-of-type .btn-primary {
  background: linear-gradient(120deg, var(--h-accent1), var(--h-accent2));
  border: none;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .35);
}

section.py-5:first-of-type .btn-outline-dark {
  border-color: var(--h-accent1);
  color: var(--h-accent1);
}

section.py-5:first-of-type .btn-outline-dark:hover {
  background: var(--h-accent1);
  color: #fff;
}