/* ============================================================
   Sandy's Elementor Widgets — Shared Stylesheet
   ============================================================ */

/* ---------- Color tokens ---------- */
.sj-color-purple-50  { --purple-50: #faf5ff; }
.sj-color-purple-100 { --purple-100: #f3e8ff; }
.sj-color-purple-200 { --purple-200: #e9d5ff; }
.sj-color-purple-300 { --purple-300: #d8b4fe; }
.sj-color-purple-700 { --purple-700: #7e22ce; }
.sj-color-purple-800 { --purple-800: #6b21a8; }
.sj-color-purple-900 { --purple-900: #581c87; }
.sj-color-purple-950 { --purple-950: #3b0764; }
.sj-color-crimson-400 { --crimson-400: #f87171; }
.sj-color-crimson-600 { --crimson-600: #dc2626; }
.sj-color-crimson-700 { --crimson-700: #b91c1c; }
.sj-color-green-500 { --green-500: #22c55e; }

/* ---------- Hero Slider ---------- */
.sj-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #3b0764, #581c87, #6b21a8);
  text-align: center;
  color: #fff;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sj-hero-slider { position: absolute; inset: 0; width: 100%; height: 100%; }
.sj-hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.2s ease-in-out;
  background-size: cover; background-position: center;
}
.sj-hero-slide.sj-active { opacity: 1; }
.sj-hero-slide::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(59,7,100,0.5), rgba(59,7,100,0.75));
}
.sj-hero-dots {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.75rem; z-index: 10;
}
.sj-hero-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.4); cursor: pointer;
  transition: all 0.3s ease; border: 2px solid transparent; padding: 0;
}
.sj-hero-dot.sj-active { background: #fff; width: 32px; border-radius: 6px; }
.sj-hero-dot:hover { background: rgba(255,255,255,0.7); }
.sj-hero-inner {
  max-width: 48rem; margin: 0 auto; position: relative; z-index: 5;
  padding: 3rem 1.5rem; animation: sj-fadeUp .6s ease-out both;
}
@keyframes sj-fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.sj-hero-badge {
  display: inline-block; border-radius: 9999px;
  background: rgba(255,255,255,.1); padding: .25rem 1rem;
  font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: #e9d5ff;
}
.sj-hero h1 { margin-top: 1.5rem; font-size: 2.25rem; font-weight: 700; line-height: 1.2; color: #fff; }
@media (min-width: 768px) { .sj-hero h1 { font-size: 3.75rem; } }
.sj-hero p { margin-top: 1.5rem; font-size: 1.125rem; color: #e9d5ff; }
.sj-hero-buttons {
  margin-top: 2.5rem; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 1rem;
}
.sj-btn-crimson {
  border-radius: 9999px; background: #dc2626; padding: .875rem 2rem;
  font-size: .875rem; font-weight: 600; color: #fff;
  box-shadow: 0 4px 14px rgba(220,38,38,.3);
  transition: background .15s, transform .15s; display: inline-block; text-decoration: none;
}
.sj-btn-crimson:hover { background: #b91c1c; transform: translateY(-1px); color: #fff; }
.sj-btn-outline {
  border-radius: 9999px; border: 1px solid rgba(255,255,255,.3);
  padding: .875rem 2rem; font-size: .875rem; font-weight: 600;
  color: #fff; transition: background .15s; display: inline-block; text-decoration: none;
}
.sj-btn-outline:hover { background: rgba(255,255,255,.1); color: #fff; }
.sj-hero-bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.sj-bubble {
  position: absolute; bottom: -10%; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.05) 70%);
  border: 1px solid rgba(255,255,255,0.35); opacity: 0;
  animation: sj-floatUp linear infinite;
}
@keyframes sj-floatUp {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.5; } 85% { opacity: 0.35; }
  100% { transform: translateY(var(--rise, -700px)) translateX(var(--drift, 0px)); opacity: 0; }
}

/* ---------- Trust Badges ---------- */
.sj-trust-section {
  max-width: 64rem; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2rem; padding: 3.5rem 1.5rem;
}
@media (min-width: 768px) { .sj-trust-section { grid-template-columns: repeat(4, 1fr); } }
.sj-trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sj-trust-item svg { color: #7e22ce; }
.sj-trust-item p { margin-top: .75rem; font-size: .875rem; font-weight: 600; color: #374151; }

/* ---------- Services Grid ---------- */
.sj-services-section { background: rgba(250,245,255,.5); padding: 5rem 1.5rem; text-align: center; }
.sj-services-inner { max-width: 60rem; margin: 0 auto; text-align: center; }
.sj-services-grid {
  margin-top: 3rem; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 1.5rem; justify-items: center;
  overflow: visible;
}
/* MOBILE: Continuous slow scroll */
/* MOBILE: Continuous slow scroll */
@media (max-width: 639px) {

  .sj-services-grid {
    cursor: grab;
    touch-action: none;

    display: flex !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    gap: 1rem !important;
    padding: 1rem 0 2rem 0 !important;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sj-services-grid::-webkit-scrollbar{
    display:none;
  }

  .sj-service-card{
    flex: 0 0 85% !important;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}

.sj-service-card *{
    pointer-events: none;
}

}
.sj-service-card {
  border-radius: 1.75rem; border: 1px solid #f3e8ff;
  background: #fff; padding: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: box-shadow .2s, transform .2s;
  width: 100%; max-width: 22rem; text-align: center;
}
.sj-service-card:hover { box-shadow: 0 8px 24px rgba(126,34,206,.12); transform: translateY(-4px); }
.sj-service-icon {
  display: flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: 1rem;
  background: #f3e8ff; color: #7e22ce; margin: 0 auto;
}
.sj-service-card h3 { margin-top: 1.25rem; font-size: 1.05rem; font-weight: 700; color: #111827; }
.sj-service-card p { margin-top: .5rem; font-size: .875rem; color: #4b5563; line-height: 1.6; }

/* Slider dots (mobile only) */
.sj-services-slider-dots {
  display: none;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
@media (max-width: 639px) {
  .sj-services-slider-dots {
    display: flex;
  }
}
.sj-services-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #d1d5db; cursor: pointer;
  transition: all 0.3s ease;
}
.sj-services-dot.sj-active {
  background: #7e22ce;
  width: 24px;
  border-radius: 4px;
}

/* ---------- Slider Arrows (Recent Work & Testimonials) ---------- */
.sj-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(126, 34, 206, 0.75);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  padding: 0;
}
.sj-slider-arrow:hover {
  background: rgba(126, 34, 206, 1);
}
.sj-slider-arrow svg { width: 14px; height: 14px; stroke: #fff; }
.sj-slider-prev { left: 0.5rem; }
.sj-slider-next { right: 0.5rem; }

/* Hide arrows on desktop for work/testimonials */
@media (min-width: 640px) {
  .sj-work-grid ~ .sj-slider-arrow,
  .sj-testimonials-grid ~ .sj-slider-arrow {
    display: none !important;
  }
}

/* Prevent horizontal overflow on mobile */
@media (max-width: 639px) {
  html, body {
    overflow-x: hidden !important;
  }
}

/* ---------- Why Choose Us ---------- */
.sj-why-section { padding: 5rem 1.5rem; background: linear-gradient(135deg, #faf5ff, #f3e8ff); }
.sj-why-inner {
  max-width: 80rem; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center;
}
@media (min-width: 1024px) { .sj-why-inner { grid-template-columns: 1fr 1fr; } }
.sj-why-img { border-radius: 1.75rem; overflow: hidden; box-shadow: 0 12px 40px rgba(126,34,206,.15); }
.sj-why-img img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
.sj-why-content h2 { font-size: 2rem; font-weight: 700; color: #111827; margin-bottom: 1rem; }
.sj-why-content p { color: #4b5563; font-size: 1rem; line-height: 1.7; margin-bottom: 1.5rem; }
.sj-why-features { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.sj-why-features li {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: .9rem; color: #374151; font-weight: 500;
}
.sj-why-features li svg { color: #22c55e; flex-shrink: 0; }

/* ---------- Process Steps ---------- */
.sj-process-section { padding: 5rem 1.5rem; background: #fff; }
.sj-process-inner { max-width: 64rem; margin: 0 auto; text-align: center; }
.sj-process-grid {
  margin-top: 3rem; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 2rem;
}
@media (max-width: 1023px) and (min-width: 640px) { .sj-process-grid { grid-template-columns: repeat(2, 1fr); } }
/* MOBILE: Continuous slow scroll */
@media (max-width: 639px) {
  .sj-process-grid {
    display: flex !important;
    overflow: hidden !important;
    gap: 1rem !important;
    padding: 1rem 0 2rem 0 !important;
  }
  .sj-process-step {
    flex: 0 0 85% !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
  }
}
.sj-process-step {
  position: relative; padding: 2rem 1.5rem;
  border-radius: 1.5rem; background: #faf5ff;
  border: 1px solid #f3e8ff; transition: transform .2s, box-shadow .2s;
}
.sj-process-step:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(126,34,206,.1); }
.sj-process-number {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: #7e22ce; color: #fff; font-size: 1.25rem;
  font-weight: 700; margin: 0 auto 1rem;
}
.sj-process-step h3 { font-size: 1rem; font-weight: 700; color: #111827; margin-bottom: 0.5rem; }
.sj-process-step p { font-size: .85rem; color: #4b5563; line-height: 1.6; }

/* ---------- Recent Work ---------- */
.sj-work-section { padding: 5rem 1.5rem; }
.sj-work-inner { max-width: 80rem; margin: 0 auto; }
.sj-work-grid {
  margin-top: 2.5rem; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
@media (max-width: 1023px) and (min-width: 640px) { .sj-work-grid { grid-template-columns: repeat(2, 1fr); } }
/* MOBILE: 1-by-1 slider like hero */
@media (max-width: 639px) {
  .sj-work-grid {
    display: flex !important;
    overflow: hidden !important;
    gap: 0 !important;
    padding: 0 !important;
    position: relative;
    min-height: 380px;
  }
  .sj-project-card {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    flex: 0 0 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
  }
  .sj-project-card.sj-slide-active {
    opacity: 1;
    visibility: visible;
    position: relative !important;
  }
}
.sj-project-card {
  border-radius: 1.75rem; border: 1px solid #f3e8ff;
  background: #fff; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: box-shadow .2s, transform .2s;
}
.sj-project-card:hover { box-shadow: 0 8px 24px rgba(126,34,206,.12); transform: translateY(-3px); }
.sj-project-img { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.sj-project-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.sj-project-card:hover .sj-project-img img { transform: scale(1.05); }
.sj-project-badge {
  position: absolute; top: .75rem; left: .75rem;
  border-radius: 9999px; background: #7e22ce;
  padding: .25rem .75rem; font-size: .75rem;
  font-weight: 600; color: #fff;
}
.sj-project-body { padding: 1.25rem; }
.sj-project-body h3 { font-weight: 700; color: #111827; }
.sj-project-body p { margin-top: .25rem; font-size: .875rem; color: #4b5563;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sj-project-location {
  margin-top: .75rem; display: flex; align-items: center;
  gap: .25rem; font-size: .75rem; color: #6b7280;
}

/* ---------- Stats Banner ---------- */
.sj-stats-banner { padding: 4rem 1.5rem; background: #7e22ce; color: #fff; }
.sj-stats-inner {
  max-width: 64rem; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2rem; text-align: center;
}
@media (min-width: 768px) { .sj-stats-inner { grid-template-columns: repeat(4, 1fr); } }
.sj-stat-number { font-size: 2.5rem; font-weight: 800; display: block; }
.sj-stat-label { font-size: .875rem; color: #e9d5ff; margin-top: .25rem; }

/* ---------- Testimonials ---------- */
.sj-testimonials-section { background: #3b0764; padding: 5rem 1.5rem; color: #fff; }
.sj-testimonials-inner { max-width: 64rem; margin: 0 auto; text-align: center; }
.sj-testimonials-grid {
  margin-top: 3rem; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
@media (max-width: 767px) and (min-width: 640px) { .sj-testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
/* MOBILE: 1-by-1 slider like hero */
@media (max-width: 639px) {
  .sj-testimonials-grid {
    display: flex !important;
    overflow: hidden !important;
    gap: 0 !important;
    padding: 0 !important;
    position: relative;
    min-height: 280px;
  }
  .sj-testimonial-card {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    flex: 0 0 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
  }
  .sj-testimonial-card.sj-slide-active {
    opacity: 1;
    visibility: visible;
    position: relative !important;
  }
}
.sj-testimonial-card {
  border-radius: 1.75rem; background: rgba(255,255,255,.05);
  padding: 1.5rem; text-align: left; backdrop-filter: blur(4px);
}
.sj-testimonial-stars { display: flex; gap: .25rem; color: #f87171; }
.sj-testimonial-card blockquote { margin-top: 1rem; font-size: .875rem; color: #f3e8ff; font-style: normal; }
.sj-testimonial-card cite { display: block; margin-top: 1rem; font-size: .875rem; font-weight: 600; font-style: normal; }

/* ---------- Shared Slider Dots (mobile) ---------- */
.sj-slider-dots {
  display: none;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
@media (max-width: 639px) {
  .sj-slider-dots { display: flex; }
}
.sj-slider-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer; transition: all 0.3s ease;
}
.sj-slider-dot.sj-active {
  background: #fff;
  width: 24px;
  border-radius: 4px;
}
/* Light variant for non-dark sections */
.sj-slider-dots.sj-light .sj-slider-dot {
  background: #d1d5db;
}
.sj-slider-dots.sj-light .sj-slider-dot.sj-active {
  background: #7e22ce;
}

/* ---------- CTA Section ---------- */
.sj-cta-section {
  padding: 5rem 1.5rem; text-align: center;
  background: linear-gradient(135deg, #3b0764, #6b21a8);
}
.sj-cta-section h2 { font-size: 1.875rem; font-weight: 700; color: #fff; }
.sj-cta-section p { margin-top: .75rem; color: #e9d5ff; }
.sj-btn-purple {
  display: inline-block; margin-top: 2rem;
  border-radius: 9999px; background: #dc2626;
  padding: .875rem 2rem; font-size: .875rem; font-weight: 600;
  color: #fff; box-shadow: 0 4px 14px rgba(220,38,38,.3);
  transition: background .15s, transform .15s; text-decoration: none;
}
.sj-btn-purple:hover { background: #b91c1c; transform: translateY(-2px); }

/* ---------- Page Bubbles (floating color circles) ---------- */
.sj-page-bubbles { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sj-page-bubble {
  position: absolute; border-radius: 50%; opacity: 0.025;
  animation: sj-floatPageBubble linear infinite;
}
@keyframes sj-floatPageBubble {
  0% { transform: translateY(0) translateX(0) scale(1); }
  25% { transform: translateY(-25vh) translateX(20px) scale(1.1); }
  50% { transform: translateY(-50vh) translateX(-15px) scale(0.9); }
  75% { transform: translateY(-75vh) translateX(25px) scale(1.05); }
  100% { transform: translateY(-120vh) translateX(0) scale(1); }
}

/* ---------- Before/After Slider ---------- */
.sj-ba-slider {
  position: relative; aspect-ratio: 4/3; width: 100%;
  user-select: none; overflow: hidden; border-radius: 1.25rem; cursor: col-resize;
  touch-action: none; -webkit-touch-callout: none;
}
.sj-ba-after, .sj-ba-before-wrap { position: absolute; inset: 0; }
.sj-ba-after img, .sj-ba-before-wrap img {
  width: 100%; height: 100%; object-fit: cover; object-position: left top;
  pointer-events: none; -webkit-user-drag: none; user-drag: none;
}
.sj-ba-before-wrap { overflow: hidden; width: 50%; }
.sj-ba-divider {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: #fff; box-shadow: 0 0 4px rgba(0,0,0,.3);
  left: 50%; transform: translateX(-50%); pointer-events: none;
}
.sj-ba-handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  background: #fff; color: #7e22ce; display: flex;
  align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.2); font-size: 1rem;
  touch-action: none;
  z-index: 10;
}
.sj-ba-label-before {
  position: absolute; top: .75rem; left: .75rem;
  border-radius: 9999px; background: rgba(0,0,0,.6);
  padding: .25rem .75rem; font-size: .75rem; font-weight: 600; color: #fff;
}
.sj-ba-label-after {
  position: absolute; top: .75rem; right: .75rem;
  border-radius: 9999px; background: rgba(126,34,206,.9);
  padding: .25rem .75rem; font-size: .75rem; font-weight: 600; color: #fff;
}

/* ---------- Section Title Shared ---------- */
.sj-section-title { font-size: 1.875rem; font-weight: 700; color: #111827; }
.sj-section-sub { margin-top: .75rem; color: #4b5563; }

/* ============================================================
   ABOUT US SECTION
   ============================================================ */
.sj-about-card {
  border-radius: 1.75rem;
  border: 1px solid #f3e8ff;
  background: #fff;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: box-shadow .2s, transform .2s;
}
.sj-about-card:hover {
  box-shadow: 0 8px 24px rgba(126,34,206,.12);
  transform: translateY(-3px);
}
.sj-about-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 1rem;
  background: #f3e8ff; color: #7e22ce;
  margin-bottom: 1rem;
}
.sj-about-card-icon i { font-size: 1.25rem; }
.sj-about-card h3 {
  font-size: 1.125rem; font-weight: 700; color: #111827; margin-bottom: 0.5rem;
}
.sj-about-card p {
  font-size: .875rem; color: #4b5563; line-height: 1.6;
}
@media (min-width: 640px) {
  .sj-about-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   SERVICES PAGE — SHOWCASE CARDS
   ============================================================ */
.sj-creative-card {
  border-radius: 1.75rem;
  overflow: hidden;
  border: 1px solid #f3e8ff;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: transform .2s, box-shadow .2s;
}
.sj-creative-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(126,34,206,.12);
}
.sj-creative-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.sj-creative-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s;
}
.sj-creative-card:hover .sj-creative-card-img img {
  transform: scale(1.05);
}
.sj-creative-card-body {
  padding: 1.5rem;
}
.sj-creative-card-body h3 {
  font-size: 1.1rem; font-weight: 700; color: #111827;
}
.sj-creative-card-body p {
  margin-top: 0.5rem; font-size: .875rem; color: #4b5563; line-height: 1.6;
}
@media (min-width: 768px) {
  .sj-showcase-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.sj-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .sj-contact-grid {
    grid-template-columns: 1fr 2fr;
  }
}

.sj-contact-info {
  display: flex; flex-direction: column; gap: 1.5rem;
}

.sj-contact-info-item {
  display: flex; align-items: flex-start; gap: 1rem;
  border-radius: 1.25rem; border: 1px solid #f3e8ff;
  background: #fff; padding: 1.25rem;
}

.sj-contact-info-icon {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: .75rem;
  background: #f3e8ff; color: #7e22ce; flex-shrink: 0;
}
.sj-contact-info-icon i { font-size: .9rem; }

.sj-contact-info-label {
  font-size: .875rem; font-weight: 600; color: #111827;
}
.sj-contact-info-value {
  font-size: .875rem; color: #4b5563;
}

/* Contact Form */
.sj-contact-form {
  border-radius: 1.75rem;
  border: 1px solid #f3e8ff;
  background: #fff;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  display: flex; flex-direction: column; gap: 1.25rem;
}

.sj-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .sj-form-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sj-form-group {
  display: flex; flex-direction: column; gap: .25rem;
}

.sj-form-group label {
  font-size: .875rem; font-weight: 500; color: #374151;
}

.sj-form-group input,
.sj-form-group select,
.sj-form-group textarea {
  width: 100%;
  border-radius: .75rem;
  border: 1px solid #e5e7eb;
  padding: .625rem 1rem;
  font-size: .875rem;
  color: #111827;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  background: #fff;
  font-family: inherit;
}

.sj-form-group input:focus,
.sj-form-group select:focus,
.sj-form-group textarea:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168,85,247,.15);
}

.sj-form-group textarea {
  resize: vertical;
}

.sj-form-error {
  font-size: .75rem; color: #dc2626; margin-top: .25rem;
}

.sj-form-submit {
  width: 100%;
  border-radius: 9999px;
  background: #7e22ce;
  padding: .75rem 1.5rem;
  font-size: .875rem;
  font-weight: 600;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background .15s;
  margin-top: .5rem;
}
.sj-form-submit:hover {
  background: #6b21a8;
}
.sj-form-submit:disabled {
  opacity: .6; cursor: not-allowed;
}

.sj-form-success {
  border-radius: 1.75rem;
  border: 1px solid #f3e8ff;
  background: #faf5ff;
  padding: 2rem;
  text-align: center;
}
.sj-form-success h3 {
  font-size: 1.125rem; font-weight: 700; color: #581c87;
}
.sj-form-success p {
  margin-top: .5rem; font-size: .875rem; color: #7e22ce;
}

.sj-server-error {
  font-size: .875rem; color: #dc2626;
}
/* ============================================================
   OUR WORKS — FILTERS + PROJECTS + VIDEO
   ============================================================ */
.sj-ourworks-page {
  width: 100%;
  padding: 3rem 1.5rem;
}

.sj-ourworks-header {
  text-align: center;
  margin-bottom: 2rem;
}

.sj-ourworks-header .sj-section-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.5rem;
}

.sj-ourworks-subtitle {
  font-size: .875rem;
  color: #6b7280;
}

.sj-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.sj-filter-btn {
  border-radius: 9999px;
  padding: .5rem 1.25rem;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background .15s, color .15s;
  background: #faf5ff;
  color: #7e22ce;
}

.sj-filter-btn:hover {
  background: #f3e8ff;
}

.sj-filter-btn.sj-active {
  background: #7e22ce;
  color: #fff;
}

.sj-projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 640px) {
  .sj-projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .sj-projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .sj-projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 639px) {
  .sj-projects-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
    padding: 0 !important;
  }

  /* Only show BA slider on mobile, hide text and badges */
  .sj-project-full-card {
    padding: 0 !important;
    border: 1px solid #f3e8ff !important;
    box-shadow: 0 2px 12px rgba(126,34,206,.1) !important;
    border-radius: 0.75rem !important;
    overflow: hidden;
  }

  .sj-project-full-card .sj-project-full-body {
    display: none !important;
  }

  .sj-project-category-badge,
  .sj-project-meta {
    display: none !important;
  }

  .sj-ba-slider {
    border-radius: 0.5rem !important;
    margin: 0 !important;
  }
}

.sj-project-full-card {
  border-radius: 1.75rem;
  border: 1px solid #f3e8ff;
  background: #fff;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: box-shadow .2s;
}

.sj-project-full-card:hover {
  box-shadow: 0 8px 24px rgba(126,34,206,.12);
}

.sj-project-full-card.sj-hidden {
  display: none;
}

/* Before/After Slider inside Our Works */
.sj-ba-slider {
  position: relative;
  aspect-ratio: 4/3;
  width: 100%;
  user-select: none;
  overflow: hidden;
  border-radius: 1.25rem;
  cursor: col-resize;
  touch-action: none;
  -webkit-touch-callout: none;
}

.sj-ba-after, .sj-ba-before-wrap {
  position: absolute;
  inset: 0;
}

.sj-ba-after img, .sj-ba-before-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.sj-ba-before-wrap {
  overflow: hidden;
  width: 50%;
}

.sj-project-full-body {
  margin-top: 1.25rem;
}

.sj-project-category-badge {
  display: inline-block;
  border-radius: 9999px;
  background: #f3e8ff;
  padding: .25rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  color: #7e22ce;
}

.sj-project-full-body h3 {
  margin-top: .75rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
}

.sj-project-full-body p {
  margin-top: .5rem;
  font-size: .875rem;
  color: #4b5563;
  line-height: 1.6;
}

.sj-project-meta {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .75rem;
  color: #6b7280;
}

.sj-project-meta span, .sj-project-meta a {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.sj-project-meta a {
  color: #7e22ce;
  text-decoration: none;
}

.sj-project-meta a:hover {
  text-decoration: underline;
}

/* Video Showcase inside Our Works */
.sj-video-showcase {
  background: linear-gradient(135deg, #3b0764, #581c87);
  padding: 4rem 1.5rem;
  margin-top: 3rem;
  border-radius: 1.75rem;
}

.sj-video-inner {
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
}

.sj-video-inner h2 {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: .5rem;
}

.sj-video-inner p {
  color: #e9d5ff;
  margin-bottom: 2rem;
}

.sj-video-container {
  border-radius: 1.5rem;
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

.sj-video-container video {
  width: 100%;
  display: block;
}