.elementor-kit-10{--e-global-color-primary:#FF6B35;--e-global-color-secondary:#1A1A2E;--e-global-color-text:#7A7A7A;--e-global-color-accent:#FF8C5A;--e-global-color-531ac7d:#FF8C5A;--e-global-color-28bc2bd:#0F0F1A;--e-global-color-fe0de25:#080810;--e-global-color-bac1060:#8892A0;--e-global-color-6ec38ee:#B8C0CC;--e-global-color-7ae6ba1:#FFFFFF;--e-global-typography-primary-font-family:"Outfit";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Space Mono";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-size:16px;font-weight:400;}.elementor-kit-10 e-page-transition{background-color:#FFBC7D;}.elementor-kit-10 h1{font-size:48px;font-weight:800;}.elementor-kit-10 h2{font-size:36px;font-weight:700;}.elementor-kit-10 h3{font-size:24px;font-weight:700;}.elementor-kit-10 h4{font-size:20px;font-weight:600;}.elementor-kit-10 h5{font-size:18px;font-weight:500;}.elementor-kit-10 h6{font-size:16px;font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =====================================================
   APPXTREME - ELEMENTOR CUSTOM CSS
   Add this CSS to: Elementor > Site Settings > Custom CSS
   Or: Appearance > Customize > Additional CSS
   ===================================================== */

/* =====================================================
   1. CSS VARIABLES (Root)
   ===================================================== */
:root {
    --primary: #FF6B35;
    --primary-light: #FF8C5A;
    --dark: #0F0F1A;
    --darker: #080810;
    --secondary: #1A1A2E;
    --gray: #8892A0;
    --gray-light: #B8C0CC;
    --light: #FFFFFF;
    --gradient: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
}

/* =====================================================
   2. TYPOGRAPHY - Base Styles
   Where: Applied globally via Elementor Site Settings
   ===================================================== */
body {
    font-family: 'Outfit', sans-serif !important;
    background: var(--darker) !important;
    color: var(--light) !important;
    line-height: 1.6;
}

/* =====================================================
   3. SECTION LABEL
   Where: Add class "section-label" to Text Editor widget
   Usage: Small uppercase labels above headings (e.g., "SERVICES", "PRICING")
   ===================================================== */
.section-label,
.elementor-widget-text-editor.section-label .elementor-widget-container p {
    font-family: 'Space Mono', monospace !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    color: var(--primary) !important;
    margin-bottom: 16px !important;
}

/* =====================================================
   4. GRADIENT TEXT HIGHLIGHT
   Where: Add class "highlight" to Heading widget
   Usage: Text with orange gradient (e.g., "Dream Website")
   ===================================================== */
.highlight,
.elementor-widget-heading.highlight .elementor-heading-title,
.highlight span {
    background: var(--gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* =====================================================
   5. PAGE HEADER SECTION
   Where: Add class "page-header" to Section
   Usage: Top section of each page with breadcrumb
   ===================================================== */
.page-header {
    padding: 160px 0 80px !important;
    background: var(--dark) !important;
    position: relative;
}

.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(255, 107, 53, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

/* =====================================================
   6. BREADCRUMB
   Where: Add class "breadcrumb" to Text Editor widget
   Usage: Navigation path (Home → Services → Web Design)
   ===================================================== */
.breadcrumb,
.elementor-widget-text-editor.breadcrumb .elementor-widget-container p {
    font-size: 14px !important;
    color: var(--gray) !important;
    margin-bottom: 16px !important;
}

.breadcrumb a {
    color: var(--gray) !important;
    text-decoration: none !important;
    transition: color 0.3s;
}

.breadcrumb a:hover {
    color: var(--primary) !important;
}

/* =====================================================
   7. BUTTONS - Primary
   Where: Add class "btn-primary" to Button widget
   Usage: Main CTA buttons (orange gradient)
   ===================================================== */
.btn-primary .elementor-button,
.elementor-widget-button.btn-primary .elementor-button {
    background: var(--gradient) !important;
    color: var(--light) !important;
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4) !important;
    border-radius: 50px !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-primary .elementor-button:hover,
.elementor-widget-button.btn-primary .elementor-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(255, 107, 53, 0.5) !important;
}

/* =====================================================
   8. BUTTONS - Outline
   Where: Add class "btn-outline" to Button widget
   Usage: Secondary buttons (transparent with border)
   ===================================================== */
.btn-outline .elementor-button,
.elementor-widget-button.btn-outline .elementor-button {
    background: transparent !important;
    color: var(--light) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50px !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.btn-outline .elementor-button:hover,
.elementor-widget-button.btn-outline .elementor-button:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* =====================================================
   9. HERO SECTION
   Where: Add class "hero-section" to Section
   Usage: Main hero area with two columns
   ===================================================== */
.hero-section {
    background: var(--darker) !important;
}

.hero-section .elementor-container {
    gap: 60px !important;
    align-items: center !important;
}

/* =====================================================
   10. HERO ICON (Large circular icon)
   Where: Add class "hero-icon" to Icon widget or Column
   Usage: Large decorative icon in hero sections
   ===================================================== */
.hero-icon,
.elementor-widget-icon.hero-icon .elementor-icon {
    width: 280px !important;
    height: 280px !important;
    background: rgba(255, 107, 53, 0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 100px !important;
}

/* =====================================================
   11. FEATURE CARDS
   Where: Add class "feature-card" to Column
   Usage: Service feature boxes with icons
   ===================================================== */
.feature-card {
    background: rgba(15, 15, 26, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    padding: 32px !important;
    transition: all 0.3s ease !important;
}

.feature-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(255, 107, 53, 0.3) !important;
}

/* =====================================================
   12. FEATURE ICON BOX
   Where: Add class "feature-icon" to Icon widget
   Usage: Icon inside feature cards
   ===================================================== */
.feature-icon .elementor-icon,
.elementor-widget-icon.feature-icon .elementor-icon {
    width: 64px !important;
    height: 64px !important;
    background: rgba(255, 107, 53, 0.1) !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    margin-bottom: 20px !important;
    transition: all 0.3s ease !important;
}

.feature-card:hover .feature-icon .elementor-icon {
    background: var(--gradient) !important;
}

/* =====================================================
   13. PRICING CARDS - Container
   Where: Add class "pricing-card" to Column
   Usage: Pricing tier columns
   ===================================================== */
.pricing-card {
    background: rgba(26, 26, 46, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 24px !important;
    padding: 40px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.pricing-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(255, 107, 53, 0.3) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

/* =====================================================
   14. PRICING CARDS - Featured (Popular)
   Where: Add class "pricing-featured" to Column
   Usage: The middle/highlighted pricing tier
   ===================================================== */
.pricing-featured {
    background: rgba(26, 26, 46, 0.6) !important;
    border: 1px solid var(--primary) !important;
    border-radius: 24px !important;
    padding: 40px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.pricing-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient);
    border-radius: 24px 24px 0 0;
}

.pricing-featured:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

/* =====================================================
   15. POPULAR BADGE
   Where: Add class "popular-badge" to Text Editor widget
   Usage: "Most Popular" badge on pricing cards
   ===================================================== */
.popular-badge,
.elementor-widget-text-editor.popular-badge .elementor-widget-container {
    text-align: center !important;
}

.popular-badge span,
.popular-badge .badge {
    background: var(--gradient) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: inline-block !important;
}

/* =====================================================
   16. PRICE DISPLAY
   Where: Add class "price-amount" to Heading widget
   Usage: Large price numbers (R4,999)
   ===================================================== */
.price-amount .elementor-heading-title,
.elementor-widget-heading.price-amount .elementor-heading-title {
    font-size: 56px !important;
    font-weight: 800 !important;
    background: var(--gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    line-height: 1 !important;
}

/* =====================================================
   17. PRICING FEATURES LIST
   Where: Add class "pricing-features" to Icon List widget
   Usage: Feature list in pricing cards
   ===================================================== */
.pricing-features .elementor-icon-list-items {
    list-style: none !important;
}

.pricing-features .elementor-icon-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 15px !important;
    color: var(--gray-light) !important;
    margin-bottom: 14px !important;
}

.pricing-features .elementor-icon-list-icon {
    color: var(--primary) !important;
    font-weight: 700 !important;
    width: 20px !important;
    height: 20px !important;
    background: rgba(255, 107, 53, 0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}

/* =====================================================
   18. PROCESS STEPS
   Where: Add class "process-step" to Column
   Usage: Numbered process/workflow steps
   ===================================================== */
.process-step {
    text-align: center !important;
    position: relative !important;
}

.process-step::after {
    content: '→';
    position: absolute;
    right: -20px;
    top: 30px;
    font-size: 24px;
    color: var(--primary);
}

.process-step:last-child::after {
    display: none;
}

/* =====================================================
   19. STEP NUMBER
   Where: Add class "step-number" to Heading widget
   Usage: Circle with number inside (1, 2, 3, 4)
   ===================================================== */
.step-number .elementor-heading-title,
.elementor-widget-heading.step-number .elementor-heading-title {
    width: 60px !important;
    height: 60px !important;
    background: var(--gradient) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    margin: 0 auto 16px !important;
    color: white !important;
}

/* =====================================================
   20. FAQ SECTION
   Where: Add class "faq-section" to Section
   Usage: FAQ accordion container
   ===================================================== */
.faq-section {
    position: relative;
}

.faq-section .elementor-accordion {
    max-width: 800px !important;
    margin: 0 auto !important;
}

.faq-section .elementor-accordion-item {
    background: rgba(26, 26, 46, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
}

.faq-section .elementor-tab-title {
    padding: 24px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--light) !important;
    background: transparent !important;
    border: none !important;
}

.faq-section .elementor-tab-title:hover {
    color: var(--primary) !important;
}

.faq-section .elementor-accordion-icon {
    color: var(--primary) !important;
}

.faq-section .elementor-tab-content {
    padding: 0 24px 24px !important;
    color: var(--gray-light) !important;
    font-size: 15px !important;
    border: none !important;
    background: transparent !important;
}

/* =====================================================
   21. CTA SECTION
   Where: Add class "cta-section" to Section
   Usage: Call-to-action sections with centered content
   ===================================================== */
.cta-section {
    background: var(--secondary) !important;
    position: relative !important;
    text-align: center !important;
}

.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 107, 53, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

/* =====================================================
   22. SERVICE CARDS (Homepage)
   Where: Add class "service-card" to Column
   Usage: Service boxes on homepage/services page
   ===================================================== */
.service-card {
    background: rgba(26, 26, 46, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    padding: 32px !important;
    transition: all 0.3s ease !important;
}

.service-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(255, 107, 53, 0.3) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
}

/* =====================================================
   23. SERVICE CARD - NEW Badge
   Where: Add class "new-badge" to Text Editor widget
   Usage: "NEW" tag for AI Automation service
   ===================================================== */
.new-badge span,
.elementor-widget-text-editor.new-badge span {
    background: var(--gradient) !important;
    color: white !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}

/* =====================================================
   24. STATS COUNTER
   Where: Add class "stat-counter" to Counter widget
   Usage: Statistics numbers (50+, 100%, 8+)
   ===================================================== */
.stat-counter .elementor-counter-number-wrapper {
    font-size: 56px !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
}

.stat-counter .elementor-counter-title {
    font-size: 16px !important;
    color: var(--gray-light) !important;
}

/* =====================================================
   25. TESTIMONIAL CARDS
   Where: Add class "testimonial-card" to Column
   Usage: Client review/testimonial boxes
   ===================================================== */
.testimonial-card {
    background: rgba(26, 26, 46, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    padding: 32px !important;
}

.testimonial-card .elementor-star-rating {
    color: var(--primary) !important;
}

/* =====================================================
   26. PORTFOLIO CARDS
   Where: Add class "portfolio-card" to Column
   Usage: Project showcase items
   ===================================================== */
.portfolio-card {
    background: rgba(26, 26, 46, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.portfolio-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(255, 107, 53, 0.3) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

.portfolio-card img {
    transition: transform 0.3s ease !important;
}

.portfolio-card:hover img {
    transform: scale(1.05) !important;
}

/* =====================================================
   27. FILTER BUTTONS (Portfolio)
   Where: Add class "filter-btn" to Button widget
   Usage: Category filter buttons
   ===================================================== */
.filter-btn .elementor-button {
    padding: 12px 24px !important;
    background: rgba(26, 26, 46, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50px !important;
    color: var(--gray-light) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.filter-btn.active .elementor-button,
.filter-btn .elementor-button:hover {
    background: var(--gradient) !important;
    border-color: transparent !important;
    color: white !important;
}

/* =====================================================
   28. SKILL CARDS
   Where: Add class "skill-card" to Column
   Usage: Technology/skill boxes on About page
   ===================================================== */
.skill-card {
    background: rgba(15, 15, 26, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    text-align: center !important;
}

/* =====================================================
   29. CONTACT FORM STYLING
   Where: Add class "contact-form" to Form widget container
   Usage: Contact page form
   ===================================================== */
.contact-form .elementor-field-group {
    margin-bottom: 20px !important;
}

.contact-form .elementor-field {
    background: rgba(15, 15, 26, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    color: var(--light) !important;
    font-size: 15px !important;
}

.contact-form .elementor-field:focus {
    border-color: var(--primary) !important;
    outline: none !important;
}

.contact-form .elementor-field-label {
    color: var(--light) !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

.contact-form .elementor-button {
    background: var(--gradient) !important;
    border-radius: 50px !important;
    padding: 16px 32px !important;
    font-weight: 600 !important;
}

/* =====================================================
   30. DARK SECTION BACKGROUNDS
   Where: Add these classes to Section widgets
   ===================================================== */
.bg-darker { background: var(--darker) !important; }
.bg-dark { background: var(--dark) !important; }
.bg-secondary { background: var(--secondary) !important; }

/* =====================================================
   31. AI SERVICE CARDS
   Where: Add class "ai-card" to Column
   Usage: AI Automation service feature cards
   ===================================================== */
.ai-card {
    background: rgba(15, 15, 26, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    transition: all 0.3s ease !important;
}

.ai-card:hover {
    border-color: rgba(255, 107, 53, 0.3) !important;
}

/* =====================================================
   32. BENEFIT CARDS
   Where: Add class "benefit-card" to Column
   Usage: Benefit/feature highlight boxes
   ===================================================== */
.benefit-card {
    background: rgba(26, 26, 46, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    text-align: center !important;
}

.benefit-card .elementor-icon {
    width: 50px !important;
    height: 50px !important;
    background: var(--gradient) !important;
    border-radius: 50% !important;
    color: white !important;
    margin: 0 auto 16px !important;
}

/* =====================================================
   33. RESPONSIVE ADJUSTMENTS
   ===================================================== */
@media (max-width: 1024px) {
    .process-step::after {
        display: none !important;
    }
    
    .hero-icon,
    .elementor-widget-icon.hero-icon .elementor-icon {
        width: 200px !important;
        height: 200px !important;
        font-size: 60px !important;
    }
}

@media (max-width: 768px) {
    .page-header {
        padding: 120px 0 60px !important;
    }
    
    .pricing-card,
    .pricing-featured {
        padding: 30px !important;
    }
    
    .price-amount .elementor-heading-title {
        font-size: 42px !important;
    }
    
    .stat-counter .elementor-counter-number-wrapper {
        font-size: 40px !important;
    }
}

/* =====================================================
   34. UTILITY CLASSES
   ===================================================== */
.text-center { text-align: center !important; }
.text-primary { color: var(--primary) !important; }
.text-gray { color: var(--gray) !important; }
.text-gray-light { color: var(--gray-light) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-24 { margin-bottom: 24px !important; }
.mb-32 { margin-bottom: 32px !important; }
.mb-48 { margin-bottom: 48px !important; }/* End custom CSS */