diff --git a/src/Pages/ProductCatlogue/ProductcatlogueList.jsx b/src/Pages/ProductCatlogue/ProductcatlogueList.jsx
index 935ccf1..620cc76 100644
--- a/src/Pages/ProductCatlogue/ProductcatlogueList.jsx
+++ b/src/Pages/ProductCatlogue/ProductcatlogueList.jsx
@@ -1,29 +1,20 @@
 import { useEffect, useState, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { getSession, handleGeneratePDF } from '../../Services/Others';
+import { getSession } from '../../Services/Others.js';
 import {
   changeBreadCrumb,
   getEmpAccess,
 } from '../../Features/AppPage/CenterPage.js';
-import { Radio, Table, Form, Tooltip, Skeleton } from 'antd';
+import { Radio, Table, Form, Tooltip, Skeleton, message } from 'antd';
 import FormHeader from '../PageComponents/FormHeader.jsx';
-import { Search } from '../../Components/Forms/Search';
-import {
-  WhatsAppOutlined,
-  MessageOutlined,
-  MailOutlined,
-  ArrowRightOutlined,
-} from '@ant-design/icons';
+import { Search } from '../../Components/Forms/Search.jsx';
+import { ArrowRightOutlined } from '@ant-design/icons';
 import { DropDowns } from '../../Components/Forms/DropDown.jsx';
 import Buttons from '../../Components/Forms/Buttons.jsx';
 import Imageupload from '../../Components/Forms/Upload.jsx';
 import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
-import { uploadImage } from '../../Features/upload/upload';
-import wp from '../../Images/Assets/wp.svg';
-import sms from '../../Images/Assets/sms.png';
-import mail from '../../Images/Assets/gmail 1.png';
-import printer from '../../Images/Assets/printer.png';
-import CatalogueTemplate1 from '../ProductCatlogue/CatalogueTemplate1.jsx';
+import { uploadImage } from '../../Features/upload/upload.js';
+import CatalogueTemplate1 from './CatalogueTemplate1.jsx';
 import {
   getProdcataloguedata,
   onlineimages,
@@ -31,7 +22,10 @@ import {
   changeCataloguecheckboxdata,
   GlobalCataloguecheckboxdata,
   ProductCatalogue,
-} from '../../Features/ProductCatlog/ProductCatlogue';
+  getProductCatalogueData,
+  postProductCatalogue,
+  putProductCatalogue,
+} from '../../Features/ProductCatlog/ProductCatlogue.js';
 import '../../Styles/ProductCatalogue/ProductCatalogue.scss';
 import CatalogueTemplate2 from './CatalogueTemplate2.jsx';
 import CatalogueTemplate3 from './CatalogueTemplate3.jsx';
@@ -41,16 +35,20 @@ import _ from 'lodash';
 import { TbWorldSearch } from 'react-icons/tb';
 import { useAuth } from '../../AuthContext.jsx';
 import { printDiv } from '../../Services/WSOthers.js';
+import { useLocation, useNavigate } from 'react-router-dom';
 const subDirectory = import.meta.env.ENV_BASE_URL;
 
 function ProductcatalogueList() {
   const dispatch = useDispatch();
+  const location = useLocation();
+  const editstate = location?.state;
   const formRef = useRef(null);
   const CompId = getSession('CompId');
   const BranchId = getSession('BranchId');
   const AppId = getSession('AppId');
   const UserId = getSession('UserId');
   const UserType = getSession('UserType');
+  const navigate = useNavigate();
 
   const { SadminuserAccess } = useAuth();
   let SAAccessCommonMaster = SadminuserAccess?.find(
@@ -58,43 +56,54 @@ function ProductcatalogueList() {
   );
 
   const checkboxdata = useSelector(GlobalCataloguecheckboxdata);
-
   // const [sortedInfo, setSortedInfo] = useState({});
   const [searchedText, setSearchedText] = useState('');
+  const [selectionType, setSelectionType] = useState('checkbox');
+  const [selectedProductCatalogue, setselectedProductCatalogue] = useState();
   const [selectedRowKeys, setSelectedRowKeys] = useState(
     checkboxdata?.length > 0 ? checkboxdata : []
   );
-  const [selectionType, setSelectionType] = useState('checkbox');
-  const [Cataloguetable, setCataloguetable] = useState();
-  const [selectedProductCatalogue, setselectedProductCatalogue] = useState();
+
+  const [data, setdata] = useState([]);
   const [page, setpage] = useState(1);
   const [imageopen, setimageOpen] = useState();
-  const [onlineImage, setOnlineImage] = useState(null);
   const [imagedata, setimagedata] = useState();
   const [selectedImageIndex, setSelectedImageIndex] = useState(null);
   const [selectedImages, setSelectedImages] = useState({});
   const [selectedProductName, setSelectedProductName] = useState(null);
   const [selectedImage, setSelectedImage] = useState(null);
-  const [selectedRowData, setSelectedRowData] = useState();
-  const [data, setdata] = useState([]);
   const [Template, setTemplate] = useState();
-  const [imageUrl, setImageUrl] = useState('');
   const [FilteredInfo, setFilteredInfo] = useState();
   const [empData, setEmpData] = useState();
   const [addnewAccess, setaddnewAccess] = useState(true);
   const [filteredTableData, setfilteredTableData] = useState(data);
+  const [cataloguedata, setCataloguedata] = useState([]);
+  const [productCount, setProductCount] = useState([]);
+  const pageSize = 10;
+
   const tableDisplayData = (
     filteredTableData?.length > 0 ? filteredTableData : data
   )?.map((e, index) => ({
     ...e,
     index: index + 1,
   }));
-  console.log(filteredTableData, 'filteredTableData');
   const items = [
     {
       name: 'Home',
       link: `${subDirectory}app-page/home`,
     },
+
+    {
+      name: 'Catlogue',
+      link: `${subDirectory}setting/product-catalogue`,
+    },
+    {
+      name: editstate ? 'Edit' : 'New',
+      link: null,
+      link: editstate
+        ? `${subDirectory}setting/product-catalogue/update`
+        : `${subDirectory}setting/product-catalogue/new`,
+    },
   ];
 
   function safeRound(amountStr) {
@@ -206,15 +215,23 @@ function ProductcatalogueList() {
     //   render: (text) => <a style={{ color: "black" }}>{text}</a>,
     // },
   ];
-
   useEffect(() => {
-    dispatch(changeBreadCrumb({ items: items }));
+    dispatch(changeBreadCrumb({ items }));
     Catlogdata();
     Configdata();
-    // if (UserType === "Employee") {
-    // fetchApi()
-    // }
+
+    if (editstate?.editMode && Array.isArray(editstate?.catalogueData)) {
+      const catalogueToEdit = editstate.catalogueData;
+
+      setselectedProductCatalogue({
+        ConfigId: catalogueToEdit[0]?.CatalogType,
+        ConfigName: catalogueToEdit[0]?.CatalogTypeName,
+      });
+
+      setSelectedRowKeys(catalogueToEdit.map((item) => item.key));
+    }
   }, []);
+
   useEffect(() => {
     if (UserType === 'Employee') {
       fetchApi();
@@ -260,42 +277,22 @@ function ProductcatalogueList() {
     e?.map((item, index) =>
       data?.push({
         key: index,
+        ProdId: item?.ProdId,
         ProdName: item?.ProdName,
-        SellPrice:
-          item?.ProductDetail?.[0]?.ProdVariantDetails?.[0]?.StockDetails?.[0]
-            ?.SellPrice,
-        UomName:
-          '(' +
-          item?.ProductDetail?.[0]?.Size +
-          ' ' +
-          item?.ProductDetail?.[0]?.UomName +
-          ')',
-        ProdLogo: item?.ProductDetail?.[0]?.ProdLogo,
+        SellPrice: item?.MRP,
+        UomName: '(' + item?.Size + ' ' + item?.UomName + ')',
+        ProdLogo: item?.ProdLogo,
+        OfferDtl: item?.OfferDtl,
       })
     );
     setdata(data);
   };
-  // const dataPushFun=async(e)=>{
-  //   let data=[]
-  //   e?.map((item, index) =>
-  //   data?.push({
-  //     key: index,
-  //     ProdName: item?.ProdName,
-  //     SellPrice:item?.ProductDetail[0]?.StockDetails?.[0]?.SellPrice,
-  //     UomName: item?.ProductDetail[0]?.Size +" "+"("+item?.ProductDetail[0]?.UomName+")",
-  //     ProdLogo: item?.ProductDetail[0]?.ProdLogo,
-  //   })
-  // );
-  // setdata(data)
-  // }
-
   const onSelectChange = (newSelectedRowKeys) => {
     let Filteredrowdata = data?.filter((a) =>
       newSelectedRowKeys?.includes(a.key)
     );
-
+    setCataloguedata(Filteredrowdata);
     setSelectedRowKeys(newSelectedRowKeys);
-    setSelectedRowData(Filteredrowdata);
     dispatch(changeCataloguedata(Filteredrowdata));
     dispatch(changeCataloguecheckboxdata(newSelectedRowKeys));
   };
@@ -304,7 +301,7 @@ function ProductcatalogueList() {
       let Filteredrowdata = data?.filter((a) =>
         selectedRowKeys?.includes(a.key)
       );
-      setSelectedRowData(Filteredrowdata);
+      setCataloguedata(Filteredrowdata);
       dispatch(changeCataloguedata(Filteredrowdata));
     }
   }, [data]);
@@ -320,7 +317,7 @@ function ProductcatalogueList() {
     setSearchedText(e?.target?.value);
   };
   const filterData = (data, searchText) => {
-    // setpage(1)
+    setpage(1);
 
     return data.filter(
       (record) =>
@@ -383,12 +380,16 @@ function ProductcatalogueList() {
   }, [imageopen]);
 
   const Catlogdata = async () => {
-    let data = { CompId: CompId, BranchId: BranchId, AppId: AppId };
-
-    const response = await dispatch(getProdcataloguedata(data)).unwrap();
+    let data = {
+      CompId: CompId,
+      BranchId: BranchId,
+      AppId: AppId,
+      PageNumber: page,
+    };
+    const response = await dispatch(getProductCatalogueData(data)).unwrap();
     if (response?.data?.statusCode == 1) {
-      setCataloguetable(response?.data?.data);
       dataPushFun(response?.data?.data);
+      setProductCount(response?.data?.TotalCount);
     }
   };
 
@@ -448,9 +449,6 @@ function ProductcatalogueList() {
             ...prevSelectedImages,
             [selectedImageIndex]: uploadImgData?.data?.image,
           }));
-
-          setOnlineImage(uploadImgData?.data?.image);
-          setImageUrl(uploadImgData?.data?.image);
           formRef?.current?.setFieldsValue({ OnlineImage: file });
           let updatedData = _.cloneDeep([...data]);
           if (selectedImageIndex >= 0) {
@@ -466,795 +464,570 @@ function ProductcatalogueList() {
   };
 
   const CatLog1 = `<style>
-  
 @page {
   size: A4;
-  margin: 5cm;
+  margin: 0;
 }
 
 @media print {
   body {
     margin: 0;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
   }
-
   .page {
-    page-break-before: always;
+    page-break-after: always;
+  }
+  .a {
+    page-break-after: always;
+  }
+  .a .overlap-group {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+  .a .itemcardGroup,
+  .CT1itemcardGroup,
+  .a .CT1itemcardGroup {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    justify-content: center !important;
   }
-} 
-
-page[size="A4"] {
-background: #F5F6F7;
-display: block;
-margin: 0 auto;
-margin-bottom: 0.5cm;
-border: 1.25cm solid #F5F6F7; 
 }
 
-@media print {
-body, page[size="A4"] {
-  margin: 0;
-  box-shadow: 0;
-}
-}
-
-
-
-.PrintA4Style .page-footer {
-bottom: 0;
-z-index: 1;
-border-top: #1292EE solid 1px;
-width: inherit;  
-background:  #fff; /* for demo */
-}
-
-.PrintA4Style .page-header {
-top: 0mm;
-width: inherit; 
-border-bottom: #1292EE solid 1px;
-background-color: #1292EE;  
-color: #ffffff; 
-}
-
-.page {
-page-break-after: always;
-}
-
-tfoot {
-  display: table-footer-group;
-}
-
-body {
-  margin: 0;
-}
-}
-
-.print-container {
-margin: auto;
-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-overflow: hidden;
-page-break-before: always;
-}
-
-.a4 {
-width: 210mm;
-height: 297mm;
-}
-
-.a4-landscape {
-width: 297mm;
-height: 210mm;
-}
-
-.a5 {
-width: 148mm;
-height: 210mm;
-}
-
-.a5-landscape {
-width: 210mm;
-height: 148mm;
-}
-
-.A4TablePrint table {
-border-collapse: collapse;
-width: 100%;
-}
-
-
-.A4TablePrint  th { 
-font-size: 12px;  
-padding: 4px;
-}
-
-.A4TablePrint  td{
-font-size: 14px; 
-} 
-
-.A4TablePrint tr:nth-child(even) {
-background-color: #f3f3f3;  
-}
-
-
-
-.A4TablePrint-print-tableMaster{
-display: flex;
-justify-content:center
-}
-
-
-
-.A4TablePrint-print-table {
-width: 100%;
-  border-collapse: collapse;
-  margin:5px 0px;  
-
-}
-
-.A4TablePrint-print-table th, .A4TablePrint-print-table td {
-
-border: 1px solid #000;
-padding:2px 6px;
-border-collapse: collapse; 
-font-size: 11px;
-font-weight:600;
-}
-
-.A4TablePrint-print-table th {
-background-color: #f2f2f2;
-padding:5px 5px;
-font-size: 14px;
-font-weight:600;
-}
-  
-table.report-container {
-  page-break-after:always;
-}
-thead.report-header {
-  display:table-header-group;
-}
-tfoot.report-footer {
-  display:table-footer-group;
-} 
-
-.page-header{
-  height: 100px;
-}
-
-.page-footer {
-  position: fixed;
-  bottom: 0;
-  z-index: 1;
-  border-top: #1292EE solid 1px;
-  width: inherit;  
-  background:  #fff; /* for demo */
-}
-
-.page-header {
-  position: fixed;
-  top: 0mm;
-  width: inherit; 
-  border-bottom: #1292EE solid 1px;
-  background-color: #1292EE;  
-  color: #000000; 
-}
-
-.page {
-  page-break-after: always;
-}
-
-
-.PrintA4Style .page-footer {
-  position: fixed;
-  bottom: 0;
-  z-index: 1;
-  border-top: #1292EE solid 1px;
-  width: inherit;  
-  background:  #fff; /* for demo */
-}
-
-.PrintA4Style .page-header {
-  position: fixed;
-  top: 0mm;
-  width: inherit; 
-  border-bottom: #1292EE solid 1px;
-  background-color: #1292EE;  
-  color: #ffffff; 
-}
-
-  :root {
-    --primary-colors-colors-primary-colors-primary-BG-color: rgba(0, 0, 0, 1);
-    --primary-colors-colors-primary-colors-primary-border: rgba(255, 255, 255, 1);
-    --primary-colors-colors-primary-colors-primary-border-color: rgba(0, 75, 169, 1);
-    --primary-colors-colors-primary-colors-primary-text-color: rgba(255, 255, 255, 1);
-    --primary-colors-colors-primary-colors-primary-text-color-2: rgba(0, 75, 169, 1);
-    --primary-colors-colors-primary-colors-surface-color: rgba(227, 232, 255, 1);
-    --primary-colors-colors-secondary-colors-secondary-BG-color: rgba(30, 143, 116, 1);
-    --primary-colors-colors-secondary-colors-secondary-surface-color: rgba(0, 0, 0, 1);
-    --primary-colors-colors-secondary-colors-secondary-text-color: rgba(255, 255, 255, 1);
-    --token-bg-bg-primary: var(--primary-colors-colors-primary-colors-primary-BG-color);
-    --token-bg-bg-secondary: var(--primary-colors-colors-secondary-colors-secondary-BG-color);
-    --token-text-text-primary: var(--primary-colors-colors-primary-colors-primary-text-color);
-    --token-text-text-secondary: var(--primary-colors-colors-secondary-colors-secondary-text-color);
-}
-
-
 .a {
-    background-color: #ffffff; 
-    display: flex;
-    flex-direction: row; 
-    justify-content: center;
-    // width: 100%;
-    // height: 100vh;
+  background-color: #ffffff;
+  width: 210mm;
+  min-height: 297mm;
+  page-break-after: always;
+  position: relative;
 }
 
 .a .div {
-    background-color: #ffffff;
-    background-image: url("https://api.pozo.app/pozo-common-image-api/upload?fileId=6572c3fc3751deadeef3cb57.png");
-    // height: 842px;
-    // height: 100vh;
-    overflow: scroll;
-    position: relative; 
-    width:  100%;
-}
-
-.a .overlap {
-    height: 755px;
-    left: 0;
-    position: absolute;
-    display: contents;
-    top: 17px;
-    width: 100%;
-}
-
-.a .rectangle {
-    background-color: #ff453a;
-    border-radius: 50px;
-    height: 721px;
-    left: 0;
-    position: absolute;
-    top: 2px;
-    width: 100%;
-}
-
-.a .rectangle-2 {
-    background-color: #ffffff;
-    border-radius: 38px;
-    height: 720px;
-    left: 0;
-    position: absolute;
-    top: 130px;
-    width:  100%;
-}
-
-.a .pngwing-com {
-    height: 546px;
-    left: 0;
-    position: absolute;
-    top: 209px;
-    width:  100%;
+  background-color: #ffffff;
+  background-image: url("https://api.pozo.app/pozo-common-image-api/upload?fileId=6572c3fc3751deadeef3cb57.png");
+  width: 100%;
+  min-height: 297mm;
+  padding-top: 280px;
 }
 
 .a .itemcardGroup {
-    left: 0px;
-    position: relative; 
-    top: 200px;
-    width: 100%;
-    height:inherit;
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: 2rem;
-    gap:0.5rem;
-    justify-content: center;
-}
-.CT1itemcardGroup{
-  left: 0px;
-  position: relative; 
-  top: 100px;
   width: 100%;
-  height:inherit;
   display: flex;
   flex-wrap: wrap;
-  margin-top: 2rem;
-  gap:0.5rem;
+  gap: 0.5rem;
+  padding: 1rem;
   justify-content: center;
+  align-content: flex-start;
+}
+
+.CT1itemcardGroup {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 1rem;
+  justify-content: center;
+  align-content: flex-start;
 }
 
 .a .CT1itemcardGroup {
-  left: 12px;
-  position: relative; 
-  top: 120px;
   width: 100%;
-
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 1rem;
+  justify-content: center;
+  align-content: flex-start;
 }
 
 .a .overlap-group {
-    background-color: #ececec;
-    border-radius: 6.5px;
-    height: 160px;
-    display: flex;
-    flex-wrap: wrap;
-    /* gap: 0rem; */
-    position: relative;
-    width: 110px;
+  background-color: #ececec;
+  border-radius: 6.5px;
+  height: 160px;
+  width: 110px;
+  page-break-inside: avoid;
+  break-inside: avoid;
+  margin: 0.25rem;
+  display: inline-block;
 }
 
 .a .overlap-2 {
-    height: 92px;
-    left: 3px;
-    position: absolute;
-    top: 3px;
-    width: 128px;
+  height: 92px;
+  left: 3px;
+  position: absolute;
+  top: 3px;
+  width: 128px;
 }
 
 .a .Cateimg {
-    height: 50px; 
-    object-fit: cover; 
-    width: 90px;
+  height: 50px;
+  object-fit: cover;
+  width: 90px;
 }
 
 .a .bxs-offer {
-    border-radius: 5.07px;
-    height: 47px;
-    left: 0;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    width: 47px;
+  border-radius: 5.07px;
+  height: 47px;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  width: 47px;
 }
 
 .a .group-2 {
-    height: 39px;
-    left: 4px;
-    position: absolute;
-    top: 4px;
-    width: 39px;
+  height: 39px;
+  left: 4px;
+  position: absolute;
+  top: 4px;
+  width: 39px;
 }
 
 .a .text-wrapper {
-    color: #000000;
-    font-family: 'Montserrat', sans-serif;
-    font-size: 14px;
-    font-weight: 800;
-    left: 10px;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 13px;
+  color: #000000;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 14px;
+  font-weight: 800;
+  left: 10px;
+  letter-spacing: 0;
+  line-height: normal;
+  position: absolute;
+  top: 13px;
 }
 
 .a .text-wrapper-2 {
-    color: #000000;
-    font-family: 'Montserrat', sans-serif;
-    font-size: 7.3px;
-    font-weight: 800;
-    left: 19px;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 29px;
+  color: #000000;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 7.3px;
+  font-weight: 800;
+  left: 19px;
+  letter-spacing: 0;
+  line-height: normal;
+  position: absolute;
+  top: 29px;
 }
 
 .a .div-wrapper {
-    background-color: #ff453a;
-    border-radius: 5.07px;
-    height: 23px;
-    left: 8px;
-    position: absolute;
-    top: 130px;
-    width: 95px;
+  background-color: #ff453a;
+  border-radius: 5.07px;
+  height: 23px;
+  left: 8px;
+  position: absolute;
+  top: 130px;
+  width: 95px;
 }
 
 .a .text-wrapper-3 {
-    color: #ffffff;
-    font-family: 'Montserrat', sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    left: 10px;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 3px;
+  color: #ffffff;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  left: 10px;
+  letter-spacing: 0;
+  line-height: normal;
+  position: absolute;
+  top: 3px;
 }
 
 .a .text-wrapper-4 {
-    color: #000000;
-    font-family: "Montserrat", sans-serif;
-    font-size: 10px;
-    font-weight: 700;
-    left: 10px;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 69px;
-    width: 90px;
-    height: 60px;
-    overflow: hidden;
-    text-wrap: wrap;
-    line-height: 1;
-}
+  color: #000000;
+  font-family: "Montserrat", sans-serif;
+  font-size: 10px;
+  font-weight: 700;
+  left: 10px;
+  letter-spacing: 0;
+  line-height: normal;
+  position: absolute;
+              top: 69px;
+              width: 90px;
+              height: 60px;
+              overflow: hidden;
+              text-wrap: wrap;
+              line-height: 1;
+          }
 
-.a .overlap-wrapper {
-    height: 304px;
-    left: 28px;
-    position: absolute;
-    top: 0;
-    width: 546px;
-}
+          .a .overlap-wrapper {
+              height: 304px;
+              left: 28px;
+              position: absolute;
+              top: 0;
+              width: 546px;
+          }
 
-.a .overlap-3 {
-    height: 304px;
-    position: relative;
-}
+          .a .overlap-3 {
+              height: 304px;
+              position: relative;
+          }
 
-.a .group-3 {
-    height: 63px;
-    left: 373px;
-    position: absolute;
-    top: 35px;
-    width: 156px;
-}
+          .a .group-3 {
+              height: 63px;
+              left: 373px;
+              position: absolute;
+              top: 35px;
+              width: 156px;
+          }
 
-.a .text-wrapper-5 {
-    color: #ffffff;
-    font-family: 'Montserrat', sans-serif;
-    font-size: 32.9px;
-    font-weight: 800;
-    left: 0;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 0;
-}
+          .a .text-wrapper-5 {
+              color: #ffffff;
+              font-family: 'Montserrat', sans-serif;
+              font-size: 32.9px;
+              font-weight: 800;
+              left: 0;
+              letter-spacing: 0;
+              line-height: normal;
+              position: absolute;
+              top: 0;
+          }
 
-.a .overlap-group-wrapper {
-    height: 62px;
-    left: 85px;
-    position: absolute;
-    top: 1px;
-    width: 73px;
-}
+          .a .overlap-group-wrapper {
+              height: 62px;
+              left: 85px;
+              position: absolute;
+              top: 1px;
+              width: 73px;
+          }
 
-.a .overlap-group-2 {
-    height: 62px;
-    position: relative;
-    width: 69px;
-}
+          .a .overlap-group-2 {
+              height: 62px;
+              position: relative;
+              width: 69px;
+          }
 
-.a .text-wrapper-6 {
-    color: #fce300;
-    font-family: 'Montserrat', sans-serif;
-    font-size: 30.8px;
-    font-weight: 800;
-    left: 0;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 0;
-    width: 69px;
-}
+          .a .text-wrapper-6 {
+              color: #fce300;
+              font-family: 'Montserrat', sans-serif;
+              font-size: 30.8px;
+              font-weight: 800;
+              left: 0;
+              letter-spacing: 0;
+              line-height: normal;
+              position: absolute;
+              top: 0;
+              width: 69px;
+          }
 
-.a .text-wrapper-7 {
-    color: #fce300;
-    font-family: 'Montserrat', sans-serif;
-    font-size: 23.6px;
-    font-weight: 600;
-    left: 4px;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 33px;
-    width: 58px;
-}
+          .a .text-wrapper-7 {
+              color: #fce300;
+              font-family: 'Montserrat', sans-serif;
+              font-size: 23.6px;
+              font-weight: 600;
+              left: 4px;
+              letter-spacing: 0;
+              line-height: normal;
+              position: absolute;
+              top: 33px;
+              width: 58px;
+          }
 
-.a .group-4 {
-    height: 80px;
-    left: 3px;
-    position: absolute;
-    top: 97px;
-    width: 251px;
-}
+          .a .group-4 {
+              height: 80px;
+              left: 3px;
+              position: absolute;
+              top: 97px;
+              width: 251px;
+          }
 
-.a .text-wrapper-8 {
-    color: #ffffff;
-    font-family: 'Montserrat', sans-serif;
-    font-size: 39.2px;
-    font-weight: 800;
-    left: 0;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 0;
-}
+          .a .text-wrapper-8 {
+              color: #ffffff;
+              font-family: 'Montserrat', sans-serif;
+              font-size: 39.2px;
+              font-weight: 800;
+              left: 0;
+              letter-spacing: 0;
+              line-height: normal;
+              position: absolute;
+              top: 0;
+          }
 
-.a .text-wrapper-9 {
-    color: #ffffff;
-    font-family: 'Montserrat', sans-serif;
-    font-size: 26.6px;
-    font-weight: 800;
-    left: 0;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 48px;
-}
+          .a .text-wrapper-9 {
+              color: #ffffff;
+              font-family: 'Montserrat', sans-serif;
+              font-size: 26.6px;
+              font-weight: 800;
+              left: 0;
+              letter-spacing: 0;
+              line-height: normal;
+              position: absolute;
+              top: 48px;
+          }
 
-.a .group-5 {
-    height: 42px;
-    left: 0;
-    position: absolute;
-    top: 41px;
-    width: 100%;
-}
+          .a .group-5 {
+              height: 42px;
+              left: 0;
+              position: absolute;
+              top: 41px;
+              width: 100%;
+          }
 
-.a .group-6 {
-    height: 42px;
-    left: 52px;
-    position: absolute;
-    top: 0;
-    width: 100%;
-}
+          .a .group-6 {
+              height: 42px;
+              left: 52px;
+              position: absolute;
+              top: 0;
+              width: 100%;
+          }
 
-.a .text-wrapper-10 {
-    color: #ffffff;
-    font-family: 'Montserrat', sans-serif;
-    font-size: 20px;
-    font-weight: 800;
-    left: 0;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 0;
-    white-space: nowrap;
-}
+          .a .text-wrapper-10 {
+              color: #ffffff;
+              font-family: 'Montserrat', sans-serif;
+              font-size: 20px;
+              font-weight: 800;
+              left: 0;
+              letter-spacing: 0;
+              line-height: normal;
+              position: absolute;
+              top: 0;
+              white-space: nowrap;
+          }
 
-.a .text-wrapper-11 {
-    color: #ffffff;
-    font-family: 'Montserrat', sans-serif;
-    font-size: 13.2px;
-    font-weight: 800;
-    left: 0;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 26px;
-}
-.a .text-wrapper-11New {
-    color: #ffffff;
-    font-family: 'Montserrat', sans-serif;
-    font-size: 13.2px;
-    font-weight: 800;
-    left: 0;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 39px;
-}
+          .a .text-wrapper-11 {
+              color: #ffffff;
+              font-family: 'Montserrat', sans-serif;
+              font-size: 13.2px;
+              font-weight: 800;
+              left: 0;
+              letter-spacing: 0;
+              line-height: normal;
+              position: absolute;
+              top: 26px;
+          }
+          .a .text-wrapper-11New {
+              color: #ffffff;
+              font-family: 'Montserrat', sans-serif;
+              font-size: 13.2px;
+              font-weight: 800;
+              left: 0;
+              letter-spacing: 0;
+              line-height: normal;
+              position: absolute;
+              top: 39px;
+          }
 
-.a .pngwing-com-2 {
-    height: 41px;
-    left: 0;
-    object-fit: cover;
-    position: absolute;
-    top: 0;
-    width: 44px;
-}
+          .a .pngwing-com-2 {
+              height: 41px;
+              left: 0;
+              object-fit: cover;
+              position: absolute;
+              top: 0;
+              width: 44px;
+          }
 
-.a .group-7 {
-    height: 304px;
-    left: 181px;
-    position: absolute;
-    top: 0;
-    width: 365px;
-}
+          .a .group-7 {
+              height: 304px;
+              left: 181px;
+              position: absolute;
+              top: 0;
+              width: 365px;
+          }
 
-.a .pngwing-wrapper {
-    background-image: url(./pngwing-com-2023-12-07t141745-1.png);
-    background-position: 50% 50%;
-    background-size: cover;
-    height: 304px;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 365px;
-    z-index: 1;
-}
+          .a .pngwing-wrapper {
+              background-image: url(./pngwing-com-2023-12-07t141745-1.png);
+              background-position: 50% 50%;
+              background-size: cover;
+              height: 304px;
+              left: 0;
+              position: absolute;
+              top: 0;
+              width: 365px;
+              z-index: 1;
+          }
 
-.a .pngwing {
-    height: 185px;
-    left: 78px;
-    object-fit: cover;
-    position: absolute;
-    top: 75px;
-    width: 216px;
-}
+          .a .pngwing {
+              height: 185px;
+              left: 78px;
+              object-fit: cover;
+              position: absolute;
+              top: 75px;
+              width: 216px;
+          }
 
-.a .pngwing-com-3 {
-    height: 170px;
-    left: -98px;
-    object-fit: cover;
-    position: absolute; 
-    transform: rotate(180deg);
-    top: 77px;
-    width: 555px; 
-}
+          .a .pngwing-com-3 {
+              height: 170px;
+              left: -98px;
+              object-fit: cover;
+              position: absolute; 
+              transform: rotate(180deg);
+              top: 77px;
+              width: 555px; 
+          }
 
-.a .image {
-    height: 510px;
-    left: -43179px;
-    object-fit: cover;
-    position: absolute;
-    top: -53775px;
-    width: 360px;
-}
+          .a .image {
+              height: 510px;
+              left: -43179px;
+              object-fit: cover;
+              position: absolute;
+              top: -53775px;
+              width: 360px;
+          }
 
-.a .group-8 {
-    height: 39px;
-    left: 18px;
-    position: absolute;
-    top: 235px; 
-    z-index: 2;
-    background: #fff;
-    width: 566px;
-    border-radius: 30px;
-}
+          .a .group-8 {
+              height: 39px;
+              left: 18px;
+              position: absolute;
+              top: 235px; 
+              z-index: 2;
+              background: #fff;
+              width: 566px;
+              border-radius: 30px;
+          }
 
-.a .group-wrapper {
-    background-color: #fee112;
-    border-radius: 13.5px;
-    height: 27px;
-    left: 0;
-    position: absolute;
-    top: 3px;
-    width: 168px;
-}
+          .a .group-wrapper {
+              background-color: #fee112;
+              border-radius: 13.5px;
+              height: 27px;
+              left: 0;
+              position: absolute;
+              top: 3px;
+              width: 168px;
+          }
 
-.a .group-9 {
-    height: 22px;
-    left: 12px;
-    position: relative;
-    top: 3px;
-    width: 141px;
-}
+          .a .group-9 {
+              height: 22px;
+              left: 12px;
+              position: relative;
+              top: 3px;
+              width: 141px;
+          }
 
-.a .text-wrapper-12 {
-    color: #000000;
-    font-family: 'Montserrat', sans-serif;
-    font-size: 16.9px;
-    font-weight: 700;
-    left: 29px;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 0;
-}
+          .a .text-wrapper-12 {
+              color: #000000;
+              font-family: 'Montserrat', sans-serif;
+              font-size: 16.9px;
+              font-weight: 700;
+              left: 29px;
+              letter-spacing: 0;
+              line-height: normal;
+              position: absolute;
+              top: 0;
+          }
 
-.a .solar-phone-bold {
-    height: 20px;
-    left: 0;
-    position: absolute;
-    top: 2px;
-    width: 20px;
-}
+          .a .solar-phone-bold {
+              height: 20px;
+              left: 0;
+              position: absolute;
+              top: 2px;
+              width: 20px;
+          }
 
-.a .vector {
-    height: 37px;
-    left: 184px;
-    position: absolute;
-    top: 10px;
-    width: 1px;
-}
+          .a .vector {
+              height: 37px;
+              left: 184px;
+              position: absolute;
+              top: 10px;
+              width: 1px;
+          }
 
-.a .vector-2 {
-    height: 37px;
-    left: 344px;
-    position: absolute;
-    top: 10px;
-    width: 1px;
-}
+          .a .vector-2 {
+              height: 37px;
+              left: 344px;
+              position: absolute;
+              top: 10px;
+              width: 1px;
+          }
 
-.a .group-10 {
-    height: 36px;
-    left: 354px;
-    position: absolute;
-    top: 2px;
-    width: 216px;
-}
+          .a .group-10 {
+              height: 36px;
+              left: 354px;
+              position: absolute;
+              top: 2px;
+              width: 216px;
+          }
 
-.a .p {
-    color: #000000;
-    font-family: 'Montserrat', sans-serif;
-    font-size: 10px;
-    font-weight: 600;
-    left: 32px;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 0;
-    width: 182px;
-}
+          .a .p {
+              color: #000000;
+              font-family: 'Montserrat', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+              left: 32px;
+              letter-spacing: 0;
+              line-height: normal;
+              position: absolute;
+              top: 0;
+              width: 182px;
+          }
 
-.a .vector-3 {
-    height: 24px;
-    left: 0;
-    position: absolute;
-    top: 3px;
-    width: 21px;
-}
+          .a .vector-3 {
+              height: 24px;
+              left: 0;
+              position: absolute;
+              top: 3px;
+              width: 21px;
+          }
 
-.a .group-11 {
-    height: 29px;
-    left: 190px;
-    position: absolute;
-    top: 4px;
-    width: 139px;
-}
+          .a .group-11 {
+              height: 29px;
+              left: 190px;
+              position: absolute;
+              top: 4px;
+              width: 139px;
+          }
 
-.a .group-12 {
-    height: 27px;
-    left: 41px;
-    position: absolute;
-    top: 0;
-    width: 102px;
-}
+          .a .group-12 {
+              height: 27px;
+              left: 41px;
+              position: absolute;
+              top: 0;
+              width: 102px;
+          }
 
-.a .text-wrapper-13 {
-    color: #000000;
-    font-family: 'Montserrat', sans-serif;
-    font-size: 12px;
-    font-weight: 600;
-    left: 0;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 0;
-}
+          .a .text-wrapper-13 {
+              color: #000000;
+              font-family: 'Montserrat', sans-serif;
+              font-size: 12px;
+              font-weight: 600;
+              left: 0;
+              letter-spacing: 0;
+              line-height: normal;
+              position: absolute;
+              top: 0;
+          }
 
-.a .text-wrapper-14 {
-    color: #000000;
-    font-family: 'Montserrat', sans-serif;
-    font-size: 9px;
-    font-weight: 500;
-    left: 0;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 16px;
-    width: 98px;
-}
+          .a .text-wrapper-14 {
+              color: #000000;
+              font-family: 'Montserrat', sans-serif;
+              font-size: 9px;
+              font-weight: 500;
+              left: 0;
+              letter-spacing: 0;
+              line-height: normal;
+              position: absolute;
+              top: 16px;
+              width: 98px;
+          }
 
-.a .group-13 {
-    height: 29px;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 28px;
-}
+          .a .group-13 {
+              height: 29px;
+              left: 0;
+              position: absolute;
+              top: 0;
+              width: 28px;
+          }
 
-.a .group-14 {
-    height: 22px;
-    left: -43132px;
-    position: absolute;
-    top: -52620px;
-    width: 23px;
-}
+          .a .group-14 {
+              height: 22px;
+              left: -43132px;
+              position: absolute;
+              top: -52620px;
+              width: 23px;
+          }
 
 
-.Catalogue-printerIcon {
-    font-size: 25px;
-    cursor: pointer;
-}
+          .Catalogue-printerIcon {
+              font-size: 25px;
+              cursor: pointer;
+          }
 
-.Catalogue-PrinterIcon-Container {
-    cursor: pointer;
-    margin-left: 10rem;
-}
+          .Catalogue-PrinterIcon-Container {
+              cursor: pointer;
+              margin-left: 10rem;
+          }
 
-.Catalogue-printerIcon-disabled {
-    opacity: 0.5;
-    pointer-events: none;
-    cursor: not-allowed;
-    font-size: 30px;
-}
+          .Catalogue-printerIcon-disabled {
+              opacity: 0.5;
+              pointer-events: none;
+              cursor: not-allowed;
+              font-size: 30px;
+          }
   </style>`;
 
   const CatLog2 = `<style>
@@ -2132,898 +1905,398 @@ font-weight:600;
   </style>`;
 
   const CatLog3 = `<style>
-  
-   
-  @media print {
-    body {
-      background: #310000;  
-    }
-
-     
-
-.PrintA4Style .page-footer {
-bottom: 0;
-z-index: 1;
-border-top: #1292EE solid 1px;
-width: inherit;  
-background:  #fff; /* for demo */
+/* Main Container */
+.catlog3 {
+  display: flex;
+  justify-content: center;
+  height: auto;
+  font-family: 'Montserrat', sans-serif;
+  background-color: #310000;
 }
 
-.PrintA4Style .page-header {
-top: 0mm;
-width: inherit;  
-border-bottom: #1292EE solid 1px;
-background-color: #1292EE;  
-color: #ffffff; 
+.catlog-container {
+  width: 100%;
+  padding: 1rem;
+  background-color: #310000;
 }
 
-.page {
-page-break-after: always;
+/* Branch Header */
+.branch-header {
+  display: flex;
+  flex-direction: column;
+  background-color: #800000;
+  color: #fff;
+  margin-bottom: 1rem;
 }
 
-tfoot {
-  display: table-footer-group;
+.branch-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  padding: 0.5rem 1rem;
+  page-break-inside: avoid; /* Prevent header from splitting */
 }
 
-
-body {
-  margin: 0;
-}
+.branch-info {
+  text-align: left;
 }
 
-.print-container {
-margin: auto;
-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-overflow: hidden;
-page-break-before: always;
+.branch-name {
+  font-size: 22px;
+  font-weight: 600;
 }
 
-.a4 {
-width: 210mm;
-height: 297mm;
+.branch-mobile {
+  font-size: 16px;
 }
 
-.a4-landscape {
-width: 297mm;
-height: 210mm;
+.branch-address {
+  font-size: 12px;
 }
 
-.a5 {
-width: 148mm;
-height: 210mm;
+.branch-logo {
+  width: 170px;
+  object-fit: contain;
 }
 
-.a5-landscape {
-width: 210mm;
-height: 148mm;
+.fresh-deals {
+  position: absolute;
+  right: 50px;
+  font-size: 26px;
+  font-weight: 700;
+  transform: rotate(-10deg);
+  text-transform: uppercase;
+  text-shadow: 6px 6px 4px rgba(0, 0, 1, 0.5);
 }
 
-.A4TablePrint table {
-border-collapse: collapse;
-width: 100%;
-}
-
-
-.A4TablePrint  th { 
-font-size: 12px;  
-padding: 4px;
-}
-
-.A4TablePrint  td{
-font-size: 14px; 
-} 
-
-.A4TablePrint tr:nth-child(even) {
-background-color: #f3f3f3;  
-}
-
-
-
-.A4TablePrint-print-tableMaster{
-display: flex;
-justify-content:center
-}
-
-
-
-.A4TablePrint-print-table {
-width: 100%;
-  border-collapse: collapse;
-  margin:5px 0px;  
-
-}
-
-.A4TablePrint-print-table th, .A4TablePrint-print-table td {
-
-border: 1px solid #000;
-padding:2px 6px;
-border-collapse: collapse; 
-font-size: 11px;
-font-weight:600;
-}
-
-.A4TablePrint-print-table th {
-background-color: #f2f2f2;
-padding:5px 5px;
-font-size: 14px;
-font-weight:600;
-}
-  table.report-container {
-    page-break-after:always;
-  }
-  thead.report-header {
-    display:table-header-group;
-  }
-  tfoot.report-footer {
-    display:table-footer-group;
-  } 
-  
-  .page-header{
-    height: 100px;
-  }
-  
-  .page-footer {
-    position: fixed;
-    bottom: 0;
-    z-index: 1;
-    border-top: #1292EE solid 1px;
-    width: inherit;  
-    background:  #fff; /* for demo */
-  }
-  
-  .page-header {
-    position: fixed;
-    top: 0mm;
-    width: inherit; 
-    border-bottom: #1292EE solid 1px;
-    background-color: #1292EE;  
-    color: #000000; 
-  }
-  
-  .page {
-    page-break-after: always;
-  }
-  
-  
-  .PrintA4Style .page-footer {
-    position: fixed;
-    bottom: 0;
-    z-index: 1;
-    border-top: #1292EE solid 1px;
-    width: inherit;  
-    background:  #fff; /* for demo */
-  }
-  
-  .PrintA4Style .page-header {
-    position: fixed;
-    top: 0mm;
-    width: inherit; 
-    border-bottom: #1292EE solid 1px;
-    background-color: #1292EE;  
-    color: #ffffff; 
-  }
-
-  @font-face {
-    font-family: 'Roboto';
-    // src: url('../../Fonts/OtherFonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-  }
-    
-  @media screen { 
-    body {
-      font-family: 'Roboto', sans-serif;  
-    }
-  }
-  
-  .CatelogueTemp3Branchdetails1 {
-    font-family: 'Montserrat', sans-serif;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: left;
-    gap:1rem;
-    padding: 0.5rem 0rem 0rem 0.5rem;
-    font-weight: 400;
-    font-size: clamp(0.1rem, 2.5vw, 0.7rem);
-    align-items:self-start;
-  }
-  
-  .CatelogueTemp3-MasterDiv {
-    font-family: 'Inconsolata', monospace; 
-    width: inherit;
-    background: radial-gradient(circle at center, #1A0001, #320000); 
-  }
-  
-  .headerFooterStyle  {
-    display: block;
-    position: fixed;
-    text-align: center;
-    background-color: #f0f0f0;  
-    font-size: 14px;
-  };
-  
-  .CatelogueTemp3-MasterDiv .page-header, .page-header-space {
-  height: 100px;
-  }
-  
-  .page-footer {
-    position: fixed;
-    bottom: 0;
-    z-index: 1;
-    border-top: #1292EE solid 1px;
-    width: 100%;  
-    background:  #fff; 
-  }
-  
-  .page-header {
-    position: fixed;
-    top: 0mm;
-    width: 100%; 
-    border-bottom: #1292EE solid 1px;
-    background-color: #1292EE;  
-    color: #000; 
-    background-image: radial-gradient(circle,);
-  }
-  
-  .ItemCard{
-    width: inherit;
-    display: flex;
-  }
-  
-  .CatelogueTemp3-MasterDiv .img {
-    height: 51px;
-    left: 6px;
-    object-fit: cover;
-    position: absolute;
-    top: 25px;
-    width: 76px;
-  }
-  
-  .CatelogueTemp3-MasterDiv .img1 {
-    height: 40px;
-    left: 30px;
-    object-fit: cover;
-    position: absolute;
-    top: 71px;
-    width: 47px;
-  }
-  
-  .CatelogueTemp3-MasterDiv .text-wrapper1 {
-    color: black;
-    font-family: "Montserrat", sans-serif;
-    font-size: 7px;
-    font-weight: 800;
-    left: 42px;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 97px;
-  }
-  
-  .CatelogueTemp3-MasterDiv .itemcardGroup {
-    left: 1px;
-    position: relative;
-    top: 210px;
-    width: 570px;
-    height: inherit;
-    border-radius: 17px;
-    background-color: maroon;
-  }
-  
-  .CatelogueTemp3-MasterDiv .div1 {
-    background-color: maroon;
-    overflow: scroll;
-    position: relative;
-    width: 595px;
-  }
-  
-  .CatelogueTemp3-MasterDiv .overlap-group {
-    background-color: #ececec;
-    border-radius: 19.5px;
-    height: 104px;
-    left: 7px;
-    width: 95px;
-  }
-  
-  .CatelogueTemp3-MasterDiv .text-wrapper {
-    color: white;
-    font-family: "Montserrat", sans-serif;
-    font-size: 14px;
-    font-weight: 800;
-    left: 20px;
-    letter-spacing: 0;
-    line-height: normal;
-    top: 80px;
-    border-radius: 60px;
-    height: 51px;
-    width: 51px;
-    background: red;
-    text-align: right;
-    align-items: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .textDesign {
-    position: absolute;
-    top: 52px;
-    font-family: "fantasy";
-    font-size: 18px;
-    width: 173px;
-    transform: rotate(-15deg);
-    text-transform: uppercase;
-    text-shadow: 6px 6px 4px rgba(0, 0, 1, 0.5);
-  }
-  
-  .CatelogueTemp3-MasterDiv .text-wrapper-4 {
-    color: #000000;
-    font-family: "Montserrat", sans-serif;
-    font-size: 8.1px;
-    font-weight: 700;
-    left: 12px;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 4px;
-    width: 84px;
-    height: 34px;
-  }
-  
-  .text-wrapper-10{
-    font-size: 17px;
-    font-weight: 900;
-  }
-  
-  .text-wrapper-12{
-    text-align: left;
-  }
-  
-  .tableContainer {
+/* Catalogue Grid */
+.catalogue-grid-wrapper {
+padding: 10px 16px;
   display: flex;
   flex-wrap: wrap;
-  column-gap: 30px;
-  row-gap: 31px;
-  }
-  
-  .Table {
-  width: 712px;
-  background-color: #8b181a;
-  height: 100vh;
-  border-radius: 10px;
-  padding-top: 10px; 
-  }
-  
-  .CatelogueTemp3-MasterDiv1 .overlap-group1 {
-    background-color: #ececec;
-    border-radius: 19.5px;
-    height: 150px;
-    position: relative;
-    left: 7px;
-    width: 110px;
-    padding:10px;
-  }
-  
-  .CatelogueTemp3-MasterDiv1 .img1 {
-    height: 75px;
-    left: 10px;
-    object-fit: cover;
-    position: absolute;
-    top: 66px;
-    width: 100px;
-  }
-  
-  .CatelogueTemp3tableBody1 {
-    display: flex;
-    background-color: #8b181a;
-    flex-wrap: wrap;
-    column-gap: 10px;
-    row-gap: 20px;
-    align-items: center;
-    justify-content: center;
-    padding:1.5rem;
-    border-radius: 15px;
-  }
-  
-  .CatelogueTemp3-MasterDiv1 {
-    font-family: 'Inconsolata', monospace; 
-    width: inherit;
-    background: radial-gradient(circle at center, #1A0001, #320000);
-  }
-  
-  .CatelogueTemp3-MasterDiv1 .page-header1, .page-header-space1 {
-    height: 100px;
-  }
-  
-  .CatelogueTemp3-MasterDiv1.page-footer1 {
-    position: fixed;
-    bottom: 0;
-    z-index: 1;
-    border-top: #1292EE solid 1px;
-    width: inherit;  
-    background:  #fff; 
-  }
-  
-  .CatelogueTemp3-MasterDiv1 .page-header1 {
-    position: fixed;
-    top: 0mm;
-    width: inherit; 
-    border-bottom: #1292EE solid 1px;
-    color: #000; 
-    background-image: radial-gradient(circle,);
-  
-  }
-  .CatelogueTemp3-MasterDiv1 .text-wrapper11 {
-    color: black;
-    font-family: "Montserrat", sans-serif;
-    font-size: 7px;
-    font-weight: 800;
-    left: 42px;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 97px;
-  }
-  .CatelogueTemp3-MasterDiv1 .overlap-group1 {
-    background-color: #ececec;
-    border-radius: 19.5px;
-    height: 125px;
-    position: relative;
-    left: 7px;
-    width: 105px;
-  }
-  .CatelogueTemp3-MasterDiv1 .text-wrapper1 {
-  color: white;
-  font-family: "Montserrat", sans-serif;
-  font-size: 12px;
-  font-weight: 700;
-  left: 33px;
-  letter-spacing: 0;
-  line-height: normal;
-  position: absolute;
-  top: 120px;
-  border-radius: 60px;
-  height: 40px;
-  width: 41px;
-  background: red;
-  text-align: right;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.catalogue-item {
+  display: flex;
+  flex-direction: column;
   align-items: center;
+  background-color: #fff;
+  border-radius: 16px;
+  padding: 5px;
+  height: auto;
+  position: relative;
+    height: 100px;
+  width: 100px;
+  /* Prevent splitting across pages */
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
+
+/* Product Name */
+.product-name {
+  font-size: 12px;
+  font-weight: 600;
+  text-align: center;
+}
+
+/* Product Logo */
+.product-logo {
+  width: 50px;
+  height: 40px;
+  object-fit: cover;
+  margin: 0.2rem 0;
+}
+
+/* Product Price */
+.product-price {
+  font-size: 12px;
+  font-weight: 600;
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  min-width: 35px;
+  width: max-content;
+  height: 35px;
+  background-color: red;
+  border-radius: 20px;
+  color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.1rem;
-  }
-  
-  .CatelogueTemp3-MasterDiv1 .text-wrapper-41 {
-    color: #000000;
-    font-family: "Montserrat", sans-serif;
-    font-size: 10px;
-    font-weight: 800;
-    left: 6px;
-    letter-spacing: 0;
-    line-height: normal;
-    position: absolute;
-    top: 4px;
-    width: 90px;
-    height: 60px;
-    overflow: hidden;
-    text-align: center;
-  }
-  
-  
-  </style>`;
-
-  const CatLog4 = `<style>
-
-  @page {
-    size: A4;
-    margin: 5cm;
-  }
-  
-  @media print {
-    body {
-      margin: 0;
-    }
-  
-    .page {
-      page-break-before: always;
-    }
-  } 
-  
-  page[size="A4"] {
-  background: #F5F6F7;
-  display: block;
-  margin: 0 auto;
-  margin-bottom: 0.5cm;
-  border: 1.25cm solid #F5F6F7; 
-  }
-  
-  @media print {
-  body, page[size="A4"] {
-    margin: 0;
-    box-shadow: 0;
-  }
-  }
-  
-  
-  
-  .PrintA4Style .page-footer {
-  bottom: 0;
-  z-index: 1;
-  border-top: #1292EE solid 1px;
-  width: inherit;  
-  background:  #fff; /* for demo */
-  }
-  
-  .PrintA4Style .page-header {
-  top: 0;
-  width: inherit; 
-  border-bottom: #1292EE solid 1px;
-  background-color: #1292EE;  
-  color: #ffffff; 
-  }
-  
-  .page {
-  page-break-after: always;
-  }
-  
-  tfoot {
-    display: table-footer-group;
-  }
+  padding: 0 0.3rem;
+}
 
+/* Print Styles */
+@media print {
   body {
     margin: 0;
+    font-size: 12px;
   }
+
+  .catlog-container {
+    padding: 0;
   }
-  
-  .print-container {
-  margin: auto;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  page-break-before: always;
+
+  .catalogue-item {
+    break-inside: avoid;
+    page-break-inside: avoid;
   }
-  
-  .a4 {
-  width: 210mm;
-  height: 297mm;
+
+  .catalogue-grid-wrapper {
+  padding: 10px 16px;
+    display: flex !important;
+    flex-wrap: wrap !important;
+    justify-content: center !important;
+    gap: 0.5rem;
   }
-  
-  .a4-landscape {
-  width: 297mm;
-  height: 210mm;
+
+  .branch-item {
+    page-break-inside: avoid;
   }
-  
-  .a5 {
-  width: 148mm;
-  height: 210mm;
-  }
-  
-  .a5-landscape {
-  width: 210mm;
-  height: 148mm;
-  }
-  
-  .A4TablePrint table {
-  border-collapse: collapse;
-  width: 100%;
-  }
-  
-  
-  .A4TablePrint  th { 
-  font-size: 12px;  
-  padding: 4px;
-  }
-  
-  .A4TablePrint  td{
-  font-size: 14px; 
-  } 
-  
-  .A4TablePrint tr:nth-child(even) {
-  background-color: #f3f3f3;  
-  }
-  
-  
-  
-  .A4TablePrint-print-tableMaster{
-  display: flex;
-  justify-content:center
-  }
-  
-  
-  
-  .A4TablePrint-print-table {
-  width: 100%;
-    border-collapse: collapse;
-    margin:5px 0px;  
-  
-  }
-  
-  .A4TablePrint-print-table th, .A4TablePrint-print-table td {
-  
-  border: 1px solid #000;
-  padding:2px 6px;
-  border-collapse: collapse; 
-  font-size: 11px;
-  font-weight:600;
-  }
-  
-  .A4TablePrint-print-table th {
-  background-color: #f2f2f2;
-  padding:5px 5px;
-  font-size: 14px;
-  font-weight:600;
-  }
-  
-    table.report-container {
-      page-break-after:always;
-    }
-    thead.report-header {
-      display:table-header-group;
-    }
-    tfoot.report-footer {
-      display:table-footer-group;
-    } 
-    
-    .page-header{
-      height: 150px;
-       background-image: linear-gradient(to right, #252a69, #016ab6);
-    }
-    
-    .page-footer {
-      position: fixed;
-      bottom: 0;
-      z-index: 1;
-      border-top: #1292EE solid 1px;
-      width: inherit;  
-       background-image: linear-gradient(to right, #252a69, #016ab6) !important;
-    }
-    .CTemplate4MasterDiv {
-    background-image: linear-gradient(to right, #252a69, #016ab6);
-    width: 100%;
 }
-    .content-section{
-    background-image: linear-gradient(to right, #252a69, #016ab6);
-    }
-    .page-header {
-      position: fixed;
-      top: 0mm;
-      width: inherit; 
-      border-bottom: #1292EE solid 1px;
-      background-color: #1292EE;  
-      color: #000000; 
-    }
-    
-    .page {
-      page-break-after: always;
-    }
-    
-    
-    .PrintA4Style .page-footer {
-      position: fixed;
-      bottom: 0;
-      z-index: 1;
-      border-top: #1292EE solid 1px;
-      width: inherit;  
-      background-image: linear-gradient(to right, #252a69, #016ab6) !important;
-    }
-    
-    
-    .PrintA4Style .page-header {
-      position: fixed;
-      top: 0mm;
-      width: inherit; 
-      border-bottom: #1292EE solid 1px;
-      background-color: #1292EE;  
-      color: #ffffff; 
-    }
+ </style>`;
+
+  const CatLog4 = `<style>
+/* Page Setup */
+@page {
+  size: A4;
+  margin: 0;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+/* Main Container */
+.catalogue-template-4 {
+  background-image: linear-gradient(to right, #252a69, #016ab6);
+  width: 100%;
+}
+
+/* Page Structure */
+.catalogue-page {
+  position: relative;
+  min-height: 297mm;
+  width: 210mm;
+  display: flex;
+  flex-direction: column;
+  page-break-after: always;
+  background-image: linear-gradient(to right, #252a69, #016ab6);
+}
+
+.catalogue-page:last-child {
+  page-break-after: auto;
+}
+
+/* Header */
+.page-header {
+  position: relative;
+  width: 100%;
+  height: 150px;
+  background-image: linear-gradient(to right, #252a69, #016ab6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  flex-shrink: 0;
+}
+
+.header-image {
+  width: 100%;
+  height: auto;
+  max-height: 120px;
+  object-fit: contain;
+}
+
+.header-offer-text {
+  position: absolute;
+  bottom: 10px;
+  color: #fce400;
+  font-size: 25px;
+  font-weight: 600;
+  text-align: center;
+  width: 100%;
+}
+
+.offer-percentage {
+  background-color: #fce400;
+  color: #184d90;
+  padding: 0.3rem 0.8rem;
+  border-radius: 5px;
+  margin: 0 0.3rem;
+}
+
+/* Content Section */
+.content-section-4 {
+  flex: 1;
+   width: 100vw;
+  padding: 2rem 1 .5rem;
+  background-image: linear-gradient(to right, #252a69, #016ab6);
+  display: flex;
+  align-items: flex-start;
+}
+
+/* Product Grid - 5x5 */
+.product-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  width: 100%;
+  justify-content: center;
+}
+
+/* Product Card */
+.product-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 130px;
+  height: 140px;
+  background-color: #fff;
+  border-radius: 8px;
+  overflow: visible;
+}
+
+.product-image {
+  width: 50px;
+  height: 40px;
+  object-fit: cover;
+  margin-top: 10px;
+}
+
+.product-name {
+  font-size: 12px;
+  font-weight: 600;
+  text-align: center;
+  padding: 0 5px;
+  margin-top: 5px;
+  color: #000;
+  line-height: 1.2;
+  max-height: 30px;
+  overflow: hidden;
+}
+
+.product-price {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 2rem;
+  background-color: #fce400;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 0 0 8px 8px;
+  color: #000;
+}
+
+.product-offer {
+  position: absolute;
+  top: -7px;
+  right: -7px;
+  width: 3rem;
+  height: 3rem;
+  background-color: #bf2523;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 10px;
+  font-weight: 600;
+  color: #fff;
+  padding: 3px;
+  line-height: 1.1;
+}
+
+/* Footer */
+.page-footer {
+  width: 100%;
+  min-height: 100px;
+  background-image: linear-gradient(to right, #252a69, #016ab6);
+  border-top: 1px solid #1292EE;
+  padding: 1rem;
+  flex-shrink: 0;
+}
+
+.footer-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.footer-branch-name {
+  font-size: 16px;
+  font-weight: 700;
+  color: #fff;
+  margin: 0;
+}
+
+.footer-info-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: flex-end;
+  width: 100%;
+}
+
+.footer-address,
+.footer-phone {
+  font-size: 9px;
+  background-color: #252a69;
+  color: #fff;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.footer-phone {
+  font-weight: 600;
+}
+
+/* Print Styles */
+@media print {
+  body {
+    margin: 0;
+    padding: 0;
+  }
   
-    .CTemplate4Footer {
-      position: fixed;
-      bottom: 0;
-      width: inherit; 
-      background:  rgb(223, 223, 223); /* for demo */
-    }
-    
-    .CTemplate4MasterDiv {
-      background-image: linear-gradient(to right, #252a69, #016ab6);
-    }
-    
-    .CTemplate4Header {
-      width: inherit;
-      padding: 0rem 0rem 0rem 1rem;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      position:relative;
-    }
-    
-    .CTemplate4SubHeader {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: '0.5rem'
-    }
-    
-    .CTemplate4Line {
-      width: 100%;
-      background-color: #fce400;
-    }
-    
-    .CTemplate4HeaderText1 {
-      color: #fce400;
-      display: flex;
-      flex-direction: row;
-      gap: 0.2rem;
-    }
-    
-    .CTemplate4HeaderText1sub {
-      color: #fce400;
-      width: 27%;
-      font-size: 20px;
-      display: flex;
-      justify-content: center;
-      text-align: center;
-    }
-    
-    .CTemplate4HeaderText2 {
-      color: #fce400;
-      margin: 0rem 0.5rem;
-      font-size: 25px;
-      font-weight: 600;
-    }
-    
-    .CTemplate4persent {
-      padding: 0.5rem;
-      margin: 0rem 0.5rem;
-      background-color: #fce400;
-      border-radius: 10px;
-      color: #184d90;
-    }
-    
-    .CTemplate4CardMasterDiv {
-      width: 6rem;
-      height: 165px;
-      margin: 1rem 0rem;
-      border-radius: 10px;
-      gap: '0.2rem';
-      position: relative;
-    }
-    
-    .CTemplate4CardContent {
-      width: 7rem;
-      background-color: #fff;
-      color: #000;
-      font-size: 14px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      margin-bottom: 0.2rem;
-      border-radius: 10px;
-      padding: 5px;
-    }
-    
-    .CTemplate4Pricing {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      height: 35px;
-      background-color: #fce400;
-      border-radius: 0px 18px 0px 10px;
-      font-size: 12px;
-      padding: 5px;
-      font-weight: 700;
-      text-align: center;
-      padding-right: 6rem;
-      font-family: 'Montserrat', sans-serif;
-    }
-    
-    .CTemplate4Offer {
-      background-color: #bf2523;
-      position: absolute;
-      width: 60px;
-      left: 3rem;
-      height: 60px;
-      text-align: center;
-      border-radius: 50%;
-      padding: 0.6rem;
-      font-weight: 700;
-      color: #fce400;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: center;
-      bottom: -45px;
-      font-family: 'Montserrat', sans-serif;
-      font-size: 15px;
-    }
-    
-    .CTemplate4ProductImage {
-      width: 90px;
-      height: 90px;
-    }
-    
-    .CTemplate4CardContainer {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-      gap: 2.7rem;
-      padding: 0rem 0rem 4rem 0rem;
-    }
-    .table-header
-    {
-      width:100%;
-      height:125px;
-    }
-    
-    .CTemplate4Fotter {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      gap: 0.5rem;
-      width: 100%;
-      height: 100px;
-      background-color: #fff;
-    }
-    
-    
-    .CTemplate4FotterAddress {
-      padding: 1rem;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background-image: linear-gradient(to right, #252a69, #016ab6);
-      width: 14rem;
-      height: 2.5rem;
-      border-radius: 0.2rem;
-    }
-    
-    .CTemplate4Fotterphone {
-      background-color: #252a69;
-      width: 12rem;
-      height: 2rem;
-      border-radius: 0.2rem;
-      color: #fff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 1rem;
-    }
-    
-    .CTemplate4Fotterinfo {
-      font-family: 'Montserrat', sans-serif;
-      display: flex;
-      gap: 1rem;
-      flex-direction: column;
-      padding: 0.5rem;
-      float: right;
-    }
-    
-    
-    .CTemplate4MasterDiv .PrintA4Style {
-      font-family: 'Inconsolata', monospace;
-      width: 100%;
-      background-color: #fff;
-    }
-      .container-main{
-          gap: 1.3rem !important;
-      }
-
-      .CTemplate4HeaderText2 {
-        color: #fce400;
-        margin: 0rem 0.5rem;
-        font-size: 25px !important;
-        font-weight: 600;
-        position: absolute;
-        top: 130px;
-        width: 100%;
-        margin: auto;
-      } 
-
-  </style>`;
+  .catalogue-template-4 {
+    background-image: linear-gradient(to right, #252a69, #016ab6) !important;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  
+  .catalogue-page {
+    page-break-after: always;
+    min-height: 297mm;
+    background-image: linear-gradient(to right, #252a69, #016ab6) !important;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  
+  .catalogue-page:last-child {
+    page-break-after: auto;
+  }
+  
+  .page-header,
+  .page-footer,
+  .content-section-4 {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  
+  .content-section-4 {
+    background-image: linear-gradient(to right, #252a69, #016ab6) !important;
+  }
+}
+</style>`;
 
   const CatLog5 = `<style>
   
@@ -3344,400 +2617,282 @@ font-weight:600;
   </style>`;
 
   const CatLog6 = `<style>
+/* Page Setup */
+@page {
+  size: A4;
+  margin: 0;
+}
 
+body {
+  margin: 0;
+  padding: 0;
+}
 
-  @page {
-    size: A4;
-    margin: 5cm;
-  }
-  
-  @media print {
-    body {
-      margin: 0;
-    }
-  
-    .page {
-      page-break-before: always;
-    }
-  } 
-  
-  page[size="A4"] {
-  background: #F5F6F7;
-  display: block;
-  margin: 0 auto;
-  margin-bottom: 0.5cm;
-  border: 1.25cm solid #F5F6F7; 
-  }
-  
-  @media print {
-  body, page[size="A4"] {
-    margin: 0;
-    box-shadow: 0;
-  }
-  }
-  
+/* Main Container */
+.catalogue-template-4 {
+  background-image: linear-gradient(to right, #252a69, #016ab6);
+  width: 100%;
+}
 
-   .container-main{
-          gap: 1.29rem !important;
-      }
-  
-  .PrintA4Style .page-footer {
-  bottom: 0;
-  z-index: 1;
-  border-top: #1292EE solid 1px;
-  width: inherit;  
-  background-image: linear-gradient(to right, #252a69, #016ab6) !important;
-  }
-  
-  .PrintA4Style .page-header {
-  top: 0mm;
-  width: inherit; 
-  border-bottom: #1292EE solid 1px;
-  background-color: #1292EE;  
-  color: #ffffff; 
-  }
-  
-  .page {
+/* Page Structure */
+.catalogue-page {
+  position: relative;
+  min-height: 297mm;
+  width: 210mm;
+  display: flex;
+  flex-direction: column;
   page-break-after: always;
-  }
-  
-  tfoot {
-    display: table-footer-group;
-  }
+  background-image: linear-gradient(to right, #252a69, #016ab6);
+}
 
+.catalogue-page:last-child {
+  page-break-after: auto;
+}
+
+/* Header */
+.page-header {
+  position: relative;
+  width: 100%;
+  height: 150px;
+  background-image: linear-gradient(to right, #252a69, #016ab6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  flex-shrink: 0;
+}
+
+.header-image {
+  width: 100%;
+  height: auto;
+  max-height: 120px;
+  object-fit: contain;
+}
+
+.header-offer-text {
+  position: absolute;
+  bottom: 10px;
+  color: #fce400;
+  font-size: 25px;
+  font-weight: 600;
+  text-align: center;
+  width: 100%;
+}
+
+.offer-percentage {
+  background-color: #fce400;
+  color: #184d90;
+  padding: 0.3rem 0.8rem;
+  border-radius: 5px;
+  margin: 0 0.3rem;
+}
+
+/* Content Section */
+.content-section-4 {
+  flex: 1;
+   width: 100vw;
+  padding: 2rem 1 .5rem;
+  background-image: linear-gradient(to right, #252a69, #016ab6);
+  display: flex;
+  align-items: flex-start;
+}
+
+/* Product Grid - 5x5 */
+.product-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.3rem;
+  width: 100%;
+  justify-content: center;
+}
+
+/* Product Card */
+.product-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 120px;
+  height: 140px;
+  background-color: #fff;
+  border-radius: 8px;
+  overflow: visible;
+}
+
+.product-image {
+  width: 50px;
+  height: 40px;
+  object-fit: cover;
+  margin-top: 10px;
+}
+
+.product-name {
+  font-size: 12px;
+  font-weight: 600;
+  text-align: center;
+  padding: 0 5px;
+  margin-top: 5px;
+  color: #000;
+  line-height: 1.2;
+  max-height: 30px;
+  overflow: hidden;
+}
+
+.product-price {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 2rem;
+  background-color: #fce400;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 0 0 8px 8px;
+  color: #000;
+}
+
+.product-offer {
+  position: absolute;
+  top: -7px;
+  right: -7px;
+  width: 3rem;
+  height: 3rem;
+  background-color: #bf2523;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 10px;
+  font-weight: 600;
+  color: #fff;
+  padding: 3px;
+  line-height: 1.1;
+}
+
+/* Footer */
+.page-footer {
+  width: 100%;
+  min-height: 100px;
+  background-image: linear-gradient(to right, #252a69, #016ab6);
+  border-top: 1px solid #1292EE;
+  padding: 1rem;
+  flex-shrink: 0;
+}
+
+.footer-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.footer-branch-name {
+  font-size: 16px;
+  font-weight: 700;
+  color: #fff;
+  margin: 0;
+}
+
+.footer-info-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: flex-end;
+  width: 100%;
+}
+
+.footer-address,
+.footer-phone {
+  font-size: 9px;
+  background-color: #252a69;
+  color: #fff;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.footer-phone {
+  font-weight: 600;
+}
+
+/* Print Styles */
+@media print {
   body {
     margin: 0;
-  }
+    padding: 0;
   }
   
-  .print-container {
-  margin: auto;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  page-break-before: always;
+  .catalogue-template-4 {
+    background-image: linear-gradient(to right, #252a69, #016ab6) !important;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
   }
   
-  .a4 {
-  width: 210mm;
-  height: 297mm;
+  .catalogue-page {
+    page-break-after: always;
+    min-height: 297mm;
+    background-image: linear-gradient(to right, #252a69, #016ab6) !important;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
   }
   
-  .a4-landscape {
-  width: 297mm;
-  height: 210mm;
+  .catalogue-page:last-child {
+    page-break-after: auto;
   }
   
-  .a5 {
-  width: 148mm;
-  height: 210mm;
+  .page-header,
+  .page-footer,
+  .content-section-4 {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
   }
   
-  .a5-landscape {
-  width: 210mm;
-  height: 148mm;
+  .content-section-4 {
+    background-image: linear-gradient(to right, #252a69, #016ab6) !important;
   }
-  
-  .A4TablePrint table {
-  border-collapse: collapse;
-  width: 100%;
-  }
-  
-  
-  .A4TablePrint  th { 
-  font-size: 12px;  
-  padding: 4px;
-  }
-  
-  .A4TablePrint  td{
-  font-size: 14px; 
-  } 
-  
-  .A4TablePrint tr:nth-child(even) {
-  background-color: #f3f3f3;  
-  }
-  
-  
-  
-  .A4TablePrint-print-tableMaster{
-  display: flex;
-  justify-content:center
-  }
-  
-  
-  
-  .A4TablePrint-print-table {
-  width: 100%;
-    border-collapse: collapse;
-    margin:5px 0px;  
-  
-  }
-  
-  .A4TablePrint-print-table th, .A4TablePrint-print-table td {
-  
-  border: 1px solid #000;
-  padding:2px 6px;
-  border-collapse: collapse; 
-  font-size: 11px;
-  font-weight:600;
-  }
-  
-  .A4TablePrint-print-table th {
-  background-color: #f2f2f2;
-  padding:5px 5px;
-  font-size: 14px;
-  font-weight:600;
-  }
-  
-    table.report-container {
-      page-break-after:always;
-    }
-    thead.report-header {
-      display:table-header-group;
-    }
-    tfoot.report-footer {
-      display:table-footer-group;
-    } 
-    
-    .page-header{
-      height: 150px;
-    }
-    
-    .page-footer {
-      position: fixed;
-      bottom: 0;
-      z-index: 1;
-      border-top: #1292EE solid 1px;
-      width: inherit;  
-      background-image: linear-gradient(to right, #252a69, #016ab6) !important; /* for demo */
-    }
-    
-    .page-header {
-      position: fixed;
-      top: 0mm;
-      width: inherit; 
-      border-bottom: #1292EE solid 1px;
-      background-color: #1292EE;  
-      color: #000000; 
-    }
-    
-    .page {
-      page-break-after: always;
-    }
-    
-    
-    .PrintA4Style .page-footer {
-      position: fixed;
-      bottom: 0;
-      z-index: 1;
-      border-top: #1292EE solid 1px;
-      width: inherit;  
-      background-image: linear-gradient(to right, #252a69, #016ab6) !important;
-    }
-    
-    .PrintA4Style .page-header {
-      position: fixed;
-      top: 0mm;
-      width: inherit; 
-      border-bottom: #1292EE solid 1px;
-      background-color: #1292EE;  
-      color: #ffffff; 
-    }
-  
-    .CTemplate4Footer {
-      position: fixed;
-      bottom: 0;
-      width: inherit; 
-      background:  rgb(223, 223, 223); /* for demo */
-    }
-    
-    .CTemplate4MasterDiv {
-      background-image: linear-gradient(to right, #252a69, #016ab6) !important;
-    }
-    .content-section{
-          background-image: linear-gradient(to right, #252a69, #016ab6) !important;
+}
+</style>`;
 
+  // post Api  call
+  const postCatalogueData = async () => {
+    if (!selectedProductCatalogue?.ConfigId) {
+      message.error('Please select a template');
+      return;
     }
-    .CTemplate4Header {
-      width: inherit;
-      padding: 0rem 0rem 0rem 1rem;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      position:relative;
+    const baseData = {
+      AppId,
+      CompId,
+      BranchId,
+      CatalogType: selectedProductCatalogue?.ConfigId,
+      Products: cataloguedata?.map((prod) => ({
+        ProdId: prod.ProdId,
+        OfferId: prod.OfferDtl?.[0]?.OfferId || '',
+      })),
+    };
+
+    const data = editstate?.editMode
+      ? { ...baseData, UpdatedBy: UserId }
+      : { ...baseData, CreatedBy: UserId };
+
+    try {
+      const response = editstate?.editMode
+        ? await dispatch(putProductCatalogue(data)).unwrap()
+        : await dispatch(postProductCatalogue(data)).unwrap();
+
+      if (response?.data?.statusCode === 1) {
+        message.success(response?.data?.response);
+        await Print();
+        dispatch(changeCataloguedata());
+        navigate(`${subDirectory}setting/product-catalogue`);
+      } else {
+        message.error(response?.data?.response);
+      }
+    } catch (err) {
+      message.error('Something went wrong. Please try again.');
     }
-    
-    .CTemplate4SubHeader {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: '0.5rem'
-    }
-    
-    .CTemplate4Line {
-      width: 100%;
-      background-color: #fce400;
-    }
-    
-    .CTemplate4HeaderText1 {
-      color: #fce400;
-      display: flex;
-      flex-direction: row;
-      gap: 0.2rem;
-    }
-    
-    .CTemplate4HeaderText1sub {
-      color: #fce400;
-      width: 27%;
-      font-size: 20px;
-      display: flex;
-      justify-content: center;
-      text-align: center;
-    }
-    
-    .CTemplate4HeaderText2 {
-      color: #fce400;
-      margin: 0rem 0.5rem;
-      font-size: 25px;
-      font-weight: 600;
-    }
-    
-    .CTemplate4persent {
-      padding: 0.5rem;
-      margin: 0rem 0.5rem;
-      background-color: #fce400;
-      border-radius: 10px;
-      color: #184d90;
-    }
-    
-    .CTemplate4CardMasterDiv {
-      width: 6rem;
-      height: 165px;
-      margin: 1rem 0rem;
-      border-radius: 10px;
-      gap: '0.2rem';
-      position: relative;
-    }
-    
-    .CTemplate4CardContent {
-      width: 7rem;
-      background-color: #fff;
-      color: #000;
-      font-size: 14px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      margin-bottom: 0.2rem;
-      border-radius: 10px;
-      padding: 5px;
-    }
-    
-    .CTemplate4Pricing {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      height: 35px;
-      background-color: #fce400;
-      border-radius: 0px 18px 0px 10px;
-      font-size: 12px;
-      padding: 5px;
-      font-weight: 700;
-      text-align: center;
-      padding-right: 6rem;
-      font-family: 'Montserrat', sans-serif;
-    }
-    
-    .CTemplate4Offer {
-      background-color: #bf2523;
-      position: absolute;
-      width: 60px;
-      left: 3rem;
-      height: 60px;
-      text-align: center;
-      border-radius: 50%;
-      padding: 0.6rem;
-      font-weight: 700;
-      color: #fce400;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: center;
-      bottom: -45px;
-      font-family: 'Montserrat', sans-serif;
-      font-size: 15px;
-    }
-    
-    .CTemplate4ProductImage {
-      width: 90px;
-      height: 90px;
-    }
-    
-    .CTemplate4CardContainer {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-      gap: 2.7rem;
-      padding: 0rem 0rem 4rem 0rem;
-    }
-    .table-header
-    {
-      width:100%;
-      height:125px;
-    }
-    
-    .CTemplate4Fotter {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      gap: 0.5rem;
-      width: 100%;
-      height: 100px;
-      background-color: #fff;
-      background-image: linear-gradient(to right, #252a69, #016ab6) !important;
-    }
-    
-    
-    .CTemplate4FotterAddress {
-      padding: 1rem;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background-image: linear-gradient(to right, #252a69, #016ab6);
-      width: 14rem;
-      height: 2.5rem;
-      border-radius: 0.2rem;
-    }
-    
-    .CTemplate4Fotterphone {
-      background-color: #252a69;
-      width: 12rem;
-      height: 2rem;
-      border-radius: 0.2rem;
-      color: #fff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 1rem;
-    }
-    
-    .CTemplate4Fotterinfo {
-      font-family: 'Montserrat', sans-serif;
-      display: flex;
-      gap: 1rem;
-      flex-direction: column;
-      padding: 0.5rem;
-      float: right;
-    }
-    
-    
-    .CTemplate4MasterDiv .PrintA4Style {
-      font-family: 'Inconsolata', monospace;
-      width: 100%;
-      background-color: #fff;
-    }
-  </style>`;
+  };
 
   const Print = async () => {
     const StyleName = {
@@ -3758,14 +2913,25 @@ font-weight:600;
       'Catalogue 6': 'CatLog4',
     };
 
-    const StyleId = StyleIDs?.[selectedProductCatalogue];
-    const Style = StyleName?.[selectedProductCatalogue];
-
+    const StyleId = StyleIDs?.[selectedProductCatalogue?.ConfigName];
+    const Style = StyleName?.[selectedProductCatalogue?.ConfigName];
     await printDiv(StyleId, Style);
   };
 
-  const handleProductTypeDropDownChange = (e) => {
-    setselectedProductCatalogue(e);
+  const handleProductTypeDropDownChange = (selectedValue) => {
+    if (selectedValue) {
+      const selectedOption = Template.find(
+        (item) => item.ConfigId === selectedValue
+      );
+      if (selectedOption) {
+        setselectedProductCatalogue({
+          ConfigId: selectedOption.ConfigId,
+          ConfigName: selectedOption.ConfigName,
+        });
+      }
+    } else {
+      setselectedProductCatalogue(null);
+    }
   };
 
   return (
@@ -3800,14 +2966,14 @@ font-weight:600;
             >
               <DropDowns
                 options={Template?.map((option) => ({
-                  value: option?.ConfigName,
+                  value: option?.ConfigId,
                   label: option?.ConfigName,
                 }))}
                 label="Templates"
                 className="field-DropDown"
                 // isOnchanges={(editstate?.ProdType || SelectedProductType)?true:false}
                 onChangeFunction={(e) => handleProductTypeDropDownChange(e)}
-                valueData={selectedProductCatalogue}
+                valueData={selectedProductCatalogue?.ConfigName}
                 // disabled={(formType == "edit" && !editstate?.ProdTypeName=="Others" )? true : false}
               />
             </Form.Item>
@@ -3826,12 +2992,16 @@ font-weight:600;
               columns={columns}
               dataSource={tableDisplayData}
               pagination={{
-                onChange: handlePageChange,
-                defaultPageSize: 10,
+                // current: page,
+                // pageSize: pageSize,
+                // total: productCount,
                 showSizeChanger: false,
-                hideOnSinglePage: true,
+                onChange: handlePageChange,
               }}
               onChange={handleChange}
+              // defaultPageSize: 10,
+
+              // hideOnSinglePage: true,
             />
           </div>
 
@@ -3879,7 +3049,7 @@ font-weight:600;
         >
           <div style={{ transform: 'scale(1)' }}>
             {(() => {
-              switch (selectedProductCatalogue) {
+              switch (selectedProductCatalogue?.ConfigName) {
                 case 'Catalogue 1':
                   return <CatalogueTemplate1 />;
                 case 'Catalogue 2':
@@ -3916,13 +3086,14 @@ font-weight:600;
           color="901D77"
           icon={<ArrowRightOutlined />}
           htmlType={true}
-          handleSubmit={() => Print('Catlog')}
+          // handleSubmit={() => Print('Catlog')}
+          handleSubmit={() => postCatalogueData()}
           disabled={
             (data?.length == 0 || selectedProductCatalogue == undefined) &&
             addnewAccess
           }
         />
-        <div className="Catalogue-PrinterIcon-Container">
+        {/* <div className="Catalogue-PrinterIcon-Container">
           <div
             className="Catalogue-preview-icon"
             style={{ pointerEvents: addnewAccess ? 'none' : 'auto' }}
@@ -3941,16 +3112,12 @@ font-weight:600;
             </Tooltip>
 
             <img style={{ width: '30px', cursor: 'pointer' }} src={wp} />
-            {/* <img  style={{width:'30px',cursor:'pointer'}}src= {sms}/> */}
             <img
               style={{ height: '28px', width: '28px', cursor: 'pointer' }}
               src={mail}
             />
-            {/* <WhatsAppOutlined /> */}
-            {/* <MessageOutlined />
-                  <MailOutlined /> */}
           </div>
-        </div>
+        </div> */}
       </div>
     </>
   );