diy-template-components 0.2.75 → 0.2.76

package/build/index.es.js

@@ -338,118 +338,117 @@ const colorMixer = (hex1, weightage = 1, hex2 = colors.white) => {
   };
 };
 
-const buttonStyles = createUseStyles(theme => {
-  console.log('themexxxxdsfb', theme);
-  return {
-    primary: {
-      width: ({
-        fluid
-      } = {}) => fluid ? '100%' : '',
-      borderRadius: theme?.shape?.borderRadius?.regular,
-      fontWeight: '700',
-      fontSize: '14px',
-      lineHeight: '18px',
-      textAlign: 'center',
-      color: ({
-        disabled
-      } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.isGradient ? theme?.themeGradient?.CtaTextColor : theme?.themeColors?.CtaTextColor,
-      background: ({
-        disabled
-      } = {}) => disabled ? colorMixer(theme?.palette?.primary.main, 0.5).color : theme?.isGradient ? theme?.themeGradient?.ctaColor : theme?.themeColors?.ctaColor,
-      border: 'none',
-      textDecoration: 'none',
-      cursor: ({
-        disabled
-      } = {}) => disabled ? 'not-allowed' : 'pointer',
-      maxWidth: '100%',
-      display: 'inline-block',
-      wordBreak: 'break-word',
-      flexShrink: '0'
+const buttonStyles = createUseStyles(theme => ({
+  primary: {
+    width: ({
+      fluid
+    } = {}) => fluid ? '100%' : '',
+    borderRadius: theme?.shape?.borderRadius?.regular,
+    fontWeight: '700',
+    fontSize: '14px',
+    lineHeight: '18px',
+    textAlign: 'center',
+    color: ({
+      disabled
+    } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.palette?.background?.default,
+    background: ({
+      disabled
+    } = {}) => disabled ? colorMixer(theme?.palette?.primary.main, 0.5).color : theme?.palette?.primary?.main,
+    border: ({
+      disabled
+    } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${theme.palette.primary.main}`,
+    textDecoration: 'none',
+    cursor: ({
+      disabled
+    } = {}) => disabled ? 'not-allowed' : 'pointer',
+    maxWidth: '100%',
+    display: 'inline-block',
+    wordBreak: 'break-word',
+    flexShrink: '0'
+  },
+  secondary: {
+    width: ({
+      fluid
+    } = {}) => fluid ? '100%' : '',
+    borderRadius: theme?.shape?.borderRadius?.regular,
+    fontSize: '14px',
+    fontWeight: '700',
+    display: 'inline-block',
+    textDecoration: 'none',
+    lineHeight: '18px',
+    color: ({
+      disabled
+    } = {}) => disabled ? colorMixer(theme.palette.primary.main, 0.5).color : theme.palette.primary.main,
+    background: ({
+      disabled
+    } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.palette?.background?.default,
+    border: ({
+      disabled
+    } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${theme.palette.primary.main}`,
+    cursor: ({
+      disabled
+    } = {}) => disabled ? 'not-allowed' : 'pointer',
+    maxWidth: '100%',
+    display: 'inline-block',
+    wordBreak: 'break-word',
+    flexShrink: '0'
+  },
+  tertiary: {
+    width: ({
+      fluid
+    } = {}) => fluid ? '100%' : '',
+    fontWeight: '400',
+    fontSize: '16px',
+    lineHeight: '20px',
+    display: 'flex',
+    alignItems: 'center',
+    border: 'none',
+    color: ({
+      disabled
+    } = {}) => disabled ? colorMixer(theme.palette.primary.main, 0.5).color : theme.palette.primary.main,
+    background: ({
+      disabled
+    } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.palette?.background?.default,
+    cursor: ({
+      disabled
+    } = {}) => disabled ? 'not-allowed' : 'pointer',
+    maxWidth: '100%',
+    display: 'inline-block',
+    wordBreak: 'break-word',
+    flexShrink: '0',
+    '&:hover': {
+      background: theme.palette.primary.lightest,
+      borderRadius: '4px'
     },
-    secondary: {
-      width: ({
-        fluid
-      } = {}) => fluid ? '100%' : '',
-      borderRadius: theme?.shape?.borderRadius?.regular,
-      fontSize: '14px',
+    '&$active': {
       fontWeight: '700',
-      display: 'inline-block',
-      textDecoration: 'none',
-      lineHeight: '18px',
-      color: ({
-        disabled
-      } = {}) => disabled ? colorMixer(theme.palette.primary.main, 0.5).color : theme?.themeColors?.CtaTextColor,
-      background: ({
-        disabled
-      } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.isGradient ? theme?.themeGradient?.ctaColor : theme?.themeColors?.ctaColor,
-      border: ({
-        disabled
-      } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${theme?.themeColors?.ctaColor}`,
-      cursor: ({
-        disabled
-      } = {}) => disabled ? 'not-allowed' : 'pointer',
-      maxWidth: '100%',
-      display: 'inline-block',
-      wordBreak: 'break-word',
-      flexShrink: '0'
-    },
-    tertiary: {
-      width: ({
-        fluid
-      } = {}) => fluid ? '100%' : '',
-      fontWeight: '400',
-      fontSize: '16px',
-      lineHeight: '20px',
-      display: 'flex',
-      alignItems: 'center',
-      border: 'none',
-      color: ({
-        disabled
-      } = {}) => disabled ? colorMixer(theme.palette.primary.main, 0.5).color : theme.palette.primary.main,
-      background: ({
-        disabled
-      } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.palette?.background?.default,
-      cursor: ({
-        disabled
-      } = {}) => disabled ? 'not-allowed' : 'pointer',
-      maxWidth: '100%',
-      display: 'inline-block',
-      wordBreak: 'break-word',
-      flexShrink: '0',
-      '&:hover': {
-        background: theme.palette.primary.lightest,
-        borderRadius: '4px'
-      },
-      '&$active': {
-        fontWeight: '700',
-        background: theme.palette.primary.lightest,
-        borderRadius: theme.shape.borderRadius.small,
-        color: theme.palette.primary.main
-      }
-    },
-    anchorClass: {
-      textDecoration: 'none'
-    },
-    active: {},
-    large: {
-      padding: '20px 24px'
-    },
-    medium: {
-      padding: '16px 24px'
-    },
-    small: {
-      padding: '12px 16px'
-    },
-    '@media screen and (max-width: 767px)': {
-      active: {
-        fontWeight: 'initial',
-        background: theme?.palette?.background?.default,
-        borderRadius: '0',
-        color: theme.palette.primary.main
-      }
+      background: theme.palette.primary.lightest,
+      borderRadius: theme.shape.borderRadius.small,
+      color: theme.palette.primary.main
     }
-  };
-});
+  },
+  anchorClass: {
+    textDecoration: 'none'
+  },
+  active: {},
+  large: {
+    padding: '20px 24px'
+  },
+  medium: {
+    padding: '16px 24px'
+  },
+  small: {
+    padding: '12px 16px'
+  },
+  '@media screen and (max-width: 767px)': {
+    active: {
+      fontWeight: 'initial',
+      background: theme?.palette?.background?.default,
+      borderRadius: '0',
+      color: theme.palette.primary.main
+    }
+  }
+}));
 
 function useLinkBuilder(data) {
   const {
@@ -580,7 +579,7 @@ var menu = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20v
 
 var clpLogo = "478367302082f28d.svg";
 
-var videoPlay = "data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%200.5C3.86%200.5%200.5%203.86%200.5%208C0.5%2012.14%203.86%2015.5%208%2015.5C12.14%2015.5%2015.5%2012.14%2015.5%208C15.5%203.86%2012.14%200.5%208%200.5ZM6.5%2011.375V4.625L11%208L6.5%2011.375Z%22%20fill%3D%22%234E93FF%22%2F%3E%3C%2Fsvg%3E";
+var videoPlay = "data:image/svg+xml,%3Csvg%20width%3D%2297%22%20height%3D%2266%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20%3E%3Cpath%20d%3D%22M8%200.5C3.86%200.5%200.5%203.86%200.5%208C0.5%2012.14%203.86%2015.5%208%2015.5C12.14%2015.5%2015.5%2012.14%2015.5%208C15.5%203.86%2012.14%200.5%208%200.5ZM6.5%2011.375V4.625L11%208L6.5%2011.375Z%22%20fill%3D%22%234E93FF%22%2F%3E%3C%2Fsvg%3E";
 
 var stockGrowth = "data:image/svg+xml,%3Csvg%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M44%205.5H4C3.18%205.5%202.5%204.82%202.5%204C2.5%203.18%203.18%202.5%204%202.5H44C44.82%202.5%2045.5%203.18%2045.5%204C45.5%204.82%2044.82%205.5%2044%205.5Z%22%20fill%3D%22%23549BF6%22%2F%3E%3Cpath%20d%3D%22M33.34%2044.68C33.08%2045.2%2032.54%2045.5%2032%2045.5C31.78%2045.5%2031.54%2045.44%2031.34%2045.34L24%2041.68L16.66%2045.34C16.46%2045.44%2016.22%2045.5%2016%2045.5C15.46%2045.5%2014.92%2045.2%2014.66%2044.68C14.28%2043.92%2014.58%2043.02%2015.34%2042.66L22.5%2039.08V34H25.5V39.08L32.66%2042.66C33.42%2043.02%2033.72%2043.92%2033.34%2044.68Z%22%20fill%3D%22%23549BF6%22%2F%3E%3Cpath%20d%3D%22M6%204V28.2C6%2032%208%2034%2011.8%2034H36.2C40%2034%2042%2032%2042%2028.2V4H6ZM33.96%2017.16L27.66%2022.42C27.08%2022.9%2026.34%2023.1%2025.64%2022.98C24.92%2022.86%2024.3%2022.42%2023.92%2021.78L21.82%2018.28L15.96%2023.16C15.68%2023.4%2015.34%2023.5%2015%2023.5C14.58%2023.5%2014.14%2023.32%2013.84%2022.96C13.3%2022.32%2013.4%2021.38%2014.04%2020.84L20.34%2015.58C20.92%2015.1%2021.66%2014.9%2022.36%2015.02C23.08%2015.14%2023.7%2015.58%2024.08%2016.22L26.18%2019.72L32.04%2014.84C32.68%2014.3%2033.62%2014.4%2034.16%2015.04C34.68%2015.68%2034.6%2016.62%2033.96%2017.16Z%22%20fill%3D%22%23549BF6%22%2F%3E%3C%2Fsvg%3E";
 
@@ -1913,99 +1912,20 @@ const palettes = {
   rust: rustPalette
 };
 
-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) {
+function getTheme(colorTheme = 'blue', fontFamily = 'Arial') {
   const palette = palettes[colorTheme] || palettes['blue'];
   const typography = {
-    fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
-    fontSize: isMobile ? fontSizeMob : fontSize,
-    fontWeight
+    fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`
   };
   const shape = {
     borderRadius
   };
-  const spacing = {
-    padding: isMobile ? mobilePadding : padding,
-    margin: isMobile ? mobileMargin : margin
-  };
   return {
     palette,
     shape,
     typography,
     shadows: generateShadows(palette),
-    borders: generateBorders(palette),
-    spacing
+    borders: generateBorders(palette)
   };
 }
 
@@ -2206,137 +2126,20 @@ function PageRenderer$1({
   }))));
 }
 
-const GRADIENT = `linear-gradient`;
-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 gradientColors = {
-  white: '#FFFFFF',
-  black: '#000000',
-  //  Blue gradient
-
-  blue: '#1676F3',
-  bluegradient: `${GRADIENT}(#5418D1,#2C88FF)`,
-  tertiaryblue: '#F4F9FF',
-  // Orange gradient
-
-  orange: '#FF9000',
-  orangegradient: `${GRADIENT}(#E96263 , #EAAE4C)`,
-  tertiaryorange: '#FFF6EA',
-  // Pink gradient
-
-  pink: '#F72585',
-  pinkgradient: `${GRADIENT}(#F97794,#623AA2)`,
-  tertiarypink: '#FEE9F3',
-  // Violet gradient
-
-  violet: '#6026A8',
-  violetgradient: `${GRADIENT}(#B66EC0 , #460FA1)`,
-  tertiaryviolet: '#F5F2FA',
-  // Green gradient
-
-  green: '#46A9A9',
-  greengradient: `${GRADIENT}(#0E5CAD, #79F1A4)`,
-  tertiarygreen: '#F4FAFA'
-};
-
-// temporary , will move this
-
-let fontFamily = 'Arial';
-const typography = {
-  fontFamily: `"${fontFamily}", "Roboto", "Helvetica", "Arial", "sans-serif"`,
-  fontSize: fontSize,
-  fontWeight
-};
-const spacing = {
-  padding: padding,
-  margin: margin
-};
-
-// till here
-
-const generateTheme = (theme, isGradient) => {
-  console.log('isGradient', isGradient);
-  const themeColors = {
-    font1: solidBaseColors?.black,
-    font2: solidBaseColors?.black,
-    font3: solidBaseColors?.black,
-    font4: solidBaseColors?.black,
-    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,
-    inputBorderColor: solidBaseColors?.blue2,
-    tertiaryBlue2: solidBaseColors?.tertiaryblue2
-  };
-  const themeGradient = {
-    font1: gradientColors?.white,
-    font2: gradientColors?.black,
-    font3: gradientColors?.black,
-    font4: gradientColors?.white,
-    AccentColor: gradientColors[theme],
-    background1: gradientColors[theme + 'gradient'],
-    background2: gradientColors['tertiary' + theme],
-    background3: gradientColors[theme + 'gradient'],
-    ctaColor: gradientColors[theme + 'gradient'],
-    CtaTextColor: gradientColors?.white,
-    icon: gradientColors[theme],
-    iconBg: gradientColors['tertiary' + theme],
-    stripBg: gradientColors?.black,
-    stripText: gradientColors?.white
-  };
-  return {
-    ...getTheme(theme),
-    themeColors,
-    typography,
-    spacing,
-    isGradient,
-    themeGradient
-  };
-};
-
 const useSectionStyles$8 = createUseStyles(theme => ({
   bannerCarouselRightSection: {
     position: 'relative',
-    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
-    padding: ({
-      isMobile
-    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
-    backgroundColor: generateTheme('blue')?.background2,
     '&, & *, & *: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: ({
@@ -2349,19 +2152,24 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     justifyContent: 'center',
     position: 'relative'
   },
+  partialBackground: {
+    width: '61%',
+    position: 'absolute',
+    backgroundColor: theme?.palette?.background?.primary,
+    height: '100%',
+    top: '0',
+    left: '0'
+  },
   contentContainer: {
     position: 'relative',
     width: '100%',
     zIndex: '1',
-    // display: 'grid',
-    // gridTemplateColumns: 'repeat(2,minmax(0, 1fr))',
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    maxWidth: '100%',
-    gap: '72px'
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2,minmax(0, 1fr))',
+    maxWidth: '100%'
   },
   textContainer: {
+    padding: '140px 18%',
     textAlign: 'left',
     margin: '0 auto',
     maxWidth: '100%'
@@ -2369,28 +2177,23 @@ const useSectionStyles$8 = createUseStyles(theme => ({
   imageContainer: {
     width: '100%',
     position: 'relative',
-    height: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: '8px',
-    overflow: 'hidden'
+    height: '90%'
   },
   subTitleHeading: {
     marginBottom: '8px',
-    fontSize: theme.typography.fontSize.subHead,
+    fontSize: '16px',
     color: theme?.palette?.font?.tertiary,
     wordBreak: 'break-word',
     maxWidth: '100%'
   },
   heading: {
     margin: '0',
-    fontSize: theme.typography.fontSize.h1,
+    fontSize: '72px',
     color: theme?.palette?.font?.default,
     wordBreak: 'break-word'
   },
   description: {
-    margin: `${theme.spacing.margin.tiny}px 0px`,
+    margin: '40px 0',
     color: theme?.palette?.font?.primary,
     lineHeight: '24px',
     wordBreak: 'break-word'
@@ -2405,24 +2208,30 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     display: 'flex',
     gap: '20px',
     justifyContent: 'center',
-    marginTop: theme.spacing.margin.tiny,
+    bottom: '25px',
+    position: 'absolute',
     width: '100%'
   },
-  partialBackground: {
-    display: 'none'
-  },
   '@media screen and (max-width: 767px)': {
     partialBackground: {
       display: 'none'
     },
+    sectionContainer: {
+      paddingBottom: '50px'
+    },
     contentContainer: {
       display: 'flex',
-      flexFlow: 'column',
-      paddingBottom: '48px',
-      gap: '24px'
+      flexFlow: 'column-reverse',
+      paddingBottom: '20px'
     },
     textContainer: {
-      textAlign: 'center'
+      padding: '20px 20px 0'
+    },
+    heading: {
+      fontSize: '40px'
+    },
+    description: {
+      margin: '16px 0'
     },
     linkButton: {
       padding: '12px 16px'
@@ -2455,7 +2264,7 @@ const useCarouselStyles = createUseStyles(theme => ({
     '& .slick-dots': {
       bottom: ({
         buttonContainerClass
-      } = {}) => !!buttonContainerClass ? '10px' : 'unset',
+      } = {}) => !!buttonContainerClass ? '20px' : 'unset',
       position: ({
         buttonContainerClass
       } = {}) => !!buttonContainerClass ? 'absolute' : 'inherit',
@@ -2465,7 +2274,7 @@ const useCarouselStyles = createUseStyles(theme => ({
       textAlign: 'center',
       paddingBottom: '0',
       '& ul': {
-        margin: theme.spacing.margin.regular,
+        margin: '0',
         padding: '0',
         '& li': {
           width: 'unset',
@@ -2489,7 +2298,7 @@ const useCarouselStyles = createUseStyles(theme => ({
     display: 'flex',
     gap: '20px',
     justifyContent: 'center',
-    marginTop: theme.spacing.margin.tiny
+    marginTop: '40px'
   },
   dots: {
     width: '4px',
@@ -2506,15 +2315,6 @@ 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'
-        }
-      }
-    }
   }
 }));
 
@@ -2541,7 +2341,7 @@ const useArrowButtonStyles = createUseStyles(theme => ({
     height: sizeHandler,
     border: ({
       inverted
-    }) => `solid 1px ${inverted ? theme?.palette?.font?.invertedDefault : theme?.themeColors?.ctaColor}`,
+    }) => `solid 1px ${inverted ? theme?.palette?.font?.invertedDefault : theme?.palette?.primary?.light}`,
     borderRadius: '50%',
     display: 'flex',
     justifyContent: 'center',
@@ -2563,7 +2363,7 @@ function ArrowButton(props) {
   }, /*#__PURE__*/React.createElement(Icon, {
     height: props.size === 'small' ? '12px' : '18px',
     name: "Angle",
-    color: props.inverted ? theme?.palette?.font?.invertedDefault : theme?.themeColors?.ctaColor,
+    color: props.inverted ? theme?.palette?.font?.invertedDefault : theme?.palette?.primary?.main,
     inverted: true
   }));
 }
@@ -2674,8 +2474,7 @@ function Section$4({
     isCustomWebsite
   } = useContext(PageContext);
   const classes = useSectionStyles$8({
-    isCustomWebsite,
-    isMobile
+    isCustomWebsite
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classes.centerData
@@ -2724,14 +2523,12 @@ function BannerCarouselRight({
   sectionIndex
 }) {
   const {
-    isMobile,
     layout: {
       containerWidth
     }
   } = useContext(PageContext);
   const classes = useSectionStyles$8({
-    containerWidth,
-    isMobile
+    containerWidth
   });
   const [{
     bannerCarousel
@@ -2757,183 +2554,191 @@ var index$l = /*#__PURE__*/Object.freeze({
   'default': BannerCarouselRight
 });
 
-const useSectionStyles$7 = createUseStyles(theme => {
-  console.log('sdkjfndkjsnfk', theme);
-  return {
-    section: {
-      width: '100%',
-      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',
-      alignItems: 'center',
-      backgroundColor: theme?.palette?.background?.default,
-      '&, & *, & *:before, & *:after': {
-        fontFamily: theme?.typography?.fontFamily,
-        boxSizing: 'border-box'
+const useSectionStyles$7 = createUseStyles(theme => ({
+  section: {
+    width: '100%',
+    padding: '70px 0',
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    alignItems: 'center',
+    backgroundColor: theme?.palette?.background?.default,
+    '&, & *, & *:before, & *:after': {
+      fontFamily: theme?.typography?.fontFamily,
+      boxSizing: 'border-box'
+    },
+    '& h2,& h3': {
+      fontWeight: '500',
+      '& b,& strong': {
+        fontWeight: '700'
+      }
+    }
+  },
+  sectionContainer: {
+    margin: '0 auto',
+    maxWidth: ({
+      containerWidth
+    } = {}) => containerWidth
+  },
+  subTitleHeading: {
+    marginBottom: '8px',
+    fontSize: '16px',
+    color: theme?.palette?.font?.tertiary,
+    alignItems: 'center',
+    textAlign: 'center',
+    wordBreak: 'break-word'
+  },
+  heading: {
+    margin: '0',
+    fontSize: '72px',
+    color: theme?.palette?.font?.default,
+    textAlign: 'center',
+    wordBreak: 'break-word'
+  },
+  contentContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '770px',
+    margin: 'auto'
+  },
+  content: {
+    display: 'flex',
+    width: 'calc(100% - 100px)',
+    alignItems: 'center',
+    background: theme?.palette?.background?.default,
+    boxShadow: theme?.shadows?.primary,
+    borderRadius: theme?.shape?.borderRadius?.regular,
+    overflow: 'hidden',
+    minHeight: 200,
+    margin: '16px 0',
+    position: 'relative',
+    '&:nth-child(2n)': {
+      alignSelf: 'flex-end',
+      '& $contentNumber': {
+        right: '0'
+      },
+      '& $contentText': {
+        marginRight: '200px'
       }
-      // '& h2,& h3': {
-      //   fontWeight: '500',
-      //   '& b,& strong': {
-      //     fontWeight: '700'
-      //   }
-      // }
     },
-
-    sectionContainer: {
-      margin: '0 auto',
-      maxWidth: ({
-        containerWidth
-      } = {}) => containerWidth
+    '&:nth-child(2n+1)': {
+      alignSelf: 'flex-start',
+      '& $contentNumber': {
+        left: '0'
+      },
+      '& $contentText': {
+        marginLeft: '200px'
+      }
     },
-    subTitleHeading: {
-      marginBottom: '8px',
-      fontSize: theme.typography.fontSize.subHead,
-      color: theme?.palette?.font?.tertiary,
-      alignItems: 'center',
-      textAlign: 'center',
-      wordBreak: 'break-word',
-      textTransform: 'uppercase'
+    '&:nth-child(7n+1) $contentNumber': {
+      background: palettes.purple.primary.lightest
     },
-    heading: {
-      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'
+    '&:nth-child(7n+2) $contentNumber': {
+      background: palettes.orange.primary.lightest
     },
-    contentContainer: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: '770px',
-      margin: 'auto'
+    '&:nth-child(7n+3) $contentNumber': {
+      background: palettes.red.primary.lightest
+    },
+    '&:nth-child(7n+4) $contentNumber': {
+      background: palettes.green.primary.lightest
+    },
+    '&:nth-child(7n+5) $contentNumber': {
+      background: palettes.pink.primary.lightest
+    },
+    '&:nth-child(7n+6) $contentNumber': {
+      background: palettes.blue.primary.lightest
+    },
+    '&:nth-child(7n) $contentNumber': {
+      background: palettes.rust.primary.lightest
+    }
+  },
+  contentNumber: {
+    position: 'absolute',
+    top: '0',
+    fontWeight: '700',
+    fontSize: '72px',
+    letterSpacing: '-3px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    color: theme?.palette?.font?.default,
+    width: '200px',
+    wordBreak: 'break-word'
+  },
+  contentText: {
+    padding: '20px 0'
+  },
+  contentHeading: {
+    fontStyle: 'normal',
+    fontSize: '24px',
+    lineHeight: '32px',
+    color: theme?.palette?.font?.default,
+    margin: '0 48px',
+    wordBreak: 'break-word'
+  },
+  contentPara: {
+    fontStyle: 'normal',
+    fontSize: '16px',
+    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%'
     },
     content: {
       display: 'flex',
-      width: 'calc(100% - 100px)',
-      alignItems: 'center',
-      background: theme?.palette?.background?.default,
-      boxShadow: theme?.shadows?.primary,
-      borderRadius: theme?.shape?.borderRadius?.regular,
-      overflow: 'hidden',
-      minHeight: 200,
-      marginBottom: theme.spacing.margin.small,
-      position: 'relative',
+      flexDirection: 'column',
+      borderRadius: theme.shape.borderRadius.large,
+      margin: '20px 0 10px 0',
+      width: '100%',
+      height: 'auto',
       '&:nth-child(2n)': {
-        alignSelf: 'flex-end',
-        '& $contentNumber': {
-          right: '0'
-        },
+        marginLeft: '0',
         '& $contentText': {
-          marginRight: '170px'
+          marginRight: '0',
+          alignSelf: 'flex-start',
+          padding: '0'
         }
       },
       '&:nth-child(2n+1)': {
-        alignSelf: 'flex-start',
-        '& $contentNumber': {
-          left: '0'
-        },
+        marginRight: '0',
         '& $contentText': {
-          marginLeft: '170px'
+          marginLeft: '0',
+          alignSelf: 'flex-start',
+          padding: '0'
         }
-      },
-      '&:nth-child(7n+1) $contentNumber': {
-        background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background3
-      },
-      '&:nth-child(7n+2) $contentNumber': {
-        background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background3
-      },
-      '&:nth-child(7n+3) $contentNumber': {
-        background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background3
-      },
-      '&:nth-child(7n+4) $contentNumber': {
-        background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background3
-      },
-      '&:nth-child(7n+5) $contentNumber': {
-        background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background3
-      },
-      '&:nth-child(7n+6) $contentNumber': {
-        background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background3
-      },
-      '&:nth-child(7n) $contentNumber': {
-        background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background3
       }
     },
     contentNumber: {
-      position: 'absolute',
-      top: '0',
-      fontWeight: '700',
-      fontSize: '72px',
-      letterSpacing: '-3px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: '48px',
-      height: '100%',
-      color: theme?.isGradient ? theme?.themeGradient?.font4 : theme?.themeColors?.font4,
-      wordBreak: 'break-word'
-    },
-    contentText: {
-      padding: theme.spacing.padding.tiny
+      width: '100%',
+      padding: '40px 0',
+      position: 'static'
     },
     contentHeading: {
-      fontStyle: 'normal',
-      fontSize: theme.typography.fontSize.h5,
-      fontWeight: theme.typography.fontWeight.bold,
-      lineHeight: '32px',
-      marginBottom: '8px',
-      color: theme?.palette?.font?.default,
-      wordBreak: 'break-word'
+      margin: '20px 20px 0 20px'
     },
     contentPara: {
-      fontStyle: 'normal',
-      fontSize: theme.typography.fontSize.subHead,
-      lineHeight: '32px',
-      color: theme?.palette?.font?.primary,
-      wordBreak: 'break-word'
-    },
-    '@media screen and (max-width: 767px)': {
-      contentContainer: {
-        width: '100%'
-      },
-      content: {
-        display: 'flex',
-        flexDirection: 'column',
-        borderRadius: theme.shape.borderRadius.large,
-        width: '100%',
-        height: 'auto',
-        '&:nth-child(2n)': {
-          marginLeft: '0',
-          '& $contentText': {
-            marginRight: '0',
-            alignSelf: 'flex-start'
-            // padding: '0'
-          }
-        },
-
-        '&:nth-child(2n+1)': {
-          marginRight: '0',
-          '& $contentText': {
-            marginLeft: '0',
-            alignSelf: 'flex-start'
-            // padding: '0'
-          }
-        }
-      },
-
-      contentNumber: {
-        width: '100%',
-        padding: '24px',
-        position: 'static'
-      }
+      margin: '16px 20px 24px 20px'
     }
-  };
-});
+  }
+}));
 
 function List({
   sectionData
@@ -2941,12 +2746,10 @@ function List({
   const {
     layout: {
       containerWidth
-    },
-    isMobile
+    }
   } = useContext(PageContext);
   const classes = useSectionStyles$7({
-    containerWidth,
-    isMobile
+    containerWidth
   });
   const [nodeData] = sectionData.components;
   const getNumber = val => {
@@ -2963,7 +2766,7 @@ function List({
     dangerouslySetInnerHTML: {
       __html: nodeData.cardHeading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("h2", {
     className: classes.heading
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.title?.refSetter,
@@ -2980,13 +2783,13 @@ function List({
       className: classes.contentNumber
     }, getNumber(ind + 1)), /*#__PURE__*/React.createElement("div", {
       className: classes.contentText
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("h3", {
       ref: dt?.contentHeading?.refSetter,
       className: classes.contentHeading,
       dangerouslySetInnerHTML: {
         __html: dt.contentHeading.metadata.value
       }
-    }), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("p", {
       ref: dt?.contentPara?.refSetter,
       className: classes.contentPara,
       dangerouslySetInnerHTML: {
@@ -3010,33 +2813,29 @@ 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',
-    zIndex: '9',
-    height: '100%'
+    zIndex: '9'
   },
   absoluteButtons: {
     display: 'flex',
     gap: '20px',
     justifyContent: 'center',
-    bottom: '10%',
+    bottom: '25px',
     position: 'absolute',
     width: '100%'
   },
-  buttonClass: {
-    margin: `${theme.spacing.margin.tiny}px 0px`
-  },
   contentContainer: {
     // padding: '100px 0',
     // height: '100%',
@@ -3072,33 +2871,27 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     height: '100%'
   },
   textContainer: {
-    padding: `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
-    // margin: `0px ${theme.spacing.padding.medium} 0px ${theme.spacing.padding.medium}`,
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'column'
+    padding: '100px 0',
+    margin: '0 auto',
+    width: '80%'
   },
   subTitleHeading: {
     color: theme?.palette?.font?.invertedDefault,
     marginBottom: '8px',
-    fontSize: theme.typography.fontSize.subHead,
+    fontSize: '16px',
     wordBreak: 'break-word'
   },
   heading: {
     margin: '0',
-    fontSize: theme.typography.fontSize.h1,
+    fontSize: '62px',
     color: theme?.palette?.font?.invertedDefault,
     wordBreak: 'break-word'
   },
   description: {
-    margin: `${theme.spacing.margin.tiny}px 0px`,
+    margin: '40px 0',
     color: theme?.palette?.font?.invertedDefault,
     lineHeight: '24px',
-    wordBreak: 'break-word',
-    fontSize: theme.typography.fontSize.subHead
+    wordBreak: 'break-word'
   },
   sideBannerImage: {
     width: '100%',
@@ -3116,19 +2909,22 @@ 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: {
@@ -3195,14 +2991,12 @@ const Section$3 = ({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }) : null, nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React.createElement("div", {
-    className: classes.buttonClass
-  }, /*#__PURE__*/React.createElement(Button, {
+  }) : null, nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__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,
@@ -3244,16 +3038,15 @@ var index$j = /*#__PURE__*/Object.freeze({
 const useSectionStyles$5 = createUseStyles(theme => {
   return {
     section: {
-      paddingBottom: `${theme?.spacing?.padding?.regular}px`,
-      background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
+      paddingBottom: '70px',
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
       },
       '& h2,& h3': {
-        fontWeight: `${theme?.typography?.fontWeight?.medium}`,
+        fontWeight: '500',
         '& b,& strong': {
-          fontWeight: `${theme?.typography?.fontWeight?.bold}`
+          fontWeight: '700'
         }
       }
     },
@@ -3267,7 +3060,7 @@ const useSectionStyles$5 = createUseStyles(theme => {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      padding: `${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px 0px ${theme?.spacing?.padding?.medium}px`
+      padding: '140px 70px 0'
     },
     imageContainerDiv: {
       width: '50%',
@@ -3286,7 +3079,7 @@ const useSectionStyles$5 = createUseStyles(theme => {
       }
     },
     imageBorder: {
-      // border: `2px solid ${theme?.palette?.primary?.light}`,
+      border: `2px solid ${theme?.palette?.primary?.light}`,
       borderRadius: theme?.shape?.borderRadius?.small,
       position: 'absolute',
       width: '100%',
@@ -3302,26 +3095,26 @@ const useSectionStyles$5 = createUseStyles(theme => {
       objectFit: 'cover'
     },
     textContainer: {
-      padding: `0 ${theme?.spacing?.padding?.xSmall}px`,
+      padding: '0 60px',
       textAlign: 'left',
       margin: '0 auto',
       width: '50%'
     },
     subTitleHeading: {
       marginBottom: '8px',
-      fontSize: `${theme?.typography?.fontSize?.subHead}px`,
+      fontSize: '16px',
       color: theme?.palette?.font?.tertiary,
       wordBreak: 'break-word'
     },
     heading: {
       margin: '0',
-      fontSize: `${theme?.typography?.fontSize?.h1}px`,
+      fontSize: '72px',
       color: theme?.palette?.font?.default,
       wordBreak: 'break-word'
     },
     description: {
       margin: '40px 0',
-      // color: theme?.palette?.font?.primary,
+      color: theme?.palette?.font?.primary,
       lineHeight: '24px',
       wordBreak: 'break-word'
     },
@@ -3330,9 +3123,9 @@ const useSectionStyles$5 = createUseStyles(theme => {
         padding: '0 0 40px'
       },
       centerData: {
-        flexDirection: 'column-reverse',
+        flexDirection: 'column',
         width: '100%',
-        padding: `${theme?.spacing?.padding?.medium}px ${theme?.spacing?.padding?.regular}px`
+        padding: '0'
       },
       imageContainer: {
         height: 'unset !important',
@@ -3352,11 +3145,11 @@ const useSectionStyles$5 = createUseStyles(theme => {
         height: 'unset !important'
       },
       textContainer: {
-        padding: `${theme?.spacing?.padding?.regular}px 0px`,
+        padding: '20px 20px',
         width: 'unset'
       },
       heading: {
-        fontSize: `${theme?.typography?.fontSize?.h3}px`
+        fontSize: '40px'
       },
       description: {
         margin: '16px 0'
@@ -3390,6 +3183,8 @@ 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", {
@@ -3460,21 +3255,18 @@ const useSectionStyles$4 = createUseStyles(theme => ({
     width: '100%',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: ({
-      isMobile
-    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+    padding: '60px 70px',
     '&, & *, & *: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: ({
@@ -3486,24 +3278,22 @@ const useSectionStyles$4 = createUseStyles(theme => ({
     left: '0',
     width: '100%',
     height: '50%',
-    position: 'absolute'
-    // background: theme?.palette?.background?.primary
+    position: 'absolute',
+    background: theme?.palette?.background?.primary
   },
-
   sectionContainer: {
-    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
+    backgroundColor: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.secondary,
     borderRadius: theme?.shape?.borderRadius?.regular,
-    padding: theme.spacing.padding.small,
+    padding: '40px 80px',
     position: 'relative'
   },
   cardHeading: {
-    fontSize: theme.typography.fontSize.h2,
-    fontWeight: theme.typography.fontWeight.bold,
+    fontSize: '56px',
     lineHeight: '71px',
     letterSpacing: '-3px',
     color: theme?.palette?.font?.secondary,
-    marginBottom: theme.spacing.padding.tiny,
+    margin: '0 0 32px 0',
     wordBreak: 'break-word'
   },
   contentContainer: {
@@ -3512,9 +3302,10 @@ const useSectionStyles$4 = createUseStyles(theme => ({
     justifyContent: 'space-between'
   },
   title: {
-    fontSize: theme.typography.fontSize.h6,
+    fontSize: '20px',
     lineHeight: '32px',
     color: theme?.palette?.font?.primary,
+    margin: '0 80px 0 0',
     width: 'calc(50% - 80px)',
     wordBreak: 'break-word'
   },
@@ -3552,44 +3343,42 @@ const useSectionStyles$4 = createUseStyles(theme => ({
     section: {
       display: 'flex',
       flexDirection: 'column',
-      alignItems: 'center'
+      alignItems: 'center',
+      padding: '30px 20px'
     },
     sectionContainer: {
-      borderRadius: theme?.shape?.borderRadius?.large,
-      textAlign: 'center',
-      display: 'flex',
-      alignItems: 'center',
-      flexDirection: 'column'
+      padding: '30px 20px',
+      borderRadius: theme?.shape?.borderRadius?.large
     },
     partialBackground: {
       height: '150px'
     },
     title: {
       width: '100%',
-      lineHeight: '22px',
-      margin: '0px 0px 16px 0px'
+      margin: '0',
+      fontSize: '20px',
+      lineHeight: '32px'
     },
     cardHeading: {
+      fontSize: '24px',
       lineHeight: '32px',
       letterSpacing: '-1px',
-      width: '50%',
-      lineHeight: 'normal'
+      marginBottom: '20px'
     },
     contentContainer: {
       display: 'flex',
       flexDirection: 'column',
-      justifyContent: 'flex-start',
-      textAlign: 'center'
+      justifyContent: 'flex-start'
     },
     inputContainer: {
       display: 'block',
       width: '100%',
+      margin: '24px 16px 0 16px',
       position: 'initial'
     },
     btnContainer: {
       right: 'unset',
-      position: 'initial',
-      marginTop: '4px'
+      position: 'initial'
     }
   }
 }));
@@ -3637,59 +3426,56 @@ async function postApiCallForm(baseURLs, data, extraProps) {
   }
 }
 
-const inputStyles = createUseStyles(theme => {
-  console.log('themexxxxdsf', theme);
-  return {
-    inputField: {
-      width: '100%',
-      maxWidth: '314px',
-      background: theme?.palette?.background?.default,
-      border: `1px solid ${theme?.isGradient ? theme?.themeGradient?.AccentColor : theme?.themeColors?.inputBorderColor}`,
-      borderRadius: theme?.shape?.borderRadius?.regular,
-      padding: '14px 12px',
-      display: 'flex',
+const inputStyles = createUseStyles(theme => ({
+  inputField: {
+    width: '100%',
+    maxWidth: '314px',
+    background: theme?.palette?.background?.default,
+    border: `1px solid ${theme?.palette?.border?.secondary}`,
+    borderRadius: theme?.shape?.borderRadius?.regular,
+    padding: '14px 12px',
+    display: 'flex',
+    fontWeight: '400',
+    fontSize: '16px',
+    lineHeight: '20px',
+    verticalalign: 'top',
+    resize: 'none',
+    fontFamily: 'inherit',
+    '&::placeholder': {
       fontWeight: '400',
       fontSize: '16px',
       lineHeight: '20px',
-      verticalalign: 'top',
-      resize: 'none',
-      fontFamily: 'inherit',
-      '&::placeholder': {
-        fontWeight: '400',
-        fontSize: '16px',
-        lineHeight: '20px',
-        color: theme?.palette?.font?.primary,
-        fontFamily: theme?.typography?.fontFamily
-      },
-      '&:focus': {
-        outline: 'none'
-      }
-    },
-    error: {
-      borderBottom: '1px solid red',
-      position: 'absolute',
-      bottom: '-8px',
-      width: 'calc(100% - 24px)'
+      color: theme?.palette?.font?.primary,
+      fontFamily: theme?.typography?.fontFamily
     },
-    errorBorder: {
-      border: `1px solid red`,
+    '&:focus': {
+      outline: 'none'
+    }
+  },
+  error: {
+    borderBottom: '1px solid red',
+    position: 'absolute',
+    bottom: '-8px',
+    width: 'calc(100% - 24px)'
+  },
+  errorBorder: {
+    border: `1px solid red`,
+    color: 'red',
+    '&::placeholder': {
       color: 'red',
-      '&::placeholder': {
-        color: 'red',
-        opacity: '0.5'
-      }
+      opacity: '0.5'
+    }
+  },
+  '@media screen and (max-width: 767px)': {
+    inputField: {
+      width: '100%',
+      maxWidth: 'unset'
     },
-    '@media screen and (max-width: 767px)': {
-      inputField: {
-        width: '100%',
-        maxWidth: 'unset'
-      },
-      error: {
-        bottom: '-2px'
-      }
+    error: {
+      bottom: '-2px'
     }
-  };
-});
+  }
+}));
 
 function Input({
   data,
@@ -3702,12 +3488,9 @@ function Input({
   const {
     onChange,
     onBlur,
-    onFocus,
-    theme
+    onFocus
   } = props;
-  const classes = inputStyles({
-    theme
-  });
+  const classes = inputStyles();
   const Comp = inputType;
   return /*#__PURE__*/React.createElement(Comp, _extends({}, inputType === 'input' ? {
     type: 'text'
@@ -3740,8 +3523,7 @@ function SubscribeToNewsletter({
   } = useContext(PageContext);
   const [nodeData] = sectionData.components;
   const classes = useSectionStyles$4({
-    containerWidth,
-    isMobile
+    containerWidth
   });
   let formInitialValue = nodeData?.inputField?.metadata?.value;
   const [inputVal, setInputVal] = useState(formInitialValue);
@@ -3787,7 +3569,7 @@ function SubscribeToNewsletter({
     className: classes.partialBackground
   }), /*#__PURE__*/React.createElement("div", {
     className: classes.sectionContainer
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("h2", {
     className: classes.cardHeading
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.cardHeading?.refSetter,
@@ -3838,14 +3620,12 @@ function SubscribeToNewsletter({
     type: nodeData?.cta?.metadata?.type,
     size: isMobile ? 'small' : 'medium',
     styling: isMobile ? {
-      marginTop: '12px',
-      border: 'none'
+      marginTop: '12px'
     } : {
       maxWidth: '200px',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      border: 'none'
+      textOverflow: 'ellipsis'
     },
     disabled: btnDisabled
   })))))));
@@ -3856,181 +3636,171 @@ var index$h = /*#__PURE__*/Object.freeze({
   'default': SubscribeToNewsletter
 });
 
-const useTestimonialStyles = createUseStyles(theme => ({
-  testimonialContainer: {
-    // background: theme?.palette?.background?.primary,
-    overflow: 'hidden',
-    padding: `${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'
-    //   }
-    // }
-  },
-
-  sectionContainer: {
-    margin: '0 auto',
-    maxWidth: ({
-      containerWidth
-    } = {}) => containerWidth
-  },
-  testimonialText: {
-    color: theme?.palette?.font?.secondary,
-    fontSize: theme.typography.fontSize.subHead,
-    wordBreak: 'break-word',
-    textTransform: 'uppercase'
-  },
-  testimonialHeader: {
-    fontSize: theme.typography.fontSize.h2,
-    color: theme?.palette?.font?.default,
-    fontWeight: theme.typography.fontWeight.bold,
-    marginBottom: theme.spacing.margin.tiny,
-    marginTop: '8px',
-    overflow: 'hidden',
-    wordBreak: 'break-word',
-    // whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis'
-  },
-  sliderContainer: {
-    marginRight: `-${theme.spacing.margin.regular}px`
-  },
-  singleCard: {
-    // margin: '6px 12px',
-    position: 'relative',
-    height: 'calc(100% - 12px)',
-    width: 'calc(100% - 24px)',
-    background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background1,
-    boxShadow: theme?.shadows?.primary,
-    borderRadius: theme?.shape?.borderRadius?.regular
-  },
-  contentRow: {
-    display: 'grid',
-    gridTemplateColumns: ({
-      slidesToShow
-    } = {}) => `repeat(${slidesToShow},minmax(0, 1fr))`
-  },
-  cardDetails: {
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    padding: '48px',
-    borderRadius: '8px',
-    alignItems: 'flex-start'
-  },
-  quoteIcon: {
-    position: 'absolute',
-    right: '20px'
-  },
-  reviewText: {
-    // padding: '48px 41px 0 48px',
-    marginBottom: theme.spacing.margin.tiny,
-    fontSize: theme.typography.fontSize.subHead,
-    wordBreak: 'break-word',
-    color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font2,
-    lineHeight: '22px'
-  },
-  userContainer: {
-    display: 'flex',
-    gap: '16px',
-    alignItems: 'center'
-  },
-  userImageContainer: {
-    width: '64px',
-    height: '64px',
-    position: 'relative',
-    // paddingBottom: '55px',
-    objectFit: 'cover'
-  },
-  userImageDummy: {
-    width: '64px',
-    height: '64px',
-    borderRadius: '32px',
-    background: '#666666',
-    marginRight: '16px',
-    flexShrink: '0'
-  },
-  userImage: {
-    width: '64px',
-    height: '64px',
-    borderRadius: '32px',
-    marginRight: '16px'
-  },
-  userName: {
-    color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font2,
-    margin: '0',
-    fontSize: theme.typography.fontSize.h5,
-    // paddingTop: '16px',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis'
-  },
-  buttonContainer: {
-    display: 'flex',
-    gap: '20px',
-    justifyContent: 'center',
-    // paddingRight: theme.spacing.padding.medium,
-    marginTop: theme.spacing.margin.tiny
-  },
-  '@media (max-width: 768px)': {
+const useTestimonialStyles = createUseStyles(theme => {
+  return {
     testimonialContainer: {
-      padding: `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px`
-    },
-    // testimonialCardAndText: {
-    //   margin: '0 20px'
-    // },
-
-    // testimonialHeader: {
-    //   fontSize: '24px',
-    //   color: theme?.palette?.font?.default,
-    //   margin: '4px 0 12px 0',
-    //   overflow: 'hidden',
-    //   // whiteSpace: 'nowrap',
-    //   wordBreak: 'break-word',
-    //   textOverflow: 'ellipsis'
-    // },
-    userImageDummy: {
-      width: '48px',
-      height: '48px',
-      borderRadius: '24px',
-      marginRight: '16px'
+      background: theme?.palette?.background?.primary,
+      overflow: 'hidden',
+      padding: '70px',
+      '&, & *, & *:before, & *:after': {
+        fontFamily: theme?.typography?.fontFamily,
+        boxSizing: 'border-box'
+      },
+      '& h2,& h3': {
+        fontWeight: '500',
+        '& b,& strong': {
+          fontWeight: '700'
+        }
+      }
     },
-    userImage: {
-      width: '48px',
-      height: '48px',
-      borderRadius: '24px',
-      marginRight: '16px'
+    sectionContainer: {
+      margin: '0 auto',
+      maxWidth: ({
+        containerWidth
+      } = {}) => containerWidth
     },
-    reviewText: {
-      marginBottom: '16px'
+    testimonialCardAndText: {
+      marginTop: '70px'
+    },
+    testimonialText: {
+      color: theme?.palette?.font?.secondary,
+      fontSize: '16px',
+      marginLeft: '10px',
+      wordBreak: 'break-word'
+    },
+    testimonialHeader: {
+      fontSize: '56px',
+      color: theme?.palette?.font?.default,
+      margin: '10px 0 40px 10px',
+      overflow: 'hidden',
+      wordBreak: 'break-word',
+      // whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
+    },
+    sliderContainer: {
+      marginRight: '-20px'
     },
     singleCard: {
-      margin: '6px 2px',
-      width: 'calc(100% - 14px)'
+      margin: '6px 12px',
+      position: 'relative',
+      height: 'calc(100% - 12px)',
+      width: 'calc(100% - 24px)',
+      background: theme?.palette?.background?.default,
+      boxShadow: theme?.shadows?.primary,
+      borderRadius: theme?.shape?.borderRadius?.regular
+    },
+    contentRow: {
+      display: 'grid',
+      gridTemplateColumns: ({
+        slidesToShow
+      } = {}) => `repeat(${slidesToShow},minmax(0, 1fr))`
+    },
+    cardDetails: {
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'space-between'
+    },
+    quoteIcon: {
+      position: 'absolute',
+      right: '20px'
+    },
+    reviewText: {
+      padding: '48px 41px 0 48px',
+      marginBottom: '48px',
+      fontSize: '18px',
+      wordBreak: 'break-word',
+      color: theme?.palette?.font?.primary
+    },
+    userContainer: {
+      display: 'flex',
+      gap: '15px',
+      padding: '0 0 29px 48px'
+    },
+    userImageContainer: {
+      width: '64px',
+      height: '64px',
+      position: 'relative',
+      // paddingBottom: '55px',
+      objectFit: 'cover'
+    },
+    userImageDummy: {
+      width: '64px',
+      height: '64px',
+      borderRadius: '32px',
+      background: '#666666',
+      marginRight: '16px',
+      flexShrink: '0'
+    },
+    userImage: {
+      width: '64px',
+      height: '64px',
+      borderRadius: '32px',
+      marginRight: '16px'
     },
     userName: {
-      // paddingTop: '8px',
+      color: theme?.palette?.font?.default,
+      margin: '0',
+      fontSize: '24px',
+      paddingTop: '16px',
       overflow: 'hidden',
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis'
     },
-    userImageContainer: {
-      width: '48px',
-      height: '48px'
+    buttonContainer: {
+      display: 'flex',
+      width: '120px',
+      justifyContent: 'space-between',
+      margin: '36px auto 81px auto'
     },
-    cardDetails: {
-      padding: '16px'
+    '@media (max-width: 768px)': {
+      testimonialContainer: {
+        padding: '60px 0'
+      },
+      testimonialCardAndText: {
+        margin: '0 20px'
+      },
+      testimonialHeader: {
+        fontSize: '24px',
+        color: theme?.palette?.font?.default,
+        margin: '4px 0 12px 0',
+        overflow: 'hidden',
+        // whiteSpace: 'nowrap',
+        wordBreak: 'break-word',
+        textOverflow: 'ellipsis'
+      },
+      userImageDummy: {
+        width: '48px',
+        height: '48px',
+        borderRadius: '24px',
+        marginRight: '16px'
+      },
+      userImage: {
+        width: '48px',
+        height: '48px',
+        borderRadius: '24px',
+        marginRight: '16px'
+      },
+      reviewText: {
+        marginBottom: '40px'
+      },
+      singleCard: {
+        margin: '6px 2px',
+        width: 'calc(100% - 4px)'
+      },
+      userName: {
+        paddingTop: '8px',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+      },
+      userImageContainer: {
+        width: '48px',
+        height: '48px'
+      }
     }
-    // sliderContainer: {
-    //   marginRight: '-24px'
-    // },
-  }
-}));
+  };
+});
 
 function QuotesComponent() {
   const theme = useTheme();
@@ -4058,14 +3828,13 @@ function Section$1({
   const classes = useTestimonialStyles({
     containerWidth,
     cardsCount,
-    slidesToShow,
-    isMobile
+    slidesToShow
   });
   const settings = {
     className: classes.sliderContainer,
     slidesToShow,
     centerMode: true,
-    centerPadding: isMobile ? '0px 0 0' : '80px 0 0'
+    centerPadding: isMobile ? '10px 0 0' : '80px 0 0'
   };
   const carouselContent = carouselList.map((el, idx) =>
   /*#__PURE__*/
@@ -4079,7 +3848,7 @@ function Section$1({
     className: classes.quoteIcon
   }, /*#__PURE__*/React.createElement(QuotesComponent, null)), /*#__PURE__*/React.createElement("div", {
     className: classes.cardDetails
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("p", {
     ref: el?.cardTextContent?.refSetter,
     className: classes.reviewText,
     dangerouslySetInnerHTML: {
@@ -4124,7 +3893,7 @@ function Section$1({
     dangerouslySetInnerHTML: {
       __html: nodeData?.carouselHeading?.metadata?.value
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("h2", {
     className: classes.testimonialHeader
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.title?.refSetter,
@@ -4272,7 +4041,8 @@ const useVideoStyles$1 = createUseStyles(theme => {
       height: '100%',
       width: '100%',
       objectFit: 'cover',
-      objectPosition: 'top'
+      objectPosition: 'top',
+      opacity: '0.8'
     },
     '@media (max-width: 767px)': {
       iframe: {
@@ -4307,7 +4077,10 @@ function VideoPlayer(props) {
     }
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, !isLoaded && /*#__PURE__*/React.createElement("div", {
-    className: classes.imgContainer
+    className: classes.imgContainer,
+    onClick: () => {
+      setIsEnableed(true);
+    }
   }, /*#__PURE__*/React.createElement(NextImageRenderer, {
     src: imageUrl,
     sectionIndex: props?.sectionIndex,
@@ -4336,23 +4109,20 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
     videoTestimonialSuperContainer: {
       display: 'flex',
       justifyContent: 'center',
-      padding: ({
-        isMobile
-      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+      padding: '70px',
       '&, & *, & *:before, & *:after': {
-        fontFamily: theme?.typography?.fontFamily
-        // boxSizing: 'border-box'
+        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',
+      margin: '0 auto',
       maxWidth: ({
         containerWidth
       } = {}) => containerWidth
@@ -4363,28 +4133,29 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       fontFamily: theme?.typography?.fontFamily
     },
     videoTestimonialHeading: {
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: '16px',
       lineHeight: '20px',
       letterSpacing: '3px',
       textTransform: 'uppercase',
       color: theme.palette.font.tertiary,
-      wordBreak: 'break-word',
-      marginBottom: '8px'
+      wordBreak: 'break-word'
     },
     videoTestimonialTitle: {
-      fontSize: theme.typography.fontSize.h1,
-      // lineHeight: '71px',
+      fontSize: '56px',
+      lineHeight: '71px',
       letterSpacing: '-3px',
-      fontWeight: theme.typography.fontWeight.bold,
-      marginBottom: theme.spacing.margin.tiny,
+      margin: '0',
       color: theme.palette.font.default,
       wordBreak: 'break-word'
     },
+    videoCarouselContainer: {
+      marginTop: '16px'
+    },
     videoCarousel: {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'flex-start',
-      gap: theme.spacing.margin.small
+      gap: '60px'
     },
     iframeSuperContainer: {
       height: '100%',
@@ -4406,49 +4177,57 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
     videoDetails: {
       width: '100%',
       display: 'flex',
-      gap: '24px',
       flexDirection: 'column',
       alignItems: 'flex-start'
     },
     videoDetailsHeading: {
-      fontSize: theme.typography.fontSize.h3,
+      fontSize: '40px',
       lineHeight: '48px',
       margin: '0',
       letterSpacing: '-1px',
       wordBreak: 'break-word',
-      color: theme.palette.font.default,
-      fontWeight: theme.typography.fontWeight.bold
+      color: theme.palette.font.default
     },
     videoDetailsContent: {
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: '16px',
       lineHeight: '24px',
       wordBreak: 'break-word',
-      color: theme.palette.font.primary
+      color: theme.palette.font.primary,
+      margin: '10px 0 20px'
     },
     videoDetailsSubContent: {
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: '16px',
       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'
+        flexDirection: 'column',
+        gap: '20px'
       },
       videoCarouselContainer: {
-        height: 'max-content'
+        height: 'max-content',
+        paddingRight: '10px'
       },
       videoDetails: {
-        width: '100%',
-        gap: '16px'
+        width: '100%'
       },
       videoDetailsHeading: {
+        fontSize: '16px',
         lineHeight: '20px'
       },
       videoTestimonialTitle: {
+        fontSize: '24px',
         lineHeight: '36px',
         letterSpacing: '-1px'
+      },
+      videoDetailsContent: {
+        marginTop: '4px'
       }
     }
   };
@@ -4474,19 +4253,19 @@ const SingleVideoSlide$2 = props => {
     sectionIndex: props?.sectionIndex
   }))), /*#__PURE__*/React.createElement("div", {
     className: classes.videoDetails
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("h3", {
     ref: data?.videoTextHeading?.refSetter,
     className: classes.videoDetailsHeading,
     dangerouslySetInnerHTML: {
       __html: data.videoTextHeading.metadata.value
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("p", {
     ref: data?.videoTextContent?.refSetter,
     className: classes.videoDetailsContent,
     dangerouslySetInnerHTML: {
       __html: data.videoTextContent.metadata.value
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("p", {
     ref: data?.videoTextSubContent?.refSetter,
     className: classes.videoDetailsSubContent,
     dangerouslySetInnerHTML: {
@@ -4502,12 +4281,10 @@ function VideoTestimonial({
   const {
     layout: {
       containerWidth
-    },
-    isMobile
+    }
   } = useContext(PageContext);
   const classes = useVideoTestimonialStyles({
-    containerWidth,
-    isMobile
+    containerWidth
   });
   const [videoData] = sectionData.components;
   const Wrapper = videoData.videoCarousel.components.length > 1 ? Carousel : Fragment;
@@ -4524,7 +4301,7 @@ function VideoTestimonial({
     dangerouslySetInnerHTML: {
       __html: videoData.videoHeading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("h2", {
     className: classes.videoTestimonialTitle
   }, /*#__PURE__*/React.createElement("span", {
     ref: videoData?.title?.refSetter,
@@ -4546,51 +4323,47 @@ var index$f = /*#__PURE__*/Object.freeze({
 const useVideoStyles = createUseStyles(theme => {
   return {
     videoSuperContainer: {
-      padding: ({
-        isMobile
-      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
-      background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
+      padding: '70px',
+      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
     },
-    // videoContainer: {
-    //   marginTop: '70px'
-    // },
-
+    videoContainer: {
+      marginTop: '70px'
+    },
     videoHeading: {
-      fontSize: theme.typography.fontSize.subHead,
-      textTransform: 'uppercase',
+      fontSize: '16px',
       lineHeight: '20px',
+      marginBottom: '4px',
+      letterSpacing: '3px',
       color: theme?.palette?.font?.primary,
       wordBreak: 'break-word'
     },
     videoTitle: {
-      fontSize: theme.typography.fontSize.h2,
-      fontWeight: theme.typography.fontWeight.bold,
+      fontSize: '56px',
       lineHeight: '71px',
       letterSpacing: '-3px',
-      marginBottom: theme.spacing.margin.tiny,
-      marginTop: '8px',
+      marginBottom: '20px',
+      marginTop: '0',
       color: theme?.palette?.font?.default,
       wordBreak: 'break-word'
     },
     sliderContainer: {
-      marginRight: `-${theme.spacing.padding.medium}px`
+      marginRight: '-35px'
     },
     singleSlideContainer: {
       backgroundColor: theme?.palette?.background?.default,
@@ -4598,7 +4371,7 @@ const useVideoStyles = createUseStyles(theme => {
       width: 'calc(100% - 40px)',
       height: 'calc(100% - 40px)',
       borderRadius: theme?.shape?.borderRadius?.regular,
-      padding: '48px',
+      padding: '40px',
       boxShadow: theme?.shadows?.primary
     },
     contentRow: {
@@ -4611,7 +4384,6 @@ const useVideoStyles = createUseStyles(theme => {
       width: '100%',
       borderRadius: theme?.shape?.borderRadius?.regular,
       position: 'relative',
-      overflow: 'hidden',
       paddingBottom: '56.25%'
     },
     iframe: {
@@ -4626,32 +4398,43 @@ const useVideoStyles = createUseStyles(theme => {
       margin: '12px 12px 0'
     },
     videoDetailsHeading: {
-      fontSize: theme.typography.fontSize.h5,
-      fontWeight: theme.typography.fontWeight.bold,
+      fontSize: '24px',
       lineHeight: '32px',
-      marginBottom: '8px',
+      margin: '0',
       color: theme?.palette?.font?.default,
       wordBreak: 'break-word'
     },
     videoDetailsSubHeading: {
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: '16px',
       lineHeight: '24px',
       wordBreak: 'break-word',
       color: theme?.palette?.font?.primary
     },
     '@media (max-width: 767px)': {
+      videoSuperContainer: {
+        padding: '70px 20px 60px'
+      },
       videoHeading: {
-        lineHeight: '20px'
+        fontSize: '16px',
+        lineHeight: '20px',
+        letterSpacing: '3px'
+      },
+      videoTitle: {
+        fontSize: '24px',
+        lineHeight: '36px',
+        letterSpacing: '-1px',
+        marginBottom: '0',
+        marginTop: '0'
       },
       videoContainer: {
         margin: '0'
       },
       sliderContainer: {
-        // marginLeft: '-6px',
-        marginRight: '0px'
+        marginLeft: '-6px',
+        marginRight: '-20px'
       },
       singleSlideContainer: {
-        padding: '16px',
+        padding: '0',
         width: 'calc(100% - 12px)',
         height: 'calc(100% - 24px)',
         margin: '12px 6px'
@@ -4663,28 +4446,14 @@ const useVideoStyles = createUseStyles(theme => {
         textAlign: 'left',
         margin: '12px 12px 0'
       },
-      videoTitle: {
-        display: 'flex',
-        justifyContent: 'center',
-        textAlign: 'center',
-        lineHeight: '36px',
-        letterSpacing: '-1px'
+      videoDetailsHeading: {
+        fontSize: '18px',
+        margin: '0'
       },
-      videoHeading: {
-        display: 'flex',
-        justifyContent: 'center',
-        textAlign: 'center'
+      videoDetailsSubHeading: {
+        fontSize: '12px',
+        paddingBottom: '20px'
       }
-
-      // videoDetailsHeading: {
-      //   fontSize: '18px',
-      //   margin: '0'
-      // },
-
-      // videoDetailsSubHeading: {
-      //   fontSize: '12px',
-      //   paddingBottom: '20px'
-      // }
     }
   };
 });
@@ -4698,13 +4467,16 @@ const SingleSlide$1 = props => {
     className: classes.singleSlideContainer
   }, /*#__PURE__*/React.createElement("div", {
     ref: data?.videoFrame?.refSetter,
-    className: classes.iframeContainer
+    className: classes.iframeContainer,
+    style: {
+      background: 'linear-gradient(#333333,rgb(0 0 0))'
+    }
   }, /*#__PURE__*/React.createElement(VideoPlayer, {
     imageUrl: data.videoFrame.metadata?.thumbnail,
     videoUrl: data.videoFrame.metadata?.value
   })), /*#__PURE__*/React.createElement("div", {
     className: classes.videoDetailsContainer
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("h3", {
     ref: data?.videoTitle?.refSetter,
     className: classes.videoDetailsHeading,
     dangerouslySetInnerHTML: {
@@ -4734,13 +4506,12 @@ function Video({
   const classes = useVideoStyles({
     containerWidth,
     cardsCount,
-    slidesToShow,
-    isMobile
+    slidesToShow
   });
   const settings = {
     className: classes.sliderContainer,
     slidesToShow,
-    centerPadding: isMobile ? '0px' : '100px 0 0',
+    centerPadding: isMobile ? '40px 0 0' : '100px 0 0',
     centerMode: true
   };
   const carouselContent = videoData.videoCarousel.components.map((data, index) => /*#__PURE__*/React.createElement(SingleSlide$1, {
@@ -4760,7 +4531,7 @@ function Video({
     dangerouslySetInnerHTML: {
       __html: videoData.videoHeading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("h2", {
     className: classes.videoTitle
   }, /*#__PURE__*/React.createElement("span", {
     ref: videoData?.videoTitle?.refSetter,
@@ -4780,10 +4551,10 @@ var index$e = /*#__PURE__*/Object.freeze({
   'default': Video
 });
 
-const useSectionStyles$3 = createUseStyles(theme => (console.log(theme), {
+const useSectionStyles$3 = createUseStyles(theme => ({
   section: {
     position: 'relative',
-    padding: `${theme?.spacing?.padding?.regular}px 0px ${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px`,
+    padding: '70px 0',
     backgroundColor: theme?.palette?.background?.default,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
@@ -4807,15 +4578,16 @@ const useSectionStyles$3 = createUseStyles(theme => (console.log(theme), {
     top: '0',
     left: '0',
     height: '350px',
-    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
+    background: theme?.palette?.background?.primary,
     width: '100%'
   },
   content: {
-    position: 'relative'
+    position: 'relative',
+    margin: '0 70px'
   },
   subTitleHeading: {
     width: '100%',
-    fontSize: theme.typography.fontSize.subHead,
+    fontSize: '16px',
     color: theme?.palette?.font?.tertiary,
     textAlign: 'left',
     lineHeight: '20px',
@@ -4823,8 +4595,8 @@ const useSectionStyles$3 = createUseStyles(theme => (console.log(theme), {
     wordBreak: 'break-word'
   },
   heading: {
-    margin: `8px 0 ${theme.spacing.margin.tiny}px`,
-    fontSize: theme.typography.fontSize.h2,
+    margin: '8px 0 20px',
+    fontSize: '56px',
     width: '100%',
     lineHeight: '70px',
     color: theme?.palette?.font?.default,
@@ -4846,16 +4618,16 @@ const useSectionStyles$3 = createUseStyles(theme => (console.log(theme), {
     height: 'calc(100% - 12px)'
   },
   cardContent: {
-    padding: theme.spacing.padding.tiny,
+    padding: '32px',
     height: '100%',
     display: 'flex',
     flexDirection: 'column'
   },
   cardHeading: {
-    fontSize: theme.typography.fontSize.h5,
+    fontSize: '24px',
     lineHeight: '32px',
     color: theme?.palette?.font?.default,
-    margin: `${theme.spacing.margin.tiny}px 0px`,
+    margin: '32px 0 16px',
     wordBreak: 'break-word'
   },
   imageContainer: {
@@ -4868,7 +4640,7 @@ const useSectionStyles$3 = createUseStyles(theme => (console.log(theme), {
     background: theme?.palette?.background?.primary
   },
   cardPara: {
-    fontSize: theme.typography.fontSize.subHead,
+    fontSize: '16px',
     lineHeight: '24px',
     color: theme?.palette?.font?.primary,
     margin: '0',
@@ -4884,10 +4656,13 @@ const useSectionStyles$3 = createUseStyles(theme => (console.log(theme), {
   '@media screen and (max-width: 767px)': {
     heading: {
       fontSize: '24px',
-      margin: `4px 0 ${theme.spacing.margin.tiny}px`,
+      margin: '4px 0 12px',
       lineHeight: '36px',
       padding: '0'
     },
+    content: {
+      margin: '0 20px'
+    },
     sliderContainer: {
       marginLeft: '-6px',
       marginRight: '-20px'
@@ -4902,6 +4677,12 @@ const useSectionStyles$3 = createUseStyles(theme => (console.log(theme), {
         slidesToShow,
         cardsCount
       } = {}) => cardsCount > slidesToShow ? `6px 2px 6px 6px` : `6px 0 6px 0`
+    },
+    cardContent: {
+      padding: '20px'
+    },
+    cardHeading: {
+      margin: '14px 0'
     }
   }
 }));
@@ -4998,64 +4779,67 @@ var index$d = /*#__PURE__*/Object.freeze({
 
 const useSectionStyles$2 = createUseStyles(theme => ({
   section: {
-    padding: ({
-      isMobile
-    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
-    background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background1,
+    padding: '70px',
+    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: theme.typography.fontSize.subHead,
+    fontSize: '20px',
     marginBottom: '8px',
-    color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font1,
-    wordBreak: 'break-word',
-    textTransform: 'uppercase',
-    letterSpacing: '3px'
+    color: theme?.palette?.font?.tertiary,
+    wordBreak: 'break-word'
   },
   title: {
-    fontSize: theme.typography.fontSize.h2,
-    fontWeight: theme.typography.fontWeight.bold,
-    lineHeight: 'normal',
+    fontSize: '56px',
+    lineHeight: '70px',
     margin: '0',
-    color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font1,
-    wordBreak: 'break-word',
-    marginBottom: theme.spacing.margin.tiny
+    color: theme?.palette?.font?.default,
+    wordBreak: 'break-word'
   },
   textContent: {
     display: 'grid',
     gridTemplateColumns: '1fr 1fr',
-    gap: '48px',
-    padding: '48px 0px'
+    gap: '80px'
   },
   textPara: {
-    background: 'white',
-    borderRadius: '8px',
-    padding: '40px',
+    margin: '20px 0 0 0',
     lineHeight: '24px',
     color: theme?.palette?.font?.primary,
-    wordBreak: 'break-word',
-    fontSize: theme.typography.fontSize.subHead,
-    boxShadow: '0px 2px 8px 0px rgba(0, 0, 0, 0.08)'
+    wordBreak: 'break-word'
   },
   '@media screen and (max-width: 767px)': {
+    section: {
+      padding: '60px 20px'
+    },
+    subHeading: {
+      fontSize: '16px',
+      lineHeight: '20px',
+      marginBottom: '4px'
+    },
+    title: {
+      fontSize: '24px',
+      lineHeight: '36px'
+    },
     textContent: {
-      gap: '16px',
-      padding: '16px 0px'
+      display: 'block'
+    },
+    textPara: {
+      marginTop: '12px'
     }
   }
 }));
@@ -5066,12 +4850,10 @@ const TextSection = ({
   const {
     layout: {
       containerWidth
-    },
-    isMobile
+    }
   } = useContext(PageContext);
   const classes = useSectionStyles$2({
-    containerWidth,
-    isMobile
+    containerWidth
   });
   const [nodeData] = sectionData.components;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("section", {
@@ -5094,13 +4876,13 @@ const TextSection = ({
     }
   })), /*#__PURE__*/React.createElement("div", {
     className: classes.textContent
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("p", {
     ref: nodeData?.textLeft?.refSetter,
     className: classes.textPara,
     dangerouslySetInnerHTML: {
       __html: nodeData.textLeft.metadata.value
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("p", {
     ref: nodeData?.textRight?.refSetter,
     className: classes.textPara,
     dangerouslySetInnerHTML: {
@@ -5118,21 +4900,18 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
   return {
     container: {
       background: theme?.palette?.background?.default,
-      padding: ({
-        isMobile
-      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px 0px ${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+      padding: '70px',
       '&, & *, & *: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: ({
@@ -5141,15 +4920,13 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
     },
     cardHeading: {
       color: theme?.palette?.font?.secondary,
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: '16px',
       letterSpacing: '3px',
-      wordBreak: 'break-word',
-      textTransform: 'uppercase'
+      wordBreak: 'break-word'
+    },
+    sliderContainer: {
+      marginRight: '-70px'
     },
-    // sliderContainer: {
-    //   marginRight: '-70px'
-    // },
-
     singleCard: {
       margin: '0 1px',
       width: 'calc(100% - 2px)',
@@ -5172,26 +4949,24 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       height: '100%'
     },
     title: {
-      fontSize: theme.typography.fontSize.h2,
+      fontSize: '56px',
       lineHeight: '70px',
       letterSpacing: '-3px',
       color: theme?.palette?.font?.default,
-      marginTop: '8px',
-      marginBottom: theme.spacing.margin.tiny,
+      margin: '8px 0 20px',
       overflow: 'hidden',
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis'
     },
     '@media (max-width: 768px)': {
-      // container: {
-      //   padding: '60px 20px'
-      // },
-
-      // cardHeading: {
-      //   marginLeft: '3px'
-      // },
-
+      container: {
+        padding: '60px 20px'
+      },
+      cardHeading: {
+        marginLeft: '3px'
+      },
       title: {
+        fontSize: '24px',
         lineHeight: '36px',
         letterSpacing: '-1px',
         color: theme?.palette?.font?.default,
@@ -5199,11 +4974,10 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
+      },
+      sliderContainer: {
+        marginRight: '-20px'
       }
-
-      // sliderContainer: {
-      //   marginRight: '-20px'
-      // }
     }
   };
 });
@@ -5225,12 +4999,11 @@ function PhotoGallery({
   const classes = usePhotoGalleryStyles({
     containerWidth,
     cardsCount,
-    slidesToShow,
-    isMobile
+    slidesToShow
   });
   const settings = {
     className: classes.sliderContainer,
-    dots: true,
+    dots: false,
     infinite: true,
     speed: 500,
     slidesToShow,
@@ -5284,73 +5057,64 @@ var index$b = /*#__PURE__*/Object.freeze({
 const useFaqListStyles = createUseStyles(theme => ({
   section: {
     width: '100%',
-    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
-    padding: ({
-      isMobile
-    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+    padding: '70px',
+    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: theme.typography.fontSize.subHead,
+    fontSize: '16px',
     marginBottom: '8px',
     wordBreak: 'break-word'
   },
   sectionHeading: {
-    fontSize: theme.typography.fontSize.h2,
-    fontWeight: theme.typography.fontWeight.bold,
+    fontSize: '56px',
+    margin: '0 0 20px',
     wordBreak: 'break-word',
-    marginBottom: `${theme.spacing.margin.tiny}px`
+    lineHeight: '71px'
   },
   container: {
     boxShadow: theme?.shadows?.secondary,
     borderRadius: '8px',
-    backgroundColor: theme?.palette?.background?.default
+    backgroundColor: theme?.palette?.background?.default,
+    padding: '40px 60px 60px'
   },
   basicCardContainer: {
-    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
+    borderBottom: theme?.borders?.secondary
   },
   header: {
     display: 'flex',
     justifyContent: 'space-between',
-    alignItems: 'center'
+    alignItems: 'center',
+    padding: '20px 0'
   },
   title: {
     color: theme?.palette?.font.default,
-    fontSize: theme.typography.fontSize.h5,
-    fontWeight: theme.typography.fontWeight.bold,
+    fontSize: '24px',
     margin: '0',
     wordBreak: 'break-word'
   },
   content: {
+    margin: ({
+      isSelected
+    } = {}) => isSelected ? '0 0 20px 0' : '0',
     color: theme?.palette?.font.primary,
-    fontSize: theme.typography.fontSize.subHead,
+    fontSize: '16px',
     lineHeight: '24px',
     maxHeight: ({
       isSelected
@@ -5359,12 +5123,28 @@ 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'
+        borderBottom: 'none',
+        paddingBottom: '1px'
       }
     }
   }
@@ -5377,13 +5157,11 @@ const FAQListing = ({
   const {
     layout: {
       containerWidth
-    },
-    isMobile
+    }
   } = useContext(PageContext);
   const classes = useFaqListStyles({
     selectedIndex,
-    containerWidth,
-    isMobile
+    containerWidth
   });
   const [nodeData] = sectionData.components;
   return /*#__PURE__*/React.createElement("section", {
@@ -5397,7 +5175,7 @@ const FAQListing = ({
     dangerouslySetInnerHTML: {
       __html: nodeData.subheading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("h2", {
     className: classes.sectionHeading
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.title?.refSetter,
@@ -5426,8 +5204,7 @@ const Accordion = ({
   return /*#__PURE__*/React.createElement("div", {
     className: classes.basicCardContainer
   }, /*#__PURE__*/React.createElement("div", {
-    onClick: onClick,
-    className: classes.innerContainer
+    onClick: onClick
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.header
   }, /*#__PURE__*/React.createElement("h3", {
@@ -5436,9 +5213,7 @@ const Accordion = ({
     dangerouslySetInnerHTML: {
       __html: item.question.metadata.value
     }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classes.arrowButton
-  }, /*#__PURE__*/React.createElement(ArrowButton, {
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ArrowButton, {
     down: isSelected,
     up: !isSelected,
     size: "small"
@@ -5458,22 +5233,19 @@ var index$a = /*#__PURE__*/Object.freeze({
 
 const useTextGridStyles = createUseStyles(theme => ({
   section: {
-    padding: ({
-      isMobile
-    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
-    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
+    padding: '70px',
+    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: ({
@@ -5482,27 +5254,24 @@ const useTextGridStyles = createUseStyles(theme => ({
   },
   subheading: {
     color: theme?.palette?.font.tertiary,
-    fontSize: theme.typography.fontSize.subHead,
+    fontSize: '16px',
     lineHeight: '20px',
     letterSpacing: '3px',
-    wordBreak: 'break-word',
-    textTransform: 'uppercase',
-    marginBottom: '8px'
+    wordBreak: 'break-word'
   },
   heading: {
-    fontSize: theme.typography.fontSize.h2,
-    lineHeight: 'normal',
-    fontWeight: theme.typography.fontWeight.bold,
+    fontSize: '56px',
+    lineHeight: '70px',
     letterSpacing: '-3px',
-    marginBottom: theme.spacing.margin.tiny,
+    margin: '8px 0 16px',
     wordBreak: 'break-word'
   },
   sliderContainer: {
     margin: '0 -10px'
   },
   node: {
-    margin: '0 16px',
-    padding: '48px',
+    margin: '6px 10px',
+    padding: '40px',
     position: 'relative',
     height: 'calc(100% - 12px)',
     background: theme?.palette?.background?.default,
@@ -5511,16 +5280,16 @@ const useTextGridStyles = createUseStyles(theme => ({
   },
   nodeTitle: {
     color: theme?.palette?.font.secondary,
-    fontSize: theme.typography.fontSize.h3,
-    fontWeight: theme.typography.fontWeight.bold,
-    lineHeight: 'normal',
+    fontSize: '40px',
+    lineHeight: '48px',
     margin: '0 0 20px',
     wordBreak: 'break-word'
   },
   nodePara: {
     color: theme?.palette?.font.tertiary,
-    fontSize: theme.typography.fontSize.subHead,
+    fontSize: '16px',
     lineHeight: '24px',
+    margin: '20px 0',
     wordBreak: 'break-word'
   },
   contentRow: {
@@ -5530,21 +5299,27 @@ 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: '16px',
-      margin: '0 6px'
+      padding: '20px'
     },
     nodeTitle: {
-      marginBottom: '0px'
+      fontSize: '24px',
+      lineHeight: '36px'
     },
     nodePara: {
-      margin: '16px 0'
-    },
-    heading: {
-      letterSpacing: '-1px'
+      margin: '12px 0'
     }
   }
 }));
@@ -5564,8 +5339,7 @@ const TextGrid = ({
   const classes = useTextGridStyles({
     containerWidth,
     cardsCount,
-    slidesToShow,
-    isMobile
+    slidesToShow
   });
   const settings = {
     className: classes.sliderContainer,
@@ -5582,7 +5356,7 @@ const TextGrid = ({
     dangerouslySetInnerHTML: {
       __html: item.contentHeading.metadata.value
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("p", {
     ref: item?.contentPara?.refSetter,
     className: classes.nodePara,
     dangerouslySetInnerHTML: {
@@ -5600,7 +5374,7 @@ const TextGrid = ({
     dangerouslySetInnerHTML: {
       __html: nodeData.subheading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("h2", {
     className: classes.heading
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.title?.refSetter,
@@ -5626,46 +5400,39 @@ const useCourseStyles = createUseStyles(theme => {
   return {
     coursesContainer: {
       overflow: 'hidden',
-      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'
-      //   }
-      // }
     },
-
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
         containerWidth
       } = {}) => containerWidth
     },
-    // coursesCardAndText: {
-    //   padding: '70px'
-    // },
-
+    coursesCardAndText: {
+      padding: '70px'
+    },
     coursesText: {
       color: theme?.palette?.font?.secondary,
       fontWeight: '400',
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: '16px',
       lineHeight: '20px',
       textAlign: 'center',
-      textTransform: 'uppercase',
       wordBreak: 'break-word'
     },
     coursesHeader: {
-      fontSize: theme.typography.fontSize.h2,
+      fontSize: '56px',
       lineHeight: '70px',
       color: theme?.palette?.font?.default,
-      marginTop: '8px',
-      marginBottom: theme.spacing.margin.tiny,
+      margin: '10px 0 40px 10px',
       overflow: 'hidden',
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
@@ -5740,7 +5507,7 @@ const useCourseStyles = createUseStyles(theme => {
     courseCardName: {
       color: theme?.palette?.font?.default,
       fontWeight: '700',
-      fontSize: theme.typography.fontSize.h5,
+      fontSize: '24px',
       lineHeight: '32px',
       wordBreak: 'break-word',
       padding: '12px 0px',
@@ -5755,7 +5522,7 @@ const useCourseStyles = createUseStyles(theme => {
       display: 'flex',
       justifyContent: 'flex-start',
       alignItems: 'center',
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: '16px',
       color: theme?.palette?.font?.primary,
       '& img': {
         marginRight: '5px'
@@ -5767,10 +5534,10 @@ const useCourseStyles = createUseStyles(theme => {
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'center',
-      padding: '12px 0 0 4px'
+      padding: '13px 0 0 4px'
     },
     courseCardPrice: {
-      fontSize: theme.typography.fontSize.h5,
+      fontSize: '24px',
       fontWeight: '700'
     },
     coursesAnchorTag: {
@@ -5791,8 +5558,7 @@ const useCourseStyles = createUseStyles(theme => {
       cursor: 'pointer',
       background: theme?.palette?.primary?.main,
       color: theme?.palette?.font?.invertedDefault,
-      padding: '8px 16px',
-      fontWeight: theme.typography.fontWeight.bold,
+      padding: '12px 16px',
       cursor: 'pointer',
       borderRadius: theme.shape.borderRadius.regular
     },
@@ -5837,7 +5603,7 @@ const useCourseStyles = createUseStyles(theme => {
         //background: theme?.palette?.background?.primary
       },
       coursesCardAndText: {
-        // padding: '70px 30px'
+        padding: '70px 30px'
       },
       singleCardContainer: {
         gridTemplateColumns: '1fr'
@@ -5846,7 +5612,7 @@ const useCourseStyles = createUseStyles(theme => {
         margin: '0'
       },
       coursesHeader: {
-        // fontSize: '24px',
+        fontSize: '24px',
         lineHeight: '36px',
         color: theme?.palette?.font?.default,
         margin: '4px 0 12px 0',
@@ -5855,8 +5621,8 @@ const useCourseStyles = createUseStyles(theme => {
         textOverflow: 'ellipsis'
       },
       singleCard: {
-        margin: '6px 2px'
-        // width: 'calc(100% - 12px)'
+        margin: '6px 2px',
+        width: 'calc(100% - 4px)'
       }
     }
   };
@@ -6021,8 +5787,7 @@ function courses({
   const [fallBackImages, setFallbackImages] = useState([]);
   const [showShimmer, setShowShimmer] = useState(true);
   const classes = useCourseStyles({
-    containerWidth,
-    isMobile
+    containerWidth
   });
   const [nodeData] = sectionData?.components;
   const handleApiCall = () => {
@@ -6074,7 +5839,7 @@ function courses({
   const settings = {
     className: classes.slickContainer,
     infinite: false,
-    slidesToShow: isMobile ? 1 : 3.5
+    slidesToShow: isMobile ? 1.1 : 3.25
   };
   const Wrapper = (cardList?.length || fallBackImages?.length) > settings.slidesToShow ? Carousel : SimpleCardsContainer;
   const wrapperProps = (cardList?.length || fallBackImages?.length) > settings.slidesToShow ? {
@@ -6150,22 +5915,19 @@ var index$8 = /*#__PURE__*/Object.freeze({
 const useTeamStyles = createUseStyles(theme => {
   return {
     teamSuperContainer: {
-      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`,
-      background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
+      padding: '60px',
+      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: ({
@@ -6173,20 +5935,19 @@ const useTeamStyles = createUseStyles(theme => {
       } = {}) => containerWidth
     },
     teamHeading: {
-      fontSize: theme.typography.fontSize.subHead,
-      textTransform: 'uppercase',
+      fontSize: '16px',
       lineHeight: '20px',
       letterSpacing: '3px',
-      marginBottom: '8px',
+      margin: '0 0 8px',
       color: theme?.palette?.font?.primary,
       wordBreak: 'break-word'
     },
     teamTitle: {
-      fontSize: theme.typography.fontSize.h2,
-      fontWeight: theme.typography.fontWeight.bold,
+      fontSize: '56px',
       lineHeight: '70px',
       letterSpacing: '-3px',
       wordBreak: 'break-word',
+      margin: '0 ',
       color: theme?.palette?.font?.default
     },
     sliderContainer: {
@@ -6201,11 +5962,10 @@ const useTeamStyles = createUseStyles(theme => {
     singleSlideContainer: {
       backgroundColor: theme?.palette?.background?.default,
       margin: '20px',
-      width: 'calc(100% - 32px)',
-      // height: 'calc(100% - 40px)',
-      border: '3px solid #D8E0F0',
+      width: 'calc(100% - 40px)',
+      height: 'calc(100% - 40px)',
       borderRadius: theme?.shape?.borderRadius?.regular,
-      padding: theme.spacing.padding.tiny,
+      padding: '32px',
       boxShadow: theme?.shadows?.primary
     },
     imageContainer: {
@@ -6230,28 +5990,32 @@ const useTeamStyles = createUseStyles(theme => {
       overflowWrap: 'break-word'
     },
     teamDetailsHeading: {
-      fontSize: theme.typography.fontSize.h5,
-      fontWeight: theme.typography.fontWeight.bold,
+      fontSize: '24px',
       lineHeight: '32px',
       margin: '0',
       color: theme?.palette?.font?.default
     },
     teamDetailsSubHeading: {
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: '16px',
       lineHeight: '24px',
       margin: '12px 0 0',
       color: theme?.palette?.font?.primary
     },
     '@media (max-width: 767px)': {
-      // teamSuperContainer: {
-      //   padding: '60px 20px'
-      // },
+      teamSuperContainer: {
+        padding: '60px 20px'
+      },
       teamHeading: {
-        lineHeight: '20px'
+        fontSize: '16px',
+        lineHeight: '20px',
+        letterSpacing: '3px',
+        margin: '0'
       },
       teamTitle: {
+        fontSize: '24px',
         lineHeight: '36px',
-        letterSpacing: '-1px'
+        letterSpacing: '-1px',
+        margin: '0'
       },
       sliderContainer: {
         margin: '0 -4px'
@@ -6261,17 +6025,18 @@ 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
       }
     }
@@ -6326,8 +6091,7 @@ function TeamCard({
   const classes = useTeamStyles({
     containerWidth,
     cardsCount,
-    slidesToShow,
-    isMobile
+    slidesToShow
   });
   const settings = {
     className: classes.sliderContainer,
@@ -6355,7 +6119,7 @@ function TeamCard({
     dangerouslySetInnerHTML: {
       __html: teamData.teamHeading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("h2", {
     className: classes.teamTitle
   }, /*#__PURE__*/React.createElement("span", {
     ref: teamData?.teamTitle?.refSetter,
@@ -6384,21 +6148,17 @@ 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: ({
@@ -6411,20 +6171,20 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     width: '100%',
     height: '50%',
     position: 'absolute',
-    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2
+    background: theme?.palette?.background?.primary
   },
   sectionContainer: {
     backgroundColor: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.secondary,
     borderRadius: theme?.shape?.borderRadius?.regular,
-    padding: '48px',
+    margin: '60px 10%',
+    padding: '40px 80px',
     position: 'relative'
   },
   title: {
     margin: '0',
-    fontSize: theme.typography.fontSize.h2,
+    fontSize: '56px',
     color: theme?.palette?.font?.secondary,
-    fontWeight: theme.typography.fontWeight.bold,
     lineHeight: '71px',
     letterSpacing: '-3px',
     textAlign: 'left',
@@ -6432,19 +6192,16 @@ const useSectionStyles$1 = createUseStyles(theme => ({
   },
   contentContainer: {
     width: '100%',
-    display: 'flex'
-    // alignItems: 'flex-start',
+    display: 'flex',
+    alignItems: 'flex-start',
+    marginTop: '32px'
   },
-
   leftContainer: {
-    width: '65%',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between'
+    width: '65%'
   },
   subtitle: {
-    // margin: '0 0 40px 0',
-    fontSize: theme.typography.fontSize.h6,
+    margin: '0 0 40px 0',
+    fontSize: '20px',
     color: theme?.palette?.font?.primary,
     lineHeight: '32px',
     wordBreak: 'break-word'
@@ -6466,16 +6223,13 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     padding: '4px 8px 0 0'
   },
   addressText: {
-    fontSize: theme.typography.fontSize.subHead,
+    fontSize: '16px',
     color: theme?.palette?.font?.default,
     lineHeight: '24px'
   },
   rightContainer: {
     width: '50%',
-    padding: '0 0 0 80px',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between'
+    padding: '0 0 0 80px'
   },
   inputDiv: {
     margin: '0 0 20px 0',
@@ -6489,8 +6243,8 @@ const useSectionStyles$1 = createUseStyles(theme => ({
       alignItems: 'center'
     },
     sectionContainer: {
-      // margin: '26px 16px',
-      padding: '16px'
+      margin: '26px 16px',
+      padding: '32px 16px'
     },
     partialBackground: {
       height: '150px'
@@ -6500,32 +6254,26 @@ 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',
-      margin: '0 0 16px 0',
-      textAlign: 'center'
+      letterSpacing: 'initial'
     },
     subtitle: {
-      margin: '0 0 16px 0',
-      lineHeight: '26px',
-      textAlign: 'center'
+      margin: '0 0 12px 0'
     },
     inputDiv: {
-      margin: '0 0 16px 0'
+      margin: '0 0 10px 0'
     },
     addressRow: {
-      padding: '0px',
-      margin: '0 0 16px 0'
+      padding: '12px 0'
     }
   }
 }));
@@ -6544,8 +6292,7 @@ function FormEnquiry({
     isEdit
   } = useContext(PageContext);
   const classes = useSectionStyles$1({
-    containerWidth,
-    isMobile
+    containerWidth
   });
   const [nodeData] = sectionData.components;
   const theme = useTheme();
@@ -6604,10 +6351,6 @@ 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", {
@@ -6616,6 +6359,10 @@ 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: {
@@ -6670,7 +6417,6 @@ function FormEnquiry({
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.inputDiv
   }, /*#__PURE__*/React.createElement(Input, {
-    theme: theme,
     data: nodeData.nameField,
     value: inputVal.name,
     isValid: validData.nameValid,
@@ -6756,7 +6502,7 @@ function FormEnquiry({
         messageValid: 1
       });
     }
-  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
       value: 'Submitted'
@@ -6767,7 +6513,7 @@ function FormEnquiry({
     type: nodeData?.cta?.metadata?.type,
     size: isMobile ? 'small' : 'medium',
     disabled: btnDisabled
-  })))))));
+  }))))));
 }
 
 var index$6 = /*#__PURE__*/Object.freeze({
@@ -6783,23 +6529,20 @@ 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: '100%',
+    width: '80%',
     margin: '0 auto',
     maxWidth: ({
       containerWidth
@@ -6811,19 +6554,19 @@ const useSectionStyles = createUseStyles(theme => ({
     width: '100%',
     height: '50%',
     position: 'absolute',
-    // background: theme?.palette?.background?.primary
-    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.tertiaryBlue2
+    background: theme?.palette?.background?.primary
   },
   sectionContainer: {
     backgroundColor: theme?.palette?.background?.default,
     boxShadow: theme?.shadows?.secondary,
     borderRadius: theme?.shape?.borderRadius?.regular,
-    padding: '48px',
+    margin: '60px',
+    padding: '40px 80px',
     position: 'relative'
   },
   title: {
     margin: '0',
-    fontSize: theme.typography.fontSize.h2,
+    fontSize: '56px',
     color: theme?.palette?.font?.secondary,
     lineHeight: '71px',
     letterSpacing: '-3px',
@@ -6833,37 +6576,36 @@ const useSectionStyles = createUseStyles(theme => ({
   contentContainer: {
     width: '100%',
     display: 'flex',
-    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginTop: '32px',
     wordBreak: 'break-word'
   },
   leftContainer: {
-    width: '50%',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between'
+    width: '50%'
   },
   subtitle: {
-    margin: '0 0 auto 0',
-    fontSize: theme.typography.fontSize.h6,
+    margin: '0 0 58px 0',
+    fontSize: '20px',
     color: theme?.palette?.font?.primary,
-    lineHeight: '32px',
-    margin: '20px 0px'
+    lineHeight: '32px'
   },
   addressContainer: {
     display: 'flex',
     alignItems: 'flex-start',
     flexDirection: 'column',
-    width: '100%',
-    position: 'relative'
+    width: '85%',
+    position: 'relative',
+    paddingBottom: '55%'
+    // '& img': {
+    //   width: '80%'
+    // }
   },
+
   telephoneImage: {
     width: '80%'
   },
   rightContainer: {
     width: '50%',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
     padding: '0 0 0 80px'
   },
   inputDiv: {
@@ -6877,16 +6619,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: theme.typography.fontSize.subHead,
+    fontSize: '16px',
     lineHeight: '20px',
     fontFamily: 'inherit',
     resize: 'none',
     '&::placeholder': {
       fontWeight: '400',
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: '16px',
       lineHeight: '20px',
       color: theme?.palette?.font?.primary,
       fontFamily: theme?.typography?.fontFamily
@@ -6916,7 +6658,8 @@ const useSectionStyles = createUseStyles(theme => ({
       alignItems: 'center'
     },
     sectionContainer: {
-      padding: '16px'
+      margin: '26px 16px',
+      padding: '32px 16px'
     },
     partialBackground: {
       height: '150px'
@@ -6934,17 +6677,15 @@ const useSectionStyles = createUseStyles(theme => ({
       padding: '0'
     },
     title: {
-      lineHeight: '26px',
-      letterSpacing: 'initial',
-      textAlign: 'center'
+      fontSize: '24px',
+      lineHeight: '32px',
+      letterSpacing: 'initial'
     },
     subtitle: {
-      margin: '0 0 12px 0',
-      textAlign: 'center',
-      lineHeight: '26px'
+      margin: '0 0 12px 0'
     },
     addressRow: {
-      // padding: '12px 0'
+      padding: '12px 0'
     },
     addressContainer: {
       '& img': {
@@ -6952,7 +6693,7 @@ const useSectionStyles = createUseStyles(theme => ({
       }
     },
     inputDiv: {
-      // margin: '0 0 10px 0'
+      margin: '0 0 10px 0'
     },
     inputField: {
       width: '100%',
@@ -6984,8 +6725,7 @@ function Contact({
   let [btnDisabled, setBtnDisabled] = useState(false);
   const [nodeData] = sectionData.components;
   const classes = useSectionStyles({
-    containerWidth,
-    isMobile
+    containerWidth
   });
   let formInitialValue = {
     name: nodeData?.nameField?.metadata?.value,
@@ -7041,10 +6781,6 @@ 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", {
@@ -7053,6 +6789,10 @@ 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: {
@@ -7155,9 +6895,7 @@ function Contact({
         messageValid: 1
       });
     }
-  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement("div", {
-    className: classes.btnContainer
-  }, /*#__PURE__*/React.createElement(Button, {
+  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
       value: 'Submitted'
@@ -7169,7 +6907,7 @@ function Contact({
     size: isMobile ? 'small' : 'medium',
     disabled: btnDisabled,
     name: "button"
-  })))))));
+  }))))));
 }
 
 var index$5 = /*#__PURE__*/Object.freeze({
@@ -7182,21 +6920,18 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     webinarSuperContainer: {
       display: 'flex',
       justifyContent: 'center',
-      padding: ({
-        isMobile
-      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+      padding: '70px',
       '&, & *, & *: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: ({
@@ -7208,34 +6943,30 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       maxWidth: '1440px',
       fontFamily: theme?.typography?.fontFamily
     },
-    // videoTestimonialHeading: {
-    //   fontSize: theme.typography.fontSize.subHead,
-    //   lineHeight: '20px',
-    //   letterSpacing: '3px',
-    //   textTransform: 'uppercase',
-    //   color: theme.palette.font.tertiary,
-    //   wordBreak: 'break-word',
-    //   fontWeight: theme.typography.fontWeight.bold,
-    // },
-
-    // videoTestimonialTitle: {
-    //   fontSize: theme.typography.fontSize.h2,
-    //   lineHeight: '71px',
-    //   fontWeight: theme.typography.fontWeight.bold,
-    //   letterSpacing: '-3px',
-    //   margin: '0',
-    //   color: theme.palette.font.default,
-    //   wordBreak: 'break-word'
-    // },
-
-    // videoCarouselContainer: {
-    //   marginTop: '16px'
-    // },
-
+    videoTestimonialHeading: {
+      fontSize: '16px',
+      lineHeight: '20px',
+      letterSpacing: '3px',
+      textTransform: 'uppercase',
+      color: theme.palette.font.tertiary,
+      wordBreak: 'break-word',
+      fontWeight: '700'
+    },
+    videoTestimonialTitle: {
+      fontSize: '56px',
+      lineHeight: '71px',
+      letterSpacing: '-3px',
+      margin: '0',
+      color: theme.palette.font.default,
+      wordBreak: 'break-word'
+    },
+    videoCarouselContainer: {
+      marginTop: '16px'
+    },
     webinarCarousel: {
       display: 'flex',
       justifyContent: 'flex-start',
-      gap: '32px'
+      gap: '20px'
     },
     '@media screen and (max-width: 767px)': {
       webinarCarousel: {
@@ -7250,21 +6981,18 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       alignItems: 'center'
     },
     iframeContainer: {
-      width: '100%',
+      width: '90%',
       position: 'relative',
       paddingBottom: '56.25%',
       // top: "6%",
-      // left: '5%'
-      borderRadius: '8px',
-      overflow: 'hidden'
+      left: '5%'
     },
     offerText: {
       textAlign: 'center',
-      color: theme.palette.font.primary,
-      marginBottom: '5%'
+      color: theme.palette.font.primary
     },
     offerPrice: {
-      fontSize: theme.typography.fontSize.h5,
+      fontSize: '28px',
       fontWeight: '600'
     },
     priceContainer: {
@@ -7283,10 +7011,9 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     bottomContainer: {
       display: 'flex',
       justifyContent: 'space-between',
-      marginTop: '5%'
-      // padding: '0px 5% 0px 5%'
+      marginTop: '5%',
+      padding: '0px 5% 0px 5%'
     },
-
     iframe: {
       position: 'absolute',
       width: '100%',
@@ -7297,12 +7024,10 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       width: '100%',
       display: 'flex',
       flexDirection: 'column',
-      alignItems: 'flex-start',
-      gap: '20px'
+      alignItems: 'flex-start'
     },
     videoDetailsHeading: {
-      fontSize: theme.typography.fontSize.h3,
-      fontWeight: theme.typography.fontWeight.bold,
+      fontSize: '40px',
       lineHeight: '48px',
       margin: '0',
       letterSpacing: '-1px',
@@ -7316,7 +7041,7 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'start',
-      padding: '24px',
+      paddingTop: '20px',
       borderRadius: '10px'
     },
     bannerContainer: {
@@ -7329,12 +7054,14 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       position: 'relative',
       fontSize: '18px',
       transform: 'rotate(180deg)',
-      clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))'
+      clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))',
+      marginBottom: '16px'
     },
     bannerContainerText: {
       transform: 'rotate(180deg)'
     },
     courseDetailsTags: {
+      marginTop: '16px',
       display: 'flex'
     },
     courseDetailTag: {
@@ -7342,22 +7069,23 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       alignItems: 'center',
       marginRight: '20px',
       '& div': {
-        fontSize: theme.typography.fontSize.subHead,
+        fontSize: '14px',
         marginLeft: '10px'
       }
     },
     courseDetailContent: {
-      fontSize: theme.typography.fontSize.subHead,
+      marginTop: '16px',
+      fontSize: '16px',
       wordBreak: 'break-word',
       color: theme.palette.font.primary,
-      whiteSpace: 'pre-wrap',
-      width: '80%'
+      margin: '10px 0 20px',
+      whiteSpace: 'pre-wrap'
     },
     courseDetailViewFullDetails: {
       cursor: 'pointer',
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: '16px',
       lineHeight: '24px',
-      marginTop: '-20px',
+      margin: '0',
       color: '#00ADE7',
       wordBreak: 'break-word'
     },
@@ -7365,10 +7093,9 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       color: '#EB5757',
       fontWeight: '600'
     },
-    // webinarButtonContainer: {
-    //   marginBottom: '20px'
-    // },
-
+    webinarButtonContainer: {
+      marginBottom: '20px'
+    },
     iconBackground: {
       display: 'flex',
       width: '36px',
@@ -7400,10 +7127,11 @@ const useWebinarPromotionPage = createUseStyles(theme => {
         width: '100%'
       },
       videoDetailsHeading: {
+        fontSize: '16px',
         lineHeight: '20px'
       },
       videoTestimonialTitle: {
-        // fontSize: '24px',
+        fontSize: '24px',
         lineHeight: '36px',
         letterSpacing: '-1px'
       },
@@ -7518,7 +7246,7 @@ const SingleVideoSlide$1 = props => {
     color: theme.palette.primary.main,
     width: "20px",
     name: `${data.webinarLocation === 'Location' ? 'Location' : 'Video'}`
-  })), /*#__PURE__*/React.createElement("div", null, data.webinarLocation === 'Location' ? data.webinarLink : data.webinarLocation))), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", null, data.webinarLocation === 'Location' ? data.webinarLink : data.webinarLocation))), /*#__PURE__*/React.createElement("p", {
     ref: data?.videoTextContent?.refSetter,
     className: classes.courseDetailContent,
     dangerouslySetInnerHTML: {
@@ -7535,7 +7263,7 @@ const SingleVideoSlide$1 = props => {
     }
   }))), /*#__PURE__*/React.createElement("div", {
     className: classes.courseViewContainer
-  }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React.createElement("div", {
+  }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React.createElement("p", {
     className: classes.offerText
   }, "Offer Ends in", ' ', /*#__PURE__*/React.createElement("span", {
     className: classes.courseDetailTime
@@ -7559,9 +7287,10 @@ const SingleVideoSlide$1 = props => {
     className: classes.priceContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.offerPrice
-  }, "\u20B9", data?.effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("div", {
+  }, "\u20B9", data?.effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
     style: {
-      fontSize: '20px'
+      fontSize: '20px',
+      marginTop: '0px'
     }
   }, /*#__PURE__*/React.createElement("span", {
     className: classes.originalPrice
@@ -7595,14 +7324,12 @@ function CoursePromotionPage$1({
   sectionIndex
 }) {
   const {
-    isMobile,
     layout: {
       containerWidth
     }
   } = useContext(PageContext);
   const classes = useWebinarPromotionPage({
-    containerWidth,
-    isMobile
+    containerWidth
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classes.webinarSuperContainer
@@ -7628,22 +7355,18 @@ const useCoursePromotionPage = createUseStyles(theme => {
     courseSuperContainer: {
       display: 'flex',
       justifyContent: 'center',
-      background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background1,
-      padding: ({
-        isMobile
-      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+      padding: '70px ',
       '&, & *, & *: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: ({
@@ -7656,7 +7379,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       fontFamily: theme?.typography?.fontFamily
     },
     videoTestimonialHeading: {
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: '16px',
       lineHeight: '20px',
       letterSpacing: '3px',
       textTransform: 'uppercase',
@@ -7665,7 +7388,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       fontWeight: '700'
     },
     videoTestimonialTitle: {
-      fontSize: theme.typography.fontSize.h2,
+      fontSize: '56px',
       lineHeight: '71px',
       letterSpacing: '-3px',
       margin: '0',
@@ -7673,12 +7396,12 @@ const useCoursePromotionPage = createUseStyles(theme => {
       wordBreak: 'break-word'
     },
     videoCarouselContainer: {
-      // marginTop: '16px'
+      marginTop: '16px'
     },
     coursePageCarousel: {
       display: 'flex',
       justifyContent: 'flex-start',
-      gap: '32px'
+      gap: '20px'
     },
     '@media screen and (max-width: 767px)': {
       coursePageCarousel: {
@@ -7693,19 +7416,18 @@ const useCoursePromotionPage = createUseStyles(theme => {
       alignItems: 'center'
     },
     iframeContainer: {
-      width: '100%',
+      width: '90%',
       position: 'relative',
-      paddingBottom: '56.25%'
+      paddingBottom: '56.25%',
       // top: "6%",
-      // left: '5%'
+      left: '5%'
     },
-
     offerText: {
       textAlign: 'center',
       color: theme.palette.font.primary
     },
     offerPrice: {
-      fontSize: theme.typography.fontSize.h4,
+      fontSize: '28px',
       fontWeight: '700'
     },
     priceContainer: {
@@ -7723,7 +7445,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       fontWeight: '600'
     },
     bottomContainer: {
-      width: '100%',
+      width: '90%',
       marginLeft: 'auto',
       marginRight: 'auto',
       display: 'flex',
@@ -7740,28 +7462,25 @@ const useCoursePromotionPage = createUseStyles(theme => {
       width: '100%',
       display: 'flex',
       flexDirection: 'column',
-      alignItems: 'flex-start',
-      gap: '20px'
+      alignItems: 'flex-start'
     },
     videoDetailsHeading: {
-      fontSize: theme.typography.fontSize.h3,
+      fontSize: '40px',
       lineHeight: '48px',
       margin: '0',
       letterSpacing: '-1px',
       wordBreak: 'break-word',
-      color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font1
+      color: theme.palette.font.default
     },
     courseViewContainer: {
       width: '445px',
       backgroundColor: '#f4f9ff',
       display: 'flex',
-      padding: '24px',
       flexDirection: 'column',
-      borderRadius: '10px'
-      // paddingBottom: '10px',
-      // paddingTop: '10px'
+      borderRadius: '10px',
+      paddingBottom: '10px',
+      paddingTop: '10px'
     },
-
     bannerContainer: {
       width: '100%',
       background: '#EB5757',
@@ -7770,12 +7489,11 @@ const useCoursePromotionPage = createUseStyles(theme => {
       padding: '10px 10px 23px 40px',
       wordWrap: 'break-word',
       position: 'relative',
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: '18px',
       transform: 'rotate(180deg)',
-      clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))'
-      // marginBottom: '16px'
+      clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))',
+      marginBottom: '16px'
     },
-
     bannerContainerText: {
       transform: 'rotate(180deg)'
     },
@@ -7786,15 +7504,16 @@ const useCoursePromotionPage = createUseStyles(theme => {
     },
     courseEmblem: {
       background: '#F0F4F8',
-      fontSize: theme.typography.fontSize.subHead,
       borderRadius: '2.00337px',
       padding: '8px',
       display: 'flex',
       alignItems: 'center',
-      justifyContent: 'center'
+      justifyContent: 'center',
+      marginTop: '20px',
+      marginBottom: '20px'
     },
     courseDetailsTags: {
-      // marginTop: '16px',
+      marginTop: '16px',
       display: 'flex',
       flexWrap: 'wrap'
     },
@@ -7804,26 +7523,25 @@ const useCoursePromotionPage = createUseStyles(theme => {
       alignItems: 'center',
       marginRight: '20px',
       '& div': {
-        fontSize: theme.typography.fontSize.subHead,
-        fontWeight: theme.typography.fontWeight.semiBold,
+        fontSize: '14px',
         marginLeft: '10px'
       }
     },
     courseDetailContent: {
-      // marginTop: '16px',
-      fontSize: theme.typography.fontSize.subHead,
+      marginTop: '16px',
+      fontSize: '16px',
       lineHeight: '24px',
       wordBreak: 'break-word',
-      color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font1,
+      color: theme.palette.font.primary,
       whiteSpace: 'pre-wrap',
       margin: '10px 0 20px'
     },
     courseDetailViewFullDetails: {
       cursor: 'pointer',
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: '16px',
       lineHeight: '24px',
-      marginTop: '-24px',
-      color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font1,
+      margin: '0',
+      color: '#00ADE7',
       wordBreak: 'break-word'
     },
     courseDetailTime: {
@@ -7869,7 +7587,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
     },
     '@media (max-width: 767px)': {
       bannerContainerText: {
-        // fontSize: '16px'
+        fontSize: '16px'
       },
       courseViewContainer: {
         width: '100%',
@@ -7890,12 +7608,12 @@ const useCoursePromotionPage = createUseStyles(theme => {
         width: '100%'
       },
       videoDetailsHeading: {
-        // fontSize: '20px',
+        fontSize: '20px',
         fontWeight: '600',
         lineHeight: '20px'
       },
       videoTestimonialTitle: {
-        // fontSize: '24px',
+        fontSize: '24px',
         lineHeight: '36px',
         letterSpacing: '-1px'
       },
@@ -8081,7 +7799,7 @@ const SingleVideoSlide = props => {
     className: classes.offerPrice
   }, "\u20B9 ", data.effectivePrice), checkForShowDiscount() && (data.endDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
     style: {
-      // fontSize: '20px',
+      fontSize: '20px',
       marginTop: '0px'
     }
   }, /*#__PURE__*/React.createElement("span", {
@@ -8131,14 +7849,12 @@ function CoursePromotionPage({
   sectionIndex
 }) {
   const {
-    isMobile,
     layout: {
       containerWidth
     }
   } = useContext(PageContext);
   const classes = useCoursePromotionPage({
-    containerWidth,
-    isMobile
+    containerWidth
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classes.courseSuperContainer
@@ -8162,9 +7878,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
 
 const useFormPageStyles = createUseStyles(theme => ({
   formPageSection: {
-    padding: ({
-      isMobile
-    } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
+    padding: '35px 70px',
     background: '#F4F9FF',
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
@@ -8175,82 +7889,77 @@ const useFormPageStyles = createUseStyles(theme => ({
     textAlign: 'center'
   },
   formPageTitle: {
-    fontSize: theme.typography.fontSize.h2,
-    fontWeight: theme.typography.fontWeight.bold
+    fontSize: '50px',
+    fontWeight: '700'
   },
   formPageSubtitle: {
-    marginTop: '8px',
-    fontSize: theme.typography.fontSize.h6,
+    marginTop: '16px',
+    fontSize: '16px',
     lineHeight: '23px',
     color: 'rgba(51, 51, 51, 0.5)',
-    marginBottom: theme.spacing.margin.tiny
+    marginBottom: '32px'
   },
   formPageFormContainer: {
+    marginTop: '32px',
     '& form': {
-      padding: '72px',
+      padding: '35px 140px',
       background: '#FFFFFF',
       borderRadius: '8px',
       boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)'
     }
   },
   inputField: {
-    marginTop: '12px'
-    // padding: '12px 16px',
-    // border: '1px solid #D8E0F0',
-    // borderRadius: '16px'
+    marginTop: '20px',
+    padding: '20px',
+    border: '1px solid #D8E0F0',
+    borderRadius: '16px'
   },
-
   inputFieldLabel: {
     color: '#333',
-    fontSize: theme.typography.fontSize.subHead,
-    fontWeight: theme.typography.fontWeight.semiBold,
+    fontSize: '20px',
     display: 'block',
-    marginTop: '20px',
-    marginBottom: '12px'
+    marginBottom: '10px'
   },
   inputFieldControl: {
     width: '100%',
+    height: '50px',
     borderRadius: '8px',
     border: '1px solid #D8E0F0',
-    padding: '12px 16px',
+    padding: '5px 10px',
     color: '#7D8592',
-    fontSize: theme.typography.fontSize.subHead
+    fontSize: '16px'
   },
   checkboxField: {
-    // padding: '20px',
-    // border: '1px solid #D8E0F0',
-    // borderRadius: '8px'
+    marginTop: '20px',
+    padding: '20px',
+    border: '1px solid #D8E0F0',
+    borderRadius: '8px'
   },
   checkBoxFieldLabel: {
     color: '#333',
-    fontSize: theme.typography.fontSize.subHead,
-    fontWeight: theme.typography.fontWeight.semiBold,
-    marginTop: '20px',
-    marginBottom: '12px'
+    fontSize: '20px',
+    margin: '10px 0'
   },
   inputFieldRequired: {
     color: '#F41828'
   },
   checkboxFieldControl: {
-    padding: '8px 0',
+    padding: '6px 0',
     '& label': {
-      fontSize: theme.typography.fontSize.subHead,
+      fontFamily: '16px',
       marginLeft: '10px',
       color: '#7D8592'
     }
   },
   submitBtnContainer: {
-    marginTop: theme.spacing.margin.tiny,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
+    marginTop: '20px',
     width: '100%',
     margin: '0 auto',
     '& button': {
-      // height: '44px',
-      padding: '16px 24px',
+      height: '44px',
+      padding: '10px 40px',
       color: '#FFFFFF',
-      fontSize: theme.typography.fontSize.subHead,
+      fontSize: '16px',
       cursor: 'pointer',
       borderRadius: '8px'
     }
@@ -8265,14 +7974,8 @@ const useFormPageStyles = createUseStyles(theme => ({
     },
     formPageFormContainer: {
       '& form': {
-        padding: '16px'
+        padding: '24px'
       }
-    },
-    inputFieldLabel: {
-      marginBottom: '8px'
-    },
-    checkBoxFieldLabel: {
-      marginBottom: '8px'
     }
   }
 }));
@@ -8319,16 +8022,13 @@ 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,
-    isMobile
+    baseURLs
   } = useContext(PageContext);
-  const classes = useFormPageStyles({
-    isMobile
-  });
   const handleSubmit = async e => {
     e.preventDefault();
     let formResponse = [];
@@ -8535,18 +8235,16 @@ const useTilesStyles = createUseStyles(theme => {
       alignItems: 'center',
       display: 'flex',
       flexDirection: 'column',
-      padding: ({
-        isMobile
-      } = {}) => isMobile ? `16px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`
+      marginTop: '20px'
     },
     tileDiv: {
       width: '236px',
-      // height: '160px',
-      aspectRatio: '3/2',
+      height: '160px',
       position: 'relative',
       borderRadius: '16px',
       overflow: 'hidden',
-      cursor: 'pointer'
+      cursor: 'pointer',
+      margin: '1rem'
     },
     tileImg: {
       objectFit: 'cover',
@@ -8561,8 +8259,8 @@ const useTilesStyles = createUseStyles(theme => {
       top: '12%',
       left: '7%',
       color: 'white',
-      fontWeight: theme.typography.fontWeight.semiBold,
-      fontSize: theme.typography.fontSize.h5,
+      fontWeight: '600',
+      fontSize: '20px',
       width: '150px'
     },
     row: {
@@ -8570,28 +8268,25 @@ const useTilesStyles = createUseStyles(theme => {
       flexDirection: 'row',
       justifyContent: 'center',
       flexWrap: 'wrap',
-      width: '100%',
-      gap: '24px'
+      width: '85%',
+      marginBottom: '3rem'
     },
     header: {
-      fontWeight: theme.typography.fontWeight.bold,
-      fontSize: theme.typography.fontSize.h2,
+      fontWeight: '700',
+      fontSize: '46px',
       lineHeight: '46px',
+      marginBottom: '1rem',
       textAlign: 'center',
+      marginTop: '3rem',
       color: '#2D2D2D'
     },
     headerTitle: {
-      fontWeight: theme.typography.fontWeight.regular,
-      fontSize: theme.typography.fontSize.subHead,
+      fontWeight: '400',
+      fontSize: '24px',
       lineHeight: '46px',
       color: '#7D8592',
-      marginBottom: theme.spacing.margin.tiny,
+      marginBottom: '3rem',
       textAlign: 'center'
-    },
-    '@media screen and (max-width: 767px)': {
-      tileDiv: {
-        width: 'calc(53% - 24px)'
-      }
     }
   };
 });
@@ -8600,6 +8295,7 @@ function Tiles({
   sectionData,
   sectionIndex
 }) {
+  const classes = useTilesStyles({});
   const {
     isMobile,
     layout: {
@@ -8608,9 +8304,6 @@ function Tiles({
     isPreview,
     isEdit
   } = useContext(PageContext);
-  const classes = useTilesStyles({
-    isMobile
-  });
   const nodeData = sectionData.components;
   const tilesList = nodeData[0]?.tilesList.components;
   const handleClick = value => {