diff --git a/assets/images/coffee-icon.png b/assets/images/coffee-icon.png
new file mode 100644
index 0000000..3be1a27
Binary files /dev/null and b/assets/images/coffee-icon.png differ
diff --git a/assets/images/gallery/Case Study 2.png b/assets/images/gallery/Case Study 2.png
index 686e361..a02e092 100644
Binary files a/assets/images/gallery/Case Study 2.png and b/assets/images/gallery/Case Study 2.png differ
diff --git a/assets/images/gallery/Case Study 3.png b/assets/images/gallery/Case Study 3.png
new file mode 100644
index 0000000..afce8c5
Binary files /dev/null and b/assets/images/gallery/Case Study 3.png differ
diff --git a/assets/images/gallery/Case Study 4.png b/assets/images/gallery/Case Study 4.png
new file mode 100644
index 0000000..92a5660
Binary files /dev/null and b/assets/images/gallery/Case Study 4.png differ
diff --git a/index.html b/index.html
index 2b7a96c..6ec9839 100644
--- a/index.html
+++ b/index.html
@@ -84,11 +84,11 @@ <h2 class="designer fade_up">Frontend Developer</h2>
                                     <img src="assets/images/svg/pricing-svg.svg" alt="home-svg">Pricing
                                 </a>
                             </li-->
-                            <li class="active-menu-action">
+                            <!--li class="active-menu-action">
                                 <a class="fade_right" href="#blog">
                                     <img src="assets/images/svg/blog-svg.svg" alt="home-svg">Blog
                                 </a>
-                            </li>
+                            </li-->
                             <li class="active-menu-action" id="contact-line">
                                 <a class="fade_right" href="#contact">
                                     <img src="assets/images/svg/contact-svg.svg" alt="home-svg">Contact
@@ -298,17 +298,13 @@ <h2 class="section-heading-text about-me fade_up">About Me.</h2>
     flex-wrap: wrap;
 }
 
-.left-details {
+.right-details {
     flex: 1;
     text-align: center;
     margin: 10px;
 }
 
-.profile-pic {
-    max-width: 200px;
-    height: auto;
-    border-radius: 70%;
-}
+
 
 .years, .project {
     margin-top: 10px;
@@ -316,30 +312,30 @@ <h2 class="section-heading-text about-me fade_up">About Me.</h2>
     font-weight: bold;
 }
 
-.right-details {
+.left-details {
     flex: 2;
     max-width: 600px;
     margin: 10px;
     color: white; /* Add this line to change text color to white */
 }
 
-.right-details h4,
-.right-details h3,
-.right-details p {
+.left-details h4,
+.left-details h3,
+.left-details p {
     color: white; /* Add this line to ensure specific elements are white */
 }
 
-.right-details h4 {
+.left-details h4 {
     font-size: 20px;
     margin-bottom: 10px;
 }
 
-.right-details h3 {
+.left-details h3 {
     font-size: 18px;
     margin-bottom: 10px;
 }
 
-.right-details p {
+.left-details p {
     font-size: 16px;
     line-height: 1.5;
     margin-bottom: 20px;
@@ -862,6 +858,45 @@ <h3 class="services-product-text fade_up">BUILDING DIGITAL PRODUCT WITH BETTER E
                                     <img class="down-arrow-svg" src="assets/images/svg/down-arrow.svg" alt="down-arrow">
                                 </a>
                             </div>
+
+                            <!--Visual branding start-->
+
+
+                    <div id="services-popup" class="popup-container">
+                        <div class="popup-content popup-content2">
+                            <a href="#" class="close">&times;</a>
+                            <h2 class="simple-steps">Visual Branding</h2>
+                            <img class="blog-popup-img2" src="assets/images/gallery/Case Study 2.png"
+                                alt="case study 2">
+                            <p class="blog-sit-text">Just because we cant get out and about like we normally would,
+                                doesn’t mean we have to taking pictures. There’s still plenty you can do, provided you
+                                are prepared to use some imagination. Here are a few ideas to keep you shooting until
+                                normal life resumes.
+                            </p>
+                            <p class="blog-sit-text">Most photographers love to shoot the unusual, and you don’t get
+                                much more unusual than These Unprecedented Times. Right now everything counts as out of
+                                the ordinary. There are a number of remarkable things about these lockdown days that are
+                                worth photographing now we can remember them when it is all over.
+                            </p>
+                            <p class="blog-sit-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga
+                                consequatur delectus porro sapiente molestias, magni quasi sed, enim corporis omnis
+                                doloremque soluta inventore dolorum consequuntur quo obcaecati rerum sit non.
+                            </p>
+                            <h2 class="simple-steps services-popup-text">What Is Ui/Ux?</h2>
+                            <p class="blog-sit-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga
+                                consequatur delectus porro sapiente molestias, magni quasi sed, enim corporis omnis
+                                doloremque soluta inventore dolorum consequuntur quo obcaecati rerum sit non.
+                            </p>
+                            <p class="blog-sit-text">treets empty that are usually busy are remarkable and can evoke the
+                                sense of historical pictures from before the invention of the motorcar. Other things
+                                that are different at the moment will be queues to get into stores and the lines marked
+                                out on the floor to show how far apart we should be.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!--visual branding end-->
+
                             <div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-6 services-column fade_up">
                                 <a href="#services-popup">
                                     <div class="services-img services-img3">
@@ -873,6 +908,43 @@ <h3 class="services-product-text fade_up">BUILDING DIGITAL PRODUCT WITH BETTER E
                                     <img class="down-arrow-svg" src="assets/images/svg/down-arrow.svg" alt="down-arrow">
                                 </a>
                             </div>
+                            <!--web developer start-->
+
+                    <div id="services-popup" class="popup-container">
+                        <div class="popup-content popup-content3">
+                            <a href="#" class="close">&times;</a>
+                            <h2 class="simple-steps">WEB DEVELOPMENT</h2>
+                            <img class="blog-popup-img3" src="assets/images/gallery/Case Study 3.png"
+                                alt="gallery-img8">
+                            <p class="blog-sit-text">Just because we cant get out and about like we normally would,
+                                doesn’t mean we have to taking pictures. There’s still plenty you can do, provided you
+                                are prepared to use some imagination. Here are a few ideas to keep you shooting until
+                                normal life resumes.
+                            </p>
+                            <p class="blog-sit-text">Most photographers love to shoot the unusual, and you don’t get
+                                much more unusual than These Unprecedented Times. Right now everything counts as out of
+                                the ordinary. There are a number of remarkable things about these lockdown days that are
+                                worth photographing now we can remember them when it is all over.
+                            </p>
+                            <p class="blog-sit-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga
+                                consequatur delectus porro sapiente molestias, magni quasi sed, enim corporis omnis
+                                doloremque soluta inventore dolorum consequuntur quo obcaecati rerum sit non.
+                            </p>
+                            <h2 class="simple-steps services-popup-text">What Is Ui/Ux?</h2>
+                            <p class="blog-sit-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga
+                                consequatur delectus porro sapiente molestias, magni quasi sed, enim corporis omnis
+                                doloremque soluta inventore dolorum consequuntur quo obcaecati rerum sit non.
+                            </p>
+                            <p class="blog-sit-text">treets empty that are usually busy are remarkable and can evoke the
+                                sense of historical pictures from before the invention of the motorcar. Other things
+                                that are different at the moment will be queues to get into stores and the lines marked
+                                out on the floor to show how far apart we should be.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!--web developer end-->
+
                             <div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-6 services-column fade_up">
                                 <a href="#services-popup">
                                     <div class="services-img services-img4">
@@ -921,6 +993,47 @@ <h2 class="simple-steps services-popup-text">What Is Ui/Ux?</h2>
                             </p>
                         </div>
                     </div>
+
+
+                    
+
+                    
+
+
+                    <!--data analyst start-->
+                    <div id="services-popup" class="popup-container">
+                        <div class="popup-content popup-content2">
+                            <a href="#" class="close">&times;</a>
+                            <h2 class="simple-steps">Data  Analytics</h2>
+                            <img class="blog-popup-img1" src="assets/images/gallery/Case Study 4.png"
+                                alt="gallery-img8">
+                            <p class="blog-sit-text">Just because we cant get out and about like we normally would,
+                                doesn’t mean we have to taking pictures. There’s still plenty you can do, provided you
+                                are prepared to use some imagination. Here are a few ideas to keep you shooting until
+                                normal life resumes.
+                            </p>
+                            <p class="blog-sit-text">Most photographers love to shoot the unusual, and you don’t get
+                                much more unusual than These Unprecedented Times. Right now everything counts as out of
+                                the ordinary. There are a number of remarkable things about these lockdown days that are
+                                worth photographing now we can remember them when it is all over.
+                            </p>
+                            <p class="blog-sit-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga
+                                consequatur delectus porro sapiente molestias, magni quasi sed, enim corporis omnis
+                                doloremque soluta inventore dolorum consequuntur quo obcaecati rerum sit non.
+                            </p>
+                            <h2 class="simple-steps services-popup-text">What Is Ui/Ux?</h2>
+                            <p class="blog-sit-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga
+                                consequatur delectus porro sapiente molestias, magni quasi sed, enim corporis omnis
+                                doloremque soluta inventore dolorum consequuntur quo obcaecati rerum sit non.
+                            </p>
+                            <p class="blog-sit-text">treets empty that are usually busy are remarkable and can evoke the
+                                sense of historical pictures from before the invention of the motorcar. Other things
+                                that are different at the moment will be queues to get into stores and the lines marked
+                                out on the floor to show how far apart we should be.
+                            </p>
+                        </div>
+                    </div>
+                    <!--data analyst end-->
                     <!-- ====================================== Services PopUp End ===================================== -->
                     <!-- ====================================== Section Portfolio ===================================== -->
                     <section class="portfolio-section" id="portfolio">
@@ -1080,7 +1193,7 @@ <h2 class="mobile_app">Gallery</h2>
                                         <div class="card-image">
                                             <a href="assets/images/gallery/Case Study 2.png" data-fancybox="gallery"
                                                 data-caption="Caption Images 1">
-                                                <img src="assets/images/gallery/gallery-img1.jpg" alt="gallery-img1">
+                                                <img src="assets/images/gallery/Case Study 2.png" alt="gallery-img1">
                                             </a>
                                         </div>
                                     </div>
@@ -1233,88 +1346,7 @@ <h2 class="mobile_app">Gallery</h2>
                         </div>
                     </div>
 
-                    <section id="portfolio" class="portfolio">
-                        <h4 class="section-top-title">Portfolio</h4>
-                        <h3 class="section-title">My Amazing Works</h3>
-                        <p class="section-description-title">Most common methods for designing websites that work <br> well on desktop
-                            is responsive and adaptive design</p>
-                        <div class="filter-portfolio">
-                            <button data-filter="all" class="active-portfolio">All</button>
-                            <button data-filter=".app">App</button>
-                            <button data-filter=".web">Web</button>
-                            <button data-filter=".design">Design</button>
-                        </div>
-                        <div class="portfolio-container container">
-                            <div class="portfolio-item mix web">
-                                <img src="./assets/image/web1.jpg" alt="">
-                                <div class="item-content">
-                                    <span>Web</span>
-                                </div>
-                            </div>
-                            <div class="portfolio-item mix web">
-                                <img src="./assets/image/web2.jpg" alt="">
-                                <div class="item-content">
-                                    <span>Web</span>
-                                </div>
-                            </div>
-                            <div class="portfolio-item mix web">
-                                <img src="./assets/image/web3.jpg" alt="">
-                                <div class="item-content">
-                                    <span>Web</span>
-                                </div>
-                            </div>
-                            <div class="portfolio-item mix web">
-                                <img src="./assets/image/web4.jpg" alt="">
-                                <div class="item-content">
-                                    <span>Web</span>
-                                </div>
-                            </div>
-                            <div class="portfolio-item mix app">
-                                <img src="./assets/image/app1.jpg" alt="">
-                                <div class="item-content">
-                                    <span>App</span>
-                                </div>
-                            </div>
-                            <div class="portfolio-item mix app">
-                                <img src="./assets/image/app2.jpg" alt="">
-                                <div class="item-content">
-                                    <span>App</span>
-                                </div>
-                            </div>
-                            <div class="portfolio-item mix app">
-                                <img src="./assets/image/app3.jpg" alt="">
-                                <div class="item-content">
-                                    <span>App</span>
-                                </div>
-                            </div>
-                            <div class="portfolio-item mix app">
-                                <img src="./assets/image/app4.jpg" alt="">
-                                <div class="item-content">
-                                    <span>App</span>
-                                </div>
-                            </div>
-                            <div class="portfolio-item mix design">
-                                <img src="./assets/image/design1.png" alt="">
-                                <div class="item-content">
-                                    <span>Design</span>
-                                </div>
-                            </div>
-                            <div class="portfolio-item mix design">
-                                <img src="./assets/image/design2.jpg" alt="">
-                                <div class="item-content">
-                                    <span>Design</span>
-                                </div>
-                            </div>
-                            <div class="portfolio-item mix design">
-                                <img src="./assets/image/design3.jpg" alt="">
-                                <div class="item-content">
-                                    <span>Design</span>
-                                </div>
-                            </div>
-                        </div>
-                
-                
-                    </section>
+                    
                     <!-- ======================================= Gallery End================================== -->
                     <!-- ====================================== Section Pricing ===================================== -->
                     <!--section class="Pricing-section" id="pricing">
@@ -1449,7 +1481,7 @@ <h2 class="section-heading-text coding-skill-text fade_up">Testimonials.</h2>
                     </section>
                     <!-- ====================================== Section Testimonials ===================================== -->
                     <!-- ====================================== Section Blogs ===================================== -->
-                    <section class="blog-section" id="blog">
+                    <!--section class="blog-section" id="blog">
                         <div class="heading-container">
                             <h2 class="section-heading-text coding-skill-text fade_up">Blogs.</h2>
                             <div class="line"></div>
@@ -1523,7 +1555,7 @@ <h5 class="est">Habitasse gravida vestibulum egestas dis quis mauris ut nulla qu
                                 </div>
                             </div>
                         </div>
-                    </section>
+                    </section-->
                     <!-- ====================================== Section Blogs End ===================================== -->
                     <!-- ====================================== Blogs PopUp ===================================== -->
                     <div id="blog-popup" class="popup-container">
@@ -1657,7 +1689,20 @@ <h2 class="simple-steps">Become a Frontend Developer in 5 Simple Steps</h2>
                             <h2 class="section-heading-text coding-skill-text fade_up">Get In Touch.</h2>
                             <div class="line"></div>
                         </div>
-                        <p class="services-product-text fade_up">TAKE A COFFEE & CHAT WITH ME</p>
+                        <style>
+                            .services-product-text, .coffee-icon {
+                                display: inline-block;
+                                vertical-align: middle;
+                            }
+                            .services-product-text {
+                                margin-right: 5px; /* Adjust spacing as needed */
+                            }
+                        </style>
+                        <p class="services-product-text fade_up">Let's have a coffee and chat with me!</p>
+                        <img class="coffee-icon" src="assets/images/coffee-icon.png" alt="Coffee Icon">
+
+
+                        <br>
                         <div class="main-box-contact">
                             <div class="contact-box-main zoom_in">
                                 <div class="mobile-icon-main">