fix height boxes + padding logo

portfolio.html

@@ -310,6 +310,11 @@
                     <p class="item-textc">
                       بازار اشباع شده و وجود رقبای قدرتمند در این عرصه ازار اشباع شده و وجود رقبای
                       ازار اشباع شده و وجود رقبای قدرتمند در این عرصه
+                      بازار اشباع شده و وجود رقبای قدرتمند در این عرصه ازار اشباع شده و وجود رقبای
+                      ازار اشباع شده و وجود رقبای قدرتمند در این عرصه
+                      بازار اشباع شده و وجود رقبای قدرتمند در این عرصه ازار اشباع شده و وجود رقبای
+                      ازار اشباع شده و وجود رقبای قدرتمند در این عرصه
+                      
                     </p>
                   </li>
                   <li class="itemc">

src/assets/css/portfolio.css

@@ -263,6 +263,7 @@ section[class*='-section'] {
   border-radius: 999px;
   background: var(--color-primary);
   transition: right 0.08s linear;
+  
 }
 .portfolio-nav-btn {
   border-radius: 10px;
@@ -633,8 +634,8 @@ section[class*='-section'] {
   content: '';
   position: absolute;
   bottom: 0;
-  left: -30px;
+  left: -26px;
-  width: 30px;
+  width: 26px;
   height: 30px;
   background: transparent;
   border-bottom-right-radius: 7px;
@@ -661,6 +662,7 @@ section[class*='-section'] {
   border: 5px solid #d9ecff;
   cursor: pointer;
   box-shadow: 0 4px 12px var(--color-pastel-main);
+  z-index: 100;
 }
 body.dragging-scroll {
   user-select: none;
@@ -683,7 +685,7 @@ body.dragging-scroll {
 }
 .logo-popup {
   width: 151px;
-  height: 37px;
+  padding: 4px 0;
   background: #fff;
   border-radius: 7px 7px 0 0;
   display: flex;
@@ -694,7 +696,6 @@ body.dragging-scroll {
   align-items: center;
 }
 .logo-popup-img img {
-  border-radius: 7px;
   width: 109px;
   height: 32px;
 }
@@ -975,6 +976,7 @@ body.dragging-scroll {
   display: flex;
   flex-direction: column;
   gap: 24px;
+  max-width: 600px;
 }
 .itemc,
 .itemr {
@@ -983,8 +985,8 @@ body.dragging-scroll {
   align-items: center;
   padding: 12px 16px 12px 24px;
   border-radius: 8px;
-  max-height: 76px;
+  /* max-height: 76px;
-  overflow: hidden;
+  overflow: hidden; */
 }
 .itemc {
   background-color: #f0f5fe;
@@ -996,6 +998,7 @@ body.dragging-scroll {
 .itemr {
   background-color: #e5efff;
   position: relative;
+  max-width: 600px;
 }
 .itemr::after {
   content: '';
@@ -1016,17 +1019,18 @@ body.dragging-scroll {
 .item-textc,
 .item-textr {
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  /* -webkit-line-clamp: 2;
-  line-clamp: 2;
+  line-clamp: 2; */
   -webkit-box-orient: vertical;
-  overflow: hidden;
+  overflow:visible ;
+
 }
 .item-icon {
   align-items: flex-start;
 }
 .vs {
   position: absolute;
-  top: 7%;
+  top: 35px;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 64px;

src/assets/js/portfolio.js

@@ -62,6 +62,29 @@ document.addEventListener('DOMContentLoaded', () => {
 
   columns.forEach((col) => observer.observe(col));
 });
+function equalHeights() {
+  const leftItems = document.querySelectorAll('.itemc');
+  const rightItems = document.querySelectorAll('.itemr');
+
+  leftItems.forEach((leftItem, index) => {
+    const rightItem = rightItems[index];
+
+    if (!rightItem) return;
+
+    leftItem.style.height = 'auto';
+    rightItem.style.height = 'auto';
+
+    const maxHeight = Math.max(leftItem.offsetHeight, rightItem.offsetHeight);
+
+    leftItem.style.height = `${maxHeight}px`;
+    rightItem.style.height = `${maxHeight}px`;
+  });
+}
+
+window.addEventListener('load', equalHeights);
+window.addEventListener('resize', equalHeights);
+
+
 
 const stepsData = [
   {
@@ -664,6 +687,14 @@ document.querySelector('.portfolio-nav-meeting').addEventListener('click', funct
     });
   }
 });
+
+
+
+
+
+
+
+
 const aboutSection = document.querySelector('.about-section');
 const showcaseSection = document.querySelector('.showcase-section');
 const mediaSection = document.querySelector('.media-section');
@@ -1071,6 +1102,8 @@ function handleMobilePopupView() {
   window.addEventListener('resize', updateOrientationState);
   window.addEventListener('orientationchange', updateOrientationState);
 
+updateOrientationState();
+
   function updateOrientationState() {
     const isLandscape = window.innerWidth > window.innerHeight;