diy-template-components 0.2.73 → 0.2.74

package/build/index.es.js

@@ -338,6 +338,42 @@ const colorMixer = (hex1, weightage = 1, hex2 = colors.white) => {
   };
 };
 
+const solidBaseColors = {
+  white: '#FFFFFF',
+  blue: '#1676F3',
+  tertiaryblue: '#F4F9FF',
+  orange: '#FF9000',
+  tertiaryorange: '#FFF6EA',
+  pink: '#F72585',
+  tertiarypink: '#FEE9F3',
+  green: '#8ECE19',
+  tertiarygreen: '#F4FAEB',
+  violet: '#6269C9',
+  tertiaryviolet: '#F4F6FF',
+  red: '#F41828',
+  tertiaryred: '#FFF2F3',
+  maroon: '#9B2226',
+  tertiarymaroon: '#FFF0F0',
+  blue2: '#00ADE7',
+  tertiaryblue2: '#F2FCFF'
+};
+const generateTheme = theme => {
+  const generatedTheme = {
+    AccentColor: solidBaseColors[theme],
+    background1: solidBaseColors?.white,
+    background2: solidBaseColors['tertiary' + theme],
+    background3: solidBaseColors['tertiary' + theme],
+    ctaColor: solidBaseColors[theme],
+    CtaTextColor: solidBaseColors?.white,
+    icon: solidBaseColors[theme],
+    iconBg: solidBaseColors['tertiary' + theme],
+    stripBg: solidBaseColors[theme],
+    stripText: solidBaseColors?.white
+  };
+  console.log('generatedTheme', generatedTheme, theme);
+  return generatedTheme;
+};
+
 const buttonStyles = createUseStyles(theme => ({
   primary: {
     width: ({
@@ -350,13 +386,13 @@ const buttonStyles = createUseStyles(theme => ({
     textAlign: 'center',
     color: ({
       disabled
-    } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.palette?.background?.default,
+    } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : generateTheme('blue')?.CtaTextColor,
     background: ({
       disabled
-    } = {}) => disabled ? colorMixer(theme?.palette?.primary.main, 0.5).color : theme?.palette?.primary?.main,
+    } = {}) => disabled ? colorMixer(theme?.palette?.primary.main, 0.5).color : generateTheme('blue')?.ctaColor,
     border: ({
       disabled
-    } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${theme.palette.primary.main}`,
+    } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${generateTheme('blue')?.ctaColor}`,
     textDecoration: 'none',
     cursor: ({
       disabled
@@ -1912,20 +1948,99 @@ const palettes = {
   rust: rustPalette
 };
 
-function getTheme(colorTheme = 'blue', fontFamily = 'Arial') {
+const baseFactor = 8;
+const mobileMargin = {
+  tiny: baseFactor * 2,
+  small: baseFactor * 2,
+  regular: baseFactor * 3,
+  medium: baseFactor * 6
+};
+const margin = {
+  tiny: baseFactor * 4,
+  small: baseFactor * 4 * 2,
+  regular: baseFactor * 4 * 4,
+  medium: baseFactor * 4 * 6,
+  large: baseFactor * 4 * 8,
+  xLarge: baseFactor * 4 * 12
+};
+const mobilePadding = {
+  tiny: baseFactor * 2,
+  // 16px
+  small: baseFactor * 2,
+  //16px
+  regular: baseFactor * 3,
+  // 24px
+  medium: baseFactor * 6 // 48px
+};
+
+const padding = {
+  minute: baseFactor * 2,
+  // 16px
+  tiny: baseFactor * 4,
+  // 32px
+  small: baseFactor * 4 * 2,
+  // 64px
+  xSmall: baseFactor * 3 * 3,
+  // 72px
+  regular: baseFactor * 4 * 3,
+  // 96 px
+  medium: baseFactor * 4 * 4,
+  // 128 px
+  large: baseFactor * 4 * 5,
+  // 160px
+  xLarge: baseFactor * 4 * 6 // 192px
+};
+
+const fontSize = {
+  h1: 72,
+  h2: 56,
+  h3: 40,
+  h4: 32,
+  h5: 24,
+  h6: 20,
+  subHead: 16,
+  body: 14
+};
+const fontSizeMob = {
+  h1: 40,
+  h2: 20,
+  h3: 32,
+  h4: 16,
+  h5: 16,
+  h6: 14,
+  subHead: 14,
+  body: 14
+};
+const fontWeight = {
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semiBold: 600,
+  bold: 700,
+  superBold: 900
+};
+
+function getTheme(colorTheme = 'blue', fontFamily = 'Arial', isMobile) {
   const palette = palettes[colorTheme] || palettes['blue'];
   const typography = {
-    fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`
+    fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
+    fontSize: isMobile ? fontSizeMob : fontSize,
+    fontWeight
   };
   const shape = {
     borderRadius
   };
+  const spacing = {
+    padding: isMobile ? mobilePadding : padding,
+    margin: isMobile ? mobileMargin : margin
+  };
   return {
     palette,
     shape,
     typography,
     shadows: generateShadows(palette),
-    borders: generateBorders(palette)
+    borders: generateBorders(palette),
+    spacing
   };
 }
 
@@ -2155,7 +2270,7 @@ const useSectionStyles$8 = createUseStyles(theme => ({
   partialBackground: {
     width: '61%',
     position: 'absolute',
-    backgroundColor: theme?.palette?.background?.primary,
+    backgroundColor: generateTheme('blue')?.background2,
     height: '100%',
     top: '0',
     left: '0'
@@ -2264,7 +2379,7 @@ const useCarouselStyles = createUseStyles(theme => ({
     '& .slick-dots': {
       bottom: ({
         buttonContainerClass
-      } = {}) => !!buttonContainerClass ? '20px' : 'unset',
+      } = {}) => !!buttonContainerClass ? '10px' : 'unset',
       position: ({
         buttonContainerClass
       } = {}) => !!buttonContainerClass ? 'absolute' : 'inherit',
@@ -2274,7 +2389,7 @@ const useCarouselStyles = createUseStyles(theme => ({
       textAlign: 'center',
       paddingBottom: '0',
       '& ul': {
-        margin: '0',
+        margin: theme.spacing.margin.regular,
         padding: '0',
         '& li': {
           width: 'unset',
@@ -2298,7 +2413,7 @@ const useCarouselStyles = createUseStyles(theme => ({
     display: 'flex',
     gap: '20px',
     justifyContent: 'center',
-    marginTop: '40px'
+    marginTop: theme.spacing.margin.tiny
   },
   dots: {
     width: '4px',
@@ -2315,6 +2430,15 @@ const useCarouselStyles = createUseStyles(theme => ({
     background: ({
       inverted
     } = {}) => !!inverted ? theme?.palette?.font?.invertedDefault : theme.palette.primary.main
+  },
+  '@media screen and (max-width: 767px)': {
+    sliderClass: {
+      '& .slick-dots': {
+        '& ul': {
+          margin: '0px'
+        }
+      }
+    }
   }
 }));
 
@@ -2341,7 +2465,7 @@ const useArrowButtonStyles = createUseStyles(theme => ({
     height: sizeHandler,
     border: ({
       inverted
-    }) => `solid 1px ${inverted ? theme?.palette?.font?.invertedDefault : theme?.palette?.primary?.light}`,
+    }) => `solid 1px ${inverted ? theme?.palette?.font?.invertedDefault : generateTheme('blue')?.ctaColor}`,
     borderRadius: '50%',
     display: 'flex',
     justifyContent: 'center',
@@ -2363,7 +2487,7 @@ function ArrowButton(props) {
   }, /*#__PURE__*/React.createElement(Icon, {
     height: props.size === 'small' ? '12px' : '18px',
     name: "Angle",
-    color: props.inverted ? theme?.palette?.font?.invertedDefault : theme?.palette?.primary?.main,
+    color: props.inverted ? theme?.palette?.font?.invertedDefault : generateTheme('blue')?.ctaColor,
     inverted: true
   }));
 }
@@ -2557,7 +2681,9 @@ var index$l = /*#__PURE__*/Object.freeze({
 const useSectionStyles$7 = createUseStyles(theme => ({
   section: {
     width: '100%',
-    padding: '70px 0',
+    padding: ({
+      isMobile
+    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
     display: 'flex',
     justifyContent: 'center',
     flexDirection: 'column',
@@ -2566,14 +2692,15 @@ const useSectionStyles$7 = createUseStyles(theme => ({
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
-    },
-    '& h2,& h3': {
-      fontWeight: '500',
-      '& b,& strong': {
-        fontWeight: '700'
-      }
     }
+    // '& h2,& h3': {
+    //   fontWeight: '500',
+    //   '& b,& strong': {
+    //     fontWeight: '700'
+    //   }
+    // }
   },
+
   sectionContainer: {
     margin: '0 auto',
     maxWidth: ({
@@ -2582,16 +2709,18 @@ const useSectionStyles$7 = createUseStyles(theme => ({
   },
   subTitleHeading: {
     marginBottom: '8px',
-    fontSize: '16px',
+    fontSize: theme.typography.fontSize.subHead,
     color: theme?.palette?.font?.tertiary,
     alignItems: 'center',
     textAlign: 'center',
-    wordBreak: 'break-word'
+    wordBreak: 'break-word',
+    textTransform: 'uppercase'
   },
   heading: {
-    margin: '0',
-    fontSize: '72px',
+    marginBottom: theme.spacing.margin.tiny,
+    fontSize: theme.typography.fontSize.h2,
     color: theme?.palette?.font?.default,
+    fontWeight: theme.typography.fontWeight.bold,
     textAlign: 'center',
     wordBreak: 'break-word'
   },
@@ -2612,7 +2741,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
     borderRadius: theme?.shape?.borderRadius?.regular,
     overflow: 'hidden',
     minHeight: 200,
-    margin: '16px 0',
+    marginBottom: theme.spacing.margin.small,
     position: 'relative',
     '&:nth-child(2n)': {
       alignSelf: 'flex-end',
@@ -2620,7 +2749,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
         right: '0'
       },
       '& $contentText': {
-        marginRight: '200px'
+        marginRight: '170px'
       }
     },
     '&:nth-child(2n+1)': {
@@ -2629,7 +2758,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
         left: '0'
       },
       '& $contentText': {
-        marginLeft: '200px'
+        marginLeft: '170px'
       }
     },
     '&:nth-child(7n+1) $contentNumber': {
@@ -2663,42 +2792,31 @@ const useSectionStyles$7 = createUseStyles(theme => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    padding: '48px',
     height: '100%',
     color: theme?.palette?.font?.default,
-    width: '200px',
     wordBreak: 'break-word'
   },
   contentText: {
-    padding: '20px 0'
+    padding: theme.spacing.padding.tiny
   },
   contentHeading: {
     fontStyle: 'normal',
-    fontSize: '24px',
+    fontSize: theme.typography.fontSize.h5,
+    fontWeight: theme.typography.fontWeight.bold,
     lineHeight: '32px',
+    marginBottom: '8px',
     color: theme?.palette?.font?.default,
-    margin: '0 48px',
     wordBreak: 'break-word'
   },
   contentPara: {
     fontStyle: 'normal',
-    fontSize: '16px',
+    fontSize: theme.typography.fontSize.subHead,
     lineHeight: '32px',
     color: theme?.palette?.font?.primary,
-    margin: '20px 48px 0 48px',
     wordBreak: 'break-word'
   },
   '@media screen and (max-width: 767px)': {
-    section: {
-      padding: '70px 20px'
-    },
-    textContainer: {
-      padding: '20px',
-      width: '100%'
-    },
-    heading: {
-      fontSize: '24px',
-      margin: '4px 0 12px 0'
-    },
     contentContainer: {
       width: '100%'
     },
@@ -2706,36 +2824,31 @@ const useSectionStyles$7 = createUseStyles(theme => ({
       display: 'flex',
       flexDirection: 'column',
       borderRadius: theme.shape.borderRadius.large,
-      margin: '20px 0 10px 0',
       width: '100%',
       height: 'auto',
       '&:nth-child(2n)': {
         marginLeft: '0',
         '& $contentText': {
           marginRight: '0',
-          alignSelf: 'flex-start',
-          padding: '0'
+          alignSelf: 'flex-start'
+          // padding: '0'
         }
       },
+
       '&:nth-child(2n+1)': {
         marginRight: '0',
         '& $contentText': {
           marginLeft: '0',
-          alignSelf: 'flex-start',
-          padding: '0'
+          alignSelf: 'flex-start'
+          // padding: '0'
         }
       }
     },
+
     contentNumber: {
       width: '100%',
-      padding: '40px 0',
+      padding: '24px',
       position: 'static'
-    },
-    contentHeading: {
-      margin: '20px 20px 0 20px'
-    },
-    contentPara: {
-      margin: '16px 20px 24px 20px'
     }
   }
 }));
@@ -2746,10 +2859,12 @@ function List({
   const {
     layout: {
       containerWidth
-    }
+    },
+    isMobile
   } = useContext(PageContext);
   const classes = useSectionStyles$7({
-    containerWidth
+    containerWidth,
+    isMobile
   });
   const [nodeData] = sectionData.components;
   const getNumber = val => {
@@ -2766,7 +2881,7 @@ function List({
     dangerouslySetInnerHTML: {
       __html: nodeData.cardHeading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("h2", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: classes.heading
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.title?.refSetter,
@@ -2783,13 +2898,13 @@ function List({
       className: classes.contentNumber
     }, getNumber(ind + 1)), /*#__PURE__*/React.createElement("div", {
       className: classes.contentText
-    }, /*#__PURE__*/React.createElement("h3", {
+    }, /*#__PURE__*/React.createElement("div", {
       ref: dt?.contentHeading?.refSetter,
       className: classes.contentHeading,
       dangerouslySetInnerHTML: {
         __html: dt.contentHeading.metadata.value
       }
-    }), /*#__PURE__*/React.createElement("p", {
+    }), /*#__PURE__*/React.createElement("div", {
       ref: dt?.contentPara?.refSetter,
       className: classes.contentPara,
       dangerouslySetInnerHTML: {
@@ -2813,16 +2928,16 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
-    },
-    '& h2,& h3': {
-      fontWeight: '500',
-      '& b,& strong': {
-        fontWeight: '700'
-      }
     }
+    // '& h2,& h3': {
+    //   fontWeight: '500',
+    //   '& b,& strong': {
+    //     fontWeight: '700'
+    //   }
+    // }
   },
+
   sectionContainer: {
-    margin: '0 auto',
     width: '100%',
     // maxWidth: ({ containerWidth } = {}) => containerWidth,
     position: 'absolute',
@@ -2836,6 +2951,9 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     position: 'absolute',
     width: '100%'
   },
+  buttonClass: {
+    margin: `${theme.spacing.margin.tiny}px 0px`
+  },
   contentContainer: {
     // padding: '100px 0',
     // height: '100%',
@@ -2871,27 +2989,28 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     height: '100%'
   },
   textContainer: {
-    padding: '100px 0',
-    margin: '0 auto',
-    width: '80%'
+    padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+    // margin: `0px ${theme.spacing.padding.medium} 0px ${theme.spacing.padding.medium}`,
+    width: '100%'
   },
   subTitleHeading: {
     color: theme?.palette?.font?.invertedDefault,
     marginBottom: '8px',
-    fontSize: '16px',
+    fontSize: theme.typography.fontSize.subHead,
     wordBreak: 'break-word'
   },
   heading: {
     margin: '0',
-    fontSize: '62px',
+    fontSize: theme.typography.fontSize.h1,
     color: theme?.palette?.font?.invertedDefault,
     wordBreak: 'break-word'
   },
   description: {
-    margin: '40px 0',
+    margin: `${theme.spacing.margin.tiny}px 0px`,
     color: theme?.palette?.font?.invertedDefault,
     lineHeight: '24px',
-    wordBreak: 'break-word'
+    wordBreak: 'break-word',
+    fontSize: theme.typography.fontSize.subHead
   },
   sideBannerImage: {
     width: '100%',
@@ -2909,22 +3028,19 @@ const useSectionStyles$6 = createUseStyles(theme => ({
       justifyContent: 'center',
       padding: '0px'
     },
-    textContainer: {
-      padding: '20px 20px',
-      height: '100%',
-      width: '100%'
-      // backgroundColor: theme?.palette?.background?.primary
-    },
-
+    // textContainer: {
+    //   padding: '20px 20px',
+    //   height: '100%',
+    //   width: '100%'
+    //   // backgroundColor: theme?.palette?.background?.primary
+    // },
     subTitleHeading: {
       color: theme?.palette?.font?.tertiary
     },
     heading: {
-      fontSize: '40px',
       color: theme?.palette?.font?.default
     },
     description: {
-      margin: '16px 0',
       color: theme?.palette?.font?.primary
     },
     centerBgImageContainer: {
@@ -2991,12 +3107,14 @@ const Section$3 = ({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }) : null, nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React.createElement(Button, {
+  }) : null, nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React.createElement("div", {
+    className: classes.buttonClass
+  }, /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
     size: isMobile ? 'small' : 'medium'
-  })) : null), /*#__PURE__*/React.createElement("div", {
+  }))) : null), /*#__PURE__*/React.createElement("div", {
     className: classes?.centerBgImageContainer
   }, /*#__PURE__*/React.createElement(NextImageRenderer, {
     src: nodeData.image.metadata.value,
@@ -3036,17 +3154,18 @@ var index$j = /*#__PURE__*/Object.freeze({
 });
 
 const useSectionStyles$5 = createUseStyles(theme => {
+  console.log('sdkjfndkjsnfk', theme?.spacing?.padding?.large);
   return {
     section: {
-      paddingBottom: '70px',
+      paddingBottom: `${theme?.spacing?.padding?.regular}px`,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
       },
       '& h2,& h3': {
-        fontWeight: '500',
+        fontWeight: `${theme?.typography?.fontWeight?.medium}`,
         '& b,& strong': {
-          fontWeight: '700'
+          fontWeight: `${theme?.typography?.fontWeight?.bold}`
         }
       }
     },
@@ -3060,7 +3179,7 @@ const useSectionStyles$5 = createUseStyles(theme => {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      padding: '140px 70px 0'
+      padding: `${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px 0px ${theme?.spacing?.padding?.medium}px`
     },
     imageContainerDiv: {
       width: '50%',
@@ -3095,20 +3214,20 @@ const useSectionStyles$5 = createUseStyles(theme => {
       objectFit: 'cover'
     },
     textContainer: {
-      padding: '0 60px',
+      padding: `0 ${theme?.spacing?.padding?.xSmall}px`,
       textAlign: 'left',
       margin: '0 auto',
       width: '50%'
     },
     subTitleHeading: {
       marginBottom: '8px',
-      fontSize: '16px',
+      fontSize: `${theme?.typography?.fontSize?.subHead}px`,
       color: theme?.palette?.font?.tertiary,
       wordBreak: 'break-word'
     },
     heading: {
       margin: '0',
-      fontSize: '72px',
+      fontSize: `${theme?.typography?.fontSize?.h1}px`,
       color: theme?.palette?.font?.default,
       wordBreak: 'break-word'
     },
@@ -3123,9 +3242,9 @@ const useSectionStyles$5 = createUseStyles(theme => {
         padding: '0 0 40px'
       },
       centerData: {
-        flexDirection: 'column',
+        flexDirection: 'column-reverse',
         width: '100%',
-        padding: '0'
+        padding: `${theme?.spacing?.padding?.medium}px ${theme?.spacing?.padding?.regular}px`
       },
       imageContainer: {
         height: 'unset !important',
@@ -3145,11 +3264,11 @@ const useSectionStyles$5 = createUseStyles(theme => {
         height: 'unset !important'
       },
       textContainer: {
-        padding: '20px 20px',
+        padding: `${theme?.spacing?.padding?.regular}px 0px`,
         width: 'unset'
       },
       heading: {
-        fontSize: '40px'
+        fontSize: `${theme?.typography?.fontSize?.h3}px`
       },
       description: {
         margin: '16px 0'
@@ -3183,8 +3302,6 @@ function Section$2({
     ref: nodeData?.image?.refSetter,
     className: classes.sideBannerImage,
     sectionIndex: sectionIndex
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classes.imageBorder
   }))), /*#__PURE__*/React.createElement("div", {
     className: classes.textContainer
   }, /*#__PURE__*/React.createElement("div", {
@@ -3255,18 +3372,21 @@ const useSectionStyles$4 = createUseStyles(theme => ({
     width: '100%',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: '60px 70px',
+    padding: ({
+      isMobile
+    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
-    },
-    '& h2,& h3': {
-      fontWeight: '500',
-      '& b,& strong': {
-        fontWeight: '700'
-      }
     }
+    // '& h2,& h3': {
+    //   fontWeight: '500',
+    //   '& b,& strong': {
+    //     fontWeight: '700'
+    //   }
+    // }
   },
+
   newsLetterContainer: {
     margin: '0 auto',
     maxWidth: ({
@@ -3285,15 +3405,16 @@ const useSectionStyles$4 = createUseStyles(theme => ({
     backgroundColor: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.secondary,
     borderRadius: theme?.shape?.borderRadius?.regular,
-    padding: '40px 80px',
+    padding: theme.spacing.padding.small,
     position: 'relative'
   },
   cardHeading: {
-    fontSize: '56px',
+    fontSize: theme.typography.fontSize.h2,
+    fontWeight: theme.typography.fontWeight.bold,
     lineHeight: '71px',
     letterSpacing: '-3px',
     color: theme?.palette?.font?.secondary,
-    margin: '0 0 32px 0',
+    marginBottom: theme.spacing.padding.tiny,
     wordBreak: 'break-word'
   },
   contentContainer: {
@@ -3302,10 +3423,9 @@ const useSectionStyles$4 = createUseStyles(theme => ({
     justifyContent: 'space-between'
   },
   title: {
-    fontSize: '20px',
+    fontSize: theme.typography.fontSize.h6,
     lineHeight: '32px',
     color: theme?.palette?.font?.primary,
-    margin: '0 80px 0 0',
     width: 'calc(50% - 80px)',
     wordBreak: 'break-word'
   },
@@ -3343,42 +3463,44 @@ const useSectionStyles$4 = createUseStyles(theme => ({
     section: {
       display: 'flex',
       flexDirection: 'column',
-      alignItems: 'center',
-      padding: '30px 20px'
+      alignItems: 'center'
     },
     sectionContainer: {
-      padding: '30px 20px',
-      borderRadius: theme?.shape?.borderRadius?.large
+      borderRadius: theme?.shape?.borderRadius?.large,
+      textAlign: 'center',
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column'
     },
     partialBackground: {
       height: '150px'
     },
     title: {
       width: '100%',
-      margin: '0',
-      fontSize: '20px',
-      lineHeight: '32px'
+      lineHeight: '22px',
+      margin: '0px 0px 16px 0px'
     },
     cardHeading: {
-      fontSize: '24px',
       lineHeight: '32px',
       letterSpacing: '-1px',
-      marginBottom: '20px'
+      width: '50%',
+      lineHeight: 'normal'
     },
     contentContainer: {
       display: 'flex',
       flexDirection: 'column',
-      justifyContent: 'flex-start'
+      justifyContent: 'flex-start',
+      textAlign: 'center'
     },
     inputContainer: {
       display: 'block',
       width: '100%',
-      margin: '24px 16px 0 16px',
       position: 'initial'
     },
     btnContainer: {
       right: 'unset',
-      position: 'initial'
+      position: 'initial',
+      marginTop: '4px'
     }
   }
 }));
@@ -3523,7 +3645,8 @@ function SubscribeToNewsletter({
   } = useContext(PageContext);
   const [nodeData] = sectionData.components;
   const classes = useSectionStyles$4({
-    containerWidth
+    containerWidth,
+    isMobile
   });
   let formInitialValue = nodeData?.inputField?.metadata?.value;
   const [inputVal, setInputVal] = useState(formInitialValue);
@@ -3569,7 +3692,7 @@ function SubscribeToNewsletter({
     className: classes.partialBackground
   }), /*#__PURE__*/React.createElement("div", {
     className: classes.sectionContainer
-  }, /*#__PURE__*/React.createElement("h2", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: classes.cardHeading
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.cardHeading?.refSetter,
@@ -4105,20 +4228,23 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
     videoTestimonialSuperContainer: {
       display: 'flex',
       justifyContent: 'center',
-      padding: '70px',
+      padding: ({
+        isMobile
+      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
       '&, & *, & *:before, & *:after': {
-        fontFamily: theme?.typography?.fontFamily,
-        boxSizing: 'border-box'
-      },
-      '& h2,& h3': {
-        fontWeight: '500',
-        '& b,& strong': {
-          fontWeight: '700'
-        }
+        fontFamily: theme?.typography?.fontFamily
+        // boxSizing: 'border-box'
       }
+      // '& h2,& h3': {
+      //   fontWeight: '500',
+      //   '& b,& strong': {
+      //     fontWeight: '700'
+      //   }
+      // }
     },
+
     sectionContainer: {
-      margin: '0 auto',
+      // margin: '0 auto',
       maxWidth: ({
         containerWidth
       } = {}) => containerWidth
@@ -4129,29 +4255,28 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       fontFamily: theme?.typography?.fontFamily
     },
     videoTestimonialHeading: {
-      fontSize: '16px',
+      fontSize: theme.typography.fontSize.subHead,
       lineHeight: '20px',
       letterSpacing: '3px',
       textTransform: 'uppercase',
       color: theme.palette.font.tertiary,
-      wordBreak: 'break-word'
+      wordBreak: 'break-word',
+      marginBottom: '8px'
     },
     videoTestimonialTitle: {
-      fontSize: '56px',
-      lineHeight: '71px',
+      fontSize: theme.typography.fontSize.h1,
+      // lineHeight: '71px',
       letterSpacing: '-3px',
-      margin: '0',
+      fontWeight: theme.typography.fontWeight.bold,
+      marginBottom: theme.spacing.margin.tiny,
       color: theme.palette.font.default,
       wordBreak: 'break-word'
     },
-    videoCarouselContainer: {
-      marginTop: '16px'
-    },
     videoCarousel: {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'flex-start',
-      gap: '60px'
+      gap: theme.spacing.margin.small
     },
     iframeSuperContainer: {
       height: '100%',
@@ -4173,57 +4298,49 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
     videoDetails: {
       width: '100%',
       display: 'flex',
+      gap: '24px',
       flexDirection: 'column',
       alignItems: 'flex-start'
     },
     videoDetailsHeading: {
-      fontSize: '40px',
+      fontSize: theme.typography.fontSize.h3,
       lineHeight: '48px',
       margin: '0',
       letterSpacing: '-1px',
       wordBreak: 'break-word',
-      color: theme.palette.font.default
+      color: theme.palette.font.default,
+      fontWeight: theme.typography.fontWeight.bold
     },
     videoDetailsContent: {
-      fontSize: '16px',
+      fontSize: theme.typography.fontSize.subHead,
       lineHeight: '24px',
       wordBreak: 'break-word',
-      color: theme.palette.font.primary,
-      margin: '10px 0 20px'
+      color: theme.palette.font.primary
     },
     videoDetailsSubContent: {
-      fontSize: '16px',
+      fontSize: theme.typography.fontSize.subHead,
       lineHeight: '24px',
       margin: '0',
       color: theme.palette.font.primary,
       wordBreak: 'break-word'
     },
     '@media (max-width: 767px)': {
-      videoTestimonialSuperContainer: {
-        padding: '70px 10px 60px 20px'
-      },
       videoCarousel: {
-        flexDirection: 'column',
-        gap: '20px'
+        flexDirection: 'column'
       },
       videoCarouselContainer: {
-        height: 'max-content',
-        paddingRight: '10px'
+        height: 'max-content'
       },
       videoDetails: {
-        width: '100%'
+        width: '100%',
+        gap: '16px'
       },
       videoDetailsHeading: {
-        fontSize: '16px',
         lineHeight: '20px'
       },
       videoTestimonialTitle: {
-        fontSize: '24px',
         lineHeight: '36px',
         letterSpacing: '-1px'
-      },
-      videoDetailsContent: {
-        marginTop: '4px'
       }
     }
   };
@@ -4249,19 +4366,19 @@ const SingleVideoSlide$2 = props => {
     sectionIndex: props?.sectionIndex
   }))), /*#__PURE__*/React.createElement("div", {
     className: classes.videoDetails
-  }, /*#__PURE__*/React.createElement("h3", {
+  }, /*#__PURE__*/React.createElement("div", {
     ref: data?.videoTextHeading?.refSetter,
     className: classes.videoDetailsHeading,
     dangerouslySetInnerHTML: {
       __html: data.videoTextHeading.metadata.value
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), /*#__PURE__*/React.createElement("div", {
     ref: data?.videoTextContent?.refSetter,
     className: classes.videoDetailsContent,
     dangerouslySetInnerHTML: {
       __html: data.videoTextContent.metadata.value
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), /*#__PURE__*/React.createElement("div", {
     ref: data?.videoTextSubContent?.refSetter,
     className: classes.videoDetailsSubContent,
     dangerouslySetInnerHTML: {
@@ -4277,10 +4394,12 @@ function VideoTestimonial({
   const {
     layout: {
       containerWidth
-    }
+    },
+    isMobile
   } = useContext(PageContext);
   const classes = useVideoTestimonialStyles({
-    containerWidth
+    containerWidth,
+    isMobile
   });
   const [videoData] = sectionData.components;
   const Wrapper = videoData.videoCarousel.components.length > 1 ? Carousel : Fragment;
@@ -4297,7 +4416,7 @@ function VideoTestimonial({
     dangerouslySetInnerHTML: {
       __html: videoData.videoHeading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("h2", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: classes.videoTestimonialTitle
   }, /*#__PURE__*/React.createElement("span", {
     ref: videoData?.title?.refSetter,
@@ -4547,7 +4666,7 @@ var index$e = /*#__PURE__*/Object.freeze({
 const useSectionStyles$3 = createUseStyles(theme => ({
   section: {
     position: 'relative',
-    padding: '70px 0',
+    padding: `${theme?.spacing?.padding?.regular}px 0px ${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px`,
     backgroundColor: theme?.palette?.background?.default,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
@@ -4575,12 +4694,11 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     width: '100%'
   },
   content: {
-    position: 'relative',
-    margin: '0 70px'
+    position: 'relative'
   },
   subTitleHeading: {
     width: '100%',
-    fontSize: '16px',
+    fontSize: theme.typography.fontSize.subHead,
     color: theme?.palette?.font?.tertiary,
     textAlign: 'left',
     lineHeight: '20px',
@@ -4588,8 +4706,8 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     wordBreak: 'break-word'
   },
   heading: {
-    margin: '8px 0 20px',
-    fontSize: '56px',
+    margin: `8px 0 ${theme.spacing.margin.tiny}px`,
+    fontSize: theme.typography.fontSize.h2,
     width: '100%',
     lineHeight: '70px',
     color: theme?.palette?.font?.default,
@@ -4611,16 +4729,16 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     height: 'calc(100% - 12px)'
   },
   cardContent: {
-    padding: '32px',
+    padding: theme.spacing.padding.tiny,
     height: '100%',
     display: 'flex',
     flexDirection: 'column'
   },
   cardHeading: {
-    fontSize: '24px',
+    fontSize: theme.typography.fontSize.h5,
     lineHeight: '32px',
     color: theme?.palette?.font?.default,
-    margin: '32px 0 16px',
+    margin: `${theme.spacing.margin.tiny}px 0px`,
     wordBreak: 'break-word'
   },
   imageContainer: {
@@ -4633,7 +4751,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     background: theme?.palette?.background?.primary
   },
   cardPara: {
-    fontSize: '16px',
+    fontSize: theme.typography.fontSize.subHead,
     lineHeight: '24px',
     color: theme?.palette?.font?.primary,
     margin: '0',
@@ -4649,13 +4767,10 @@ const useSectionStyles$3 = createUseStyles(theme => ({
   '@media screen and (max-width: 767px)': {
     heading: {
       fontSize: '24px',
-      margin: '4px 0 12px',
+      margin: `4px 0 ${theme.spacing.margin.tiny}px`,
       lineHeight: '36px',
       padding: '0'
     },
-    content: {
-      margin: '0 20px'
-    },
     sliderContainer: {
       marginLeft: '-6px',
       marginRight: '-20px'
@@ -4670,12 +4785,6 @@ const useSectionStyles$3 = createUseStyles(theme => ({
         slidesToShow,
         cardsCount
       } = {}) => cardsCount > slidesToShow ? `6px 2px 6px 6px` : `6px 0 6px 0`
-    },
-    cardContent: {
-      padding: '20px'
-    },
-    cardHeading: {
-      margin: '14px 0'
     }
   }
 }));
@@ -4772,67 +4881,60 @@ var index$d = /*#__PURE__*/Object.freeze({
 
 const useSectionStyles$2 = createUseStyles(theme => ({
   section: {
-    padding: '70px',
+    padding: ({
+      isMobile
+    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
     backgroundColor: theme?.palette?.background?.default,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
-    },
-    '& h2,& h3': {
-      fontWeight: '500',
-      '& b,& strong': {
-        fontWeight: '700'
-      }
     }
+    // '& h2,& h3': {
+    //   fontWeight: '500',
+    //   '& b,& strong': {
+    //     fontWeight: '700'
+    //   }
+    // }
   },
+
   sectionContainer: {
-    margin: '0 auto',
     maxWidth: ({
       containerWidth
     } = {}) => containerWidth
   },
   subHeading: {
-    fontSize: '20px',
+    fontSize: theme.typography.fontSize.subHead,
     marginBottom: '8px',
     color: theme?.palette?.font?.tertiary,
-    wordBreak: 'break-word'
+    wordBreak: 'break-word',
+    textTransform: 'uppercase',
+    letterSpacing: '3px'
   },
   title: {
-    fontSize: '56px',
-    lineHeight: '70px',
+    fontSize: theme.typography.fontSize.h2,
+    fontWeight: theme.typography.fontWeight.bold,
+    lineHeight: 'normal',
     margin: '0',
     color: theme?.palette?.font?.default,
-    wordBreak: 'break-word'
+    wordBreak: 'break-word',
+    marginBottom: theme.spacing.margin.tiny
   },
   textContent: {
     display: 'grid',
     gridTemplateColumns: '1fr 1fr',
-    gap: '80px'
+    gap: '48px',
+    padding: '48px 0px'
   },
   textPara: {
-    margin: '20px 0 0 0',
     lineHeight: '24px',
     color: theme?.palette?.font?.primary,
-    wordBreak: 'break-word'
+    wordBreak: 'break-word',
+    fontSize: theme.typography.fontSize.subHead
   },
   '@media screen and (max-width: 767px)': {
-    section: {
-      padding: '60px 20px'
-    },
-    subHeading: {
-      fontSize: '16px',
-      lineHeight: '20px',
-      marginBottom: '4px'
-    },
-    title: {
-      fontSize: '24px',
-      lineHeight: '36px'
-    },
     textContent: {
-      display: 'block'
-    },
-    textPara: {
-      marginTop: '12px'
+      gap: '16px',
+      padding: '16px 0px'
     }
   }
 }));
@@ -4843,10 +4945,12 @@ const TextSection = ({
   const {
     layout: {
       containerWidth
-    }
+    },
+    isMobile
   } = useContext(PageContext);
   const classes = useSectionStyles$2({
-    containerWidth
+    containerWidth,
+    isMobile
   });
   const [nodeData] = sectionData.components;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("section", {
@@ -4869,13 +4973,13 @@ const TextSection = ({
     }
   })), /*#__PURE__*/React.createElement("div", {
     className: classes.textContent
-  }, /*#__PURE__*/React.createElement("p", {
+  }, /*#__PURE__*/React.createElement("div", {
     ref: nodeData?.textLeft?.refSetter,
     className: classes.textPara,
     dangerouslySetInnerHTML: {
       __html: nodeData.textLeft.metadata.value
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), /*#__PURE__*/React.createElement("div", {
     ref: nodeData?.textRight?.refSetter,
     className: classes.textPara,
     dangerouslySetInnerHTML: {
@@ -5050,64 +5154,73 @@ var index$b = /*#__PURE__*/Object.freeze({
 const useFaqListStyles = createUseStyles(theme => ({
   section: {
     width: '100%',
-    padding: '70px',
+    padding: ({
+      isMobile
+    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
     backgroundColor: theme?.palette?.background?.primary,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
-    },
-    '& h2,& h3': {
-      fontWeight: '500',
-      '& b,& strong': {
-        fontWeight: '700'
-      }
     }
+    // '& h2,& h3': {
+    //   fontWeight: '500',
+    //   '& b,& strong': {
+    //     fontWeight: '700'
+    //   }
+    // }
   },
+
   sectionContainer: {
-    margin: '0 auto',
     maxWidth: ({
       containerWidth
     } = {}) => containerWidth
   },
   sectionSubheading: {
     color: theme?.palette?.font.tertiary,
-    fontSize: '16px',
+    fontSize: theme.typography.fontSize.subHead,
     marginBottom: '8px',
     wordBreak: 'break-word'
   },
   sectionHeading: {
-    fontSize: '56px',
-    margin: '0 0 20px',
+    fontSize: theme.typography.fontSize.h2,
+    fontWeight: theme.typography.fontWeight.bold,
     wordBreak: 'break-word',
-    lineHeight: '71px'
+    marginBottom: `${theme.spacing.margin.tiny}px`
   },
   container: {
     boxShadow: theme?.shadows?.secondary,
     borderRadius: '8px',
-    backgroundColor: theme?.palette?.background?.default,
-    padding: '40px 60px 60px'
+    backgroundColor: theme?.palette?.background?.default
   },
   basicCardContainer: {
-    borderBottom: theme?.borders?.secondary
+    borderBottom: theme?.borders?.secondary,
+    padding: `${theme.spacing.padding.tiny}px`
+  },
+  innerContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: ({
+      isSelected
+    } = {}) => isSelected ? '16px' : '0'
+  },
+  arrowButton: {
+    marginLeft: theme.spacing.margin.tiny
   },
   header: {
     display: 'flex',
     justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: '20px 0'
+    alignItems: 'center'
   },
   title: {
     color: theme?.palette?.font.default,
-    fontSize: '24px',
+    fontSize: theme.typography.fontSize.h5,
+    fontWeight: theme.typography.fontWeight.bold,
     margin: '0',
     wordBreak: 'break-word'
   },
   content: {
-    margin: ({
-      isSelected
-    } = {}) => isSelected ? '0 0 20px 0' : '0',
     color: theme?.palette?.font.primary,
-    fontSize: '16px',
+    fontSize: theme.typography.fontSize.subHead,
     lineHeight: '24px',
     maxHeight: ({
       isSelected
@@ -5116,28 +5229,12 @@ const useFaqListStyles = createUseStyles(theme => ({
     overflow: 'hidden'
   },
   '@media screen and (max-width: 767px)': {
-    section: {
-      padding: '60px 20px'
-    },
-    sectionHeading: {
-      fontSize: '36px'
-    },
-    header: {
-      padding: '20px 0'
-    },
-    title: {
-      fontSize: '18px'
-    },
     content: {
       lineHeight: '20px'
     },
-    container: {
-      padding: '0 20px'
-    },
     basicCardContainer: {
       '&:last-child': {
-        borderBottom: 'none',
-        paddingBottom: '1px'
+        borderBottom: 'none'
       }
     }
   }
@@ -5150,11 +5247,13 @@ const FAQListing = ({
   const {
     layout: {
       containerWidth
-    }
+    },
+    isMobile
   } = useContext(PageContext);
   const classes = useFaqListStyles({
     selectedIndex,
-    containerWidth
+    containerWidth,
+    isMobile
   });
   const [nodeData] = sectionData.components;
   return /*#__PURE__*/React.createElement("section", {
@@ -5168,7 +5267,7 @@ const FAQListing = ({
     dangerouslySetInnerHTML: {
       __html: nodeData.subheading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("h2", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: classes.sectionHeading
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.title?.refSetter,
@@ -5197,7 +5296,8 @@ const Accordion = ({
   return /*#__PURE__*/React.createElement("div", {
     className: classes.basicCardContainer
   }, /*#__PURE__*/React.createElement("div", {
-    onClick: onClick
+    onClick: onClick,
+    className: classes.innerContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.header
   }, /*#__PURE__*/React.createElement("h3", {
@@ -5206,7 +5306,9 @@ const Accordion = ({
     dangerouslySetInnerHTML: {
       __html: item.question.metadata.value
     }
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ArrowButton, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classes.arrowButton
+  }, /*#__PURE__*/React.createElement(ArrowButton, {
     down: isSelected,
     up: !isSelected,
     size: "small"
@@ -5226,19 +5328,22 @@ var index$a = /*#__PURE__*/Object.freeze({
 
 const useTextGridStyles = createUseStyles(theme => ({
   section: {
-    padding: '70px',
+    padding: ({
+      isMobile
+    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
     backgroundColor: theme?.palette?.background?.primary,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
-    },
-    '& h2,& h3': {
-      fontWeight: '500',
-      '& b,& strong': {
-        fontWeight: '700'
-      }
     }
+    // '& h2,& h3': {
+    //   fontWeight: '500',
+    //   '& b,& strong': {
+    //     fontWeight: '700'
+    //   }
+    // }
   },
+
   sectionContainer: {
     margin: '0 auto',
     maxWidth: ({
@@ -5247,24 +5352,27 @@ const useTextGridStyles = createUseStyles(theme => ({
   },
   subheading: {
     color: theme?.palette?.font.tertiary,
-    fontSize: '16px',
+    fontSize: theme.typography.fontSize.subHead,
     lineHeight: '20px',
     letterSpacing: '3px',
-    wordBreak: 'break-word'
+    wordBreak: 'break-word',
+    textTransform: 'uppercase',
+    marginBottom: '8px'
   },
   heading: {
-    fontSize: '56px',
-    lineHeight: '70px',
+    fontSize: theme.typography.fontSize.h2,
+    lineHeight: 'normal',
+    fontWeight: theme.typography.fontWeight.bold,
     letterSpacing: '-3px',
-    margin: '8px 0 16px',
+    marginBottom: theme.spacing.margin.tiny,
     wordBreak: 'break-word'
   },
   sliderContainer: {
     margin: '0 -10px'
   },
   node: {
-    margin: '6px 10px',
-    padding: '40px',
+    margin: '0 16px',
+    padding: '48px',
     position: 'relative',
     height: 'calc(100% - 12px)',
     background: theme?.palette?.background?.default,
@@ -5273,16 +5381,16 @@ const useTextGridStyles = createUseStyles(theme => ({
   },
   nodeTitle: {
     color: theme?.palette?.font.secondary,
-    fontSize: '40px',
-    lineHeight: '48px',
+    fontSize: theme.typography.fontSize.h3,
+    fontWeight: theme.typography.fontWeight.bold,
+    lineHeight: 'normal',
     margin: '0 0 20px',
     wordBreak: 'break-word'
   },
   nodePara: {
     color: theme?.palette?.font.tertiary,
-    fontSize: '16px',
+    fontSize: theme.typography.fontSize.subHead,
     lineHeight: '24px',
-    margin: '20px 0',
     wordBreak: 'break-word'
   },
   contentRow: {
@@ -5292,27 +5400,21 @@ const useTextGridStyles = createUseStyles(theme => ({
     } = {}) => `repeat(${slidesToShow},minmax(0, 1fr))`
   },
   '@media screen and (max-width: 767px)': {
-    section: {
-      padding: '60px 20px'
-    },
-    heading: {
-      fontSize: '24px',
-      lineHeight: '36px',
-      letterSpacing: '-1px',
-      margin: '4px 0 6px'
-    },
     sliderContainer: {
       margin: '0 -20px 0 -10px'
     },
     node: {
-      padding: '20px'
+      padding: '16px',
+      margin: '0 6px'
     },
     nodeTitle: {
-      fontSize: '24px',
-      lineHeight: '36px'
+      marginBottom: '0px'
     },
     nodePara: {
-      margin: '12px 0'
+      margin: '16px 0'
+    },
+    heading: {
+      letterSpacing: '-1px'
     }
   }
 }));
@@ -5332,7 +5434,8 @@ const TextGrid = ({
   const classes = useTextGridStyles({
     containerWidth,
     cardsCount,
-    slidesToShow
+    slidesToShow,
+    isMobile
   });
   const settings = {
     className: classes.sliderContainer,
@@ -5349,7 +5452,7 @@ const TextGrid = ({
     dangerouslySetInnerHTML: {
       __html: item.contentHeading.metadata.value
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), /*#__PURE__*/React.createElement("div", {
     ref: item?.contentPara?.refSetter,
     className: classes.nodePara,
     dangerouslySetInnerHTML: {
@@ -5367,7 +5470,7 @@ const TextGrid = ({
     dangerouslySetInnerHTML: {
       __html: nodeData.subheading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("h2", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: classes.heading
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.title?.refSetter,
@@ -5908,19 +6011,22 @@ var index$8 = /*#__PURE__*/Object.freeze({
 const useTeamStyles = createUseStyles(theme => {
   return {
     teamSuperContainer: {
-      padding: '60px',
+      padding: ({
+        isMobile
+      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
       backgroundColor: theme?.palette?.background?.primary,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
-      },
-      '& h2,& h3': {
-        fontWeight: '500',
-        '& b,& strong': {
-          fontWeight: '700'
-        }
       }
+      // '& h2,& h3': {
+      //   fontWeight: '500',
+      //   '& b,& strong': {
+      //     fontWeight: '700'
+      //   }
+      // }
     },
+
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -5928,19 +6034,20 @@ const useTeamStyles = createUseStyles(theme => {
       } = {}) => containerWidth
     },
     teamHeading: {
-      fontSize: '16px',
+      fontSize: theme.typography.fontSize.subHead,
+      textTransform: 'uppercase',
       lineHeight: '20px',
       letterSpacing: '3px',
-      margin: '0 0 8px',
+      marginBottom: '8px',
       color: theme?.palette?.font?.primary,
       wordBreak: 'break-word'
     },
     teamTitle: {
-      fontSize: '56px',
+      fontSize: theme.typography.fontSize.h2,
+      fontWeight: theme.typography.fontWeight.bold,
       lineHeight: '70px',
       letterSpacing: '-3px',
       wordBreak: 'break-word',
-      margin: '0 ',
       color: theme?.palette?.font?.default
     },
     sliderContainer: {
@@ -5955,10 +6062,11 @@ const useTeamStyles = createUseStyles(theme => {
     singleSlideContainer: {
       backgroundColor: theme?.palette?.background?.default,
       margin: '20px',
-      width: 'calc(100% - 40px)',
-      height: 'calc(100% - 40px)',
+      width: 'calc(100% - 32px)',
+      // height: 'calc(100% - 40px)',
+      border: '3px solid #D8E0F0',
       borderRadius: theme?.shape?.borderRadius?.regular,
-      padding: '32px',
+      padding: theme.spacing.padding.tiny,
       boxShadow: theme?.shadows?.primary
     },
     imageContainer: {
@@ -5983,32 +6091,28 @@ const useTeamStyles = createUseStyles(theme => {
       overflowWrap: 'break-word'
     },
     teamDetailsHeading: {
-      fontSize: '24px',
+      fontSize: theme.typography.fontSize.h5,
+      fontWeight: theme.typography.fontWeight.bold,
       lineHeight: '32px',
       margin: '0',
       color: theme?.palette?.font?.default
     },
     teamDetailsSubHeading: {
-      fontSize: '16px',
+      fontSize: theme.typography.fontSize.subHead,
       lineHeight: '24px',
       margin: '12px 0 0',
       color: theme?.palette?.font?.primary
     },
     '@media (max-width: 767px)': {
-      teamSuperContainer: {
-        padding: '60px 20px'
-      },
+      // teamSuperContainer: {
+      //   padding: '60px 20px'
+      // },
       teamHeading: {
-        fontSize: '16px',
-        lineHeight: '20px',
-        letterSpacing: '3px',
-        margin: '0'
+        lineHeight: '20px'
       },
       teamTitle: {
-        fontSize: '24px',
         lineHeight: '36px',
-        letterSpacing: '-1px',
-        margin: '0'
+        letterSpacing: '-1px'
       },
       sliderContainer: {
         margin: '0 -4px'
@@ -6018,18 +6122,17 @@ const useTeamStyles = createUseStyles(theme => {
         margin: '12px 4px'
       },
       teamDetailsContainer: {
-        textAlign: 'center',
-        margin: '15px 0 0',
-        paddingBottom: '0'
+        textAlign: 'center'
+        // margin: '15px 0 0',
+        // paddingBottom: '0'
       },
+
       teamDetailsHeading: {
-        fontSize: '16px',
         lineHeight: '24px',
         margin: '0',
         color: theme?.palette?.font?.default
       },
       teamDetailsSubHeading: {
-        fontSize: '16px',
         color: theme?.palette?.font?.primary
       }
     }
@@ -6084,7 +6187,8 @@ function TeamCard({
   const classes = useTeamStyles({
     containerWidth,
     cardsCount,
-    slidesToShow
+    slidesToShow,
+    isMobile
   });
   const settings = {
     className: classes.sliderContainer,
@@ -6112,7 +6216,7 @@ function TeamCard({
     dangerouslySetInnerHTML: {
       __html: teamData.teamHeading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("h2", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: classes.teamTitle
   }, /*#__PURE__*/React.createElement("span", {
     ref: teamData?.teamTitle?.refSetter,
@@ -6141,17 +6245,21 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     flexDirection: 'column',
     alignItems: 'center',
     backgroundColor: theme?.palette?.background?.default,
+    padding: ({
+      isMobile
+    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
-    },
-    '& h2,& h3': {
-      fontWeight: '500',
-      '& b,& strong': {
-        fontWeight: '700'
-      }
     }
+    // '& h2,& h3': {
+    //   fontWeight: '500',
+    //   '& b,& strong': {
+    //     fontWeight: '700'
+    //   }
+    // }
   },
+
   formContainer: {
     margin: '0 auto',
     maxWidth: ({
@@ -6170,14 +6278,14 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     backgroundColor: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.secondary,
     borderRadius: theme?.shape?.borderRadius?.regular,
-    margin: '60px 10%',
-    padding: '40px 80px',
+    padding: '48px',
     position: 'relative'
   },
   title: {
     margin: '0',
-    fontSize: '56px',
+    fontSize: theme.typography.fontSize.h2,
     color: theme?.palette?.font?.secondary,
+    fontWeight: theme.typography.fontWeight.bold,
     lineHeight: '71px',
     letterSpacing: '-3px',
     textAlign: 'left',
@@ -6185,16 +6293,19 @@ const useSectionStyles$1 = createUseStyles(theme => ({
   },
   contentContainer: {
     width: '100%',
-    display: 'flex',
-    alignItems: 'flex-start',
-    marginTop: '32px'
+    display: 'flex'
+    // alignItems: 'flex-start',
   },
+
   leftContainer: {
-    width: '65%'
+    width: '65%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between'
   },
   subtitle: {
-    margin: '0 0 40px 0',
-    fontSize: '20px',
+    // margin: '0 0 40px 0',
+    fontSize: theme.typography.fontSize.h6,
     color: theme?.palette?.font?.primary,
     lineHeight: '32px',
     wordBreak: 'break-word'
@@ -6216,13 +6327,16 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     padding: '4px 8px 0 0'
   },
   addressText: {
-    fontSize: '16px',
+    fontSize: theme.typography.fontSize.subHead,
     color: theme?.palette?.font?.default,
     lineHeight: '24px'
   },
   rightContainer: {
     width: '50%',
-    padding: '0 0 0 80px'
+    padding: '0 0 0 80px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between'
   },
   inputDiv: {
     margin: '0 0 20px 0',
@@ -6236,8 +6350,8 @@ const useSectionStyles$1 = createUseStyles(theme => ({
       alignItems: 'center'
     },
     sectionContainer: {
-      margin: '26px 16px',
-      padding: '32px 16px'
+      // margin: '26px 16px',
+      padding: '16px'
     },
     partialBackground: {
       height: '150px'
@@ -6247,26 +6361,32 @@ const useSectionStyles$1 = createUseStyles(theme => ({
       marginTop: '8px'
     },
     leftContainer: {
-      width: '100%',
-      padding: '0 16ox'
+      width: '100%'
+      // padding: '0 16ox'
     },
+
     rightContainer: {
       width: '100%',
       padding: '0'
     },
     title: {
-      fontSize: '24px',
+      // fontSize: '24px',
       lineHeight: '32px',
-      letterSpacing: 'initial'
+      letterSpacing: 'initial',
+      margin: '0 0 16px 0',
+      textAlign: 'center'
     },
     subtitle: {
-      margin: '0 0 12px 0'
+      margin: '0 0 16px 0',
+      lineHeight: '26px',
+      textAlign: 'center'
     },
     inputDiv: {
-      margin: '0 0 10px 0'
+      margin: '0 0 16px 0'
     },
     addressRow: {
-      padding: '12px 0'
+      padding: '0px',
+      margin: '0 0 16px 0'
     }
   }
 }));
@@ -6285,7 +6405,8 @@ function FormEnquiry({
     isEdit
   } = useContext(PageContext);
   const classes = useSectionStyles$1({
-    containerWidth
+    containerWidth,
+    isMobile
   });
   const [nodeData] = sectionData.components;
   const theme = useTheme();
@@ -6344,6 +6465,10 @@ function FormEnquiry({
     className: classes.partialBackground
   }), /*#__PURE__*/React.createElement("div", {
     className: classes.sectionContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.contentContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.leftContainer
   }, /*#__PURE__*/React.createElement("h2", {
     className: classes.title
   }, /*#__PURE__*/React.createElement("span", {
@@ -6352,10 +6477,6 @@ function FormEnquiry({
       __html: nodeData?.title?.metadata?.value
     }
   })), /*#__PURE__*/React.createElement("div", {
-    className: classes.contentContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.leftContainer
-  }, /*#__PURE__*/React.createElement("div", {
     ref: nodeData?.subtitle?.refSetter,
     className: classes.subtitle,
     dangerouslySetInnerHTML: {
@@ -6495,7 +6616,7 @@ function FormEnquiry({
         messageValid: 1
       });
     }
-  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement(Button, {
+  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
       value: 'Submitted'
@@ -6506,7 +6627,7 @@ function FormEnquiry({
     type: nodeData?.cta?.metadata?.type,
     size: isMobile ? 'small' : 'medium',
     disabled: btnDisabled
-  }))))));
+  })))))));
 }
 
 var index$6 = /*#__PURE__*/Object.freeze({
@@ -6522,20 +6643,24 @@ const useSectionStyles = createUseStyles(theme => ({
     justifyContent: 'center',
     flexDirection: 'column',
     alignItems: 'center',
+    padding: ({
+      isMobile
+    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
     backgroundColor: theme?.palette?.background?.default,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
-    },
-    '& h2,& h3': {
-      fontWeight: '500',
-      '& b,& strong': {
-        fontWeight: '700'
-      }
     }
+    // '& h2,& h3': {
+    //   fontWeight: '500',
+    //   '& b,& strong': {
+    //     fontWeight: '700'
+    //   }
+    // }
   },
+
   contactContainer: {
-    width: '80%',
+    width: '100%',
     margin: '0 auto',
     maxWidth: ({
       containerWidth
@@ -6553,13 +6678,12 @@ const useSectionStyles = createUseStyles(theme => ({
     backgroundColor: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.secondary,
     borderRadius: theme?.shape?.borderRadius?.regular,
-    margin: '60px',
-    padding: '40px 80px',
+    padding: '48px',
     position: 'relative'
   },
   title: {
     margin: '0',
-    fontSize: '56px',
+    fontSize: theme.typography.fontSize.h2,
     color: theme?.palette?.font?.secondary,
     lineHeight: '71px',
     letterSpacing: '-3px',
@@ -6569,36 +6693,37 @@ const useSectionStyles = createUseStyles(theme => ({
   contentContainer: {
     width: '100%',
     display: 'flex',
-    alignItems: 'flex-start',
-    marginTop: '32px',
+    justifyContent: 'space-between',
     wordBreak: 'break-word'
   },
   leftContainer: {
-    width: '50%'
+    width: '50%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between'
   },
   subtitle: {
-    margin: '0 0 58px 0',
-    fontSize: '20px',
+    margin: '0 0 auto 0',
+    fontSize: theme.typography.fontSize.h6,
     color: theme?.palette?.font?.primary,
-    lineHeight: '32px'
+    lineHeight: '32px',
+    margin: '20px 0px'
   },
   addressContainer: {
     display: 'flex',
     alignItems: 'flex-start',
     flexDirection: 'column',
-    width: '85%',
-    position: 'relative',
-    paddingBottom: '55%'
-    // '& img': {
-    //   width: '80%'
-    // }
+    width: '100%',
+    position: 'relative'
   },
-
   telephoneImage: {
     width: '80%'
   },
   rightContainer: {
     width: '50%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
     padding: '0 0 0 80px'
   },
   inputDiv: {
@@ -6612,16 +6737,16 @@ const useSectionStyles = createUseStyles(theme => ({
     background: theme?.palette?.background?.default,
     border: `1px solid ${theme?.palette?.border?.secondary}`,
     borderRadius: theme?.shape?.borderRadius?.regular,
-    padding: '14px 12px',
+    // padding: '14px 12px',
     display: 'flex',
     fontWeight: '400',
-    fontSize: '16px',
+    fontSize: theme.typography.fontSize.subHead,
     lineHeight: '20px',
     fontFamily: 'inherit',
     resize: 'none',
     '&::placeholder': {
       fontWeight: '400',
-      fontSize: '16px',
+      fontSize: theme.typography.fontSize.subHead,
       lineHeight: '20px',
       color: theme?.palette?.font?.primary,
       fontFamily: theme?.typography?.fontFamily
@@ -6651,8 +6776,7 @@ const useSectionStyles = createUseStyles(theme => ({
       alignItems: 'center'
     },
     sectionContainer: {
-      margin: '26px 16px',
-      padding: '32px 16px'
+      padding: '16px'
     },
     partialBackground: {
       height: '150px'
@@ -6670,15 +6794,17 @@ const useSectionStyles = createUseStyles(theme => ({
       padding: '0'
     },
     title: {
-      fontSize: '24px',
-      lineHeight: '32px',
-      letterSpacing: 'initial'
+      lineHeight: '26px',
+      letterSpacing: 'initial',
+      textAlign: 'center'
     },
     subtitle: {
-      margin: '0 0 12px 0'
+      margin: '0 0 12px 0',
+      textAlign: 'center',
+      lineHeight: '26px'
     },
     addressRow: {
-      padding: '12px 0'
+      // padding: '12px 0'
     },
     addressContainer: {
       '& img': {
@@ -6686,7 +6812,7 @@ const useSectionStyles = createUseStyles(theme => ({
       }
     },
     inputDiv: {
-      margin: '0 0 10px 0'
+      // margin: '0 0 10px 0'
     },
     inputField: {
       width: '100%',
@@ -6718,7 +6844,8 @@ function Contact({
   let [btnDisabled, setBtnDisabled] = useState(false);
   const [nodeData] = sectionData.components;
   const classes = useSectionStyles({
-    containerWidth
+    containerWidth,
+    isMobile
   });
   let formInitialValue = {
     name: nodeData?.nameField?.metadata?.value,
@@ -6774,6 +6901,10 @@ function Contact({
     className: classes.partialBackground
   }), /*#__PURE__*/React.createElement("div", {
     className: classes.sectionContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.contentContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.leftContainer
   }, /*#__PURE__*/React.createElement("h2", {
     className: classes.title
   }, /*#__PURE__*/React.createElement("span", {
@@ -6782,10 +6913,6 @@ function Contact({
       __html: nodeData?.title?.metadata?.value
     }
   })), /*#__PURE__*/React.createElement("div", {
-    className: classes.contentContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.leftContainer
-  }, /*#__PURE__*/React.createElement("div", {
     ref: nodeData?.subtitle?.refSetter,
     className: classes.subtitle,
     dangerouslySetInnerHTML: {
@@ -6888,7 +7015,9 @@ function Contact({
         messageValid: 1
       });
     }
-  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement(Button, {
+  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement("div", {
+    className: classes.btnContainer
+  }, /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
       value: 'Submitted'
@@ -6900,7 +7029,7 @@ function Contact({
     size: isMobile ? 'small' : 'medium',
     disabled: btnDisabled,
     name: "button"
-  }))))));
+  })))))));
 }
 
 var index$5 = /*#__PURE__*/Object.freeze({
@@ -7871,7 +8000,9 @@ var index$3 = /*#__PURE__*/Object.freeze({
 
 const useFormPageStyles = createUseStyles(theme => ({
   formPageSection: {
-    padding: '35px 70px',
+    padding: ({
+      isMobile
+    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
     background: '#F4F9FF',
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
@@ -7882,77 +8013,82 @@ const useFormPageStyles = createUseStyles(theme => ({
     textAlign: 'center'
   },
   formPageTitle: {
-    fontSize: '50px',
-    fontWeight: '700'
+    fontSize: theme.typography.fontSize.h2,
+    fontWeight: theme.typography.fontWeight.bold
   },
   formPageSubtitle: {
-    marginTop: '16px',
-    fontSize: '16px',
+    marginTop: '8px',
+    fontSize: theme.typography.fontSize.h6,
     lineHeight: '23px',
     color: 'rgba(51, 51, 51, 0.5)',
-    marginBottom: '32px'
+    marginBottom: theme.spacing.margin.tiny
   },
   formPageFormContainer: {
-    marginTop: '32px',
     '& form': {
-      padding: '35px 140px',
+      padding: '72px',
       background: '#FFFFFF',
       borderRadius: '8px',
       boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)'
     }
   },
   inputField: {
-    marginTop: '20px',
-    padding: '20px',
-    border: '1px solid #D8E0F0',
-    borderRadius: '16px'
+    marginTop: '12px'
+    // padding: '12px 16px',
+    // border: '1px solid #D8E0F0',
+    // borderRadius: '16px'
   },
+
   inputFieldLabel: {
     color: '#333',
-    fontSize: '20px',
+    fontSize: theme.typography.fontSize.subHead,
+    fontWeight: theme.typography.fontWeight.semiBold,
     display: 'block',
-    marginBottom: '10px'
+    marginTop: '20px',
+    marginBottom: '12px'
   },
   inputFieldControl: {
     width: '100%',
-    height: '50px',
     borderRadius: '8px',
     border: '1px solid #D8E0F0',
-    padding: '5px 10px',
+    padding: '12px 16px',
     color: '#7D8592',
-    fontSize: '16px'
+    fontSize: theme.typography.fontSize.subHead
   },
   checkboxField: {
-    marginTop: '20px',
-    padding: '20px',
-    border: '1px solid #D8E0F0',
-    borderRadius: '8px'
+    // padding: '20px',
+    // border: '1px solid #D8E0F0',
+    // borderRadius: '8px'
   },
   checkBoxFieldLabel: {
     color: '#333',
-    fontSize: '20px',
-    margin: '10px 0'
+    fontSize: theme.typography.fontSize.subHead,
+    fontWeight: theme.typography.fontWeight.semiBold,
+    marginTop: '20px',
+    marginBottom: '12px'
   },
   inputFieldRequired: {
     color: '#F41828'
   },
   checkboxFieldControl: {
-    padding: '6px 0',
+    padding: '8px 0',
     '& label': {
-      fontFamily: '16px',
+      fontSize: theme.typography.fontSize.subHead,
       marginLeft: '10px',
       color: '#7D8592'
     }
   },
   submitBtnContainer: {
-    marginTop: '20px',
+    marginTop: theme.spacing.margin.tiny,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     width: '100%',
     margin: '0 auto',
     '& button': {
-      height: '44px',
-      padding: '10px 40px',
+      // height: '44px',
+      padding: '16px 24px',
       color: '#FFFFFF',
-      fontSize: '16px',
+      fontSize: theme.typography.fontSize.subHead,
       cursor: 'pointer',
       borderRadius: '8px'
     }
@@ -7967,8 +8103,14 @@ const useFormPageStyles = createUseStyles(theme => ({
     },
     formPageFormContainer: {
       '& form': {
-        padding: '24px'
+        padding: '16px'
       }
+    },
+    inputFieldLabel: {
+      marginBottom: '8px'
+    },
+    checkBoxFieldLabel: {
+      marginBottom: '8px'
     }
   }
 }));
@@ -8015,13 +8157,16 @@ const FormPage = ({
   extraProps = {}
 }) => {
   const [formData, setFormData] = useState({});
-  const classes = useFormPageStyles();
   const [formSubmitted, setformSubmitted] = useState(false);
   const metadata = sectionData?.components?.[0]?.metadata || formPageMock;
   const {
     _id,
-    baseURLs
+    baseURLs,
+    isMobile
   } = useContext(PageContext);
+  const classes = useFormPageStyles({
+    isMobile
+  });
   const handleSubmit = async e => {
     e.preventDefault();
     let formResponse = [];
@@ -8228,16 +8373,18 @@ const useTilesStyles = createUseStyles(theme => {
       alignItems: 'center',
       display: 'flex',
       flexDirection: 'column',
-      marginTop: '20px'
+      padding: ({
+        isMobile
+      } = {}) => isMobile ? `16px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`
     },
     tileDiv: {
       width: '236px',
-      height: '160px',
+      // height: '160px',
+      aspectRatio: '3/2',
       position: 'relative',
       borderRadius: '16px',
       overflow: 'hidden',
-      cursor: 'pointer',
-      margin: '1rem'
+      cursor: 'pointer'
     },
     tileImg: {
       objectFit: 'cover',
@@ -8252,8 +8399,8 @@ const useTilesStyles = createUseStyles(theme => {
       top: '12%',
       left: '7%',
       color: 'white',
-      fontWeight: '600',
-      fontSize: '20px',
+      fontWeight: theme.typography.fontWeight.semiBold,
+      fontSize: theme.typography.fontSize.h5,
       width: '150px'
     },
     row: {
@@ -8261,25 +8408,28 @@ const useTilesStyles = createUseStyles(theme => {
       flexDirection: 'row',
       justifyContent: 'center',
       flexWrap: 'wrap',
-      width: '85%',
-      marginBottom: '3rem'
+      width: '100%',
+      gap: '24px'
     },
     header: {
-      fontWeight: '700',
-      fontSize: '46px',
+      fontWeight: theme.typography.fontWeight.bold,
+      fontSize: theme.typography.fontSize.h2,
       lineHeight: '46px',
-      marginBottom: '1rem',
       textAlign: 'center',
-      marginTop: '3rem',
       color: '#2D2D2D'
     },
     headerTitle: {
-      fontWeight: '400',
-      fontSize: '24px',
+      fontWeight: theme.typography.fontWeight.regular,
+      fontSize: theme.typography.fontSize.subHead,
       lineHeight: '46px',
       color: '#7D8592',
-      marginBottom: '3rem',
+      marginBottom: theme.spacing.margin.tiny,
       textAlign: 'center'
+    },
+    '@media screen and (max-width: 767px)': {
+      tileDiv: {
+        width: 'calc(53% - 24px)'
+      }
     }
   };
 });
@@ -8288,7 +8438,6 @@ function Tiles({
   sectionData,
   sectionIndex
 }) {
-  const classes = useTilesStyles({});
   const {
     isMobile,
     layout: {
@@ -8297,6 +8446,9 @@ function Tiles({
     isPreview,
     isEdit
   } = useContext(PageContext);
+  const classes = useTilesStyles({
+    isMobile
+  });
   const nodeData = sectionData.components;
   const tilesList = nodeData[0]?.tilesList.components;
   const handleClick = value => {