.elementor-161614 .elementor-element.elementor-element-e235f08{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-161614 .elementor-element.elementor-element-e235f08::before, .elementor-161614 .elementor-element.elementor-element-e235f08 > .elementor-background-video-container::before, .elementor-161614 .elementor-element.elementor-element-e235f08 > .e-con-inner > .elementor-background-video-container::before, .elementor-161614 .elementor-element.elementor-element-e235f08 > .elementor-background-slideshow::before, .elementor-161614 .elementor-element.elementor-element-e235f08 > .e-con-inner > .elementor-background-slideshow::before, .elementor-161614 .elementor-element.elementor-element-e235f08 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}@media(min-width:768px){.elementor-161614 .elementor-element.elementor-element-e235f08{--width:100%;}}/* Start custom CSS */body {
  background:
    radial-gradient(circle at 30% 40%, rgba(0,150,255,0.25), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(0,50,120,0.4), transparent 50%),
    #020b14;
}

.budget-bar {
  width: 100%;
  height: 60px;
  background: rgba(0, 80, 120, 0.4);
  border-radius: 40px;
  overflow: hidden;
  position: relative;
}

.budget-fill {
  width: 0%;
  height: 100%;
  background: #fff;
  border-radius: 40px;
}

.budget-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  color: white;
}

.left span,
.right span {
  font-size: 24px;
  font-weight: bold;
}

.budget-fill {
  position: relative;
  height: 100%;
  width: 0%;
  background: #fff;
  overflow: hidden;
  border-radius: 40px;
}

.budget-fill::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15),
    transparent 40%,
    transparent 60%,
    rgba(0,0,0,0.2)
  );

  pointer-events: none;
}

.budget-fill::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.4),
    transparent
  );

  pointer-events: none;
}


/* ===== GLASS CONTAINER ===== */
.budget-bar {
  width: 100%;
  height: 70px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;

  /* TRUE GLASS BASE */
  background: rgba(20, 60, 90, 0.25);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);

  /* subtle noise (NOT dominant) */
  background-image: url("https://wp-staging.idprojectdev.com/wp-content/uploads/2026/05/bedge-grunge.png");
  background-blend-mode: overlay;

  /* border = light edge */
  border: 1px solid rgba(255,255,255,0.25);

  /* depth */
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.2),
    inset 0 -6px 12px rgba(0,0,0,0.25),
    0 0 25px rgba(0,150,255,0.12);
}

.budget-bar::before {
  content: "";
  position: absolute;
  inset: 0;

  background: inherit;
  filter: blur(12px);
  opacity: 0.25;

  pointer-events: none;
}

.budget-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.5),
    rgba(255,255,255,0.15) 30%,
    transparent 60%
  );

  pointer-events: none;
}

/* ===== PROGRESS FILL ===== */
.budget-fill {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  overflow: hidden;

  /* BLUE GLASS BASE (subtle, not loud) */
  background: linear-gradient(
    to bottom,
    rgba(113,143,193,0.9),   /* #718FC1 */
    rgba(4,36,65,0.95)       /* #042441 */
  );

  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.4),
    inset 0 -6px 12px rgba(0,0,0,0.3),
    0 0 14px rgba(0,120,255,0.25);
}

/* ===== GLASS LIGHT REFLECTION ===== */
.budget-fill::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.6),
    rgba(255,255,255,0.15) 40%,
    transparent 60%
  );

  pointer-events: none;
}

/* ===== INNER DEPTH SHADOW ===== */
.budget-fill::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15),
    transparent 40%,
    transparent 60%,
    rgba(0,0,0,0.25)
  );

  pointer-events: none;
}

/* ===== BARBER STRIPES (DARK, PREMIUM) ===== */
/*.barber-stripes {*/
/*  position: absolute;*/
/*  inset: 0;*/

/*  background-image: repeating-linear-gradient(*/
/*    45deg,*/
/*    #718FC1 0px,*/
/*    #718FC1 12px,*/
/*    #042441 12px,*/
/*    #042441 28px*/
/*  );*/

  /* KEY FIXES */
  /*background-size: auto;     */
  /*background-repeat: repeat; */
/*  mix-blend-mode: soft-light;*/
/*  opacity: 0.5;*/

/*  filter: blur(0.2px);*/
/*}*/

.stripe-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  mix-blend-mode: soft-light;
  opacity: 0.6;
}

.section-bg {
  background: 
    radial-gradient(circle at 30% 40%, rgba(0,150,255,0.2), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(0,50,120,0.4), transparent 50%),
    #020b14;
}


/*Card Finance Texture*/

[data-id="a243822"] {
  background: rgba(10, 30, 55, 0.45) !important;
  backdrop-filter: blur(20px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 24px !important;
  box-shadow:
    inset 0 1px 0px rgba(255,255,255,0.15),
    inset 0 -1px 0px rgba(0,0,0,0.3),
    0 0 40px rgba(0,100,200,0.1) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 32px 36px !important;
}

/* LAYER 1 — the grain (keep your working one, just tweak blend) */
[data-id="a243822"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.15' numOctaves='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 400px 400px;
  background-repeat: repeat;

  opacity: 0.2;
  mix-blend-mode: soft-light; /* soft-light = depth inside, not painted on */
}

/* LAYER 2 — light refraction bloom (the milky glow real frosted glass has) */
[data-id="a243822"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;

  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 75% 80%, rgba(255,255,255,0.04) 0%, transparent 50%),
    linear-gradient(160deg, rgba(255,255,255,0.09) 0%, transparent 40%, rgba(0,0,0,0.08) 100%);
}

[data-id="a243822"] > * {
  position: relative;
  z-index: 1;
}

[data-id="a243822"] h2 {
  color: #ffffff !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
}

[data-id="a243822"] p {
  color: rgba(255,255,255,0.6) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}/* End custom CSS */