nestiq-component-library 1.0.26 → 1.0.28

package/src/assets/images/Images/icon_gallery.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18.242 1.29H4.297a1.76 1.76 0 0 0-1.758 1.757v.742h-.781A1.76 1.76 0 0 0 0 5.547v11.406c0 .97.789 1.758 1.758 1.758h13.945a1.76 1.76 0 0 0 1.758-1.758v-.742h.781A1.76 1.76 0 0 0 20 14.453V3.047a1.76 1.76 0 0 0-1.758-1.758zM4.297 2.46h13.945c.323 0 .586.264.586.587v5.508l-3.49-2.47a.586.586 0 0 0-.724.037L10 10.159l-2.114-1.85a.586.586 0 0 0-.748-.02l-3.427 2.693V3.047c0-.323.263-.586.586-.586zm11.992 14.493a.587.587 0 0 1-.586.586H1.758a.587.587 0 0 1-.586-.586V5.547c0-.323.263-.586.586-.586h.781v9.492c0 .97.789 1.758 1.758 1.758h11.992v.742zm1.953-1.914H4.297a.587.587 0 0 1-.586-.586v-1.98L7.48 9.51l2.134 1.868c.221.193.55.193.772 0l4.652-4.071 3.79 2.683v4.462a.587.587 0 0 1-.586.586z" fill="#fff"/>
+    <path d="M10 7.46a1.838 1.838 0 0 0 1.836-1.835A1.838 1.838 0 0 0 10 3.789a1.838 1.838 0 0 0-1.836 1.836c0 1.012.824 1.836 1.836 1.836zm0-2.5a.665.665 0 1 1-.001 1.33A.665.665 0 0 1 10 4.96z" fill="#fff"/>
+</svg>

package/src/assets/images/Images/icon_home.svg

@@ -0,0 +1,3 @@
+<svg width="50" height="46" viewBox="0 0 50 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21 40V28h8v12h10V24h6L25 6 5 24h6v16h10z" fill="#FFB525"/>
+</svg>

package/src/assets/images/Images/icon_map.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#bq66l33lna)">
+        <path d="M19.286 0a.715.715 0 0 0-.32.075l-5.413 2.707-6.12-2.72C7.423.058 7.41.057 7.4.052a.741.741 0 0 0-.17-.044 1.063 1.063 0 0 0-.175 0 .742.742 0 0 0-.171.044c-.01.005-.022.005-.032.01L.424 2.919A.714.714 0 0 0 0 3.572v15.714a.714.714 0 0 0 1.004.653l6.139-2.729 6.138 2.729c.01.004.022 0 .033.006a.63.63 0 0 0 .54-.012c.012-.005.025 0 .036-.008l5.715-2.857a.714.714 0 0 0 .395-.64V.716A.714.714 0 0 0 19.286 0zM6.428 15.964l-5 2.222V4.036l5-2.222v14.15zm6.429 2.222-5-2.222V1.814l5 2.222v14.15zm5.714-2.199-4.286 2.143V4.013l4.286-2.143v14.117z" fill="#fff"/>
+    </g>
+    <defs>
+        <clipPath id="bq66l33lna">
+            <path fill="#fff" d="M0 0h20v20H0z"/>
+        </clipPath>
+    </defs>
+</svg>

package/src/assets/images/Images/icon_share 1.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.046 9.9h-2.56a.937.937 0 1 0 0 1.875h2.56c.517 0 .938.42.938.937v12.26c0 .517-.42.938-.938.938H7.953a.939.939 0 0 1-.937-.938v-12.26c0-.517.42-.937.937-.937h2.56a.937.937 0 1 0 0-1.875h-2.56a2.816 2.816 0 0 0-2.812 2.812v12.26a2.816 2.816 0 0 0 2.812 2.813h14.093a2.816 2.816 0 0 0 2.813-2.813v-12.26A2.816 2.816 0 0 0 22.046 9.9zM11.504 8.007l2.59-2.59V17.76a.937.937 0 1 0 1.874 0V5.418l2.59 2.59a.934.934 0 0 0 1.326 0 .937.937 0 0 0 0-1.327l-4.19-4.19a.938.938 0 0 0-1.326 0l-4.19 4.19a.937.937 0 1 0 1.326 1.326z" fill="#000"/>
+</svg>

package/src/assets/images/Images/layer_icon.svg

@@ -0,0 +1,5 @@
+<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="m21.354 5.808-10-5.714a.714.714 0 0 0-.709 0l-10 5.714a.714.714 0 0 0 .017 1.25l10 5.357a.714.714 0 0 0 .675 0l10-5.357a.714.714 0 0 0 .017-1.25zM11 10.975 2.475 6.408 11 1.537l8.525 4.871L11 10.975z" fill="#fff"/>
+    <path d="m11.34 16.162 9.656-5.31V9.22l-10 5.5-10-5.5v1.63l9.656 5.31a.715.715 0 0 0 .688 0z" fill="#fff"/>
+    <path d="m.996 14.762 9.664 5.154a.714.714 0 0 0 .672 0l9.664-5.154v-1.62l-10 5.334-10-5.333v1.619z" fill="#fff"/>
+</svg>

package/src/assets/images/Images/left arrow.svg

@@ -0,0 +1,16 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#46c6isfo7a)">
+        <path fill="#fff" fill-opacity=".01" d="M0 16.5V.5h16v16z"/>
+        <g clip-path="url(#rjccvk0pfb)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M4.68 16.32a.614.614 0 0 1 0-.872L11.63 8.5 4.68 1.552A.616.616 0 0 1 5.553.68l7.384 7.384a.615.615 0 0 1 0 .871L5.552 16.32a.615.615 0 0 1-.871 0z" fill="#000"/>
+        </g>
+    </g>
+    <defs>
+        <clipPath id="46c6isfo7a">
+            <path fill="#fff" transform="rotate(-90 8.25 8.25)" d="M0 0h16v16H0z"/>
+        </clipPath>
+        <clipPath id="rjccvk0pfb">
+            <path fill="#fff" transform="rotate(-90 8.25 8.25)" d="M0 0h16v16H0z"/>
+        </clipPath>
+    </defs>
+</svg>

package/src/assets/images/Images/left-arrow.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="50" height="50" rx="25" fill="#fff"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M29.127 17.18a.614.614 0 0 1 0 .872L22.177 25l6.95 6.948a.617.617 0 0 1-.871.872l-7.384-7.384a.616.616 0 0 1 0-.872l7.384-7.383a.616.616 0 0 1 .871 0z" fill="#000"/>
+</svg>

package/src/assets/images/Images/linkedin.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
+  <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
+</svg>

package/src/assets/images/Images/locationIcon.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 4.725a2.208 2.208 0 1 0 .001 4.416 2.208 2.208 0 0 0 0-4.416zm0 3.312a1.104 1.104 0 1 1 .001-2.208 1.104 1.104 0 0 1 0 2.208z" fill="#fff"/>
+    <path d="M10.243 2.687a6 6 0 0 0-9.27 7.518l4.17 6.403a1.022 1.022 0 0 0 1.713 0l4.171-6.404a6 6 0 0 0-.784-7.517zm-.14 6.915L6 15.9 1.897 9.602a4.919 4.919 0 0 1 .64-6.135 4.896 4.896 0 0 1 6.925 0 4.919 4.919 0 0 1 .64 6.135z" fill="#fff"/>
+</svg>

package/src/assets/images/Images/locationIconBlack.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
+  <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A32 32 0 0 1 8 14.58a32 32 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10"/>
+  <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
+</svg>

package/src/assets/images/Images/right arrow.svg

@@ -0,0 +1,16 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#np509hsz0a)">
+        <path fill="#fff" fill-opacity=".01" d="M16 .5v16H0V.5z"/>
+        <g clip-path="url(#71aidrxbgb)">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.32.68a.615.615 0 0 1 0 .872L4.37 8.5l6.95 6.948a.617.617 0 0 1-.872.872L3.064 8.936a.615.615 0 0 1 0-.871L10.448.68a.616.616 0 0 1 .871 0z" fill="#6C757D"/>
+        </g>
+    </g>
+    <defs>
+        <clipPath id="np509hsz0a">
+            <path fill="#fff" transform="rotate(90 7.75 8.25)" d="M0 0h16v16H0z"/>
+        </clipPath>
+        <clipPath id="71aidrxbgb">
+            <path fill="#fff" transform="rotate(90 7.75 8.25)" d="M0 0h16v16H0z"/>
+        </clipPath>
+    </defs>
+</svg>

package/src/assets/images/Images/right-arrow.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="50" height="50" rx="25" fill="#fff"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.873 32.82a.614.614 0 0 1 0-.872L27.823 25l-6.95-6.948a.617.617 0 0 1 .871-.872l7.384 7.384a.616.616 0 0 1 0 .872l-7.384 7.383a.616.616 0 0 1-.871 0z" fill="#000"/>
+</svg>

package/src/assets/images/Images/twitter-x.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
+  <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/>
+</svg>

package/src/assets/images/Images/warning.svg

@@ -0,0 +1,11 @@
+<svg width="80" height="81" viewBox="0 0 80 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#gyr7eoy9ma)" fill="#FFB525">
+        <path d="M49.585 9.407a11.03 11.03 0 0 0-19.174 0L1.378 61.134a10.594 10.594 0 0 0 .097 10.63 10.88 10.88 0 0 0 9.49 5.403H69.03a10.88 10.88 0 0 0 9.49-5.403 10.593 10.593 0 0 0 .097-10.63L49.585 9.407zm23.183 59a4.276 4.276 0 0 1-3.737 2.093H10.965a4.277 4.277 0 0 1-3.737-2.103 3.94 3.94 0 0 1-.037-4l29.034-51.73a4.517 4.517 0 0 1 7.546 0l29.034 51.727a3.94 3.94 0 0 1-.037 4.003v.01z"/>
+        <path d="M39.997 23.832a3.333 3.333 0 0 0-3.333 3.333v20a3.333 3.333 0 0 0 6.667 0v-20a3.334 3.334 0 0 0-3.334-3.333zM39.997 63.835a3.333 3.333 0 1 0 0-6.667 3.333 3.333 0 0 0 0 6.667z"/>
+    </g>
+    <defs>
+        <clipPath id="gyr7eoy9ma">
+            <path fill="#fff" transform="translate(0 .5)" d="M0 0h80v80H0z"/>
+        </clipPath>
+    </defs>
+</svg>

package/src/assets/images/Images/whatsapp.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16">
+  <path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"/>
+</svg>

package/src/assets/images/Images/x.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
+  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+</svg>

package/src/assets/images/envelope-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16">
+  <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z"/>
+</svg>

package/src/assets/images/facebook.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
+  <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/>
+</svg>

package/src/assets/images/linkedin.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
+  <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
+</svg>

package/src/assets/images/twitter-x.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
+  <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/>
+</svg>

package/src/assets/images/whatsapp.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16">
+  <path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"/>
+</svg>

package/src/components/ImageListPopup/ImageListPopup.css

@@ -1,107 +1,107 @@
-.popup-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.7);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 10000;
-}
-
-.popup-container {
-  background-color: transparent;
-  border-radius: 8px;
-  max-width: 90%;
-  max-height: 90%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-}
-
-.popup-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  padding: 1rem;
-  position: absolute;
-  top: 0;
-}
-
-.popup-title {
-  color: white;
-  font-size: 24px;
-  font-weight: bold;
-}
-
-.btn-close {
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-  background: none;
-  border: none;
-  color: white;
-  font-size: 24px;
-  cursor: pointer;
-}
-
-.popup-body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1rem;
-  position: relative;
-  flex: 1;
-}
-
-.main-image {
-  max-width: 100%;
-  max-height: 80vh;
-  border-radius: 8px;
-}
-
-.btn-prev,
-.btn-next {
-  background: none;
-  border: none;
-  color: white;
-  font-size: 48px;
-  cursor: pointer;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.btn-prev {
-  left: 10px;
-}
-
-.btn-next {
-  right: 10px;
-}
-
-.popup-thumbnails {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  padding: 1rem;
-}
-
-.thumbnail {
-  width: 60px;
-  height: 60px;
-  object-fit: cover;
-  border-radius: 8px;
-  cursor: pointer;
-  opacity: 0.6;
-}
-
-.thumbnail.active {
-  border: 2px solid white;
-  opacity: 1;
-}
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+}
+
+.popup-container {
+  background-color: transparent;
+  border-radius: 8px;
+  max-width: 90%;
+  max-height: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.popup-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+  position: absolute;
+  top: 0;
+}
+
+.popup-title {
+  color: white;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.btn-close {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  background: none;
+  border: none;
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.popup-body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  position: relative;
+  flex: 1;
+}
+
+.main-image {
+  max-width: 100%;
+  max-height: 80vh;
+  border-radius: 8px;
+}
+
+.btn-prev,
+.btn-next {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 48px;
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.btn-prev {
+  left: 10px;
+}
+
+.btn-next {
+  right: 10px;
+}
+
+.popup-thumbnails {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  padding: 1rem;
+}
+
+.thumbnail {
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 8px;
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.thumbnail.active {
+  border: 2px solid white;
+  opacity: 1;
+}