.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-800 {
    font-weight: 800;
}

.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: 28px;
    height: 28px;
    background: linear-gradient(135deg, #8A4FFF, #4A90E2);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(138, 79, 255, 0.25);
}

.process-step-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(138, 79, 255, 0.08);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.process-step:hover .process-step-icon {
    background: rgba(138, 79, 255, 0.16);
    transform: scale(1.05);
}

/* Process Section */

/* About Section */

.about-pillar-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaddff;
    border-radius: 0.5rem;
    font-size: 22px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.about-pillar-card:hover .about-pillar-icon {
    background: #702fe5;
    color: #ffffff;
}

/* About Section */

/* Pricing Section */

.pricing-check {
    width: 20px;
    height: 20px;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #702fe5;
    border-radius: 50%;
}

/* Constrain the checkmark module container to the exact size of the checkmark (20px x 20px) */
/* Horizontal alignment for separate icon + text modules in columns */
.themify_builder .pricing-feature-line,
.themify_builder .tb_jl3x826 {
    position: relative !important;
    display: block !important;
    padding-left: 32px !important;
    /* Space for the checkmark */
    box-sizing: border-box !important;
}

/* Position the checkmark absolutely so it takes NO height space in the document flow */
.themify_builder .pricing-feature-line .module-text:has(.pricing-check),
.themify_builder .tb_jl3x826 .module-text:has(.pricing-check),
.themify_builder .tb_ue9o826 {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure the checkmark wrappers have no height impact */
.themify_builder .module-text:has(.pricing-check) .tb_text_wrap,
.themify_builder .module-text:has(.pricing-check) p {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Not included feature icon style */
.pricing-check.not-included {
    background: #ede5f4;
    color: #8e8a94;
}

/* Container for the tabs (the outer pill background) */
.themify_builder .custom-pricing-tabs .tab-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 40px !important;
    background: #ede5f4 !important;
    border-radius: 9999px !important;
    padding: 4px !important;
    border: none !important;
    float: none !important;
    box-sizing: border-box !important;
    font-weight: 600;
}

/* Force inner containers of the pricing card to be static so the absolute badge aligns to the card border */
.themify_builder .pricing-card .module_subrow,
.themify_builder .pricing-card .module_column {
    position: static !important;
}

/* Re-establish position relative on the card itself so the badge positions against it */
.themify_builder .pricing-card {
    position: relative !important;
    overflow: visible !important;
}

.themify_builder .pricing-badge {
    max-width: max-content !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

/* While editing in Themify Builder, keep the badge static and restore relative columns/subrows so it can be edited easily */
body.themify-builder-active .pricing-badge,
body.tb-builder-active .pricing-badge,
body[class*="themify-builder-active"] .pricing-badge,
.tb_active_builder .pricing-badge {
    position: static !important;
    transform: none !important;
    margin: 10px auto 20px !important;
    display: inline-flex !important;
}

body.themify-builder-active .pricing-card .module_subrow,
body.themify-builder-active .pricing-card .module_column,
body.tb-builder-active .pricing-card .module_subrow,
body.tb-builder-active .pricing-card .module_column,
.tb_active_builder .pricing-card .module_subrow,
.tb_active_builder .pricing-card .module_column {
    position: relative !important;
}

/* Pricing Section */

/* =============================================================================
   FAQ Accordion overrides for Themify (.webdesign-faq)
   ============================================================================= */

/* Question Link (Title) */
.themify_builder .webdesign-faq a.tb_title_accordion {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Title text wrap inside anchor */
.themify_builder .webdesign-faq .accordion-title-wrap {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    display: inline !important;
}

/* Title Hover & Open/Active states (aria-expanded="true") */
.themify_builder .webdesign-faq a.tb_title_accordion[aria-expanded="true"] {
    background-color: #f9f1ff !important;
    color: #702fe5 !important;
}

/* Icon implementation via CSS pseudo-element (Plus sign) */
.themify_builder .webdesign-faq a.tb_title_accordion::after {
    content: '+' !important;
    position: absolute !important;
    right: 32px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    color: #702fe5 !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    line-height: 1 !important;
    display: inline-block !important;
    pointer-events: none !important;
}

/* Open icon state: turns plus (+) into multiplication/cross (×) by rotating it 45 degrees */
.themify_builder .webdesign-faq a.tb_title_accordion[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(45deg) !important;
    color: #8a4fff !important;
}

/* Inner text container of the answer */
.themify_builder .webdesign-faq .accordion-content .tb_text_wrap,
.themify_builder .webdesign-faq .accordion-content p {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
}