/* ==========================================================================
   VigourSoft – responsive & alignment fixes (2026-10-03)
   Loaded last on every page (and in the Elementor editor preview), after
   structure-tuned.css and vs-case-studies.css. Layout only: no text, colour
   or content changes. Dark mode keeps working because nothing here sets colours.

   Breakpoints match the theme:  desktop ≥1025 · tablet 768–1024 · phone ≤767
   (two-column blocks stack at ≤980).

   To undo everything: remove vs_enqueue_responsive_fixes() in functions.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero boxes – same inner padding on every page
      desktop 36px · tablet 36px sides · phone 18px sides
   -------------------------------------------------------------------------- */
html body.page .elementor .elementor-top-section.elementor-element:is(.vs-hero-box, .vs-gcc-hero) {
  padding-left: 36px !important;
  padding-right: 36px !important;
}
@media (max-width: 767px) {
  html body.page .elementor .elementor-top-section.elementor-element:is(.vs-hero-box, .vs-gcc-hero) {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* When a hero stacks (≤980px) the side panel sat 60–75px under the text.
   Bring it to the same ~24px rhythm used inside cards. */
@media (max-width: 980px) {
  html body .elementor .elementor-element:is(.vs-hero-box, .vs-gcc-hero) > .elementor-container {
    row-gap: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   2. Section headings (heading + side note). Once they stack (≤980px) the
      note sat 44px under the heading; same 12px as every other heading block.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  html body .elementor .elementor-element.vs-heading-row > .elementor-container {
    row-gap: 12px !important;
  }
  html body .elementor .elementor-element.vs-heading-row > .elementor-container > .elementor-column + .elementor-column > .elementor-widget-wrap {
    padding-top: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   3. Icons next to a title: line the icon up with the FIRST line of the
      title, so a two-line title no longer leaves the icon floating between
      the lines (phone + tablet were the worst, desktop unchanged visually).
   -------------------------------------------------------------------------- */

/* AWS Marketplace – offering cards (18px icon, 20px title line) */
html body .elementor .elementor-section.vs-aws-card-top.vs-aws-card-top > .elementor-container.elementor-container { align-items: flex-start !important; }
html body .elementor .vs-aws-card-top .vs-aws-ico { margin-top: 1px !important; }

/* Insights – "Knowledge" / format cards (34px icon chip, ~20px title line) */
html body .elementor .elementor-section.vs-ins-top.vs-ins-top > .elementor-container.elementor-container { align-items: flex-start !important; }
html body .elementor .elementor-section.vs-ins-top.vs-ins-top .vs-ins-h5 { padding-top: 7px !important; }

/* Blogs & Resources – "What you'll find here" cards (20px icon) */
html body .elementor .elementor-section.vs-find-top.vs-find-top > .elementor-container.elementor-container { align-items: flex-start !important; }

/* GCC – "How VigourSoft addresses the challenges" cards (32px icon box) */
html body .elementor-562 .v-solution-card > .v-card-header { align-items: flex-start !important; }
html body .elementor-562 .v-solution-card > .v-card-header .v-sol-title { padding-top: 6px; }
html body .elementor-562 .v-solution-card > .v-card-header .v-sol-title .elementor-heading-title { line-height: 1.35 !important; }

/* GCC – info banners: icon on the first text line instead of mid-paragraph */
html body .elementor-562 :is(.v-solution-banner, .vb-banner, .v-gcc-banner) { align-items: flex-start !important; }
html body .elementor-562 :is(.v-banner-icon, .vb-banner-icon, .v-gcc-banner-icon) { margin-top: 1px !important; align-self: flex-start !important; }

/* Home – Core Competencies cards: one card's header was 11px taller, which
   pushed its title out of line with the cards beside it. */
html body .elementor .v-card-top {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}
html body .elementor .v-card-top .v-card-icon .elementor-icon-wrapper { line-height: 0 !important; }

/* GCC – stat cards on a phone: the icon sat beside a two-line label and
   touched it. Icon now sits on the number row, label uses the full width. */
@media (max-width: 767px) {
  html body .elementor-562 .v-stat-card .v-stat-icon { grid-row: 1 !important; align-self: center !important; }
  html body .elementor-562 .v-stat-card .v-stat-label { grid-column: 1 / -1 !important; }
}

/* Contact – office cards: description lines up with the office name, the
   right side gets the same padding as the left, and phones keep the
   pin-beside-title layout instead of an off-centre stacked icon. */
html body .elementor .vs-office-card > .elementor-widget-wrap { padding-right: 0 !important; }
html body .elementor .vs-office-card .vs-office-desc { padding-left: 43px !important; }
html body .elementor .vs-office-card .vs-office-ib .elementor-icon-box-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  text-align: left !important;
}
html body .elementor .vs-office-card .vs-office-ib .elementor-icon-box-icon {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 8px 0 0 !important;
}
html body .elementor .vs-office-card .vs-office-ib .elementor-icon-box-content { text-align: left !important; }

/* --------------------------------------------------------------------------
   4. Cards whose content spilled out on smaller screens
   -------------------------------------------------------------------------- */

/* About – leadership cards: the bio and tags are indented 38px but were
   still 100% wide, so they ran past the card edge (all screen sizes). */
html body .elementor .vs-raw-leader-item > .vs-raw-leader-text,
html body .elementor .vs-raw-leader-item > .e-con:has(.vs-raw-leader-tag) {
  width: calc(100% - 38px) !important;
  max-width: calc(100% - 38px) !important;
  flex: 0 0 auto !important;
}

/* AWS Marketplace – offering cards kept a fixed desktop height on phone and
   tablet, leaving empty space under short cards. */
@media (max-width: 1024px) {
  html body .elementor .vs-aws-card { min-height: 0 !important; height: auto !important; }
}

/* GCC – FAQ columns had 10px of inner padding, so the questions sat inset
   from the heading above them. */
html body .elementor-562 .v-faq-grid > .e-con { padding: 0 !important; }

/* --------------------------------------------------------------------------
   5. Home – "Technology Services" circles
   -------------------------------------------------------------------------- */
/* Phone: labels like "Cybersecurity" were clipped by the circle, and the
   second row was offset from the first. */
@media (max-width: 767px) {
  html body.home .elementor .vs-hero-box .vs-tech-panel { padding: 14px 10px !important; }
  html body.home .elementor .vs-hero-box .vs-tech-row,
  html body.home .elementor .vs-hero-box .vs-tech-row + .vs-tech-row {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  html body.home .elementor .vs-hero-box .vs-tech-row > .elementor-container { gap: 6px !important; }
  html body.home .elementor .vs-hero-box .vs-tech-node,
  html body.home .elementor .vs-hero-box .vs-tech-node .elementor-heading-title {
    font-size: 8px !important;
    letter-spacing: -.1px !important;
  }
}
/* Tablet: the circles grew to ~140px; keep them at a calm size, centred. */
@media (min-width: 768px) and (max-width: 980px) {
  html body.home .elementor .vs-hero-box .vs-tech-row > .elementor-container { justify-content: center !important; }
  html body.home .elementor .vs-hero-box .vs-tech-row > .elementor-container > .elementor-column {
    flex: 0 0 auto !important;
    width: 104px !important;
  }
}

/* --------------------------------------------------------------------------
   6. Phone-only layout tidy-ups
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Insights library cards: the arrow button dropped onto its own line
     between the title and the text. Keep it beside the title.
     (:not(#vs-nx) only raises priority over the theme's phone rule.) */
  html body .elementor .elementor-section.vs-article-head:not(#vs-nx) > .elementor-container {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  html body .elementor .elementor-section.vs-article-head:not(#vs-nx) > .elementor-container > .elementor-column:first-child {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
  }
  html body .elementor .elementor-section.vs-article-head:not(#vs-nx) > .elementor-container > .elementor-column:last-child {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  html body .elementor .elementor-section.vs-article-head:not(#vs-nx) .vs-article-h3 { padding-top: 4px; }

  /* Success Stories cards: when the tags were long, "Read More" wrapped
     under them on some cards but sat beside them on others. On a phone
     every card now shows the tags first and the button under them. */
  html body .elementor .vs-story-top > .elementor-container {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    row-gap: 12px !important;
  }
  html body .elementor .vs-story-top > .elementor-container > .elementor-column:first-child {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .elementor .vs-story-top > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap {
    flex-wrap: wrap !important;
    gap: 6px;
    padding-right: 0 !important;
  }
  html body .elementor .vs-story-top > .elementor-container > .elementor-column:last-child {
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

/* --------------------------------------------------------------------------
   7. Two half-width blocks side by side (Offerings "How we engage" /
      "What this enables"): on tablet the left half's three cards were only
      ~100px wide and their text overflowed. Stack the halves at ≤980px,
      separated by the normal section gap.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  html body .elementor .elementor-section.vs-split-grid.vs-split-grid > .elementor-container {
    flex-wrap: wrap !important;
    row-gap: var(--vs-space-section, 56px) !important;
  }
  html body .elementor .elementor-section.vs-split-grid.vs-split-grid > .elementor-container > .elementor-column {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   8. Section spacing – pages the spacing tuner had not covered yet.
      Visible gap between sections: 72 desktop / 56 tablet / 48 phone;
      section heading -> its content: 28 / 24 / 20 (same as every other page).
      AWS Marketplace, Case Studies, Careers "Open roles".
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  html body .elementor .elementor-element-d66501d.elementor-element-d66501d.elementor-element-d66501d.elementor-element-d66501d.elementor-element-d66501d { margin-bottom: 71px !important; }
  html body .elementor .elementor-element-a73608a.elementor-element-a73608a.elementor-element-a73608a.elementor-element-a73608a.elementor-element-a73608a { margin-bottom: 24px !important; }
  html body .elementor .elementor-element-cbd0b26.elementor-element-cbd0b26.elementor-element-cbd0b26.elementor-element-cbd0b26.elementor-element-cbd0b26 { margin-bottom: 71px !important; }
  html body .elementor .elementor-element-6727199.elementor-element-6727199.elementor-element-6727199.elementor-element-6727199.elementor-element-6727199 { margin-bottom: 21px !important; }
  html body .elementor .elementor-element-bfd8237.elementor-element-bfd8237.elementor-element-bfd8237.elementor-element-bfd8237.elementor-element-bfd8237 { margin-bottom: 71px !important; }
  html body .elementor .elementor-element-510621c.elementor-element-510621c.elementor-element-510621c.elementor-element-510621c.elementor-element-510621c { margin-bottom: 24px !important; }
  html body .elementor .elementor-element-0254996.elementor-element-0254996.elementor-element-0254996.elementor-element-0254996.elementor-element-0254996 { margin-bottom: 71px !important; }
  html body .elementor .elementor-element-25404ae.elementor-element-25404ae.elementor-element-25404ae.elementor-element-25404ae.elementor-element-25404ae { margin-bottom: 24px !important; }
  html body .elementor .elementor-element-a33a486.elementor-element-a33a486.elementor-element-a33a486.elementor-element-a33a486.elementor-element-a33a486 { margin-bottom: 71px !important; }
  html body .elementor .elementor-element-168274b.elementor-element-168274b.elementor-element-168274b.elementor-element-168274b.elementor-element-168274b { margin-bottom: 26px !important; }
  html body .elementor .elementor-element-cbffc5f.elementor-element-cbffc5f.elementor-element-cbffc5f.elementor-element-cbffc5f.elementor-element-cbffc5f { margin-bottom: 71px !important; }
  html body .elementor .elementor-element-6be6468.elementor-element-6be6468.elementor-element-6be6468.elementor-element-6be6468.elementor-element-6be6468 { margin-bottom: 24px !important; }
  html body .elementor .elementor-element-623f105.elementor-element-623f105.elementor-element-623f105.elementor-element-623f105.elementor-element-623f105 { margin-bottom: 24px !important; }
  html body .elementor .elementor-element-916144d.elementor-element-916144d.elementor-element-916144d.elementor-element-916144d.elementor-element-916144d { margin-bottom: 71px !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  html body .elementor .elementor-element-d66501d.elementor-element-d66501d.elementor-element-d66501d.elementor-element-d66501d.elementor-element-d66501d { margin-bottom: 55px !important; }
  html body .elementor .elementor-element-a73608a.elementor-element-a73608a.elementor-element-a73608a.elementor-element-a73608a.elementor-element-a73608a { margin-bottom: 20px !important; }
  html body .elementor .elementor-element-cbd0b26.elementor-element-cbd0b26.elementor-element-cbd0b26.elementor-element-cbd0b26.elementor-element-cbd0b26 { margin-bottom: 55px !important; }
  html body .elementor .elementor-element-6727199.elementor-element-6727199.elementor-element-6727199.elementor-element-6727199.elementor-element-6727199 { margin-bottom: 17px !important; }
  html body .elementor .elementor-element-bfd8237.elementor-element-bfd8237.elementor-element-bfd8237.elementor-element-bfd8237.elementor-element-bfd8237 { margin-bottom: 55px !important; }
  html body .elementor .elementor-element-510621c.elementor-element-510621c.elementor-element-510621c.elementor-element-510621c.elementor-element-510621c { margin-bottom: 20px !important; }
  html body .elementor .elementor-element-0254996.elementor-element-0254996.elementor-element-0254996.elementor-element-0254996.elementor-element-0254996 { margin-bottom: 55px !important; }
  html body .elementor .elementor-element-25404ae.elementor-element-25404ae.elementor-element-25404ae.elementor-element-25404ae.elementor-element-25404ae { margin-bottom: 20px !important; }
  html body .elementor .elementor-element-a33a486.elementor-element-a33a486.elementor-element-a33a486.elementor-element-a33a486.elementor-element-a33a486 { margin-bottom: 55px !important; }
  html body .elementor .elementor-element-168274b.elementor-element-168274b.elementor-element-168274b.elementor-element-168274b.elementor-element-168274b { margin-bottom: 20px !important; }
  html body .elementor .elementor-element-cbffc5f.elementor-element-cbffc5f.elementor-element-cbffc5f.elementor-element-cbffc5f.elementor-element-cbffc5f { margin-bottom: 55px !important; }
  html body .elementor .elementor-element-6be6468.elementor-element-6be6468.elementor-element-6be6468.elementor-element-6be6468.elementor-element-6be6468 { margin-bottom: 20px !important; }
  html body .elementor .elementor-element-623f105.elementor-element-623f105.elementor-element-623f105.elementor-element-623f105.elementor-element-623f105 { margin-bottom: 8px !important; }
  html body .elementor .elementor-element-916144d.elementor-element-916144d.elementor-element-916144d.elementor-element-916144d.elementor-element-916144d { margin-bottom: 55px !important; }
}
@media (max-width: 767px) {
  html body .elementor .elementor-element-d66501d.elementor-element-d66501d.elementor-element-d66501d.elementor-element-d66501d.elementor-element-d66501d { margin-bottom: 47px !important; }
  html body .elementor .elementor-element-a73608a.elementor-element-a73608a.elementor-element-a73608a.elementor-element-a73608a.elementor-element-a73608a { margin-bottom: 16px !important; }
  html body .elementor .elementor-element-cbd0b26.elementor-element-cbd0b26.elementor-element-cbd0b26.elementor-element-cbd0b26.elementor-element-cbd0b26 { margin-bottom: 47px !important; }
  html body .elementor .elementor-element-6727199.elementor-element-6727199.elementor-element-6727199.elementor-element-6727199.elementor-element-6727199 { margin-bottom: 13px !important; }
  html body .elementor .elementor-element-bfd8237.elementor-element-bfd8237.elementor-element-bfd8237.elementor-element-bfd8237.elementor-element-bfd8237 { margin-bottom: 47px !important; }
  html body .elementor .elementor-element-510621c.elementor-element-510621c.elementor-element-510621c.elementor-element-510621c.elementor-element-510621c { margin-bottom: 16px !important; }
  html body .elementor .elementor-element-0254996.elementor-element-0254996.elementor-element-0254996.elementor-element-0254996.elementor-element-0254996 { margin-bottom: 47px !important; }
  html body .elementor .elementor-element-25404ae.elementor-element-25404ae.elementor-element-25404ae.elementor-element-25404ae.elementor-element-25404ae { margin-bottom: 16px !important; }
  html body .elementor .elementor-element-a33a486.elementor-element-a33a486.elementor-element-a33a486.elementor-element-a33a486.elementor-element-a33a486 { margin-bottom: 47px !important; }
  html body .elementor .elementor-element-168274b.elementor-element-168274b.elementor-element-168274b.elementor-element-168274b.elementor-element-168274b { margin-bottom: 16px !important; }
  html body .elementor .elementor-element-cbffc5f.elementor-element-cbffc5f.elementor-element-cbffc5f.elementor-element-cbffc5f.elementor-element-cbffc5f { margin-bottom: 47px !important; }
  html body .elementor .elementor-element-6be6468.elementor-element-6be6468.elementor-element-6be6468.elementor-element-6be6468.elementor-element-6be6468 { margin-bottom: 16px !important; }
  html body .elementor .elementor-element-623f105.elementor-element-623f105.elementor-element-623f105.elementor-element-623f105.elementor-element-623f105 { margin-bottom: 0px !important; }
  html body .elementor .elementor-element-916144d.elementor-element-916144d.elementor-element-916144d.elementor-element-916144d.elementor-element-916144d { margin-bottom: 47px !important; }
}
/* Case Studies: last section -> footer uses the site-wide gap (was fixed at 48px). */
html body:has(.vs-case-studies) .vs-footer.vs-footer.vs-footer { margin-top: var(--vs-space-section, 72px) !important; }

/* Search results page: the results block carried 64–96px of bottom padding
   on top of the footer gap, so the footer sat 112–168px below the last
   result. Same gap above the footer as every other page. */
html body .vs-results.vs-results { padding-bottom: 0 !important; }