/* =========================================================
       AI & AUTOMATION PROJECTS PAGE
       Keeps the existing DMAS Tech site design.
       No browser frame / no webview.
       ========================================================= */

    .ai-projects-page {
      padding-top: 1.7rem;
      padding-bottom: 4rem;
    }

    .ai-projects-page .projects-page-heading {
      margin-bottom: 1rem;
    }

    .ai-projects-page .projects-page-heading h1 {
      margin-bottom: .35rem;
    }

    .ai-projects-page .projects-page-heading p {
      margin-top: .25rem;
    }

    /* Small category pills */
    .ai-service-pills {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: .45rem;
      flex-wrap: wrap;
      margin: 0 auto 2.35rem;
      max-width: 900px;
    }

    .ai-service-pills span {
      display: inline-flex;
      align-items: center;
      padding: .36rem .62rem;
      border: 1px solid rgba(91, 77, 255, .12);
      border-radius: 999px;
      background: #faf9ff;
      color: var(--color-primary);
      font-size: .56rem;
      font-weight: 750;
      line-height: 1.2;
    }

    /* Section heading */
    .ai-section-heading {
      max-width: 700px;
      margin: 0 auto 1.2rem;
      text-align: center;
    }

    .ai-section-heading .ai-section-label {
      display: inline-block;
      margin-bottom: .25rem;
      color: var(--color-primary);
      font-size: .53rem;
      font-weight: 800;
      letter-spacing: .13em;
    }

    .ai-section-heading h2 {
      margin: 0;
      color: var(--color-dark);
      font-size: 1.45rem;
      line-height: 1.15;
      font-weight: 850;
    }

    .ai-section-heading p {
      margin: .35rem auto 0;
      color: var(--color-text-muted);
      font-size: .64rem;
      line-height: 1.5;
    }

    .ai-automation-heading {
      margin-top: 3.6rem;
    }

    /* One full-width card per row */
    .ai-projects-grid {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .ai-project-card {
      display: grid;
      grid-template-columns: 52% 48%;
      width: 100%;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, .065);
      border-radius: .9rem;
      background: #fff;
      box-shadow: 0 5px 22px rgba(0, 0, 0, .035);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .ai-project-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
    }

    /* Normal project image — no webview/browser frame */
    .ai-project-image {
      width: 100%;
      height: 310px;
      overflow: hidden;
      background: #f7f7fa;
    }

    .ai-project-image img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .ai-project-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: 1.8rem 2.35rem;
    }

    .ai-project-content .project-category {
      margin-bottom: .45rem;
    }

    .ai-project-content h2 {
      margin: 0 0 .55rem;
      color: var(--color-dark);
      font-size: 1.25rem;
      line-height: 1.2;
      font-weight: 850;
    }

  .ai-project-content p {
  display: block;
  max-width: 520px;
  margin: 0 0 1rem 0;

  color: var(--color-text-muted);

  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
}

    /* WhatsApp Contact Us button */
    .ai-contact-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      margin-top: .95rem;
      padding: .6rem .95rem;
      border-radius: .48rem;
      background: var(--color-primary);
      color: #fff;
      text-decoration: none;
      font-size: .61rem;
      font-weight: 750;
      line-height: 1;
      transition: transform .2s ease, opacity .2s ease;
    }

    .ai-contact-btn:hover {
      transform: translateY(-1px);
      opacity: .92;
    }

    .ai-contact-btn b {
      font-size: .78rem;
    }

    /* Built With */
    .ai-built-with {
      margin-top: 4rem;
      text-align: center;
    }

    .ai-built-with-label {
      display: block;
      margin-bottom: .75rem;
      color: var(--color-text-muted);
      font-size: .52rem;
      font-weight: 800;
      letter-spacing: .13em;
    }

    .ai-tech-list {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: .55rem;
    }

    .ai-tech-item {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .45rem .65rem;
      border: 1px solid rgba(0, 0, 0, .07);
      border-radius: .55rem;
      background: #fff;
      color: var(--color-dark);
      font-size: .57rem;
      font-weight: 750;
    }

    .ai-tech-dot {
      width: .38rem;
      height: .38rem;
      border-radius: 50%;
      background: var(--color-primary);
    }

    /* Mobile */
    @media (max-width: 900px) {
      .ai-project-card {
        grid-template-columns: 1fr;
      }

      .ai-project-image {
        height: 275px;
      }

      .ai-project-content {
        padding: 1.45rem 1.6rem 1.6rem;
      }
    }

    @media (max-width: 560px) {
      .ai-projects-page {
        padding-top: 1.45rem;
        padding-bottom: 3rem;
      }

      .ai-service-pills {
        margin-bottom: 1.8rem;
        gap: .3rem;
      }

      .ai-service-pills span {
        padding: .32rem .5rem;
        font-size: .51rem;
      }

      .ai-section-heading h2 {
        font-size: 1.25rem;
      }

      .ai-section-heading p {
        font-size: .59rem;
      }

      .ai-automation-heading {
        margin-top: 2.7rem;
      }

      .ai-projects-grid {
        gap: .9rem;
      }

      .ai-project-card {
        border-radius: .72rem;
      }

      .ai-project-image {
        height: 205px;
      }

      .ai-project-content {
        padding: 1.15rem 1.15rem 1.25rem;
      }

      .ai-project-content h2 {
        font-size: 1.02rem;
      }

      .ai-project-content p {
        font-size: .59rem;
        line-height: 1.6;
      }

      .ai-contact-btn {
        width: 100%;
        margin-top: .9rem;
        padding: .68rem .9rem;
      }

      .ai-built-with {
        margin-top: 3rem;
      }
      
    }
/* =========================================
   BUILT WITH SECTION
========================================= */

.ai-built-with {
  width: 100%;
  padding: 85px 0 90px;
  background: #fff;
  overflow: hidden;
  position: relative;
}


/* =========================================
   TOP HEADING
========================================= */

.ai-built-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;

  margin-bottom: 22px;
}

.ai-built-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 4px;
  color: #64748b;
}

.ai-heading-line {
  width: 70px;
  height: 1px;
  background: #cbd5e1;
}


/* =========================================
   MAIN TITLE
========================================= */

.ai-built-title {
  text-align: center;

  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;

  font-weight: 800;
  letter-spacing: -1.8px;

  color: #0f172a;

  margin-bottom: 14px;
}

.ai-built-title span {
  background: linear-gradient(
    90deg,
    #2563eb,
    #7c3aed
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* =========================================
   SUBTITLE
========================================= */

.ai-built-subtitle {
  max-width: 760px;

  margin: 0 auto 45px;

  text-align: center;

  font-size: 16px;
  line-height: 1.7;

  color: #64748b;
}


/* =========================================
   LOGO ROW
========================================= */

.ai-logo-row {
  position: relative;

  width: 100%;

  display: flex;
  align-items: center;

  margin-bottom: 22px;
}


/* =========================================
   MARQUEE
========================================= */

.ai-marquee {
  width: 100%;

  overflow: hidden;

  padding: 8px 0;
}


.ai-marquee-track {
  display: flex;
  align-items: center;

  gap: 14px;

  width: max-content;

  will-change: transform;
}


/* =========================================
   LEFT MOVEMENT
========================================= */

.ai-marquee-left .ai-marquee-track {
  animation: aiMoveLeft 45s linear infinite;
}


/* =========================================
   RIGHT MOVEMENT
========================================= */

.ai-marquee-right .ai-marquee-track {
  animation: aiMoveRight 50s linear infinite;
}


/* =========================================
   PAUSE
========================================= */

.ai-marquee:hover .ai-marquee-track {
  animation-play-state: paused;
}


/* =========================================
   LOGO CARD
========================================= */

.ai-logo-card {
  width: 150px;
  height: 125px;

  flex-shrink: 0;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 13px;

  background: rgba(255, 255, 255, 0.96);

  border: 1px solid #e5e7eb;

  border-radius: 18px;

  box-shadow:
    0 4px 16px rgba(15, 23, 42, 0.045);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}


.ai-logo-card:hover {
  transform: translateY(-6px);

  border-color: #cbd5e1;

  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.10);
}


/* =========================================
   LOGO
========================================= */

.ai-logo-card img {
  width: 48px;
  height: 48px;

  object-fit: contain;

  display: block;

  flex-shrink: 0;
}


/* =========================================
   NAME
========================================= */

.ai-logo-card span {
  font-size: 14px;

  font-weight: 700;

  color: #0f172a;

  white-space: nowrap;
}


/* =========================================
   ARROWS
========================================= */

.ai-arrow {
  position: absolute;

  z-index: 20;

  width: 54px;
  height: 54px;

  border-radius: 50%;

  border: 1px solid #e2e8f0;

  background: rgba(255, 255, 255, 0.96);

  color: #0f172a;

  font-size: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  box-shadow:
    0 6px 20px rgba(15, 23, 42, 0.08);

  transition: all 0.2s ease;
}


.ai-arrow:hover {
  transform: scale(1.08);

  box-shadow:
    0 10px 25px rgba(15, 23, 42, 0.14);
}


.ai-arrow-left {
  left: 18px;
}


.ai-arrow-right {
  right: 18px;
}


/* =========================================
   EDGE FADE
========================================= */

.ai-logo-row::before,
.ai-logo-row::after {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  width: 150px;

  z-index: 10;

  pointer-events: none;
}


.ai-logo-row::before {
  left: 0;

  background: linear-gradient(
    to right,
    #fff 5%,
    rgba(255,255,255,0)
  );
}


.ai-logo-row::after {
  right: 0;

  background: linear-gradient(
    to left,
    #fff 5%,
    rgba(255,255,255,0)
  );
}


/* =========================================
   ANIMATION
========================================= */

@keyframes aiMoveLeft {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

}


@keyframes aiMoveRight {

  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }

}


/* =========================================
   AND MANY MORE
========================================= */

.ai-many-more {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 20px;

  margin-top: 45px;

  color: #64748b;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 4px;
}


.ai-many-more span {
  width: 60px;
  height: 1px;

  background: #cbd5e1;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

  .ai-built-with {
    padding: 60px 0 65px;
  }


  .ai-built-heading {
    gap: 12px;

    margin-bottom: 18px;
  }


  .ai-built-label {
    font-size: 9px;
    letter-spacing: 3px;
  }


  .ai-heading-line {
    width: 35px;
  }


  .ai-built-title {
    padding: 0 20px;

    font-size: 30px;

    letter-spacing: -1px;
  }


  .ai-built-subtitle {
    padding: 0 25px;

    font-size: 14px;

    margin-bottom: 30px;
  }


  .ai-marquee-track {
    gap: 10px;
  }


  .ai-logo-card {
    width: 120px;
    height: 105px;

    border-radius: 15px;

    gap: 10px;
  }


  .ai-logo-card img {
    width: 38px;
    height: 38px;
  }


  .ai-logo-card span {
    font-size: 12px;
  }


  .ai-arrow {
    width: 42px;
    height: 42px;

    font-size: 17px;
  }


  .ai-arrow-left {
    left: 8px;
  }


  .ai-arrow-right {
    right: 8px;
  }


  .ai-logo-row::before,
  .ai-logo-row::after {
    width: 70px;
  }


  .ai-many-more {
    margin-top: 30px;

    font-size: 9px;

    letter-spacing: 3px;
  }


  .ai-many-more span {
    width: 35px;
  }

}

/* =========================================================
   CTA — LET'S CONNECT
   Final clean version
========================================================= */

.projects-cta {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;

  width: 100% !important;
  min-height: 0 !important;

  padding: 22px 28px !important;
  box-sizing: border-box !important;
}


/* CTA ICON */

.projects-cta .cta-icon {
  flex: 0 0 56px !important;

  width: 56px !important;
  height: 56px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 13px !important;

  background: #5b4dff !important;
  color: #ffffff !important;

  font-size: 24px !important;
  line-height: 1 !important;
}


/* CTA TEXT */

.projects-cta .cta-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.projects-cta .cta-copy small {
  display: block !important;

  margin: 0 0 6px !important;

  color: #5b4dff !important;

  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 1.5px !important;
}

.projects-cta .cta-copy h2 {
  margin: 0 0 5px !important;

  color: #0f172a !important;

  font-size: 20px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

.projects-cta .cta-copy p {
  margin: 0 !important;

  color: #64748b !important;

  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}


/* =========================================================
   LET'S CONNECT BUTTON
========================================================= */

.projects-cta .whatsapp-main-btn {
  flex: 0 0 auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 155px !important;
  height: 48px !important;

  padding: 0 20px !important;
  margin: 0 !important;

  box-sizing: border-box !important;

  border: 0 !important;
  border-radius: 10px !important;

  background: #5b4dff !important;
  color: #ffffff !important;

  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow: 0 6px 18px rgba(91, 77, 255, 0.20) !important;

  cursor: pointer !important;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease !important;
}


/* Disable any previous pseudo-element arrow */

.projects-cta .whatsapp-main-btn::before,
.projects-cta .whatsapp-main-btn::after {
  content: none !important;
}


/* Button hover */

.projects-cta .whatsapp-main-btn:hover {
  background: #4f42f5 !important;

  transform: translateY(-2px) !important;

  box-shadow:
    0 10px 24px rgba(91, 77, 255, 0.28) !important;
}


/* Button active */

.projects-cta .whatsapp-main-btn:active {
  transform: translateY(0) !important;

  box-shadow:
    0 4px 12px rgba(91, 77, 255, 0.18) !important;
}


/* Button focus */

.projects-cta .whatsapp-main-btn:focus-visible {
  outline: 3px solid rgba(91, 77, 255, 0.25) !important;
  outline-offset: 3px !important;
}


/* =========================================================
   MOBILE CTA
========================================================= */

@media (max-width: 700px) {

  .projects-cta {
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 16px !important;

    padding: 22px !important;
  }

  .projects-cta .cta-icon {
    flex: 0 0 48px !important;

    width: 48px !important;
    height: 48px !important;

    border-radius: 11px !important;

    font-size: 21px !important;
  }

  .projects-cta .cta-copy h2 {
    font-size: 18px !important;
  }

  .projects-cta .cta-copy p {
    font-size: 12px !important;
  }

  .projects-cta .whatsapp-main-btn {
    width: 100% !important;
    min-width: 0 !important;

    height: 48px !important;

    padding: 0 18px !important;

    border-radius: 9px !important;

    font-size: 13px !important;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .projects-cta {
    padding: 18px !important;
  }

  .projects-cta .cta-copy h2 {
    font-size: 17px !important;
  }

  .projects-cta .cta-copy p {
    font-size: 11px !important;
  }

}