/* ==========================================================================
   Services Page Styles — Exact Color & Font Match with VIAN Home Page (`style.css`)
   Layout: 1/2/3/4 Alternating Blocks (#ffffff & #f0f2f5) with Offset Outline Frames & Animations
   ========================================================================== */

/* Outer Services Body Section */
.services-showcase-section {
    position: relative;
    z-index: 10;
    overflow-x: hidden;
    padding: 0px;
}

/* Individual Alternating Service Blocks */
.service-showcase-block {
    position: relative;
    padding: 5rem 2.5rem;
    transition: background 0.4s ease, color 0.4s ease;
    overflow: visible; /* Allowed so images can overlap section boundaries */
}

/* Block 1 & 3: Clean White background matching Home Page (:root --bg-main #ffffff) */
.service-block-light {
    background: var(--bg-main, #ffffff);
    color: var(--text-primary, #0f172a);
}

[data-theme="dark"] .service-block-light {
    background: #0d0f17;
    color: var(--text-primary, #f8fafc);
}

/* Block 2 & 4: Soft Slate / Cool Grey background (#f0f2f5) alternating with white */
.service-block-dark {
    background: #f0f2f5;
    color: var(--text-primary, #0f172a);
    border-top: 1px solid rgba(226, 232, 240, 0.8);
   
}
.gr{
    border-bottom: 1px solid #3e3e3e !important;
    
    
}
.hj{
    border-bottom: 80px !important;
}

[data-theme="dark"] .service-block-dark {
    background: #111522;
    color: var(--text-primary, #f8fafc);
    border-color: rgba(147, 51, 234, 0.25);
}

/* Max Width Container */
.service-block-container {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.8rem;
    align-items: stretch; /* Both text and image columns match exact same grid height */
}

/* Reverse grid layout for even items (2 and 4) on desktop */
.service-block-reverse .service-block-container {
    grid-template-columns: 1fr 1fr;
}

/* ==========================================================================
   LEFT & RIGHT COLUMNS (TEXT SIDE VS IMAGE SIDE)
   ========================================================================== */
.service-text-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 5;
    height: 100%;
    min-height: 385px;
}

.service-content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Heading row putting 01, 02, 03, 04 right at the same position as the heading */
.service-heading-row {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

/* Display Numeral (01, 02, 03, 04) — exactly at heading position */
.service-big-numeral {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 25;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.03em;
    flex-shrink: 0;
    user-select: none;
}

/* Block 1 & 3 Numerals: Home Page Brand Purple-to-Blue Gradient */
.service-block-light .service-big-numeral {
    background: linear-gradient(135deg, var(--accent-purple, #581c87) 0%, var(--accent-blue, #3b82f6) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .service-block-light .service-big-numeral {
    background: linear-gradient(135deg, #c084fc 0%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Block 2 & 4 Numerals: Matching purple-blue gradient on #f0f2f5 */
.service-block-dark .service-big-numeral {
    background: linear-gradient(135deg, var(--accent-purple, #581c87) 0%, var(--accent-blue, #3b82f6) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .service-block-dark .service-big-numeral {
    background: linear-gradient(135deg, #c084fc 0%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Heading — exact Outfit typography matching Home Page section headings */
.service-heading {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: clamp(1.85rem, 2.8vw, 2.45rem);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0px;
    letter-spacing: -0.02em;
}

.service-block-light .service-heading {
    color: var(--text-primary, #0f172a);
}

[data-theme="dark"] .service-block-light .service-heading {
    color: var(--text-primary, #f8fafc);
}

.service-block-dark .service-heading {
    color: var(--text-primary, #0f172a);
}

[data-theme="dark"] .service-block-dark .service-heading {
    color: var(--text-primary, #f8fafc);
}

/* Horizontal rule immediately below heading matching home page accents */
.service-heading-divider {
    width: 100%;
    height: 2px;
    margin: 0.5rem 0 1rem 0;
    border: none;
    border-radius: 2px;
}

.service-block-light .service-heading-divider {
    background: linear-gradient(90deg, var(--accent-purple, #581c87), var(--accent-blue, #3b82f6), transparent);
}

[data-theme="dark"] .service-block-light .service-heading-divider {
    background: linear-gradient(90deg, #c084fc, #60a5fa, transparent);
}

.service-block-dark .service-heading-divider {
    background: linear-gradient(90deg, var(--accent-purple, #581c87), var(--accent-blue, #3b82f6), transparent);
}

[data-theme="dark"] .service-block-dark .service-heading-divider {
    background: linear-gradient(90deg, #c084fc, #60a5fa, transparent);
}

/* Subheader / Tagline — exact JetBrains Mono tech font matching Home Page badges */
.service-subheading {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.94rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1.6rem;
}

.service-block-light .service-subheading {
    color: var(--accent-purple, #581c87);
}

[data-theme="dark"] .service-block-light .service-subheading {
    color: #c084fc;
}

.service-block-dark .service-subheading {
    color: var(--accent-purple, #581c87);
}

[data-theme="dark"] .service-block-dark .service-subheading {
    color: #c084fc;
}

/* Paragraph Content Wrapper (replacing bullet list structure) */
.service-paragraph-content {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin-bottom: 0.5rem;
}

/* Individual descriptive paragraph — exact Inter font matching Home Page body text */
.service-desc-paragraph {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1.02rem;
    line-height: 1.78;
    letter-spacing: -0.01em;
}

.service-block-light .service-desc-paragraph {
    color: var(--text-secondary, #475569);
}

[data-theme="dark"] .service-block-light .service-desc-paragraph {
    color: var(--text-secondary, #cbd5e1);
}

.service-block-dark .service-desc-paragraph {
    color: var(--text-secondary, #475569);
}

[data-theme="dark"] .service-block-dark .service-desc-paragraph {
    color: var(--text-secondary, #cbd5e1);
}

/* Bulleted Paragraph List (kept as fallback) */
.service-bullet-list {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin-bottom: 2.2rem;
}

/* Bullet item */
.service-bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1rem;
    line-height: 1.75;
}

.service-block-light .service-bullet-item,
.service-block-dark .service-bullet-item {
    color: var(--text-secondary, #475569);
}

[data-theme="dark"] .service-block-light .service-bullet-item,
[data-theme="dark"] .service-block-dark .service-bullet-item {
    color: var(--text-secondary, #cbd5e1);
}

/* Bullet character • */
.service-bullet-char {
    font-size: 1.25rem;
    line-height: 1.45;
    flex-shrink: 0;
    font-weight: 700;
}

.service-block-light .service-bullet-char,
.service-block-dark .service-bullet-char {
    color: var(--accent-purple, #581c87);
}

[data-theme="dark"] .service-block-light .service-bullet-char,
[data-theme="dark"] .service-block-dark .service-bullet-char {
    color: #c084fc;
}

/* Pill Button wrapper alignment */
.service-action-pill-wrapper {
    align-self: flex-start;
    margin-top: 0.4rem;
}

.service-action-pill {
    margin-top: 0;
}


/* ==========================================================================
   IMAGE SIDE WITH EXACT OFFSET OUTLINE FRAME MATCHING HOME PAGE ACCENTS
   ========================================================================== */
.service-image-side {
    position: relative;
    z-index: 5;
    width: 95%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image container with continuous floating motion and exact matched height to content */
@keyframes floatServiceImage {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.015);
    }
}

@keyframes borderGlowPulse {
    0%, 100% {
        border-color: rgba(88, 28, 135, 0.28);
    }
    50% {
        border-color: var(--accent-blue, #3b82f6);
    }
}

.service-img-wrap {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 385px; /* Exactly matched height with service text content */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.22);
    background: #1e293b;
    border: 2px solid rgba(88, 28, 135, 0.25);
    animation: floatServiceImage 7s ease-in-out infinite, borderGlowPulse 5s ease-in-out infinite;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
}

.service-block-dark .service-img-wrap {
    animation-delay: 3.5s, 2.5s;
}

[data-theme="dark"] .service-img-wrap {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    border-color: rgba(192, 132, 252, 0.35);
}

.service-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-image-side:hover .service-img-wrap {
    animation-play-state: paused;
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 32px 64px rgba(88, 28, 135, 0.28);
}

.service-img-wrap:hover img {
    transform: scale(1.08);
}

/* Offset Fine-Line Outline Frame with continuous diagonal floating animation */
@keyframes floatOutlineTR {
    0%, 100% {
        transform: translate(0px, 0px);
        border-color: rgba(88, 28, 135, 0.35);
        box-shadow: 0 0 10px rgba(88, 28, 135, 0.1);
    }
    50% {
        transform: translate(12px, -12px);
        border-color: var(--accent-purple, #581c87);
        box-shadow: 0 0 26px rgba(88, 28, 135, 0.32);
    }
}

@keyframes floatOutlineBL {
    0%, 100% {
        transform: translate(0px, 0px);
        border-color: rgba(88, 28, 135, 0.35);
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.1);
    }
    50% {
        transform: translate(-12px, 12px);
        border-color: var(--accent-blue, #3b82f6);
        box-shadow: 0 0 26px rgba(59, 130, 246, 0.32);
    }
}

.service-img-outline {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    z-index: 1;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.service-block-light .service-img-outline,
.service-block-dark .service-img-outline {
    border: 2px solid rgba(88, 28, 135, 0.35);
}

[data-theme="dark"] .service-block-light .service-img-outline,
[data-theme="dark"] .service-block-dark .service-img-outline {
    border-color: rgba(192, 132, 252, 0.45);
}

/* Block 1 & 3 (Right image): outline offset Top-Right (-26px top, -26px right) with continuous float */
.outline-top-right {
    top: -26px;
    right: -26px;
    animation: floatOutlineTR 6.5s ease-in-out infinite;
}

/* Block 2 & 4 (Left image): outline offset Bottom-Left (-26px bottom, -26px left) with continuous float */
.outline-bottom-left {
    bottom: -26px;
    left: -26px;
    animation: floatOutlineBL 6.5s ease-in-out infinite;
    animation-delay: 3.25s;
}

/* Hover fine-tuning on outline */
.service-image-side:hover .outline-top-right {
    animation-play-state: paused;
    transform: translate(-8px, 8px);
    border-color: var(--accent-purple, #581c87);
    box-shadow: 0 0 28px rgba(88, 28, 135, 0.35);
}

.service-image-side:hover .outline-bottom-left {
    animation-play-state: paused;
    transform: translate(8px, -8px);
    border-color: var(--accent-blue, #3b82f6);
    box-shadow: 0 0 28px rgba(59, 130, 246, 0.35);
}

/* Overlapping image alignment balanced for equal height container */
.overlap-down {
    margin-bottom: 0;
    z-index: 12;
}

.overlap-up {
    margin-top: 0;
    z-index: 12;
}


/* ==========================================================================
   SCROLL INTERSECTION ANIMATIONS (`and add annimations`)
   ========================================================================== */
.animate-on-scroll {
    opacity: 0;
    transition: all 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Initial hidden states */
.anim-fade-up {
    transform: translateY(45px);
}

.anim-fade-left {
    transform: translateX(-45px);
}

.anim-fade-right {
    transform: translateX(45px);
}

.anim-scale-up {
    transform: scale(0.88);
}

/* Animated active state when inside viewport */
.animate-on-scroll.in-view {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Stagger delay helpers */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }


/* ==========================================================================
   RESPONSIVE DESIGN FOR SERVICES PAGE
   ========================================================================== */
@media (max-width: 992px) {
    .service-block-container,
    .service-block-reverse .service-block-container {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    /* On mobile/tablet, always show Text first, Image second */
    .service-block-reverse .service-text-side {
        order: 1;
    }

    .service-block-reverse .service-image-side {
        order: 2;
    }

    .service-image-side {
        width: 100%;
        max-width: 100% !important;
    }

    .overlap-down,
    .overlap-up {
        margin-bottom: 0;
        margin-top: 0;
    }

    .outline-top-right {
        top: -16px;
        right: -16px;
    }

    .outline-bottom-left {
        bottom: -16px;
        left: -16px;
    }
}

@media (max-width: 576px) {
    .service-showcase-block {
        padding: 4.5rem 1.4rem;
    }

    .service-heading-row {
        gap: 0.6rem;
    }

    .service-big-numeral {
        font-size: 1.85rem;
    }

    .service-heading {
        font-size: 1.55rem;
    }

    .service-subheading {
        font-size: 0.82rem;
    }
}

/* ==========================================================================
   PERFECT COLOR COMBINATION OVERRIDES
   ========================================================================== */
.services-showcase-section {
    background: #0a0022;
}
.service-block-light {
    background: #f8fafc !important;
}
.service-block-dark {
    background: var(--bg-section-cloud, #111522) !important;
}
.service-block-light .service-heading {
    background: linear-gradient(90deg, #000000 0%, #35177b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow: none !important;
}
.service-block-dark .service-heading {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: #f8fafc !important;
    text-shadow: 0 4px 25px rgba(192, 132, 252, 0.35) !important;
}
.service-block-light .service-desc-paragraph,
.service-block-light .service-bullet-item {
    color: #475569 !important;
}
.service-block-dark .service-desc-paragraph,
.service-block-dark .service-bullet-item {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .service-block-light .service-heading {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: #f8fafc !important;
    text-shadow: 0 4px 25px rgba(192, 132, 252, 0.35) !important;
}
[data-theme="dark"] .service-block-light .service-desc-paragraph,
[data-theme="dark"] .service-block-light .service-bullet-item {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .service-block-light { background: var(--bg-section-ecosystem) !important; }
[data-theme="dark"] .service-block-dark { background: var(--bg-section-cloud) !important; }

/* Global Responsive Adjustments for Tab & Mobile (Equal 60px padding) */
@media screen and (max-width: 1024px) {
    section,
    .hero-stage-container,
    .fanned-ecosystem-section,
    .dreamy-cloud-section,
    .our-works-showcase-section,
    .creative-infographic-section,
    .faq-section,
    .bottom-cta-heading-section,
    .client-showcase-section,
    .about-hero,
    .contact-hero,
    .portfolio-hero,
    .services-hero,
    .section-padding,
    main > section {
        padding: 60px 10px !important;
        box-sizing: border-box !important;
    }
    html, body {
        overflow-x: hidden;
    }
}

@media screen and (max-width: 768px) {
    section,
    .hero-stage-container,
    .fanned-ecosystem-section,
    .dreamy-cloud-section,
    .our-works-showcase-section,
    .creative-infographic-section,
    .faq-section,
    .bottom-cta-heading-section,
    .client-showcase-section,
    .about-hero,
    .contact-hero,
    .portfolio-hero,
    .services-hero,
    .section-padding,
    main > section {
        padding: 60px 10px !important;
        box-sizing: border-box !important;
    }
}

/* Tablet view (769px - 1024px) padding update */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    section,
    .hero-stage-container,
    .fanned-ecosystem-section,
    .dreamy-cloud-section,
    .our-works-showcase-section,
    .creative-infographic-section,
    .faq-section,
    .bottom-cta-heading-section,
    .client-showcase-section,
    .about-hero,
    main > section {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }
}

/* Tablet view spacing reductions for services showcase blocks */
@media screen and (max-width: 1024px) {
    .service-showcase-block {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .service-block-container,
    .service-block-reverse .service-block-container {
        gap: 2rem !important; /* Reduced from 3.5rem/4.8rem */
    }
}

/* Aggressive tablet view spacing reductions (Fixed overlap) */
@media screen and (max-width: 1024px) {
    .service-showcase-block {
        padding-top: 0rem !important;
        padding-bottom: 5rem !important;
    }
    .service-block-container,
    .service-block-reverse .service-block-container {
        gap: 1.5rem !important;
    }
    .service-text-side {
        margin-bottom: 0 !important;
    }
    .service-image-side {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Fix gap below banner on mobile and tablet */
@media screen and (max-width: 1024px) {
    #servicesShowcaseBody {
        padding-top: 0 !important;
    }
    #esperBannerHero {
        padding-bottom: 70 !important;
    }
}

/* Reduce top and bottom padding for the services banner section */
.services-page-body #esperBannerHero {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* ==========================================================================
   iPhone Pro Max (430x932) Responsiveness Fixes
   ========================================================================== */
@media (max-width: 430px) {
    .services-grid,
    .service-cards-container,
    .pricing-grid {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    .service-card,
    .pricing-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
    .service-details,
    .service-content {
        padding: 15px !important;
    }
}