website page corrections updated

src/components/mobile-app-development-service/BannerBottom.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import { useState } from "react";
+import ContactPopup from '@/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup';
+
 const floatingItems = [
     {
         className: "item-1",
@@ -28,6 +31,8 @@ const floatingItems = [
 ];
 
 const BannerBottom = () => {
+    const [isContactOpen, setIsContactOpen] = useState(false);
+
     return (
         <section className="bannerbottom-section website-service-strip">
             <div className="container">
@@ -82,23 +87,49 @@ const BannerBottom = () => {
                                 </p>
                                 <p className="desc-font mt-2">
                                     We build apps that are reliable, fast-loading, and ready for future upgrades.</p>
-                                <div className="call-info-box d-flex align-items-center mt-3 justify-content-md-end justify-content-center">
-                                    <div className="call-icon-bg">
-                                        <img src="/assets/img-app/icons/phn1.svg" alt="Phone Icon" className="scooter-mini-icon" />
-                                    </div>
-                                    <div className="call-details ms-3">
-                                        <span>Speak With Our App Experts Today</span>
-                                        <h3 className="phone-number">
-                                            <a href="tel:+16476797651" style={{ color: 'inherit', textDecoration: 'none' }}>+1-647-679-7651</a>
-                                        </h3>
-                                    </div>
-                                </div>
                             </div>
                         </div>
 
                     </div>
                 </div>
+
+                {/* Centered Call Box at the Bottom of Logo/Illustration */}
+                <div className="row mt-5">
+                    <div className="col-lg-12 text-center">
+                        <div className="call-box-container" style={{ display: 'inline-block' }}>
+                            <div
+                                className="call-info-box d-flex align-items-center justify-content-center"
+                                onClick={() => setIsContactOpen(true)}
+                                style={{
+                                    cursor: 'pointer',
+                                    background: 'rgba(55, 121, 185, 0.1)',
+                                    padding: '10px 25px',
+                                    borderRadius: '50px',
+                                    border: '1px solid rgba(55, 121, 185, 0.2)',
+                                    transition: 'all 0.3s'
+                                }}
+                                onMouseEnter={(e) => {
+                                    e.currentTarget.style.background = 'rgba(55, 121, 185, 0.15)';
+                                    e.currentTarget.style.transform = 'translateY(-2px)';
+                                }}
+                                onMouseLeave={(e) => {
+                                    e.currentTarget.style.background = 'rgba(55, 121, 185, 0.1)';
+                                    e.currentTarget.style.transform = 'translateY(0)';
+                                }}
+                            >
+                                <div className="call-icon-bg" style={{ width: '40px', height: '40px' }}>
+                                    <img src="/assets/img-app/icons/phn1.svg" alt="Phone Icon" />
                                 </div>
+                                <div className="call-details ms-2">
+                                    <span style={{ color: '#fff', fontWeight: 600, fontSize: '16px' }}>Speak With Our App Experts Today </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <ContactPopup isOpen={isContactOpen} onClose={() => setIsContactOpen(false)} />
         </section>
     );
 };

src/components/mobile-app-development-service/Hero.tsx

@@ -31,8 +31,8 @@ const Hero = () => {
                             <div className="space32"></div>
                             <GsapReveal y={30} duration={1.4} delay={0.6}>
                                 <div className="btn-area1 d-flex flex-wrap gap-3">
-                                    <button onClick={() => setIsContactOpen(true)} className="vl-btn1">Get Free App Consultation<i className="fa-solid fa-arrow-right"></i></button>
-                                    {/* <Link href="#portfolio" className="vl-btn1 secondary-cta">View Our Work <i className="fa-solid fa-arrow-right"></i></Link> */}
+                                    <button onClick={() => setIsContactOpen(true)} className="vl-btn1">Get Free App Consultation<i className="fa-solid fa-angle-right"></i></button>
+                                    {/* <Link href="#portfolio" className="vl-btn1 secondary-cta">View Our Work <i className="fa-solid fa-angle-right"></i></Link> */}
                                 </div>
                             </GsapReveal>
                         </div>

src/components/mobile-app-development-service/KeyFeatures.tsx

@@ -155,7 +155,7 @@ const KeyFeatures = () => {
                         </div>
                         <button onClick={() => setIsContactOpen(true)} className="kf-demo-btn">
                             Book Free Strategy Call
-                        </button>
+                         <i className="fa-solid fa-angle-right"></i></button>
                     </div>
                 </div>
 

src/components/mobile-app-development-service/Pricing.tsx

@@ -70,25 +70,39 @@ const Pricing = () => {
                                 <ul className="pricing-features list-unstyled mb-5" style={{ flexGrow: 1 }}>
                                     {plan.features.map((feature, i) => (
                                         <li key={i} className="d-flex align-items-center mb-3" style={{ color: plan.isPopular ? '#fff' : '#4a5568', fontSize: '16px' }}>
-                                            <i className="fa-solid fa-check-circle" style={{ color: '#3779b9', marginRight: '10px' }}></i>
+                                            <img
+                                                src={plan.isPopular ? "/assets/img/arrow-white.png" : "/assets/img/arrow.png"}
+                                                alt=""
+                                                style={{ width: '20px', height: '20px', objectFit: 'contain', marginRight: '10px' }}
+                                            />
                                             {feature}
                                         </li>
                                     ))}
                                 </ul>
 
+
+
                                 <div className="pricing-btn">
                                     <Link href={plan.link} className={`vl-btn1 w-100 text-center ${plan.isPopular ? '' : 'btn-dark'}`} style={{
-                                        display: 'block',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
                                         padding: '15px',
-                                        borderRadius: '12px',
+                                        borderRadius: '30px',
                                         fontWeight: 700,
-                                        background: plan.isPopular ? '#3779b9' : '#1a1f2b',
+                                        background: 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%)',
+                                        backgroundSize: '200% auto',
                                         color: '#fff',
-                                        transition: 'all 0.3s'
+                                        transition: 'all 0.5s',
+                                        textDecoration: 'none',
+                                        gap: '8px'
                                     }}>
-                                        Choose Plan <i className="fa-solid fa-arrow-right ms-2"></i>
+                                        Choose Plan <i className="fa-solid fa-angle-right"></i>
+
                                     </Link>
+
                                 </div>
+
                             </div>
                         </div>
                     ))}

src/components/mobile-app-development-service/Service.tsx

@@ -55,7 +55,7 @@ const Service = () => {
                     <div className="col-lg-8 text-center" data-aos="fade-up" data-aos-duration="1000">
                         <div className="service-bottom-cta">
                             <button onClick={() => setIsContactOpen(true)} className="vl-btn1">
-                                Request Free Proposal <i className="fa-solid fa-arrow-right"></i>
+                                Request Free Proposal <i className="fa-solid fa-angle-right"></i>
                             </button>
                         </div>
                     </div>

src/components/mobile-app-development-service/Work.tsx

@@ -82,7 +82,7 @@ const Work = () => {
                                 <div className="space40"></div>
                                 <GsapReveal y={20} delay={0.4}>
                                     <button onClick={() => setIsContactOpen(true)} className="vl-btn1">
-                                        Let’s Build Your App <i className="fa-solid fa-arrow-right"></i>
+                                        Let’s Build Your App <i className="fa-solid fa-angle-right"></i>
                                     </button>
                                 </GsapReveal>
                             </div>

src/components/mobile-app-development-service/style-app.css

@@ -293,7 +293,7 @@ nav a:active,
 }
 
 /* ============================================================
-   FAQ SECTION — Spacing, Center Image, Responsive Fix
+   FAQ SECTION <EFBFBD> Spacing, Center Image, Responsive Fix
    ============================================================ */
 
 /* Left column: right padding to give breathing room from center image */
@@ -16275,7 +16275,7 @@ only screen and (min-width: 768px) and (max-width: 991px),
   min-height: 160px;
 }
 
-/* Badge – Years of Excellence */
+/* Badge <EFBFBD> Years of Excellence */
 .kf-exp-badge {
   position: absolute;
   bottom: 30px;
@@ -16310,7 +16310,7 @@ only screen and (min-width: 768px) and (max-width: 991px),
   color: rgba(255, 255, 255, 0.9);
 }
 
-/* Dot grid decoration – top-right corner */
+/* Dot grid decoration <EFBFBD> top-right corner */
 .kf-dot-grid {
   position: absolute;
   top: 10px;
@@ -16330,7 +16330,7 @@ only screen and (min-width: 768px) and (max-width: 991px),
   display: block;
 }
 
-/* Responsive – new wrap */
+/* Responsive <EFBFBD> new wrap */
 @media (max-width: 1200px) {
   .kf-image-new-wrap {
     max-width: 420px;
@@ -18318,7 +18318,7 @@ only screen and (min-width: 768px) and (max-width: 991px),
    ================================================================ */
 
 /* ---------------------------------------------------------------
-   REMOVE ALL UNDERLINES — every link on every section
+   REMOVE ALL UNDERLINES <EFBFBD> every link on every section
    --------------------------------------------------------------- */
 a,
 a:hover,
@@ -18349,7 +18349,7 @@ footer a,
 }
 
 /* ---------------------------------------------------------------
-   GLOBAL — prevent horizontal overflow at all sizes
+   GLOBAL <EFBFBD> prevent horizontal overflow at all sizes
    --------------------------------------------------------------- */
 *,
 *::before,
@@ -18367,7 +18367,7 @@ img {
 }
 
 /* ---------------------------------------------------------------
-   Header — responsive fixes
+   Header <EFBFBD> responsive fixes
    --------------------------------------------------------------- */
 @media (max-width: 1024px) {
 
@@ -18455,7 +18455,7 @@ img {
 }
 
 /* ---------------------------------------------------------------
-   Banner / Hero — responsive fixes
+   Banner / Hero <EFBFBD> responsive fixes
    --------------------------------------------------------------- */
 @media (max-width: 1200px) {
 
@@ -18522,7 +18522,7 @@ img {
 }
 
 /* ---------------------------------------------------------------
-   Work Section (How It Works) — image mosaic + steps
+   Work Section (How It Works) <EFBFBD> image mosaic + steps
    --------------------------------------------------------------- */
 @media (max-width: 1200px) {
   .work-others-section .container {
@@ -18634,7 +18634,7 @@ img {
 }
 
 /* ---------------------------------------------------------------
-   WorkProcess (Circular Step Diagram) — responsive fixes
+   WorkProcess (Circular Step Diagram) <EFBFBD> responsive fixes
    --------------------------------------------------------------- */
 @media (max-width: 1024px) {
   .case-works-section-area .row.align-items-center {
@@ -18752,7 +18752,7 @@ img {
 }
 
 /* ---------------------------------------------------------------
-   KeyFeatures — 992px fix (was missing in existing responsive CSS)
+   KeyFeatures <EFBFBD> 992px fix (was missing in existing responsive CSS)
    --------------------------------------------------------------- */
 @media (max-width: 992px) {
   .kf-container {
@@ -18781,7 +18781,7 @@ img {
 }
 
 /* ---------------------------------------------------------------
-   CaseStudies (Portfolio) — responsive fixes
+   CaseStudies (Portfolio) <EFBFBD> responsive fixes
    --------------------------------------------------------------- */
 @media (max-width: 1024px) {
   .case-studies-section .container {
@@ -18812,7 +18812,7 @@ img {
 }
 
 /* ---------------------------------------------------------------
-   Team Section — responsive fixes
+   Team Section <EFBFBD> responsive fixes
    --------------------------------------------------------------- */
 @media (max-width: 992px) {
   .team-area .col-lg-4 {
@@ -18831,7 +18831,7 @@ img {
 }
 
 /* ---------------------------------------------------------------
-   Testimonial — responsive fixes
+   Testimonial <EFBFBD> responsive fixes
    --------------------------------------------------------------- */
 @media (max-width: 1024px) {
 
@@ -18857,7 +18857,7 @@ img {
 }
 
 /* ---------------------------------------------------------------
-   FAQ — responsive fixes (3-col breakpoints)
+   FAQ <EFBFBD> responsive fixes (3-col breakpoints)
    --------------------------------------------------------------- */
 @media (max-width: 1200px) {
   .ztc-faq-section .faqv2-main-img {
@@ -18917,7 +18917,7 @@ img {
 }
 
 /* ---------------------------------------------------------------
-   Blogs Section — responsive fixes
+   Blogs Section <EFBFBD> responsive fixes
    --------------------------------------------------------------- */
 @media (max-width: 992px) {
   .vl-blog-1-area .col-lg-6 {
@@ -18934,7 +18934,7 @@ img {
 }
 
 /* ---------------------------------------------------------------
-   Footer — responsive fixes
+   Footer <EFBFBD> responsive fixes
    --------------------------------------------------------------- */
 @media (max-width: 992px) {
 
@@ -18964,7 +18964,7 @@ img {
 }
 
 /* ---------------------------------------------------------------
-   General Section Spacing — prevent sections merging
+   General Section Spacing <EFBFBD> prevent sections merging
    --------------------------------------------------------------- */
 .sp1 {
   padding: 80px 0;
@@ -19386,3 +19386,41 @@ img {
   font-size: 16px;
   line-height: 1.6;
 }
+/* New Button Styles - Theme Blue-Dark-Blue Gradient + Radius + Icon */
+.vl-btn1, .vl-btn2, .vl-btn3, .vl-btn4, .vl-btn5, .vl-btn6, .kf-demo-btn, .secondary-cta {
+    background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
+    background-size: 200% auto !important;
+    border-radius: 30px !important;
+    color: #fff !important;
+    padding: 20px 30px !important;
+    border: none !important;
+    transition: all 0.5s ease !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    text-decoration: none !important;
+}
+
+.vl-btn1:hover, .vl-btn2:hover, .vl-btn3:hover, .vl-btn4:hover, .vl-btn5:hover, .vl-btn6:hover, .kf-demo-btn:hover, .secondary-cta:hover {
+    background-position: right center !important;
+    color: #fff !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 5px 15px rgba(55, 121, 185, 0.4) !important;
+}
+
+/* <i> icon styles */
+.vl-btn1 i, .vl-btn2 i, .vl-btn3 i, .vl-btn4 i, .vl-btn5 i, .vl-btn6 i, .kf-demo-btn i, .secondary-cta i {
+    display: inline-block !important;
+    font-size: 14px !important;
+    margin-left: 5px !important;
+    transition: transform 0.3s ease !important;
+}
+
+.vl-btn1:hover i, .vl-btn2:hover i, .vl-btn3:hover i, .vl-btn4:hover i, .vl-btn5:hover i, .vl-btn6:hover i, .kf-demo-btn:hover i, .secondary-cta:hover i {
+    transform: translateX(3px) !important;
+}
+
+.vl-btn1::after, .vl-btn2::after, .vl-btn3::after, .vl-btn4::after, .vl-btn5::after, .vl-btn6::after, .kf-demo-btn::after, .secondary-cta::after {
+    display: none !important;
+}

src/components/mobile-app-development-service/support/cards/BlogCard.tsx

@@ -35,7 +35,7 @@ const BlogCard: React.FC<BlogCardProps> = ({ blog }) => {
                 <p>{blog.description}</p>
                 <div className="vl-blog-1-icon">
                     <Link href="/blogs/single">
-                        <i className="fa-solid fa-arrow-right"></i>
+                        <i className="fa-solid fa-angle-right"></i>
                     </Link>
                 </div>
             </div>

src/components/mobile-app-development-service/support/cards/CaseStudyCard.tsx

@@ -17,7 +17,7 @@ const CaseStudyCard: React.FC<CaseStudyCardProps> = ({ caseStudy }) => {
                 <div className="space16"></div>
                 <Link href={caseStudy.link || "#"}>{caseStudy.title}</Link>
                 <div className="arrow">
-                    <Link href={caseStudy.link || "#"}><i className="fa-solid fa-arrow-right"></i></Link>
+                    <Link href={caseStudy.link || "#"}><i className="fa-solid fa-angle-right"></i></Link>
                 </div>
             </div>
         </div>

src/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup.tsx

@@ -230,7 +230,7 @@ const ContactPopup: React.FC<ContactPopupProps> = ({ isOpen, onClose }) => {
                             </div>
 
                             <button type="submit" className="vl-btn1 submit-btn" disabled={isSubmitting}>
-                                {isSubmitting ? 'Sending...' : 'Submit & Get Free Proposal'} <i className="fa-solid fa-arrow-right"></i>
+                                {isSubmitting ? 'Sending...' : 'Submit & Get Free Proposal'} <i className="fa-solid fa-angle-right"></i>
                             </button>
                         </form>
                     </div>

src/components/mobile-app-development-service/support/layout/Header/Header.tsx

@@ -48,7 +48,7 @@ const Header = () => {
                                             className="vl-btn1"
                                             style={{ border: 'none' }}
                                         >
-                                            Get Started Now <i className="fa-solid fa-arrow-right"></i>
+                                            Get Started Now <i className="fa-solid fa-angle-right"></i>
                                         </button>
                                     </span>
                                 </div>

src/components/web-development-service/About.tsx

@@ -41,14 +41,15 @@ const About = () => {
                                 <h6>We specialize in:</h6>
                                 <div className="specialty-row mt-3">
                                     <ul className="specialty-list">
-                                        <li><i className="fas fa-check"></i> Business Websites</li>
-                                        <li><i className="fas fa-check"></i> Corporate Websites</li>
-                                        <li><i className="fas fa-check"></i> Landing Pages</li>
+                                        <li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Business Websites</li>
+                                        <li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Corporate Websites</li>
+                                        <li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Landing Pages</li>
                                     </ul>
                                     <ul className="specialty-list">
-                                        <li><i className="fas fa-check"></i> E-commerce Stores</li>
-                                        <li><i className="fas fa-check"></i> Custom Web Applications</li>
+                                        <li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> E-commerce Stores</li>
+                                        <li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Custom Web Applications</li>
                                     </ul>
+
                                 </div>
                             </div>
 
@@ -59,7 +60,7 @@ const About = () => {
                             <div className="space28"></div>
                             <div className="btn-area1" data-aos="fade-left" data-aos-duration="1200">
                                 <button onClick={() => setIsContactOpen(true)} className="vl-btn2">
-                                    Let’s Build Your Website <i className="fa-solid fa-arrow-right"></i>
+                                    Let’s Build Your Website <i className="fa-solid fa-angle-right"></i>
                                 </button>
                             </div>
                         </div>

src/components/web-development-service/BannerBottom.tsx

@@ -83,25 +83,48 @@ const BannerBottom = () => {
                                 <p className="desc-font mt-2">
                                     Our websites are designed for performance, speed, and scalability. With strong technical architecture and modern frameworks, we deliver fast-loading, secure, and user-friendly digital experiences that convert visitors into customers.
                                 </p>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+
+                {/* Centered Call Box at the Bottom of Logo/Illustration */}
+                <div className="row">
+                    <div className="col-lg-12 text-center">
+                        <div className="call-box-container" style={{ display: 'inline-block' }}>
                             <div
-                                    className="call-info-box d-flex align-items-center mt-3 justify-content-md-end justify-content-center"
+                                className="call-info-box d-flex align-items-center justify-content-center"
                                 onClick={() => setIsContactOpen(true)}
-                                    style={{ cursor: 'pointer' }}
+                                style={{
+                                    cursor: 'pointer',
+                                    background: '#3779b9',
+                                    padding: '10px 25px',
+                                    borderRadius: '50px',
+                                    border: '1px solid rgba(55, 121, 185, 0.2)',
+                                    transition: 'all 0.3s'
+                                }}
+                                onMouseEnter={(e) => {
+                                    e.currentTarget.style.background = '#3779b9';
+                                    e.currentTarget.style.transform = 'translateY(-2px)';
+                                }}
+                                onMouseLeave={(e) => {
+                                    e.currentTarget.style.background = '#3779b9';
+                                    e.currentTarget.style.transform = 'translateY(0)';
+                                }}
                             >
-                                    <div className="call-icon-bg">
-                                        <img src="/assets/img/icons/phn1.svg" alt="Phone Icon" className="scooter-mini-icon" />
+                                <div className="call-icon-bg" style={{ width: '40px', height: '40px' }}>
+                                    <img src="/assets/img/icons/phn1.svg" alt="Phone Icon" className="scooter-mini-icon" style={{ width: '20px' }} />
+                                </div>
+                                <div className="call-details ms-2">
+                                    <span style={{ color: '#fff', fontWeight: 600, fontSize: '16px' }}>Speak With Our Experts Today</span>
+                                </div>
                             </div>
-                                    <div className="call-details ms-3">
-                                        <span style={{ color: '#fff', fontWeight: 600 }}>Speak With Our Experts Today</span>
-
                         </div>
                     </div>
                 </div>
             </div>
 
-                    </div>
-                </div>
-            </div>
             <ContactPopup isOpen={isContactOpen} onClose={() => setIsContactOpen(false)} />
         </section>
     );

src/components/web-development-service/Hero.tsx

@@ -31,8 +31,8 @@ const Hero = () => {
                             <div className="space32"></div>
                             <GsapReveal y={30} duration={1.4} delay={0.6}>
                                 <div className="btn-area1 d-flex flex-wrap gap-3">
-                                    <button onClick={() => setIsContactOpen(true)} className="vl-btn1">Get Free Consultation <i className="fa-solid fa-arrow-right"></i></button>
-                                    <Link href="#portfolio" className="vl-btn1 secondary-cta">View Our Work <i className="fa-solid fa-arrow-right"></i></Link>
+                                    <button onClick={() => setIsContactOpen(true)} className="vl-btn1">Get Free Consultation <i className="fa-solid fa-angle-right"></i></button>
+                                    <Link href="#portfolio" className="vl-btn1">View Our Work <i className="fa-solid fa-angle-right"></i></Link>
                                 </div>
                             </GsapReveal>
                         </div>
@@ -46,13 +46,13 @@ const Hero = () => {
                                 <img src="/assets/img/all-images/bg/hero-bg2.png" alt="" className="keyframe5" />
                             </div> */}
                             <div className="elements1">
-                                <img src="/assets/img/home/banner/left-element.webp" alt="" className="animation-1 floating-slow" />
+                                <img src="/assets/img/home/banner/1-element.webp" alt="" className="animation-1 floating-slow" />
                             </div>
                             <div className="elements2">
-                                <img src="/assets/img/home/banner/bottom-element.webp" alt="" className="animation-2 floating-fast" />
+                                <img src="/assets/img/home/banner/bottom.webp" alt="" className="animation-2 floating-fast" />
                             </div>
                             <div className="elements3">
-                                <img src="/assets/img/home/banner/right-element.webp" alt="" className="animation-3 floating-slow" />
+                                <img src="/assets/img/home/banner/right.webp" alt="" className="animation-3 floating-slow" />
                             </div>
                         </div>
                     </div>

src/components/web-development-service/KeyFeatures.tsx

@@ -77,7 +77,7 @@ const KeyFeatures = () => {
                 {/* Left – Single Full Image */}
                 <div className="kf-image-column">
                     <img
-                        src="/assets/img/home/section4/fifth-section.webp"
+                        src="/assets/img/home/section4/4.webp"
                         alt="Key Features"
                         style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', borderRadius: '12px' }}
                         loading="lazy"
@@ -155,7 +155,7 @@ const KeyFeatures = () => {
                         </div>
                         <button onClick={() => setIsContactOpen(true)} className="kf-demo-btn">
                             Book Free Strategy Call
-                        </button>
+                         <i className="fa-solid fa-angle-right"></i></button>
                     </div>
                 </div>
 

src/components/web-development-service/Pricing.tsx

@@ -70,25 +70,39 @@ const Pricing = () => {
                                 <ul className="pricing-features list-unstyled mb-5" style={{ flexGrow: 1 }}>
                                     {plan.features.map((feature, i) => (
                                         <li key={i} className="d-flex align-items-center mb-3" style={{ color: plan.isPopular ? '#fff' : '#4a5568', fontSize: '16px' }}>
-                                            <i className="fa-solid fa-check-circle" style={{ color: '#3779b9', marginRight: '10px' }}></i>
+                                            <img
+                                                src={plan.isPopular ? "/assets/img/arrow-white.png" : "/assets/img/arrow.png"}
+                                                alt=""
+                                                style={{ width: '20px', height: '20px', objectFit: 'contain', marginRight: '10px' }}
+                                            />
                                             {feature}
                                         </li>
                                     ))}
                                 </ul>
 
+
+
                                 <div className="pricing-btn">
                                     <Link href={plan.link} className={`vl-btn1 w-100 text-center ${plan.isPopular ? '' : 'btn-dark'}`} style={{
-                                        display: 'block',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
                                         padding: '15px',
-                                        borderRadius: '12px',
+                                        borderRadius: '30px',
                                         fontWeight: 700,
-                                        background: plan.isPopular ? '#3779b9' : '#1a1f2b',
+                                        background: 'linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%)',
+                                        backgroundSize: '200% auto',
                                         color: '#fff',
-                                        transition: 'all 0.3s'
+                                        transition: 'all 0.5s',
+                                        textDecoration: 'none',
+                                        gap: '8px'
                                     }}>
-                                        Choose Plan <i className="fa-solid fa-arrow-right ms-2"></i>
+                                        Choose Plan <i className="fa-solid fa-angle-right"></i>
+
                                     </Link>
+
                                 </div>
+
                             </div>
                         </div>
                     ))}

src/components/web-development-service/Service.tsx

@@ -8,7 +8,7 @@ import ContactPopup from '@/components/common/ContactPopup/ContactPopup';
 const Service = () => {
     const [isContactOpen, setIsContactOpen] = useState(false);
     return (
-        <div className="service1-section-area sp2 service-parallax" id="services" style={{ backgroundImage: 'url(/assets/img/home/bg/bg-2.webp)', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundAttachment: 'fixed', position: 'relative' }}>
+        <div className="service1-section-area sp2 service-parallax" id="services" style={{ backgroundImage: 'url(/assets/img/home/section3/3.webp)', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundAttachment: 'fixed', position: 'relative' }}>
             <div className="section-overlay" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 0 }}></div>
             <div className="container" style={{ position: 'relative', zIndex: 1 }}>
                 {/* Header + intro image row */}
@@ -57,7 +57,7 @@ const Service = () => {
                     <div className="col-lg-8 text-center" data-aos="fade-up" data-aos-duration="1000">
                         <div className="service-bottom-cta">
                             <button onClick={() => setIsContactOpen(true)} className="vl-btn1">
-                                Start Your Project Today <i className="fa-solid fa-arrow-right"></i>
+                                Start Your Project Today <i className="fa-solid fa-angle-right"></i>
                             </button>
                         </div>
                     </div>

src/components/web-development-service/Work.tsx

@@ -63,20 +63,22 @@ const Work = () => {
                                 {/* Step List */}
                                 <div className="work-steps-list">
                                     {[
-                                        { num: '01', title: 'Conversion-Focused Strategy', desc: 'We build websites that are designed to generate leads and sales.' },
+                                        { img: '/assets/img/home/section5/conversion-2.webp', title: 'Conversion-Focused Strategy', desc: 'We build websites that are designed to generate leads and sales.' },
 
-                                        { num: '02', title: 'Mobile-First Development', desc: 'Fully responsive across mobile, tablet, and desktop.' },
+                                        { img: '/assets/img/home/section5/mobile-2.webp', title: 'Mobile-First Development', desc: 'Fully responsive across mobile, tablet, and desktop.' },
 
-                                        { num: '03', title: 'SEO-Optimized Structure', desc: 'Built with clean code and optimized for search engine visibility.' },
+                                        { img: '/assets/img/home/section5/seo-2.webp', title: 'SEO-Optimized Structure', desc: 'Built with clean code and optimized for search engine visibility.' },
 
-                                        { num: '04', title: 'Fast Loading Speed', desc: 'Performance-optimized websites that load in under 3 seconds.' },
+                                        { img: '/assets/img/home/section5/fast.webp', title: 'Fast Loading Speed', desc: 'Performance-optimized websites that load in under 3 seconds.' },
 
-                                        { num: '05', title: 'Secure & Scalable', desc: ' Secure architecture designed to grow with your business.' },
+                                        { img: '/assets/img/home/section5/secure.webp', title: 'Secure & Scalable', desc: ' Secure architecture designed to grow with your business.' },
 
-                                        { num: '06', title: 'Marketing-Ready Integration', desc: 'Facebook Pixel, Google Analytics, CRM & Automation ready.' },
+                                        { img: '/assets/img/home/section5/marketing.webp', title: 'Marketing-Ready Integration', desc: 'Facebook Pixel, Google Analytics, CRM & Automation ready.' },
                                     ].map((step, i) => (
                                         <div key={i} className="work-step-row" data-aos="fade-up" data-aos-duration={600 + i * 80}>
-                                            <div className="work-step-num">{step.num}</div>
+                                            <div className="work-step-num">
+                                                <img src={step.img} alt={step.title} />
+                                            </div>
                                             <div className="work-step-body">
                                                 <h4>{step.title}</h4>
                                                 <p>{step.desc}</p>
@@ -88,7 +90,7 @@ const Work = () => {
                                 <div className="space40"></div>
                                 <GsapReveal y={20} delay={0.4}>
                                     <button onClick={() => setIsContactOpen(true)} className="vl-btn1">
-                                        Book Free Strategy Call <i className="fa-solid fa-arrow-right"></i>
+                                        Book Free Strategy Call <i className="fa-solid fa-angle-right"></i>
                                     </button>
                                 </GsapReveal>
                             </div>

src/components/web-development-service/style.css

@@ -3454,7 +3454,7 @@ Location:
   border-radius: 50%;
   transition: all 0.4s;
   display: inline-block;
-  background: #1a1f2b;
+  background: #3779b9;
 }
 
 .service1-section-area .service1-boxarea .arrow {
@@ -4557,7 +4557,7 @@ Location:
 .hero1-section-area {
   position: relative;
   z-index: 2;
-  background-image: url(/assets/img/home/banner/bg.webp);
+  background-image: url(/assets/img/home/banner/1.webp);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -15971,8 +15971,8 @@ only screen and (min-width: 768px) and (max-width: 991px),
 }
 
 .bannerbottom-section .floating-circle img {
-  width: 55px;
-  height: 55px;
+  width: 40px;
+  height: 40px;
   object-fit: contain;
 }
 
@@ -17904,7 +17904,12 @@ only screen and (min-width: 768px) and (max-width: 991px),
   color: #1a1f2b;
   min-width: 44px;
   line-height: 1;
-  padding-top: 4px;
+}
+
+.work-step-num img {
+  width: 44px;
+  height: 44px;
+  object-fit: contain;
 }
 
 .work-step-body h4 {
@@ -17959,6 +17964,11 @@ only screen and (min-width: 768px) and (max-width: 991px),
     min-width: 36px;
   }
 
+  .work-step-num img {
+    width: 36px;
+    height: 36px;
+  }
+
   .work-step-body h4 {
     font-size: 15px;
   }
@@ -18118,7 +18128,7 @@ only screen and (min-width: 768px) and (max-width: 991px),
 }
 
 .service-parallax .service1-boxarea h5 {
-  color: #1a1f2b !important;
+  color: #fff !important;
 }
 
 .service-parallax .service1-boxarea:hover {
@@ -19223,7 +19233,7 @@ img {
   left: 0;
   width: 100%;
   height: 100%;
-  background-image: url(/assets/img/home/bg/bg-1.webp);
+  background-image: url(/assets/img/home/section1/2.webp);
   z-index: -1;
   background-position: center;
   background-repeat: no-repeat;
@@ -19369,3 +19379,77 @@ img {
 }
 
 /*============= PRICING CSS AREA ENDS ===============*/
+
+/* New Button Styles - Theme Blue-Dark-Blue Gradient + Radius + Icon */
+.vl-btn1,
+.vl-btn2,
+.vl-btn3,
+.vl-btn4,
+.vl-btn5,
+.vl-btn6,
+.kf-demo-btn,
+.secondary-cta {
+  background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
+  background-size: 200% auto !important;
+  border-radius: 30px !important;
+  color: #fff !important;
+  padding: 20px 30px !important;
+  border: none !important;
+  transition: all 0.5s ease !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 8px !important;
+  text-decoration: none !important;
+}
+
+.vl-btn1:hover,
+.vl-btn2:hover,
+.vl-btn3:hover,
+.vl-btn4:hover,
+.vl-btn5:hover,
+.vl-btn6:hover,
+.kf-demo-btn:hover,
+.secondary-cta:hover {
+  background-position: right center !important;
+  color: #fff !important;
+  transform: translateY(-2px) !important;
+  box-shadow: 0 5px 15px rgba(55, 121, 185, 0.4) !important;
+}
+
+/* <i> icon styles */
+.vl-btn1 i,
+.vl-btn2 i,
+.vl-btn3 i,
+.vl-btn4 i,
+.vl-btn5 i,
+.vl-btn6 i,
+.kf-demo-btn i,
+.secondary-cta i {
+  display: inline-block !important;
+  font-size: 14px !important;
+  margin-left: 5px !important;
+  transition: transform 0.3s ease !important;
+}
+
+.vl-btn1:hover i,
+.vl-btn2:hover i,
+.vl-btn3:hover i,
+.vl-btn4:hover i,
+.vl-btn5:hover i,
+.vl-btn6:hover i,
+.kf-demo-btn:hover i,
+.secondary-cta:hover i {
+  transform: translateX(3px) !important;
+}
+
+.vl-btn1::after,
+.vl-btn2::after,
+.vl-btn3::after,
+.vl-btn4::after,
+.vl-btn5::after,
+.vl-btn6::after,
+.kf-demo-btn::after,
+.secondary-cta::after {
+  display: none !important;
+}