herosection-content-txt

portfolio.html

@@ -164,7 +164,7 @@
           <div class="container-hero">
             <div class="hero-content">
               <div class="hero-category">
-                <p>طراحی وبسایت | گیمیفیکیشن</p>
+                <p>طراحی وبسایت | گیمیفیکیشن|طراحی وبسایت | گیمیفیکیشن|طراحی وبسایت | گیمیفیکیشن|طراحی وبسایت | گیمیفیکیشن|طراحی وبسایت | گیمیفیکیشن</p>
               </div>
 
               <h1 class="hero-title">طراحی وبسایت اینوا | ترکیب خلاقیت با نوآوری</h1>

src/assets/css/portfolio-responsive.css

@@ -248,7 +248,7 @@
     display: none;
   }
   .hero-section {
-    padding-right: 19px;
+    padding: 0 19px;
     padding-bottom: 122px;
     margin-top: 78px;
   }
@@ -270,19 +270,13 @@
   }
   .hero-category {
     position: relative;
-    display: inline-block;
+    display: flex;
+    flex-wrap: wrap;
+    width: 30%;
   }
   .hero-category p {
     font-size: 13px;
   }
-  .hero-category::after {
-    content: '';
-    position: absolute;
-    width: 225px;
-    height: 1px;
-    background: #8898a3;
-    margin-top: 8px;
-  }
   .hero-title {
     font-size: 24px;
     padding-left: 850px;

src/assets/css/portfolio.css

@@ -75,22 +75,18 @@ section[class*='-section'] {
 }
 
 .hero-category {
-  position: relative;
+  /* position: relative;
-  display: inline-block;
+  display: inline-block; */
+  border-bottom: 1px solid #8898a3;
+  padding-bottom: 8px; /* فاصله متن تا خط */
+ width: fit-content;
 }
 .hero-category p {
   color: #eaeef0;
   font-size: 14px;
   line-height: 1.8;
 }
-.hero-category::after {
+
-  content: '';
-  position: absolute;
-  width: 225px;
-  height: 1px;
-  background: #8898a3;
-  margin-top: 8px;
-}
 .hero-title {
   font-size: 36px;
   line-height: 1.5;
@@ -427,7 +423,7 @@ section[class*='-section'] {
 }
 .portfolio-logo-wrapper.mobile-view .portfolio-modal {
   width: 360px;
-  height: 740px;
+  height: 580px;
 }
 .portfolio-logo-wrapper.mobile-view .desktop-image {
   opacity: 0;