/* =========================================================
   CARD & ELEMENT SCROLL REVEAL
   Cards stay hidden until JS adds .is-visible
   (Overrides the auto-play card animations above.)
   ========================================================= */

/* ---------- Base: hide all cards until revealed ---------- */
.service-card,
.featured-project,
.portfolio-project,
.technology-item,
.process-item,
.industry,
.client-item,
.about-stat,
.about-info,
.google-reviews-summary,
.google-review-card,
.footer-cta-content,
.footer-cta-services {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
  will-change: opacity, transform;
}

/* ---------- Revealed state ---------- */
.service-card.is-visible,
.featured-project.is-visible,
.portfolio-project.is-visible,
.technology-item.is-visible,
.process-item.is-visible,
.industry.is-visible,
.client-item.is-visible,
.about-stat.is-visible,
.about-info.is-visible,
.google-reviews-summary.is-visible,
.google-review-card.is-visible,
.footer-cta-content.is-visible,
.footer-cta-services.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Kill the old auto-play card animations
     so they don't fight with the reveal. ---------- */

.service-card,
.service-card:nth-child(1),
.service-card:nth-child(2),
.service-card:nth-child(3),
.service-card:nth-child(4),
.service-card:nth-child(5),
.service-card:nth-child(6),
.featured-project,
.portfolio-project,
.portfolio-project:nth-child(1),
.portfolio-project:nth-child(2),
.technology-item,
.technology-item:nth-child(1),
.technology-item:nth-child(2),
.technology-item:nth-child(3),
.technology-item:nth-child(4),
.technology-item:nth-child(5),
.technology-item:nth-child(6),
.technology-item:nth-child(7),
.technology-item:nth-child(8),
.technology-item:nth-child(9),
.technology-item:nth-child(10),
.process-item,
.process-item:nth-child(2),
.process-item:nth-child(3),
.process-item:nth-child(4),
.process-item:nth-child(5),
.process-item:nth-child(6),
.process-item:nth-child(7),
.industry,
.industry:nth-child(1),
.industry:nth-child(2),
.industry:nth-child(3),
.industry:nth-child(4),
.industry:nth-child(5),
.industry:nth-child(6),
.client-item,
.client-item:nth-child(1),
.client-item:nth-child(2),
.client-item:nth-child(3),
.client-item:nth-child(4),
.client-item:nth-child(5),
.client-item:nth-child(6),
.client-item:nth-child(7),
.client-item:nth-child(8),
.client-item:nth-child(9),
.client-item:nth-child(10),
.client-item:nth-child(11),
.client-item:nth-child(12),
.about-stat,
.about-stat:nth-child(1),
.about-stat:nth-child(2),
.about-stat:nth-child(3),
.about-stat:nth-child(4),
.google-reviews-summary,
.google-review-card,
.google-review-card:nth-child(1),
.google-review-card:nth-child(2),
.google-review-card:nth-child(3),
.google-review-card:nth-child(4),
.footer-cta-content,
.footer-cta-services {
  animation: none !important;
}

/* ---------- Specific overrides for hover effects ---------- */
/* Keep icon float + service icon pulse */
.service-card .service-icon {
  animation: serviceIconFloat 4s ease-in-out infinite !important;
}
.service-card:hover .service-icon {
  animation: serviceIconPulse 1.5s ease-in-out infinite !important;
}

/* Portfolio arrow keeps its hover spin */
.portfolio-project:hover .portfolio-arrow {
  animation: portfolioArrowSpin 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* Featured number keeps its pulse */
.featured-number {
  animation: featuredNumberPulse 3.5s ease-in-out infinite !important;
}

/* Client logos keep floating on hover */
.client-item:hover {
  animation: clientLogoGlow 1.6s ease-in-out infinite !important;
}

/* Review stars keep twinkling */
#reviews .google-card-stars {
  animation: reviewStarTwinkle 3s ease-in-out infinite !important;
}

/* Footer CTA button keeps pulsing */
.footer-cta-button {
  animation: footerButtonPulse 4s ease-in-out infinite !important;
}

/* Technology logos keep floating */
.technology-item .technology-logo {
  animation: techLogoFloat 5s ease-in-out infinite !important;
}

/* Process markers keep pulsing */
.process-marker {
  animation: processMarkerPulse 3s ease-in-out infinite !important;
}

/* Process flow line keeps growing (decorative line, not a card) */
.process-flow-line {
  animation: processLineGrow 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both !important;
}

/* ---------- Process items — keep their left / right slide ---------- */
.process-item:not(.process-item-offset).is-visible {
  animation: processItemSlideLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) both !important;
}

.process-item-offset.is-visible {
  animation: processItemSlideRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) both !important;
}

/* ---------- Featured project — zoom reveal variant ---------- */
.featured-project.is-visible {
  animation: featuredProjectReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) both !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Portfolio project — zoom reveal ---------- */
.portfolio-project.is-visible {
  animation: portfolioCardReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) both !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Service card — stagger reveal ---------- */
.service-card.is-visible {
  animation: serviceCardStagger 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) both !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Technology item — pop-in ---------- */
.technology-item.is-visible {
  animation: techItemPopIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) both !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Industry row — slide-in ---------- */
.industry.is-visible {
  animation: industryRowReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) both !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Client item — pop ---------- */
.client-item.is-visible {
  animation: clientLogoPop 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) both !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- About stat — pop ---------- */
.about-stat.is-visible {
  animation: statPopIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) both !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Google review card — rise ---------- */
.google-review-card.is-visible {
  animation: reviewCardReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) both !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Google reviews summary ---------- */
.google-reviews-summary.is-visible {
  animation: reviewsSummaryReveal 1s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) both !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Footer CTA content ---------- */
.footer-cta-content.is-visible {
  animation: footerContentReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) both !important;
  opacity: 1 !important;
  transform: none !important;
}

.footer-cta-services.is-visible {
  animation: footerServicesReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) both !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Reduced motion — show everything ---------- */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .featured-project,
  .portfolio-project,
  .technology-item,
  .process-item,
  .industry,
  .client-item,
  .about-stat,
  .about-info,
  .google-reviews-summary,
  .google-review-card,
  .footer-cta-content,
  .footer-cta-services {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   SERVICES SECTION — REVEAL ANIMATION
   Same style as other sections (fade + slide up)
   ========================================================= */

/* ---- Header / Title / Intro / Button ---- */
.services-header,
.services-title,
.services-intro,
.services-main-btn {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
  will-change: opacity, transform;
}

.services-header.is-visible,
.services-title.is-visible,
.services-intro.is-visible,
.services-main-btn.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Services Grid (glass panel) ---- */
.services-grid {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
  will-change: opacity, transform;
}

.services-grid.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Individual Service Cards (staggered) ---- */
.service-card {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
  will-change: opacity, transform;
}

.service-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Preserve hover lift for cards (overrides base reveal on hover) */
.service-card.is-visible:hover {
  transform: translateY(-6px);
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* Preserve icon float */
.service-card .service-icon {
  animation: serviceIconFloat 4s ease-in-out infinite;
}

.service-card:hover .service-icon {
  animation: serviceIconPulse 1.5s ease-in-out infinite;
}

.service-card:hover .service-explore b {
  animation: serviceArrowNudge 1s ease-in-out infinite;
}

/* Reduced motion — show instantly */
@media (prefers-reduced-motion: reduce) {
  .services-header,
  .services-title,
  .services-intro,
  .services-main-btn,
  .services-grid,
  .service-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}
/* =========================================================
   CARD-BY-CARD SCROLL REVEAL
   Each card triggers independently as user scrolls
   ========================================================= */

/* ---------- Services Grid + Cards ---------- */
.services-header,
.services-title,
.services-intro,
.services-main-btn,
.services-grid,
.service-card {
  opacity: 0;
  transform: translateY(42px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
  will-change: opacity, transform;
}

.services-header.is-visible,
.services-title.is-visible,
.services-intro.is-visible,
.services-main-btn.is-visible,
.services-grid.is-visible,
.service-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Preserve hover lift on services cards */
.service-card.is-visible:hover {
  transform: translateY(-6px);
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* Preserve icon float + pulse */
.service-card .service-icon {
  animation: serviceIconFloat 4s ease-in-out infinite;
}
.service-card:hover .service-icon {
  animation: serviceIconPulse 1.5s ease-in-out infinite;
}
.service-card:hover .service-explore b {
  animation: serviceArrowNudge 1s ease-in-out infinite;
}

/* ---------- Projects ---------- */
.featured-project,
.portfolio-project {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
  will-change: opacity, transform;
}

.featured-project.is-visible,
.portfolio-project.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* preserve arrow spin */
.portfolio-project.is-visible:hover .portfolio-arrow {
  animation: portfolioArrowSpin 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* preserve featured number pulse */
.featured-number {
  animation: featuredNumberPulse 3.5s ease-in-out infinite;
}

/* ---------- Technology ---------- */
.technology-item {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
  will-change: opacity, transform;
}

.technology-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.technology-item .technology-logo {
  animation: techLogoFloat 5s ease-in-out infinite;
}

/* ---------- Process ---------- */
.process-item {
  opacity: 0;
  transform: translateY(45px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
  will-change: opacity, transform;
}

.process-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.process-item:not(.process-item-offset).is-visible {
  animation: processItemSlideLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) both;
}

.process-item-offset.is-visible {
  animation: processItemSlideRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) both;
}

.process-item:hover .process-arrow {
  animation: processArrowNudge 0.8s ease-in-out infinite;
}

.process-marker {
  animation: processMarkerPulse 3s ease-in-out infinite;
}

.process-flow-line {
  animation: processLineGrow 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

/* ---------- Industries ---------- */
.industry {
  opacity: 0;
  transform: translateY(35px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
  will-change: opacity, transform;
}

.industry.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.industry.is-visible:hover .industry-arrow {
  animation: industryArrowSpin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ---------- Clients ---------- */
.client-item {
  opacity: 0;
  transform: translateY(25px) scale(0.95);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
  will-change: opacity, transform;
}

.client-item.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.client-item.is-visible:hover {
  animation: clientLogoGlow 1.6s ease-in-out infinite;
}

/* ---------- About Stats + Info ---------- */
.about-stat,
.about-info {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
  will-change: opacity, transform;
}

.about-stat.is-visible,
.about-info.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.about-info.is-visible:hover {
  padding-left: 8px;
  transition: padding-left 0.35s ease;
}

.about-info::before {
  animation: aboutOrbFloat 7s ease-in-out infinite;
}

.about-number span {
  animation: aboutNumberPulse 3s ease-in-out infinite;
}

/* ---------- Google Reviews ---------- */
.google-reviews-summary,
.google-review-card {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
  will-change: opacity, transform;
}

.google-reviews-summary.is-visible,
.google-review-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#reviews .google-card-stars {
  animation: reviewStarTwinkle 3s ease-in-out infinite;
}
#reviews .google-reviews-next {
  animation: reviewNextPulse 3s ease-in-out infinite;
}

/* ---------- Footer CTA ---------- */
.footer-cta-content,
.footer-cta-services {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
  will-change: opacity, transform;
}

.footer-cta-content.is-visible,
.footer-cta-services.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.footer-cta-button {
  animation: footerButtonPulse 4s ease-in-out infinite;
}
.footer-cta-services span:hover {
  animation: footerServiceHover 0.6s ease-in-out infinite;
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .services-header,
  .services-title,
  .services-intro,
  .services-main-btn,
  .services-grid,
  .service-card,
  .featured-project,
  .portfolio-project,
  .technology-item,
  .process-item,
  .industry,
  .client-item,
  .about-stat,
  .about-info,
  .google-reviews-summary,
  .google-review-card,
  .footer-cta-content,
  .footer-cta-services {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}
/* =========================================================
   CARD-BY-CARD SEQUENTIAL REVEAL
   Each card waits until user scrolls to it
   ========================================================= */

/* ---------- All revealable items hidden by default ---------- */
.services-header,
.services-title,
.services-intro,
.services-main-btn,
.services-grid,
.service-card,
.featured-project,
.portfolio-project,
.technology-item,
.process-item,
.industry,
.client-item,
.about-stat,
.about-info,
.google-reviews-summary,
.google-review-card,
.footer-cta-content,
.footer-cta-services {
  opacity: 0;
  transform: translateY(45px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
  will-change: opacity, transform;
}

/* ---------- Revealed state ---------- */
.services-header.is-visible,
.services-title.is-visible,
.services-intro.is-visible,
.services-main-btn.is-visible,
.services-grid.is-visible,
.service-card.is-visible,
.featured-project.is-visible,
.portfolio-project.is-visible,
.technology-item.is-visible,
.process-item.is-visible,
.industry.is-visible,
.client-item.is-visible,
.about-stat.is-visible,
.about-info.is-visible,
.google-reviews-summary.is-visible,
.google-review-card.is-visible,
.footer-cta-content.is-visible,
.footer-cta-services.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Kill any auto-play card animations from earlier rules ---------- */
.service-card,
.service-card:nth-child(1), .service-card:nth-child(2),
.service-card:nth-child(3), .service-card:nth-child(4),
.service-card:nth-child(5), .service-card:nth-child(6),
.featured-project,
.portfolio-project,
.portfolio-project:nth-child(1), .portfolio-project:nth-child(2),
.technology-item,
.technology-item:nth-child(1), .technology-item:nth-child(2),
.technology-item:nth-child(3), .technology-item:nth-child(4),
.technology-item:nth-child(5), .technology-item:nth-child(6),
.technology-item:nth-child(7), .technology-item:nth-child(8),
.technology-item:nth-child(9), .technology-item:nth-child(10),
.process-item,
.process-item:nth-child(2), .process-item:nth-child(3),
.process-item:nth-child(4), .process-item:nth-child(5),
.process-item:nth-child(6), .process-item:nth-child(7),
.industry,
.industry:nth-child(1), .industry:nth-child(2),
.industry:nth-child(3), .industry:nth-child(4),
.industry:nth-child(5), .industry:nth-child(6),
.client-item,
.client-item:nth-child(1), .client-item:nth-child(2),
.client-item:nth-child(3), .client-item:nth-child(4),
.client-item:nth-child(5), .client-item:nth-child(6),
.client-item:nth-child(7), .client-item:nth-child(8),
.client-item:nth-child(9), .client-item:nth-child(10),
.client-item:nth-child(11), .client-item:nth-child(12),
.about-stat,
.about-stat:nth-child(1), .about-stat:nth-child(2),
.about-stat:nth-child(3), .about-stat:nth-child(4),
.google-reviews-summary,
.google-review-card,
.google-review-card:nth-child(1), .google-review-card:nth-child(2),
.google-review-card:nth-child(3), .google-review-card:nth-child(4),
.footer-cta-content, .footer-cta-services {
  animation: none !important;
}

/* ---------- Restore hover / decorative micro-animations ---------- */

/* Services card hover */
.service-card.is-visible:hover {
  transform: translateY(-6px);
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
.service-card .service-icon {
  animation: serviceIconFloat 4s ease-in-out infinite !important;
}
.service-card:hover .service-icon {
  animation: serviceIconPulse 1.5s ease-in-out infinite !important;
}
.service-card:hover .service-explore b {
  animation: serviceArrowNudge 1s ease-in-out infinite !important;
}

/* Portfolio arrow spin */
.portfolio-project:hover .portfolio-arrow {
  animation: portfolioArrowSpin 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* Featured number pulse */
.featured-number {
  animation: featuredNumberPulse 3.5s ease-in-out infinite !important;
}

/* Client logo glow */
.client-item:hover {
  animation: clientLogoGlow 1.6s ease-in-out infinite !important;
}

/* Technology logo float */
.technology-item .technology-logo {
  animation: techLogoFloat 5s ease-in-out infinite !important;
}

/* Process marker + arrow */
.process-marker {
  animation: processMarkerPulse 3s ease-in-out infinite !important;
}
.process-item:hover .process-arrow {
  animation: processArrowNudge 0.8s ease-in-out infinite !important;
}

/* Reviews star twinkle + next button */
#reviews .google-card-stars {
  animation: reviewStarTwinkle 3s ease-in-out infinite !important;
}
#reviews .google-reviews-next {
  animation: reviewNextPulse 3s ease-in-out infinite !important;
}

/* Footer CTA button pulse + services hover */
.footer-cta-button {
  animation: footerButtonPulse 4s ease-in-out infinite !important;
}
.footer-cta-services span:hover {
  animation: footerServiceHover 0.6s ease-in-out infinite !important;
}

/* About info orb + number pulse */
.about-info::before {
  animation: aboutOrbFloat 7s ease-in-out infinite !important;
}
.about-number span {
  animation: aboutNumberPulse 3s ease-in-out infinite !important;
}

/* Process flow line */
.process-flow-line {
  animation: processLineGrow 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both !important;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .services-header, .services-title, .services-intro,
  .services-main-btn, .services-grid, .service-card,
  .featured-project, .portfolio-project, .technology-item,
  .process-item, .industry, .client-item, .about-stat,
  .about-info, .google-reviews-summary, .google-review-card,
  .footer-cta-content, .footer-cta-services {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   ★ SERVICES SECTION — ISOLATED FIX ★
   Baaki sections ge impact illa — services matra
   Technology section tarah — cards one by one reveal
   ========================================================= */

/* 1. Services wrapper always visible — ellaa cards individually reveal aagbeku */
.services-grid {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* 2. Header / Title / Intro / Button — fade + slide (same as other sections) */
.services-header,
.services-title,
.services-intro,
.services-main-btn {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
  will-change: opacity, transform;
}

.services-header.is-visible,
.services-title.is-visible,
.services-intro.is-visible,
.services-main-btn.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 3. Individual service cards — hide + reveal one by one */
.service-card {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
  will-change: opacity, transform;
}

.service-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 4. Kill any leftover nth-child auto-play on cards */
.service-card,
.service-card:nth-child(1),
.service-card:nth-child(2),
.service-card:nth-child(3),
.service-card:nth-child(4),
.service-card:nth-child(5),
.service-card:nth-child(6) {
  animation: none !important;
}

/* 5. Preserve hover lift */
.service-card.is-visible:hover {
  transform: translateY(-6px);
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.services-grid > .service-card:is(:hover, :focus-visible) {
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.25s ease,
    box-shadow 0.3s ease,
    color 0.2s ease;
  transition-delay: 0s !important;
}

/* 6. Preserve icon float + pulse */
.service-card .service-icon {
  animation: serviceIconFloat 4s ease-in-out infinite !important;
}
.service-card:hover .service-icon {
  animation: serviceIconPulse 1.5s ease-in-out infinite !important;
}
.service-card:hover .service-explore b {
  animation: serviceArrowNudge 1s ease-in-out infinite !important;
}

/* 7. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .services-header,
  .services-title,
  .services-intro,
  .services-main-btn,
  .service-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

#clientsGrid.clients-track > .client-item {
  opacity: 1;
  transform: none;
}