html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } :focus { outline: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; -moz-appearance: none; } input[type=search] { -webkit-appearance: none; -moz-appearance: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } textarea { overflow: auto; vertical-align: top; resize: vertical; } audio, canvas, video { display: inline-block; display: inline; max-width: 100%; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } img { border: 0; -ms-interpolation-mode: bicubic; } figure { margin: 0; } form { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; white-space: normal; margin-left: -7px; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; vertical-align: middle; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; overflow: visible; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; height: 13px; width: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } html, button, input, select, textarea { color: #222; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } img { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } :root { --max-width-size: 1098px; --marginSideSize: 2.5rem; --marginSideSizeMobile: 0; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; src: url('/font/Manrope-Regular.ttf'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; src: url('/font/Manrope-Medium.ttf'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; src: url('/font/Manrope-SemiBold.ttf'); } @font-face { font-family: 'movefullife'; font-style: normal; font-weight: normal; src: url('/font/movefullife.ttf'); } html { font-size: 16px; font-family: 'Manrope' !important; font-style: normal !important; font-weight: normal !important; line-height: normal !important; scroll-behavior: smooth; scroll-padding-top: 5rem; overflow: auto; scrollbar-width: 2rem; direction: ltr; } html * { box-sizing: border-box; } html a { text-decoration: none; } html[dir="rtl"] { direction: rtl; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { html { --device: mobileP; font-size: clamp(0px, 4.46927374301676vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (min-width:0px) and (max-width:900px) and (orientation:landscape) and (pointer: coarse) { html { --device: mobileL; font-size: clamp(0px, 1.3vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (min-width:501px) and (max-width:2500px) and (orientation:portrait) and (pointer: coarse) { html { --device: tabletP; font-size: clamp(0px, 0.64vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (min-width:901px) and (max-width:2900px) and (orientation:landscape) and (pointer: coarse) { html { --device: tabletL; font-size: clamp(0px, 0.5517241379310345vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (pointer: fine) { html { font-size: clamp(0px, 1.457194899817851vw, 16px); } @media only screen and (orientation:landscape) { html { --device: desktopL; scrollbar-width: auto; -ms-overflow-style: none; } } @media only screen and (orientation:portrait) { html { --device: desktopP; scrollbar-width: auto; -ms-overflow-style: none; } } @media only screen and (min-width:0px) and (max-width:1024px) { :root { --marginSideSize: 1rem; } } } .paddingBig { padding-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize)); padding-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize)); box-sizing: border-box !important; } .paddingBigLeft { padding-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize)) !important; box-sizing: border-box !important; } .paddingBig2 { padding-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2)) !important; padding-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2)) !important; box-sizing: border-box !important; } .marginBig { margin-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize)) !important; margin-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize)) !important; box-sizing: border-box !important; } .marginBig2 { margin-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2)) !important; margin-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2)) !important; box-sizing: border-box !important; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .paddingBig { padding-left: var(--marginSideSizeMobile); padding-right: var(--marginSideSizeMobile); } .paddingBig2 { padding-left: 0 !important; padding-right: 0 !important; } .marginBig { margin-left: var(--marginSideSizeMobile) !important; margin-right: var(--marginSideSizeMobile) !important; box-sizing: border-box !important; } } .hidden{ display: none; } body { position: relative; width: 100%; height: 100vh; direction: ltr; } header { background: white; height: 6.5rem; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: absolute; top: 0; left: 0; } header>a { margin-right: 5rem !important; align-self: unset !important; width: 15rem; } header>div { margin-left: 5rem !important; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1rem; } header>div>img { width: 5rem; height: 5rem; object-fit: contain; } header>div>p { color: var(--Button-primary, #047857); font-size: 2.1875rem; font-style: normal; font-weight: 500; line-height: 3rem; text-transform: capitalize; } main { display: flex; flex-direction: row; gap: 1rem; align-items: center; justify-content: center; width: 100%; height: 100vh; } main>div:nth-child(1) { overflow: hidden; width: 50%; height: 100vh; } main>div:nth-child(2) { overflow: auto; width: 50%; height: 100vh; padding: 10rem 1rem 10rem 0; } main>div:nth-child(1)>img { width: 100%; height: calc(100vh - 13rem); object-fit: cover; margin-top: 6.5rem; } main h1 { color: var(--Gray-Black, #1E1E1E); font-size: 2.1875rem; font-style: normal; font-weight: 800; line-height: normal; margin-bottom: 2rem; } main p { font-size: 1rem; line-height: 1.5rem; margin-bottom: 0.75rem; } main h2 { font-size: 1.5rem; line-height: 1.75rem; margin-block: 2rem 1rem; } main h3 { font-size: 1.3rem; line-height: 1.5rem; margin-block: 1rem 1rem; } main strong { font-weight: bolder; } main hr { margin-block: 1rem; } main ul { list-style: circle; padding-left: 1rem; margin-bottom: 2rem; } main ul>li { margin-bottom: 0.5rem; line-height: normal; } main>div:nth-child(2)>*:nth-last-child(1){ margin-top: 2rem; max-width: 15rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { body { height: unset; } header { /* background: #FFFFFF55; */ height: 4rem; width: 100%; /* backdrop-filter: blur(8px); */ position: fixed; } header>a { margin-right: 1rem !important; width: 7rem; } header>div { margin-left: 1rem !important; gap: 0.5rem; } header>div>img { width: 2.5rem; height: 2.5rem; } header>div>p { font-size: 1.2rem; line-height: 1.5rem; } main { flex-direction: column; height: unset; } main>div:nth-child(1) { overflow: unset; width: 100%; height: unset; } main>div:nth-child(2) { overflow: unset; width: 100%; height: unset; padding: 1rem; } main>div:nth-child(1)>img { width: 100%; height: 50vh; object-fit: cover; margin-top: 4rem; } main h1 { font-size: 1.5rem; margin-bottom: 1.5rem; } main h2 { font-size: 1.3rem; line-height: 1.5rem; } main h3 { font-size: 1.1rem; } main ul { list-style: circle; padding-left: 1rem; margin-bottom: 2rem; } main>div:nth-child(2)>*:nth-last-child(1){ margin-bottom: 5rem; max-width: 10rem; } } .myButton { display: flex; padding: 0rem 2rem; justify-content: center; align-items: center; gap: 0.75rem; align-self: flex-start; border-radius: 0.5rem; background: #047857; border: 0; color: #FFF; font-family: Manrope; font-size: 1rem; font-style: normal; font-weight: 500; line-height: 3rem; text-transform: capitalize; position: relative; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .myButton.disable { background-color: #0005; cursor: default; } .myButton[iconcodeleft]:not([iconcodeleft=""])::before { content: attr(iconcodeleft); display: flex; width: 1.5rem; height: 1.5rem; justify-content: center; align-items: center; font-family: movefullife; font-size: 1.5rem; line-height: 1.5rem; font-weight: normal; color: #FFF; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .myButton[iconcoderight]:not([iconcoderight=""])::after { content: attr(iconcoderight); display: flex; width: 1.5rem; height: 1.5rem; justify-content: center; align-items: center; font-family: movefullife; font-size: 1.5rem; line-height: 1.5rem; font-weight: normal; color: #FFF; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .myButton.outline { border-radius: 0.5rem; border: 1.5px solid #656565; background-color: transparent; color: #656565; } .myButton.outline[iconcodeleft]:not([iconcodeleft=""])::before { color: #656565; } .myButton.outline.active { border: 1.5px solid #047857; color: #047857; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .myButton.outline.active[iconcodeleft]:not([iconcodeleft=""])::before { color: #047857; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .myButton { font-size: 0.875rem; line-height: 1.5rem; padding: 0.5rem 1rem; } }