tabexseriescomponents 0.0.213 → 0.0.215

package/dist/index.esm.js

@@ -1248,7 +1248,8 @@ var Product_itemtype = function Product_itemtype(props) {
         borderRadius: 100,
         position: 'absolute',
         top: 7,
-        left: -4
+        left: langdetect == 'en' ? -4 : '',
+        right: langdetect == 'ar' ? -4 : ''
       }
     }), /*#__PURE__*/React.createElement("div", {
       className: "row m-0 w-100 d-flex align-items-start pb-3",
@@ -1271,7 +1272,9 @@ var Product_itemtype = function Product_itemtype(props) {
           backgroundColor: sectionproperties.variantcontainer_bgcolortransparent == 'Transparent' ? 'transparent' : sectionproperties.variantcontainer_bgcolor,
           minWidth: sectionproperties.variantcontainer_bgcolortransparent == 'Transparent' ? 'auto' : sectionproperties.variantcontainer_minwidth + 'px',
           height: sectionproperties.variantcontainer_bgcolortransparent == 'Transparent' ? 'auto' : sectionproperties.variantcontainer_height + 'px',
-          borderRadius: sectionproperties.variantcontainer_borderBottomLeftRadius + 'px'
+          borderRadius: sectionproperties.variantcontainer_borderBottomLeftRadius + 'px',
+          transform: 'none',
+          cursor: 'default'
         }
       }, /*#__PURE__*/React.createElement("p", {
         className: 'm-0 p-0 allcentered font-weight-500',
@@ -1781,9 +1784,9 @@ var Product_itemtype = function Product_itemtype(props) {
     TabIndicatorProps: {
       style: {
         background: sectionproperties.activetabbordercolor,
-        width: sectionproperties.productInformationType == 'Product/Service Information' ? sectionproperties.showfirstpolicy == 'Hide' ? '50%' : sectionproperties.showsecondpolicy == 'Hide' ? '50%' : '33.3%' : '33.3%',
-        right: sectionproperties.productInformationType == 'Product/Service Information' ? sectionproperties.showfirstpolicy == 'Hide' ? 0 : sectionproperties.showsecondpolicy == 'Hide' ? 0 : '' : '',
-        margin: sectionproperties.productInformationType == 'Product/Service Information' ? sectionproperties.showfirstpolicy == 'Hide' ? 'auto' : sectionproperties.showsecondpolicy == 'Hide' ? 'auto' : '' : ''
+        width: '50%',
+        right: sectionproperties.showfirstpolicy == 'Hide' ? 0 : sectionproperties.showsecondpolicy == 'Hide' ? 0 : '',
+        margin: sectionproperties.showfirstpolicy == 'Hide' ? 'auto' : sectionproperties.showsecondpolicy == 'Hide' ? 'auto' : ''
       }
     },
     sx: {
@@ -16016,6 +16019,7 @@ var Header8 = function Header8(props) {
       borderRadius: sectionproperties.fav_btn_borderBottomLeftRadius + 'px',
       color: sectionproperties.favBtniconcolor,
       border: sectionproperties.favbtnborderwidth + 'px solid ' + sectionproperties.favbtnbordercolor,
+      fontSize: sectionproperties.favBtnIconfontsize + 'px',
       transition: '.3s',
       ':hover': {
         background: sectionproperties.favbtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.favBtnbgColoronhover,
@@ -16458,19 +16462,19 @@ var Header8 = function Header8(props) {
     onClick: function onClick() {
       routingcountext(StaticPagesLinksContext.Wishlist);
     }
+  }, /*#__PURE__*/React.createElement("span", {
+    "class": "".concat(header_cssstyles.wishlist_btn)
+  }, /*#__PURE__*/React.createElement("i", {
+    "class": "h-100 allcentered"
   }, sectionproperties.faviconshape == 'Heart Shape' && /*#__PURE__*/React.createElement(FaRegHeart, {
-    "class": "".concat(header_cssstyles.wishlist_btn),
-    size: sectionproperties.favBtnIconfontsize,
     style: {
       position: 'relative'
     }
   }), sectionproperties.faviconshape == 'Star Shape' && /*#__PURE__*/React.createElement(AiFillStar, {
-    "class": "".concat(header_cssstyles.wishlist_btn),
-    size: sectionproperties.favBtnIconfontsize,
     style: {
       position: 'relative'
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     "class": "".concat(header_cssstyles.badge_counter_header_notifications, " ").concat(header_cssstyles.wishlistbadge)
   }, /*#__PURE__*/React.createElement("span", null, " ", favoriteprojectscountContext.length >= 10 ? '+9' : favoriteprojectscountContext.length)))), /*#__PURE__*/React.createElement("div", {
     "class": " d-flex flex-row justify-content-end align-items-center"
@@ -16489,7 +16493,9 @@ var Header8 = function Header8(props) {
     "class": "".concat(header_cssstyles.cart_btn) + ' cursor-pointer d-flex align-items-center justify-content-center '
   }, /*#__PURE__*/React.createElement("div", {
     "class": "".concat(header_cssstyles.badge_counter_header_notifications, " ").concat(header_cssstyles.cartbadge)
-  }, (fetchcustomercartQueryContext === null || fetchcustomercartQueryContext === void 0 ? void 0 : (_fetchcustomercartQue5 = fetchcustomercartQueryContext.data) === null || _fetchcustomercartQue5 === void 0 ? void 0 : (_fetchcustomercartQue6 = _fetchcustomercartQue5.data) === null || _fetchcustomercartQue6 === void 0 ? void 0 : _fetchcustomercartQue6.customercart) != null ? fetchcustomercartQueryContext === null || fetchcustomercartQueryContext === void 0 ? void 0 : (_fetchcustomercartQue7 = fetchcustomercartQueryContext.data) === null || _fetchcustomercartQue7 === void 0 ? void 0 : (_fetchcustomercartQue8 = _fetchcustomercartQue7.data) === null || _fetchcustomercartQue8 === void 0 ? void 0 : (_fetchcustomercartQue9 = _fetchcustomercartQue8.customercart) === null || _fetchcustomercartQue9 === void 0 ? void 0 : (_fetchcustomercartQue10 = _fetchcustomercartQue9.cartitems) === null || _fetchcustomercartQue10 === void 0 ? void 0 : _fetchcustomercartQue10.length : 0), sectionproperties.carticonstyle == 'Shopping bag 1' && /*#__PURE__*/React.createElement(FiShoppingBag, {
+  }, (fetchcustomercartQueryContext === null || fetchcustomercartQueryContext === void 0 ? void 0 : (_fetchcustomercartQue5 = fetchcustomercartQueryContext.data) === null || _fetchcustomercartQue5 === void 0 ? void 0 : (_fetchcustomercartQue6 = _fetchcustomercartQue5.data) === null || _fetchcustomercartQue6 === void 0 ? void 0 : _fetchcustomercartQue6.customercart) != null ? fetchcustomercartQueryContext === null || fetchcustomercartQueryContext === void 0 ? void 0 : (_fetchcustomercartQue7 = fetchcustomercartQueryContext.data) === null || _fetchcustomercartQue7 === void 0 ? void 0 : (_fetchcustomercartQue8 = _fetchcustomercartQue7.data) === null || _fetchcustomercartQue8 === void 0 ? void 0 : (_fetchcustomercartQue9 = _fetchcustomercartQue8.customercart) === null || _fetchcustomercartQue9 === void 0 ? void 0 : (_fetchcustomercartQue10 = _fetchcustomercartQue9.cartitems) === null || _fetchcustomercartQue10 === void 0 ? void 0 : _fetchcustomercartQue10.length : 0), /*#__PURE__*/React.createElement("i", {
+    "class": "h-100 allcentered"
+  }, sectionproperties.carticonstyle == 'Shopping bag 1' && /*#__PURE__*/React.createElement(FiShoppingBag, {
     size: sectionproperties.cartBtn_iconFontSize
   }), sectionproperties.carticonstyle == 'Shopping bag 2' && /*#__PURE__*/React.createElement(CgShoppingBag, {
     size: sectionproperties.cartBtn_iconFontSize
@@ -16501,7 +16507,7 @@ var Header8 = function Header8(props) {
     size: sectionproperties.cartBtn_iconFontSize
   }), sectionproperties.carticonstyle == 'Shopping cart 2' && /*#__PURE__*/React.createElement(MdAddShoppingCart, {
     size: sectionproperties.cartBtn_iconFontSize
-  })), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     "class": langdetect == 'en' ? 'ml-2' : 'mr-2'
   }, /*#__PURE__*/React.createElement("div", {
     "class": "row m-0 w-100 d-flex align-items-center flex-column justify-content-start"
@@ -25972,23 +25978,15 @@ var Footer2 = function Footer2(props) {
   var templateproperties_context = props.actions.templateproperties_context;
   var templatepropcontext = props.actions.templatepropcontext;
   useEffect(function () {
-    if (props.srcfrom == 'addsectionform') {
-      var secpropobj = {};
-      props.defaultproperties.forEach(function (defaultpropobj, defaultpropindex) {
-        secpropobj[defaultpropobj.property_css_name] = defaultpropobj.property_value;
-      });
-      setsectionproperties(_objectSpread$1l({}, secpropobj));
-    } else {
-      var secpropobj = {};
-      StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
-        if (sectionitem.sectionid == props.sectionidprops) {
-          sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
-            secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
-          });
-        }
-      });
-      setsectionproperties(_objectSpread$1l({}, secpropobj));
-    }
+    var secpropobj = {};
+    StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
+      if (sectionitem.sectionid == props.sectionidprops) {
+        sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
+          secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
+        });
+      }
+    });
+    setsectionproperties(_objectSpread$1l({}, secpropobj));
   }, [StatePagePropertiesContext]);
   useEffect(function () {
     if (templateproperties_context.length != 0 && templateproperties_context.logoarrayofobjects != undefined) {
@@ -32263,13 +32261,11 @@ var UsersCardsSection = function UsersCardsSection(props) {
 function ownKeys$15(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$15(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$15(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$15(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var BacgroundThreeImageWithCategories = function BacgroundThreeImageWithCategories(props) {
-  var _imagesarray$, _imagesarray$2, _imagesarray$3, _imagesarray$4, _imagesarray$5, _imagesarray$6;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
-  props.actions.routingcountext;
-  props.actions.StaticPagesLinksContext;
-  props.sectionindexcontext;
+  var routingcountext = props.actions.routingcountext;
+  var StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     sectionproperties = _useState2[0],
@@ -32278,6 +32274,15 @@ var BacgroundThreeImageWithCategories = function BacgroundThreeImageWithCategori
     _useState4 = _slicedToArray(_useState3, 2),
     imagesarray = _useState4[0],
     setimagesarray = _useState4[1];
+  var authdetailsContext = props.actions.authdetailsContext;
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2);
+    _useState6[0];
+    var setshowdownheadermenu = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    Choosenindex = _useState8[0],
+    setChoosenindex = _useState8[1];
   useEffect(function () {
     if (props.srcfrom == 'addsectionform') {
       var secpropobj = {};
@@ -32307,6 +32312,21 @@ var BacgroundThreeImageWithCategories = function BacgroundThreeImageWithCategori
       }
     }
   }, [sectionproperties]);
+  var _useState9 = useState([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    pcollarray = _useState10[0],
+    setpcollarray = _useState10[1];
+  useEffect(function () {
+    var _authdetailsContext$i, _authdetailsContext$i2;
+    var temppcollarray = _toConsumableArray(pcollarray);
+    authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i = authdetailsContext.instinfo) === null || _authdetailsContext$i === void 0 ? void 0 : (_authdetailsContext$i2 = _authdetailsContext$i.instcategories) === null || _authdetailsContext$i2 === void 0 ? void 0 : _authdetailsContext$i2.forEach(function (arrayItem) {
+      var _arrayItem$parentcoll;
+      arrayItem === null || arrayItem === void 0 ? void 0 : (_arrayItem$parentcoll = arrayItem.parentcolletions) === null || _arrayItem$parentcoll === void 0 ? void 0 : _arrayItem$parentcoll.forEach(function (item) {
+        temppcollarray.push(item);
+      });
+    });
+    setpcollarray(_toConsumableArray(temppcollarray));
+  }, []);
   var sectionstyles = {
     imageBackground: css({
       ':before': {
@@ -32321,8 +32341,284 @@ var BacgroundThreeImageWithCategories = function BacgroundThreeImageWithCategori
         borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
         borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px'
       }
+    }),
+    categoryname: css({
+      color: sectionproperties.subheader_categorytitle_fontColor,
+      fontSize: sectionproperties.subheader_categorytitle_fontSize + 'px',
+      textTransform: sectionproperties.subheader_categorytitle_textTransform,
+      fontWeight: sectionproperties.subheader_categorytitle_textfontweight,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.subheader_categorytitle_coloronhover
+      }
+    }),
+    parentcollection: css({
+      color: sectionproperties.subheader_collectiontitle_fontColor,
+      fontSize: sectionproperties.subheader_collectiontitle_fontSize + 'px',
+      textTransform: sectionproperties.subheader_collectiontitle_textTransform,
+      fontWeight: sectionproperties.subheader_collectiontitle_textfontweight,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.subheader_collectiontitle_coloronhover
+      }
+    }),
+    collectionName: css({
+      color: sectionproperties.collectionsectiontextcolor,
+      fontSize: sectionproperties.collectionsectiontextfontsize + 'px',
+      textTransform: sectionproperties.collectionsectiontexttransform,
+      fontWeight: sectionproperties.collectionsectiontextfontweight,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.collectionsectiontextcoloronhover
+      }
+    }),
+    dropdowntitle: css({
+      color: sectionproperties.collectionssectiontitlecolor,
+      fontSize: sectionproperties.collectionssectiontitlefontsize + 'px',
+      fontWeight: sectionproperties.collectionssectiontitlefonteweight,
+      backgroundColor: sectionproperties.collectionssectiontitlebgcolor
     })
   };
+  var CategoriesDropdown = function CategoriesDropdown() {
+    var _authdetailsContext$i3, _authdetailsContext$i4, _authdetailsContext$i6, _authdetailsContext$i7, _authdetailsContext$i8, _authdetailsContext$i9, _authdetailsContext$i10, _authdetailsContext$i11, _authdetailsContext$i12, _authdetailsContext$i13, _authdetailsContext$i14, _authdetailsContext$i15, _authdetailsContext$i16;
+    return /*#__PURE__*/React.createElement("div", {
+      "class": "row m-0 w-100",
+      style: {
+        background: sectionproperties.collectionssectionbgcolor,
+        boxShadow: '0 0 10px ' + sectionproperties.collectionssectionshadowcolor
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      "class": "col-lg-12 p-0"
+    }, /*#__PURE__*/React.createElement("div", {
+      "class": "row m-0 w-100"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: sectionstyles.dropdowntitle + ' col-lg-12 p-0 '
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "m-0 p-3 text-center"
+    }, langdetect == 'en' ? sectionproperties.collectionssectiontitleen : sectionproperties.collectionssectiontitlear)), /*#__PURE__*/React.createElement("div", {
+      "class": "col-lg-12 flex-column cat_dropdown_hover scrollvertical pt-3 px-2",
+      style: {
+        height: sectionproperties.height + 'vh',
+        overflowY: 'scroll'
+      }
+    }, sectionproperties.fetchparenttype == 'Categories' && (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i3 = authdetailsContext.instinfo) === null || _authdetailsContext$i3 === void 0 ? void 0 : (_authdetailsContext$i4 = _authdetailsContext$i3.instcategories) === null || _authdetailsContext$i4 === void 0 ? void 0 : _authdetailsContext$i4.map(function (item, index) {
+      var _authdetailsContext$i5;
+      return /*#__PURE__*/React.createElement("div", {
+        "class": sectionstyles.categoryname + ' row ml-0 mr-0 w-100 cursor-pointer ',
+        onMouseEnter: function onMouseEnter() {
+          setshowdownheadermenu(true);
+          setChoosenindex(index);
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: ' col-lg-10 col-md-10 col-sm-10 p-0 d-flex justify-content-start align-items-center p-0 '
+      }, /*#__PURE__*/React.createElement("p", {
+        "class": ' m-0 p-0 wordbreak wordbreak1 ',
+        onClick: function onClick() {
+          routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'categories/' + item.categoryid);
+        }
+      }, langdetect == 'en' ? item.title_en : item.title_ar)), /*#__PURE__*/React.createElement("div", {
+        className: 'col-lg-2 col-md-2 col-sm-2 d-flex justify-content-end align-items-center p-0 '
+      }, /*#__PURE__*/React.createElement("i", {
+        className: ' p-0 h-100 allcentered '
+      }, langdetect == 'en' ? /*#__PURE__*/React.createElement(BsChevronRight, {
+        size: sectionproperties.collectionsectioniconfontsize
+      }) : /*#__PURE__*/React.createElement(BsChevronLeft, {
+        size: sectionproperties.collectionsectioniconfontsize
+      }))), index != (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i5 = authdetailsContext.instinfo) === null || _authdetailsContext$i5 === void 0 ? void 0 : _authdetailsContext$i5.instcategories) - 1 && /*#__PURE__*/React.createElement("div", {
+        className: "col-lg-12 p-0 mt-3 mb-3"
+      }, /*#__PURE__*/React.createElement("hr", {
+        "class": "m-0"
+      })));
+    })), sectionproperties.fetchparenttype == 'Parent Collections' && (pcollarray === null || pcollarray === void 0 ? void 0 : pcollarray.map(function (item, index) {
+      if (item.isshowntocustomers == 1) {
+        return /*#__PURE__*/React.createElement("div", {
+          "class": sectionstyles.parentcollection + ' row ml-0 mr-0 w-100 cursor-pointer ',
+          onMouseEnter: function onMouseEnter() {
+            setshowdownheadermenu(true);
+            setChoosenindex(index);
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: ' col-lg-10 col-md-10 col-sm-10 p-0 d-flex justify-content-start align-items-center p-0 '
+        }, /*#__PURE__*/React.createElement("p", {
+          "class": ' m-0 p-0 wordbreak wordbreak1 ',
+          onClick: function onClick() {
+            routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'parentcollections/' + item.parentcollectionid);
+          }
+        }, langdetect == 'en' ? item.title_en : item.title_ar)), /*#__PURE__*/React.createElement("div", {
+          className: 'col-lg-2 col-md-2 col-sm-2 d-flex justify-content-end align-items-center p-0 '
+        }, /*#__PURE__*/React.createElement("i", {
+          className: ' p-0 h-100 allcentered '
+        }, langdetect == 'en' ? /*#__PURE__*/React.createElement(BsChevronRight, {
+          size: sectionproperties.collectionsectioniconfontsize
+        }) : /*#__PURE__*/React.createElement(BsChevronLeft, {
+          size: sectionproperties.collectionsectioniconfontsize
+        }))), index != pcollarray - 1 && /*#__PURE__*/React.createElement("div", {
+          className: "col-lg-12 p-0 mt-3 mb-3"
+        }, /*#__PURE__*/React.createElement("hr", {
+          "class": "m-0"
+        })));
+      }
+    })), sectionproperties.fetchparenttype == 'Collections' && (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i6 = authdetailsContext.instinfo) === null || _authdetailsContext$i6 === void 0 ? void 0 : _authdetailsContext$i6.instcollections.map(function (item, index) {
+      if (item.isshowntocustomers == 1) {
+        return /*#__PURE__*/React.createElement("div", {
+          "class": slideshow_styles.parentcollection + ' row ml-0 mr-0 w-100 cursor-pointer ',
+          onMouseEnter: function onMouseEnter() {
+            setshowdownheadermenu(true);
+            setChoosenindex(index);
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: ' col-lg-12 col-md-12 col-sm-12 p-0 d-flex justify-content-start align-items-center p-0 '
+        }, /*#__PURE__*/React.createElement("p", {
+          "class": ' m-0 p-0 wordbreak wordbreak1 ',
+          onClick: function onClick() {
+            routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.collectionid);
+          }
+        }, langdetect == 'en' ? item.title_en : item.title_ar)), index != pcollarray - 1 && /*#__PURE__*/React.createElement("div", {
+          className: "col-lg-12 p-0 mt-3 mb-3"
+        }, /*#__PURE__*/React.createElement("hr", {
+          "class": "m-0"
+        })));
+      }
+    }))), sectionproperties.fetchparenttype == 'Categories' && Choosenindex.length != 0 && (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i7 = authdetailsContext.instinfo) === null || _authdetailsContext$i7 === void 0 ? void 0 : (_authdetailsContext$i8 = _authdetailsContext$i7.instcategories[Choosenindex]) === null || _authdetailsContext$i8 === void 0 ? void 0 : (_authdetailsContext$i9 = _authdetailsContext$i8.parentcolletions) === null || _authdetailsContext$i9 === void 0 ? void 0 : _authdetailsContext$i9.length) != 0 && /*#__PURE__*/React.createElement("div", {
+      "class": langdetect == 'en' ? 'cat_dropdown-menu cat_dropdown cat_dropdownen' : 'cat_dropdown-menu cat_dropdown cat_dropdownar',
+      style: {
+        minHeight: sectionproperties.height + 'vh'
+      },
+      onMouseLeave: function onMouseLeave() {
+        setChoosenindex('');
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      "class": "row m-0 w-100"
+    }, authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i10 = authdetailsContext.instinfo) === null || _authdetailsContext$i10 === void 0 ? void 0 : (_authdetailsContext$i11 = _authdetailsContext$i10.instcategories[Choosenindex]) === null || _authdetailsContext$i11 === void 0 ? void 0 : (_authdetailsContext$i12 = _authdetailsContext$i11.parentcolletions) === null || _authdetailsContext$i12 === void 0 ? void 0 : _authdetailsContext$i12.map(function (item, index) {
+      var _item$collections;
+      return /*#__PURE__*/React.createElement("div", {
+        "class": "col-lg-4 p-0"
+      }, /*#__PURE__*/React.createElement("p", {
+        "class": sectionstyles.parentcollection + ' m-0 p-0 mb-3 cursor-pointer wordbreak wordbreak2 ',
+        onClick: function onClick() {
+          routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'parentcollections/' + item.parentcollectionid);
+        },
+        style: {
+          textAlign: langdetect == 'en' ? 'left' : 'right'
+        }
+      }, langdetect == 'en' ? item.title_en : item.title_ar), item === null || item === void 0 ? void 0 : (_item$collections = item.collections) === null || _item$collections === void 0 ? void 0 : _item$collections.map(function (item, index) {
+        return /*#__PURE__*/React.createElement("div", {
+          "class": "col-lg-12 pl-1 pr-1"
+        }, /*#__PURE__*/React.createElement("p", {
+          "class": sectionstyles.collectionName + ' cursor-pointer wordbreak wordbreak2 mb-1 ',
+          onClick: function onClick() {
+            routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.collectionid);
+          },
+          style: {
+            textAlign: langdetect == 'en' ? 'left' : 'right'
+          }
+        }, langdetect == 'en' ? item.title_en : item.title_ar));
+      }));
+    }))), sectionproperties.fetchparenttype == 'Parent Collections' && Choosenindex.length != 0 && /*#__PURE__*/React.createElement("div", {
+      "class": langdetect == 'en' ? 'cat_dropdown-menu cat_dropdown cat_dropdownen' : 'cat_dropdown-menu cat_dropdown cat_dropdownar',
+      style: {
+        minHeight: sectionproperties.height + 'vh'
+      },
+      onMouseLeave: function onMouseLeave() {
+        setChoosenindex('');
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      "class": "row m-0 w-100"
+    }, authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i13 = authdetailsContext.instinfo) === null || _authdetailsContext$i13 === void 0 ? void 0 : (_authdetailsContext$i14 = _authdetailsContext$i13.instcategories[0]) === null || _authdetailsContext$i14 === void 0 ? void 0 : (_authdetailsContext$i15 = _authdetailsContext$i14.parentcolletions[Choosenindex]) === null || _authdetailsContext$i15 === void 0 ? void 0 : (_authdetailsContext$i16 = _authdetailsContext$i15.collections) === null || _authdetailsContext$i16 === void 0 ? void 0 : _authdetailsContext$i16.map(function (item, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        "class": "col-lg-4 p-0",
+        onClick: function onClick() {
+          routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.collectionid);
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        "class": "col-lg-12 pl-1 pr-1"
+      }, /*#__PURE__*/React.createElement("p", {
+        "class": sectionstyles.collectionName + ' cursor-pointer wordbreak wordbreak2 mb-1 ',
+        style: {
+          textAlign: langdetect == 'en' ? 'left' : 'right'
+        }
+      }, langdetect == 'en' ? item.title_en : item.title_ar)));
+    }))))));
+  };
+  var BackgroundImagesContent = function BackgroundImagesContent() {
+    var _imagesarray$, _imagesarray$2, _imagesarray$3, _imagesarray$4, _imagesarray$5, _imagesarray$6;
+    return /*#__PURE__*/React.createElement("div", {
+      "class": "row m-0 w-100 align-items-center justify-content-center",
+      onMouseEnter: function onMouseEnter() {
+        setChoosenindex('');
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      "class": "col-lg-7 col-md-12 col-sm-12 pl-md-1 pl-sm-1 pr-md-1 pr-sm-1 mb-md-3 mb-sm-3 h-100"
+    }, /*#__PURE__*/React.createElement("div", {
+      "class": sectionproperties.bgcovercontainresponsive == 'Contain' ? "".concat(sectionstyles.imageBackground) + ' row m-0 w-100 h-md-auto ' : "".concat(sectionstyles.imageBackground) + ' row m-0 w-100 ',
+      style: {
+        height: sectionproperties.image_height + 'px',
+        position: 'relative'
+      }
+    }, /*#__PURE__*/React.createElement(IKImage, {
+      urlEndpoint: IKurlEndpoint,
+      publicKey: IKpublicKey,
+      path: imagesarray.length != 0 ? langdetect == 'en' ? '/tr:w-820,h-520/' + ((_imagesarray$ = imagesarray[0]) === null || _imagesarray$ === void 0 ? void 0 : _imagesarray$.bgsection_image) : '/tr:w-820,h-520/' + ((_imagesarray$2 = imagesarray[0]) === null || _imagesarray$2 === void 0 ? void 0 : _imagesarray$2.bgsection_image_ar) : '',
+      "class": sectionproperties.bgcovercontainresponsive == 'Contain' ? 'objectFit-md-contain' : '',
+      style: {
+        height: '100%',
+        width: '100%',
+        objectFit: sectionproperties.bgcovercontain == 'Cover' ? 'cover' : 'contain',
+        borderTopLeftRadius: sectionproperties.image_bordertopleftradius + 'px',
+        borderTopRightRadius: sectionproperties.image_bordertoprightradius + 'px',
+        borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
+        borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px'
+      }
+    }))), /*#__PURE__*/React.createElement("div", {
+      "class": "col-lg-5 p-sm-0"
+    }, /*#__PURE__*/React.createElement("div", {
+      "class": "row m-0 w-100"
+    }, /*#__PURE__*/React.createElement("div", {
+      "class": "col-lg-12 col-md-6 col-sm-6 p-0 mb-xl-3 mb-lg-3 pl-md-1 pl-sm-1 pr-md-1 pr-sm-1"
+    }, /*#__PURE__*/React.createElement("div", {
+      "class": sectionproperties.bgcovercontainresponsive == 'Contain' ? "".concat(sectionstyles.imageBackground) + ' row m-0 w-100 h-md-auto ' : "".concat(sectionstyles.imageBackground) + ' row m-0 w-100 ',
+      style: {
+        height: parseInt(sectionproperties.image_height / 2 - 5) + 'px',
+        position: 'relative'
+      }
+    }, /*#__PURE__*/React.createElement(IKImage, {
+      urlEndpoint: IKurlEndpoint,
+      publicKey: IKpublicKey,
+      path: imagesarray.length != 0 ? langdetect == 'en' ? '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + ((_imagesarray$3 = imagesarray[1]) === null || _imagesarray$3 === void 0 ? void 0 : _imagesarray$3.bgsection_image) : '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + ((_imagesarray$4 = imagesarray[1]) === null || _imagesarray$4 === void 0 ? void 0 : _imagesarray$4.bgsection_image_ar) : '',
+      "class": sectionproperties.bgcovercontainresponsive == 'Contain' ? 'objectFit-md-contain' : '',
+      style: {
+        height: '100%',
+        width: '100%',
+        objectFit: sectionproperties.bgcovercontain == 'Cover' ? 'cover' : 'contain',
+        borderTopLeftRadius: sectionproperties.image_bordertopleftradius + 'px',
+        borderTopRightRadius: sectionproperties.image_bordertoprightradius + 'px',
+        borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
+        borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px'
+      }
+    }))), /*#__PURE__*/React.createElement("div", {
+      "class": "col-lg-12 col-md-6 col-sm-6 p-0 pl-md-1 pl-sm-1 pr-md-1 pr-sm-1"
+    }, /*#__PURE__*/React.createElement("div", {
+      "class": sectionproperties.bgcovercontainresponsive == 'Contain' ? "".concat(sectionstyles.imageBackground) + ' row m-0 w-100 h-md-auto ' : "".concat(sectionstyles.imageBackground) + ' row m-0 w-100 ',
+      style: {
+        height: parseInt(sectionproperties.image_height / 2 - 5) + 'px',
+        position: 'relative'
+      }
+    }, /*#__PURE__*/React.createElement(IKImage, {
+      urlEndpoint: IKurlEndpoint,
+      publicKey: IKpublicKey,
+      path: imagesarray.length != 0 ? langdetect == 'en' ? '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + ((_imagesarray$5 = imagesarray[2]) === null || _imagesarray$5 === void 0 ? void 0 : _imagesarray$5.bgsection_image) : '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + ((_imagesarray$6 = imagesarray[2]) === null || _imagesarray$6 === void 0 ? void 0 : _imagesarray$6.bgsection_image_ar) : '',
+      "class": sectionproperties.bgcovercontainresponsive == 'Contain' ? 'objectFit-md-contain' : '',
+      style: {
+        height: '100%',
+        width: '100%',
+        objectFit: sectionproperties.bgcovercontain == 'Cover' ? 'cover' : 'contain',
+        borderTopLeftRadius: sectionproperties.image_bordertopleftradius + 'px',
+        borderTopRightRadius: sectionproperties.image_bordertoprightradius + 'px',
+        borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
+        borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px'
+      }
+    }))))));
+  };
   return /*#__PURE__*/React.createElement("div", {
     "class": "row m-0 w-100 pl-md-3 pr-md-3 pl-sm-2 pr-sm-2",
     style: {
@@ -32330,87 +32626,18 @@ var BacgroundThreeImageWithCategories = function BacgroundThreeImageWithCategori
       marginBottom: sectionproperties.marginBottom + 'px',
       paddingTop: sectionproperties.paddingTop + 'px',
       paddingBottom: sectionproperties.paddingBottom + 'px',
-      paddingLeft: sectionproperties.paddingLeft + 'px',
-      paddingRight: sectionproperties.paddingRight + 'px'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    "class": "col-lg-12 p-0"
-  }, /*#__PURE__*/React.createElement("div", {
-    "class": "row m-0 w-100 align-items-center justify-content-center",
-    style: {
-      height: sectionproperties.image_height + 'vh'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    "class": "col-lg-7 col-md-12 col-sm-12 pl-md-1 pl-sm-1 pr-md-1 pr-sm-1 mb-md-3 mb-sm-3 h-100"
-  }, /*#__PURE__*/React.createElement("div", {
-    "class": "".concat(sectionstyles.imageBackground) + ' row m-0 w-100 ',
-    style: {
-      height: 400,
-      position: 'relative'
-    }
-  }, /*#__PURE__*/React.createElement(IKImage, {
-    urlEndpoint: IKurlEndpoint,
-    publicKey: IKpublicKey,
-    path: imagesarray.length != 0 ? langdetect == 'en' ? (_imagesarray$ = imagesarray[0]) === null || _imagesarray$ === void 0 ? void 0 : _imagesarray$.bgsection_image : (_imagesarray$2 = imagesarray[0]) === null || _imagesarray$2 === void 0 ? void 0 : _imagesarray$2.bgsection_image_ar : '',
-    "class": sectionproperties.bgcovercontainresponsive == 'Contain' ? 'objectFit-md-contain' : '',
-    style: {
-      height: '100%',
-      width: '100%',
-      objectFit: sectionproperties.bgcovercontain,
-      borderTopLeftRadius: sectionproperties.image_bordertopleftradius + 'px',
-      borderTopRightRadius: sectionproperties.image_bordertoprightradius + 'px',
-      borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
-      borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px'
-    }
-  }))), /*#__PURE__*/React.createElement("div", {
-    "class": "col-lg-5 p-sm-0"
-  }, /*#__PURE__*/React.createElement("div", {
-    "class": "row m-0 w-100"
-  }, /*#__PURE__*/React.createElement("div", {
-    "class": "col-lg-12 col-md-6 col-sm-6 p-0 mb-xl-3 mb-lg-3 pl-md-1 pl-sm-1 pr-md-1 pr-sm-1"
-  }, /*#__PURE__*/React.createElement("div", {
-    "class": "".concat(sectionstyles.imageBackground) + ' row m-0 w-100 ',
-    style: {
-      height: '172px',
-      position: 'relative'
-    }
-  }, /*#__PURE__*/React.createElement(IKImage, {
-    urlEndpoint: IKurlEndpoint,
-    publicKey: IKpublicKey,
-    path: imagesarray.length != 0 ? langdetect == 'en' ? (_imagesarray$3 = imagesarray[1]) === null || _imagesarray$3 === void 0 ? void 0 : _imagesarray$3.bgsection_image : (_imagesarray$4 = imagesarray[1]) === null || _imagesarray$4 === void 0 ? void 0 : _imagesarray$4.bgsection_image_ar : '',
-    "class": sectionproperties.bgcovercontainresponsive == 'Contain' ? 'objectFit-md-contain' : '',
-    style: {
-      height: '100%',
-      width: '100%',
-      objectFit: sectionproperties.bgcovercontain,
-      borderTopLeftRadius: sectionproperties.image_bordertopleftradius + 'px',
-      borderTopRightRadius: sectionproperties.image_bordertoprightradius + 'px',
-      borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
-      borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px'
-    }
-  }))), /*#__PURE__*/React.createElement("div", {
-    "class": "col-lg-12 col-md-6 col-sm-6 p-0 pl-md-1 pl-sm-1 pr-md-1 pr-sm-1"
-  }, /*#__PURE__*/React.createElement("div", {
-    "class": "".concat(sectionstyles.imageBackground) + ' row m-0 w-100 ',
-    style: {
-      height: '215px',
-      position: 'relative'
-    }
-  }, /*#__PURE__*/React.createElement(IKImage, {
-    urlEndpoint: IKurlEndpoint,
-    publicKey: IKpublicKey,
-    path: imagesarray.length != 0 ? langdetect == 'en' ? (_imagesarray$5 = imagesarray[2]) === null || _imagesarray$5 === void 0 ? void 0 : _imagesarray$5.bgsection_image : (_imagesarray$6 = imagesarray[2]) === null || _imagesarray$6 === void 0 ? void 0 : _imagesarray$6.bgsection_image_ar : '',
-    "class": sectionproperties.bgcovercontainresponsive == 'Contain' ? 'objectFit-md-contain' : '',
-    style: {
-      height: '100%',
-      width: '100%',
-      objectFit: sectionproperties.bgcovercontain,
-      borderTopLeftRadius: sectionproperties.image_bordertopleftradius + 'px',
-      borderTopRightRadius: sectionproperties.image_bordertoprightradius + 'px',
-      borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
-      borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px'
+      paddingLeft: langdetect == 'en' ? sectionproperties.paddingLeft + 'px' : sectionproperties.paddingRight + 'px',
+      paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px',
+      background: sectionproperties.backgroundColor
+    },
+    onMouseLeave: function onMouseLeave() {
+      setChoosenindex('');
     }
-  }))))))));
+  }, sectionproperties.collectionssectionshow == 'Show' && /*#__PURE__*/React.createElement("div", {
+    "class": "col-lg-2 d-md-none"
+  }, CategoriesDropdown()), /*#__PURE__*/React.createElement("div", {
+    "class": sectionproperties.collectionssectionshow == 'Show' ? 'col-lg-10 p-0' : 'col-lg-12 p-0'
+  }, BackgroundImagesContent()));
 };
 
 function ownKeys$14(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -36010,6 +36237,8 @@ var Image_with_leftwords = function Image_with_leftwords(props) {
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
+  var authdetailsContext = props.actions.authdetailsContext;
+  var routingcountext = props.actions.routingcountext;
   useEffect(function () {
     var secpropobj = {};
     StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
@@ -36069,6 +36298,51 @@ var Image_with_leftwords = function Image_with_leftwords(props) {
         backgroundColor: sectionproperties.linebgcolor,
         borderRadius: '6px'
       }
+    }),
+    facebook_btn: css({
+      cursor: 'pointer',
+      background: sectionproperties.facebkbtnn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.facebkbtnnbgColor,
+      width: sectionproperties.facebkbtnnWidth + 'px',
+      height: sectionproperties.facebkbtnnHeight + 'px',
+      borderRadius: sectionproperties.facebkbtnn_borderRadius + 'px',
+      color: sectionproperties.facebkbtnnTextcolor,
+      border: sectionproperties.facebkbtnnborderwidth + 'px solid ' + sectionproperties.facebkbtnnbordercolor,
+      transition: '.3s',
+      ':hover': {
+        background: sectionproperties.facebkbtnntransparentbgcoloronhover == 'Transparent' ? 'Transparent' : sectionproperties.facebkbtnnbgColoronhover,
+        color: sectionproperties.facebkbtnnTextcoloronhover,
+        borderColor: sectionproperties.facebkbtnnTextcoloronhover
+      }
+    }),
+    youtube_btn: css({
+      cursor: 'pointer',
+      background: sectionproperties.youtubebtn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.youtubebtnbgColor,
+      width: sectionproperties.youtubebtnWidth + 'px',
+      height: sectionproperties.youtubebtnHeight + 'px',
+      borderRadius: sectionproperties.youtubebtn_borderRadius + 'px',
+      color: sectionproperties.youtubebtnTextcolor,
+      border: sectionproperties.youtubebtnborderwidth + 'px solid ' + sectionproperties.youtubebtnbordercolor,
+      transition: '.3s',
+      ':hover': {
+        background: sectionproperties.youtubebtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.youtubebtnbgColoronhover,
+        color: sectionproperties.youtubebtnTextcoloronhover,
+        borderColor: sectionproperties.youtubebtnTextcoloronhover
+      }
+    }),
+    instgram_btn: css({
+      cursor: 'pointer',
+      background: sectionproperties.instgrambtn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.instgrambtnbgColor,
+      width: sectionproperties.instgrambtnWidth + 'px',
+      height: sectionproperties.instgrambtnHeight + 'px',
+      borderRadius: sectionproperties.instgrambtn_borderRadius + 'px',
+      color: sectionproperties.instgrambtnTextcolor,
+      border: sectionproperties.instgrambtnborderwidth + 'px solid ' + sectionproperties.instgrambtnbordercolor,
+      transition: '.3s',
+      ':hover': {
+        background: sectionproperties.instgrambtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.instgrambtnbgColoronhover,
+        color: sectionproperties.instgrambtnTextcoloronhover,
+        borderColor: sectionproperties.instgrambtnTextcoloronhover
+      }
     })
   };
   var SectionTitle = function SectionTitle() {
@@ -36110,7 +36384,10 @@ var Image_with_leftwords = function Image_with_leftwords(props) {
         fontSize: sectionproperties.sectionTitleFontSizeresp + 'px'
       }
     }, SectionTitle())), /*#__PURE__*/React.createElement("div", {
-      "class": "col-lg-12 p-0 d-flex justify-content-md-center"
+      "class": "col-lg-12 p-0 d-flex justify-content-md-center",
+      style: {
+        justifyContent: sectionproperties.text2centered == 'Centered' ? 'center' : 'start'
+      }
     }, /*#__PURE__*/React.createElement("p", {
       "class": "pb-0 text-md-center pl-md-2 pr-md-2",
       style: {
@@ -36128,16 +36405,67 @@ var Image_with_leftwords = function Image_with_leftwords(props) {
       "class": "col-lg-12 p-0"
     }, /*#__PURE__*/React.createElement("button", {
       "class": "".concat(section_styles.btn)
-    }, langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar))));
+    }, langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar)), /*#__PURE__*/React.createElement("div", {
+      "class": "col-lg-12 p-0 d-flex justify-content-start justify-content-sm-center mb-sm-4 align-items-center"
+    }, sectionproperties.fbbtn_show == 'Show' && /*#__PURE__*/React.createElement("div", {
+      "class": "".concat(section_styles.facebook_btn) + '  d-flex align-items-center justify-content-center ml-3 mr-3 ',
+      onClick: function onClick() {
+        var _authdetailsContext$i;
+        if ((authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i = authdetailsContext.instinfo) === null || _authdetailsContext$i === void 0 ? void 0 : _authdetailsContext$i.facebooklink) != null) {
+          var _authdetailsContext$i2;
+          window.open(authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i2 = authdetailsContext.instinfo) === null || _authdetailsContext$i2 === void 0 ? void 0 : _authdetailsContext$i2.facebooklink, '_blank');
+        }
+      }
+    }, /*#__PURE__*/React.createElement(FaFacebookF, {
+      size: sectionproperties.facebkbtnniconfontsize
+    })), sectionproperties.instbtn_show == 'Show' && /*#__PURE__*/React.createElement("div", {
+      "class": "".concat(section_styles.instgram_btn) + '  d-flex align-items-center justify-content-center ml-3 mr-3 ',
+      onClick: function onClick() {
+        var _authdetailsContext$i3;
+        if ((authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i3 = authdetailsContext.instinfo) === null || _authdetailsContext$i3 === void 0 ? void 0 : _authdetailsContext$i3.instagramlink) != null) {
+          var _authdetailsContext$i4;
+          window.open(authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i4 = authdetailsContext.instinfo) === null || _authdetailsContext$i4 === void 0 ? void 0 : _authdetailsContext$i4.instagramlink, '_blank');
+        }
+      }
+    }, /*#__PURE__*/React.createElement(AiFillInstagram, {
+      size: sectionproperties.instgrambtniconfontsize
+    })), sectionproperties.youtbtn_show == 'Show' && /*#__PURE__*/React.createElement("div", {
+      "class": "".concat(section_styles.youtube_btn) + '  d-flex align-items-center justify-content-center ml-3 mr-3 ',
+      onClick: function onClick() {
+        var _authdetailsContext$i5;
+        if ((authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i5 = authdetailsContext.instinfo) === null || _authdetailsContext$i5 === void 0 ? void 0 : _authdetailsContext$i5.whatsappnumber) != null) {
+          var _authdetailsContext$i6;
+          window.open('https://api.whatsapp.com/send?phone=' + (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i6 = authdetailsContext.instinfo) === null || _authdetailsContext$i6 === void 0 ? void 0 : _authdetailsContext$i6.whatsappnumber), '_blank');
+        }
+      }
+    }, /*#__PURE__*/React.createElement(FaWhatsapp, {
+      size: sectionproperties.youtubebtniconfontsize
+    })))));
   };
   var Image = function Image() {
-    var _imagesarray$, _imagesarray$2;
+    var _imagesarray$, _imagesarray$7, _imagesarray$8;
     return /*#__PURE__*/React.createElement("div", {
-      "class": sectionproperties.image_height == 0 ? 'col-lg-6 col-md-12 d-flex justify-content-start justify-content-md-center h-auto p-0' : 'col-lg-6 col-md-12 d-flex justify-content-start justify-content-md-center p-0'
+      "class": sectionproperties.image_height == 0 ? 'col-lg-6 col-md-12 d-flex justify-content-start justify-content-md-center h-auto p-0' : 'col-lg-6 col-md-12 d-flex justify-content-start justify-content-md-center p-0',
+      style: {
+        cursor: ((_imagesarray$ = imagesarray[0]) === null || _imagesarray$ === void 0 ? void 0 : _imagesarray$.IsClickable) == 'Yes' ? 'pointer' : 'default'
+      },
+      onClick: function onClick() {
+        var _imagesarray$2;
+        if (((_imagesarray$2 = imagesarray[0]) === null || _imagesarray$2 === void 0 ? void 0 : _imagesarray$2.IsClickable) == 'Yes') {
+          var _imagesarray$3, _imagesarray$4;
+          if ((_imagesarray$3 = imagesarray[0]) !== null && _imagesarray$3 !== void 0 && _imagesarray$3.clickable_page_route && ((_imagesarray$4 = imagesarray[0]) === null || _imagesarray$4 === void 0 ? void 0 : _imagesarray$4.clickable_page_route.length) != 0) {
+            var _imagesarray$5;
+            routingcountext((_imagesarray$5 = imagesarray[0]) === null || _imagesarray$5 === void 0 ? void 0 : _imagesarray$5.clickable_page_route, false, '');
+          } else {
+            var _imagesarray$6;
+            routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + ((_imagesarray$6 = imagesarray[0]) === null || _imagesarray$6 === void 0 ? void 0 : _imagesarray$6.Clickable_Reference_Collection_ID));
+          }
+        }
+      }
     }, /*#__PURE__*/React.createElement(IKImage, {
       urlEndpoint: IKurlEndpoint,
       publicKey: IKpublicKey,
-      path: imagesarray.length != 0 ? langdetect == 'en' ? '/tr:w-' + sectionproperties.imagetr_w + '/' + ((_imagesarray$ = imagesarray[0]) === null || _imagesarray$ === void 0 ? void 0 : _imagesarray$.bgsection_image) : '/tr:w-' + sectionproperties.imagetr_w + '/' + ((_imagesarray$2 = imagesarray[0]) === null || _imagesarray$2 === void 0 ? void 0 : _imagesarray$2.bgsection_image_ar) : '',
+      path: imagesarray.length != 0 ? langdetect == 'en' ? '/tr:w-' + sectionproperties.imagetr_w + '/' + ((_imagesarray$7 = imagesarray[0]) === null || _imagesarray$7 === void 0 ? void 0 : _imagesarray$7.bgsection_image) : '/tr:w-' + sectionproperties.imagetr_w + '/' + ((_imagesarray$8 = imagesarray[0]) === null || _imagesarray$8 === void 0 ? void 0 : _imagesarray$8.bgsection_image_ar) : '',
       style: {
         width: '100%',
         height: sectionproperties.image_height == 0 ? 'auto' : sectionproperties.image_height + 'px',
@@ -37562,6 +37890,20 @@ var Slideshowslide = function Slideshowslide(props) {
     Choosenindex = _useState10[0],
     setChoosenindex = _useState10[1];
   var authdetailsContext = props.actions.authdetailsContext;
+  var _useState11 = useState([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    pcollarray = _useState12[0],
+    setpcollarray = _useState12[1];
+  useEffect(function () {
+    var _authdetailsContext$i;
+    var temppcollarray = _toConsumableArray(pcollarray);
+    authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i = authdetailsContext.instinfo) === null || _authdetailsContext$i === void 0 ? void 0 : _authdetailsContext$i.instcategories.forEach(function (arrayItem) {
+      arrayItem === null || arrayItem === void 0 ? void 0 : arrayItem.parentcolletions.forEach(function (item) {
+        temppcollarray.push(item);
+      });
+    });
+    setpcollarray(_toConsumableArray(temppcollarray));
+  }, []);
   useEffect(function () {
     var secpropobj = {};
     StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
@@ -37716,7 +38058,7 @@ var Slideshowslide = function Slideshowslide(props) {
     }))));
   };
   var SlideshowContent = function SlideshowContent() {
-    var _authdetailsContext$i, _authdetailsContext$i2, _authdetailsContext$i4, _authdetailsContext$i5, _authdetailsContext$i6, _authdetailsContext$i7, _authdetailsContext$i8, _authdetailsContext$i9;
+    var _authdetailsContext$i2, _authdetailsContext$i3, _authdetailsContext$i5, _authdetailsContext$i6, _authdetailsContext$i7, _authdetailsContext$i8, _authdetailsContext$i9, _authdetailsContext$i10, _authdetailsContext$i11, _authdetailsContext$i12, _authdetailsContext$i13, _authdetailsContext$i14, _authdetailsContext$i15;
     return /*#__PURE__*/React.createElement("div", {
       "class": "col-lg-12 p-0"
     }, /*#__PURE__*/React.createElement("div", {
@@ -37743,8 +38085,8 @@ var Slideshowslide = function Slideshowslide(props) {
         height: sectionproperties.height + 'vh',
         overflowY: 'scroll'
       }
-    }, authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i = authdetailsContext.instinfo) === null || _authdetailsContext$i === void 0 ? void 0 : (_authdetailsContext$i2 = _authdetailsContext$i.instcategories) === null || _authdetailsContext$i2 === void 0 ? void 0 : _authdetailsContext$i2.map(function (item, index) {
-      var _authdetailsContext$i3;
+    }, sectionproperties.fetchparenttype == 'Categories' && (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i2 = authdetailsContext.instinfo) === null || _authdetailsContext$i2 === void 0 ? void 0 : (_authdetailsContext$i3 = _authdetailsContext$i2.instcategories) === null || _authdetailsContext$i3 === void 0 ? void 0 : _authdetailsContext$i3.map(function (item, index) {
+      var _authdetailsContext$i4;
       return /*#__PURE__*/React.createElement("div", {
         "class": slideshow_styles.categoryname + ' row ml-0 mr-0 w-100 cursor-pointer ',
         onMouseEnter: function onMouseEnter() {
@@ -37766,12 +38108,62 @@ var Slideshowslide = function Slideshowslide(props) {
         size: sectionproperties.collectionsectioniconfontsize
       }) : /*#__PURE__*/React.createElement(BsChevronLeft, {
         size: sectionproperties.collectionsectioniconfontsize
-      }))), index != (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i3 = authdetailsContext.instinfo) === null || _authdetailsContext$i3 === void 0 ? void 0 : _authdetailsContext$i3.instcategories) - 1 && /*#__PURE__*/React.createElement("div", {
+      }))), index != (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i4 = authdetailsContext.instinfo) === null || _authdetailsContext$i4 === void 0 ? void 0 : _authdetailsContext$i4.instcategories) - 1 && /*#__PURE__*/React.createElement("div", {
         className: "col-lg-12 p-0 mt-3 mb-3"
       }, /*#__PURE__*/React.createElement("hr", {
         "class": "m-0"
       })));
-    })), Choosenindex.length != 0 && (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i4 = authdetailsContext.instinfo) === null || _authdetailsContext$i4 === void 0 ? void 0 : (_authdetailsContext$i5 = _authdetailsContext$i4.instcategories[Choosenindex]) === null || _authdetailsContext$i5 === void 0 ? void 0 : (_authdetailsContext$i6 = _authdetailsContext$i5.parentcolletions) === null || _authdetailsContext$i6 === void 0 ? void 0 : _authdetailsContext$i6.length) != 0 && /*#__PURE__*/React.createElement("div", {
+    })), sectionproperties.fetchparenttype == 'Parent Collections' && (pcollarray === null || pcollarray === void 0 ? void 0 : pcollarray.map(function (item, index) {
+      if (item.isshowntocustomers == 1) {
+        return /*#__PURE__*/React.createElement("div", {
+          "class": slideshow_styles.parentcollection + ' row ml-0 mr-0 w-100 cursor-pointer ',
+          onMouseEnter: function onMouseEnter() {
+            setshowdownheadermenu(true);
+            setChoosenindex(index);
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: ' col-lg-10 col-md-10 col-sm-10 p-0 d-flex justify-content-start align-items-center p-0 '
+        }, /*#__PURE__*/React.createElement("p", {
+          "class": ' m-0 p-0 wordbreak wordbreak1 ',
+          onClick: function onClick() {
+            routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'parentcollections/' + item.parentcollectionid);
+          }
+        }, langdetect == 'en' ? item.title_en : item.title_ar)), /*#__PURE__*/React.createElement("div", {
+          className: 'col-lg-2 col-md-2 col-sm-2 d-flex justify-content-end align-items-center p-0 '
+        }, /*#__PURE__*/React.createElement("i", {
+          className: ' p-0 h-100 allcentered '
+        }, langdetect == 'en' ? /*#__PURE__*/React.createElement(BsChevronRight, {
+          size: sectionproperties.collectionsectioniconfontsize
+        }) : /*#__PURE__*/React.createElement(BsChevronLeft, {
+          size: sectionproperties.collectionsectioniconfontsize
+        }))), index != pcollarray - 1 && /*#__PURE__*/React.createElement("div", {
+          className: "col-lg-12 p-0 mt-3 mb-3"
+        }, /*#__PURE__*/React.createElement("hr", {
+          "class": "m-0"
+        })));
+      }
+    })), sectionproperties.fetchparenttype == 'Collections' && (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i5 = authdetailsContext.instinfo) === null || _authdetailsContext$i5 === void 0 ? void 0 : _authdetailsContext$i5.instcollections.map(function (item, index) {
+      if (item.isshowntocustomers == 1) {
+        return /*#__PURE__*/React.createElement("div", {
+          "class": slideshow_styles.parentcollection + ' row ml-0 mr-0 w-100 cursor-pointer ',
+          onMouseEnter: function onMouseEnter() {
+            setshowdownheadermenu(true);
+            setChoosenindex(index);
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: ' col-lg-12 col-md-12 col-sm-12 p-0 d-flex justify-content-start align-items-center p-0 '
+        }, /*#__PURE__*/React.createElement("p", {
+          "class": ' m-0 p-0 wordbreak wordbreak1 ',
+          onClick: function onClick() {
+            routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.collectionid);
+          }
+        }, langdetect == 'en' ? item.title_en : item.title_ar)), index != pcollarray - 1 && /*#__PURE__*/React.createElement("div", {
+          className: "col-lg-12 p-0 mt-3 mb-3"
+        }, /*#__PURE__*/React.createElement("hr", {
+          "class": "m-0"
+        })));
+      }
+    }))), sectionproperties.fetchparenttype == 'Categories' && Choosenindex.length != 0 && (authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i6 = authdetailsContext.instinfo) === null || _authdetailsContext$i6 === void 0 ? void 0 : (_authdetailsContext$i7 = _authdetailsContext$i6.instcategories[Choosenindex]) === null || _authdetailsContext$i7 === void 0 ? void 0 : (_authdetailsContext$i8 = _authdetailsContext$i7.parentcolletions) === null || _authdetailsContext$i8 === void 0 ? void 0 : _authdetailsContext$i8.length) != 0 && /*#__PURE__*/React.createElement("div", {
       "class": langdetect == 'en' ? 'cat_dropdown-menu cat_dropdown cat_dropdownen' : 'cat_dropdown-menu cat_dropdown cat_dropdownar',
       style: {
         minHeight: sectionproperties.height + 'vh'
@@ -37781,7 +38173,7 @@ var Slideshowslide = function Slideshowslide(props) {
       }
     }, /*#__PURE__*/React.createElement("div", {
       "class": "row m-0 w-100"
-    }, authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i7 = authdetailsContext.instinfo) === null || _authdetailsContext$i7 === void 0 ? void 0 : (_authdetailsContext$i8 = _authdetailsContext$i7.instcategories[Choosenindex]) === null || _authdetailsContext$i8 === void 0 ? void 0 : (_authdetailsContext$i9 = _authdetailsContext$i8.parentcolletions) === null || _authdetailsContext$i9 === void 0 ? void 0 : _authdetailsContext$i9.map(function (item, index) {
+    }, authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i9 = authdetailsContext.instinfo) === null || _authdetailsContext$i9 === void 0 ? void 0 : (_authdetailsContext$i10 = _authdetailsContext$i9.instcategories[Choosenindex]) === null || _authdetailsContext$i10 === void 0 ? void 0 : (_authdetailsContext$i11 = _authdetailsContext$i10.parentcolletions) === null || _authdetailsContext$i11 === void 0 ? void 0 : _authdetailsContext$i11.map(function (item, index) {
       var _item$collections;
       return /*#__PURE__*/React.createElement("div", {
         "class": "col-lg-4 p-0"
@@ -37806,6 +38198,30 @@ var Slideshowslide = function Slideshowslide(props) {
           }
         }, langdetect == 'en' ? item.title_en : item.title_ar));
       }));
+    }))), sectionproperties.fetchparenttype == 'Parent Collections' && Choosenindex.length != 0 && /*#__PURE__*/React.createElement("div", {
+      "class": langdetect == 'en' ? 'cat_dropdown-menu cat_dropdown cat_dropdownen' : 'cat_dropdown-menu cat_dropdown cat_dropdownar',
+      style: {
+        minHeight: sectionproperties.height + 'vh'
+      },
+      onMouseLeave: function onMouseLeave() {
+        setChoosenindex('');
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      "class": "row m-0 w-100"
+    }, authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$i12 = authdetailsContext.instinfo) === null || _authdetailsContext$i12 === void 0 ? void 0 : (_authdetailsContext$i13 = _authdetailsContext$i12.instcategories[0]) === null || _authdetailsContext$i13 === void 0 ? void 0 : (_authdetailsContext$i14 = _authdetailsContext$i13.parentcolletions[Choosenindex]) === null || _authdetailsContext$i14 === void 0 ? void 0 : (_authdetailsContext$i15 = _authdetailsContext$i14.collections) === null || _authdetailsContext$i15 === void 0 ? void 0 : _authdetailsContext$i15.map(function (item, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        "class": "col-lg-4 p-0",
+        onClick: function onClick() {
+          routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.collectionid);
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        "class": "col-lg-12 pl-1 pr-1"
+      }, /*#__PURE__*/React.createElement("p", {
+        "class": slideshow_styles.collectionName + ' cursor-pointer wordbreak wordbreak2 mb-1 ',
+        style: {
+          textAlign: langdetect == 'en' ? 'left' : 'right'
+        }
+      }, langdetect == 'en' ? item.title_en : item.title_ar)));
     }))))))), /*#__PURE__*/React.createElement("div", {
       "class": sectionproperties.collectionssectionshow == 'Show' ? 'col-lg-10 col-md-12 col-sm-12 p-0 d-flex justify-content-center h-sm-auto' : 'col-lg-12 p-0 d-flex justify-content-center h-sm-auto',
       style: {
@@ -38118,12 +38534,12 @@ var Slideshowzoom = function Slideshowzoom(props) {
       background: sectionproperties.backgroundColor
     }
   }, /*#__PURE__*/React.createElement("div", {
-    "class": cardarrayofobjs.length != 0 ? 'col-lg-12 p-0 d-flex d-sm-none justify-content-center h-md-auto h-sm-auto' : 'col-lg-12 p-0 d-flex d-sm-none justify-content-center h-md-auto h-sm-auto',
+    "class": cardarrayofobjs.length != 0 ? 'col-lg-12 p-0 d-flex justify-content-center' : 'col-lg-12 p-0 d-flex justify-content-center h-md-auto h-sm-auto',
     style: {
       height: sectionproperties.bgcovercontain == 'Cover' ? sectionproperties.height + 'vh' : 'auto'
     }
   }, /*#__PURE__*/React.createElement("div", {
-    "class": "h-md-auto h-sm-auto",
+    "class": cardarrayofobjs.length != 0 ? '' : 'h-md-auto h-sm-auto',
     style: {
       position: 'relative',
       borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
@@ -38143,7 +38559,7 @@ var Slideshowzoom = function Slideshowzoom(props) {
     easing: "ease"
   }), Object.keys(bgimagearrayofobjs).length != 0 && bgimagearrayofobjs.map(function (item, index) {
     return /*#__PURE__*/React.createElement("div", {
-      "class": "row m-0 w-100 h-md-auto h-sm-auto",
+      "class": cardarrayofobjs.length != 0 ? 'row m-0 w-100' : 'row m-0 w-100 h-md-auto h-sm-auto',
       style: {
         borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
         borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
@@ -38152,43 +38568,7 @@ var Slideshowzoom = function Slideshowzoom(props) {
         height: sectionproperties.bgcovercontain == 'Cover' ? sectionproperties.height + 'vh' : 'auto'
       }
     }, /*#__PURE__*/React.createElement("div", {
-      "class": slideshow_styles.slideshow_styles + ' p-0 align-items-center d-flex d-sm-none h-md-auto h-sm-auto ',
-      key: index,
-      style: {
-        cursor: item.IsClickableimg == 'Yes' ? 'pointer' : 'default',
-        width: '100%',
-        height: '100%',
-        borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
-        borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
-        borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
-        borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
-        paddingTop: sectionproperties.paddingTop + 'px',
-        paddingLeft: langdetect == 'en' ? sectionproperties.paddingLeft + 'px' : '',
-        paddingRight: langdetect == 'en' ? '' : sectionproperties.paddingLeft + 'px'
-      },
-      onClick: function onClick() {
-        if (item.IsClickableimg == 'Yes') {
-          if (item.clickableimg_page_route && item.clickableimg_page_route.length != 0) {
-            routingcountext(item.clickableimg_page_route, false, '');
-          } else {
-            routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.Clickableimg_getcoection);
-          }
-        }
-      }
-    }, /*#__PURE__*/React.createElement(IKImage, {
-      urlEndpoint: IKurlEndpoint,
-      publicKey: IKpublicKey,
-      path: langdetect == 'en' ? item.imageen : item.imagear,
-      style: {
-        cursor: item.IsClickableimg == 'Yes' ? 'pointer' : 'default',
-        objectFit: sectionproperties.bgcovercontain,
-        margin: 0,
-        padding: 0,
-        width: '100%',
-        height: '100%'
-      }
-    }), SlideShowTextContainer(item)), /*#__PURE__*/React.createElement("div", {
-      "class": slideshow_styles.beforebg + ' p-0 align-items-center d-none d-sm-flex ',
+      "class": slideshow_styles.slideshow_styles + ' p-0 align-items-center d-flex d-md-none ',
       key: index,
       style: {
         cursor: item.IsClickableimg == 'Yes' ? 'pointer' : 'default',
@@ -38214,80 +38594,17 @@ var Slideshowzoom = function Slideshowzoom(props) {
     }, /*#__PURE__*/React.createElement(IKImage, {
       urlEndpoint: IKurlEndpoint,
       publicKey: IKpublicKey,
-      path: langdetect == 'en' ? item.image_resp_en : item.image_resp_ar,
+      path: langdetect == 'en' ? '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + item.imageen : '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + item.imagear,
       style: {
         cursor: item.IsClickableimg == 'Yes' ? 'pointer' : 'default',
-        objectFit: 'contain',
+        objectFit: sectionproperties.bgcovercontain == 'Cover' ? 'cover' : 'contain',
         margin: 0,
         padding: 0,
         width: '100%',
         height: '100%'
       }
-    }), SlideShowTextContainer(item)));
-  })), cardarrayofobjs.length != 0 && /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: 'absolute',
-      left: 0,
-      bottom: 60,
-      zIndex: 100
-    },
-    "class": "row m-0 w-100 "
-  }, /*#__PURE__*/React.createElement("div", {
-    "class": ' col-xl-12 p-0 col-lg-12 col-md-12 col-sm-12 w-100'
-  }, /*#__PURE__*/React.createElement(ScrollMenu, {
-    itemClassName: "slideshowCard"
-    // LeftArrow={LeftArrow}
-    // RightArrow={RightArrow}
-    ,
-    transitionDuration: 500,
-    transitionEase: easingFunctions['linear'],
-    scrollContainerClassName: 'scrollmenuclasssubscrollbar'
-  }, Object.keys(cardarrayofobjs).length != 0 && cardarrayofobjs.map(function (cardItem, cardIndex) {
-    var id = cardIndex;
-    return /*#__PURE__*/React.createElement(CardsArrayOfObjects, {
-      title: id,
-      itemId: id,
-      key: id,
-      cardItem: cardItem,
-      sectionproperties: sectionproperties,
-      props: props
-    });
-  })))))), /*#__PURE__*/React.createElement("div", {
-    "class": cardarrayofobjs.length != 0 ? 'col-lg-12 p-0 d-none d-sm-flex justify-content-center h-md-auto h-sm-auto' : 'col-lg-12 p-0 d-none d-sm-flex justify-content-center h-md-auto h-sm-auto',
-    style: {
-      height: sectionproperties.height + 'vh'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    "class": "h-md-auto h-sm-auto",
-    style: {
-      position: 'relative',
-      borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
-      borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
-      borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
-      borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
-      width: sectionproperties.width + 'vw',
-      marginBottom: sectionproperties.marginBottom + 'px',
-      marginTop: sectionproperties.marginTop + 'px',
-      height: sectionproperties.height + 'vh',
-      overflow: 'hidden'
-    }
-  }, /*#__PURE__*/React.createElement(Zoom, _extends({}, Slideshowsettings, {
-    transitionDuration: 1500,
-    duration: 1500,
-    arrow: true,
-    easing: "ease"
-  }), Object.keys(bgimagearrayofobjs).length != 0 && bgimagearrayofobjs.map(function (item, index) {
-    return /*#__PURE__*/React.createElement("div", {
-      "class": "row m-0 w-100 h-md-auto h-sm-auto",
-      style: {
-        borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
-        borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
-        borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
-        borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
-        height: sectionproperties.height + 'vh'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      "class": 'beforebg p-0 align-items-center d-none d-sm-flex ',
+    }), SlideShowTextContainer(item)), /*#__PURE__*/React.createElement("div", {
+      "class": slideshow_styles.beforebg + ' p-0 align-items-center d-none d-md-flex ',
       key: index,
       style: {
         cursor: item.IsClickableimg == 'Yes' ? 'pointer' : 'default',
@@ -38313,10 +38630,10 @@ var Slideshowzoom = function Slideshowzoom(props) {
     }, /*#__PURE__*/React.createElement(IKImage, {
       urlEndpoint: IKurlEndpoint,
       publicKey: IKpublicKey,
-      path: langdetect == 'en' ? item.image_resp_en : item.image_resp_ar,
+      path: langdetect == 'en' ? '/tr:w-' + sectionproperties.imagetr_w_resp + ',h-' + sectionproperties.imagetr_h_resp + '/' + item.image_resp_en : '/tr:w-' + sectionproperties.imagetr_w_resp + ',h-' + sectionproperties.imagetr_h_resp + '/' + item.image_resp_ar,
       style: {
         cursor: item.IsClickableimg == 'Yes' ? 'pointer' : 'default',
-        objectFit: 'contain',
+        objectFit: sectionproperties.bgcovercontainresponsive == 'Cover' ? 'cover' : 'contain',
         margin: 0,
         padding: 0,
         width: '100%',
@@ -39510,7 +39827,16 @@ var UpSlideEffectCard = function UpSlideEffectCard(props) {
   var StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
+  var setShowProductInfoModalContext = props.actions.setShowProductInfoModalContext;
+  var setProductIdProdutInfoModalContext = props.actions.setProductIdProdutInfoModalContext;
   var routingcountext = props.actions.routingcountext;
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showquantity = _useState6[0],
+    setshowquantity = _useState6[1];
+  var AddtoCartMutationContext = props.actions.AddtoCartMutationContext;
+  var AddtoCartContext = props.actions.AddtoCartContext;
+  var NotificationManager = props.actions.NotificationManager;
 
   // Sectionproperties
   useEffect(function () {
@@ -39524,6 +39850,13 @@ var UpSlideEffectCard = function UpSlideEffectCard(props) {
     });
     setsectionproperties(_objectSpread$B({}, secpropobj));
   }, [StatePagePropertiesContext]);
+  useEffect(function () {
+    if (item.quantity == 0) {
+      setshowquantity(false);
+    } else {
+      setshowquantity(true);
+    }
+  }, [props.cardinfoitemprops]);
 
   // Card Information
   useEffect(function () {
@@ -39531,6 +39864,51 @@ var UpSlideEffectCard = function UpSlideEffectCard(props) {
       setitem(props.cardinfoitemprops);
     }
   }, [props.cardinfoitemprops]);
+  var addtocartfunc = function addtocartfunc(type, quantity) {
+    var addtocardpayloadobj = {
+      functype: 'add',
+      productid: item.productid,
+      variantid: '',
+      quantity: quantity
+    };
+    var runfunc = false;
+    if (addtocardpayloadobj.productid.length != 0 && addtocardpayloadobj.quantity > 0) {
+      if (item.hasvariants == 1) {
+        if (addtocardpayloadobj.variantid.length != 0) {
+          runfunc = true;
+        } else {
+          NotificationManager.warning('', langdetect == 'en' ? 'Please Choose Product Options' : 'من فضلك اختر متغير');
+        }
+      } else {
+        runfunc = true;
+      }
+    } else {
+      NotificationManager.warning('', langdetect == 'en' ? 'Please Choose Quantity' : 'من فضلك اختر الكمية');
+    }
+    if (runfunc == true) {
+      AddtoCartContext(addtocardpayloadobj);
+    }
+  };
+  var addtocartbuttonrender = function addtocartbuttonrender() {
+    if (AddtoCartMutationContext.isLoading) {
+      var _AddtoCartMutationCon;
+      if ((AddtoCartMutationContext === null || AddtoCartMutationContext === void 0 ? void 0 : (_AddtoCartMutationCon = AddtoCartMutationContext.variables) === null || _AddtoCartMutationCon === void 0 ? void 0 : _AddtoCartMutationCon.productid) == item.productid) {
+        return /*#__PURE__*/React.createElement("div", {
+          "class": ' d-flex align-items-center justify-content-center '
+        }, /*#__PURE__*/React.createElement(CircularProgress, {
+          color: sectionproperties.quantitybtn_textcolor,
+          width: "20px",
+          height: "20px",
+          duration: "1s"
+        }));
+      } else {
+        return item.quantity;
+      }
+    }
+    if (!AddtoCartMutationContext.isLoading) {
+      return item.quantity;
+    }
+  };
 
   // Styles
   var card_cssstyles = {
@@ -39563,19 +39941,6 @@ var UpSlideEffectCard = function UpSlideEffectCard(props) {
       paddingLeft: langdetect == 'en' ? sectionproperties.paddingLeft + 'px' : sectionproperties.paddingRight + 'px',
       paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px'
     }),
-    button_styles: css({
-      width: sectionproperties.generalbtn_width + 'px',
-      height: sectionproperties.generalbtn_height + 'px',
-      border: sectionproperties.generalbtn_borderwidth + 'px solid' + sectionproperties.generalbtn_bordercolor,
-      borderRadius: sectionproperties.generalbtn_bordertopleftradius + 'px',
-      backgroundColor: sectionproperties.generalbtn_bgColortransparent == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColor,
-      color: sectionproperties.generalbtn_textColor,
-      ':hover': {
-        backgroundColor: sectionproperties.generalbtn_bgColortransparentonhover == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColoronhover,
-        color: sectionproperties.generalbtn_textColoronhover,
-        transition: '.3s'
-      }
-    }),
     cart_btn: css({
       width: sectionproperties.cartBtnWidth + 'px',
       height: sectionproperties.cartBtnHeight + 'px',
@@ -39592,6 +39957,86 @@ var UpSlideEffectCard = function UpSlideEffectCard(props) {
         color: sectionproperties.cartBtnTextcoloronhover
       }
     }),
+    button_styles: css({
+      width: sectionproperties.generalbtn_width + 'px',
+      height: sectionproperties.generalbtn_height + 'px',
+      border: sectionproperties.generalbtn_borderwidth + 'px solid' + sectionproperties.generalbtn_bordercolor,
+      borderRadius: sectionproperties.generalbtn_bordertopleftradius + 'px',
+      backgroundColor: sectionproperties.generalbtn_bgColortransparent == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColor,
+      ':hover': {
+        backgroundColor: sectionproperties.generalbtn_bgColortransparentonhover == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColoronhover,
+        color: sectionproperties.generalbtn_textColoronhover,
+        transition: '.3s'
+      }
+    }),
+    quantitybtn: css({
+      height: sectionproperties.quantitybtn_height + 'px',
+      width: sectionproperties.quantitybtn_width + 'px',
+      display: 'flex',
+      flexDirection: 'row',
+      overflow: 'hidden',
+      borderRadius: sectionproperties.quantitybtn_borderradius + 'px',
+      background: sectionproperties.quantitybtn_bgcolor,
+      alignItems: 'center',
+      justifyContent: 'center',
+      margin: 0,
+      position: 'relative',
+      fontWeight: sectionproperties.quantitybtn_textfontweight,
+      color: sectionproperties.quantitybtn_textcolor,
+      fontSize: sectionproperties.quantitybtn_textfontsize + 'px',
+      border: sectionproperties.quantitybtnborderwidth + 'px solid ' + sectionproperties.quantitybtnbordercolor
+    }),
+    quantitybtn_text: css({
+      margin: 'auto'
+    }),
+    add_quantitybtn_icon_container: css({
+      position: 'relative',
+      width: sectionproperties.add_quantitybtn_width + 'px',
+      height: sectionproperties.add_quantitybtn_height + 'px',
+      background: sectionproperties.add_quantitybtn_bgcolor,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderTopLeftRadius: langdetect == 'en' ? sectionproperties.add_quantitybtn_leftborderradius + 'px' : sectionproperties.add_quantitybtn_rightborderradius + 'px',
+      borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.add_quantitybtn_leftborderradius + 'px' : sectionproperties.add_quantitybtn_rightborderradius + 'px',
+      borderTopRightRadius: langdetect == 'en' ? sectionproperties.add_quantitybtn_rightborderradius + 'px' : sectionproperties.add_quantitybtn_leftborderradius + 'px',
+      borderBottomRightRadius: langdetect == 'en' ? sectionproperties.add_quantitybtn_rightborderradius + 'px' : sectionproperties.add_quantitybtn_leftborderradius + 'px',
+      fontSize: sectionproperties.add_quantitybtn_textfontsize + 'px',
+      color: sectionproperties.add_quantitybtn_textcolor,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.add_quantitybtn_textcoloronhover,
+        background: sectionproperties.add_quantitybtn_bgcoloronhover
+      },
+      ':hover .addbtn': {
+        color: sectionproperties.add_quantitybtn_textcoloronhover,
+        transition: '.3s'
+      }
+    }),
+    minus_quantitybtn_icon_container: css({
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: sectionproperties.remove_quantitybtn_width + 'px',
+      height: sectionproperties.remove_quantitybtn_height + 'px',
+      background: sectionproperties.remove_quantitybtn_bgcolor,
+      fontSize: sectionproperties.remove_quantitybtn_textfontsize + 'px',
+      color: sectionproperties.remove_quantitybtn_textcolor,
+      borderTopLeftRadius: langdetect == 'en' ? sectionproperties.remove_quantitybtn_leftborderradius + 'px' : sectionproperties.remove_quantitybtn_rightborderradius + 'px',
+      borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.remove_quantitybtn_leftborderradius + 'px' : sectionproperties.remove_quantitybtn_rightborderradius + 'px',
+      borderTopRightRadius: langdetect == 'en' ? sectionproperties.remove_quantitybtn_rightborderradius + 'px' : sectionproperties.remove_quantitybtn_leftborderradius + 'px',
+      borderBottomRightRadius: langdetect == 'en' ? sectionproperties.remove_quantitybtn_rightborderradius + 'px' : sectionproperties.remove_quantitybtn_leftborderradius + 'px',
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.remove_quantitybtn_textcoloronhover,
+        background: sectionproperties.remove_quantitybtn_bgcoloronhover
+      },
+      ':hover .minusbtn': {
+        transition: '.3s',
+        color: sectionproperties.remove_quantitybtn_textcoloronhover
+      }
+    }),
     wishlist_btn: css({
       width: sectionproperties.favBtnWidth + 'px',
       height: sectionproperties.favBtnHeight + 'px',
@@ -39628,9 +40073,18 @@ var UpSlideEffectCard = function UpSlideEffectCard(props) {
     })
   };
   return /*#__PURE__*/React.createElement("div", {
-    "class": card_cssstyles.productcard + ' row m-0 w-100 '
+    "class": card_cssstyles.productcard + ' row ml-0 mr-0 w-100 '
   }, /*#__PURE__*/React.createElement("div", {
-    "class": "col-lg-12 p-0 h-100"
+    "class": "col-lg-12 pl-0 pr-0 h-100",
+    style: {
+      paddingTop: sectionproperties.paddingTop + 'px',
+      paddingBottom: sectionproperties.paddingBottom + 'px',
+      backgroundColor: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
+      borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.borderBottomLeftRadius + 'px' : sectionproperties.borderBottomRightRadius + 'px',
+      borderBottomRightRadius: langdetect == 'en' ? sectionproperties.borderBottomRightRadius + 'px' : sectionproperties.borderBottomLeftRadius + 'px',
+      borderTopLeftRadius: langdetect == 'en' ? sectionproperties.borderTopLeftRadius + 'px' : sectionproperties.borderTopRightRadius + 'px',
+      borderTopRightRadius: langdetect == 'en' ? sectionproperties.borderTopRightRadius + 'px' : sectionproperties.borderTopLeftRadius + 'px'
+    }
   }, /*#__PURE__*/React.createElement("div", {
     "class": "row mt-0 ml-0 mr-0 w-100 align-items-center justify-content-center",
     style: {
@@ -39638,21 +40092,21 @@ var UpSlideEffectCard = function UpSlideEffectCard(props) {
       height: sectionproperties.image_height + 'px',
       marginBottom: sectionproperties.image_mb + 'px',
       paddingLeft: langdetect == 'en' ? sectionproperties.paddingLeft + 'px' : sectionproperties.paddingRight + 'px',
-      paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px',
-      borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.image_borderBottomLeftRadius + 'px' : sectionproperties.image_borderBottomRightRadius + 'px',
-      borderBottomRightRadius: langdetect == 'en' ? sectionproperties.image_borderBottomRightRadius + 'px' : sectionproperties.image_borderBottomLeftRadius + 'px',
-      borderTopLeftRadius: langdetect == 'en' ? sectionproperties.image_bordertopleftradius + 'px' : sectionproperties.image_bordertoprightradius + 'px',
-      borderTopRightRadius: langdetect == 'en' ? sectionproperties.image_bordertoprightradius + 'px' : sectionproperties.image_bordertopleftradius + 'px',
-      backgroundColor: sectionproperties.image_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.image_bgcolor
+      paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px'
     }
   }, /*#__PURE__*/React.createElement(IKImage, {
     urlEndpoint: IKurlEndpoint,
     publicKey: IKpublicKey,
-    path: '/tr:w-350,h-300/' + item.image,
+    path: '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + item.image,
     style: {
       width: '100%',
       height: '100%',
-      objectFit: 'contain'
+      objectFit: sectionproperties.bgcovercontain == 'Contain' ? 'contain' : 'cover',
+      background: sectionproperties.image_bgtransparent == 'Transparent' ? 'Transparent' : sectionproperties.image_bgcolor,
+      borderTopLeftRadius: langdetect == 'en' ? sectionproperties.image_bordertopleftradius + 'px' : sectionproperties.image_bordertoprightradius + 'px',
+      borderTopRightRadius: langdetect == 'en' ? sectionproperties.image_bordertoprightradius + 'px' : sectionproperties.image_bordertopleftradius + 'px',
+      borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.image_borderBottomLeftRadius + 'px' : sectionproperties.image_borderBottomRightRadius + 'px',
+      borderBottomRightRadius: langdetect == 'en' ? sectionproperties.image_borderBottomRightRadius + 'px' : sectionproperties.image_borderBottomLeftRadius + 'px'
     },
     loading: "lazy"
   }), item.hassale == 1 && /*#__PURE__*/React.createElement("div", {
@@ -39674,15 +40128,65 @@ var UpSlideEffectCard = function UpSlideEffectCard(props) {
     "class": "h-100 d-flex align-items-center justify-content-center"
   }, /*#__PURE__*/React.createElement(FaRegEye, {
     size: sectionproperties.generalbtn_fontsize
-  }))), sectionproperties.cartBtnShow == 'Show' && /*#__PURE__*/React.createElement("button", {
-    "class": "".concat(card_cssstyles.cart_btn) + ' ml-2 mr-2 ',
+  }))), sectionproperties.quantitybtn_show == 'Hide' && sectionproperties.cartBtnShow == 'Show' && /*#__PURE__*/React.createElement("button", {
+    "class": "".concat(card_cssstyles.cart_btn) + ' ml-2 mr-2  ml-sm-1 mr-sm-1 w-sm-100px font-sm-12 ',
     onClick: function onClick() {
-      if (props.fetchingtypeprops == 'products') {
+      setShowProductInfoModalContext(true);
+      setProductIdProdutInfoModalContext(item.productid);
+    }
+  }, langdetect == 'en' ? sectionproperties.cartBtnContentenglish : sectionproperties.cartBtnContentarabic), sectionproperties.quantitybtn_show == 'Show' && /*#__PURE__*/React.createElement("div", null, sectionproperties.cartBtnShow == 'Show' && showquantity == false && /*#__PURE__*/React.createElement("button", {
+    "class": "".concat(card_cssstyles.cart_btn) + ' ml-2 mr-2  ml-sm-1 mr-sm-1 w-sm-100px font-sm-12 ',
+    onClick: function onClick() {
+      setshowquantity(true);
+    }
+  }, langdetect == 'en' ? sectionproperties.cartBtnContentenglish : sectionproperties.cartBtnContentarabic), showquantity == true && /*#__PURE__*/React.createElement("div", {
+    "class": "".concat(card_cssstyles.quantitybtn) + ' w-sm-100px p-0 d-flex align-items-center justify-content-center ml-2 mr-2 ml-sm-1 mr-sm-1 ',
+    style: {
+      direction: 'ltr'
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    "class": "".concat(card_cssstyles.minus_quantitybtn_icon_container),
+    onClick: function onClick() {
+      if (item.hasvariants == 0) {
+        var tempitem = _objectSpread$B({}, item);
+        tempitem.quantity = parseInt(tempitem.quantity);
+        tempitem.quantity = tempitem.quantity - 1;
+        if (tempitem.quantity <= 0) {
+          tempitem.quantity = 0;
+        }
+        setitem(_objectSpread$B({}, tempitem));
+        addtocartfunc('add', tempitem.quantity);
+      } else {
         setShowProductInfoModalContext(true);
         setProductIdProdutInfoModalContext(item.productid);
       }
-    }
-  }, langdetect == 'en' ? sectionproperties.cartBtnContentenglish : sectionproperties.cartBtnContentarabic), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React.createElement("button", {
+    },
+    disabled: AddtoCartMutationContext.isLoading == true ? true : false
+  }, /*#__PURE__*/React.createElement("i", {
+    "class": "h-100 allcentered minusbtn"
+  }, /*#__PURE__*/React.createElement(FiMinus, null))), /*#__PURE__*/React.createElement("span", {
+    "class": "".concat(card_cssstyles.quantitybtn_text) + ' d-flex align-items-center justify-content-center '
+  }, addtocartbuttonrender()), /*#__PURE__*/React.createElement("button", {
+    "class": "".concat(card_cssstyles.add_quantitybtn_icon_container),
+    onClick: function onClick() {
+      if (item.hasvariants == 0) {
+        var tempitem = _objectSpread$B({}, item);
+        tempitem.quantity = parseInt(tempitem.quantity);
+        tempitem.quantity = tempitem.quantity + 1;
+        if (tempitem.quantity <= 0) {
+          tempitem.quantity = 0;
+        }
+        setitem(_objectSpread$B({}, tempitem));
+        addtocartfunc('add', tempitem.quantity);
+      } else {
+        setShowProductInfoModalContext(true);
+        setProductIdProdutInfoModalContext(item.productid);
+      }
+    },
+    disabled: AddtoCartMutationContext.isLoading == true ? true : false
+  }, /*#__PURE__*/React.createElement("i", {
+    "class": "h-100 allcentered addbtn"
+  }, /*#__PURE__*/React.createElement(FiPlus, null))))), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React.createElement("button", {
     "class": " ".concat(card_cssstyles.wishlist_btn) + '',
     onClick: function onClick() {
       addtofavoritescontext(item.productid);
@@ -39706,7 +40210,11 @@ var UpSlideEffectCard = function UpSlideEffectCard(props) {
   }), sectionproperties.faviconshape == 'Heart Shape' && /*#__PURE__*/React.createElement(FaRegHeart, {
     size: sectionproperties.favBtnIconfontsize
   }))))), /*#__PURE__*/React.createElement("div", {
-    "class": "col-lg-12 p-0"
+    "class": "col-lg-12",
+    style: {
+      paddingRight: langdetect == 'en' ? sectionproperties.reservation_padding_right + 'px' : sectionproperties.reservation_padding_left + 'px',
+      paddingLeft: langdetect == 'en' ? sectionproperties.reservation_padding_left + 'px' : sectionproperties.reservation_padding_right + 'px'
+    }
   }, sectionproperties.prodNameShow == 'Show' && /*#__PURE__*/React.createElement("div", {
     "class": "row m-0 w-100 align-items-center justify-content-start"
   }, /*#__PURE__*/React.createElement("p", {
@@ -39717,7 +40225,7 @@ var UpSlideEffectCard = function UpSlideEffectCard(props) {
         routingcountext(StaticPagesLinksContext.productinfo, true, item.productid);
       }
     },
-    "class": "".concat(card_cssstyles.productNameStyles) + '  wordbreak wordbreak1 m-0 '
+    "class": sectionproperties.wordbreak == '1' ? "".concat(card_cssstyles.productNameStyles) + '  wordbreak wordbreak1 m-0 ' : "".concat(card_cssstyles.productNameStyles) + '  wordbreak wordbreak2 m-0 '
   }, item.name)), /*#__PURE__*/React.createElement("div", {
     "class": "row m-0 w-100 align-items-center justify-content-start"
   }, sectionproperties.prodPriceShow == 'Show' && /*#__PURE__*/React.createElement("p", {