/* =========================================================================
   Visa Consultancy homepage — styles for NATIVE Elementor widgets (page id 7)
   Scoped to .page-id-7 so it never leaks into the rest of the site.
   Only decorative pieces (marquee, stamp, collage float) rely on this CSS;
   all text/cards/images are real Elementor widgets, editable in Elementor.
   ========================================================================= */

/* Font */
.page-id-7,
.page-id-7 h1, .page-id-7 h2, .page-id-7 h3, .page-id-7 h4,
.page-id-7 p, .page-id-7 a, .page-id-7 span, .page-id-7 li {
  font-family: 'Poppins', -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Card columns (services / why-choose / info cards) ---------- */
.page-id-7 .vz-card > .elementor-widget-wrap.elementor-element-populated,
.page-id-7 .vz-card > .elementor-widget-wrap {
  background: #fff;
  border: 1px solid #eef1f7;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 10px 30px rgba(18,48,107,.06);
  transition: transform .3s ease, box-shadow .3s ease;
  height: 100%;
}
.page-id-7 .vz-card:hover > .elementor-widget-wrap.elementor-element-populated,
.page-id-7 .vz-card:hover > .elementor-widget-wrap {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(18,48,107,.14);
}

/* Icon Box tweaks */
.page-id-7 .elementor-icon-box-icon .elementor-icon {
  background: linear-gradient(135deg,#1c3f8f,#0e2350);
  color: #fff; border-radius: 13px;
}
.page-id-7 .vz-feature .elementor-icon-box-icon .elementor-icon {
  background: #eef2fb; color: #12306b;
}

/* Icon List check colour */
.page-id-7 .elementor-icon-list-icon i,
.page-id-7 .elementor-icon-list-icon svg { color: #1fbf75; fill: #1fbf75; }

/* ---------- Image collage float ---------- */
@keyframes vzFloat { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
.page-id-7 .vz-float img,
.page-id-7 .vz-float2 img,
.page-id-7 .vz-wide img {
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(18,48,107,.10);
}

.stam-center{
  display: flex !important;
  justify-content: center !important;
}


.page-id-7 .vz-float img  { animation: vzFloat 6s ease-in-out infinite; }
.page-id-7 .vz-float2 img { animation: vzFloat 7s ease-in-out infinite .8s; }
.page-id-7 .vz-wide img   { width: 82%; margin: 14px auto 0; display: block; animation: vzFloat 6.5s ease-in-out infinite .4s; }

/* ---------- Year badge (icon-box) ---------- */
.page-id-7 .vz-yearbadge .elementor-icon-box-wrapper {
  background: linear-gradient(135deg,#17357a,#0d1f47);
  border-radius: 14px; padding: 16px 22px; text-align: left;
  box-shadow: 0 18px 45px rgba(18,48,107,.18); display: block;
}
.page-id-7 .vz-yearbadge .elementor-icon-box-title { color:#fff; font-size:30px; margin:0; line-height:1; }
.page-id-7 .vz-yearbadge .elementor-icon-box-description { color:rgba(255,255,255,.82); font-size:12px; margin-top:4px; }

/* ---------- Rotating circular stamp ---------- */
@keyframes vzSpin { to { transform: rotate(360deg) } }
.vz-stamp { position: relative; width: 120px; height: 120px; margin-top: 10px; }
.vz-stamp svg { width: 100%; height: 100%; animation: vzSpin 18s linear infinite; }
.vz-stamp .vz-stamp-ico { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#12306b; font-size:24px; }

/* ---------- Marquee ribbon ---------- */
@keyframes vzMarquee { from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.vz-marquee { background: linear-gradient(135deg, color-mix(in srgb, var(--e-global-color-secondary) 85%, #ffffff), var(--e-global-color-secondary)); transform: rotate(-2.2deg); padding: 16px 0; overflow: hidden; box-shadow: 0 18px 45px rgba(18,48,107,.12); }
.vz-marquee .track { display: inline-flex; white-space: nowrap; animation: vzMarquee 24s linear infinite; }
.vz-marquee .track span { color:#fff; font-weight:600; font-size:17px; padding:0 26px; display:inline-flex; align-items:center; gap:26px; opacity:.95; }
.vz-marquee .track span i { color: var(--e-global-color-primary); opacity:.9; }

/* Prevent the full-bleed marquee (100vw) from adding a horizontal scrollbar. */
html { overflow-x: hidden; }

/* ---------- X-cross marquee (two ribbons crossing) ---------- */
.vz-cross { position: relative; width: 100vw; left: 50%; margin-left: -50vw; max-width: 100vw; height: 210px; overflow: hidden; }
.vz-cross .vz-marquee { position: absolute; left: -12%; width: 124%; top: 50%; margin-top: -27px; }
.vz-cross .vz-m1 { transform: rotate(-4deg); }
.vz-cross .vz-m2 { transform: rotate(4deg); }
.vz-cross .vz-m2 .track { animation-direction: reverse; }

/* ---------- Testimonial cards ---------- */
.page-id-7 .vz-quote .elementor-testimonial-wrapper {
  background:#fff; border:1px solid #eef1f7; border-radius:16px; padding:30px 28px;
  box-shadow:0 10px 30px rgba(18,48,107,.06);
}
.page-id-7 .vz-quote .elementor-testimonial-content { color:#5c6577; font-size:14.5px; line-height:1.8; }
.page-id-7 .vz-quote .elementor-testimonial-name { color:#0f2350; font-weight:600; }
.page-id-7 .vz-quote .elementor-testimonial-job { color:#8a94a3; }

/* ---------- Journey overlap ---------- */
.page-id-7 .vz-journey-media img { border-radius:16px; box-shadow:0 18px 45px rgba(18,48,107,.10); }
.page-id-7 .vz-journey-back { margin-right:22%; }
.page-id-7 .vz-journey-front { margin-top:-70px; margin-left:34%; border:6px solid #fff; border-radius:18px; }

/* ---------- Testimonial dots ---------- */
.vz-dots { display:flex; gap:8px; justify-content:center; margin-top:24px; }
.vz-dots i { width:9px; height:9px; border-radius:50%; background:#c8d2e8; display:inline-block; }
.vz-dots i.on { background:#12306b; width:26px; border-radius:6px; }

/* Headings colour helper */
.page-id-7 .vz-accent { color:#2b53d6; }

@media (max-width:600px){
  .page-id-7 .vz-journey-front { margin-left:0; margin-top:16px; }
}