/* Styles ported from static MASAQY page: API-Integration.html */

.ecommerce-tech-list,
    .ecommerce-ready-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .75rem;
      padding: 0;
      margin: 1.5rem 0 0;
      list-style: none;
    }

    .ecommerce-tech-list li,
    .ecommerce-ready-list li {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .75rem 1rem;
      border: 1px solid rgba(var(--primary-rgb), .12);
      border-radius: 8px;
      background: rgba(255, 255, 255, .84);
      color: #111827;
      font-weight: 800;
      line-height: 1.5;
      box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
    }

    .ecommerce-tech-list i,
    .ecommerce-ready-list i {
      color: var(--primary-color);
      flex: 0 0 auto;
    }

    .ecommerce-wide-card {
      grid-column: span 2;
    }

    #lab-challenges .consulting-challenge-head,
    #engineering-solutions .consulting-group-top {
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: .75rem;
    }

    #lab-challenges .consulting-main-tag,
    #engineering-solutions .consulting-main-tag {
      max-width: 100%;
      white-space: normal;
      line-height: 1.5;
    }

    #engineering-solutions .consulting-main-tag {
      display: block;
      width: auto;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #111827;
      font-size: clamp(1.05rem, 1.25vw, 1.25rem);
      font-weight: 950;
    }

    #engineering-solutions .consulting-groups-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: stretch;
      grid-auto-flow: row;
    }

    #engineering-solutions .consulting-group-card {
      grid-column: auto !important;
      width: 100%;
      min-width: 0;
    }

    #ecommerce-stack .consulting-section-head {
      margin-inline: auto;
      text-align: center;
      justify-items: center;
    }

    #lab-methodology .consulting-section-head {
      margin-inline: auto;
      text-align: center;
      justify-items: center;
    }

    #lab-methodology .consulting-method-timeline {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      justify-content: center;
    }

    #lab-methodology .consulting-method-timeline::before {
      inset-inline: 8%;
    }

    #lab-methodology .consulting-method-step {
      justify-items: center;
      text-align: center;
    }

    #lab-why .text-muted {
      color: rgba(255, 255, 255, .9) !important;
      font-weight: 700;
    }

    #lab-why .masaqy-advantage-card>i {
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      margin-bottom: 1rem;
      border-radius: 14px;
      background: #fff;
      color: #4d058e;
      font-size: 1.65rem;
      box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
    }

    #lab-why .masaqy-advantage-card h3 {
      margin-bottom: .65rem;
      color: #fff;
      font-size: clamp(1.05rem, 1.35vw, 1.24rem);
      font-weight: 950;
      line-height: 1.45;
    }

    #lab-why .masaqy-advantage-card p {
      color: rgba(255, 255, 255, .84);
    }

    #lab-challenges,
    #engineering-solutions,
    #ecommerce-stack {
      margin-bottom: clamp(3.5rem, 6vw, 6rem) !important;
    }

    .robot-section {
      margin-bottom: clamp(6.5rem, 10vw, 10rem);
      padding-top: clamp(1.5rem, 3vw, 3rem);
    }

    .robot-section-head {
      max-width: 820px;
      margin: 0 auto clamp(1.6rem, 3vw, 2.5rem);
      text-align: center;
    }

    .robot-section-head .consulting-hero-copy {
      margin-inline: auto;
      text-align: center;
    }

    .robot-section-head h2 {
      text-align: center;
    }

    #robot-challenges {
      padding-block: clamp(4.5rem, 7vw, 6.5rem);
    }

    #robot-solutions {
      padding-block: clamp(4.5rem, 7vw, 6.5rem);
      background: #f7f4ff;
      border-block: 1px solid rgba(var(--primary-rgb), .08);
    }

    .robot-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(1rem, 2vw, 1.35rem);
    }

    .robot-grid-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .robot-card {
      height: 100%;
      padding: clamp(1.15rem, 2vw, 1.55rem);
      border: 1px solid rgba(var(--primary-rgb), .1);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
    }

    .robot-card i {
      display: inline-grid;
      place-items: center;
      width: 46px;
      height: 46px;
      margin-bottom: 1rem;
      border-radius: 12px;
      color: var(--primary-color);
      background: rgba(var(--primary-rgb), .1);
      font-size: 1.35rem;
    }

    .robot-card h3 {
      margin-bottom: .65rem;
      color: #111827;
      font-size: clamp(1rem, 1.2vw, 1.18rem);
      font-weight: 950;
      line-height: 1.45;
    }

    .robot-card p {
      margin: 0;
      color: rgba(17, 24, 39, .66);
      font-weight: 650;
      line-height: 1.8;
    }

    .robot-impact-note {
      max-width: 820px;
      margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--primary-color); 
      font-weight: 800; 
      line-height: 1.8;
      text-align: center;
    }

    .robot-impact-note h5 {
      margin: 0;
      color: inherit;
      font: inherit;
      line-height: inherit;
    }

    .robot-method-list {
      counter-reset: robot-step;
    }

    .robot-method-card {
      position: relative;
      padding-top: 3.4rem;
    }

    .robot-method-card::before {
      counter-increment: robot-step;
      content: counter(robot-step, decimal-leading-zero);
      position: absolute;
      inset-block-start: 1.15rem;
      inset-inline-start: 1.15rem;
      color: rgba(var(--primary-rgb), .24);
      font-size: 1.55rem;
      font-weight: 950;
      line-height: 1;
    }

    .robot-dark-band {
      padding-block: clamp(5.5rem, 9vw, 8rem);
      background: #111827;
    }

    .robot-dark-band .robot-section-head h2,
    .robot-dark-band .robot-section-head p {
      color: #fff;
    }

    .robot-dark-band .robot-card {
      border-color: rgba(255, 255, 255, .1);
      background: rgba(255, 255, 255, .06);
    }

    .robot-dark-band .robot-card h3 {
      color: #fff;
    }

    .robot-dark-band .robot-card p {
      color: rgba(255, 255, 255, .72);
    }

    @media (max-width: 991.98px) {
      .ecommerce-wide-card {
        grid-column: auto;
      }

      .robot-grid,
      .robot-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #engineering-solutions .consulting-groups-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #lab-methodology .consulting-method-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #lab-methodology .consulting-method-timeline::before {
        display: none;
      }
    }

    @media (max-width: 575.98px) {
      #lab-hero .consulting-hero-title {
        font-size: clamp(2.05rem, 11vw, 3rem);
        line-height: 1.25;
      }

      .robot-section {
        margin-bottom: clamp(4.5rem, 16vw, 6rem);
        padding-top: clamp(1rem, 5vw, 1.75rem);
      }

      .ecommerce-tech-list,
      .ecommerce-ready-list {
        display: grid;
        grid-template-columns: 1fr;
      }

      .ecommerce-tech-list li,
      .ecommerce-ready-list li {
        width: 100%;
      }

      #engineering-solutions .consulting-groups-grid {
        grid-template-columns: 1fr;
      }

      .robot-grid,
      .robot-grid-4 {
        grid-template-columns: 1fr;
      }

      #lab-methodology .consulting-method-timeline {
        grid-template-columns: 1fr;
      }
    }