/* =========================
   ANIMATIONS (Fade Up)
========================= */

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* Delays */
.delay-1 { transition-delay: 0.12s; }
.delay-2 { transition-delay: 0.24s; }
.delay-3 { transition-delay: 0.36s; }
/* =========================
   WORK CARDS HOVER
========================= */

.work-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
  background-color: #ffffff;
}

.work-card:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
  background-color: #ecf2f3; /* subtle change */
}
/* Fade Up Animation */
.fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* Delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.cta-link {
  position: relative;
  transition: color 0.25s ease;
}

.cta-link {
  position: relative;
  display: inline-block;
  font-weight: 500;
  color: #1f2937; /* base color (dark) */
  transition: color 0.25s ease;
}

/* Arrow */
.cta-link::after {
  content: "→";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.25s ease;
}

/* Hover */
.cta-link:hover {
  color: #2563eb !important; /* force override */
}

.cta-link:hover::after {
  transform: translateX(4px);
}
.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.15);
  filter: brightness(1.05);
}
/* Testimonial wrappers */
.testimonial-item {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 40px;
}

/* Quote */
.testimonial {
  font-size: 18px;
  line-height: 1.65;
  color: #111827;
}

/* Author */
.testimonial-author {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
}

/* Optional proof link */
.testimonial-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #2563eb;
  text-decoration: none;
  transition: color 0.25s ease;
}

.testimonial-link:hover {
  color: #1d4ed8;
}
/* =========================
   /* =========================================
   WORK PAGE — SCROLL ANIMATION (FRONT-END ONLY)
========================================= */

/* Hide + prepare animation (front-end only) */
body:not(.wp-admin) .fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}

/* When visible */
body:not(.wp-admin) .fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
body:not(.wp-admin) .delay-1 { transition-delay: 0.10s; }
body:not(.wp-admin) .delay-2 { transition-delay: 0.20s; }
body:not(.wp-admin) .delay-3 { transition-delay: 0.30s; }


/* =========================================
   WORK PAGE — PROJECT CARD (CLEAN HOVER)
========================================= */

.work-card {
	display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #ffffff;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    background-color 0.28s ease;
  will-change: transform, box-shadow;
}

/* Hover effect */
.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
  background-color: #f9fafb;
}
.fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* Force visible in editor */
.interface-interface-skeleton__content .fade-up,
.editor-styles-wrapper .fade-up,
.block-editor-page .fade-up,
.is-root-container .fade-up {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* Parent */
.mockup-wrapper {
  position: relative;
  overflow: visible;
  padding-bottom: 50px;
}

/* Cover image */
.mockup-wrapper .cover-img img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}

/* Slideshow */
.mockup-slider {
  position: absolute;
  left: 20%;
  bottom: -50px; /* slight overlap */
  transform: translateX(-50%);
  
  width: 58%; /* 👈 smaller = less intrusive */
  max-width: 280px;

  z-index: 10;
  border-radius: 14px;
  overflow: hidden;

  box-shadow: 0 14px 35px rgba(0,0,0,0.18);
}
/* =========================
   MOBILE FIX
========================= */

@media (max-width: 768px) {

  /* Cover image */
  .mockup-wrapper .cover-img img {
    height: 220px; /* smaller for mobile */
    border-radius: 14px;
  }

  /* Slider */
  .mockup-slider {
    left: 50%;
    bottom: -25px; /* reduce overlap */
    transform: translateX(-50%);

    width: 80%;
    max-width: 240px;

    border-radius: 12px;
  }
}
@media (max-width: 768px) {
  .mockup-slider {
    left: 50%;
    bottom: -25px; /* less overlap for mobile */
    transform: translateX(-50%);
    
    width: 80%; /* bigger relative, better visibility */
    max-width: 240px;

    border-radius: 12px;
  }
}
/* Campagin Slideshow */
/* Slideshow overlay */
.mockup-Campaign-slider {
  position: absolute;
  left: 20%;
  bottom: -35px;
  transform: translateX(-50%);
  width: 50%;
  max-width: 350px;
  z-index: 10;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(0,0,0,0.18);
}
.mockup-slider:hover {
  transform: translateX(-50%) translateY(-4px);
  transition: 0.3s ease;
}
/* Kill ALL pagination for that slider */
.mockup-Campaign-slider .swiper-pagination {
  display: none !important;
}
@media (max-width: 768px) {
  .hero-header {
    font-size: 24px;
  }
}
/* Fix service cards typography + spacing */
@media (max-width: 1024px) {
  .wp-block-column h2,
  .wp-block-column h3 {
    font-size: 30px !important;
    line-height: 1.12 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .wp-block-columns {
    gap: 24px !important;
  }
}

@media (max-width: 768px) {
  .wp-block-columns {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    padding: 24px !important;
  }

  .wp-block-column h2,
  .wp-block-column h3 {
    font-size: 26px !important;
    line-height: 1.15 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .wp-block-column p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}
/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}