{"version":3,"file":"component---src-pages-solution-tsx-4b86a5254f987e4777a9.js","mappings":"iKAQMA,GAAYC,E,QAAAA,IAAW,SAACC,GAAD,kBAAmB,CAC5CC,kBAAmB,CACfC,WAAY,QACZC,MAAO,OACPC,OAAQ,SACRC,QAAS,GACTC,MAAO,qBACP,WACIC,aAAc,GACdC,SAAU,GACVC,WAAY,QAHhB,EAIKT,EAAMU,YAAYC,KAAK,OAAQ,CAC5BJ,aAAc,GALtB,GAQA,OAAQ,CACJK,cAAe,OACfC,WAAY,YACZL,SAAU,GACVC,WAAY,OACZK,cAAe,QACfC,WAAY,IACZX,OAAQ,EACRC,QAAS,EACTW,SAAU,KAEd,WACIT,aAAc,IADlB,EAEKP,EAAMU,YAAYC,KAAK,OAAQ,CAC5BJ,aAAc,GAHtB,IAOJU,YAAa,CACTD,SAAU,KACVZ,OAAQ,UAEZc,iBAAkB,CACdV,SAAU,GACVC,WAAY,OACZK,cAAe,UAEnBK,eAAa,GACTC,QAAS,OACTC,WAAY,cAFH,EAGRrB,EAAMU,YAAYC,KAAK,OAAQ,CAC5BW,cAAe,UAJV,GAObC,eAAa,GACTC,WAAY,EACZC,UAAW,0EACXC,aAAc,EACdC,YAAa,IAJJ,EAKR3B,EAAMU,YAAYC,KAAK,OAAQ,CAC5BgB,YAAa,EACbxB,MAAO,OACPyB,OAAQ,OACRrB,aAAc,GATT,OAoBXsB,EAA+B,SAAC,GAA0C,IAAxCC,EAAuC,EAAvCA,SAAUC,EAA6B,EAA7BA,MAAOC,EAAsB,EAAtBA,MAAOC,EAAe,EAAfA,SACtDC,EAAUpC,IAChB,OACI,uBACIqC,KAAK,WACLC,OAAQL,IAAUC,EAClBK,GAAE,4BAA8BL,EAChC,yCAAwCA,EACxCM,MAAO,CACHpC,WAAY,QACZG,QAAS4B,EAAW,GAAK,sBACzBlB,WAAY,IACZD,cAAe,WAGnB,uBAAKyB,UAAWL,EAAQf,eAAgBY,IAAUC,GAASF,KAKjEU,EAAoB,CACtBlC,MAAO,mBACPO,WAAY,SACZL,SAAU,GACVO,WAAY,IACZD,cAAe,MACfP,aAAc,EACdkC,UAAW,GAqLf,IA9KwD,SAAC,GAAkB,IAAhBR,EAAe,EAAfA,SACjDC,EAAUpC,IAEhB,EAAgC4C,EAAAA,SAAe,GAAxCC,EAAP,KAAiBC,EAAjB,KAKMC,GAAOC,EAAAA,EAAAA,gBAAe,aAmC5B,OACI,2BAASP,UAAWL,EAAQjC,mBACxB,uBAAKsC,UAAWL,EAAQjB,aACpB,gBAAC,IAAD,CACIc,MAAOY,EACPI,SA5CQ,SAACC,EAAwBC,GAC7CL,EAAYK,IA4CAC,eAAe,UACfC,UAAU,UACVC,QAAQ,aACRC,cAAepB,EAAW,KAAO,MACjC,aAAW,uCACXK,MAAO,CACHpC,WAAY,QACZwB,aAAc,MACd4B,aAAc,iCAElBC,kBAAmB,CACfzB,SACI,wBACIQ,MAAO,CACHV,OAAQ,EACRZ,SAAU,IACVb,MAAO,OACPqD,gBAAiB,UACjB9B,aAAc,KAI1BY,MAAO,CACHV,OAAQ,EACRR,QAAS,OACTqC,eAAgB,SAChBD,gBAAiB,iBAKzB,gBAAC,IAAD,CAAKE,MAAM,iBAAiBpB,MAAOE,IACnC,gBAAC,IAAD,CAAKkB,MAAM,gBAAgBpB,MAAOE,IAClC,gBAAC,IAAD,CAAKkB,MAAM,mBAAmBpB,MAAOE,KAEzC,gBAACX,EAAD,CAAUE,MAAOY,EAAUX,MAAO,EAAGC,SAAUA,IACzCA,GACE,gBAAC,UAAD,CACI0B,MAAOd,EAAKe,oCAAoCC,gBAAgBF,MAChEG,IAAI,4DACJvB,UAAWL,EAAQX,gBAG1BU,GACG,gBAAC,UAAD,CACI8B,MAAOlB,EAAKe,oCAAoCC,gBAAgBE,MAChED,IAAI,4DACJvB,UAAWL,EAAQX,gBAG3B,2BACI,yEACA,0BACI,udAWZ,gBAACM,EAAD,CAAUE,MAAOY,EAAUX,MAAO,EAAGC,SAAUA,IACzCA,GACE,gBAAC,UAAD,CACI0B,MAAOd,EAAKmB,+BAA+BH,gBAAgBF,MAC3DG,IAAI,0EACJvB,UAAWL,EAAQX,gBAG1BU,GACG,gBAAC,UAAD,CACI8B,MAAOlB,EAAKmB,+BAA+BH,gBAAgBE,MAC3DD,IAAI,0EACJvB,UAAWL,EAAQX,gBAG3B,2BACI,wEACA,0BACG,wgBAUX,gBAACM,EAAD,CAAUE,MAAOY,EAAUX,MAAO,EAAGC,SAAUA,IACzCA,GACE,gBAAC,UAAD,CACI0B,MAAOd,EAAKoB,6BAA6BJ,gBAAgBF,MACzDG,IAAI,+CACJvB,UAAWL,EAAQX,gBAG1BU,GACG,gBAAC,UAAD,CACI8B,MAAOlB,EAAKoB,6BAA6BJ,gBAAgBE,MACzDD,IAAI,+CACJvB,UAAWL,EAAQX,gBAG3B,2BACI,2EACA,0BACI,of,oNC1PtBzB,GAAYC,EAAAA,EAAAA,IAAW,SAACC,GAAD,MAAmB,CAC9CkE,4BAA6B,CAC3B/D,MAAO,OACPyB,OAAQ,OACR1B,WACE,6EAEJiE,iBAAkB,CAChBC,WAAY,IACZpD,SAAU,IACVI,QAAS,OACTE,cAAe,SACfmC,eAAgB,SAChBpC,WAAY,aACZO,OAAQ,OACRf,WAAY,SAEZP,MAAO,qBACPQ,cAAe,SAEf,4BAA6B,CAC3BV,OAAQ,SACRC,QAAS,SACTE,aAAc,GACd,OAAQ,CACNC,SAAU,GACVC,WAAY,OACZM,WAAY,KAEd,MAAO,CACLX,OAAQ,YAIdiE,WAAY,CACV7D,SAAU,GACVC,WAAY,OACZ,4BAA6B,CAC3BM,WAAY,IACZP,SAAU,GACVC,WAAY,OACZK,cAAe,WAGnBwD,iBAAkB,CAChB9D,SAAU,GACVO,WAAY,IACZN,WAAY,OACZ,4BAA6B,CAC3BI,WAAY,YACZE,WAAY,IACZN,WAAY,OACZD,SAAU,GACVM,cAAe,WAGnByD,aAAc,CACZC,UAAW,SACXxD,SAAU,KACVZ,OAAQ,SACRG,aAAc,GACd,OAAQ,CACNA,aAAc,IAEhB,UAAW,CACTkB,UACE,2EACFC,aAAc,IAGlB+C,iBAAkB,CAChBrE,OAAQ,SACRoE,UAAW,SACX/B,UAAW,GACXzB,SAAU,KACV,4BAA6B,CAC3ByB,UAAW,GACX,OAAQ,CACNjC,SAAU,GACVO,WAAY,IACZN,WAAY,OACZK,cAAe,MACf4D,cAAe,YACfrE,QAAS,WAGb,OAAQ,CACNO,cAAe,OACfR,OAAQ,aACRC,QAAS,EACTe,QAAS,OACTC,WAAY,SACZoC,eAAgB,gBAChBkB,SAAU,OACVnE,SAAU,GACVC,WAAY,OACZH,MAAO,qBACPO,WAAY,SACZ,4BAA6B,CAC3B4C,eAAgB,SAChBpD,QAAS,SACTG,SAAU,GACVO,WAAY,MAGhB,OAAQ,CACNK,QAAS,OACTE,cAAe,SACfD,WAAY,SACZoC,eAAgB,SAChBzC,SAAU,IACV,QAAS,CACPY,OAAQ,IACRrB,aAAc,GACdF,QAAS,SACT,4BAA6B,CAC3BuB,OAAQ,IACRrB,aAAc,KAGlB,4BAA6B,CAC3B,MAAO,CACLkC,UAAW,GACXlC,aAAc,OAKtBqE,mBAAoB,CAClBxE,OAAQ,SACRY,SAAU,KACV6D,SAAU,KACV,4BAA6B,CAC3BA,SAAU,OACV7D,SAAU,SAGd8D,mBAAoB,CAClBxE,MAAO,QACPJ,WAAY,UACZwB,aAAc,EACdN,QAAS,OACTO,YAAa,GACbc,UAAW,GACXlC,aAAc,IACdF,QAAS,sBACTuB,OAAQ,IACR,4BAA6B,CAC3BiD,SAAU,OACV7D,SAAU,OACVY,OAAQ,OACRvB,QAAS,EACTqB,aAAc,EACdJ,cAAe,SACfmB,UAAW,IACXlC,aAAc,MAGlBwE,gBAAiB,CACfpD,YAAa,GACb,OAAQ,CACNnB,SAAU,GACVC,WAAY,OACZF,aAAc,GACd,4BAA6B,CAC3BC,SAAU,GACVC,WAAY,SAGhB,MAAO,CACLI,WAAY,YACZE,WAAY,KAEd,4BAA6B,CAC3BiE,UAAW,OACX5E,OAAQ,EACRC,QAAS,cAGb4E,wBAAyB,CACvB9E,MAAO,MACP,4BAA6B,CAC3BA,MAAO,OACP6E,UAAW,OACXxD,WAAY,EACZnB,QAAS,SACT,QAAS,CACPqB,aAAc,EACdD,UACE,6EAIRyD,wBAAyB,CACvBC,SAAU,WACVC,MAAO,IACPC,KAAM,KAERC,uBAAwB,CACtB7C,WAAY,KAEd8C,0BAA2B,CACzBhF,cAAe,KAEjBiF,YAAa,CACXtF,WAAY,SAEduF,gBAAiB,CACflF,aAAc,GACdF,QAAS,GACTW,SAAU,KACVZ,OAAQ,SACRgB,QAAS,OACTsE,iBAAkB,WAClBrE,WAAY,SACZ,OAAQ,CACNqD,cAAe,YACf7D,WAAY,SACZE,WAAY,IACZP,SAAU,GACVC,WAAY,OACZK,cAAe,SACf,4BAA6B,CAC3B2B,UAAW,IAGf,UAAW,CACTjC,SAAU,GACVK,WAAY,SACZE,WAAY,IACZN,WAAY,OACZK,cAAe,SACfV,OAAQ,SACR,4BAA6B,CAC3BI,SAAU,GACVC,WAAY,SAGhB,MAAO,CACLgC,UAAW,IAEb,OAAQ,CACNpC,QAAS,UAEX,4BAA6B,CAC3BiB,cAAe,SACfjB,QAAS,SACT,iBAAkB,CAChBA,QAAS,UAEX,MAAO,CACL+D,WAAY,GACZ3B,UAAW,MAIjBkD,uBAAwB,CACtBvE,QAAS,OACTwE,oBAAqB,UACrBvE,WAAY,SACZ,4BAA6B,CAC3BuE,oBAAqB,SAGzBC,qBAAsB,CACpB,KAAM,CACJnB,cAAe,OACflE,SAAU,QACVgE,UAAW,SACX3D,WAAY,wBACZE,WAAY,OACZN,WAAY,OACZ,QAAS,CACPL,OAAQ,SACR0F,cAAe,SAGnB,4BAA6B,CAC3B,KAAM,CACJtB,UAAW,OACXhE,SAAU,QAEZ,QAAS,CACPJ,OAAQ,eACR0F,cAAe,kBAIrBC,cAAe,CACbZ,SAAU,WACVhF,MAAO,OACPiB,QAAS,OACTqC,eAAgB,SAChBe,UAAW,UAEbwB,gBAAiB,CACf5E,QAAS,OACTE,cAAe,SACf2E,IAAK,WAEPC,kBAAmB,CACjB9E,QAAS,OACTE,cAAe,SACf2E,IAAK,WAEPE,sBAAuB,CACrBhB,SAAU,WACVE,IAAK,QAEPe,mBAAoB,CAClBhF,QAAS,OACTE,cAAe,MACf2E,IAAK,OACL7F,OAAQ,SACR,4BAA6B,CAC3BkB,cAAe,SACflB,OAAQ,WAGZiG,eAAgB,CACd7B,UAAW,OACXhE,SAAU,OACV8F,KAAM,GAERC,gBAAiB,CACfnF,QAAS,OACTC,WAAY,SACZiF,KAAM,EACN,4BAA6B,CAC3B7C,eAAgB,WAGpB+C,aAAc,CACZhF,WAAY,EACZE,aAAc,GAEhB+E,mBAAoB,CAClB,QAAS,CACPC,UAAW,uBAGfC,qBAAsB,CACpBpG,aAAc,GACdC,SAAU,GACVK,WAAY,iBA6XhB,UAzXyB,WACvB,IAAMqB,EAAUpC,IACV8G,GAAOC,EAAAA,EAAAA,KAEP5E,GAAW6E,EAAAA,EAAAA,GAAc,qBAEzBjE,GAAOC,EAAAA,EAAAA,gBAAe,cA0GtBiE,EAAqBC,EAAAA,GAAN,4BACfC,EAAoBD,EAAAA,GAAN,qCACdE,EAAkBF,EAAAA,GAAN,4BAElB,OACE,gBAAC,IAAD,KACE,gBAAC,IAAD,CAAKG,MAAM,aACX,gBAAC,IAAD,MACA,gBAAC,IAAD,CACEC,aAAcvE,EAAKwE,iBAAiBxD,gBAAgBE,MACpDuD,YAAazE,EAAK0E,gBAAgB1D,gBAAgBE,MAClDD,IAAI,uEAEJ,uBAAKvB,UAAWL,EAAQgC,6BACtB,2BAAS3B,UAAWL,EAAQiC,kBAC1B,sBAAI5B,UAAWqE,EAAKY,GAAIlF,MAAO,CAAE/B,aAAc,IAA/C,uBAGA,sBAAIgC,UAAWqE,EAAKa,GAAInF,MAAO,CAAE/B,aAAc,KAA/C,yIAIA,sBAAIgC,UAAWqE,EAAKa,GAAInF,MAAO,CAAE/B,aAAc,KAA/C,uLAKA,gBAAC,IAAD,CACE6C,QAAQ,SACRsE,KAAMC,EAAAA,GACNrF,MAAO,CAAEsF,OAAQ,IAHnB,oBAUN,2BAASrF,UAAWL,EAAQqC,cACzBtC,GACC,0BACE,2FAKFA,GACA,wFAEF,gBAAC,IAAD,CACE4F,WAAYd,EACZe,YAAab,EACbC,aAAcA,KAGlB,2BAAS3E,UAAWL,EAAQqC,cACzBtC,GACC,0BACE,sGAMFA,GACA,mGAKF,uBAAKM,UAAWL,EAAQkE,oBACtB,uBAAK7D,UAAWL,EAAQmE,gBACtB,sBAAI9D,WAAWwF,EAAAA,EAAAA,GAAKnB,EAAKa,GAAIvF,EAAQyE,uBAArC,4PAMA,sBAAIpE,WAAWwF,EAAAA,EAAAA,GAAKnB,EAAKa,GAAIvF,EAAQyE,uBAArC,6PAOD1E,GACC,uBAAKM,UAAWL,EAAQqE,iBACtB,gBAAC,UAAD,CACE5C,MAAOd,EAAKmF,qBAAqBnE,gBAAgBF,MACjDG,IAAI,8BACJvB,UAAWL,EAAQuE,uBAIvBxE,GACA,uBAAKM,UAAWL,EAAQqE,iBACtB,gBAAC,UAAD,CACE5C,MAAOd,EAAKmF,qBAAqBnE,gBAAgBF,MACjDG,IAAI,8BACJvB,UAAWL,EAAQsE,kBAM7B,2BAASjE,UAAWL,EAAQ6D,eACzB9D,GACC,0BACE,4FAKFA,GACA,sBAAIM,UAAWL,EAAQiE,uBAAvB,gEAKJ,uBAAK5D,UAAWL,EAAQ0C,oBACtB,2BAASrC,UAAWL,EAAQ4C,oBACzB7C,GACC,uBAAKM,UAAWL,EAAQ+C,yBACtB,gBAAC,UAAD,CACElB,MAAOlB,EAAKoF,uBAAuBpE,gBAAgBE,MACnDD,IAAI,sEACJvB,UAAWL,EAAQoD,0BAIzB,uBAAK/C,UAAWL,EAAQ6C,iBACtB,sBAAIzC,MAAO,CAAE9B,SAAU,KAAvB,mCACA,wOAMA,yPAMA,sBAAI+B,UAAWL,EAAQ8D,iBACrB,yLAKA,0KAKA,2KAOH/D,GACC,uBAAKM,UAAWL,EAAQ+C,yBACtB,gBAAC,UAAD,CACElB,MAAOlB,EAAKqF,0BAA0BrE,gBAAgBE,MACtDD,IAAI,mEACJvB,UAAWL,EAAQqD,8BAIvBtD,GACA,uBAAKM,UAAWL,EAAQ+C,yBACtB,gBAAC,UAAD,CACEtB,MAAOd,EAAKsF,wBAAwBtE,gBAAgBF,MACpDG,IAAI,sEACJvB,UAAWL,EAAQgD,6BAO7B,gBAAC,IAAD,CAA0BjD,SAAUA,IAEpC,2BAASM,UAAWL,EAAQuD,iBAC1B,4BACIxD,GACA,sBAAIM,UAAWL,EAAQ2D,sBAAvB,uDAKJ,uBAAKtD,UAAWL,EAAQyD,wBACtB,2BACG1D,GACC,gBAAC,UAAD,CACE8B,MAAOlB,EAAKuF,cAAcvE,gBAAgBE,MAC1CD,IAAI,iFACJxB,MAAO,CACLd,WAAY,EACZC,UACE,6EAIPQ,GACC,sBAAIM,UAAWL,EAAQ2D,sBACrB,kFAGJ,0HAIA,6JAIA,sBAAItD,UAAWL,EAAQgE,mBACrB,mIAIA,kHAIA,gIAIA,mHAIA,yIAKF,gBAAC,IAAD,CAAY9C,QAAQ,SAASsE,KAAMC,EAAAA,IAAnC,kBAIF,4BACI1F,GACA,gBAAC,UAAD,CACE0B,MAAOd,EAAKuF,cAAcvE,gBAAgBF,MAC1CG,IAAI,iFACJxB,MAAO,CACL8B,WAAY,GACZ5C,WAAY,EACZC,UACE,gFAOd,gBAAC,IAAD","sources":["webpack://marketing/./src/components/product/ProductCoreValuesSection.tsx","webpack://marketing/./src/pages/solution.tsx"],"sourcesContent":["import React, { FC, ChangeEvent } from \"react\"\r\nimport { useStaticQuery, graphql } from \"gatsby\"\r\nimport Img from \"gatsby-image\"\r\nimport Tabs from \"@material-ui/core/Tabs\"\r\nimport Tab from \"@material-ui/core/Tab\"\r\nimport { makeStyles } from \"@material-ui/core/styles\"\r\nimport { Theme } from \"@material-ui/core\"\r\n\r\nconst useStyles = makeStyles((theme: Theme) => ({\r\n    productCoreValues: {\r\n        background: \"white\",\r\n        width: \"100%\",\r\n        margin: \"0 auto\",\r\n        padding: 16,\r\n        color: \"rgba(0, 0, 0, 0.6)\",\r\n        \"& h2\": {\r\n            marginBottom: 32,\r\n            fontSize: 24,\r\n            lineHeight: \"28px\",\r\n            [theme.breakpoints.down('md')]: {\r\n                marginBottom: 8\r\n            }\r\n        },\r\n        \"& ul\": {\r\n            listStyleType: \"none\",\r\n            fontFamily: \"Open Sans\",\r\n            fontSize: 16,\r\n            lineHeight: \"24px\",\r\n            letterSpacing: \"0.5px\",\r\n            fontWeight: 400,\r\n            margin: 0,\r\n            padding: 0,\r\n            maxWidth: 585\r\n        },\r\n        \"& li\": {\r\n            marginBottom: 24,\r\n            [theme.breakpoints.down('md')]: {\r\n                marginBottom: 8\r\n            }\r\n        }\r\n    },\r\n    tabsWrapper: {\r\n        maxWidth: 1080,\r\n        margin: \"0 auto\"\r\n    },\r\n    mobileSubheading: {\r\n        fontSize: 20,\r\n        lineHeight: \"24px\",\r\n        letterSpacing: \"0.25px\"\r\n    },\r\n    tabPanelInner: {\r\n        display: \"flex\",\r\n        alignItems: \"flex-start\",\r\n        [theme.breakpoints.down('md')]: {\r\n            flexDirection: \"column\"\r\n        }\r\n    },\r\n    tabPanelImage: {\r\n        flexShrink: 0,\r\n        boxShadow: \"0px 24px 32px rgba(0, 0, 0, 0.08), 0px 12.5px 128px rgba(0, 0, 0, 0.08)\",\r\n        borderRadius: 4,\r\n        marginRight: 45,\r\n        [theme.breakpoints.down('md')]: {\r\n            marginRight: 0,\r\n            width: \"100%\",\r\n            height: \"auto\",\r\n            marginBottom: 8\r\n        }\r\n    }\r\n}))\r\n\r\ninterface IPropsTabPanel {\r\n    value: number\r\n    index: number\r\n    isMobile?: boolean\r\n}\r\n\r\nconst TabPanel: FC<IPropsTabPanel> = ({ children, value, index, isMobile }) => {\r\n    const classes = useStyles()\r\n    return (\r\n        <div\r\n            role=\"tabpanel\"\r\n            hidden={value !== index}\r\n            id={`scrollable-auto-tabpanel-${index}`}\r\n            aria-labelledby={`scrollable-auto-tab-${index}`}\r\n            style={{\r\n                background: \"white\",\r\n                padding: isMobile ? 16 : \"16px 25px 24px 25px\",\r\n                fontWeight: 500,\r\n                letterSpacing: \"0.15px\"\r\n            }}\r\n        >\r\n            <div className={classes.tabPanelInner}>{value === index && children}</div>\r\n        </div>\r\n    )\r\n}\r\n\r\nconst tabStyleOverrides = {\r\n    color: \"rgba(0,0,0,0.64)\",\r\n    fontFamily: \"Ubuntu\",\r\n    fontSize: 12,\r\n    fontWeight: 500,\r\n    letterSpacing: \"1px\",\r\n    marginBottom: 6,\r\n    marginTop: 1\r\n}\r\n\r\ninterface IPropsProductCore {\r\n    isMobile?: boolean\r\n}\r\n\r\nconst ProductCoreValuesSection: FC<IPropsProductCore> = ({ isMobile }) => {\r\n    const classes = useStyles()\r\n\r\n    const [tabValue, setTabValue] = React.useState(0)\r\n    const handleTabChange = (event: ChangeEvent<{}>, newValue: number) => {\r\n        setTabValue(newValue)\r\n    }\r\n\r\n    const data = useStaticQuery(graphql`\r\n        query {\r\n            circleOfNuliaAssessmentProcessImage: file(relativePath: { eq: \"product/circle-of-nulia-assessment-process.png\" }) {\r\n                childImageSharp {\r\n                    fixed(width: 382) {\r\n                        ...GatsbyImageSharpFixed\r\n                    }\r\n                    fluid(maxWidth: 959) {\r\n                        ...GatsbyImageSharpFluid\r\n                    }\r\n                }\r\n            }\r\n            circleOfNuliaBuildProcessImage: file(relativePath: { eq: \"product/circle-of-nulia-build-process.jpg\" }) {\r\n                childImageSharp {\r\n                    fixed(width: 382) {\r\n                        ...GatsbyImageSharpFixed\r\n                    }\r\n                    fluid(maxWidth: 959) {\r\n                        ...GatsbyImageSharpFluid\r\n                    }\r\n                }\r\n            }\r\n            circleOfNuliaChampionService: file(relativePath: { eq: \"product/circle-of-nulia-champion-service.jpeg\" }) {\r\n                childImageSharp {\r\n                    fixed(width: 382) {\r\n                        ...GatsbyImageSharpFixed\r\n                    }\r\n                    fluid(maxWidth: 959) {\r\n                        ...GatsbyImageSharpFluid\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    `)\r\n\r\n    return (\r\n        <section className={classes.productCoreValues}>\r\n            <div className={classes.tabsWrapper}>\r\n                <Tabs\r\n                    value={tabValue}\r\n                    onChange={handleTabChange}\r\n                    indicatorColor=\"primary\"\r\n                    textColor=\"primary\"\r\n                    variant=\"scrollable\"\r\n                    scrollButtons={isMobile ? \"on\" : \"off\"}\r\n                    aria-label=\"The three core values of Nulia Works\"\r\n                    style={{\r\n                        background: \"white\",\r\n                        borderRadius: \"4px\",\r\n                        borderBottom: \"1px solid rgba(0, 0, 0, 0.08)\"\r\n                    }}\r\n                    TabIndicatorProps={{\r\n                        children: (\r\n                            <span\r\n                                style={{\r\n                                    height: 4,\r\n                                    maxWidth: 138,\r\n                                    width: \"100%\",\r\n                                    backgroundColor: \"#654EA3\",\r\n                                    borderRadius: 4\r\n                                }}\r\n                            />\r\n                        ),\r\n                        style: {\r\n                            height: 4,\r\n                            display: \"flex\",\r\n                            justifyContent: \"center\",\r\n                            backgroundColor: \"transparent\"\r\n                        }\r\n                    }}\r\n                >\r\n                    {/* TODO: A11y Props for tabs */}\r\n                    <Tab label=\"ASSESS PROCESS\" style={tabStyleOverrides} />\r\n                    <Tab label=\"BUILD PROCESS\" style={tabStyleOverrides} />\r\n                    <Tab label=\"CHAMPION PROCESS\" style={tabStyleOverrides} />\r\n                </Tabs>\r\n                <TabPanel value={tabValue} index={0} isMobile={isMobile}>\r\n                    {!isMobile && (\r\n                        <Img\r\n                            fixed={data.circleOfNuliaAssessmentProcessImage.childImageSharp.fixed}\r\n                            alt=\"A screenshot of the Insights page on the Nulia Works site\"\r\n                            className={classes.tabPanelImage}\r\n                        />\r\n                    )}\r\n                    {isMobile && (\r\n                        <Img\r\n                            fluid={data.circleOfNuliaAssessmentProcessImage.childImageSharp.fluid}\r\n                            alt=\"A screenshot of the Insights page on the Nulia Works site\"\r\n                            className={classes.tabPanelImage}\r\n                        />\r\n                    )}\r\n                    <div>\r\n                        <h2>Circle of Nulia Methodology: Assess Process</h2>\r\n                        <ul>\r\n                            <p>\r\n                                Our Assess Process leverages our Nulia Works Measure & Evaluate Pillar to provide \r\n                                an in-depth evaluation of an organization’s technology adoption, comparing it to \r\n                                established adoption goals and business value drivers. \r\n                                The Assess Process is based on an organization’s actual Microsoft 365 usage \r\n                                and identifies skills that have been developed and are being used, and uncovers new \r\n                                skill development opportunities and Outcome attainment goals.\r\n                            </p>\r\n                        </ul>\r\n                    </div>\r\n                </TabPanel>\r\n                <TabPanel value={tabValue} index={1} isMobile={isMobile}>\r\n                    {!isMobile && (\r\n                        <Img\r\n                            fixed={data.circleOfNuliaBuildProcessImage.childImageSharp.fixed}\r\n                            alt=\"A screenshot of the Outcomes and other tools on on the Nulia Works site\"\r\n                            className={classes.tabPanelImage}\r\n                        />\r\n                    )}\r\n                    {isMobile && (\r\n                        <Img\r\n                            fluid={data.circleOfNuliaBuildProcessImage.childImageSharp.fluid}\r\n                            alt=\"A screenshot of the Outcomes and other tools on on the Nulia Works site\"\r\n                            className={classes.tabPanelImage}\r\n                        />\r\n                    )}\r\n                    <div>\r\n                        <h2>Circle of Nulia Methodology: Build Process</h2>\r\n                        <ul>\r\n                           <p>\r\n                                Our Build Process leverages our Nulia Works Personalize & Guide Pillar to personalize \r\n                                a specific Microsoft 365 adoption & change management plan for each organization and employee. \r\n                                Through our Solution Discovery and Design process, Outcomes are selected to drive achievement of an \r\n                                organization’s prioritized business value drivers. And new Outcomes can be quickly added to the catalog \r\n                                to address specific customer user cases, vertical industry solutions, and role specific adoption needs.\r\n                           </p>\r\n                        </ul>\r\n                    </div>\r\n                </TabPanel>\r\n                <TabPanel value={tabValue} index={2} isMobile={isMobile}>\r\n                    {!isMobile && (\r\n                        <Img\r\n                            fixed={data.circleOfNuliaChampionService.childImageSharp.fixed}\r\n                            alt=\"A picture of people working together happily\"\r\n                            className={classes.tabPanelImage}\r\n                        />\r\n                    )}\r\n                    {isMobile && (\r\n                        <Img\r\n                            fluid={data.circleOfNuliaChampionService.childImageSharp.fluid}\r\n                            alt=\"A picture of people working together happily\"\r\n                            className={classes.tabPanelImage}\r\n                        />\r\n                    )}\r\n                    <div>\r\n                        <h2>Circle of Nulia Methodology: Champion Service</h2>\r\n                        <ul>\r\n                            <p>\r\n                                Our Champion Process leverages our Nulia Works Engage & Reward Pillar to continuously engage \r\n                                employees to drive their digital skills development, getting them to deeply adopt and use Microsoft 365 apps, \r\n                                features, and functions. Champions make the change process fun by providing reward programs utilizing Nulia Works \r\n                                features like engagement points and achievements. All leading to employees developing skills and attaining badges \r\n                                which certify outcome attainment.\r\n                            </p>\r\n                        </ul>\r\n                    </div>\r\n                </TabPanel>\r\n            </div>\r\n        </section>\r\n    )\r\n}\r\n\r\nexport default ProductCoreValuesSection\r\n","import React, { FC } from \"react\";\nimport { useStaticQuery, graphql } from \"gatsby\";\nimport Img from \"gatsby-image\";\nimport useMediaQuery from \"@material-ui/core/useMediaQuery\";\nimport Layout from \"../components/Layout\";\nimport SEO from \"../components/SEO\";\nimport PurpleAccentHero from \"../components/PurpleAccentHero\";\nimport ButtonLink from \"../components/ButtonLink\";\nimport ProductCoreValuesSection from \"../components/product/ProductCoreValuesSection\";\nimport InternalButtonLink from \"../components/InternalButtonLink\";\nimport ResponsiveVideo from \"../components/ResponsiveVideo\";\nimport { IMAGES_PATH } from \"../utils/constants\";\nimport CookiesSnackbar from \"../components/CookiesSnackbar\";\nimport { useTypography } from \"../styles/Typography\";\nimport { makeStyles } from \"@material-ui/styles\";\nimport { WORKSHOP } from \"../utils/routes\";\nimport DiscoverMoreBanner from \"../components/DiscoverMoreBanner\";\nimport { Theme } from \"@material-ui/core\";\nimport clsx from \"clsx\";\n\nconst useStyles = makeStyles((theme: Theme) => ({\n  titleHeadingGradientWrapper: {\n    width: \"100%\",\n    height: \"100%\",\n    background:\n      \"linear-gradient(132.83deg, #FFFFFF 26.33%, rgba(255, 255, 255, 0) 65.07%)\",\n  },\n  titleHeadingText: {\n    marginLeft: 100,\n    maxWidth: 406,\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    alignItems: \"flex-start\",\n    height: \"100%\",\n    fontFamily: \"Ubuntu\",\n\n    color: \"rgba(0, 0, 0, 0.8)\",\n    letterSpacing: \"0.15px\",\n\n    \"@media (max-width: 959px)\": {\n      margin: \"0 auto\",\n      padding: \"0 24px\",\n      marginBottom: 20,\n      \"& h1\": {\n        fontSize: 20,\n        lineHeight: \"24px\",\n        fontWeight: 400,\n      },\n      \"& a\": {\n        margin: \"0 auto\",\n      },\n    },\n  },\n  subHeading: {\n    fontSize: 20,\n    lineHeight: \"32px\",\n    \"@media (max-width: 959px)\": {\n      fontWeight: 500,\n      fontSize: 16,\n      lineHeight: \"24px\",\n      letterSpacing: \"0.15px\",\n    },\n  },\n  titleDescription: {\n    fontSize: 16,\n    fontWeight: 500,\n    lineHeight: \"24px\",\n    \"@media (max-width: 959px)\": {\n      fontFamily: \"Open Sans\",\n      fontWeight: 400,\n      lineHeight: \"21px\",\n      fontSize: 14,\n      letterSpacing: \"0.25px\",\n    },\n  },\n  videoSection: {\n    textAlign: \"center\",\n    maxWidth: 1100,\n    margin: \"0 auto\",\n    marginBottom: 60,\n    \"& h2\": {\n      marginBottom: 24,\n    },\n    \"& video\": {\n      boxShadow:\n        \"0 4px 2px -2px rgba(0, 0, 0, 0.08), 0px 12.5px 128px rgba(0, 0, 0, 0.08)\",\n      borderRadius: 4,\n    },\n  },\n  unlockingSection: {\n    margin: \"0 auto\",\n    textAlign: \"center\",\n    marginTop: 16,\n    maxWidth: 1067,\n    \"@media (max-width: 959px)\": {\n      marginTop: 32,\n      \"& h2\": {\n        fontSize: 12,\n        fontWeight: 400,\n        lineHeight: \"16px\",\n        letterSpacing: \"2px\",\n        textTransform: \"uppercase\",\n        padding: \"0 32px\",\n      },\n    },\n    \"& ul\": {\n      listStyleType: \"none\",\n      margin: \"30px 0 0 0\",\n      padding: 0,\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      flexWrap: \"wrap\",\n      fontSize: 20,\n      lineHeight: \"24px\",\n      color: \"rgba(0, 0, 0, 0.6)\",\n      fontFamily: \"Ubuntu\",\n      \"@media (max-width: 959px)\": {\n        justifyContent: \"center\",\n        padding: \"0 32px\",\n        fontSize: 16,\n        fontWeight: 500,\n      },\n    },\n    \"& li\": {\n      display: \"flex\",\n      flexDirection: \"column\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      maxWidth: 304,\n      \"& div\": {\n        height: 200,\n        marginBottom: 30,\n        padding: \"0 40px\",\n        \"@media (max-width: 959px)\": {\n          height: 175,\n          marginBottom: 15,\n        },\n      },\n      \"@media (max-width: 959px)\": {\n        \"& p\": {\n          marginTop: 20,\n          marginBottom: 40,\n        },\n      },\n    },\n  },\n  createWorldWrapper: {\n    margin: \"0 auto\",\n    maxWidth: 1135,\n    minWidth: 1050,\n    \"@media (max-width: 959px)\": {\n      minWidth: \"100%\",\n      maxWidth: \"100%\",\n    },\n  },\n  createWorldSection: {\n    color: \"white\",\n    background: \"#654EA3\",\n    borderRadius: 4,\n    display: \"flex\",\n    marginRight: 55,\n    marginTop: 60,\n    marginBottom: 100,\n    padding: \"60px 40px 37px 40px\",\n    height: 700,\n    \"@media (max-width: 959px)\": {\n      minWidth: \"100%\",\n      maxWidth: \"100%\",\n      height: \"100%\",\n      padding: 0,\n      borderRadius: 0,\n      flexDirection: \"column\",\n      marginTop: 180,\n      marginBottom: 160,\n    },\n  },\n  createWorldText: {\n    marginRight: 40,\n    \"& h2\": {\n      fontSize: 32,\n      lineHeight: \"40px\",\n      marginBottom: 16,\n      \"@media (max-width: 959px)\": {\n        fontSize: 23,\n        lineHeight: \"28px\",\n      },\n    },\n    \"& p\": {\n      fontFamily: \"Open Sans\",\n      fontWeight: 400,\n    },\n    \"@media (max-width: 959px)\": {\n      flexBasis: \"auto\",\n      margin: 0,\n      padding: \"16px 32px\",\n    },\n  },\n  createWorldImageWrapper: {\n    width: \"40%\",\n    \"@media (max-width: 959px)\": {\n      width: \"100%\",\n      flexBasis: \"auto\",\n      flexShrink: 0,\n      padding: \"0 32px\",\n      \"& img\": {\n        borderRadius: 4,\n        boxShadow:\n          \"0px 24px 32px rgba(0, 0, 0, 0.08), 0px 12.5px 128px rgba(0, 0, 0, 0.08)\",\n      },\n    },\n  },\n  createWorldImageDesktop: {\n    position: \"absolute\",\n    right: 110,\n    top: -175,\n  },\n  createWorldImageMobile: {\n    marginTop: -160,\n  },\n  createWorldImageTwoMobile: {\n    marginBottom: -160,\n  },\n  tabsSection: {\n    background: \"white\",\n  },\n  insightsSection: {\n    marginBottom: 50,\n    padding: 60,\n    maxWidth: 1200,\n    margin: \"0 auto\",\n    display: \"grid\",\n    gridTemplateRows: \"auto 1fr\",\n    alignItems: \"center\",\n    \"& h2\": {\n      textTransform: \"uppercase\",\n      fontFamily: \"Ubuntu\",\n      fontWeight: 500,\n      fontSize: 14,\n      lineHeight: \"16px\",\n      letterSpacing: \"1.25px\",\n      \"@media (max-width: 959px)\": {\n        marginTop: 8,\n      },\n    },\n    \"& aside\": {\n      fontSize: 32,\n      fontFamily: \"Ubuntu\",\n      fontWeight: 500,\n      lineHeight: \"40px\",\n      letterSpacing: \"0.25px\",\n      margin: \"16px 0\",\n      \"@media (max-width: 959px)\": {\n        fontSize: 24,\n        lineHeight: \"28px\",\n      },\n    },\n    \"& a\": {\n      marginTop: 16,\n    },\n    \"& ul\": {\n      padding: \"0 32px\",\n    },\n    \"@media (max-width: 959px)\": {\n      flexDirection: \"column\",\n      padding: \"32px 0\",\n      \"& h2, aside, p\": {\n        padding: \"0 32px\",\n      },\n      \"& a\": {\n        marginLeft: 32,\n        marginTop: 32,\n      },\n    },\n  },\n  insightsSectionMainBox: {\n    display: \"grid\",\n    gridTemplateColumns: \"1fr 1fr\",\n    alignItems: \"center\",\n    \"@media (max-width: 959px)\": {\n      gridTemplateColumns: \"auto\",\n    },\n  },\n  insightsSectionTitle: {\n    \"&&\": {\n      textTransform: \"none\",\n      fontSize: \"1.5em\",\n      textAlign: \"center\",\n      fontFamily: \"Open Sans, sans-serif\",\n      fontWeight: \"bold\",\n      lineHeight: \"24px\",\n      \"& div\": {\n        margin: \"10px 0\",\n        paddingBottom: \"20px\",\n      },\n    },\n    \"@media (max-width: 959px)\": {\n      \"&&\": {\n        textAlign: \"left\",\n        fontSize: \"16px\",\n      },\n      \"& div\": {\n        margin: \"0 !important\",\n        paddingBottom: \"0 !important\",\n      },\n    },\n  },\n  leadByExperts: {\n    position: \"relative\",\n    width: \"100%\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    textAlign: \"center\",\n  },\n  circleOfNuliaUl: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"1.45rem\",\n  },\n  insightsOfNuliaUl: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"0.75rem\",\n  },\n  changeAsAServiceTitle: {\n    position: \"absolute\",\n    top: \"-8px\",\n  },\n  catalogInfoWrapper: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    gap: \"16px\",\n    margin: \"0 10px\",\n    \"@media (max-width: 959px)\": {\n      flexDirection: \"column\",\n      margin: \"0 32px\",\n    },\n  },\n  catalogInfoBox: {\n    textAlign: \"left\",\n    fontSize: \"16px\",\n    flex: 1,\n  },\n  catalogImageBox: {\n    display: \"flex\",\n    alignItems: \"center\",\n    flex: 1,\n    \"@media (max-width: 959px)\": {\n      justifyContent: \"center\",\n    },\n  },\n  catalogImage: {\n    flexShrink: 0,\n    borderRadius: 4,\n  },\n  catalogImageMobile: {\n    \"& img\": {\n      objectFit: \"contain !important\",\n    },\n  },\n  catalogInfoParagraph: {\n    marginBottom: 16,\n    fontSize: 16,\n    fontFamily: \"Open Sans\",\n  },\n}));\n\nconst SolutionPage: FC = () => {\n  const classes = useStyles();\n  const typo = useTypography();\n\n  const isMobile = useMediaQuery(\"(max-width:959px)\");\n\n  const data = useStaticQuery(graphql`\n    query {\n      desktopHeroImage: file(\n        relativePath: { eq: \"product/product-hero-desktop.jpg\" }\n      ) {\n        childImageSharp {\n          fluid(quality: 75, maxWidth: 2160) {\n            ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n      mobileHeroImage: file(\n        relativePath: { eq: \"product/product-hero-mobile.jpg\" }\n      ) {\n        childImageSharp {\n          fluid(quality: 75, maxWidth: 960) {\n            ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n      increaseUsageImage: file(\n        relativePath: { eq: \"product/increase-usage.png\" }\n      ) {\n        childImageSharp {\n          fixed(width: 263) {\n            ...GatsbyImageSharpFixed\n          }\n        }\n      }\n      earnBadgesImage: file(relativePath: { eq: \"product/earn-badges.png\" }) {\n        childImageSharp {\n          fixed(width: 263) {\n            ...GatsbyImageSharpFixed\n          }\n        }\n      }\n      attainSkillsImage: file(\n        relativePath: { eq: \"product/attain-skills.png\" }\n      ) {\n        childImageSharp {\n          fixed(width: 350) {\n            ...GatsbyImageSharpFixed\n          }\n        }\n      }\n      attainSkillsImageMobile: file(\n        relativePath: { eq: \"product/attain-skills.png\" }\n      ) {\n        childImageSharp {\n          fixed(width: 280) {\n            ...GatsbyImageSharpFixed\n          }\n        }\n      }\n      desktopCreateWorldImage: file(\n        relativePath: { eq: \"product/create-world-desktop.png\" }\n      ) {\n        childImageSharp {\n          fixed(width: 730) {\n            ...GatsbyImageSharpFixed\n          }\n        }\n      }\n      mobileCreateWorldImage: file(\n        relativePath: { eq: \"product/create-world-mobile.jpg\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 960) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      mobileCreateWorldTwoImage: file(\n        relativePath: { eq: \"product/monitor-circle-of-nulia.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 960) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      insightsImage: file(relativePath: { eq: \"product/insights.png\" }) {\n        childImageSharp {\n          fixed(width: 430) {\n            ...GatsbyImageSharpFixed_withWebp\n          }\n          fluid(maxWidth: 960) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n      outcomesMontageImage: file(\n        relativePath: { eq: \"product/outcomes-montage.png\" }\n      ) {\n        childImageSharp {\n          fixed(width: 540) {\n            ...GatsbyImageSharpFixed\n          }\n          fluid(maxWidth: 400) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n    }\n  `);\n\n  const desktopVideoUrl = `${IMAGES_PATH}videos/platformVideo1.mp4`;\n  const posterImageUrl = `${IMAGES_PATH}videos/platformVideo-keyframe1.jpg`;\n  const captionsFile = `${IMAGES_PATH}videos/platformVideo1.vtt`;\n\n  return (\n    <Layout>\n      <SEO title=\"Solution\" />\n      <DiscoverMoreBanner />\n      <PurpleAccentHero\n        desktopImage={data.desktopHeroImage.childImageSharp.fluid}\n        mobileImage={data.mobileHeroImage.childImageSharp.fluid}\n        alt=\"Several people collaborating together in an open office environment\"\n      >\n        <div className={classes.titleHeadingGradientWrapper}>\n          <section className={classes.titleHeadingText}>\n            <h1 className={typo.h4} style={{ marginBottom: 8 }}>\n              Change as a Service\n            </h1>\n            <h2 className={typo.h6} style={{ marginBottom: 32 }}>\n              A data-driven, platform-enabled solution that proves Microsoft 365\n              adoption is happening and organizational change is being sustained\n            </h2>\n            <h2 className={typo.h6} style={{ marginBottom: 32 }}>\n              Unlocks the full value of an organization’s Microsoft 365\n              investment, including Copilot, while guiding employees to develop\n              the digital skills they need to realize their potential\n            </h2>\n            <InternalButtonLink\n              variant=\"orange\"\n              href={WORKSHOP}\n              style={{ zIndex: 1 }}\n            >\n              Free Workshop\n            </InternalButtonLink>\n          </section>\n        </div>\n      </PurpleAccentHero>\n      <section className={classes.videoSection}>\n        {isMobile && (\n          <h2>\n            <div>\n              Change as a Service is Powered by Our Nulia Works Platform\n            </div>\n          </h2>\n        )}\n        {!isMobile && (\n          <h2>Change as a Service is Powered by Our Nulia Works Platform</h2>\n        )}\n        <ResponsiveVideo\n          desktopSrc={desktopVideoUrl}\n          posterImage={posterImageUrl}\n          captionsFile={captionsFile}\n        />\n      </section>\n      <section className={classes.videoSection}>\n        {isMobile && (\n          <h2>\n            <div>\n              A Robust Catalog of Outcomes & Skills to Drive Microsoft 365\n              Adoption\n            </div>\n          </h2>\n        )}\n        {!isMobile && (\n          <h2>\n            A Robust Catalog of Outcomes & Skills to Drive Microsoft 365\n            Adoption\n          </h2>\n        )}\n        <div className={classes.catalogInfoWrapper}>\n          <div className={classes.catalogInfoBox}>\n            <h2 className={clsx(typo.h6, classes.catalogInfoParagraph)}>\n              Outcomes are the core of how Nulia Works continuously drives and\n              sustains change. Nulia Works has an ever-growing catalog of\n              Outcomes, making it easy to get started and develop an actionable\n              plan to align Outcomes with your specific business goals.\n            </h2>\n            <h2 className={clsx(typo.h6, classes.catalogInfoParagraph)}>\n              Our Outcomes are designed to drive change across an organization\n              and are developed across multiple applications, utilizing the true\n              value of Copilot & ALL of the Microsoft 365 productivity suite,\n              creating business value through technology adoption.\n            </h2>\n          </div>\n          {isMobile && (\n            <div className={classes.catalogImageBox}>\n              <Img\n                fixed={data.outcomesMontageImage.childImageSharp.fixed}\n                alt=\"A image of Outcomes montage\"\n                className={classes.catalogImageMobile}\n              />\n            </div>\n          )}\n          {!isMobile && (\n            <div className={classes.catalogImageBox}>\n              <Img\n                fixed={data.outcomesMontageImage.childImageSharp.fixed}\n                alt=\"A image of Outcomes montage\"\n                className={classes.catalogImage}\n              />\n            </div>\n          )}\n        </div>\n      </section>\n      <section className={classes.leadByExperts}>\n        {isMobile && (\n          <h2>\n            <div>\n              Change as a Service is Led by Our Change Management Experts\n            </div>\n          </h2>\n        )}\n        {!isMobile && (\n          <h2 className={classes.changeAsAServiceTitle}>\n            Change as a Service is Led by Our Change Management Experts\n          </h2>\n        )}\n      </section>\n      <div className={classes.createWorldWrapper}>\n        <section className={classes.createWorldSection}>\n          {isMobile && (\n            <div className={classes.createWorldImageWrapper}>\n              <Img\n                fluid={data.mobileCreateWorldImage.childImageSharp.fluid}\n                alt=\"Several people collaborating together in an open office environment\"\n                className={classes.createWorldImageMobile}\n              />\n            </div>\n          )}\n          <div className={classes.createWorldText}>\n            <h2 style={{ fontSize: 28 }}>Our Circle of Nulia Methodology</h2>\n            <p>\n              The Circle of Nulia methodology provides a revolutionary and\n              proven process for driving Microsoft 365 adoption, increasing\n              Microsoft 365 usage, and unlocking the full value of Microsoft 365\n              investments. \n            </p>\n            <p>\n              Our Circle of Nulia methodology leverages the Nulia Works platform\n              to enable change management experts to execute a continuous\n              three-step adoption and change management process, using methods\n              and tools in combination to:\n            </p>\n            <ul className={classes.circleOfNuliaUl}>\n              <li>\n                Build a personalized adoption solution and implementation plan,\n                focused on unlocking organizational business value while driving\n                employee skill development\n              </li>\n              <li>\n                Assess solution performance, measuring usage of Microsoft 365\n                skills and evaluating progress toward attaining Outcomes and\n                sustaining change\n              </li>\n              <li>\n                Champion the change process with experts guiding and engaging\n                employees with fun, encouragement, recognition, and rewards all\n                along the way\n              </li>\n            </ul>\n          </div>\n          {isMobile && (\n            <div className={classes.createWorldImageWrapper}>\n              <Img\n                fluid={data.mobileCreateWorldTwoImage.childImageSharp.fluid}\n                alt=\"A desktop computer screen filled with colorful charts and graphs\"\n                className={classes.createWorldImageTwoMobile}\n              />\n            </div>\n          )}\n          {!isMobile && (\n            <div className={classes.createWorldImageWrapper}>\n              <Img\n                fixed={data.desktopCreateWorldImage.childImageSharp.fixed}\n                alt=\"Several people collaborating together in an open office environment\"\n                className={classes.createWorldImageDesktop}\n              />\n            </div>\n          )}\n        </section>\n      </div>\n\n      <ProductCoreValuesSection isMobile={isMobile} />\n\n      <section className={classes.insightsSection}>\n        <div>\n          {!isMobile && (\n            <h2 className={classes.insightsSectionTitle}>\n              Change as a Service is Driven by Our Data Insights\n            </h2>\n          )}\n        </div>\n        <div className={classes.insightsSectionMainBox}>\n          <div>\n            {isMobile && (\n              <Img\n                fluid={data.insightsImage.childImageSharp.fluid}\n                alt=\"A woman at her computer exploring the Insights page of the Nulia Works website\"\n                style={{\n                  flexShrink: 0,\n                  boxShadow:\n                    \"0px 24px 32px rgba(0, 0, 0, 0.08), 0px 12.5px 128px rgba(0, 0, 0, 0.08)\",\n                }}\n              />\n            )}\n            {isMobile && (\n              <h2 className={classes.insightsSectionTitle}>\n                <div>Change as a Service is Driven by Our Data Insights</div>\n              </h2>\n            )}\n            <aside>\n              Our data and insights drive the adoption process and prove real\n              change is being sustained\n            </aside>\n            <p>\n              Nulia Works continuously gathers data on how organizations and\n              employees are using Copilot & Microsoft 365. Our data is used to:\n            </p>\n            <ul className={classes.insightsOfNuliaUl}>\n              <li>\n                Formulate metrics to evaluate whether new Microsoft 365 skills\n                have been developed and are being used\n              </li>\n              <li>\n                Create personalized adoption plans for each employee aligned to\n                organizational goals\n              </li>\n              <li>\n                Guide employees with skill and activity recommendations so they\n                develop skills and attain Outcomes\n              </li>\n              <li>\n                Provide recognition of accomplishment, making the process of\n                change fun and rewarding\n              </li>\n              <li>\n                Ensure change is sustained, continuously assessing progress to\n                verify skills are being used and maintained\n              </li>\n            </ul>\n            <ButtonLink variant=\"orange\" href={WORKSHOP}>\n              FREE WORKSHOP\n            </ButtonLink>\n          </div>\n          <div>\n            {!isMobile && (\n              <Img\n                fixed={data.insightsImage.childImageSharp.fixed}\n                alt=\"A woman at her computer exploring the Insights page of the Nulia Works website\"\n                style={{\n                  marginLeft: 34,\n                  flexShrink: 0,\n                  boxShadow:\n                    \"0px 24px 32px rgba(0, 0, 0, 0.08), 0px 12.5px 128px rgba(0, 0, 0, 0.08)\",\n                }}\n              />\n            )}\n          </div>\n        </div>\n      </section>\n      <CookiesSnackbar />\n    </Layout>\n  );\n};\n\nexport default SolutionPage;\n"],"names":["useStyles","makeStyles","theme","productCoreValues","background","width","margin","padding","color","marginBottom","fontSize","lineHeight","breakpoints","down","listStyleType","fontFamily","letterSpacing","fontWeight","maxWidth","tabsWrapper","mobileSubheading","tabPanelInner","display","alignItems","flexDirection","tabPanelImage","flexShrink","boxShadow","borderRadius","marginRight","height","TabPanel","children","value","index","isMobile","classes","role","hidden","id","style","className","tabStyleOverrides","marginTop","React","tabValue","setTabValue","data","useStaticQuery","onChange","event","newValue","indicatorColor","textColor","variant","scrollButtons","borderBottom","TabIndicatorProps","backgroundColor","justifyContent","label","fixed","circleOfNuliaAssessmentProcessImage","childImageSharp","alt","fluid","circleOfNuliaBuildProcessImage","circleOfNuliaChampionService","titleHeadingGradientWrapper","titleHeadingText","marginLeft","subHeading","titleDescription","videoSection","textAlign","unlockingSection","textTransform","flexWrap","createWorldWrapper","minWidth","createWorldSection","createWorldText","flexBasis","createWorldImageWrapper","createWorldImageDesktop","position","right","top","createWorldImageMobile","createWorldImageTwoMobile","tabsSection","insightsSection","gridTemplateRows","insightsSectionMainBox","gridTemplateColumns","insightsSectionTitle","paddingBottom","leadByExperts","circleOfNuliaUl","gap","insightsOfNuliaUl","changeAsAServiceTitle","catalogInfoWrapper","catalogInfoBox","flex","catalogImageBox","catalogImage","catalogImageMobile","objectFit","catalogInfoParagraph","typo","useTypography","useMediaQuery","desktopVideoUrl","IMAGES_PATH","posterImageUrl","captionsFile","title","desktopImage","desktopHeroImage","mobileImage","mobileHeroImage","h4","h6","href","WORKSHOP","zIndex","desktopSrc","posterImage","clsx","outcomesMontageImage","mobileCreateWorldImage","mobileCreateWorldTwoImage","desktopCreateWorldImage","insightsImage"],"sourceRoot":""}