Here is the HTML as output from the React/MUI build. It is 3819 lines! That is more than sixteen (16) times bigger than the Astro version.
Note the deeply nested div elements. Not only are these deeply nested for no
good reason, but they also are non-semantic. A div has no meaning. It's
generic. Whereas article, section, blockquote, header, footer, main,
nav all have specific meanings that are important for machine-readability
(SEO) and accessibility. MUI is an abomination. Others are better, but not
by much.
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/redarc-p1/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="/redarc-p1/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/redarc-p1/manifest.json" />
<!--
Notice the use of /redarc-p1 in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "/redarc-p1/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<title>React App</title>
<script defer="" src="/redarc-p1/static/js/bundle.js"></script>
<style>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy9pbmRleC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxTQUFTO0VBQ1Q7O2NBRVk7RUFDWixtQ0FBbUM7RUFDbkMsa0NBQWtDO0FBQ3BDOztBQUVBO0VBQ0U7YUFDVztBQUNiIiwic291cmNlc0NvbnRlbnQiOlsiYm9keSB7XG4gIG1hcmdpbjogMDtcbiAgZm9udC1mYW1pbHk6IC1hcHBsZS1zeXN0ZW0sIEJsaW5rTWFjU3lzdGVtRm9udCwgJ1NlZ29lIFVJJywgJ1JvYm90bycsICdPeHlnZW4nLFxuICAgICdVYnVudHUnLCAnQ2FudGFyZWxsJywgJ0ZpcmEgU2FucycsICdEcm9pZCBTYW5zJywgJ0hlbHZldGljYSBOZXVlJyxcbiAgICBzYW5zLXNlcmlmO1xuICAtd2Via2l0LWZvbnQtc21vb3RoaW5nOiBhbnRpYWxpYXNlZDtcbiAgLW1vei1vc3gtZm9udC1zbW9vdGhpbmc6IGdyYXlzY2FsZTtcbn1cblxuY29kZSB7XG4gIGZvbnQtZmFtaWx5OiBzb3VyY2UtY29kZS1wcm8sIE1lbmxvLCBNb25hY28sIENvbnNvbGFzLCAnQ291cmllciBOZXcnLFxuICAgIG1vbm9zcGFjZTtcbn1cbiJdLCJzb3VyY2VSb290IjoiIn0= */
</style>
<style>
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy9BcHAuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0Usa0JBQWtCO0FBQ3BCOztBQUVBO0VBQ0UsY0FBYztFQUNkLG9CQUFvQjtBQUN0Qjs7QUFFQTtFQUNFO0lBQ0UsNENBQTRDO0VBQzlDO0FBQ0Y7O0FBRUE7RUFDRSx5QkFBeUI7RUFDekIsaUJBQWlCO0VBQ2pCLGFBQWE7RUFDYixzQkFBc0I7RUFDdEIsbUJBQW1CO0VBQ25CLHVCQUF1QjtFQUN2Qiw2QkFBNkI7RUFDN0IsWUFBWTtBQUNkOztBQUVBO0VBQ0UsY0FBYztBQUNoQjs7QUFFQTtFQUNFO0lBQ0UsdUJBQXVCO0VBQ3pCO0VBQ0E7SUFDRSx5QkFBeUI7RUFDM0I7QUFDRiIsInNvdXJjZXNDb250ZW50IjpbIi5BcHAge1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG5cbi5BcHAtbG9nbyB7XG4gIGhlaWdodDogNDB2bWluO1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbn1cblxuQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiBuby1wcmVmZXJlbmNlKSB7XG4gIC5BcHAtbG9nbyB7XG4gICAgYW5pbWF0aW9uOiBBcHAtbG9nby1zcGluIGluZmluaXRlIDIwcyBsaW5lYXI7XG4gIH1cbn1cblxuLkFwcC1oZWFkZXIge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjgyYzM0O1xuICBtaW4taGVpZ2h0OiAxMDB2aDtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGZvbnQtc2l6ZTogY2FsYygxMHB4ICsgMnZtaW4pO1xuICBjb2xvcjogd2hpdGU7XG59XG5cbi5BcHAtbGluayB7XG4gIGNvbG9yOiAjNjFkYWZiO1xufVxuXG5Aa2V5ZnJhbWVzIEFwcC1sb2dvLXNwaW4ge1xuICBmcm9tIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgfVxuICB0byB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcbiAgfVxufVxuIl0sInNvdXJjZVJvb3QiOiIifQ== */
</style>
<style data-emotion="css-global" data-s="">
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
}
</style>
<style data-emotion="css-global" data-s="">
*,
*::before,
*::after {
box-sizing: inherit;
}
</style>
<style data-emotion="css-global" data-s="">
strong,
b {
font-weight: 700;
}
</style>
<style data-emotion="css-global" data-s="">
body {
margin: 0;
color: rgba(0, 0, 0, 0.87);
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0.00938em;
background-color: #fff;
}
</style>
<style data-emotion="css-global" data-s="">
@media print {
body {
background-color: #fff;
}
}
</style>
<style data-emotion="css-global" data-s="">
body::backdrop {
background-color: #fff;
}
</style>
<style data-emotion="css" data-s="">
.css-0 {
}
</style>
<style data-emotion="css" data-s="">
.css-zriypj-MuiAppBar-root {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
box-sizing: border-box;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
position: fixed;
z-index: 1100;
top: 0;
left: auto;
right: 0;
background-color: #1976d2;
color: #fff;
background: black;
}
</style>
<style data-emotion="css" data-s="">
@media print {
.css-zriypj-MuiAppBar-root {
position: absolute;
}
}
</style>
<style data-emotion="css" data-s="">
.css-u48a3i-MuiPaper-root-MuiAppBar-root {
background-color: #fff;
color: rgba(0, 0, 0, 0.87);
-webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
box-sizing: border-box;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
position: fixed;
z-index: 1100;
top: 0;
left: auto;
right: 0;
background-color: #1976d2;
color: #fff;
background: black;
}
</style>
<style data-emotion="css" data-s="">
@media print {
.css-u48a3i-MuiPaper-root-MuiAppBar-root {
position: absolute;
}
}
</style>
<style data-emotion="css" data-s="">
.css-hyum1k-MuiToolbar-root {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 16px;
padding-right: 16px;
min-height: 56px;
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 600px) {
.css-hyum1k-MuiToolbar-root {
padding-left: 24px;
padding-right: 24px;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 0px) {
@media (orientation: landscape) {
.css-hyum1k-MuiToolbar-root {
min-height: 48px;
}
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 600px) {
.css-hyum1k-MuiToolbar-root {
min-height: 64px;
}
}
</style>
<style data-emotion="css" data-s="">
.css-1vtqco2-MuiTypography-root {
margin: 0;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-size: 2.125rem;
line-height: 1.235;
letter-spacing: 0.00735em;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 0px) {
.css-1vtqco2-MuiTypography-root {
display: block;
padding: 16px;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 600px) {
.css-1vtqco2-MuiTypography-root {
display: block;
padding: 32px;
}
}
</style>
<style data-emotion="css" data-s="">
.css-fv3lde {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
</style>
<style data-emotion="css" data-s="">
.css-fevjo6-MuiButton-root {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-size: 0.875rem;
line-height: 1.75;
letter-spacing: 0.02857em;
text-transform: uppercase;
min-width: 64px;
padding: 6px 8px;
border-radius: 4px;
-webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)
0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
color: #1976d2;
color: #fff;
padding: 32px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
</style>
<style data-emotion="css" data-s="">
.css-fevjo6-MuiButton-root:hover {
-webkit-text-decoration: none;
text-decoration: none;
background-color: rgba(25, 118, 210, 0.04);
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-fevjo6-MuiButton-root:hover {
background-color: transparent;
}
}
</style>
<style data-emotion="css" data-s="">
.css-fevjo6-MuiButton-root:active {
}
</style>
<style data-emotion="css" data-s="">
.css-fevjo6-MuiButton-root.Mui-focusVisible {
}
</style>
<style data-emotion="css" data-s="">
.css-fevjo6-MuiButton-root.Mui-disabled {
color: rgba(0, 0, 0, 0.26);
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 0px) {
.css-fevjo6-MuiButton-root {
display: none;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 900px) {
.css-fevjo6-MuiButton-root {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
</style>
<style data-emotion="css" data-s="">
.css-9jeihi-MuiButtonBase-root-MuiButton-root {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
position: relative;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
background-color: transparent;
outline: 0;
border: 0;
margin: 0;
border-radius: 0;
padding: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-size: 0.875rem;
line-height: 1.75;
letter-spacing: 0.02857em;
text-transform: uppercase;
min-width: 64px;
padding: 6px 8px;
border-radius: 4px;
-webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)
0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
color: #1976d2;
color: #fff;
padding: 32px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
</style>
<style data-emotion="css" data-s="">
.css-9jeihi-MuiButtonBase-root-MuiButton-root::-moz-focus-inner {
border-style: none;
}
</style>
<style data-emotion="css" data-s="">
.css-9jeihi-MuiButtonBase-root-MuiButton-root.Mui-disabled {
pointer-events: none;
cursor: default;
}
</style>
<style data-emotion="css" data-s="">
@media print {
.css-9jeihi-MuiButtonBase-root-MuiButton-root {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
</style>
<style data-emotion="css" data-s="">
.css-9jeihi-MuiButtonBase-root-MuiButton-root:hover {
-webkit-text-decoration: none;
text-decoration: none;
background-color: rgba(25, 118, 210, 0.04);
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-9jeihi-MuiButtonBase-root-MuiButton-root:hover {
background-color: transparent;
}
}
</style>
<style data-emotion="css" data-s="">
.css-9jeihi-MuiButtonBase-root-MuiButton-root:active {
}
</style>
<style data-emotion="css" data-s="">
.css-9jeihi-MuiButtonBase-root-MuiButton-root.Mui-focusVisible {
}
</style>
<style data-emotion="css" data-s="">
.css-9jeihi-MuiButtonBase-root-MuiButton-root.Mui-disabled {
color: rgba(0, 0, 0, 0.26);
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 0px) {
.css-9jeihi-MuiButtonBase-root-MuiButton-root {
display: none;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 900px) {
.css-9jeihi-MuiButtonBase-root-MuiButton-root {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
</style>
<style data-emotion="css" data-s="">
.css-yv9cwm-MuiTypography-root {
margin: 0;
color: white;
}
</style>
<style data-emotion="css" data-s="">
.css-ri4leq-MuiButton-root {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-size: 0.875rem;
line-height: 1.75;
letter-spacing: 0.02857em;
text-transform: uppercase;
min-width: 64px;
padding: 5px 15px;
border-radius: 4px;
-webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)
0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
border: 1px solid rgba(237, 108, 2, 0.5);
color: #ed6c02;
}
</style>
<style data-emotion="css" data-s="">
.css-ri4leq-MuiButton-root:hover {
-webkit-text-decoration: none;
text-decoration: none;
background-color: rgba(237, 108, 2, 0.04);
border: 1px solid #ed6c02;
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-ri4leq-MuiButton-root:hover {
background-color: transparent;
}
}
</style>
<style data-emotion="css" data-s="">
.css-ri4leq-MuiButton-root:active {
}
</style>
<style data-emotion="css" data-s="">
.css-ri4leq-MuiButton-root.Mui-focusVisible {
}
</style>
<style data-emotion="css" data-s="">
.css-ri4leq-MuiButton-root.Mui-disabled {
color: rgba(0, 0, 0, 0.26);
border: 1px solid rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 0px) {
.css-ri4leq-MuiButton-root {
display: none;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 900px) {
.css-ri4leq-MuiButton-root {
display: block;
}
}
</style>
<style data-emotion="css" data-s="">
.css-1brpleo-MuiButtonBase-root-MuiButton-root {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
position: relative;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
background-color: transparent;
outline: 0;
border: 0;
margin: 0;
border-radius: 0;
padding: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-size: 0.875rem;
line-height: 1.75;
letter-spacing: 0.02857em;
text-transform: uppercase;
min-width: 64px;
padding: 5px 15px;
border-radius: 4px;
-webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)
0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
border: 1px solid rgba(237, 108, 2, 0.5);
color: #ed6c02;
}
</style>
<style data-emotion="css" data-s="">
.css-1brpleo-MuiButtonBase-root-MuiButton-root::-moz-focus-inner {
border-style: none;
}
</style>
<style data-emotion="css" data-s="">
.css-1brpleo-MuiButtonBase-root-MuiButton-root.Mui-disabled {
pointer-events: none;
cursor: default;
}
</style>
<style data-emotion="css" data-s="">
@media print {
.css-1brpleo-MuiButtonBase-root-MuiButton-root {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
</style>
<style data-emotion="css" data-s="">
.css-1brpleo-MuiButtonBase-root-MuiButton-root:hover {
-webkit-text-decoration: none;
text-decoration: none;
background-color: rgba(237, 108, 2, 0.04);
border: 1px solid #ed6c02;
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-1brpleo-MuiButtonBase-root-MuiButton-root:hover {
background-color: transparent;
}
}
</style>
<style data-emotion="css" data-s="">
.css-1brpleo-MuiButtonBase-root-MuiButton-root:active {
}
</style>
<style data-emotion="css" data-s="">
.css-1brpleo-MuiButtonBase-root-MuiButton-root.Mui-focusVisible {
}
</style>
<style data-emotion="css" data-s="">
.css-1brpleo-MuiButtonBase-root-MuiButton-root.Mui-disabled {
color: rgba(0, 0, 0, 0.26);
border: 1px solid rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 0px) {
.css-1brpleo-MuiButtonBase-root-MuiButton-root {
display: none;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 900px) {
.css-1brpleo-MuiButtonBase-root-MuiButton-root {
display: block;
}
}
</style>
<style data-emotion="css" data-s="">
.css-i4bv87-MuiSvgIcon-root {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 1em;
height: 1em;
display: inline-block;
fill: currentColor;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
font-size: 1.5rem;
}
</style>
<style data-emotion="css" data-s="">
.css-386nni-MuiIconButton-root {
text-align: center;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
font-size: 1.5rem;
padding: 8px;
border-radius: 50%;
overflow: visible;
color: rgba(0, 0, 0, 0.54);
-webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
0ms;
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
margin-left: -12px;
color: inherit;
margin-right: 8px;
}
</style>
<style data-emotion="css" data-s="">
.css-386nni-MuiIconButton-root:hover {
background-color: rgba(0, 0, 0, 0.04);
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-386nni-MuiIconButton-root:hover {
background-color: transparent;
}
}
</style>
<style data-emotion="css" data-s="">
.css-386nni-MuiIconButton-root.Mui-disabled {
background-color: transparent;
color: rgba(0, 0, 0, 0.26);
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 600px) {
.css-386nni-MuiIconButton-root {
display: block;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 900px) {
.css-386nni-MuiIconButton-root {
display: none;
}
}
</style>
<style data-emotion="css" data-s="">
.css-8q0e11-MuiButtonBase-root-MuiIconButton-root {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
position: relative;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
background-color: transparent;
outline: 0;
border: 0;
margin: 0;
border-radius: 0;
padding: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
text-align: center;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
font-size: 1.5rem;
padding: 8px;
border-radius: 50%;
overflow: visible;
color: rgba(0, 0, 0, 0.54);
-webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
0ms;
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
margin-left: -12px;
color: inherit;
margin-right: 8px;
}
</style>
<style data-emotion="css" data-s="">
.css-8q0e11-MuiButtonBase-root-MuiIconButton-root::-moz-focus-inner {
border-style: none;
}
</style>
<style data-emotion="css" data-s="">
.css-8q0e11-MuiButtonBase-root-MuiIconButton-root.Mui-disabled {
pointer-events: none;
cursor: default;
}
</style>
<style data-emotion="css" data-s="">
@media print {
.css-8q0e11-MuiButtonBase-root-MuiIconButton-root {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
</style>
<style data-emotion="css" data-s="">
.css-8q0e11-MuiButtonBase-root-MuiIconButton-root:hover {
background-color: rgba(0, 0, 0, 0.04);
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-8q0e11-MuiButtonBase-root-MuiIconButton-root:hover {
background-color: transparent;
}
}
</style>
<style data-emotion="css" data-s="">
.css-8q0e11-MuiButtonBase-root-MuiIconButton-root.Mui-disabled {
background-color: transparent;
color: rgba(0, 0, 0, 0.26);
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 600px) {
.css-8q0e11-MuiButtonBase-root-MuiIconButton-root {
display: block;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 900px) {
.css-8q0e11-MuiButtonBase-root-MuiIconButton-root {
display: none;
}
}
</style>
<style data-emotion="css" data-s="">
.css-strh7n-MuiDrawer-root {
z-index: 1200;
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 0px) {
.css-strh7n-MuiDrawer-root {
display: block;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 900px) {
.css-strh7n-MuiDrawer-root {
display: none;
}
}
</style>
<style data-emotion="css" data-s="">
.css-strh7n-MuiDrawer-root .MuiDrawer-paper {
box-sizing: border-box;
width: 240px;
}
</style>
<style data-emotion="css" data-s="">
.css-hpgf8j {
padding: 8px;
}
</style>
<style data-emotion="css" data-s="">
.css-67ij2 {
background-image: url("https://wallpaperaccess.com/full/3794734.jpg");
background-repeat: no-repeat;
background-color: black;
-webkit-background-position: center;
background-position: center;
background-attachment: fixed;
-webkit-background-size: cover;
background-size: cover;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 0px) {
.css-67ij2 {
height: 600px;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 600px) {
.css-67ij2 {
height: 800px;
}
}
</style>
<style data-emotion="css" data-s="">
.css-y4o519 {
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 0px) {
.css-y4o519 {
width: 100%;
padding: 40px;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 600px) {
.css-y4o519 {
width: 70%;
padding: 64px;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 900px) {
.css-y4o519 {
width: 60%;
padding: 120px;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 1200px) {
.css-y4o519 {
padding: 160px;
}
}
</style>
<style data-emotion="css" data-s="">
.css-xelx1c {
background: white;
opacity: 0.8;
}
</style>
<style data-emotion="css" data-s="">
.css-1p5pend-MuiTypography-root {
margin: 0;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 300;
font-size: 3.75rem;
line-height: 1.2;
letter-spacing: -0.00833em;
text-align: center;
padding-top: 64px;
font-weight: 800;
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 0px) {
.css-1p5pend-MuiTypography-root {
font-size: 28px;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 600px) {
.css-1p5pend-MuiTypography-root {
font-size: 40px;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 1200px) {
.css-1p5pend-MuiTypography-root {
font-size: 60px;
}
}
</style>
<style data-emotion="css" data-s="">
.css-old96a-MuiButton-root {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-size: 0.875rem;
line-height: 1.75;
letter-spacing: 0.02857em;
text-transform: uppercase;
min-width: 64px;
padding: 6px 16px;
border-radius: 4px;
-webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)
0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
color: #fff;
background-color: #1976d2;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
margin-top: 32px;
margin-bottom: 32px;
}
</style>
<style data-emotion="css" data-s="">
.css-old96a-MuiButton-root:hover {
-webkit-text-decoration: none;
text-decoration: none;
background-color: #1565c0;
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-old96a-MuiButton-root:hover {
background-color: #1976d2;
}
}
</style>
<style data-emotion="css" data-s="">
.css-old96a-MuiButton-root:active {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
0px 8px 10px 1px rgba(0, 0, 0, 0.14),
0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-old96a-MuiButton-root.Mui-focusVisible {
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 6px 10px 0px rgba(0, 0, 0, 0.14),
0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-old96a-MuiButton-root.Mui-disabled {
color: rgba(0, 0, 0, 0.26);
box-shadow: none;
background-color: rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-15f511a-MuiButtonBase-root-MuiButton-root {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
position: relative;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
background-color: transparent;
outline: 0;
border: 0;
margin: 0;
border-radius: 0;
padding: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-size: 0.875rem;
line-height: 1.75;
letter-spacing: 0.02857em;
text-transform: uppercase;
min-width: 64px;
padding: 6px 16px;
border-radius: 4px;
-webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)
0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
color: #fff;
background-color: #1976d2;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
margin-top: 32px;
margin-bottom: 32px;
}
</style>
<style data-emotion="css" data-s="">
.css-15f511a-MuiButtonBase-root-MuiButton-root::-moz-focus-inner {
border-style: none;
}
</style>
<style data-emotion="css" data-s="">
.css-15f511a-MuiButtonBase-root-MuiButton-root.Mui-disabled {
pointer-events: none;
cursor: default;
}
</style>
<style data-emotion="css" data-s="">
@media print {
.css-15f511a-MuiButtonBase-root-MuiButton-root {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
</style>
<style data-emotion="css" data-s="">
.css-15f511a-MuiButtonBase-root-MuiButton-root:hover {
-webkit-text-decoration: none;
text-decoration: none;
background-color: #1565c0;
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-15f511a-MuiButtonBase-root-MuiButton-root:hover {
background-color: #1976d2;
}
}
</style>
<style data-emotion="css" data-s="">
.css-15f511a-MuiButtonBase-root-MuiButton-root:active {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
0px 8px 10px 1px rgba(0, 0, 0, 0.14),
0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-15f511a-MuiButtonBase-root-MuiButton-root.Mui-focusVisible {
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 6px 10px 0px rgba(0, 0, 0, 0.14),
0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-15f511a-MuiButtonBase-root-MuiButton-root.Mui-disabled {
color: rgba(0, 0, 0, 0.26);
box-shadow: none;
background-color: rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-ib9iq6 {
margin-top: 80px;
}
</style>
<style data-emotion="css" data-s="">
.css-1xa4opg-MuiTypography-root {
margin: 0;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-size: 2.125rem;
line-height: 1.235;
letter-spacing: 0.00735em;
text-align: center;
font-weight: 900;
padding-top: 32px;
}
</style>
<style data-emotion="css" data-s="">
.css-io42v5-MuiTypography-root {
margin: 0;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-size: 1.25rem;
line-height: 1.6;
letter-spacing: 0.0075em;
text-align: center;
font-weight: 500;
padding-bottom: 32px;
}
</style>
<style data-emotion="css" data-s="">
.css-1y9eo67-MuiButton-root {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-size: 0.875rem;
line-height: 1.75;
letter-spacing: 0.02857em;
text-transform: uppercase;
min-width: 64px;
padding: 6px 16px;
border-radius: 4px;
-webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)
0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
color: #fff;
background-color: #ed6c02;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
margin-bottom: 16px;
}
</style>
<style data-emotion="css" data-s="">
.css-1y9eo67-MuiButton-root:hover {
-webkit-text-decoration: none;
text-decoration: none;
background-color: #e65100;
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-1y9eo67-MuiButton-root:hover {
background-color: #ed6c02;
}
}
</style>
<style data-emotion="css" data-s="">
.css-1y9eo67-MuiButton-root:active {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
0px 8px 10px 1px rgba(0, 0, 0, 0.14),
0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-1y9eo67-MuiButton-root.Mui-focusVisible {
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 6px 10px 0px rgba(0, 0, 0, 0.14),
0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-1y9eo67-MuiButton-root.Mui-disabled {
color: rgba(0, 0, 0, 0.26);
box-shadow: none;
background-color: rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-12msbby-MuiButtonBase-root-MuiButton-root {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
position: relative;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
background-color: transparent;
outline: 0;
border: 0;
margin: 0;
border-radius: 0;
padding: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-size: 0.875rem;
line-height: 1.75;
letter-spacing: 0.02857em;
text-transform: uppercase;
min-width: 64px;
padding: 6px 16px;
border-radius: 4px;
-webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)
0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
color: #fff;
background-color: #ed6c02;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
margin-bottom: 16px;
}
</style>
<style data-emotion="css" data-s="">
.css-12msbby-MuiButtonBase-root-MuiButton-root::-moz-focus-inner {
border-style: none;
}
</style>
<style data-emotion="css" data-s="">
.css-12msbby-MuiButtonBase-root-MuiButton-root.Mui-disabled {
pointer-events: none;
cursor: default;
}
</style>
<style data-emotion="css" data-s="">
@media print {
.css-12msbby-MuiButtonBase-root-MuiButton-root {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
</style>
<style data-emotion="css" data-s="">
.css-12msbby-MuiButtonBase-root-MuiButton-root:hover {
-webkit-text-decoration: none;
text-decoration: none;
background-color: #e65100;
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-12msbby-MuiButtonBase-root-MuiButton-root:hover {
background-color: #ed6c02;
}
}
</style>
<style data-emotion="css" data-s="">
.css-12msbby-MuiButtonBase-root-MuiButton-root:active {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
0px 8px 10px 1px rgba(0, 0, 0, 0.14),
0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-12msbby-MuiButtonBase-root-MuiButton-root.Mui-focusVisible {
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 6px 10px 0px rgba(0, 0, 0, 0.14),
0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-12msbby-MuiButtonBase-root-MuiButton-root.Mui-disabled {
color: rgba(0, 0, 0, 0.26);
box-shadow: none;
background-color: rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-zerhsn-MuiTypography-root {
margin: 0;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-size: 2.125rem;
line-height: 1.235;
letter-spacing: 0.00735em;
margin: 80px;
font-weight: 400;
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 0px) {
.css-zerhsn-MuiTypography-root {
text-align: center;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 900px) {
.css-zerhsn-MuiTypography-root {
text-align: left;
}
}
</style>
<style data-emotion="css" data-s="">
.css-9mgopn-MuiDivider-root {
margin: 0;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, 0.12);
border-bottom-width: thin;
}
</style>
<style data-emotion="css" data-s="">
.css-1tlc5i8-MuiStack-root {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin: 32px;
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 0px) {
.css-1tlc5i8-MuiStack-root {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.css-1tlc5i8-MuiStack-root > :not(style) + :not(style) {
margin: 0;
margin-top: 8px;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 600px) {
.css-1tlc5i8-MuiStack-root > :not(style) + :not(style) {
margin: 0;
margin-top: 16px;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 900px) {
.css-1tlc5i8-MuiStack-root {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.css-1tlc5i8-MuiStack-root > :not(style) + :not(style) {
margin: 0;
margin-left: 32px;
}
}
</style>
<style data-emotion="css" data-s="">
.css-4h5cpy {
height: 200px;
width: 100%;
cursor: pointer;
background-repeat: no-repeat;
-webkit-background-position: center;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
</style>
<style data-emotion="css" data-s="">
.css-18opjn0 {
background-image: url("data:image/jpeg;base64,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");
height: 200px;
width: 100%;
cursor: pointer;
background-repeat: no-repeat;
-webkit-background-position: center;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
</style>
<style data-emotion="css" data-s="">
.css-2lc641 {
margin: 15% 15% 15% 15%;
padding: 10px;
background: black;
opacity: 0.8;
}
</style>
<style data-emotion="css" data-s="">
.css-1kfjx6a-MuiTypography-root {
margin: 0;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.334;
letter-spacing: 0em;
text-align: center;
color: white;
margin: 15% 15% 15% 15%;
padding: 10px;
background: black;
opacity: 0.8;
}
</style>
<style data-emotion="css" data-s="">
.css-t0d5nb {
background-image: url("https://static.vecteezy.com/system/resources/previews/002/561/912/original/security-system-interface-on-dark-purple-background-vector.jpg");
height: 200px;
width: 100%;
cursor: pointer;
background-repeat: no-repeat;
-webkit-background-position: center;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
</style>
<style data-emotion="css" data-s="">
.css-18vk4g6 {
background-image: url("https://img.freepik.com/premium-vector/3d-wireframe-green-room-abstract-perspective-grid-retro-futuristic-concept-vector-illustration_634443-1164.jpg?w=2000");
height: 200px;
width: 100%;
cursor: pointer;
background-repeat: no-repeat;
-webkit-background-position: center;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
</style>
<style data-emotion="css" data-s="">
.css-u3eova {
background-image: url("https://www.costrategix.com/wp-content/uploads/2020/03/6-signs-that-indicate-digital-transformation-costrategix-blog.jpg");
height: 200px;
width: 100%;
cursor: pointer;
background-repeat: no-repeat;
-webkit-background-position: center;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
</style>
<style data-emotion="css" data-s="">
.css-1vkaqw7 {
background-image: url("https://s37605.pcdn.co/wp-content/uploads/2021/05/enterprise-architecture-change-management.jpg");
height: 200px;
width: 100%;
cursor: pointer;
background-repeat: no-repeat;
-webkit-background-position: center;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
</style>
<style data-emotion="css" data-s="">
.css-ok8hcl {
background-image: url("https://d2poqm5pskresc.cloudfront.net/wp-content/uploads/2016/09/application-strategy-digital-transformation-e1569841021706.png");
height: 200px;
width: 100%;
cursor: pointer;
background-repeat: no-repeat;
-webkit-background-position: center;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
</style>
<style data-emotion="css" data-s="">
.css-17aho8q {
background-image: url("https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8dGVjaG5vbG9neXxlbnwwfHwwfHw%3D&w=1000&q=80");
background-repeat: no-repeat;
background-color: black;
-webkit-background-position: center;
background-position: center;
background-attachment: fixed;
-webkit-background-size: cover;
background-size: cover;
height: 600px;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
</style>
<style data-emotion="css" data-s="">
.css-okm0i5-MuiTypography-root {
margin: 0;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.334;
letter-spacing: 0em;
text-align: center;
color: blue;
padding-top: 64px;
font-weight: 700;
}
</style>
<style data-emotion="css" data-s="">
.css-47suzj-MuiTypography-root {
margin: 0;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-size: 3rem;
line-height: 1.167;
letter-spacing: 0em;
text-align: center;
}
</style>
<style data-emotion="css" data-s="">
.css-1poslcw-MuiTypography-root {
margin: 0;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-size: 1.25rem;
line-height: 1.6;
letter-spacing: 0.0075em;
text-align: center;
padding-bottom: 16px;
}
</style>
<style data-emotion="css" data-s="">
.css-9ejg3d-MuiButton-root {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-size: 0.875rem;
line-height: 1.75;
letter-spacing: 0.02857em;
text-transform: uppercase;
min-width: 64px;
padding: 6px 16px;
border-radius: 4px;
-webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)
0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
color: #fff;
background-color: #9c27b0;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
margin-bottom: 32px;
}
</style>
<style data-emotion="css" data-s="">
.css-9ejg3d-MuiButton-root:hover {
-webkit-text-decoration: none;
text-decoration: none;
background-color: #7b1fa2;
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-9ejg3d-MuiButton-root:hover {
background-color: #9c27b0;
}
}
</style>
<style data-emotion="css" data-s="">
.css-9ejg3d-MuiButton-root:active {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
0px 8px 10px 1px rgba(0, 0, 0, 0.14),
0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-9ejg3d-MuiButton-root.Mui-focusVisible {
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 6px 10px 0px rgba(0, 0, 0, 0.14),
0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-9ejg3d-MuiButton-root.Mui-disabled {
color: rgba(0, 0, 0, 0.26);
box-shadow: none;
background-color: rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-1aqsytz-MuiButtonBase-root-MuiButton-root {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
position: relative;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
background-color: transparent;
outline: 0;
border: 0;
margin: 0;
border-radius: 0;
padding: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-size: 0.875rem;
line-height: 1.75;
letter-spacing: 0.02857em;
text-transform: uppercase;
min-width: 64px;
padding: 6px 16px;
border-radius: 4px;
-webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)
0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
color: #fff;
background-color: #9c27b0;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
margin-bottom: 32px;
}
</style>
<style data-emotion="css" data-s="">
.css-1aqsytz-MuiButtonBase-root-MuiButton-root::-moz-focus-inner {
border-style: none;
}
</style>
<style data-emotion="css" data-s="">
.css-1aqsytz-MuiButtonBase-root-MuiButton-root.Mui-disabled {
pointer-events: none;
cursor: default;
}
</style>
<style data-emotion="css" data-s="">
@media print {
.css-1aqsytz-MuiButtonBase-root-MuiButton-root {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
</style>
<style data-emotion="css" data-s="">
.css-1aqsytz-MuiButtonBase-root-MuiButton-root:hover {
-webkit-text-decoration: none;
text-decoration: none;
background-color: #7b1fa2;
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-1aqsytz-MuiButtonBase-root-MuiButton-root:hover {
background-color: #9c27b0;
}
}
</style>
<style data-emotion="css" data-s="">
.css-1aqsytz-MuiButtonBase-root-MuiButton-root:active {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
0px 8px 10px 1px rgba(0, 0, 0, 0.14),
0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-1aqsytz-MuiButtonBase-root-MuiButton-root.Mui-focusVisible {
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 6px 10px 0px rgba(0, 0, 0, 0.14),
0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-1aqsytz-MuiButtonBase-root-MuiButton-root.Mui-disabled {
color: rgba(0, 0, 0, 0.26);
box-shadow: none;
background-color: rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-1wcaknn {
padding: 32px;
}
</style>
<style data-emotion="css" data-s="">
.css-b937i3-MuiTypography-root {
margin: 0;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-size: 1.25rem;
line-height: 1.6;
letter-spacing: 0.0075em;
color: white;
}
</style>
<style data-emotion="css" data-s="">
.css-3zjuz1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
gap: 10px;
color: white;
}
</style>
<style data-emotion="css" data-s="">
.css-1qqeghk {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
gap: 10px;
color: white;
}
</style>
<style data-emotion="css" data-s="">
.css-1ejlgzc-MuiTypography-root {
margin: 0;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
letter-spacing: 0.01071em;
text-align: center;
color: white;
padding-top: 40px;
padding-bottom: 16px;
}
</style>
<style data-emotion="css" data-s="">
.css-1t21j0t-MuiModal-root-MuiDrawer-root {
position: fixed;
z-index: 1300;
right: 0;
bottom: 0;
top: 0;
left: 0;
visibility: hidden;
z-index: 1200;
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 0px) {
.css-1t21j0t-MuiModal-root-MuiDrawer-root {
display: block;
}
}
</style>
<style data-emotion="css" data-s="">
@media (min-width: 900px) {
.css-1t21j0t-MuiModal-root-MuiDrawer-root {
display: none;
}
}
</style>
<style data-emotion="css" data-s="">
.css-1t21j0t-MuiModal-root-MuiDrawer-root .MuiDrawer-paper {
box-sizing: border-box;
width: 240px;
}
</style>
<style data-emotion="css" data-s="">
.css-1rfr5hw-MuiModal-backdrop {
z-index: -1;
}
</style>
<style data-emotion="css" data-s="">
.css-i9fmh8-MuiBackdrop-root-MuiModal-backdrop {
position: fixed;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
right: 0;
bottom: 0;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: transparent;
z-index: -1;
}
</style>
<style data-emotion="css" data-s="">
.css-1poq2dj-MuiDrawer-paper {
overflow-y: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
z-index: 1200;
-webkit-overflow-scrolling: touch;
position: fixed;
top: 0;
outline: 0;
right: 0;
}
</style>
<style data-emotion="css" data-s="">
.css-1160xiw-MuiPaper-root-MuiDrawer-paper {
background-color: #fff;
color: rgba(0, 0, 0, 0.87);
-webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2),
0px 16px 24px 2px rgba(0, 0, 0, 0.14),
0px 6px 30px 5px rgba(0, 0, 0, 0.12);
overflow-y: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
z-index: 1200;
-webkit-overflow-scrolling: touch;
position: fixed;
top: 0;
outline: 0;
right: 0;
}
</style>
<style data-emotion="css" data-s="">
.css-xi606m {
text-align: center;
}
</style>
<style data-emotion="css" data-s="">
.css-1shjrxt-MuiTypography-root {
margin: 0;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-size: 1.25rem;
line-height: 1.6;
letter-spacing: 0.0075em;
margin-top: 16px;
margin-bottom: 16px;
font-weight: 800;
}
</style>
<style data-emotion="css" data-s="">
.css-h4y409-MuiList-root {
list-style: none;
margin: 0;
padding: 0;
position: relative;
padding-top: 8px;
padding-bottom: 8px;
}
</style>
<style data-emotion="css" data-s="">
.css-1nxmd3h-MuiListItem-root {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
-webkit-text-decoration: none;
text-decoration: none;
width: 100%;
box-sizing: border-box;
text-align: left;
}
</style>
<style data-emotion="css" data-s="">
.css-1nxmd3h-MuiListItem-root.Mui-focusVisible {
background-color: rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-1nxmd3h-MuiListItem-root.Mui-selected {
background-color: rgba(25, 118, 210, 0.08);
}
</style>
<style data-emotion="css" data-s="">
.css-1nxmd3h-MuiListItem-root.Mui-selected.Mui-focusVisible {
background-color: rgba(25, 118, 210, 0.2);
}
</style>
<style data-emotion="css" data-s="">
.css-1nxmd3h-MuiListItem-root.Mui-disabled {
opacity: 0.38;
}
</style>
<style data-emotion="css" data-s="">
.css-w5797y-MuiListItemButton-root {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
-webkit-text-decoration: none;
text-decoration: none;
min-width: 0;
box-sizing: border-box;
text-align: left;
padding-top: 8px;
padding-bottom: 8px;
-webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
0ms;
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
padding-left: 16px;
padding-right: 16px;
text-align: center;
}
</style>
<style data-emotion="css" data-s="">
.css-w5797y-MuiListItemButton-root:hover {
-webkit-text-decoration: none;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.04);
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-w5797y-MuiListItemButton-root:hover {
background-color: transparent;
}
}
</style>
<style data-emotion="css" data-s="">
.css-w5797y-MuiListItemButton-root.Mui-selected {
background-color: rgba(25, 118, 210, 0.08);
}
</style>
<style data-emotion="css" data-s="">
.css-w5797y-MuiListItemButton-root.Mui-selected.Mui-focusVisible {
background-color: rgba(25, 118, 210, 0.2);
}
</style>
<style data-emotion="css" data-s="">
.css-w5797y-MuiListItemButton-root.Mui-selected:hover {
background-color: rgba(25, 118, 210, 0.12);
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-w5797y-MuiListItemButton-root.Mui-selected:hover {
background-color: rgba(25, 118, 210, 0.08);
}
}
</style>
<style data-emotion="css" data-s="">
.css-w5797y-MuiListItemButton-root.Mui-focusVisible {
background-color: rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-w5797y-MuiListItemButton-root.Mui-disabled {
opacity: 0.38;
}
</style>
<style data-emotion="css" data-s="">
.css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
position: relative;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
background-color: transparent;
outline: 0;
border: 0;
margin: 0;
border-radius: 0;
padding: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
-webkit-text-decoration: none;
text-decoration: none;
min-width: 0;
box-sizing: border-box;
text-align: left;
padding-top: 8px;
padding-bottom: 8px;
-webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
0ms;
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
padding-left: 16px;
padding-right: 16px;
text-align: center;
}
</style>
<style data-emotion="css" data-s="">
.css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root::-moz-focus-inner {
border-style: none;
}
</style>
<style data-emotion="css" data-s="">
.css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root.Mui-disabled {
pointer-events: none;
cursor: default;
}
</style>
<style data-emotion="css" data-s="">
@media print {
.css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
</style>
<style data-emotion="css" data-s="">
.css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root:hover {
-webkit-text-decoration: none;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.04);
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root:hover {
background-color: transparent;
}
}
</style>
<style data-emotion="css" data-s="">
.css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root.Mui-selected {
background-color: rgba(25, 118, 210, 0.08);
}
</style>
<style data-emotion="css" data-s="">
.css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root.Mui-selected.Mui-focusVisible {
background-color: rgba(25, 118, 210, 0.2);
}
</style>
<style data-emotion="css" data-s="">
.css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root.Mui-selected:hover {
background-color: rgba(25, 118, 210, 0.12);
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root.Mui-selected:hover {
background-color: rgba(25, 118, 210, 0.08);
}
}
</style>
<style data-emotion="css" data-s="">
.css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root.Mui-focusVisible {
background-color: rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root.Mui-disabled {
opacity: 0.38;
}
</style>
<style data-emotion="css" data-s="">
.css-tlelie-MuiListItemText-root {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
margin-top: 4px;
margin-bottom: 4px;
}
</style>
<style data-emotion="css" data-s="">
.css-10hburv-MuiTypography-root {
margin: 0;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0.00938em;
display: block;
}
</style>
<style data-emotion="css" data-s="">
.css-1b4ufyf-MuiButton-root {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-size: 0.875rem;
line-height: 1.75;
letter-spacing: 0.02857em;
text-transform: uppercase;
min-width: 64px;
padding: 5px 15px;
border-radius: 4px;
-webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)
0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
border: 1px solid rgba(237, 108, 2, 0.5);
color: #ed6c02;
}
</style>
<style data-emotion="css" data-s="">
.css-1b4ufyf-MuiButton-root:hover {
-webkit-text-decoration: none;
text-decoration: none;
background-color: rgba(237, 108, 2, 0.04);
border: 1px solid #ed6c02;
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-1b4ufyf-MuiButton-root:hover {
background-color: transparent;
}
}
</style>
<style data-emotion="css" data-s="">
.css-1b4ufyf-MuiButton-root:active {
}
</style>
<style data-emotion="css" data-s="">
.css-1b4ufyf-MuiButton-root.Mui-focusVisible {
}
</style>
<style data-emotion="css" data-s="">
.css-1b4ufyf-MuiButton-root.Mui-disabled {
color: rgba(0, 0, 0, 0.26);
border: 1px solid rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-4afo2x-MuiButtonBase-root-MuiButton-root {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
position: relative;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
background-color: transparent;
outline: 0;
border: 0;
margin: 0;
border-radius: 0;
padding: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-size: 0.875rem;
line-height: 1.75;
letter-spacing: 0.02857em;
text-transform: uppercase;
min-width: 64px;
padding: 5px 15px;
border-radius: 4px;
-webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)
0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
border: 1px solid rgba(237, 108, 2, 0.5);
color: #ed6c02;
}
</style>
<style data-emotion="css" data-s="">
.css-4afo2x-MuiButtonBase-root-MuiButton-root::-moz-focus-inner {
border-style: none;
}
</style>
<style data-emotion="css" data-s="">
.css-4afo2x-MuiButtonBase-root-MuiButton-root.Mui-disabled {
pointer-events: none;
cursor: default;
}
</style>
<style data-emotion="css" data-s="">
@media print {
.css-4afo2x-MuiButtonBase-root-MuiButton-root {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
</style>
<style data-emotion="css" data-s="">
.css-4afo2x-MuiButtonBase-root-MuiButton-root:hover {
-webkit-text-decoration: none;
text-decoration: none;
background-color: rgba(237, 108, 2, 0.04);
border: 1px solid #ed6c02;
}
</style>
<style data-emotion="css" data-s="">
@media (hover: none) {
.css-4afo2x-MuiButtonBase-root-MuiButton-root:hover {
background-color: transparent;
}
}
</style>
<style data-emotion="css" data-s="">
.css-4afo2x-MuiButtonBase-root-MuiButton-root:active {
}
</style>
<style data-emotion="css" data-s="">
.css-4afo2x-MuiButtonBase-root-MuiButton-root.Mui-focusVisible {
}
</style>
<style data-emotion="css" data-s="">
.css-4afo2x-MuiButtonBase-root-MuiButton-root.Mui-disabled {
color: rgba(0, 0, 0, 0.26);
border: 1px solid rgba(0, 0, 0, 0.12);
}
</style>
<style data-emotion="css" data-s="">
.css-8je8zh-MuiTouchRipple-root {
overflow: hidden;
pointer-events: none;
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: inherit;
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div class="container">
<div>
<div class="MuiBox-root css-0">
<nav
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed mui-fixed css-u48a3i-MuiPaper-root-MuiAppBar-root"
>
<div
class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-hyum1k-MuiToolbar-root"
>
<div
class="MuiTypography-root MuiTypography-h4 css-1vtqco2-MuiTypography-root"
>
<a href="#/" style="text-decoration: none; color: white"
>Red<b style="color: orange">Arc</b></a
>
</div>
<div class="MuiBox-root css-fv3lde">
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-9jeihi-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<a href="#/about" style="text-decoration: none">
<span
class="MuiTypography-root MuiTypography-h8 css-yv9cwm-MuiTypography-root"
>About
</span></a
><span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span></button
><button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-9jeihi-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<a href="#/services" style="text-decoration: none">
<span
class="MuiTypography-root MuiTypography-h8 css-yv9cwm-MuiTypography-root"
>Services</span
></a
><span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span></button
><button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-9jeihi-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<a href="#/blog" style="text-decoration: none">
<span
class="MuiTypography-root MuiTypography-h8 css-yv9cwm-MuiTypography-root"
>Blog</span
></a
><span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span></button
><button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-9jeihi-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<a href="#/contact" style="text-decoration: none">
<span
class="MuiTypography-root MuiTypography-h8 css-yv9cwm-MuiTypography-root"
><button
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedWarning MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedWarning MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-1brpleo-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Contact<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span></button></span></a
><span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span></button
><button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-9jeihi-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<a href="#/" style="text-decoration: none">
<span
class="MuiTypography-root MuiTypography-h8 css-yv9cwm-MuiTypography-root"
><svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
focusable="false"
aria-hidden="true"
viewBox="0 0 24 24"
data-testid="TwitterIcon"
>
<path
d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"
></path></svg></span></a
><span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span></button
><button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-9jeihi-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<a href="#/" style="text-decoration: none">
<span
class="MuiTypography-root MuiTypography-h8 css-yv9cwm-MuiTypography-root"
><svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
focusable="false"
aria-hidden="true"
viewBox="0 0 24 24"
data-testid="LinkedInIcon"
>
<path
d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"
></path></svg></span></a
><span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span>
</button>
</div>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-edgeStart MuiIconButton-sizeMedium css-8q0e11-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
aria-label="open drawer"
>
<svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
focusable="false"
aria-hidden="true"
viewBox="0 0 24 24"
data-testid="MenuIcon"
>
<path
d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
></path></svg
><span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span>
</button>
</div>
</nav>
<nav class="MuiBox-root css-0"></nav>
<main class="MuiBox-root css-hpgf8j">
<div
class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-hyum1k-MuiToolbar-root"
></div>
</main>
</div>
<div class="MuiBox-root css-0" align="center">
<div class="MuiBox-root css-67ij2">
<div class="MuiBox-root css-y4o519" align="center">
<div class="MuiBox-root css-xelx1c">
<h2
class="MuiTypography-root MuiTypography-h2 MuiTypography-alignCenter css-1p5pend-MuiTypography-root"
>
Digital <br />
transformation <br />
through cloud
</h2>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-15f511a-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
textalign="center"
>
Work with us<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span>
</button>
</div>
</div>
</div>
<div class="MuiBox-root css-ib9iq6">
<h4
class="MuiTypography-root MuiTypography-h4 MuiTypography-alignCenter css-1xa4opg-MuiTypography-root"
>
Welcome to RedArc.
</h4>
<h6
class="MuiTypography-root MuiTypography-h6 MuiTypography-alignCenter css-io42v5-MuiTypography-root"
>
We’re here to help you and your team <br />
evaluate, establish, and evolve your ICT <br />
architecture ecosystems.<br />
<br />
Enabling you to deliver effective <br />
outcomes for your organisation.
</h6>
</div>
<a
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedWarning MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedWarning MuiButton-sizeMedium MuiButton-containedSizeMedium css-12msbby-MuiButtonBase-root-MuiButton-root"
tabindex="0"
textalign="center"
href="#/services"
>Get Started<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span
></a>
</div>
<div class="MuiBox-root css-0">
<h4
class="MuiTypography-root MuiTypography-h4 css-zerhsn-MuiTypography-root"
>
OUR SERVICES
</h4>
<hr
class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root"
/>
<div class="MuiStack-root css-1tlc5i8-MuiStack-root" align="center">
<div class="MuiBox-root css-18opjn0">
<h5
class="MuiTypography-root MuiTypography-h5 MuiTypography-alignCenter css-1kfjx6a-MuiTypography-root"
>
Cloud Operating Model
</h5>
</div>
<div class="MuiBox-root css-t0d5nb">
<h5
class="MuiTypography-root MuiTypography-h5 MuiTypography-alignCenter css-1kfjx6a-MuiTypography-root"
>
Cyber Security
</h5>
</div>
<div class="MuiBox-root css-18vk4g6">
<h5
class="MuiTypography-root MuiTypography-h5 MuiTypography-alignCenter css-1kfjx6a-MuiTypography-root"
>
Strategy and Architecture
</h5>
</div>
</div>
<div class="MuiStack-root css-1tlc5i8-MuiStack-root" align="center">
<div class="MuiBox-root css-u3eova">
<h5
class="MuiTypography-root MuiTypography-h5 MuiTypography-alignCenter css-1kfjx6a-MuiTypography-root"
>
Managed Architecture Services (MaaS)
</h5>
</div>
<div class="MuiBox-root css-1vkaqw7">
<h5
class="MuiTypography-root MuiTypography-h5 MuiTypography-alignCenter css-1kfjx6a-MuiTypography-root"
>
Architecture Practice and Governance
</h5>
</div>
<div class="MuiBox-root css-ok8hcl">
<h5
class="MuiTypography-root MuiTypography-h5 MuiTypography-alignCenter css-1kfjx6a-MuiTypography-root"
>
Application Transformation
</h5>
</div>
</div>
</div>
<div>
<div class="MuiBox-root css-17aho8q">
<div class="MuiBox-root css-y4o519" align="center">
<div class="MuiBox-root css-xelx1c">
<h5
class="MuiTypography-root MuiTypography-h5 MuiTypography-alignCenter css-okm0i5-MuiTypography-root"
>
We Help You
</h5>
<h3
class="MuiTypography-root MuiTypography-h3 MuiTypography-alignCenter css-47suzj-MuiTypography-root"
>
Here's what you need
</h3>
<h6
class="MuiTypography-root MuiTypography-h6 MuiTypography-alignCenter css-1poslcw-MuiTypography-root"
>
Experience the Best
</h6>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1aqsytz-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
textalign="center"
>
Check it out<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span>
</button>
</div>
</div>
</div>
</div>
<footer style="background: black">
<div class="MuiBox-root css-1wcaknn">
<h6
class="MuiTypography-root MuiTypography-h6 css-b937i3-MuiTypography-root"
>
Follow us
</h6>
<div class="MuiBox-root css-1qqeghk">
<svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
focusable="false"
aria-hidden="true"
viewBox="0 0 24 24"
data-testid="FacebookIcon"
>
<path
d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m13 2h-2.5A3.5 3.5 0 0 0 12 8.5V11h-2v3h2v7h3v-7h3v-3h-3V9a1 1 0 0 1 1-1h2V5z"
></path></svg
><svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
focusable="false"
aria-hidden="true"
viewBox="0 0 24 24"
data-testid="InstagramIcon"
>
<path
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"
></path></svg
><svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
focusable="false"
aria-hidden="true"
viewBox="0 0 24 24"
data-testid="TwitterIcon"
>
<path
d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"
></path></svg
><svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
focusable="false"
aria-hidden="true"
viewBox="0 0 24 24"
data-testid="LinkedInIcon"
>
<path
d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"
></path>
</svg>
</div>
</div>
<address>
<p
class="MuiTypography-root MuiTypography-body2 MuiTypography-alignCenter css-1ejlgzc-MuiTypography-root"
>
Copyright © 2022 RedArc Inc. All rights reserved.
</p>
</address>
</footer>
</div>
</div>
</div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<div
role="presentation"
class="MuiDrawer-root MuiDrawer-modal MuiModal-root MuiModal-hidden css-1t21j0t-MuiModal-root-MuiDrawer-root"
aria-hidden="true"
>
<div
aria-hidden="true"
class="MuiBackdrop-root css-i9fmh8-MuiBackdrop-root-MuiModal-backdrop"
style="opacity: 0; visibility: hidden"
></div>
<div tabindex="-1" data-testid="sentinelStart"></div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation16 MuiDrawer-paper MuiDrawer-paperAnchorRight css-1160xiw-MuiPaper-root-MuiDrawer-paper"
tabindex="-1"
style="visibility: hidden; transform: translateX(1720px)"
>
<div class="MuiBox-root css-xi606m">
<h6
class="MuiTypography-root MuiTypography-h6 css-1shjrxt-MuiTypography-root"
>
Red<b style="color: orange">Arc</b>
</h6>
<hr
class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root"
/>
<ul class="MuiList-root MuiList-padding css-h4y409-MuiList-root">
<li
class="MuiListItem-root MuiListItem-gutters css-1nxmd3h-MuiListItem-root"
>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root"
tabindex="0"
role="button"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
>About
</span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span>
</div>
</li>
<li
class="MuiListItem-root MuiListItem-gutters css-1nxmd3h-MuiListItem-root"
>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root"
tabindex="0"
role="button"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
>Services</span
>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span>
</div>
</li>
<li
class="MuiListItem-root MuiListItem-gutters css-1nxmd3h-MuiListItem-root"
>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root"
tabindex="0"
role="button"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
>Blog</span
>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span>
</div>
</li>
<li
class="MuiListItem-root MuiListItem-gutters css-1nxmd3h-MuiListItem-root"
>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root"
tabindex="0"
role="button"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
><button
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedWarning MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedWarning MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-1brpleo-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Contact<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span></button
></span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span>
</div>
</li>
<li
class="MuiListItem-root MuiListItem-gutters css-1nxmd3h-MuiListItem-root"
>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root"
tabindex="0"
role="button"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
><svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
focusable="false"
aria-hidden="true"
viewBox="0 0 24 24"
data-testid="TwitterIcon"
>
<path
d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"
></path></svg
></span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span>
</div>
</li>
<li
class="MuiListItem-root MuiListItem-gutters css-1nxmd3h-MuiListItem-root"
>
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters css-1d4vqq0-MuiButtonBase-root-MuiListItemButton-root"
tabindex="0"
role="button"
>
<div
class="MuiListItemText-root css-tlelie-MuiListItemText-root"
>
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
><svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
focusable="false"
aria-hidden="true"
viewBox="0 0 24 24"
data-testid="LinkedInIcon"
>
<path
d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"
></path></svg
></span>
</div>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span>
</div>
</li>
</ul>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedWarning MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButton-root MuiButton-outlined MuiButton-outlinedWarning MuiButton-sizeMedium MuiButton-outlinedSizeMedium css-4afo2x-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Contact<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
></span>
</button>
</div>
</div>
<div tabindex="-1" data-testid="sentinelEnd"></div>
</div>
</body>
</html>