.inner-page-hero-section {
  background: url(./images/service/service-hero-bg.png);
  background-size: cover;
  background-position: center center;
}

.stop-color-about-2 {
  stop-color: #F3F5FE;
}

.stop-color-about-1 {
  stop-color: #F3F5FE;
}

.reveal {
  max-height: 0;
  transition: max-height .45s ease, opacity .35s ease, transform .35s ease;
}

.group:hover .reveal {
  max-height: 220px;
}

/* nicer cubic-bezier similar to theme’s easing */
.ease-soft {
  transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}


@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-float-slow {
  animation: float 5s ease-in-out infinite;
}

.animate-float-fast {
  animation: float 2s ease-in-out infinite;
}

/* Base: hide all */
.tab-panel {
  display: none;
}

/* Show the one that matches the hash */
.tab-panel:target {
  display: block;
}

/* Default: if no :target exists, show the first panel only */
.tabs-container:not(:has(.tab-panel:target)) .tab-panel:first-child {
  display: block;
}

/* ===== Arrow on active tab (CSS-only) ===== */
.tab-link {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* .tab-link::after {
      content: "";
      position: absolute;
      right: 0px;
      top: 50%;
      width: 57px;
      height: 12px;
      background-image: url(././images/service/right-arrow.png);
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0;
      transition: opacity .25s ease;
    } */

/* Show arrow for the tab whose panel is targeted */
.tech-tabs:has(#uiux:target) .tab-link[href="#uiux"]::after,
.tech-tabs:has(#web:target) .tab-link[href="#web"]::after,
.tech-tabs:has(#mobile:target) .tab-link[href="#mobile"]::after,
.tech-tabs:has(#javascript:target) .tab-link[href="#javascript"]::after {
  opacity: 1;
}

/* Default (no :target) → first tab shows arrow */
.tech-tabs:not(:has(.tab-panel:target)) .tab-link[href="#uiux"]::after {
  opacity: 1;
}


/* Expanded sizes (only applied via JS when in view) */
.panel.is-expanded .overlay {
  opacity: 1;
}

/* Base (mobile-first) expanded width — UPDATED */
.panel.is-expanded {
  flex-basis: 46vw;
}

/* >= 640px (sm) — UPDATED */
@media (min-width: 640px) {
  .panel.is-expanded {
    flex-basis: 34vw;
  }
}

/* >= 768px (md) — UPDATED */
@media (min-width: 768px) {
  .panel.is-expanded {
    flex-basis: 32vw;
  }
}

/* >= 1024px (lg) — UPDATED */
@media (min-width: 1024px) {
  .panel.is-expanded {
    flex-basis: 26vw;
  }
}



/* Inside this accordion, hide the line after an open item,
     and the line just before an open item */
[data-accordion] details[open]+.divider {
  display: none;
}

[data-accordion] .divider:has(+ details[open]) {
  display: none;
}

/* SEO Zoom Animation Styles */
#seo-zoom-overlay {
  will-change: transform, opacity;
  background: radial-gradient(circle at center, #ffffff 0%, #f0f9ff 100%);
}

#seo-zoom-overlay .zoom-content {
  will-change: transform, opacity;
}