/* =============================================================================
   Responsive Full-Viewport Height Sections & Scroll Snapping
   Target Class: .full-viewport-section (Apply this to ANY Row settings in Themify)
   ============================================================================= */

/* Enable scroll-snapping only on desktop screens */
@media (min-width: 1025px) {
    html {
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }

    /* Disable scroll-snapping when the builder editor is active on the page */
    html.themify-builder-active,
    html.tb-builder-active,
    html:has(body.themify-builder-active),
    html:has(body.tb-builder-active),
    html:has(body[class*="themify-builder-active"]),
    html:has(.tb_active_builder) {
        scroll-snap-type: none !important;
        scroll-behavior: auto !important;
    }

    .themify_builder .full-viewport-section {
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        /* Align row to snap at start */
        scroll-snap-align: start !important;

        /* Offset header height so content isn't covered */
        scroll-margin-top: 72px !important;
        box-sizing: border-box !important;
    }

    /* Disable snap alignment when editing in builder */
    body.themify-builder-active .full-viewport-section,
    body.tb-builder-active .full-viewport-section,
    body[class*="themify-builder-active"] .full-viewport-section,
    .tb_active_builder .full-viewport-section,
    .full-viewport-section.tb_active_row {
        scroll-snap-align: none !important;
    }
}

/* Prevent horizontal scrollbars from 100vw stretch breakout */
body {
    overflow-x: hidden !important;
}

.themify_builder .inter-sans-serif {
    font-family: 'Inter', sans-serif;
}

.themify_builder .plus-jakarta-sans-sans-serif {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.themify_builder .font-weight-700 {
    font-weight: 700;
}

.themify_builder .font-weight-600 {
    font-weight: 600;
}

.themify_builder .font-weight-500 {
    font-weight: 500;
}

/* Hero Section */
/* -----------------------------------------------------------------------
   1. Shared Button Styles (Pill Shape, Typography, Layout, Transitions)
   Uses multiple specificity layers & class chains to override Themify defaults
   ----------------------------------------------------------------------- */
.hero-pricing-button .ui.builder_button,
.hero-pricing-button.module-buttons .ui.builder_button,
.themify_builder .hero-pricing-button .ui.builder_button,
.themify_builder .hero-pricing-button a.builder_button,
.hero-portfolio-button .ui.builder_button,
.hero-portfolio-button.module-buttons .ui.builder_button,
.themify_builder .hero-portfolio-button .ui.builder_button,
.themify_builder .hero-portfolio-button a.builder_button {
    /* Fonts & Typography */
    font-family: 'Inter', sans-serif !important;
    font-family: var(--reference-font-body, var(--cb-font-body, 'Inter', sans-serif)) !important;
}

/* =============================================================================
   Hero Row Background Dot Grid Pattern
   Target ID: #hero-row (Set the Row's CSS ID in Themify to "hero-row")
   ============================================================================= */

.themify_builder #hero-row,
.themify_builder .hero-row {
    position: relative !important;

    /* Force 100% viewport width breakout (bypasses JS calculations/flashes) */
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;

    /* Layer the dot grid on top of whatever background color is set in Themify */
    background-image: radial-gradient(circle, rgba(204, 195, 216, 0.4) 1px, transparent 1px) !important;
    background-image: radial-gradient(circle, var(--reference-outline, rgba(204, 195, 216, 0.4)) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
    background-repeat: repeat !important;
}

/* Hero Section */

/* Services Section */

/* Icon */
.service-card-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaddff;
    border-radius: 1rem;
    margin-bottom: 28px;
    font-size: 24px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.service-card:hover .service-card-icon {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(112, 47, 229, 0.15);
}

.service-card--highlighted .service-card-icon {
    background: rgba(255, 255, 255, 0.2);
}

.service-card--highlighted:hover .service-card-icon {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Services Section */

/* Process Section */
.themify_builder .process-row {
    background-color: #111317 !important;
    background-color: var(--cb-surface-dark, #111317) !important;
    color: var(--cb-on-dark-text, #F8F9FA) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Ensure column content is above the absolute-positioned backgrounds */
.themify_builder .process-row>.row_inner {
    position: relative !important;
    z-index: 2 !important;
}

/* Ambient purple/blue glow behind content */
.themify_builder .process-row::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(138, 79, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(74, 144, 226, 0.05) 0%, transparent 50%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Subtle topographical SVG line pattern */
.themify_builder .process-row::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    opacity: 0.06 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cpath d='M0 200 Q100 150 200 200 T400 200' stroke='%238A4FFF' fill='none' stroke-width='1'/%3E%3Cpath d='M0 220 Q100 170 200 220 T400 220' stroke='%238A4FFF' fill='none' stroke-width='1'/%3E%3Cpath d='M0 180 Q100 130 200 180 T400 180' stroke='%234A90E2' fill='none' stroke-width='1'/%3E%3Cpath d='M0 240 Q100 190 200 240 T400 240' stroke='%234A90E2' fill='none' stroke-width='1'/%3E%3Cpath d='M0 160 Q100 110 200 160 T400 160' stroke='%238A4FFF' fill='none' stroke-width='0.8'/%3E%3C/svg%3E") !important;
    background-size: 400px 400px !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* -----------------------------------------------------------------------
   Step Styling
   ----------------------------------------------------------------------- */
.process-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #8A4FFF, #4A90E2);
    border-radius: 50%;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(138, 79, 255, 0.3);
}

.process-step {
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: rgba(255, 255, 255, 0.02);
}

.process-step:hover {
    border-color: rgba(138, 79, 255, 0.3);
    background: rgba(255, 255, 255, 0.04);
}

/* Process Section */

/* About Section */
.timeline-item:hover {
    background: linear-gradient(90deg, rgba(234, 221, 255, 0.3), transparent);
}

/* About Section */