.elementor-6516 .elementor-element.elementor-element-7998ab16{--display:flex;--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;--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-6516 .elementor-element.elementor-element-55ba7da3{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-6516 .elementor-element.elementor-element-5300b790{--display:flex;}.elementor-6516 .elementor-element.elementor-element-16a29d6{--display:flex;--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;--padding-top:30px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-6516 .elementor-element.elementor-element-a03783a{padding:10px 0px 10px 0px;text-align:center;}.elementor-6516 .elementor-element.elementor-element-a03783a .elementor-heading-title{font-family:"Carme", Sans-serif;font-size:50px;font-weight:600;color:#000000;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-6516 .elementor-element.elementor-element-e27cca4{--divider-border-style:solid;--divider-color:#56007B;--divider-border-width:3px;margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-6516 .elementor-element.elementor-element-e27cca4 .elementor-divider-separator{width:20%;margin:0 auto;margin-center:0;}.elementor-6516 .elementor-element.elementor-element-e27cca4 .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-6516 .elementor-element.elementor-element-e27cca4.elementor-view-stacked .elementor-icon{background-color:#56007B;}.elementor-6516 .elementor-element.elementor-element-e27cca4.elementor-view-framed .elementor-icon, .elementor-6516 .elementor-element.elementor-element-e27cca4.elementor-view-default .elementor-icon{color:#56007B;border-color:#56007B;}.elementor-6516 .elementor-element.elementor-element-e27cca4.elementor-view-framed .elementor-icon, .elementor-6516 .elementor-element.elementor-element-e27cca4.elementor-view-default .elementor-icon svg{fill:#56007B;}.elementor-6516 .elementor-element.elementor-element-e87ff8b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-6516 .elementor-element.elementor-element-be4244c{--display:flex;--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;--padding-top:080px;--padding-bottom:0080px;--padding-left:0px;--padding-right:0px;}.elementor-6516 .elementor-element.elementor-element-be4244c:not(.elementor-motion-effects-element-type-background), .elementor-6516 .elementor-element.elementor-element-be4244c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-6516 .elementor-element.elementor-element-38c681b4{--display:flex;--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6516 .elementor-element.elementor-element-3bab4d7e{width:100%;max-width:100%;background-color:transparent;padding:0px 0px 0px 0px;background-image:linear-gradient(180deg, #000000 0%, #000000 100%);}.elementor-6516 .elementor-element.elementor-element-3bab4d7e:hover{background-color:transparent;background-image:linear-gradient(180deg, #000000 0%, #000000 100%);}.elementor-6516 .elementor-element.elementor-element-3bab4d7e.ha-has-bg-overlay:hover::before{transition:background 0.3s;}.elementor-6516 .elementor-element.elementor-element-6aa504fc{--display:flex;--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;--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-6516 .elementor-element.elementor-element-72bfe345{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-6516 .elementor-element.elementor-element-f394480{--display:flex;--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-6516 .elementor-element.elementor-element-f394480:not(.elementor-motion-effects-element-type-background), .elementor-6516 .elementor-element.elementor-element-f394480 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #56007B 0%, #000000 100%);}.elementor-6516 .elementor-element.elementor-element-13c9a89{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}@media(max-width:767px){.elementor-6516 .elementor-element.elementor-element-a03783a .elementor-heading-title{font-size:40px;}}/* Start custom CSS for html, class: .elementor-element-e87ff8b *//* =========================
   CV COLLAGE CAROUSEL – FINAL (CLEAN + BACKGROUND WORKS)
   ========================= */

.cv-collage-carousel,
.cv-collage-carousel * {
  box-sizing: border-box;
}

/* Section */
.cv-collage-carousel {
  position: relative;
  padding: 5px 0 100px;
  max-width: 100vw;
  overflow: hidden;
  background:
    radial-gradient(1200px 400px at 15% 30%, rgba(120, 90, 255, 0.10), transparent 60%),
    radial-gradient(900px 300px at 85% 70%, rgba(0, 200, 255, 0.08), transparent 60%),
    linear-gradient(180deg, #f4f1eb 0%, #efece6 100%);
}

/* Floating subtle shapes */
.cv-collage-carousel::before,
.cv-collage-carousel::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.cv-collage-carousel::before {
  top: -140px;
  left: -140px;
  background: rgba(120, 90, 255, 0.18);
}

.cv-collage-carousel::after {
  bottom: -160px;
  right: -160px;
  background: rgba(0, 200, 255, 0.16);
}

/* Viewport */
.cv-viewport {
  width: 100%;
  overflow: visible;
  position: relative;
  z-index: 2;
}

/* Track */
.cv-track {
  display: flex;
  align-items: center;
  gap: 160px;
  padding: 40px 8vw;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
}

/* Stack */
.cv-stack {
  flex: 0 0 auto;
  position: relative;
  overflow: visible;
  transition: transform 0.45s cubic-bezier(.2,.9,.2,1), box-shadow 0.45s ease;
}

/* Single Image */
.cv-stack.single img {
  width: 520px;
  height: 340px;
  object-fit: cover;
  display: block;
  box-shadow: 0 25px 60px rgba(0,0,0,.25);
}

/* Collage container */
.cv-stack.collage {
  width: 520px;
  height: 340px;
}

/* Cards */
.cv-card {
  position: absolute;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,.25);
  transition: transform .45s cubic-bezier(.2,.9,.2,1), box-shadow .45s ease;
}

/* Shapes */
.cv-card.rect {
  width: 520px;
  height: 340px;
  left: 0;
  top: 0;
}

.cv-card.square {
  width: 170px;
  height: 170px;
}

.top-right    { top: -18px; right: -36px; }
.bottom-left  { bottom: -18px; left: -36px; }
.bottom-right { bottom: -18px; right: -36px; }

/* Images */
.cv-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Focus pop */
.cv-stack.is-active {
  transform: translateY(-18px) scale(1.06);
  z-index: 5;
}

.cv-stack.is-active img,
.cv-stack.is-active .cv-card {
  box-shadow: 0 50px 100px rgba(0,0,0,.38);
}

/* ===== Dragger ===== */
.cv-dragger {
  margin-top: 90px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 3;
}

.cv-drag-line {
  width: 70%;
  height: 2px;
  position: relative;
  background: repeating-linear-gradient(
    to right,
    rgba(0,0,0,.5),
    rgba(0,0,0,.5) 2px,
    transparent 2px,
    transparent 10px
  );
}

.cv-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: rgba(0,0,0,.8);
}

/* Knob */
.cv-knob {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.6);
  background: #efece6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 5;
}

.cv-knob.dragging {
  width: 90px;
  height: 90px;
  cursor: grabbing;
}

/* Safety */
html, body {
  overflow-x: hidden !important;
}
/* =========================
   CV COLLAGE – ANIMATED BACKGROUND (PREMIUM)
   ========================= */

.cv-collage-carousel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f4f1eb 0%, #efece6 100%);
}

/* Animated gradient waves */
.cv-collage-carousel::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(700px 420px at 20% 40%, rgba(120, 90, 255, 0.25), transparent 60%),
    radial-gradient(600px 380px at 80% 60%, rgba(0, 200, 255, 0.22), transparent 60%),
    radial-gradient(500px 300px at 50% 20%, rgba(255, 120, 0, 0.18), transparent 60%);
  filter: blur(60px);
  animation: cv-bg-move 18s linear infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.cv-collage-carousel::after {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(800px 500px at 30% 70%, rgba(0, 200, 255, 0.15), transparent 60%),
    radial-gradient(600px 420px at 70% 30%, rgba(120, 90, 255, 0.18), transparent 60%);
  filter: blur(80px);
  animation: cv-bg-move-2 26s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

/* Motion keyframes */
@keyframes cv-bg-move {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-120px, 80px, 0) scale(1.05); }
  100% { transform: translate3d(120px, -60px, 0) scale(1.1); }
}

@keyframes cv-bg-move-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(140px, -100px, 0) scale(1.06); }
  100% { transform: translate3d(-120px, 80px, 0) scale(1.12); }
}

/* Keep content above animation */
.cv-collage-carousel > * {
  position: relative;
  z-index: 2;
}
/* =========================
   FORCE ANIMATED BACKGROUND (ELEMENTOR SAFE)
   ========================= */

.elementor-section.cv-anim-bg {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #f4f1eb 0%, #efece6 100%) !important;
}

.elementor-section.cv-anim-bg::before,
.elementor-section.cv-anim-bg::after {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  z-index: 0;
  filter: blur(70px);
  animation: cv-bg-float 18s ease-in-out infinite alternate;
}

.elementor-section.cv-anim-bg::before {
  background:
    radial-gradient(700px 420px at 20% 40%, rgba(120, 90, 255, 0.35), transparent 60%),
    radial-gradient(600px 380px at 80% 60%, rgba(0, 200, 255, 0.28), transparent 60%);
}

.elementor-section.cv-anim-bg::after {
  background:
    radial-gradient(800px 500px at 30% 70%, rgba(255, 120, 0, 0.18), transparent 60%),
    radial-gradient(600px 420px at 70% 30%, rgba(120, 90, 255, 0.22), transparent 60%);
  animation-duration: 28s;
}

@keyframes cv-bg-float {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-140px, 90px, 0) scale(1.08); }
  100% { transform: translate3d(140px, -90px, 0) scale(1.15); }
}

/* Keep your content above animation */
.elementor-section.cv-anim-bg .cv-viewport,
.elementor-section.cv-anim-bg .cv-dragger {
  position: relative;
  z-index: 2;
}
/* =========================
   FORCE CV COLLAGE SECTION → WHITE BACKGROUND
   ========================= */

/* Main section background */
.cv-collage-carousel,
.elementor-section.cv-anim-bg {
  background: #ffffff !important;   /* PURE WHITE */
}

/* Kill animated gradient layers */
.cv-collage-carousel::before,
.cv-collage-carousel::after,
.elementor-section.cv-anim-bg::before,
.elementor-section.cv-anim-bg::after {
  content: none !important;
  animation: none !important;
  filter: none !important;
  background: none !important;
}

/* Ensure content still above */
.cv-collage-carousel > *,
.elementor-section.cv-anim-bg > * {
  position: relative;
  z-index: 1;
}
/* =========================
   BIGGER ARROW BUTTON (DRAG KNOB)
   ========================= */

.cv-knob {
  width: 80px !important;
  height: 80px !important;
  border-width: 2px;
}

.cv-knob svg,
.cv-knob i,
.cv-knob span {
  font-size: 34px !important;
  transform: scale(1.3);
}

/* Bigger when dragging */
.cv-knob.dragging {
  width: 110px !important;
  height: 110px !important;
}

/* If arrow is pseudo-element */
.cv-knob::before {
  font-size: 34px !important;
}
/* =========================
   ORBITING HOVER TEXT AROUND ARROW
   ========================= */

.cv-knob {
  position: relative !important;
}

/* Floating text */
.cv-knob::after {
  content: "drag to explore";
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(0deg) translateX(64px);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #56007b;
  opacity: 0.85;
  pointer-events: none;
  animation: cv-orbit-text 6s linear infinite;
}

/* Animation */
@keyframes cv-orbit-text {
  from {
    transform: translate(-50%, -50%) rotate(0deg) translateX(64px);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg) translateX(64px);
  }
}

/* Bigger orbit when knob is big */
.cv-knob.dragging::after {
  transform: translate(-50%, -50%) rotate(0deg) translateX(92px);
}
/* =========================
   HANGING TEXT EFFECT (BLACK + FUNKY, NO ROTATION)
   ========================= */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700&display=swap');

.cv-knob {
  position: relative !important;
}

/* Hanging text */
.cv-knob::after {
  content: "drag to explore";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 14px;
  font-family: "Unbounded", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #000;                 /* BLACK */
  opacity: 0.9;
  pointer-events: none;

  /* Hanging animation */
  transform-origin: top center;
  animation: cv-hang 2.6s ease-in-out infinite;
}

/* Hanging sway animation */
@keyframes cv-hang {
  0%   { transform: translateX(-50%) rotate(-4deg); }
  50%  { transform: translateX(-50%) rotate(4deg); }
  100% { transform: translateX(-50%) rotate(-4deg); }
}

/* Slightly more swing when dragging */
.cv-knob.dragging::after {
  animation-duration: 1.6s;
}
.cv-knob::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 10px;
  background: rgba(0,0,0,0.4);
  transform: translateX(-50%);
}
/* =========================
   FIX GAP IN HANGING TEXT
   ========================= */

.cv-knob::after {
  line-height: 1.1 !important;      /* tighter vertical spacing */
  letter-spacing: 1px !important;   /* reduce wide gaps */
  margin-top: 6px !important;       /* bring text closer to knob */
  text-align: center;
}
.cv-knob::after {
  white-space: pre-line;   /* keep line breaks */
  line-height: 1.05 !important;
  letter-spacing: 0.8px !important;
  margin-top: 4px !important;
}
@import url('https://fonts.googleapis.com/css2?family=Rubik+Dirt&display=swap');

.cv-knob::after {
  font-family: "Rubik Dirt", system-ui, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  line-height: 1.05 !important;
}
/* =========================
   FASTER + MORE HANGING SWAY
   ========================= */

.cv-knob::after {
  animation: cv-hang-wild 1.2s ease-in-out infinite !important; /* faster */
  transform-origin: top center;
}

/* Bigger swing */
@keyframes cv-hang-wild {
  0%   { transform: translateX(-50%) rotate(-10deg); }
  50%  { transform: translateX(-50%) rotate(10deg); }
  100% { transform: translateX(-50%) rotate(-10deg); }
}

/* Extra energy when dragging */
.cv-knob.dragging::after {
  animation-duration: 0.7s !important; /* even faster */
}
.cv-knob::after {
  animation: cv-hang-wild 1.2s ease-in-out infinite, cv-bounce 1.6s ease-in-out infinite !important;
}

@keyframes cv-bounce {
  0%, 100% { margin-top: 6px; }
  50% { margin-top: 2px; }
}
/* =========================
   FORCE HANGING TEXT TO 2 LINES MAX
   ========================= */

.cv-knob::after {
  content:"DRAG Mee";   /* forces 2 lines */
  white-space: pre-line;        /* respects \n */
  max-width: 120px;             /* prevents 3-line wrap */
  text-align: center;
  line-height: 1.05 !important; /* tight spacing */
  letter-spacing: 1px !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-11a3f0d */*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

.perks-vx-wrap{max-width:1200px;padding:0 40px;margin:0 auto;position:relative;z-index:1;}

.perks-vx-hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:60px;opacity:0;animation:perks-up .8s cubic-bezier(.22,1,.36,1) .05s forwards;}

@keyframes perks-up{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}

.perks-vx-hdr-l .perks-vx-tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#b96de6;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;}

.perks-vx-tag-dot{width:6px;height:6px;border-radius:50%;background:#b96de6;animation:perks-pulse 2.2s ease infinite;}

@keyframes perks-pulse{0%,100%{box-shadow:0 0 0 0 rgba(185,109,230,.7);}50%{box-shadow:0 0 0 5px rgba(185,109,230,0);}}

.perks-vx-h1{font-family:'Nunito Sans',sans-serif;font-size:clamp(28px,3.8vw,48px);font-weight:800;color:#fff;letter-spacing:-1px;line-height:1.08;}

.perks-vx-h1 em{font-style:normal;color:#c87cf0;}

.perks-vx-hdr-r{font-size:13.5px;color:#fff;font-weight:400;line-height:1.8;max-width:270px;flex-shrink:0;padding-bottom:4px;border-left:2px solid rgba(185,109,230,0.7);padding-left:16px;}

.perks-vx-rows{display:flex;flex-direction:column;gap:0;}

.perks-vx-row{position:relative;display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:28px;padding:30px 24px 30px 0;border-top:1px solid rgba(185,109,230,0.25);overflow:hidden;cursor:default;opacity:0;animation:perks-up .7s cubic-bezier(.22,1,.36,1) forwards;border-radius:4px;transition:background .4s;}

.perks-vx-row:last-child{border-bottom:1px solid rgba(185,109,230,0.25);}
.perks-vx-row:nth-child(1){animation-delay:.15s;}
.perks-vx-row:nth-child(2){animation-delay:.25s;}
.perks-vx-row:nth-child(3){animation-delay:.35s;}
.perks-vx-row:nth-child(4){animation-delay:.45s;}

.perks-vx-row::before{content:'';position:absolute;left:0;top:0;width:3px;height:100%;transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.34,1.2,.64,1);background:linear-gradient(180deg,#c87cf0,#56007b);}

.perks-vx-row:hover::before{transform:scaleY(1);}
.perks-vx-row:hover{background:rgba(86,0,123,0.07);}

.perks-vx-rnum{font-family:'Nunito Sans',sans-serif;font-size:32px;font-weight:800;letter-spacing:-2px;color:rgba(255,255,255,0.15);transition:color .4s ease;position:relative;z-index:1;user-select:none;text-align:center;}

.perks-vx-row:hover .perks-vx-rnum{color:rgba(200,124,240,0.45);}

.perks-vx-rmain{position:relative;z-index:1;}

.perks-vx-rtitle{font-family:'Nunito Sans',sans-serif;font-size:18px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:6px;transition:color .35s;}

.perks-vx-row:hover .perks-vx-rtitle{color:#d49cf5;}

.perks-vx-rdesc{font-size:13px;color:#e1e1e1;line-height:1.7;font-weight:400;max-width:400px;transition:color .35s;}

.perks-vx-row:hover .perks-vx-rdesc{color:rgba(237,233,255,0.90);}

.perks-vx-rtags{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1;justify-content:flex-end;}

.perks-vx-rtag{font-size:11px;font-weight:600;padding:5px 13px;border-radius:100px;background:rgba(86,0,123,0.18);border:1px solid rgba(185,109,230,0.45);color:#fff;transition:background .35s,border-color .35s,color .35s;white-space:nowrap;letter-spacing:.01em;}

.perks-vx-row:hover .perks-vx-rtag{background:rgba(86,0,123,0.30);border-color:rgba(200,124,240,0.70);color:#ffffff;}

@media(max-width:860px){
.perks-vx-wrap{padding:0 28px;}
.perks-vx-row{grid-template-columns:56px 1fr;grid-template-rows:auto auto;gap:20px;padding:26px 16px 26px 0;}
.perks-vx-rtags{grid-column:1/-1;justify-content:flex-start;padding-top:2px;}
.perks-vx-rdesc{max-width:100%;}
}

@media(max-width:720px){
.perks-vx-wrap{padding:0 20px;}
.perks-vx-hdr{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:36px;}
.perks-vx-hdr-r{max-width:100%;border-left:none;padding-left:0;border-top:1px solid rgba(185,109,230,0.35);padding-top:14px;font-size:13px;}
.perks-vx-row{grid-template-columns:44px 1fr;gap:16px;padding:22px 12px 22px 0;}
.perks-vx-rtags{gap:5px;}
.perks-vx-rnum{font-size:24px;}
.perks-vx-rtitle{font-size:16px;}
.perks-vx-rdesc{font-size:13px;max-width:100%;}
}

@media(max-width:480px){
.perks-vx-wrap{padding:0 16px;}
.perks-vx-hdr{gap:14px;margin-bottom:28px;}
.perks-vx-h1{font-size:24px;letter-spacing:-.5px;}
.perks-vx-hdr-r{font-size:12.5px;line-height:1.75;}
.perks-vx-row{grid-template-columns:38px 1fr;gap:12px;padding:18px 8px 18px 0;}
.perks-vx-rnum{font-size:20px;letter-spacing:-1px;}
.perks-vx-rtitle{font-size:15px;margin-bottom:4px;}
.perks-vx-rdesc{font-size:12px;line-height:1.65;}
.perks-vx-rtags{gap:4px;padding-top:2px;}
.perks-vx-rtag{font-size:10.5px;padding:4px 10px;}
}

@media(max-width:360px){
.perks-vx-wrap{padding:0 12px;}
.perks-vx-h1{font-size:21px;}
.perks-vx-rtitle{font-size:14px;}
.perks-vx-rdesc{font-size:11.5px;}
.perks-vx-rtag{font-size:10px;padding:3px 8px;}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3bab4d7e *//* FULL-WIDTH HOVER SECTION */
.hover-steps {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 80vh; /* fills most of screen */
  overflow: hidden;
  background: #0b0b12;
  border-top: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.hover-step {
  flex: 1;
  padding: 48px;
  transition: all 0.5s ease;
  color: #fff;
  border-right: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hover-step:last-child {
  border-right: none;
}

.hover-step h3 {
  font-size: 26px;
  margin-bottom: 12px;
}

.hover-step p {
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.35s ease;
  font-size: 15px;
  line-height: 1.6;
  max-width: 360px;
}

.hover-step:hover {
  flex: 3;
  background: radial-gradient(circle at top left, rgba(107,45,189,0.25), transparent 65%);
}

.hover-step:hover p {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile */
@media (max-width: 768px) {
  .hover-steps {
    flex-direction: column;
    min-height: auto;
  }
  .hover-step {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
}
/* FULL-WIDTH HOVER SECTION – COMPACT VERSION */
.hover-steps {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 42vh; /* half-ish height */
  max-height: 60vh; /* prevents too tall on large screens */
  overflow: hidden;
  background: #0b0b12;
  border-top: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.hover-step {
  flex: 1;
  padding: 32px 36px; /* reduced padding = cleaner, smaller boxes */
  transition: all 0.5s ease;
  color: #fff;
  border-right: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* align headings consistently */
}

.hover-step:last-child {
  border-right: none;
}

.hover-step h3 {
  font-size: 22px;
  margin: 0 0 6px 0;  /* consistent top spacing */
}

.hover-step p {
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.35s ease;
  font-size: 14px;
  line-height: 1.5;
  max-width: 360px;
}

.hover-step:hover {
  flex: 3;
  background: radial-gradient(circle at top left, rgba(107,45,189,0.25), transparent 65%);
}

.hover-step:hover p {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile */
@media (max-width: 768px) {
  .hover-steps {
    flex-direction: column;
    min-height: auto;
    max-height: none;
  }
  .hover-step {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
}
/* FIX: STEP overlay visibility + containment (no design change) */
.hover-step {
  position: relative;
  overflow: hidden; /* prevent STEP text bleeding into next panel */
}

.hover-step .step-overlay {
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(72px, 9vw, 120px);
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.14); /* more visible */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
}

.hover-step:hover .step-overlay {
  opacity: 1;
}
/* Make STEP watermark more visible (no layout/animation change) */
.hover-step .step-overlay {
  color: rgba(255, 255, 255, 0.28); /* bump visibility */
  text-shadow: 0 0 24px rgba(180, 130, 255, 0.25); /* subtle glow so it reads on gradient */
}
/* Increase description text size in hover boxes */
.hover-step p:last-of-type {
  font-size: 18px;      /* increase size */
  line-height: 1.75;   /* nicer readability */
}
/* Prevent text cropping without scrollbars */
.hover-steps {
  min-height: 45vh; /* your chosen height */
}

.hover-step:hover {
  padding-bottom: 56px; /* extra space for bigger text */
}
/* Make hiring process section shorter */
.hover-steps {
  min-height: auto !important;   /* removes 70vh feel */
  padding: 40px 0 !important;    /* reduces top/bottom space */
}

/* Reduce each card height slightly */
.hover-step {
  padding: 32px !important;      /* was 48px */
}

/* Reduce SVG spacing */
.hover-step > div[style*="margin: 72px"] {
  margin: 40px 0 32px 0 !important;
}

/* Mobile & Tablet tighter spacing */
@media (max-width: 1024px) {
  .hover-steps {
    padding: 24px 0 !important;
  }

  .hover-step {
    padding: 24px !important;
  }

  .hover-step > div[style*="margin: 72px"] {
    margin: 28px 0 24px 0 !important;
  }
}
/* Make the whole hiring process ~50% shorter without breaking layout */
.hover-steps {
  min-height: 80vh !important;     /* remove any vh height */
  padding: 16px 0 !important;      /* half the vertical padding */
}

/* Shrink each column height */
.hover-step {
  padding: 24px !important;        /* was ~48px */
}

/* Reduce icon block spacing */
.hover-step > div[style*="margin: 72px"] {
  margin: 28px 0 24px 0 !important; /* half of original */
}

/* Slightly scale down the SVG icons (keeps proportions) */
.hover-step svg {
  transform: scale(0.85);
  transform-origin: center;
}

/* Tighten heading spacing just a bit */
.hiring-process-wrapper h2 {
  margin-bottom: 20px !important;  /* was 40px */
}

/* Tablet */
@media (max-width: 1024px) {
  .hover-steps { padding: 12px 0 !important; }
  .hover-step { padding: 20px !important; }
  .hover-step > div[style*="margin: 72px"] { margin: 22px 0 20px 0 !important; }
}

/* Mobile */
@media (max-width: 767px) {
  .hover-steps { padding: 8px 0 !important; }
  .hover-step { padding: 16px !important; }
  .hover-step > div[style*="margin: 72px"] { margin: 18px 0 16px 0 !important; }
  .hover-step svg { transform: scale(0.75); }
}
/* Move the hiring section heading slightly to the right */
.hiring-process-wrapper h2 {
  padding-left: 40px !important;  /* adjust this value if needed */
}
/* Make STEP labels big and fill the empty top space */
.step-title .step-label {
  display: block;
  font-size: clamp(28px, 3.5vw, 42px);  /* bigger STEP text */
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-top: 12px;                    /* push it down to fill gap */
  margin-bottom: 8px;                 /* space before subtitle */
}

/* When hovering, the name should take same space so layout doesn’t jump */
.step-title .step-name {
  display: block;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  letter-spacing: 0.5px;
}
/* Push the Thoughtful hiring headline to the right */
.hiring-process-wrapper h2 {
  text-align: center;
  padding-top: 50px;
}
/* ===========================
   FORCE REMOVE GAP ABOVE THIS SECTION (ELEMENTOR - GUARANTEED)
   =========================== */

/* 1) Remove spacing from the Elementor section that contains your hiring block */
.elementor-section,
.elementor-top-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 2) Remove any spacer widget above the section */
.elementor-widget-spacer {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) Ensure the hiring block itself has no top space */
.hiring-process-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 4) Keep your full-width breakout intact */
.hiring-process-wrapper {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* 5) No horizontal scroll */
html, body {
  overflow-x: hidden !important;
}
/* ===========================
   FULL-WIDTH FIX (SAFE – NO OVERLAP / NO GAP)
   =========================== */

.hiring-process-wrapper {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;  /* safer than -50vw margins */
  margin: 0 !important;
  padding: 0 !important;
}

.hiring-process-wrapper .hover-steps {
  width: 100% !important;
  max-width: 100% !important;
}

/* Prevent horizontal scroll */
html, body {
  overflow-x: hidden !important;
}
/* Give the heading area the same black background as the steps */
.hiring-process-wrapper {
  background: #0b0b12 !important;
}
.hiring-process-wrapper {
  background: linear-gradient(180deg, #0b0b12 0%, #0b0b12 60%, rgba(11,11,18,0.96) 100%) !important;
}/* End custom CSS */