/** Shopify CDN: Minification failed

Line 164:0 Unexpected "="

**/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');
:root {

    /* font family */
     --js-font-heading: 'Poppins', sans-serif;
  --js-font-body: 'Inter', sans-serif;

  /* Brand Colors */
  --js-primary: #5B5FFB;
  --js-primary-dark: #4448F5;
  --js-primary-light: #EEF0FF;
  --js-section-bg: #f8fafc; 
  --js-secondary: #FFFFFF;
  --js-icon-border: #C7CEFF;

  /* Text Colors */
  --js-heading: #111827;
  --js-body: #6B7280;
  --js-light-text: #475569;

  /* Background */
  --js-bg: #FFFFFF;
  --js-bg-light: #F8FAFC;
  --js-border: #E5E7EB;

  /* Status */
  --js-success: #22C55E;
  --js-warning: #F59E0B;
  --js-danger: #EF4444;

  /* Radius */
  --js-radius-sm: 8px;
  --js-radius-md: 12px;
  --js-radius-lg: 16px;
  --js-radius-xl: 24px;

  /* Shadow */
  --js-shadow-sm: 0 2px 10px rgba(0,0,0,0.05);
  --js-shadow-md: 0 5px 20px rgba(0,0,0,0.08);
  --js-shadow-lg: 0 10px 40px rgba(0,0,0,0.12);

  /* Transition */
  --js-transition: all .3s ease;
}

/* ========================================
   GLOBAL
======================================== */

details,
details:focus,
details:active,
button,
button:focus,
button:active,
a,
a:focus,
a:active {
    outline: none;
    -webkit-tap-highlight-color: transparent;
     /* for iOS/Android */
}
body {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height:20px;
  color: var(--js-body);
  background: var(--js-bg);
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  transition: var(--js-transition);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ========================================
   SECTION PREFIX
======================================== */
/* Section Prefix */

.js-section-prefix {
  font-family: var(--js-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--js-primary);
 
}

/* Section Heading */

.js-section-heading {
  font-family: var(--js-font-heading);
  font-size: 44px;
  font-weight: 700;
  line-height: 45px;
  max-width:650px;
  letter-spacing:1px;
  color: var(--js-heading);

}
.js-section-sub-heading {
  font-family: var(--js-font-heading);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  max-width:650px;
  letter-spacing: 1px;
  color: var(--js-heading);
  margin: 0 0 20px;
}
@media (max-width: 1024px) {
.js-section-sub-heading {
  font-size: 34px;
}
}

@media (max-width: 600px) {
  .js-section-sub-heading {
  font-size: 28px;
}
}
/* Section Description */

.js-sec-desc-light {
  font-family: var(--js-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--js-body);
  max-width: 700px;
  margin:0;
}

.js-sec-desc-dark {
  font-family: var(--js-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  color: var(--js-body);
  max-width: 700px;
}


=======================================
   
/* SEO HEADINGS
======================================== */

h1.js-title-xl {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--js-heading);
}

h2.js-title-lg {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
}

h3.js-title-md {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
}

h4.js-title-sm {
  font-size: 24px;
  font-weight: 600;
}

p.js-text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--js-body);
}

/* ========================================
   BUTTONS
======================================== */


.js-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 30px;
  font-family: var(--js-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: var(--js-transition);
  cursor: pointer;
}

/* Primary Button */

.js-btn-primary {
  background: var(--js-primary);
  border-radius:50px;
  color: #fff;
  border: 1px solid var(--js-primary);
}

.js-btn-primary:hover {
  background: var(--js-primary-dark);
  border-color: var(--js-primary-dark);
}


/* Secondary Button */

.js-btn svg{
    width:24px;
    height:24px;
}
.js-btn-secondary {
  background:#5b5ffb;
  border-radius:50px;
  color:#fff;
  border: 1px solid var(--js-border);
}

.js-btn-secondary:hover {
  color:#fff;
  border-color: var(--js-primary);
}
/* Outline Button */

.js-btn-outline {
  background: transparent;
  border: 1px solid var(--js-primary);
  color: var(--js-primary);
}

.js-btn-outline:hover {
  background: var(--js-primary);
  color: #fff;
}


.js-btn-primary:hover svg {
    transform: translateX(4px);
}
.js-btn-primary svg {
    transition: transform 0.2s ease;
}



/* ========================================
   SPACING
======================================== */

.js-section {
  padding: 20px 0;
}

.js-section-sm {
  padding: 70px 0;
}

.js-section-lg {
  padding: 120px 0;
}

       /* ========================================
     ELEGANT SUBTLE GLASS PILLARS ANIMATION
  ======================================== */
  .pk-dp-pillars-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
  }

  .pk-dp-pillar {
    position: absolute;
    /* Soft Subtle Violet Tint */
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.05) 0%, rgba(139, 92, 246, 0.15) 100%);
    border-radius: 9999px;

    /* Clean Subtle Frosted Glass Blur */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Soft Subtle Border & Shadow */
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

    animation: smoothPillarWave 4.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
    transform-origin: center bottom;
    will-change: transform;
    overflow: hidden;
  }

  /* Gentle Shimmer Light Beam Effect */
  .pk-dp-pillar::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(165, 180, 252, 0.2) 75%,
      transparent 100%
    );
    animation: pillarBeam 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    border-radius: 9999px;
    pointer-events: none;
  }

  /* Smooth Fluid Floating Keyframes */
  @keyframes smoothPillarWave {
    0% {
      transform: translateY(0px) scaleY(1) scaleX(1) rotate(0deg);
    }
    35% {
      transform: translateY(-28px) scaleY(1.02) scaleX(0.98) rotate(0.4deg);
    }
    70% {
      transform: translateY(-14px) scaleY(0.99) scaleX(1.01) rotate(-0.3deg);
    }
    100% {
      transform: translateY(-38px) scaleY(1.03) scaleX(0.97) rotate(0.6deg);
    }
  }

  /* Light Beam Sweep Keyframes */
  @keyframes pillarBeam {
    0% {
      top: -100%;
      opacity: 0;
    }
    20% {
      opacity: 0.8;
    }
    80% {
      opacity: 0.8;
    }
    100% {
      top: 200%;
      opacity: 0;
    }
  }

  /* Pillar Positioning & Staggered Wave Delays */
  .pk-pillar-1 {
    left: 59.2%;
    width: 6.7%;
    top: 11.9%;
    height: 100%;
    animation-duration: 4.2s;
    animation-delay: 0s;
  }

  .pk-pillar-2 {
    left: 66.1%;
    width: 6.7%;
    top: 1.6%;
    height: 100%;
    animation-duration: 4.8s;
    animation-delay: -1.2s;
  }

  .pk-pillar-3 {
    left: 50.9%;
    width: 8.1%;
    top: 24.9%;
    height: 100%;
    animation-duration: 3.9s;
    animation-delay: -0.6s;
  }

  .pk-pillar-4 {
    left: 73%;
    width: 7.6%;
    top: 23.0%;
    height: 100%;
    animation-duration: 5.2s;
    animation-delay: -2.1s;
  }

  .pk-pillar-5 {
    left: 80.8%;
    width: 7.0%;
    top: 16.4%;
    height: 100%;
    animation-duration: 4.5s;
    animation-delay: -1.8s;
  }

  .pk-pillar-6 {
    left: 88%;
    width: 7.9%;
    top: 32.1%;
    height: 100%;
    animation-duration: 5.5s;
    animation-delay: -3.0s;
  }

  /* Beam Staggering */
  .pk-pillar-1::before { animation-delay: 0s; }
  .pk-pillar-2::before { animation-delay: 1.1s; }
  .pk-pillar-3::before { animation-delay: 0.5s; }
  .pk-pillar-4::before { animation-delay: 1.8s; }
  .pk-pillar-5::before { animation-delay: 2.4s; }
  .pk-pillar-6::before { animation-delay: 3.0s; }