diy-template-components 0.2.74 → 0.2.75

package/build/index.js

@@ -353,153 +353,118 @@ const colorMixer = (hex1, weightage = 1, hex2 = colors.white) => {
   };
 };
 
-const solidBaseColors = {
-  white: '#FFFFFF',
-  blue: '#1676F3',
-  tertiaryblue: '#F4F9FF',
-  orange: '#FF9000',
-  tertiaryorange: '#FFF6EA',
-  pink: '#F72585',
-  tertiarypink: '#FEE9F3',
-  green: '#8ECE19',
-  tertiarygreen: '#F4FAEB',
-  violet: '#6269C9',
-  tertiaryviolet: '#F4F6FF',
-  red: '#F41828',
-  tertiaryred: '#FFF2F3',
-  maroon: '#9B2226',
-  tertiarymaroon: '#FFF0F0',
-  blue2: '#00ADE7',
-  tertiaryblue2: '#F2FCFF'
-};
-const generateTheme = theme => {
-  const generatedTheme = {
-    AccentColor: solidBaseColors[theme],
-    background1: solidBaseColors?.white,
-    background2: solidBaseColors['tertiary' + theme],
-    background3: solidBaseColors['tertiary' + theme],
-    ctaColor: solidBaseColors[theme],
-    CtaTextColor: solidBaseColors?.white,
-    icon: solidBaseColors[theme],
-    iconBg: solidBaseColors['tertiary' + theme],
-    stripBg: solidBaseColors[theme],
-    stripText: solidBaseColors?.white
-  };
-  console.log('generatedTheme', generatedTheme, theme);
-  return generatedTheme;
-};
-
-const buttonStyles = createUseStyles(theme => ({
-  primary: {
-    width: ({
-      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 : generateTheme('blue')?.CtaTextColor,
-    background: ({
-      disabled
-    } = {}) => disabled ? colorMixer(theme?.palette?.primary.main, 0.5).color : generateTheme('blue')?.ctaColor,
-    border: ({
-      disabled
-    } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${generateTheme('blue')?.ctaColor}`,
-    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'
+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'
     },
-    '&$active': {
+    secondary: {
+      width: ({
+        fluid
+      } = {}) => fluid ? '100%' : '',
+      borderRadius: theme?.shape?.borderRadius?.regular,
+      fontSize: '14px',
       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
+      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
+      }
     }
-  }
-}));
+  };
+});
 
 function useLinkBuilder(data) {
   const {
@@ -2256,20 +2221,137 @@ 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: ({
@@ -2282,24 +2364,19 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     justifyContent: 'center',
     position: 'relative'
   },
-  partialBackground: {
-    width: '61%',
-    position: 'absolute',
-    backgroundColor: generateTheme('blue')?.background2,
-    height: '100%',
-    top: '0',
-    left: '0'
-  },
   contentContainer: {
     position: 'relative',
     width: '100%',
     zIndex: '1',
-    display: 'grid',
-    gridTemplateColumns: 'repeat(2,minmax(0, 1fr))',
-    maxWidth: '100%'
+    // display: 'grid',
+    // gridTemplateColumns: 'repeat(2,minmax(0, 1fr))',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    maxWidth: '100%',
+    gap: '72px'
   },
   textContainer: {
-    padding: '140px 18%',
     textAlign: 'left',
     margin: '0 auto',
     maxWidth: '100%'
@@ -2307,23 +2384,28 @@ const useSectionStyles$8 = createUseStyles(theme => ({
   imageContainer: {
     width: '100%',
     position: 'relative',
-    height: '90%'
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '8px',
+    overflow: 'hidden'
   },
   subTitleHeading: {
     marginBottom: '8px',
-    fontSize: '16px',
+    fontSize: theme.typography.fontSize.subHead,
     color: theme?.palette?.font?.tertiary,
     wordBreak: 'break-word',
     maxWidth: '100%'
   },
   heading: {
     margin: '0',
-    fontSize: '72px',
+    fontSize: theme.typography.fontSize.h1,
     color: theme?.palette?.font?.default,
     wordBreak: 'break-word'
   },
   description: {
-    margin: '40px 0',
+    margin: `${theme.spacing.margin.tiny}px 0px`,
     color: theme?.palette?.font?.primary,
     lineHeight: '24px',
     wordBreak: 'break-word'
@@ -2338,30 +2420,24 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     display: 'flex',
     gap: '20px',
     justifyContent: 'center',
-    bottom: '25px',
-    position: 'absolute',
+    marginTop: theme.spacing.margin.tiny,
     width: '100%'
   },
+  partialBackground: {
+    display: 'none'
+  },
   '@media screen and (max-width: 767px)': {
     partialBackground: {
       display: 'none'
     },
-    sectionContainer: {
-      paddingBottom: '50px'
-    },
     contentContainer: {
       display: 'flex',
-      flexFlow: 'column-reverse',
-      paddingBottom: '20px'
+      flexFlow: 'column',
+      paddingBottom: '48px',
+      gap: '24px'
     },
     textContainer: {
-      padding: '20px 20px 0'
-    },
-    heading: {
-      fontSize: '40px'
-    },
-    description: {
-      margin: '16px 0'
+      textAlign: 'center'
     },
     linkButton: {
       padding: '12px 16px'
@@ -2480,7 +2556,7 @@ const useArrowButtonStyles = createUseStyles(theme => ({
     height: sizeHandler,
     border: ({
       inverted
-    }) => `solid 1px ${inverted ? theme?.palette?.font?.invertedDefault : generateTheme('blue')?.ctaColor}`,
+    }) => `solid 1px ${inverted ? theme?.palette?.font?.invertedDefault : theme?.themeColors?.ctaColor}`,
     borderRadius: '50%',
     display: 'flex',
     justifyContent: 'center',
@@ -2502,7 +2578,7 @@ function ArrowButton(props) {
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     height: props.size === 'small' ? '12px' : '18px',
     name: "Angle",
-    color: props.inverted ? theme?.palette?.font?.invertedDefault : generateTheme('blue')?.ctaColor,
+    color: props.inverted ? theme?.palette?.font?.invertedDefault : theme?.themeColors?.ctaColor,
     inverted: true
   }));
 }
@@ -2613,7 +2689,8 @@ function Section$4({
     isCustomWebsite
   } = React.useContext(PageContext);
   const classes = useSectionStyles$8({
-    isCustomWebsite
+    isCustomWebsite,
+    isMobile
   });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.centerData
@@ -2662,12 +2739,14 @@ function BannerCarouselRight({
   sectionIndex
 }) {
   const {
+    isMobile,
     layout: {
       containerWidth
     }
   } = React.useContext(PageContext);
   const classes = useSectionStyles$8({
-    containerWidth
+    containerWidth,
+    isMobile
   });
   const [{
     bannerCarousel
@@ -2693,180 +2772,183 @@ var index$l = /*#__PURE__*/Object.freeze({
   'default': BannerCarouselRight
 });
 
-const useSectionStyles$7 = createUseStyles(theme => ({
-  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'
-    }
-    // '& h2,& h3': {
-    //   fontWeight: '500',
-    //   '& b,& strong': {
-    //     fontWeight: '700'
-    //   }
-    // }
-  },
-
-  sectionContainer: {
-    margin: '0 auto',
-    maxWidth: ({
-      containerWidth
-    } = {}) => containerWidth
-  },
-  subTitleHeading: {
-    marginBottom: '8px',
-    fontSize: theme.typography.fontSize.subHead,
-    color: theme?.palette?.font?.tertiary,
-    alignItems: 'center',
-    textAlign: 'center',
-    wordBreak: 'break-word',
-    textTransform: 'uppercase'
-  },
-  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'
-  },
-  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,
-    marginBottom: theme.spacing.margin.small,
-    position: 'relative',
-    '&:nth-child(2n)': {
-      alignSelf: 'flex-end',
-      '& $contentNumber': {
-        right: '0'
-      },
-      '& $contentText': {
-        marginRight: '170px'
-      }
-    },
-    '&:nth-child(2n+1)': {
-      alignSelf: 'flex-start',
-      '& $contentNumber': {
-        left: '0'
-      },
-      '& $contentText': {
-        marginLeft: '170px'
+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'
       }
+      // '& h2,& h3': {
+      //   fontWeight: '500',
+      //   '& b,& strong': {
+      //     fontWeight: '700'
+      //   }
+      // }
     },
-    '&:nth-child(7n+1) $contentNumber': {
-      background: palettes.purple.primary.lightest
-    },
-    '&:nth-child(7n+2) $contentNumber': {
-      background: palettes.orange.primary.lightest
-    },
-    '&:nth-child(7n+3) $contentNumber': {
-      background: palettes.red.primary.lightest
-    },
-    '&:nth-child(7n+4) $contentNumber': {
-      background: palettes.green.primary.lightest
+
+    sectionContainer: {
+      margin: '0 auto',
+      maxWidth: ({
+        containerWidth
+      } = {}) => containerWidth
     },
-    '&:nth-child(7n+5) $contentNumber': {
-      background: palettes.pink.primary.lightest
+    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+6) $contentNumber': {
-      background: palettes.blue.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) $contentNumber': {
-      background: palettes.rust.primary.lightest
-    }
-  },
-  contentNumber: {
-    position: 'absolute',
-    top: '0',
-    fontWeight: '700',
-    fontSize: '72px',
-    letterSpacing: '-3px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '48px',
-    height: '100%',
-    color: theme?.palette?.font?.default,
-    wordBreak: 'break-word'
-  },
-  contentText: {
-    padding: theme.spacing.padding.tiny
-  },
-  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'
-  },
-  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%'
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '770px',
+      margin: 'auto'
     },
     content: {
       display: 'flex',
-      flexDirection: 'column',
-      borderRadius: theme.shape.borderRadius.large,
-      width: '100%',
-      height: 'auto',
+      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',
       '&:nth-child(2n)': {
-        marginLeft: '0',
+        alignSelf: 'flex-end',
+        '& $contentNumber': {
+          right: '0'
+        },
         '& $contentText': {
-          marginRight: '0',
-          alignSelf: 'flex-start'
-          // padding: '0'
+          marginRight: '170px'
         }
       },
-
       '&:nth-child(2n+1)': {
-        marginRight: '0',
+        alignSelf: 'flex-start',
+        '& $contentNumber': {
+          left: '0'
+        },
         '& $contentText': {
-          marginLeft: '0',
-          alignSelf: 'flex-start'
-          // padding: '0'
+          marginLeft: '170px'
         }
+      },
+      '&: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: {
-      width: '100%',
-      padding: '24px',
-      position: 'static'
+      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
+    },
+    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'
+    },
+    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'
+      }
     }
-  }
-}));
+  };
+});
 
 function List({
   sectionData
@@ -2956,13 +3038,14 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     width: '100%',
     // maxWidth: ({ containerWidth } = {}) => containerWidth,
     position: 'absolute',
-    zIndex: '9'
+    zIndex: '9',
+    height: '100%'
   },
   absoluteButtons: {
     display: 'flex',
     gap: '20px',
     justifyContent: 'center',
-    bottom: '25px',
+    bottom: '10%',
     position: 'absolute',
     width: '100%'
   },
@@ -3006,7 +3089,12 @@ const useSectionStyles$6 = createUseStyles(theme => ({
   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%'
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column'
   },
   subTitleHeading: {
     color: theme?.palette?.font?.invertedDefault,
@@ -3169,10 +3257,10 @@ var index$j = /*#__PURE__*/Object.freeze({
 });
 
 const useSectionStyles$5 = createUseStyles(theme => {
-  console.log('sdkjfndkjsnfk', theme?.spacing?.padding?.large);
   return {
     section: {
       paddingBottom: `${theme?.spacing?.padding?.regular}px`,
+      background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
@@ -3213,7 +3301,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%',
@@ -3248,7 +3336,7 @@ const useSectionStyles$5 = createUseStyles(theme => {
     },
     description: {
       margin: '40px 0',
-      color: theme?.palette?.font?.primary,
+      // color: theme?.palette?.font?.primary,
       lineHeight: '24px',
       wordBreak: 'break-word'
     },
@@ -3413,11 +3501,12 @@ 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: {
-    backgroundColor: theme?.palette?.background?.default,
+    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
     boxShadow: theme?.shadows?.secondary,
     borderRadius: theme?.shape?.borderRadius?.regular,
     padding: theme.spacing.padding.small,
@@ -3563,56 +3652,59 @@ async function postApiCallForm(baseURLs, data, extraProps) {
   }
 }
 
-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': {
+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',
       fontWeight: '400',
       fontSize: '16px',
       lineHeight: '20px',
-      color: theme?.palette?.font?.primary,
-      fontFamily: theme?.typography?.fontFamily
+      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'
+      }
     },
-    '&:focus': {
-      outline: 'none'
-    }
-  },
-  error: {
-    borderBottom: '1px solid red',
-    position: 'absolute',
-    bottom: '-8px',
-    width: 'calc(100% - 24px)'
-  },
-  errorBorder: {
-    border: `1px solid red`,
-    color: 'red',
-    '&::placeholder': {
+    error: {
+      borderBottom: '1px solid red',
+      position: 'absolute',
+      bottom: '-8px',
+      width: 'calc(100% - 24px)'
+    },
+    errorBorder: {
+      border: `1px solid red`,
       color: 'red',
-      opacity: '0.5'
-    }
-  },
-  '@media screen and (max-width: 767px)': {
-    inputField: {
-      width: '100%',
-      maxWidth: 'unset'
+      '&::placeholder': {
+        color: 'red',
+        opacity: '0.5'
+      }
     },
-    error: {
-      bottom: '-2px'
+    '@media screen and (max-width: 767px)': {
+      inputField: {
+        width: '100%',
+        maxWidth: 'unset'
+      },
+      error: {
+        bottom: '-2px'
+      }
     }
-  }
-}));
+  };
+});
 
 function Input({
   data,
@@ -3625,9 +3717,12 @@ function Input({
   const {
     onChange,
     onBlur,
-    onFocus
+    onFocus,
+    theme
   } = props;
-  const classes = inputStyles();
+  const classes = inputStyles({
+    theme
+  });
   const Comp = inputType;
   return /*#__PURE__*/React__default["default"].createElement(Comp, _extends({}, inputType === 'input' ? {
     type: 'text'
@@ -3758,12 +3853,14 @@ function SubscribeToNewsletter({
     type: nodeData?.cta?.metadata?.type,
     size: isMobile ? 'small' : 'medium',
     styling: isMobile ? {
-      marginTop: '12px'
+      marginTop: '12px',
+      border: 'none'
     } : {
       maxWidth: '200px',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      textOverflow: 'ellipsis'
+      textOverflow: 'ellipsis',
+      border: 'none'
     },
     disabled: btnDisabled
   })))))));
@@ -3774,171 +3871,181 @@ var index$h = /*#__PURE__*/Object.freeze({
   'default': SubscribeToNewsletter
 });
 
-const useTestimonialStyles = createUseStyles(theme => {
-  return {
+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)': {
     testimonialContainer: {
-      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'
-        }
-      }
-    },
-    sectionContainer: {
-      margin: '0 auto',
-      maxWidth: ({
-        containerWidth
-      } = {}) => containerWidth
-    },
-    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 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'
+      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: '64px',
-      height: '64px',
-      borderRadius: '32px',
-      background: '#666666',
-      marginRight: '16px',
-      flexShrink: '0'
+      width: '48px',
+      height: '48px',
+      borderRadius: '24px',
+      marginRight: '16px'
     },
     userImage: {
-      width: '64px',
-      height: '64px',
-      borderRadius: '32px',
+      width: '48px',
+      height: '48px',
+      borderRadius: '24px',
       marginRight: '16px'
     },
+    reviewText: {
+      marginBottom: '16px'
+    },
+    singleCard: {
+      margin: '6px 2px',
+      width: 'calc(100% - 14px)'
+    },
     userName: {
-      color: theme?.palette?.font?.default,
-      margin: '0',
-      fontSize: '24px',
-      paddingTop: '16px',
+      // paddingTop: '8px',
       overflow: 'hidden',
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis'
     },
-    buttonContainer: {
-      display: 'flex',
-      width: '120px',
-      justifyContent: 'space-between',
-      margin: '36px auto 81px auto'
+    userImageContainer: {
+      width: '48px',
+      height: '48px'
     },
-    '@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'
-      }
+    cardDetails: {
+      padding: '16px'
     }
-  };
-});
+    // sliderContainer: {
+    //   marginRight: '-24px'
+    // },
+  }
+}));
 
 function QuotesComponent() {
   const theme = useTheme();
@@ -3966,13 +4073,14 @@ function Section$1({
   const classes = useTestimonialStyles({
     containerWidth,
     cardsCount,
-    slidesToShow
+    slidesToShow,
+    isMobile
   });
   const settings = {
     className: classes.sliderContainer,
     slidesToShow,
     centerMode: true,
-    centerPadding: isMobile ? '10px 0 0' : '80px 0 0'
+    centerPadding: isMobile ? '0px 0 0' : '80px 0 0'
   };
   const carouselContent = carouselList.map((el, idx) =>
   /*#__PURE__*/
@@ -3986,7 +4094,7 @@ function Section$1({
     className: classes.quoteIcon
   }, /*#__PURE__*/React__default["default"].createElement(QuotesComponent, null)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.cardDetails
-  }, /*#__PURE__*/React__default["default"].createElement("p", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     ref: el?.cardTextContent?.refSetter,
     className: classes.reviewText,
     dangerouslySetInnerHTML: {
@@ -4031,7 +4139,7 @@ function Section$1({
     dangerouslySetInnerHTML: {
       __html: nodeData?.carouselHeading?.metadata?.value
     }
-  })), /*#__PURE__*/React__default["default"].createElement("h2", {
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.testimonialHeader
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     ref: nodeData?.title?.refSetter,
@@ -4453,47 +4561,51 @@ var index$f = /*#__PURE__*/Object.freeze({
 const useVideoStyles = createUseStyles(theme => {
   return {
     videoSuperContainer: {
-      padding: '70px',
-      backgroundColor: theme?.palette?.background?.primary,
+      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,
       '&, & *, & *: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: '16px',
+      fontSize: theme.typography.fontSize.subHead,
+      textTransform: 'uppercase',
       lineHeight: '20px',
-      marginBottom: '4px',
-      letterSpacing: '3px',
       color: theme?.palette?.font?.primary,
       wordBreak: 'break-word'
     },
     videoTitle: {
-      fontSize: '56px',
+      fontSize: theme.typography.fontSize.h2,
+      fontWeight: theme.typography.fontWeight.bold,
       lineHeight: '71px',
       letterSpacing: '-3px',
-      marginBottom: '20px',
-      marginTop: '0',
+      marginBottom: theme.spacing.margin.tiny,
+      marginTop: '8px',
       color: theme?.palette?.font?.default,
       wordBreak: 'break-word'
     },
     sliderContainer: {
-      marginRight: '-35px'
+      marginRight: `-${theme.spacing.padding.medium}px`
     },
     singleSlideContainer: {
       backgroundColor: theme?.palette?.background?.default,
@@ -4501,7 +4613,7 @@ const useVideoStyles = createUseStyles(theme => {
       width: 'calc(100% - 40px)',
       height: 'calc(100% - 40px)',
       borderRadius: theme?.shape?.borderRadius?.regular,
-      padding: '40px',
+      padding: '48px',
       boxShadow: theme?.shadows?.primary
     },
     contentRow: {
@@ -4514,6 +4626,7 @@ const useVideoStyles = createUseStyles(theme => {
       width: '100%',
       borderRadius: theme?.shape?.borderRadius?.regular,
       position: 'relative',
+      overflow: 'hidden',
       paddingBottom: '56.25%'
     },
     iframe: {
@@ -4528,43 +4641,32 @@ const useVideoStyles = createUseStyles(theme => {
       margin: '12px 12px 0'
     },
     videoDetailsHeading: {
-      fontSize: '24px',
+      fontSize: theme.typography.fontSize.h5,
+      fontWeight: theme.typography.fontWeight.bold,
       lineHeight: '32px',
-      margin: '0',
+      marginBottom: '8px',
       color: theme?.palette?.font?.default,
       wordBreak: 'break-word'
     },
     videoDetailsSubHeading: {
-      fontSize: '16px',
+      fontSize: theme.typography.fontSize.subHead,
       lineHeight: '24px',
       wordBreak: 'break-word',
       color: theme?.palette?.font?.primary
     },
     '@media (max-width: 767px)': {
-      videoSuperContainer: {
-        padding: '70px 20px 60px'
-      },
       videoHeading: {
-        fontSize: '16px',
-        lineHeight: '20px',
-        letterSpacing: '3px'
-      },
-      videoTitle: {
-        fontSize: '24px',
-        lineHeight: '36px',
-        letterSpacing: '-1px',
-        marginBottom: '0',
-        marginTop: '0'
+        lineHeight: '20px'
       },
       videoContainer: {
         margin: '0'
       },
       sliderContainer: {
-        marginLeft: '-6px',
-        marginRight: '-20px'
+        // marginLeft: '-6px',
+        marginRight: '0px'
       },
       singleSlideContainer: {
-        padding: '0',
+        padding: '16px',
         width: 'calc(100% - 12px)',
         height: 'calc(100% - 24px)',
         margin: '12px 6px'
@@ -4576,14 +4678,28 @@ const useVideoStyles = createUseStyles(theme => {
         textAlign: 'left',
         margin: '12px 12px 0'
       },
-      videoDetailsHeading: {
-        fontSize: '18px',
-        margin: '0'
+      videoTitle: {
+        display: 'flex',
+        justifyContent: 'center',
+        textAlign: 'center',
+        lineHeight: '36px',
+        letterSpacing: '-1px'
       },
-      videoDetailsSubHeading: {
-        fontSize: '12px',
-        paddingBottom: '20px'
+      videoHeading: {
+        display: 'flex',
+        justifyContent: 'center',
+        textAlign: 'center'
       }
+
+      // videoDetailsHeading: {
+      //   fontSize: '18px',
+      //   margin: '0'
+      // },
+
+      // videoDetailsSubHeading: {
+      //   fontSize: '12px',
+      //   paddingBottom: '20px'
+      // }
     }
   };
 });
@@ -4603,7 +4719,7 @@ const SingleSlide$1 = props => {
     videoUrl: data.videoFrame.metadata?.value
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.videoDetailsContainer
-  }, /*#__PURE__*/React__default["default"].createElement("h3", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     ref: data?.videoTitle?.refSetter,
     className: classes.videoDetailsHeading,
     dangerouslySetInnerHTML: {
@@ -4633,12 +4749,13 @@ function Video({
   const classes = useVideoStyles({
     containerWidth,
     cardsCount,
-    slidesToShow
+    slidesToShow,
+    isMobile
   });
   const settings = {
     className: classes.sliderContainer,
     slidesToShow,
-    centerPadding: isMobile ? '40px 0 0' : '100px 0 0',
+    centerPadding: isMobile ? '0px' : '100px 0 0',
     centerMode: true
   };
   const carouselContent = videoData.videoCarousel.components.map((data, index) => /*#__PURE__*/React__default["default"].createElement(SingleSlide$1, {
@@ -4658,7 +4775,7 @@ function Video({
     dangerouslySetInnerHTML: {
       __html: videoData.videoHeading.metadata.value
     }
-  })), /*#__PURE__*/React__default["default"].createElement("h2", {
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.videoTitle
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     ref: videoData?.videoTitle?.refSetter,
@@ -4678,7 +4795,7 @@ var index$e = /*#__PURE__*/Object.freeze({
   'default': Video
 });
 
-const useSectionStyles$3 = createUseStyles(theme => ({
+const useSectionStyles$3 = createUseStyles(theme => (console.log(theme), {
   section: {
     position: 'relative',
     padding: `${theme?.spacing?.padding?.regular}px 0px ${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px`,
@@ -4705,7 +4822,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     top: '0',
     left: '0',
     height: '350px',
-    background: theme?.palette?.background?.primary,
+    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
     width: '100%'
   },
   content: {
@@ -4899,7 +5016,7 @@ const useSectionStyles$2 = createUseStyles(theme => ({
     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,
+    background: theme?.isGradient ? theme?.themeGradient?.background1 : theme?.themeColors?.background1,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -4920,7 +5037,7 @@ const useSectionStyles$2 = createUseStyles(theme => ({
   subHeading: {
     fontSize: theme.typography.fontSize.subHead,
     marginBottom: '8px',
-    color: theme?.palette?.font?.tertiary,
+    color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font1,
     wordBreak: 'break-word',
     textTransform: 'uppercase',
     letterSpacing: '3px'
@@ -4930,7 +5047,7 @@ const useSectionStyles$2 = createUseStyles(theme => ({
     fontWeight: theme.typography.fontWeight.bold,
     lineHeight: 'normal',
     margin: '0',
-    color: theme?.palette?.font?.default,
+    color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font1,
     wordBreak: 'break-word',
     marginBottom: theme.spacing.margin.tiny
   },
@@ -4941,10 +5058,14 @@ const useSectionStyles$2 = createUseStyles(theme => ({
     padding: '48px 0px'
   },
   textPara: {
+    background: 'white',
+    borderRadius: '8px',
+    padding: '40px',
     lineHeight: '24px',
     color: theme?.palette?.font?.primary,
     wordBreak: 'break-word',
-    fontSize: theme.typography.fontSize.subHead
+    fontSize: theme.typography.fontSize.subHead,
+    boxShadow: '0px 2px 8px 0px rgba(0, 0, 0, 0.08)'
   },
   '@media screen and (max-width: 767px)': {
     textContent: {
@@ -5012,18 +5133,21 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
   return {
     container: {
       background: theme?.palette?.background?.default,
-      padding: '70px',
+      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`,
       '&, & *, & *: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: ({
@@ -5032,13 +5156,15 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
     },
     cardHeading: {
       color: theme?.palette?.font?.secondary,
-      fontSize: '16px',
+      fontSize: theme.typography.fontSize.subHead,
       letterSpacing: '3px',
-      wordBreak: 'break-word'
-    },
-    sliderContainer: {
-      marginRight: '-70px'
+      wordBreak: 'break-word',
+      textTransform: 'uppercase'
     },
+    // sliderContainer: {
+    //   marginRight: '-70px'
+    // },
+
     singleCard: {
       margin: '0 1px',
       width: 'calc(100% - 2px)',
@@ -5061,24 +5187,26 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       height: '100%'
     },
     title: {
-      fontSize: '56px',
+      fontSize: theme.typography.fontSize.h2,
       lineHeight: '70px',
       letterSpacing: '-3px',
       color: theme?.palette?.font?.default,
-      margin: '8px 0 20px',
+      marginTop: '8px',
+      marginBottom: theme.spacing.margin.tiny,
       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,
@@ -5086,10 +5214,11 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
-      },
-      sliderContainer: {
-        marginRight: '-20px'
       }
+
+      // sliderContainer: {
+      //   marginRight: '-20px'
+      // }
     }
   };
 });
@@ -5111,11 +5240,12 @@ function PhotoGallery({
   const classes = usePhotoGalleryStyles({
     containerWidth,
     cardsCount,
-    slidesToShow
+    slidesToShow,
+    isMobile
   });
   const settings = {
     className: classes.sliderContainer,
-    dots: false,
+    dots: true,
     infinite: true,
     speed: 500,
     slidesToShow,
@@ -5169,10 +5299,10 @@ 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`,
-    backgroundColor: theme?.palette?.background?.primary,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -5346,7 +5476,7 @@ const useTextGridStyles = createUseStyles(theme => ({
     padding: ({
       isMobile
     } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
-    backgroundColor: theme?.palette?.background?.primary,
+    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
     '&, & *, & *:before, & *:after': {
       fontFamily: theme?.typography?.fontFamily,
       boxSizing: 'border-box'
@@ -5511,39 +5641,46 @@ 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: '16px',
+      fontSize: theme.typography.fontSize.subHead,
       lineHeight: '20px',
       textAlign: 'center',
+      textTransform: 'uppercase',
       wordBreak: 'break-word'
     },
     coursesHeader: {
-      fontSize: '56px',
+      fontSize: theme.typography.fontSize.h2,
       lineHeight: '70px',
       color: theme?.palette?.font?.default,
-      margin: '10px 0 40px 10px',
+      marginTop: '8px',
+      marginBottom: theme.spacing.margin.tiny,
       overflow: 'hidden',
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
@@ -5618,7 +5755,7 @@ const useCourseStyles = createUseStyles(theme => {
     courseCardName: {
       color: theme?.palette?.font?.default,
       fontWeight: '700',
-      fontSize: '24px',
+      fontSize: theme.typography.fontSize.h5,
       lineHeight: '32px',
       wordBreak: 'break-word',
       padding: '12px 0px',
@@ -5633,7 +5770,7 @@ const useCourseStyles = createUseStyles(theme => {
       display: 'flex',
       justifyContent: 'flex-start',
       alignItems: 'center',
-      fontSize: '16px',
+      fontSize: theme.typography.fontSize.subHead,
       color: theme?.palette?.font?.primary,
       '& img': {
         marginRight: '5px'
@@ -5645,10 +5782,10 @@ const useCourseStyles = createUseStyles(theme => {
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'center',
-      padding: '13px 0 0 4px'
+      padding: '12px 0 0 4px'
     },
     courseCardPrice: {
-      fontSize: '24px',
+      fontSize: theme.typography.fontSize.h5,
       fontWeight: '700'
     },
     coursesAnchorTag: {
@@ -5669,7 +5806,8 @@ const useCourseStyles = createUseStyles(theme => {
       cursor: 'pointer',
       background: theme?.palette?.primary?.main,
       color: theme?.palette?.font?.invertedDefault,
-      padding: '12px 16px',
+      padding: '8px 16px',
+      fontWeight: theme.typography.fontWeight.bold,
       cursor: 'pointer',
       borderRadius: theme.shape.borderRadius.regular
     },
@@ -5714,7 +5852,7 @@ const useCourseStyles = createUseStyles(theme => {
         //background: theme?.palette?.background?.primary
       },
       coursesCardAndText: {
-        padding: '70px 30px'
+        // padding: '70px 30px'
       },
       singleCardContainer: {
         gridTemplateColumns: '1fr'
@@ -5723,7 +5861,7 @@ const useCourseStyles = createUseStyles(theme => {
         margin: '0'
       },
       coursesHeader: {
-        fontSize: '24px',
+        // fontSize: '24px',
         lineHeight: '36px',
         color: theme?.palette?.font?.default,
         margin: '4px 0 12px 0',
@@ -5732,8 +5870,8 @@ const useCourseStyles = createUseStyles(theme => {
         textOverflow: 'ellipsis'
       },
       singleCard: {
-        margin: '6px 2px',
-        width: 'calc(100% - 4px)'
+        margin: '6px 2px'
+        // width: 'calc(100% - 12px)'
       }
     }
   };
@@ -5898,7 +6036,8 @@ function courses({
   const [fallBackImages, setFallbackImages] = React.useState([]);
   const [showShimmer, setShowShimmer] = React.useState(true);
   const classes = useCourseStyles({
-    containerWidth
+    containerWidth,
+    isMobile
   });
   const [nodeData] = sectionData?.components;
   const handleApiCall = () => {
@@ -5950,7 +6089,7 @@ function courses({
   const settings = {
     className: classes.slickContainer,
     infinite: false,
-    slidesToShow: isMobile ? 1.1 : 3.25
+    slidesToShow: isMobile ? 1 : 3.5
   };
   const Wrapper = (cardList?.length || fallBackImages?.length) > settings.slidesToShow ? Carousel : SimpleCardsContainer;
   const wrapperProps = (cardList?.length || fallBackImages?.length) > settings.slidesToShow ? {
@@ -6029,7 +6168,7 @@ const useTeamStyles = createUseStyles(theme => {
       padding: ({
         isMobile
       } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
-      backgroundColor: theme?.palette?.background?.primary,
+      background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
@@ -6287,7 +6426,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     width: '100%',
     height: '50%',
     position: 'absolute',
-    background: theme?.palette?.background?.primary
+    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.background2
   },
   sectionContainer: {
     backgroundColor: theme?.palette?.background?.default,
@@ -6546,6 +6685,7 @@ function FormEnquiry({
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.inputDiv
   }, /*#__PURE__*/React__default["default"].createElement(Input, {
+    theme: theme,
     data: nodeData.nameField,
     value: inputVal.name,
     isValid: validData.nameValid,
@@ -6661,7 +6801,6 @@ const useSectionStyles = createUseStyles(theme => ({
     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'
@@ -6687,7 +6826,8 @@ const useSectionStyles = createUseStyles(theme => ({
     width: '100%',
     height: '50%',
     position: 'absolute',
-    background: theme?.palette?.background?.primary
+    // background: theme?.palette?.background?.primary
+    background: theme?.isGradient ? theme?.themeGradient?.background2 : theme?.themeColors?.tertiaryBlue2
   },
   sectionContainer: {
     backgroundColor: theme?.palette?.background?.default,
@@ -7057,18 +7197,21 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     webinarSuperContainer: {
       display: 'flex',
       justifyContent: 'center',
-      padding: '70px',
+      padding: ({
+        isMobile
+      } = {}) => isMobile ? `${theme.spacing.padding.medium}px ${theme.spacing.padding.regular}px` : `${theme.spacing.padding.regular}px ${theme.spacing.padding.medium}px`,
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
         boxSizing: 'border-box'
-      },
-      '& h2,& h3': {
-        fontWeight: '500',
-        '& b,& strong': {
-          fontWeight: '700'
-        }
       }
+      // '& h2,& h3': {
+      //   fontWeight: '500',
+      //   '& b,& strong': {
+      //     fontWeight: '700'
+      //   }
+      // }
     },
+
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -7080,30 +7223,34 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       maxWidth: '1440px',
       fontFamily: theme?.typography?.fontFamily
     },
-    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'
-    },
+    // 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'
+    // },
+
     webinarCarousel: {
       display: 'flex',
       justifyContent: 'flex-start',
-      gap: '20px'
+      gap: '32px'
     },
     '@media screen and (max-width: 767px)': {
       webinarCarousel: {
@@ -7118,18 +7265,21 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       alignItems: 'center'
     },
     iframeContainer: {
-      width: '90%',
+      width: '100%',
       position: 'relative',
       paddingBottom: '56.25%',
       // top: "6%",
-      left: '5%'
+      // left: '5%'
+      borderRadius: '8px',
+      overflow: 'hidden'
     },
     offerText: {
       textAlign: 'center',
-      color: theme.palette.font.primary
+      color: theme.palette.font.primary,
+      marginBottom: '5%'
     },
     offerPrice: {
-      fontSize: '28px',
+      fontSize: theme.typography.fontSize.h5,
       fontWeight: '600'
     },
     priceContainer: {
@@ -7148,9 +7298,10 @@ 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%',
@@ -7161,10 +7312,12 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       width: '100%',
       display: 'flex',
       flexDirection: 'column',
-      alignItems: 'flex-start'
+      alignItems: 'flex-start',
+      gap: '20px'
     },
     videoDetailsHeading: {
-      fontSize: '40px',
+      fontSize: theme.typography.fontSize.h3,
+      fontWeight: theme.typography.fontWeight.bold,
       lineHeight: '48px',
       margin: '0',
       letterSpacing: '-1px',
@@ -7178,7 +7331,7 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'start',
-      paddingTop: '20px',
+      padding: '24px',
       borderRadius: '10px'
     },
     bannerContainer: {
@@ -7191,14 +7344,12 @@ 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))',
-      marginBottom: '16px'
+      clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))'
     },
     bannerContainerText: {
       transform: 'rotate(180deg)'
     },
     courseDetailsTags: {
-      marginTop: '16px',
       display: 'flex'
     },
     courseDetailTag: {
@@ -7206,23 +7357,22 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       alignItems: 'center',
       marginRight: '20px',
       '& div': {
-        fontSize: '14px',
+        fontSize: theme.typography.fontSize.subHead,
         marginLeft: '10px'
       }
     },
     courseDetailContent: {
-      marginTop: '16px',
-      fontSize: '16px',
+      fontSize: theme.typography.fontSize.subHead,
       wordBreak: 'break-word',
       color: theme.palette.font.primary,
-      margin: '10px 0 20px',
-      whiteSpace: 'pre-wrap'
+      whiteSpace: 'pre-wrap',
+      width: '80%'
     },
     courseDetailViewFullDetails: {
       cursor: 'pointer',
-      fontSize: '16px',
+      fontSize: theme.typography.fontSize.subHead,
       lineHeight: '24px',
-      margin: '0',
+      marginTop: '-20px',
       color: '#00ADE7',
       wordBreak: 'break-word'
     },
@@ -7230,9 +7380,10 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       color: '#EB5757',
       fontWeight: '600'
     },
-    webinarButtonContainer: {
-      marginBottom: '20px'
-    },
+    // webinarButtonContainer: {
+    //   marginBottom: '20px'
+    // },
+
     iconBackground: {
       display: 'flex',
       width: '36px',
@@ -7264,11 +7415,10 @@ const useWebinarPromotionPage = createUseStyles(theme => {
         width: '100%'
       },
       videoDetailsHeading: {
-        fontSize: '16px',
         lineHeight: '20px'
       },
       videoTestimonialTitle: {
-        fontSize: '24px',
+        // fontSize: '24px',
         lineHeight: '36px',
         letterSpacing: '-1px'
       },
@@ -7383,7 +7533,7 @@ const SingleVideoSlide$1 = props => {
     color: theme.palette.primary.main,
     width: "20px",
     name: `${data.webinarLocation === 'Location' ? 'Location' : 'Video'}`
-  })), /*#__PURE__*/React__default["default"].createElement("div", null, data.webinarLocation === 'Location' ? data.webinarLink : data.webinarLocation))), /*#__PURE__*/React__default["default"].createElement("p", {
+  })), /*#__PURE__*/React__default["default"].createElement("div", null, data.webinarLocation === 'Location' ? data.webinarLink : data.webinarLocation))), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: data?.videoTextContent?.refSetter,
     className: classes.courseDetailContent,
     dangerouslySetInnerHTML: {
@@ -7400,7 +7550,7 @@ const SingleVideoSlide$1 = props => {
     }
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.courseViewContainer
-  }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React__default["default"].createElement("p", {
+  }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.offerText
   }, "Offer Ends in", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
     className: classes.courseDetailTime
@@ -7424,10 +7574,9 @@ const SingleVideoSlide$1 = props => {
     className: classes.priceContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.offerPrice
-  }, "\u20B9", data?.effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React__default["default"].createElement("p", {
+  }, "\u20B9", data?.effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      fontSize: '20px',
-      marginTop: '0px'
+      fontSize: '20px'
     }
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: classes.originalPrice
@@ -7461,12 +7610,14 @@ function CoursePromotionPage$1({
   sectionIndex
 }) {
   const {
+    isMobile,
     layout: {
       containerWidth
     }
   } = React.useContext(PageContext);
   const classes = useWebinarPromotionPage({
-    containerWidth
+    containerWidth,
+    isMobile
   });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.webinarSuperContainer
@@ -7492,18 +7643,22 @@ const useCoursePromotionPage = createUseStyles(theme => {
     courseSuperContainer: {
       display: 'flex',
       justifyContent: 'center',
-      padding: '70px ',
+      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`,
       '&, & *, & *: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: ({
@@ -7516,7 +7671,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       fontFamily: theme?.typography?.fontFamily
     },
     videoTestimonialHeading: {
-      fontSize: '16px',
+      fontSize: theme.typography.fontSize.subHead,
       lineHeight: '20px',
       letterSpacing: '3px',
       textTransform: 'uppercase',
@@ -7525,7 +7680,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       fontWeight: '700'
     },
     videoTestimonialTitle: {
-      fontSize: '56px',
+      fontSize: theme.typography.fontSize.h2,
       lineHeight: '71px',
       letterSpacing: '-3px',
       margin: '0',
@@ -7533,12 +7688,12 @@ const useCoursePromotionPage = createUseStyles(theme => {
       wordBreak: 'break-word'
     },
     videoCarouselContainer: {
-      marginTop: '16px'
+      // marginTop: '16px'
     },
     coursePageCarousel: {
       display: 'flex',
       justifyContent: 'flex-start',
-      gap: '20px'
+      gap: '32px'
     },
     '@media screen and (max-width: 767px)': {
       coursePageCarousel: {
@@ -7553,18 +7708,19 @@ const useCoursePromotionPage = createUseStyles(theme => {
       alignItems: 'center'
     },
     iframeContainer: {
-      width: '90%',
+      width: '100%',
       position: 'relative',
-      paddingBottom: '56.25%',
+      paddingBottom: '56.25%'
       // top: "6%",
-      left: '5%'
+      // left: '5%'
     },
+
     offerText: {
       textAlign: 'center',
       color: theme.palette.font.primary
     },
     offerPrice: {
-      fontSize: '28px',
+      fontSize: theme.typography.fontSize.h4,
       fontWeight: '700'
     },
     priceContainer: {
@@ -7582,7 +7738,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       fontWeight: '600'
     },
     bottomContainer: {
-      width: '90%',
+      width: '100%',
       marginLeft: 'auto',
       marginRight: 'auto',
       display: 'flex',
@@ -7599,25 +7755,28 @@ const useCoursePromotionPage = createUseStyles(theme => {
       width: '100%',
       display: 'flex',
       flexDirection: 'column',
-      alignItems: 'flex-start'
+      alignItems: 'flex-start',
+      gap: '20px'
     },
     videoDetailsHeading: {
-      fontSize: '40px',
+      fontSize: theme.typography.fontSize.h3,
       lineHeight: '48px',
       margin: '0',
       letterSpacing: '-1px',
       wordBreak: 'break-word',
-      color: theme.palette.font.default
+      color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font1
     },
     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',
@@ -7626,11 +7785,12 @@ const useCoursePromotionPage = createUseStyles(theme => {
       padding: '10px 10px 23px 40px',
       wordWrap: 'break-word',
       position: 'relative',
-      fontSize: '18px',
+      fontSize: theme.typography.fontSize.subHead,
       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)'
     },
@@ -7641,16 +7801,15 @@ const useCoursePromotionPage = createUseStyles(theme => {
     },
     courseEmblem: {
       background: '#F0F4F8',
+      fontSize: theme.typography.fontSize.subHead,
       borderRadius: '2.00337px',
       padding: '8px',
       display: 'flex',
       alignItems: 'center',
-      justifyContent: 'center',
-      marginTop: '20px',
-      marginBottom: '20px'
+      justifyContent: 'center'
     },
     courseDetailsTags: {
-      marginTop: '16px',
+      // marginTop: '16px',
       display: 'flex',
       flexWrap: 'wrap'
     },
@@ -7660,25 +7819,26 @@ const useCoursePromotionPage = createUseStyles(theme => {
       alignItems: 'center',
       marginRight: '20px',
       '& div': {
-        fontSize: '14px',
+        fontSize: theme.typography.fontSize.subHead,
+        fontWeight: theme.typography.fontWeight.semiBold,
         marginLeft: '10px'
       }
     },
     courseDetailContent: {
-      marginTop: '16px',
-      fontSize: '16px',
+      // marginTop: '16px',
+      fontSize: theme.typography.fontSize.subHead,
       lineHeight: '24px',
       wordBreak: 'break-word',
-      color: theme.palette.font.primary,
+      color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font1,
       whiteSpace: 'pre-wrap',
       margin: '10px 0 20px'
     },
     courseDetailViewFullDetails: {
       cursor: 'pointer',
-      fontSize: '16px',
+      fontSize: theme.typography.fontSize.subHead,
       lineHeight: '24px',
-      margin: '0',
-      color: '#00ADE7',
+      marginTop: '-24px',
+      color: theme?.isGradient ? theme?.themeGradient?.font1 : theme?.themeColors?.font1,
       wordBreak: 'break-word'
     },
     courseDetailTime: {
@@ -7724,7 +7884,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
     },
     '@media (max-width: 767px)': {
       bannerContainerText: {
-        fontSize: '16px'
+        // fontSize: '16px'
       },
       courseViewContainer: {
         width: '100%',
@@ -7745,12 +7905,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'
       },
@@ -7936,7 +8096,7 @@ const SingleVideoSlide = props => {
     className: classes.offerPrice
   }, "\u20B9 ", data.effectivePrice), checkForShowDiscount() && (data.endDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
-      fontSize: '20px',
+      // fontSize: '20px',
       marginTop: '0px'
     }
   }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -7986,12 +8146,14 @@ function CoursePromotionPage({
   sectionIndex
 }) {
   const {
+    isMobile,
     layout: {
       containerWidth
     }
   } = React.useContext(PageContext);
   const classes = useCoursePromotionPage({
-    containerWidth
+    containerWidth,
+    isMobile
   });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.courseSuperContainer