contact icon issue updated

public/assets/css/main.css

@@ -4350,7 +4350,7 @@ p.banner-text {
   .news-area .col-lg-8 {
     width: 100%;
     order: 1;
-    margin-bottom: 50px;
+    /* margin-bottom: 50px; */
   }
 
   .blog-details-area .col-lg-4,

src/app/globals.css

@@ -10861,10 +10861,11 @@ body {
 
 @media (max-width: 424px) {
   .contact-area .contact-info-item .icon {
-    width: 0px;
-    height: 0px;
-    margin-right: 20px;
-    font-size: 16px;
+    width: 50px;
+    height: 50px;
+    min-width: 50px;
+    margin-right: 15px;
+    font-size: 18px;
   }
 
   .about-three__card__exp {
@@ -12001,7 +12002,7 @@ body {
 
 @media (max-width: 500px) {
   .contact-area .contact-info-item .content h6 {
-    font-size: 16px;
+    font-size: 14px;
   }
 
   .faq-one__card {
@@ -13586,3 +13587,9 @@ body {
   background-color: #3779b9;
   color: #ffffff;
 }
+
+@media (max-width: 767px) {
+  .video-three .video-three__inner {
+    margin-top: -50px;
+  }
+}

src/components/blog/BlogDetails.tsx

@@ -52,7 +52,7 @@ const BlogDetails = ({ blog }: BlogDetailsProps) => {
 
                             {/* Render the full HTML content from description */}
                             <div
-                                className="details-text mb-60"
+                                className="details-text"
                                 dangerouslySetInnerHTML={{ __html: blog.description || '' }}
                             />
 

src/components/blog/BlogSidebar.tsx

@@ -164,7 +164,7 @@ const BlogSidebar = ({
             </div>
 
             {/* Categories Widget */}
-            <div className="single-sidebar-widget">
+            <div className="single-sidebar-widget mb-0">
                 <div className="wid-title">
                     <h3>{excludeSlug ? "Blog Related Category" : "Categories"}</h3>
                 </div>

src/components/contact/ContactSection.tsx

@@ -105,7 +105,7 @@ const ContactSection = () => {
                                 </div>
                                 <div className="contact-info-list">
                                     <div className="contact-info-item d-flex align-items-center mb-30">
-                                        <div className="Call Anytime">
+                                        <div className="icon">
                                             <i className="fa-solid fa-phone-volume"></i>
                                         </div>
                                         <div className="content">
@@ -114,7 +114,7 @@ const ContactSection = () => {
                                         </div>
                                     </div>
                                     <div className="contact-info-item d-flex align-items-center mb-30">
-                                        <div className="Send Email">
+                                        <div className="icon">
                                             <i className="fa-solid fa-envelope"></i>
                                         </div>
                                         <div className="content">
@@ -123,7 +123,7 @@ const ContactSection = () => {
                                         </div>
                                     </div>
                                     <div className="contact-info-item d-flex align-items-center">
-                                        <div className="Waterloo, Ontario Canada">
+                                        <div className="icon">
                                             <i className="fa-solid fa-location-dot"></i>
                                         </div>
                                         <div className="content">

src/components/home/AboutThree.tsx

@@ -79,7 +79,7 @@ const AboutThree = () => {
                                     <p className="about-three__card__exp__text">Years Experience</p>
                                 </div>
                             </div>
-                            <div className="about-three__benefits">
+                            <div className="about-three__benefits pt-20">
                                 <ul className="about-three__benefits__list">
                                     <li className="bullet-item d-flex align-items-center mb-20">
                                         <i className="fa-solid fa-circle-check" style={{ marginRight: '10px' }}></i>

src/components/home/PortfolioSection.tsx

@@ -173,9 +173,9 @@ function PortfolioLightbox({ item, onClose }: { item: any; onClose: () => void }
         <div className="pf-lightbox-backdrop" onClick={onClose}>
             <div className="pf-lightbox-content" onClick={(e) => e.stopPropagation()}>
                 <img src={item.image} alt={item.alt || item.name} className="pf-lightbox-img" />
-                <div className="pf-lightbox-details">
+                {/* <div className="pf-lightbox-details">
                     <h3>{item.name}</h3>
-                </div>
+                </div> */}
             </div>
         </div>
     );