/* ==========================================================
   SERVICE PAGES — new additions only
   (ui-ux-design.php, website-design.php, branding.php, logo-design.php,
   wordpress-development.php, shopify-development.php,
   ecommerce-development.php, custom-web-development.php,
   mobile-app-development.php, seo.php, digital-marketing.php,
   ai-integration.php, website-maintenance.php, hosting-support.php)

   Everything else on these pages reuses existing classes as-is:
   .about-hero, .breadcrumb, .about-story-section, .story-content,
   .mission-vision, .mv-box, .why-team-section / .about-why-grid /
   .feature-box, .tech-stack-section / .tech-grid / .tech-column,
   .client-section / .industry-area / .industry-grid,
   .process-estimate-section / .process-wrapper, .faq-section,
   .cta-section, .footer-section — all unmodified.

   This file only adds the handful of modifier classes those
   sections needed for a single-column context (no per-service
   photo, unlike the package pages which have one).

   Paste this entire block at the very END of assets/css/custom.css
   once you're happy with it — kept separate here only so it's easy
   to review as a diff.
========================================================== */

/* ---------- Overview section — single column (service pages have no
   per-service hero image, unlike the package pages' .story-media) ---------- */
.service-overview-container {
  grid-template-columns: 1fr;
}
.service-overview-content {
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
  width: 100%;
}
 .about-hero-inner.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 48px;
  }
  .hero-grid .hero-col-left {
    display: flex;
    flex-direction: column;
  }
  .hero-grid .hero-col-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .hero-image-frame {
    width: 100%;
    /* max-width: 520px; */
    /* aspect-ratio: 4 / 3; */
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .hero-image-frame img.hero-illustration {
    width: 100%;
    height: 100%;
    /* object-fit: contain; */
    display: block;
  }
  .hero-image-frame .hero-image-placeholder-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    text-align: center;
    padding: 24px;
  }
  @media (max-width: 991px) {
    .about-hero-inner.hero-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .hero-grid .hero-col-right {
      order: -1;
    }
    .hero-image-frame {
      max-width: 100%;
      aspect-ratio: 6 / 3.1;
    }
  }
/* ---------- Tech section reused with a single column instead of the
   homepage's 6-column layout (services here only list a handful of
   relevant tools rather than the full stack) ---------- */
.service-tech-grid {
  grid-template-columns: minmax(0, 480px);
  justify-content: center;
}

/* ---------- Industries section reused standalone (on the homepage it
   sits directly below the testimonial slider inside the same
   .client-section, with margin-top:55px separating it from that
   slider; here it's the only thing in that section, so that margin
   just adds excess empty space under the section's own padding) ---------- */
.service-industries-section .industry-area {
  margin-top: 0;
}

/* ---------- Industries Served cards — now real links to each industry
   page. .industry-card already had cursor:pointer in the base CSS
   (main.css) suggesting it was meant to be clickable from the start,
   it just was never wired up as an <a>. An <a> defaults to
   display:inline, which would break its sizing inside the grid cell,
   so this restores block display and removes the default link styling. ---------- */
.industry-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

section.tech-stack-section.innerPageTech .tech-column {
    width: 100%;
}

section.tech-stack-section.innerPageTech .tech-grid.service-tech-grid {
    grid-template-columns: none;
    display: flex;
}

section.tech-stack-section.innerPageTech .tech-column ul {
    display: flex;
}

section.tech-stack-section.innerPageTech .tech-column ul i {color: #fff;}


/* ================= */


  /* Open positions */
  .positions-section .positions-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 auto;
  }
  .job-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 24px 28px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  .job-card-info h4 {
    margin: 0 0 6px;
  }
  .job-card-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .job-card-tags span {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  .job-card.general-application {
    border-style: dashed;
    background: transparent;
  }


  .job-card * {color: #fff;}

  /* ================================Terms and policy Css ==================*/

   .legal-content-section {
    padding: 100px 24px 80px;
    background:#111;
  }
  .legal-container {
    max-width: var(--max-width);
        margin: 0 auto;
  }
  .legal-container h2 {
    font-size: 22px;
    margin: 40px 0 14px;
    color: var(--color-gold);
  }
  .legal-container h2:first-of-type {
    margin-top: 0;
  }
  .legal-container p,
  .legal-container li {
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
    font-size: 15px;
  }
  .legal-container ul {
    margin: 10px 0 10px 20px;
    padding: 0;
  }
  .legal-container li {
    margin-bottom: 6px;
  }
  .legal-container strong {
    color: #ffffff;
  }
  .legal-container a {
    color: var(--accent-color, #d4af37);
    text-decoration: none;
  }
  .legal-container a:hover {
    text-decoration: underline;
  }