.elementor-23 .elementor-element.elementor-element-be4de66{width:100%;max-width:100%;}.elementor-23 .elementor-element.elementor-element-dca1817{width:100%;max-width:100%;}.elementor-23 .elementor-element.elementor-element-d3afc9a{width:100%;max-width:100%;}.elementor-23 .elementor-element.elementor-element-aae4097{width:100%;max-width:100%;}.elementor-23 .elementor-element.elementor-element-13da595{width:100%;max-width:100%;}.elementor-23 .elementor-element.elementor-element-4bdb03d{width:100%;max-width:100%;}.elementor-23 .elementor-element.elementor-element-4f2d9fe2{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-23 .elementor-element.elementor-element-3a986277{width:100%;max-width:100%;}.elementor-23 .elementor-element.elementor-element-b427b21{width:100%;max-width:100%;}/* Start custom CSS for html, class: .elementor-element-be4de66 *//* ============================================================
     Everything scoped under .hb-section — no :root vars, no bare
     .banner/.left/.right/.btn/etc so this can't collide with any
     other section's CSS on the same page.
     ============================================================ */
 
  .hb-section{
    --hb-navy-deep:#0a0e2a;
    --hb-navy-mid:#1a1245;
    --hb-purple-glow:#4a2a7a;
    --hb-gold:#f0c14b;
    --hb-gold-light:#f7d878;
    --hb-gold-dim:#c9a04e;
    --hb-cream:#f5efe0;
    --hb-panel-border:rgba(240,193,75,0.35);
 
    all:initial;
    display:block;
    box-sizing:border-box;
    width:100%;
    font-family: "poppins";
  }
 
  .hb-section *{
    box-sizing:border-box;
    margin:0;
    padding:0;
  }
 
  .hb-banner{
    position:relative;
    width:100%;
    max-width:1400px;
    margin:0 auto;
    aspect-ratio:960/350;
    overflow:hidden;
    background:
      radial-gradient(ellipse at 78% 45%, rgba(120,80,180,0.35) 0%, rgba(74,42,122,0.15) 35%, transparent 60%),
      linear-gradient(180deg, #050515 0%, #100a30 40%, #1b1040 70%, #2a1550 100%);
  }
 
  /* stars */
  .hb-stars{
    position:absolute;
    inset:0;
    background-image:
      radial-gradient(1.5px 1.5px at 10% 15%, #fff, transparent),
      radial-gradient(1px 1px at 22% 40%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 33% 8%, #fff, transparent),
      radial-gradient(1px 1px at 45% 25%, #fff, transparent),
      radial-gradient(2px 2px at 60% 12%, #fff, transparent),
      radial-gradient(1px 1px at 70% 30%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 85% 18%, #fff, transparent),
      radial-gradient(1px 1px at 5% 60%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 15% 80%, #fff, transparent),
      radial-gradient(1px 1px at 38% 70%, #fff, transparent),
      radial-gradient(1px 1px at 55% 85%, #fff, transparent),
      radial-gradient(2px 2px at 90% 60%, #fff, transparent),
      radial-gradient(1px 1px at 95% 85%, #fff, transparent);
    background-repeat:repeat;
    background-size:400px 400px;
    opacity:0.8;
  }
 
  /* shooting star */
  .hb-shooting-star{
    position:absolute;
    top:14%;
    right:20%;
    width:90px;
    height:2px;
    background:linear-gradient(90deg, rgba(255,200,150,0.9), transparent);
    transform:rotate(20deg);
    border-radius:2px;
  }
  .hb-shooting-star::after{
    content:'';
    position:absolute;
    right:0;
    top:-1.5px;
    width:5px;
    height:5px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 0 8px 2px rgba(255,220,180,0.9);
  }
 
  /* mountains */
  .hb-mountains{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:22%;
    background:linear-gradient(180deg, transparent 0%, #1a1030 100%);
  }
  .hb-mountains svg{
    width:100%;
    height:100%;
    display:block;
  }
 
  /* content layout */
  .hb-content{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    height:100%;
    width:100%;
  }
 
  .hb-left{
    flex:0 0 54%;
    padding:0 3.5% 0 4.5%;
    color:var(--hb-cream);
  }
 
  .hb-eyebrow{
    font-size:1.1em;
    letter-spacing:0.12em;
    color:#eae4f5;
    font-weight:600;
    margin-bottom:0.3em;
    display:block;
  }
 
  .hb-headline{
    font-size:2.6em;
    line-height:1.05;
    margin-bottom:0.15em;
  }
  .hb-headline .hb-accent{
    color:var(--hb-gold-light);
    background:linear-gradient(180deg,#fbe08a,#e0a93f);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    display:block;
  }
  .hb-headline .hb-white-line{
    color:#f6f3ea;
    font-weight:700;
    display:block;
    font-size:0.72em;
    margin-top:0.1em;
  }
 
  .hb-tagline{
    margin-top:0.8em;
    font-size:0.85em;
    color:#d9d3ea;
    letter-spacing:0.02em;
    display:block;
  }
 
  .hb-pills{
    display:flex;
    flex-wrap:wrap;
    gap:0.5em;
    margin-top:1em;
  }
  .hb-pill{
    display:inline-flex;
    align-items:center;
    gap:0.4em;
    border:1px solid var(--hb-panel-border);
    background:rgba(255,255,255,0.03);
    color:#f0e9d2;
    padding:0.35em 0.9em;
    border-radius:20px;
    font-size:0.72em;
    white-space:nowrap;
  }
 
  .hb-desc{
    margin-top:1em;
    font-size:0.78em;
    color:#c9c2dc;
    line-height:1.5;
    max-width:34em;
    display:block;
  }
 
  .hb-cta-row{
    display:flex;
    gap:0.8em;
    margin-top:1.3em;
  }
  .hb-btn{
    padding:0.7em 1.5em;
    border-radius:6px;
    font-size:0.82em;
    font-weight:700;
    letter-spacing:0.01em;
    cursor:pointer;
    border:none;
  }
  .hb-btn-primary{
    background:linear-gradient(180deg,#f5cf6b,#dba832);
    color:#241505;
  }
  .hb-btn-secondary{
    background:transparent;
    color:#f2ecd8;
    border:1px solid rgba(240,236,216,0.5);
  }
 
  .hb-trust{
    display:flex;
    align-items:center;
    gap:0.6em;
    margin-top:1.4em;
  }
  .hb-avatars{
    display:flex;
  }
  .hb-avatars span{
    width:1.7em;
    height:1.7em;
    border-radius:50%;
    border:2px solid #1b1040;
    margin-left:-0.5em;
    background:linear-gradient(135deg,#d9b26a,#8a6a3c);
    display:inline-block;
  }
  .hb-avatars span:first-child{margin-left:0;}
  .hb-trust-text{
    font-size:0.7em;
    color:#cfc8e0;
  }
 
  /* zodiac wheel — now an <img>, not inline SVG */
  .hb-right{
    flex:1;
    position:relative;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
 
  .hb-wheel-wrap{
    position:relative;
    width:min(78%, 340px);
    aspect-ratio:1/1;
  }
 
  .hb-wheel-img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 0 40px rgba(240,193,75,0.25));
  }
 
  @media (max-width:700px){
    .hb-banner{aspect-ratio:4/5;}
    .hb-content{flex-direction:column;}
    .hb-left{flex:none;padding:6% 6% 2%;text-align:center;}
    .hb-headline{font-size:1.8em;}
    .hb-pills{justify-content:center;}
    .hb-cta-row{justify-content:center;}
    .hb-trust{justify-content:center;}
    .hb-right{flex:none;padding-bottom:6%;}
    .hb-wheel-wrap{width:60%;}
  }
  
  /* ============================================================
   ROTATING + GLOWING WHEEL EFFECT
   Add this to your existing .hb-section <style> block.
   ============================================================ */

.hb-wheel-wrap{
  /* keeps the glow from getting clipped by any overflow:hidden
     on parent elements */
  overflow:visible;
}

.hb-wheel-img{
  animation:
    hb-wheel-spin 50s linear infinite,
    hb-wheel-glow 3.5s ease-in-out infinite;
  will-change: transform, filter;
  border-radius:50%;   /* safe even if the image is already circular */
}

@keyframes hb-wheel-spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@keyframes hb-wheel-glow{
  0%, 100%{
    filter:
      drop-shadow(0 0 18px rgba(240,193,75,0.45))
      drop-shadow(0 0 38px rgba(240,193,75,0.22));
  }
  50%{
    filter:
      drop-shadow(0 0 32px rgba(240,193,75,0.75))
      drop-shadow(0 0 60px rgba(240,193,75,0.4));
  }
}

/* Optional: pause the spin on hover, glow keeps going */
.hb-wheel-img:hover{
  animation-play-state: paused, running;
}

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce){
  .hb-wheel-img{
    animation: hb-wheel-glow 3.5s ease-in-out infinite;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-dca1817 */:root{
    --bg-deep:#0a0e27;
    --bg-mid:#0d1230;
    --card-bg:#11162f;
    --card-border:rgba(212,168,83,0.35);
    --card-border-hover:rgba(212,168,83,0.75);
    --gold:#d9a94e;
    --gold-light:#f0c46e;
    --heading:#f3ead9;
    --body-text:#9a9db3;
    --title-text:#e9e6f2;
  }

  *{box-sizing:border-box;margin:0;padding:0;}

  body{
    
    background:#000;
  }

  .section{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(120,70,40,0.15) 0%, transparent 45%),
      linear-gradient(180deg, #0a0e27 0%, #0c1030 100%);
    padding:3.5em 3em 3em;
  }

  /* heading */
  .heading-wrap{
    text-align:center;
    margin-bottom:2.5em;
  }

  .heading-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.6em;
    margin-bottom:0.5em;
  }

  .spark{
    color:var(--gold);
    font-size:1.1em;
    flex-shrink:0;
  }

  .heading{

    font-weight:700;
    font-size:2em;
    color:var(--title-text);
    letter-spacing:0.01em;
  }

  .subheading{
    font-size:0.9em;
    color:var(--body-text);
    letter-spacing:0.01em;
  }

  /* grid */
  .grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:1em;
  }

  .card{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
    background-color:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:10px;
    padding:1.8em 1.2em 1.5em;
    text-align:center;
    transition:border-color 0.25s ease, transform 0.25s ease;
  }

  .card:hover{
    border-color:var(--card-border-hover);
    transform:translateY(-3px);
  }

  .icon{
    font-size:2.4em;
    margin-bottom:0.6em;
    line-height:1;
  }

  .card-title{
    font-size:0.95em;
    font-weight:700;
    color:var(--heading);
    margin-bottom:0.5em;
  }

  .card-desc{
    font-size:0.75em;
    color:var(--body-text);
    line-height:1.5;
    margin-bottom:1.1em;
    min-height:3em;
  }

  .explore{
    display:inline-flex;
    align-items:center;
    gap:0.35em;
    font-size:0.78em;
    font-weight:700;
    color:var(--gold-light);
    text-decoration:none;
    letter-spacing:0.02em;
  }
  .explore .arrow{
    transition:transform 0.2s ease;
    display:inline-block;
  }
  .card:hover .explore .arrow{
    transform:translateX(3px);
  }

  @media (max-width:1000px){
    .grid{grid-template-columns:repeat(3, 1fr);}
  }
  @media (max-width:640px){
    .grid{grid-template-columns:repeat(2, 1fr);}
    .heading{font-size:1.4em;}
    .section{padding:2.5em 1.2em;}
  }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d3afc9a *//* ============================================================
     Everything scoped under .tf-section so it can't collide with
     other sections' CSS (no :root vars, no bare .wrap/.panel/etc).
     ============================================================ */
 
  .tf-section{
    --tf-bg-deep:#050714;
    --tf-panel-bg:#12142e;
    --tf-panel-border:rgba(212,168,83,0.3);
    --tf-gold:#d9a94e;
    --tf-gold-light:#e8bc6c;
    --tf-heading:#f3ead9;
    --tf-body-text:#9a9db3;
    --tf-divider:rgba(212,168,83,0.2);
 
    all:initial;
    display:block;
    box-sizing:border-box;
    background:var(--tf-bg-deep);
    width:100%;
     font-family: "poppins";
  }
 
  .tf-section *{
    box-sizing:border-box;
    margin:0;
    padding:0;
  }
 
  .tf-container{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:2.5em 2em;
  }
 
  .tf-panel{
    background:linear-gradient(180deg, #141733 0%, #0d0f26 100%);
    border:1px solid var(--tf-panel-border);
    border-radius:14px;
    padding:2.2em 2em;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
  }
 
  .tf-feature{
    display:flex;
    align-items:flex-start;
    gap:1em;
    padding:0 1.6em;
  }
 
  .tf-feature:not(:first-child){
    border-left:1px solid var(--tf-divider);
  }
 
  .tf-icon-badge{
    flex:0 0 auto;
    width:56px;
    height:56px;
    border-radius:50%;
    border:1.5px solid var(--tf-gold);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 14px rgba(217,169,78,0.25) inset, 0 0 10px rgba(217,169,78,0.15);
  }
 
  .tf-icon-badge svg{
    width:28px;
    height:28px;
    stroke:var(--tf-gold-light);
    fill:none;
    stroke-width:1.5;
    display:block;
  }
 
  .tf-feature-text{
    flex:1;
  }
 
  .tf-feature-title{
    font-size:1em;
    font-weight:700;
    color:var(--tf-heading);
    margin-bottom:0.45em;
    letter-spacing:0.01em;
    display:block;
  }
 
  .tf-feature-desc{
    font-size:0.8em;
    line-height:1.55;
    color:var(--tf-body-text);
    display:block;
  }
 
  @media (max-width:820px){
    .tf-panel{
      grid-template-columns:1fr;
      gap:1.6em;
    }
    .tf-feature{
      border-left:none !important;
      padding:0;
    }
    .tf-feature:not(:first-child){
      border-top:1px solid var(--tf-divider);
      padding-top:1.6em;
    }
  }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-13da595 */:root{
    --panel-border:rgba(212,168,83,0.3);
    --gold:#d9a94e;
    --gold-light:#f0c46e;
    --body-text:#b7b2c9;
    --divider:rgba(212,168,83,0.2);
  }
 
  *{box-sizing:border-box;margin:0;padding:0;}
 
 
  .wrap{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:2.2em 2em;
  }
 
  .panel{
    position:relative;
    background:
      radial-gradient(ellipse at 30% 0%, rgba(140,70,180,0.25) 0%, transparent 55%),
      radial-gradient(ellipse at 80% 100%, rgba(90,50,150,0.18) 0%, transparent 55%),
      linear-gradient(180deg, #150f2e 0%, #0c0a20 100%);
    border:1px solid var(--panel-border);
    border-radius:14px;
    padding:1.8em 2em;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    overflow:hidden;
  }
 
  .stat{
    display:flex;
    align-items:center;
    gap:0.9em;
    padding:0 1.4em;
  }
 
  .stat:not(:first-child){
    border-left:1px solid var(--divider);
  }
 
  .icon-badge{
    flex:0 0 auto;
    width:52px;
    height:52px;
    border-radius:50%;
    border:1.5px solid var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(217,169,78,0.06);
  }
 
  .icon-badge svg{
    width:24px;
    height:24px;
    stroke:var(--gold-light);
    fill:none;
    stroke-width:1.6;
  }
 
  .stat-number{
    font-weight:700;
    font-size:1.7em;
    color:var(--gold-light);
    line-height:1.1;
  }
 
  .stat-label{
    font-size:0.8em;
    color:var(--body-text);
    margin-top:0.15em;
    white-space:nowrap;
  }
 
  @media (max-width:820px){
    .panel{grid-template-columns:repeat(2, 1fr); row-gap:1.6em;}
    .stat:nth-child(3){border-left:none;}
    .stat:nth-child(1),.stat:nth-child(2){padding-bottom:1.2em;}
    .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--divider); padding-top:1.2em;}
  }
  @media (max-width:480px){
    .panel{grid-template-columns:1fr;}
    .stat{border-left:none !important;}
    .stat:not(:first-child){border-top:1px solid var(--divider); padding-top:1.2em;}
  }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4bdb03d *//* ============================================================
     Everything is scoped under .kz-section so these rules cannot
     leak into (or be overridden by) other sections on the page.
     No :root variables, no bare element .elementor-23 .elementor-element.elementor-element-4bdb03ds, no generic
     class names like .panel / .wrap / .card / .grid.
     ============================================================ */
 
  .kz-section{
    --kz-bg-deep:#050512;
    --kz-panel-bg:#12102b;
    --kz-panel-bg-2:#161233;
    --kz-panel-border:rgba(212,168,83,0.35);
    --kz-gold:#d9a94e;
    --kz-gold-light:#f0c46e;
    --kz-heading:#f3ead9;
    --kz-body-text:#b7b2c9;
    --kz-chart-line:rgba(216,166,80,0.75);
 
    all:initial;
    display:block;
    box-sizing:border-box;
    background:var(--kz-bg-deep);
    width:100%;
     font-family: "poppins";
  }
 
  .kz-section *{
    box-sizing:border-box;
    margin:0;
    padding:0;
  }
 
  .kz-container{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:2.2em 2em;
    display:grid;
    grid-template-columns:1.55fr 1fr;
    gap:1.4em;
  }
 
  .kz-panel{
    background:
      radial-gradient(ellipse at 20% 0%, rgba(120,70,180,0.20) 0%, transparent 55%),
      linear-gradient(180deg, var(--kz-panel-bg-2) 0%, var(--kz-panel-bg) 100%);
    border:1px solid var(--kz-panel-border);
    border-radius:14px;
    padding:2em 2.2em;
  }
 
  /* ---------- LEFT: Interactive Kundli ---------- */
  .kz-kundli-panel{
    display:grid;
    grid-template-columns:1fr 1.15fr;
    align-items:center;
    gap:1.5em;
  }
 
  .kz-kundli-title{
    font-weight:700;
    font-size:1.6em;
    color:var(--kz-gold-light);
    margin-bottom:0.5em;
    display:block;
  }
 
  .kz-kundli-desc{
    font-size:0.85em;
    color:var(--kz-body-text);
    line-height:1.55;
    margin-bottom:1.4em;
    max-width:26em;
    display:block;
  }
 
  .kz-feature-list{
    list-style:none;
    margin-bottom:1.6em;
  }
  .kz-feature-list li{
    display:flex;
    align-items:center;
    gap:0.6em;
    font-size:0.85em;
    color:#e6e1f0;
    margin-bottom:0.7em;
  }
  .kz-check{
    flex:0 0 auto;
    width:18px;
    height:18px;
    border-radius:50%;
    border:1.5px solid var(--kz-gold);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .kz-check svg{
    width:10px;
    height:10px;
    stroke:var(--kz-gold-light);
    stroke-width:2.5;
    fill:none;
  }
 
  .kz-cta-btn{
    display:inline-block;
    padding:0.75em 1.6em;
    border-radius:6px;
    background:linear-gradient(180deg,#f5cf6b,#dba832);
    color:#241505;
    font-weight:700;
    font-size:0.85em;
    border:none;
    cursor:pointer;
    line-height:normal;
  }
 
  /* kundli chart */
  .kz-chart-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .kz-chart-wrap svg{
    width:100%;
    max-width:400px;
    height:auto;
    display:block;
  }
  .kz-house-num{
    font-size:15px;
    font-weight:700;
    fill:var(--kz-gold-light);

  }
  .kz-house-planet{
    font-size:11px;
    font-weight:600;
    fill:#cdbfe8;

  }
 
  /* ---------- RIGHT: Ask ZodAI ---------- */
  .kz-zodai-title-row{
    display:flex;
    align-items:center;
    gap:0.5em;
    margin-bottom:0.35em;
  }
  .kz-zodai-title{

    font-weight:700;
    font-size:1.6em;
    color:var(--kz-gold-light);
  }
  .kz-zodai-sparkle{
    color:var(--kz-gold);
    font-size:1em;
  }
  .kz-zodai-sub{
    font-size:0.82em;
    color:var(--kz-body-text);
    margin-bottom:1.4em;
    display:flex;
    align-items:center;
    gap:0.4em;
  }
 
  .kz-faq-list{
    display:flex;
    flex-direction:column;
    gap:0.7em;
  }
  .kz-faq-item{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(212,168,83,0.25);
    border-radius:10px;
    padding:0.8em 1.1em;
    font-size:0.83em;
    color:#e6e1f0;
    cursor:pointer;
    transition:border-color 0.2s ease, background 0.2s ease;
  }
  .kz-faq-item:hover{
    border-color:rgba(212,168,83,0.6);
    background:rgba(212,168,83,0.06);
  }
 
  @media (max-width:900px){
    .kz-container{grid-template-columns:1fr;}
    .kz-kundli-panel{grid-template-columns:1fr;}
  }/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-3a986277 */font-family: "poppins";/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b427b21 *//* ============================================================
     Scoped under .wc-section — own variables, wc- prefixed classes,
     safe to drop alongside the other sections on the same page.
     ============================================================ */
   
  .wc-section{
    --wc-bg-deep:#0a0a1f;
    --wc-bg-mid:#1a0f30;
    --wc-card-bg:#150f28;
    --wc-card-border:rgba(180,130,220,0.25);
    --wc-gold:#e8a13c;
    --wc-gold-light:#f0c46e;
    --wc-heading:#f3ead9;
    --wc-body-text:#b7b2c9;
   
    all:initial;
    display:block;
    box-sizing:border-box;
    width:100%;
         font-family: "poppins";
   
  }
   
  .wc-section *{
    box-sizing:border-box;
    margin:0;
    padding:0;
 
  }
   
  .wc-container{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:3.2em 2em 3em;
   
  }
   
  /* heading */
  .wc-heading-wrap{
    text-align:center;
    margin-bottom:2.4em;
  }
   
  .wc-heading-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.9em;
    margin-bottom:0.5em;
  }
   
  .wc-divider{
    display:inline-flex;
    align-items:center;
    gap:0.3em;
    color:var(--wc-gold);
    opacity:0.85;
  }
  .wc-divider .wc-line{
    width:60px;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--wc-gold));
  }
  .wc-divider.wc-right .wc-line{
    background:linear-gradient(90deg, var(--wc-gold), transparent);
  }
  .wc-divider.wc-right{
    flex-direction:row-reverse;
  }
   
  .wc-heading{
    font-weight:700;
    font-size:2.1em;
    color:var(--wc-heading);
  }
   
  .wc-subheading{
    font-size:0.9em;
    color:var(--wc-body-text);
  }
   
  /* grid */
  .wc-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:1em;
  }
   
  .wc-card{
    background:rgba(255,255,255,0.02);
    border:1px solid var(--wc-card-border);
    border-radius:12px;
    padding:2em 1.2em 1.8em;
    text-align:center;
    transition:border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
  }
   
  .wc-card:hover{
    border-color:rgba(232,161,60,0.5);
    background:rgba(232,161,60,0.04);
    transform:translateY(-3px);
  }
   
  .wc-icon{
    font-size:2.6em;
    margin-bottom:0.7em;
    line-height:1;
    filter:drop-shadow(0 0 10px rgba(232,161,60,0.35));
  }
   
  .wc-card-title{

    font-size:1.05em;
    font-weight:700;
    color:var(--wc-gold-light);
    margin-bottom:0.6em;
  }
   
  .wc-card-desc{
    font-size:0.78em;
    color:var(--wc-body-text);
    line-height:1.55;
  }
   
  @media (max-width:1050px){
    .wc-grid{grid-template-columns:repeat(3, 1fr);}
  }
  @media (max-width:680px){
    .wc-grid{grid-template-columns:repeat(2, 1fr);}
    .wc-heading{font-size:1.5em;}
    .wc-divider .wc-line{width:32px;}
  }
  @media (max-width:420px){
    .wc-grid{grid-template-columns:1fr;}
  }/* End custom CSS */