{"id":2984,"date":"2023-05-08T11:36:51","date_gmt":"2023-05-08T11:36:51","guid":{"rendered":"https:\/\/themepanthers.com\/wp\/copygen\/v1\/?page_id=2984"},"modified":"2026-02-28T08:05:24","modified_gmt":"2026-02-28T08:05:24","slug":"about","status":"publish","type":"page","link":"https:\/\/ary-themes.com\/zh-CN\/about\/","title":{"rendered":"About"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2984\" class=\"elementor elementor-2984\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9c2f053 e-con-full e-flex e-con e-parent\" data-id=\"9c2f053\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d632e83 elementor-widget elementor-widget-shortcode\" data-id=\"d632e83\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    \r\n    <!-- FontAwesome -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n    \r\n\r\n    \r\n    <style>\r\n        :root {\r\n            --art-about-primary-color: #7c3aed;\r\n            --art-about-primary-dark: #6d28d9;\r\n            --art-about-primary-light: #a78bfa;\r\n            --art-about-secondary: #0891b2;\r\n            --art-about-secondary-dark: #0e7490;\r\n            --art-about-success: #10b981;\r\n            --art-about-warning: #f59e0b;\r\n            --art-about-danger: #ef4444;\r\n            --art-about-dark: #1e293b;\r\n            --art-about-darker: #0f172a;\r\n            --art-about-light: #f8fafc;\r\n            --art-about-gray: #64748b;\r\n            --art-about-gray-light: #e2e8f0;\r\n            --art-about-border: #334155;\r\n            --art-about-gradient: linear-gradient(135deg, #7c3aed 0%, #0891b2 100%);\r\n            --art-about-gradient-2: linear-gradient(135deg, #6d28d9 0%, #0e7490 100%);\r\n            --art-about-gradient-3: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);\r\n        }\r\n        \r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n        \r\n\r\n        \/* Hero Section *\/\r\n        .art-about-hero {\r\n            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);\r\n            padding: 120px 0 80px;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .art-about-hero::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            background: url('https:\/\/ary-themes.com\/wp-content\/uploads\/2026\/02\/About-Ary-Themes.jpg') center\/cover;\r\n            opacity: 0.1;\r\n            z-index: 0;\r\n        }\r\n        \r\n        .art-about-hero::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: -50%;\r\n            right: -10%;\r\n            width: 500px;\r\n            height: 500px;\r\n            background: radial-gradient(circle, rgba(124, 58, 237, 0.2) 0%, rgba(124, 58, 237, 0) 70%);\r\n            border-radius: 50%;\r\n            z-index: 0;\r\n        }\r\n        \r\n        .art-about-hero-content {\r\n            position: relative;\r\n            z-index: 2;\r\n            text-align: center;\r\n        }\r\n        \r\n        .art-about-hero h1 {\r\n            font-size: 3.5rem;\r\n            font-weight: 800;\r\n            color: white;\r\n            margin-bottom: 20px;\r\n            line-height: 1.2;\r\n        }\r\n        \r\n        .art-about-hero p {\r\n            font-size: 1.3rem;\r\n            color: rgba(255, 255, 255, 0.85);\r\n            margin-bottom: 40px;\r\n            max-width: 700px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n        }\r\n        \r\n        .art-about-hero-buttons {\r\n            display: flex;\r\n            gap: 15px;\r\n            flex-wrap: wrap;\r\n            justify-content: center;\r\n        }\r\n        \r\n        .art-about-btn-primary {\r\n            background: var(--art-about-primary-color);\r\n            color: white;\r\n            padding: 14px 30px;\r\n            border-radius: 50px;\r\n            font-weight: 600;\r\n            text-decoration: none;\r\n            display: inline-block;\r\n            transition: all 0.3s ease;\r\n            border: 2px solid var(--art-about-primary-color);\r\n            font-size: 1.1rem;\r\n        }\r\n        \r\n        .art-about-btn-primary:hover {\r\n            background: transparent;\r\n            color: white;\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 15px 30px rgba(124, 58, 237, 0.3);\r\n        }\r\n        \r\n        .art-about-btn-secondary {\r\n            background: transparent;\r\n            color: white;\r\n            padding: 14px 30px;\r\n            border-radius: 50px;\r\n            font-weight: 600;\r\n            text-decoration: none;\r\n            display: inline-block;\r\n            transition: all 0.3s ease;\r\n            border: 2px solid white;\r\n            font-size: 1.1rem;\r\n        }\r\n        \r\n        .art-about-btn-secondary:hover {\r\n            background: white;\r\n            color: var(--art-about-primary-color);\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 15px 30px rgba(255, 255, 255, 0.2);\r\n        }\r\n        \r\n        \/* Section Styles *\/\r\n        .art-about-section {\r\n            padding: 80px 0;\r\n        }\r\n        \r\n        .art-about-section-title {\r\n            font-size: 2.5rem;\r\n            font-weight: 700;\r\n            margin-bottom: 20px;\r\n            color: var(--art-about-dark);\r\n        }\r\n        \r\n        .art-about-section-subtitle {\r\n            font-size: 1.2rem;\r\n            color: var(--art-about-gray);\r\n            margin-bottom: 50px;\r\n            max-width: 700px;\r\n        }\r\n        \r\n        \/* Our Story Section *\/\r\n        .art-about-story {\r\n            padding: 100px 0;\r\n            background: var(--art-about-light);\r\n        }\r\n        \r\n        .art-about-story-content {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 60px;\r\n        }\r\n        \r\n        .art-about-story-text {\r\n            flex: 1;\r\n        }\r\n        \r\n        .art-about-story-text h2 {\r\n            font-size: 2.5rem;\r\n            font-weight: 700;\r\n            margin-bottom: 25px;\r\n            color: var(--art-about-dark);\r\n        }\r\n        \r\n        .art-about-story-text p {\r\n            font-size: 1.1rem;\r\n            color: var(--art-about-gray);\r\n            margin-bottom: 20px;\r\n            line-height: 1.8;\r\n        }\r\n        \r\n        .art-about-story-image {\r\n            flex: 1;\r\n            position: relative;\r\n        }\r\n        \r\n        .art-about-story-image img {\r\n            width: 100%;\r\n            border-radius: 16px;\r\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\r\n        }\r\n        \r\n        \/* What We Offer Section *\/\r\n        .art-about-offer {\r\n            padding: 100px 0;\r\n            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n        }\r\n        \r\n        .art-about-offer-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\r\n            gap: 30px;\r\n            margin-top: 60px;\r\n        }\r\n        \r\n        .art-about-offer-card {\r\n            background: white;\r\n            padding: 40px 30px;\r\n            border-radius: 16px;\r\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\r\n            transition: all 0.3s ease;\r\n            text-align: center;\r\n        }\r\n        \r\n        .art-about-offer-card:hover {\r\n            transform: translateY(-10px);\r\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\r\n        }\r\n        \r\n        .art-about-offer-icon {\r\n            width: 80px;\r\n            height: 80px;\r\n            background: var(--art-about-gradient);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-size: 2rem;\r\n            margin: 0 auto 25px;\r\n        }\r\n        \r\n        .art-about-offer-card h3 {\r\n            font-size: 1.4rem;\r\n            font-weight: 600;\r\n            margin-bottom: 15px;\r\n            color: var(--art-about-dark);\r\n        }\r\n        \r\n        .art-about-offer-card p {\r\n            color: var(--art-about-gray);\r\n            line-height: 1.6;\r\n        }\r\n        \r\n        \/* Mission & Vision Section *\/\r\n        .art-about-mission {\r\n            padding: 100px 0;\r\n            background: var(--art-about-gradient-3);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .art-about-mission::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            background: url('https:\/\/picsum.photos\/seed\/mission\/1920\/800.jpg') center\/cover;\r\n            opacity: 0.05;\r\n            z-index: 0;\r\n        }\r\n        \r\n        .art-about-mission-content {\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n        \r\n        .art-about-mission-cards {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\r\n            gap: 40px;\r\n            margin-top: 60px;\r\n        }\r\n        \r\n        .art-about-mission-card {\r\n            background: rgba(255, 255, 255, 0.05);\r\n            backdrop-filter: blur(10px);\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n            padding: 40px;\r\n            border-radius: 16px;\r\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .art-about-mission-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\r\n            border-color: var(--art-about-primary-color);\r\n        }\r\n        \r\n        .art-about-mission-card h3 {\r\n            font-size: 1.8rem;\r\n            font-weight: 700;\r\n            margin-bottom: 20px;\r\n            color: white;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 15px;\r\n        }\r\n        \r\n        .art-about-mission-card i {\r\n            font-size: 1.5rem;\r\n            color: var(--art-about-primary-light);\r\n        }\r\n        \r\n        .art-about-mission-card p {\r\n            color: rgba(255, 255, 255, 0.8);\r\n            line-height: 1.7;\r\n            font-size: 1.1rem;\r\n        }\r\n        \r\n        \/* Why Choose Section *\/\r\n        .art-about-why {\r\n            padding: 100px 0;\r\n            background: white;\r\n        }\r\n        \r\n        .art-about-why-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\r\n            gap: 30px;\r\n            margin-top: 60px;\r\n        }\r\n        \r\n        .art-about-why-card {\r\n            padding: 30px;\r\n            border-radius: 16px;\r\n            transition: all 0.3s ease;\r\n            text-align: center;\r\n            border: 1px solid var(--art-about-gray-light);\r\n        }\r\n        \r\n        .art-about-why-card:hover {\r\n            transform: translateY(-10px);\r\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\r\n            border-color: var(--art-about-primary-color);\r\n        }\r\n        \r\n        .art-about-why-icon {\r\n            width: 70px;\r\n            height: 70px;\r\n            background: var(--art-about-gradient);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-size: 1.8rem;\r\n            margin: 0 auto 20px;\r\n        }\r\n        \r\n        .art-about-why-card h3 {\r\n            font-size: 1.3rem;\r\n            font-weight: 600;\r\n            margin-bottom: 15px;\r\n            color: var(--art-about-dark);\r\n        }\r\n        \r\n        .art-about-why-card p {\r\n            color: var(--art-about-gray);\r\n            line-height: 1.6;\r\n        }\r\n        \r\n        \/* Developer Focus Section *\/\r\n        .art-about-developer {\r\n            padding: 100px 0;\r\n            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .art-about-developer::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            background: url('https:\/\/picsum.photos\/seed\/code\/1920\/800.jpg') center\/cover;\r\n            opacity: 0.03;\r\n            z-index: 0;\r\n        }\r\n        \r\n        .art-about-developer-content {\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n        \r\n        .art-about-developer-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n            gap: 30px;\r\n            margin-top: 60px;\r\n        }\r\n        \r\n        .art-about-developer-card {\r\n            background: white;\r\n            padding: 40px 30px;\r\n            border-radius: 16px;\r\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\r\n            transition: all 0.3s ease;\r\n            text-align: center;\r\n            height: 100%;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n        }\r\n        \r\n        .art-about-developer-card:hover {\r\n            transform: translateY(-10px);\r\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\r\n        }\r\n        \r\n        .art-about-developer-icon {\r\n            width: 70px;\r\n            height: 70px;\r\n            background: var(--art-about-gradient);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-size: 1.8rem;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .art-about-developer-card h3 {\r\n            font-size: 1.3rem;\r\n            font-weight: 600;\r\n            margin-bottom: 15px;\r\n            color: var(--art-about-dark);\r\n        }\r\n        \r\n        .art-about-developer-card p {\r\n            color: var(--art-about-gray);\r\n            line-height: 1.6;\r\n            flex-grow: 1;\r\n        }\r\n        \r\n        \/* Stats Section *\/\r\n        .art-about-stats {\r\n            padding: 100px 0;\r\n            background: var(--art-about-gradient-3);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .art-about-stats::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            background: url('https:\/\/ary-themes.com\/wp-content\/uploads\/2026\/02\/Our-Achievements-at.jpg') center\/cover;\r\n            opacity: 0.05;\r\n            z-index: 0;\r\n        }\r\n        \r\n        .art-about-stats-content {\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n        \r\n        .art-about-stats-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n            gap: 40px;\r\n            margin-top: 60px;\r\n        }\r\n        \r\n        .art-about-stat-item {\r\n            text-align: center;\r\n        }\r\n        \r\n        .art-about-stat-icon {\r\n            width: 80px;\r\n            height: 80px;\r\n            background: rgba(255, 255, 255, 0.1);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-size: 2rem;\r\n            margin: 0 auto 20px;\r\n        }\r\n        \r\n        .art-about-stat-number {\r\n            font-size: 3rem;\r\n            font-weight: 700;\r\n            color: white;\r\n            margin-bottom: 10px;\r\n        }\r\n        \r\n        .art-about-stat-label {\r\n            font-size: 1.1rem;\r\n            color: rgba(255, 255, 255, 0.8);\r\n        }\r\n        \r\n        \/* Team Section *\/\r\n        .art-about-team {\r\n            padding: 100px 0;\r\n            background: white;\r\n        }\r\n        \r\n        .art-about-team-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n            gap: 40px;\r\n            margin-top: 60px;\r\n        }\r\n        \r\n        .art-about-team-card {\r\n            text-align: center;\r\n            padding: 30px;\r\n            border-radius: 16px;\r\n            transition: all 0.3s ease;\r\n            background: var(--art-about-light);\r\n        }\r\n        \r\n        .art-about-team-card:hover {\r\n            transform: translateY(-10px);\r\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\r\n        }\r\n        \r\n        .art-about-team-avatar {\r\n            width: 120px;\r\n            height: 120px;\r\n            border-radius: 50%;\r\n            overflow: hidden;\r\n            margin: 0 auto 20px;\r\n            border: 5px solid var(--art-about-primary-color);\r\n        }\r\n        \r\n        .art-about-team-avatar img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n        }\r\n        \r\n        .art-about-team-card h3 {\r\n            font-size: 1.3rem;\r\n            font-weight: 600;\r\n            margin-bottom: 5px;\r\n            color: var(--art-about-dark);\r\n        }\r\n        \r\n        .art-about-team-role {\r\n            color: var(--art-about-primary-color);\r\n            font-weight: 500;\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .art-about-team-social {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 15px;\r\n        }\r\n        \r\n        .art-about-team-social a {\r\n            width: 40px;\r\n            height: 40px;\r\n            background: var(--art-about-gradient);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .art-about-team-social a:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);\r\n        }\r\n        \r\n        \/* Testimonials Section *\/\r\n        .art-about-testimonials {\r\n            padding: 100px 0;\r\n            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n        }\r\n        \r\n        .art-about-testimonials-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\r\n            gap: 30px;\r\n            margin-top: 60px;\r\n        }\r\n        \r\n        .art-about-testimonial-card {\r\n            background: white;\r\n            padding: 40px;\r\n            border-radius: 16px;\r\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\r\n            position: relative;\r\n        }\r\n        \r\n        .art-about-testimonial-card::before {\r\n            content: '\"';\r\n            position: absolute;\r\n            top: 20px;\r\n            left: 20px;\r\n            font-size: 4rem;\r\n            color: var(--art-about-primary-light);\r\n            opacity: 0.2;\r\n            font-family: Georgia, serif;\r\n        }\r\n        \r\n        .art-about-testimonial-text {\r\n            font-style: italic;\r\n            margin-bottom: 25px;\r\n            position: relative;\r\n            z-index: 1;\r\n            color: var(--art-about-gray);\r\n            line-height: 1.7;\r\n        }\r\n        \r\n        .art-about-testimonial-author {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 15px;\r\n        }\r\n        \r\n        .art-about-testimonial-avatar {\r\n            width: 60px;\r\n            height: 60px;\r\n            border-radius: 50%;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .art-about-testimonial-avatar img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n        }\r\n        \r\n        .art-about-testimonial-name {\r\n            font-weight: 600;\r\n            margin-bottom: 5px;\r\n            color: var(--art-about-dark);\r\n        }\r\n        \r\n        .art-about-testimonial-role {\r\n            color: var(--art-about-gray);\r\n            font-size: 0.9rem;\r\n        }\r\n        \r\n        .art-about-testimonial-rating {\r\n            color: #fbbf24;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        \/* CTA Section *\/\r\n        .art-about-cta {\r\n            padding: 100px 0;\r\n            background: var(--art-about-gradient-3);\r\n            position: relative;\r\n            overflow: hidden;\r\n            text-align: center;\r\n        }\r\n        \r\n        .art-about-cta::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            background: url('https:\/\/picsum.photos\/seed\/cta\/1920\/800.jpg') center\/cover;\r\n            opacity: 0.05;\r\n            z-index: 0;\r\n        }\r\n        \r\n        .art-about-cta-content {\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n        \r\n        .art-about-cta h2 {\r\n            font-size: 2.8rem;\r\n            font-weight: 700;\r\n            color: white;\r\n            margin-bottom: 25px;\r\n        }\r\n        \r\n        .art-about-cta p {\r\n            font-size: 1.3rem;\r\n            color: rgba(255, 255, 255, 0.85);\r\n            margin-bottom: 40px;\r\n            max-width: 700px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n        }\r\n        \r\n        .art-about-cta-buttons {\r\n            display: flex;\r\n            gap: 20px;\r\n            justify-content: center;\r\n            flex-wrap: wrap;\r\n        }\r\n        \r\n        .art-about-cta-button {\r\n            padding: 16px 40px;\r\n            border-radius: 50px;\r\n            font-weight: 600;\r\n            text-decoration: none;\r\n            display: inline-block;\r\n            transition: all 0.3s ease;\r\n            font-size: 1.1rem;\r\n        }\r\n        \r\n        .art-about-cta-button-primary {\r\n            background: white;\r\n            color: var(--art-about-primary-color);\r\n        }\r\n        \r\n        .art-about-cta-button-primary:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 20px 40px rgba(255, 255, 255, 0.2);\r\n            color: var(--art-about-primary-dark);\r\n        }\r\n        \r\n        .art-about-cta-button-secondary {\r\n            background: transparent;\r\n            color: white;\r\n            border: 2px solid white;\r\n        }\r\n        \r\n        .art-about-cta-button-secondary:hover {\r\n            background: white;\r\n            color: var(--art-about-primary-color);\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 20px 40px rgba(255, 255, 255, 0.2);\r\n        }\r\n        \r\n        \/* Responsive *\/\r\n        @media (max-width: 992px) {\r\n            .art-about-story-content {\r\n                flex-direction: column;\r\n                gap: 40px;\r\n            }\r\n            \r\n            .art-about-mission-cards {\r\n                grid-template-columns: 1fr;\r\n            }\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .art-about-hero h1 {\r\n                font-size: 2.5rem;\r\n            }\r\n            \r\n            .art-about-section-title {\r\n                font-size: 2.2rem;\r\n            }\r\n            \r\n            .art-about-cta h2 {\r\n                font-size: 2.2rem;\r\n            }\r\n            \r\n            .art-about-stats-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n            }\r\n        }\r\n        \r\n        @media (max-width: 576px) {\r\n            .art-about-hero {\r\n                padding: 80px 0 60px;\r\n            }\r\n            \r\n            .art-about-hero h1 {\r\n                font-size: 2rem;\r\n            }\r\n            \r\n            .art-about-section {\r\n                padding: 60px 0;\r\n            }\r\n            \r\n            .art-about-stats-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <!-- Hero Section -->\r\n    <section class=\"art-about-hero\">\r\n        <div class=\"container\">\r\n            <div class=\"art-about-hero-content\" data-aos=\"fade-up\">\r\n                <h1>About Ary Themes<\/h1>\r\n                <p>Crafting Premium Templates for Modern Creators<\/p>\r\n                <div class=\"art-about-hero-buttons\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                    <a href=\"\/all-templates\/\" class=\"art-about-btn-primary\">Explore Our Templates<\/a>\r\n                    <a href=\"\/contact\" class=\"art-about-btn-secondary\">Contact Us<\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Our Story Section -->\r\n    <section class=\"art-about-story\">\r\n        <div class=\"container\">\r\n            <div class=\"art-about-story-content\">\r\n                <div class=\"art-about-story-text\" data-aos=\"fade-right\">\r\n                    <h2>Our Story<\/h2>\r\n                    <p>Founded in 2020, Ary Themes emerged from a simple realization: creators and businesses needed high-quality, professionally designed templates that didn't compromise on performance or aesthetics. Our founders, a team of experienced designers and developers, were frustrated with the lack of premium templates that balanced visual appeal with technical excellence.<\/p>\r\n                    <p>We set out to create a marketplace where quality reigns supreme. Each template in our collection undergoes rigorous testing and refinement to ensure it meets our exacting standards for design, functionality, and performance. We believe that great design should be accessible to everyone, from solo entrepreneurs to established enterprises.<\/p>\r\n                    <p>Today, Ary Themes stands as a trusted resource for thousands of creators worldwide who rely on our templates to launch their projects faster, more efficiently, and with greater impact than ever before.<\/p>\r\n                <\/div>\r\n                <div class=\"art-about-story-image\" data-aos=\"fade-left\">\r\n                    <img decoding=\"async\" src=\"https:\/\/ary-themes.com\/wp-content\/uploads\/2026\/02\/Our-Story-at.jpg\" alt=\"Designer Workspace\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- What We Offer Section -->\r\n    <section id=\"offer\" class=\"art-about-offer\">\r\n        <div class=\"container\">\r\n            <div class=\"text-center\" data-aos=\"fade-up\">\r\n                <h2 class=\"art-about-section-title\">What We Offer<\/h2>\r\n                <p class=\"art-about-section-subtitle mx-auto\">A comprehensive collection of premium templates designed for modern web experiences<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"art-about-offer-grid\">\r\n                <div class=\"art-about-offer-card\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                    <div class=\"art-about-offer-icon\">\r\n                        <i class=\"fab fa-wordpress\"><\/i>\r\n                    <\/div>\r\n                    <h3>WordPress Themes<\/h3>\r\n                    <p>Professionally crafted WordPress themes with intuitive customization options and seamless plugin compatibility for powerful websites.<\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"art-about-offer-card\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                    <div class=\"art-about-offer-icon\">\r\n                        <i class=\"fab fa-html5\"><\/i>\r\n                    <\/div>\r\n                    <h3>HTML Templates<\/h3>\r\n                    <p>Clean, responsive HTML templates built with modern standards and optimized for performance across all devices and browsers.<\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"art-about-offer-card\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                    <div class=\"art-about-offer-icon\">\r\n                        <i class=\"fab fa-figma\"><\/i>\r\n                    <\/div>\r\n                    <h3>Figma UI Kits<\/h3>\r\n                    <p>Comprehensive UI design systems in Figma with organized components, variants, and styles for efficient design workflows.<\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"art-about-offer-card\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n                    <div class=\"art-about-offer-icon\">\r\n                        <i class=\"fa-regular fa-file\"><\/i>\r\n                    <\/div>\r\n                    <h3>PSD Designs<\/h3>\r\n                    <p>Meticulously designed Photoshop templates with layered, organized files for easy customization and implementation.<\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"art-about-offer-card\" data-aos=\"fade-up\" data-aos-delay=\"500\">\r\n                    <div class=\"art-about-offer-icon\">\r\n                        <i class=\"fas fa-cube\"><\/i>\r\n                    <\/div>\r\n                    <h3>UI Components<\/h3>\r\n                    <p>Reusable UI components and elements that accelerate development while maintaining design consistency across projects.<\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"art-about-offer-card\" data-aos=\"fade-up\" data-aos-delay=\"600\">\r\n                    <div class=\"art-about-offer-icon\">\r\n                        <i class=\"fab fa-react\"><\/i>\r\n                    <\/div>\r\n                    <h3>Next.js Templates<\/h3>\r\n                    <p>Modern, performant Next.js templates with server-side rendering, optimized for speed and SEO excellence.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Mission & Vision Section -->\r\n    <section class=\"art-about-mission\">\r\n        <div class=\"container\">\r\n            <div class=\"art-about-mission-content\">\r\n                <div class=\"text-center\" data-aos=\"fade-up\">\r\n                    <h2 class=\"art-about-section-title text-white\">Our Mission & Vision<\/h2>\r\n                <\/div>\r\n                \r\n                <div class=\"art-about-mission-cards\">\r\n                    <div class=\"art-about-mission-card\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                        <h3><i class=\"fas fa-bullseye\"><\/i> Mission<\/h3>\r\n                        <p>To empower creators and businesses with premium, high-performance templates that accelerate development without compromising quality. We strive to make professional web design accessible to everyone, regardless of technical expertise or budget constraints.<\/p>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"art-about-mission-card\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                        <h3><i class=\"fas fa-eye\"><\/i> Vision<\/h3>\r\n                        <p>To become the world's most trusted marketplace for web professionals seeking exceptional templates. We envision a future where every website begins with a solid foundation of design excellence and technical superiority.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Why Choose Ary Themes Section -->\r\n    <section class=\"art-about-why\">\r\n        <div class=\"container\">\r\n            <div class=\"text-center\" data-aos=\"fade-up\">\r\n                <h2 class=\"art-about-section-title\">Why Choose Ary Themes<\/h2>\r\n                <p class=\"art-about-section-subtitle mx-auto\">We're committed to providing exceptional value through quality, performance, and support<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"art-about-why-grid\">\r\n                <div class=\"art-about-why-card\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                    <div class=\"art-about-why-icon\">\r\n                        <i class=\"fas fa-paint-brush\"><\/i>\r\n                    <\/div>\r\n                    <h3>Clean & Modern Design<\/h3>\r\n                    <p>Our templates feature contemporary aesthetics with attention to detail, ensuring your projects look professional and impressive.<\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"art-about-why-card\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                    <div class=\"art-about-why-icon\">\r\n                        <i class=\"fas fa-mobile-alt\"><\/i>\r\n                    <\/div>\r\n                    <h3>Fully Responsive Layouts<\/h3>\r\n                    <p>Every template is meticulously tested across all devices to ensure a flawless experience from desktop to mobile.<\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"art-about-why-card\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                    <div class=\"art-about-why-icon\">\r\n                        <i class=\"fas fa-rocket\"><\/i>\r\n                    <\/div>\r\n                    <h3>Optimized Performance<\/h3>\r\n                    <p>Lightning-fast loading times and smooth interactions are built into every template, improving user experience and SEO rankings.<\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"art-about-why-card\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n                    <div class=\"art-about-why-icon\">\r\n                        <i class=\"fas fa-sync-alt\"><\/i>\r\n                    <\/div>\r\n                    <h3>Regular Updates<\/h3>\r\n                    <p>We continuously improve our templates with new features, security updates, and compatibility with the latest web standards.<\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"art-about-why-card\" data-aos=\"fade-up\" data-aos-delay=\"500\">\r\n                    <div class=\"art-about-why-icon\">\r\n                        <i class=\"fas fa-headset\"><\/i>\r\n                    <\/div>\r\n                    <h3>Dedicated Support<\/h3>\r\n                    <p>Our expert support team is ready to assist with any questions or issues, ensuring your project stays on track.<\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"art-about-why-card\" data-aos=\"fade-up\" data-aos-delay=\"600\">\r\n                    <div class=\"art-about-why-icon\">\r\n                        <i class=\"fas fa-tag\"><\/i>\r\n                    <\/div>\r\n                    <h3>Affordable Pricing<\/h3>\r\n                    <p>Premium quality doesn't have to break the bank. Our templates offer exceptional value at competitive price points.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Developer \/ Creator Focus Section -->\r\n    <section class=\"art-about-developer\">\r\n        <div class=\"container\">\r\n            <div class=\"art-about-developer-content\">\r\n                <div class=\"text-center\" data-aos=\"fade-up\">\r\n                    <h2 class=\"art-about-section-title\">Built for Creators<\/h2>\r\n                    <p class=\"art-about-section-subtitle mx-auto\">Our templates are designed to save time and increase productivity for professionals<\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"art-about-developer-grid\">\r\n                    <div class=\"art-about-developer-card\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                        <div class=\"art-about-developer-icon\">\r\n                            <i class=\"fas fa-user-tie\"><\/i>\r\n                        <\/div>\r\n                        <h3>Freelancers<\/h3>\r\n                        <p>Deliver exceptional projects to clients faster with our professional templates. Focus on customization and unique features rather than building from scratch.<\/p>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"art-about-developer-card\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                        <div class=\"art-about-developer-icon\">\r\n                            <i class=\"fas fa-building\"><\/i>\r\n                        <\/div>\r\n                        <h3>Agencies<\/h3>\r\n                        <p>Streamline your workflow with templates that provide a solid foundation for client projects. Maintain consistency across your portfolio while saving valuable development time.<\/p>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"art-about-developer-card\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                        <div class=\"art-about-developer-icon\">\r\n                            <i class=\"fas fa-rocket\"><\/i>\r\n                        <\/div>\r\n                        <h3>Startups<\/h3>\r\n                        <p>Launch your online presence quickly without sacrificing quality. Our templates help you make a strong first impression while staying within budget constraints.<\/p>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"art-about-developer-card\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n                        <div class=\"art-about-developer-icon\">\r\n                            <i class=\"fas fa-code\"><\/i>\r\n                        <\/div>\r\n                        <h3>Developers<\/h3>\r\n                        <p>Work with clean, well-structured code that follows best practices. Our templates provide a solid foundation that's easy to extend and customize.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Stats \/ Achievements Section -->\r\n    <section class=\"art-about-stats\">\r\n        <div class=\"container\">\r\n            <div class=\"art-about-stats-content\">\r\n                <div class=\"text-center\" data-aos=\"fade-up\">\r\n                    <h2 class=\"art-about-section-title text-white\">Our Achievements<\/h2>\r\n                    <p class=\"art-about-section-subtitle mx-auto text-white-50\">Numbers that reflect our commitment to excellence<\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"art-about-stats-grid\">\r\n                    <div class=\"art-about-stat-item\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                        <div class=\"art-about-stat-icon\">\r\n                            <i class=\"fas fa-layer-group\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"art-about-stat-number\" data-target=\"500\">0<\/div>\r\n                        <div class=\"art-about-stat-label\">Premium Templates<\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"art-about-stat-item\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                        <div class=\"art-about-stat-icon\">\r\n                            <i class=\"fas fa-download\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"art-about-stat-number\" data-target=\"10000\">0<\/div>\r\n                        <div class=\"art-about-stat-label\">Happy Downloads<\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"art-about-stat-item\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                        <div class=\"art-about-stat-icon\">\r\n                            <i class=\"fas fa-star\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"art-about-stat-number\" data-target=\"4.8\">0<\/div>\r\n                        <div class=\"art-about-stat-label\">Average Rating<\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"art-about-stat-item\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n                        <div class=\"art-about-stat-icon\">\r\n                            <i class=\"fas fa-globe\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"art-about-stat-number\" data-target=\"75\">0<\/div>\r\n                        <div class=\"art-about-stat-label\">Countries Worldwide<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Team Section -->\r\n    <section class=\"art-about-team\">\r\n        <div class=\"container\">\r\n            <div class=\"text-center\" data-aos=\"fade-up\">\r\n                <h2 class=\"art-about-section-title\">Meet Our Team<\/h2>\r\n                <p class=\"art-about-section-subtitle mx-auto\">The creative minds behind Ary Themes<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"art-about-team-grid\">\r\n                <div class=\"art-about-team-card\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                    <div class=\"art-about-team-avatar\">\r\n                        <img decoding=\"async\" src=\"https:\/\/ary-themes.com\/wp-content\/uploads\/2026\/02\/Alex-at.jpg\" alt=\"Founder\">\r\n                    <\/div>\r\n                    <h3>Alex Morgan<\/h3>\r\n                    <div class=\"art-about-team-role\">Founder & CEO<\/div>\r\n                    <p class=\"text-muted\">Visionary leader with 15+ years of experience in web design and development.<\/p>\r\n                    <div class=\"art-about-team-social\">\r\n                        <a href=\"#\"><i class=\"fab fa-twitter\"><\/i><\/a>\r\n                        <a href=\"#\"><i class=\"fab fa-linkedin\"><\/i><\/a>\r\n                        <a href=\"#\"><i class=\"fab fa-dribbble\"><\/i><\/a>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"art-about-team-card\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                    <div class=\"art-about-team-avatar\">\r\n                        <img decoding=\"async\" src=\"https:\/\/ary-themes.com\/wp-content\/uploads\/2026\/02\/Sarah-at.jpg\" alt=\"Lead Designer\">\r\n                    <\/div>\r\n                    <h3>Sarah Chen<\/h3>\r\n                    <div class=\"art-about-team-role\">Lead Designer<\/div>\r\n                    <p class=\"text-muted\">Award-winning designer with a passion for creating intuitive and beautiful user experiences.<\/p>\r\n                    <div class=\"art-about-team-social\">\r\n                        <a href=\"#\"><i class=\"fab fa-twitter\"><\/i><\/a>\r\n                        <a href=\"#\"><i class=\"fab fa-behance\"><\/i><\/a>\r\n                        <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"art-about-team-card\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                    <div class=\"art-about-team-avatar\">\r\n                        <img decoding=\"async\" src=\"https:\/\/ary-themes.com\/wp-content\/uploads\/2026\/02\/Michael-at.jpg\" alt=\"Lead Developer\">\r\n                    <\/div>\r\n                    <h3>Michael Torres<\/h3>\r\n                    <div class=\"art-about-team-role\">Lead Developer<\/div>\r\n                    <p class=\"text-muted\">Full-stack developer specializing in performance optimization and modern web technologies.<\/p>\r\n                    <div class=\"art-about-team-social\">\r\n                        <a href=\"#\"><i class=\"fab fa-github\"><\/i><\/a>\r\n                        <a href=\"#\"><i class=\"fab fa-linkedin\"><\/i><\/a>\r\n                        <a href=\"#\"><i class=\"fab fa-codepen\"><\/i><\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Testimonials Section -->\r\n    <section class=\"art-about-testimonials\">\r\n        <div class=\"container\">\r\n            <div class=\"text-center\" data-aos=\"fade-up\">\r\n                <h2 class=\"art-about-section-title\">What Our Customers Say<\/h2>\r\n                <p class=\"art-about-section-subtitle mx-auto\">Real feedback from real customers who love our templates<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"art-about-testimonials-grid\">\r\n                <div class=\"art-about-testimonial-card\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n                    <div class=\"art-about-testimonial-rating\">\r\n                        <i class=\"fas fa-star\"><\/i>\r\n                        <i class=\"fas fa-star\"><\/i>\r\n                        <i class=\"fas fa-star\"><\/i>\r\n                        <i class=\"fas fa-star\"><\/i>\r\n                        <i class=\"fas fa-star\"><\/i>\r\n                    <\/div>\r\n                    <p class=\"art-about-testimonial-text\">Ary Themes has been a game-changer for my freelance business. The quality of their templates is exceptional, and the support team is incredibly responsive. I've launched three client projects in half the time it would normally take me.<\/p>\r\n                    <div class=\"art-about-testimonial-author\">\r\n                        <div class=\"art-about-testimonial-avatar\">\r\n                            <img decoding=\"async\" src=\"https:\/\/ary-themes.com\/wp-content\/uploads\/2026\/02\/sarah-ez.jpg\" alt=\"Customer\">\r\n                        <\/div>\r\n                        <div>\r\n                            <div class=\"art-about-testimonial-name\">Jessica Reynolds<\/div>\r\n                            <div class=\"art-about-testimonial-role\">Freelance Web Designer<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"art-about-testimonial-card\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                    <div class=\"art-about-testimonial-rating\">\r\n                        <i class=\"fas fa-star\"><\/i>\r\n                        <i class=\"fas fa-star\"><\/i>\r\n                        <i class=\"fas fa-star\"><\/i>\r\n                        <i class=\"fas fa-star\"><\/i>\r\n                        <i class=\"fas fa-star\"><\/i>\r\n                    <\/div>\r\n                    <p class=\"art-about-testimonial-text\">As a startup founder with limited technical skills, Ary Themes made it possible to create a professional website that impressed investors and customers alike. The templates are intuitive and the documentation is comprehensive.<\/p>\r\n                    <div class=\"art-about-testimonial-author\">\r\n                        <div class=\"art-about-testimonial-avatar\">\r\n                            <img decoding=\"async\" src=\"https:\/\/ary-themes.com\/wp-content\/uploads\/2026\/02\/Millie-Brown.jpg\" alt=\"Customer\">\r\n                        <\/div>\r\n                        <div>\r\n                            <div class=\"art-about-testimonial-name\">David Kim<\/div>\r\n                            <div class=\"art-about-testimonial-role\">Startup Founder<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"art-about-testimonial-card\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                    <div class=\"art-about-testimonial-rating\">\r\n                        <i class=\"fas fa-star\"><\/i>\r\n                        <i class=\"fas fa-star\"><\/i>\r\n                        <i class=\"fas fa-star\"><\/i>\r\n                        <i class=\"fas fa-star\"><\/i>\r\n                        <i class=\"fas fa-star-half-alt\"><\/i>\r\n                    <\/div>\r\n                    <p class=\"art-about-testimonial-text\">The code quality in Ary Themes' templates is outstanding. As a developer, I appreciate the clean, well-structured code that follows best practices. It's made customization and extension a breeze.<\/p>\r\n                    <div class=\"art-about-testimonial-author\">\r\n                        <div class=\"art-about-testimonial-avatar\">\r\n                            <img decoding=\"async\" src=\"https:\/\/ary-themes.com\/wp-content\/uploads\/2026\/02\/Andrew-ez.jpg\" alt=\"Customer\">\r\n                        <\/div>\r\n                        <div>\r\n                            <div class=\"art-about-testimonial-name\">Alex Johnson<\/div>\r\n                            <div class=\"art-about-testimonial-role\">Full-Stack Developer<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- CTA Section -->\r\n    <section id=\"contact\" class=\"art-about-cta\">\r\n        <div class=\"container\">\r\n            <div class=\"art-about-cta-content\" data-aos=\"fade-up\">\r\n                <h2>Ready to Build Your Next Project?<\/h2>\r\n                <p>Join thousands of creators who have transformed their ideas into reality with our premium templates.<\/p>\r\n                <div class=\"art-about-cta-buttons\">\r\n                    <a href=\"\/all-templates\/\" class=\"art-about-cta-button art-about-cta-button-primary\">Browse Templates<\/a>\r\n                    <a href=\"\/contact\" class=\"art-about-cta-button art-about-cta-button-secondary\">Contact Us<\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Bootstrap JS -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\r\n    \r\n    <!-- AOS Animation JS -->\r\n    <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\r\n    \r\n    <script>\r\n        \/\/ Initialize AOS\r\n        AOS.init({\r\n            duration: 1000,\r\n            once: true\r\n        });\r\n        \r\n        \/\/ Counter animation for stats\r\n        function animateCounters() {\r\n            const counters = document.querySelectorAll('.art-about-stat-number');\r\n            const speed = 200;\r\n            \r\n            counters.forEach(counter => {\r\n                const updateCount = () => {\r\n                    const target = +counter.getAttribute('data-target');\r\n                    const count = +counter.innerText;\r\n                    const inc = target \/ speed;\r\n                    \r\n                    if (count < target) {\r\n                        counter.innerText = Math.ceil(count + inc);\r\n                        setTimeout(updateCount, 1);\r\n                    } else {\r\n                        \/\/ Handle decimal numbers\r\n                        if (target % 1 !== 0) {\r\n                            counter.innerText = target.toFixed(1);\r\n                        } else {\r\n                            counter.innerText = target;\r\n                        }\r\n                    }\r\n                };\r\n                \r\n                updateCount();\r\n            });\r\n        }\r\n        \r\n        \/\/ Trigger counter animation when stats section is in view\r\n        const statsSection = document.querySelector('.art-about-stats');\r\n        let statsAnimated = false;\r\n        \r\n        window.addEventListener('scroll', () => {\r\n            const sectionPos = statsSection.getBoundingClientRect().top;\r\n            const screenPos = window.innerHeight \/ 1.3;\r\n            \r\n            if (sectionPos < screenPos && !statsAnimated) {\r\n                animateCounters();\r\n                statsAnimated = true;\r\n            }\r\n        });\r\n        \r\n        \/\/ Smooth scrolling for anchor links\r\n        document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n            anchor.addEventListener('click', function (e) {\r\n                e.preventDefault();\r\n                const target = document.querySelector(this.getAttribute('href'));\r\n                if (target) {\r\n                    target.scrollIntoView({\r\n                        behavior: 'smooth',\r\n                        block: 'start'\r\n                    });\r\n                }\r\n            });\r\n        });\r\n    <\/script>\r\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-homepage.php","meta":{"footnotes":""},"class_list":["post-2984","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ary-themes.com\/zh-CN\/wp-json\/wp\/v2\/pages\/2984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ary-themes.com\/zh-CN\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ary-themes.com\/zh-CN\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ary-themes.com\/zh-CN\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ary-themes.com\/zh-CN\/wp-json\/wp\/v2\/comments?post=2984"}],"version-history":[{"count":4,"href":"https:\/\/ary-themes.com\/zh-CN\/wp-json\/wp\/v2\/pages\/2984\/revisions"}],"predecessor-version":[{"id":5348,"href":"https:\/\/ary-themes.com\/zh-CN\/wp-json\/wp\/v2\/pages\/2984\/revisions\/5348"}],"wp:attachment":[{"href":"https:\/\/ary-themes.com\/zh-CN\/wp-json\/wp\/v2\/media?parent=2984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}