.elementor-56459 .elementor-element.elementor-element-3049cbcc:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-56459 .elementor-element.elementor-element-3049cbcc > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-afdf2e3 );}.elementor-56459 .elementor-element.elementor-element-3049cbcc > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-56459 .elementor-element.elementor-element-3049cbcc > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.pp-tooltip.pp-tooltip-{{ID}} .pp-tooltip-content{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-56459 .elementor-element.elementor-element-4bd6bc58{width:initial;max-width:initial;top:24px;}body:not(.rtl) .elementor-56459 .elementor-element.elementor-element-4bd6bc58{left:20px;}body.rtl .elementor-56459 .elementor-element.elementor-element-4bd6bc58{right:20px;}.ee-tooltip.ee-tooltip-4bd6bc58.to--top, .ee-tooltip.ee-tooltip-4bd6bc58.to--bottom{margin-left:0px;}.ee-tooltip.ee-tooltip-4bd6bc58.to--left, .ee-tooltip.ee-tooltip-4bd6bc58.to--right{margin-top:0px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-56459 .elementor-element.elementor-element-20c84a67{width:initial;max-width:initial;top:0px;}body:not(.rtl) .elementor-56459 .elementor-element.elementor-element-20c84a67{right:60px;}body.rtl .elementor-56459 .elementor-element.elementor-element-20c84a67{left:60px;}.elementor-56459 .elementor-element.elementor-element-20c84a67 .elementor-nav-menu .elementor-item{font-family:"proxima-nova", Sans-serif;font-weight:600;}.elementor-56459 .elementor-element.elementor-element-20c84a67 .elementor-nav-menu--main .elementor-item{color:#FFFFFF;fill:#FFFFFF;}.elementor-56459 .elementor-element.elementor-element-20c84a67 .elementor-nav-menu--main .elementor-item:hover, .elementor-56459 .elementor-element.elementor-element-20c84a67 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-56459 .elementor-element.elementor-element-20c84a67 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-56459 .elementor-element.elementor-element-20c84a67 .elementor-nav-menu--main .elementor-item:focus{color:#FFFFFF;fill:#FFFFFF;}.elementor-56459 .elementor-element.elementor-element-20c84a67 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-56459 .elementor-element.elementor-element-20c84a67 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#FFFFFF;}.elementor-56459 .elementor-element.elementor-element-20c84a67 .e--pointer-framed .elementor-item:before, .elementor-56459 .elementor-element.elementor-element-20c84a67 .e--pointer-framed .elementor-item:after{border-color:#FFFFFF;}.elementor-56459 .elementor-element.elementor-element-702e9a10 > .elementor-widget-container{margin:0px 0px -40px 0px;}.ee-tooltip.ee-tooltip-702e9a10.to--top, .ee-tooltip.ee-tooltip-702e9a10.to--bottom{margin-left:0px;}.ee-tooltip.ee-tooltip-702e9a10.to--left, .ee-tooltip.ee-tooltip-702e9a10.to--right{margin-top:0px;}.elementor-56459 .elementor-element.elementor-element-702e9a10 img{width:100%;height:200px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-56459 .elementor-element.elementor-element-7af2ecd{width:initial;max-width:initial;top:70px;}body:not(.rtl) .elementor-56459 .elementor-element.elementor-element-7af2ecd{left:183px;}body.rtl .elementor-56459 .elementor-element.elementor-element-7af2ecd{right:183px;}.elementor-56459 .elementor-element.elementor-element-7af2ecd .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;color:#FFFFFF;}.elementor-56459 .elementor-element.elementor-element-714c8283 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-menu-toggle{margin-left:auto;}.elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu .elementor-item{font-family:"proxima-nova", Sans-serif;font-size:19px;font-weight:400;}.elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--main .elementor-item{color:#000000;fill:#000000;}.elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--main .elementor-item:hover, .elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-43825424 );}.elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-15f04079 );}.elementor-56459 .elementor-element.elementor-element-714c8283 .e--pointer-framed .elementor-item:before, .elementor-56459 .elementor-element.elementor-element-714c8283 .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-15f04079 );}.elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:var( --e-global-color-43825424 );}.elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:before, .elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:after{background-color:var( --e-global-color-15f04079 );}.elementor-56459 .elementor-element.elementor-element-714c8283 .e--pointer-framed .elementor-item.elementor-item-active:before, .elementor-56459 .elementor-element.elementor-element-714c8283 .e--pointer-framed .elementor-item.elementor-item-active:after{border-color:var( --e-global-color-15f04079 );}.elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--dropdown a, .elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-menu-toggle{color:#000000;fill:#000000;}.elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--dropdown{background-color:#EFF2F4;}.elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--dropdown a:hover, .elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--dropdown a:focus, .elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--dropdown a.highlighted, .elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-menu-toggle:hover, .elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-menu-toggle:focus{color:var( --e-global-color-a19d114 );}.elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--dropdown a:hover, .elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--dropdown a:focus, .elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--dropdown a.highlighted{background-color:var( --e-global-color-949b50d );}.elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--dropdown .elementor-item, .elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"proxima-nova", Sans-serif;font-size:18px;font-weight:400;}.elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--dropdown a{padding-left:100px;padding-right:100px;padding-top:13px;padding-bottom:13px;}.elementor-56459 .elementor-element.elementor-element-714c8283 .elementor-nav-menu--dropdown li:not(:last-child){border-style:solid;border-color:#ADADAD;border-bottom-width:1px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-56459 .elementor-element.elementor-element-afbbd60{text-align:center;font-family:"proxima-nova", Sans-serif;font-weight:400;line-height:1.5em;color:#000000;}.elementor-56459 .elementor-element.elementor-element-c05cbff{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-56459 .elementor-element.elementor-element-6ec9b65 > .elementor-widget-container{margin:0px 0px 19px 0px;padding:0px 0px 0px 0px;}.elementor-56459 .elementor-element.elementor-element-78cbd69{--display:flex;}.elementor-56459 .elementor-element.elementor-element-0153e84 > .elementor-widget-container{padding:20px 0px 20px 0px;}.elementor-56459 .elementor-element.elementor-element-0153e84 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-56459 .elementor-element.elementor-element-4b9f7aa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-56459 .elementor-element.elementor-element-7d42bd5{font-family:"proxima-nova", Sans-serif;font-size:18px;font-weight:400;line-height:1.5em;color:#000000;}.elementor-56459 .elementor-element.elementor-element-2ba9c28{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-56459 .elementor-element.elementor-element-e36ade2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-56459 .elementor-element.elementor-element-a04534e{width:initial;max-width:initial;text-align:center;color:#000000;}.elementor-56459 .elementor-element.elementor-element-a04534e > .elementor-widget-container{margin:0px 0px 040px 0px;}.elementor-56459 .elementor-element.elementor-element-a04534e.elementor-element{--align-self:center;}.elementor-56459 .elementor-element.elementor-element-009efd8{--display:flex;}.elementor-56459 .elementor-element.elementor-element-425e166{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(max-width:1366px){body:not(.rtl) .elementor-56459 .elementor-element.elementor-element-7af2ecd{left:190px;}body.rtl .elementor-56459 .elementor-element.elementor-element-7af2ecd{right:190px;}.elementor-56459 .elementor-element.elementor-element-7af2ecd{top:70px;}}@media(max-width:1200px){body:not(.rtl) .elementor-56459 .elementor-element.elementor-element-7af2ecd{left:189px;}body.rtl .elementor-56459 .elementor-element.elementor-element-7af2ecd{right:189px;}.elementor-56459 .elementor-element.elementor-element-7af2ecd{top:65px;}}@media(max-width:993px){body:not(.rtl) .elementor-56459 .elementor-element.elementor-element-4bd6bc58{left:12px;}body.rtl .elementor-56459 .elementor-element.elementor-element-4bd6bc58{right:12px;}body:not(.rtl) .elementor-56459 .elementor-element.elementor-element-20c84a67{right:0px;}body.rtl .elementor-56459 .elementor-element.elementor-element-20c84a67{left:0px;}.elementor-56459 .elementor-element.elementor-element-702e9a10 > .elementor-widget-container{margin:0px 0px -40px 0px;padding:0px 0px 0px 0px;}.elementor-56459 .elementor-element.elementor-element-702e9a10 img{max-width:100%;height:200px;}body:not(.rtl) .elementor-56459 .elementor-element.elementor-element-7af2ecd{left:174px;}body.rtl .elementor-56459 .elementor-element.elementor-element-7af2ecd{right:174px;}.elementor-56459 .elementor-element.elementor-element-7af2ecd{top:73px;text-align:left;}}@media(max-width:767px){.elementor-56459 .elementor-element.elementor-element-4bd6bc58{--container-widget-width:80px;--container-widget-flex-grow:0;width:var( --container-widget-width, 80px );max-width:80px;top:19px;}body:not(.rtl) .elementor-56459 .elementor-element.elementor-element-4bd6bc58{left:11.989px;}body.rtl .elementor-56459 .elementor-element.elementor-element-4bd6bc58{right:11.989px;}.elementor-56459 .elementor-element.elementor-element-20c84a67 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}body:not(.rtl) .elementor-56459 .elementor-element.elementor-element-20c84a67{right:0px;}body.rtl .elementor-56459 .elementor-element.elementor-element-20c84a67{left:0px;}.elementor-56459 .elementor-element.elementor-element-20c84a67{top:0px;}.elementor-56459 .elementor-element.elementor-element-20c84a67 .elementor-nav-menu .elementor-item{font-size:14px;}.elementor-56459 .elementor-element.elementor-element-20c84a67 .elementor-nav-menu--main .elementor-item{padding-left:5px;padding-right:5px;padding-top:5px;padding-bottom:5px;}.elementor-56459 .elementor-element.elementor-element-702e9a10 > .elementor-widget-container{margin:0px 0px -40px 0px;}.elementor-56459 .elementor-element.elementor-element-702e9a10 img{height:120px;}body:not(.rtl) .elementor-56459 .elementor-element.elementor-element-7af2ecd{left:103px;}body.rtl .elementor-56459 .elementor-element.elementor-element-7af2ecd{right:103px;}.elementor-56459 .elementor-element.elementor-element-7af2ecd{top:41px;}.elementor-56459 .elementor-element.elementor-element-7af2ecd .elementor-heading-title{font-size:20px;}}/* Start custom CSS for image, class: .elementor-element-702e9a10 */a:focus, a:hover { color: white !important; text-decoration: none !important; } .elementor-element .elementor-widget-container { max-width: none !important; margin: auto; }/* End custom CSS */ /* Start custom CSS for nav-menu, class: .elementor-element-714c8283 */.elementor-menu-toggle { align-items: center; background-color: rgba(255, 255, 255, 0) !important; border: 0 solid; border-radius: 3px; color: #33373d; cursor: pointer; display: flex; font-size: var(--nav-menu-icon-size,22px); justify-content: center; padding: .25em; position: relative !important; top: 5px !important; } .menu-item .menu-item-type-post_type { color:black !important; }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-afbbd60 */#overviewEhdi { font-size: 36px !important; font-weight: 600 !important; }/* End custom CSS */ /* Start custom CSS for video, class: .elementor-element-0153e84 */#ehdiOverviewVideo{ max-width: 960px; margin:auto; transition: max-height 0.4s ease-in, opacity 0.4s ease-in; }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-7d42bd5 */#FISoverview{ max-width: 960px; margin: auto; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-71dd634 *//* CSS for the button */ .download-button { padding: 10px 20px; background-color: #007BFF !important; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 20px; font-weight: 600; } /* Center the button */ .centered-button-container { text-align: center; } .download-button:hover { background-color: #4CA2FF !important; scale:1.05; }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-a04534e */#clickOn{ margin-left:auto; margin-right:auto; } #colortext{ color:black !important; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-9fc9457 */html, body { width: 100%; margin: auto; scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; height: 100vh; /* Ensures full height for scrolling */ } /* iPhone 16 Pro Max */ @media only screen and (max-width: 440px) and (-webkit-device-pixel-ratio: 3) { .mainWrapper { margin-left: -53px !important; } } /* iPhone 14/15 Pro Max & 15 Plus */ @media only screen and (max-width: 430px) and (-webkit-device-pixel-ratio: 3) { .mainWrapper { margin-left: -58px !important; } } /* iPhone 14 Plus */ @media only screen and (max-width: 428px) and (-webkit-device-pixel-ratio: 2) { .mainWrapper { margin-left: -58px !important; } } /* Older Plus models & XR/11 */ @media only screen and (max-width: 414px) and (-webkit-device-pixel-ratio: 2) { .mainWrapper { margin-left: -65px !important; } } /* iPhone 15 / iPhone 15 Pro (393px width) */ @media only screen and (max-width: 393px) and (-webkit-device-pixel-ratio: 3) { .mainWrapper { margin-left: -80px !important; } } /* iPhone 15 Plus / iPhone 15 Pro Max (428px width) */ @media only screen and (max-width: 428px) and (min-width: 428px) and (-webkit-device-pixel-ratio: 3) { .mainWrapper { margin-left: -58px !important; } } /* iPhone 12 / 12 Pro / 13 / 13 Pro / 14 */ @media only screen and (max-width: 390px) and (-webkit-device-pixel-ratio: 3) { .mainWrapper { margin-left: -86px !important; } } /* iPhone SE (2nd/3rd Gen) / X / 11 Pro → FIXED pixel ratio */ @media only screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) { .mainWrapper { margin-left: -90px !important; } } /* iPhone 12 Mini / 13 Mini */ @media only screen and (max-width: 360px) and (-webkit-device-pixel-ratio: 3) { .mainWrapper { margin-left: -94px !important; } } .grid { display: grid; grid-template-rows: 100vh; /* Full height */ gap: 0px 0px; grid-template-areas: "EHDI contents"; height: auto; /* Ensures the grid takes the full viewport height */ } .contents { grid-area: contents; overflow-y: hidden; /* Enables scrolling */ height: auto; /* Ensures scrolling works */ padding-right: 10px; } .EHDI { grid-area: EHDI; position: sticky; height: 100vh; /* Ensures the sidebar stays full height */ top: 50px; } li { font-size: 18px; } /* Responsive Design */ .grid { max-width: 900px; grid-template-rows: auto auto; gap: 0px 0px; grid-template-areas: "EHDI contents"; margin-left: auto; margin-right: auto; margin-bottom: 200px; } .EHDI { scale: 0.9; margin-left: -50px; } .contents { top: -30px; width: 450px; margin-left: -30px; } .mainWrapper1 { position: static; top: -105px; right: 55px; } .button1 { left: 116px; top: -11px !important; padding-right: 558px !important; padding-bottom: 651px !important; } .button1 p { left: 180px !important; font-size: 24px !important; } .button2 { left: 0px !important; top: 56px !important; padding-right: 535px !important; padding-bottom: 600px !important; } .button2 p { left: 230px !important; font-size: 24px !important; } .button3 { left: 10px !important; top: 111px !important; padding-right: 514px !important; padding-bottom: 534px !important; } .button3 p { left: 200px !important; font-size: 24px !important; } .button4 { left: 20px !important; top: 168px !important; padding-right: 492px !important; padding-bottom: 467px !important; } .button4 p { left: 108px !important; font-size: 24px !important; } .button5 { left: 41px !important; top: 188px !important; padding-right: 470px !important; padding-bottom: 400px !important; } .button5 p { left: 57px !important; top: -8px !important; font-size: 24px !important; } .button5 img { left: 10px !important; top: 40px !important; max-width: 450px !important; } .button6 { left: 40px !important; top: 420px !important; max-width: 450px !important; border-radius: 4px !important; } .button6 p { position: absolute; left: 40px !important; top: 40px !important; line-height: 1.2 !important; text-align: center !important; font-size: 22px !important; } .button7 { left: 50px !important; top: 197px !important; max-width: 110px !important; } .button8 { left: 372px !important; top: 197px !important; max-width: 110px !important; } .button9 { left: 165px !important; top: 230px !important; max-width: 200px !important; max-height: 125px !important; } .button10 { left: 10px !important; top: 111px !important; padding-right: 514px !important; padding-bottom: 534px !important; } .staticButton { left: 40px !important; top: 500px !important; max-width: 450px !important; } .staticButton1 { left: 40px !important; top: 0px !important; max-width: 450px !important; } .staticButton2 { left: 208px !important; top: 15px !important; max-width: 30px !important; } @media only screen and (max-width: 965px) { .contents { width: 350px; } .EHDI { scale: .85; margin-left: -30px; } } @media only screen and (max-width: 850px) { .contents { width: 350px; margin-left: -65px; } .EHDI { scale: .8; margin-left: -50px; } } @media only screen and (max-width: 790px) { .grid { grid-template-areas: "EHDI" "contents"; /* Ensures the grid takes the full viewport height */ } .contents { width: auto; margin-left: 0; position: relative; } .EHDI { position: initial; scale: 1; margin-left: auto; margin-right:auto; } .mainWrapper { margin-left: 15px; } } @media only screen and (max-width: 660px) { .grid { grid-template-areas: "EHDI" "contents"; /* Ensures the grid takes the full viewport height */ } .contents { width: 500px; margin-left: auto; margin-right: auto; position: relative; } .EHDI { position: initial; scale: .9; margin-left: auto; margin-right:auto; } .mainWrapper { margin-left: 0px !important; } } @media only screen and (max-width: 550px) { .grid { grid-template-areas: "EHDI" "contents"; /* Ensures the grid takes the full viewport height */ } .contents { width: 440px; margin-left: auto; margin-right: auto; position: relative; } .EHDI { position: initial; scale: .8; margin-left: auto; margin-right:auto; } .mainWrapper { margin-left: -30px !important; } } @media only screen and (max-width: 480px) { .grid { grid-template-areas: "EHDI" "contents"; /* Ensures the grid takes the full viewport height */ } .contents { width: 420px; margin-left: 10px; margin-right: auto; position: relative; } .EHDI { position: initial; scale: .8; margin-left: -50px; margin-right:auto; } .mainWrapper { margin-left: -115px !important; } } @media only screen and (max-width: 450px) { .grid { grid-template-areas: "EHDI" "contents"; /* Ensures the grid takes the full viewport height */ grid-template-rows: 550px auto !important; } .contents { width: 420px; margin-left: 10px; margin-right: auto; position: relative; } .EHDI { position: initial; scale: .7; margin-left: -50px; margin-right:auto; } .mainWrapper { margin-left: -100px !important; margin-top: -80px !important; } } @media only screen and (max-width: 420px) { .grid { grid-template-areas: "EHDI" "contents"; /* Ensures the grid takes the full viewport height */ } .contents { width: 360px; margin-left: 30px; margin-right: auto; position: relative; } .EHDI { position: initial; scale: .7; margin-left: auto; margin-right:auto; } .mainWrapper { margin-left: -100px !important; margin-top: -80px !important; } } @media only screen and (max-width: 395px) { .grid { grid-template-areas: "EHDI" "contents"; /* Ensures the grid takes the full viewport height */ grid-template-rows: 800px auto; } .contents { width: 360px; margin-left: 0px; margin-right: auto; position: relative; } .EHDI { position: initial; scale: .65; margin-left: auto; margin-right:auto; } .mainWrapper { margin-left: -120px !important; margin-top: -80px !important; } } /* flowcharts */ .main_div { text-align: center; background: #00C492; padding: 20px; width: 400px; } .inner_div { background: #fff; margin-top: 20px; height: 100px; } .mainWrapper { margin-left: auto; margin-right: auto; position: relative; margin-top: 25px; } .mainWrapper a:hover { cursor: pointer; } @media only screen and (max-device-width : 1024px) { .mainWrapper { margin-left: auto !important; margin-right: auto !important; } } @media only screen and (max-device-width : 480px) { .button6 p { position: absolute; left: 40px; top: 30px; line-height: 1.2; text-align: center; } @media screen and (orientation:landscape) { .mainWrapper { margin-left: -20px !important; } } } @media only screen and (max-device-width : 430px) { .mainWrapper { margin-left: -80px !important; } .grid { grid-template-rows: 500px auto; } } @media only screen and (max-device-width : 414px) { .mainWrapper { margin-left: -88px !important; } .grid { grid-template-rows: 500px auto; } } @media only screen and (max-device-width : 393px) { .mainWrapper { margin-left: -104px !important; } .grid { grid-template-rows: 500px auto; } } @media only screen and (max-device-width : 375px) { .mainWrapper { margin-left: -115px !important; } .grid { grid-template-rows: 500px auto; } } .button1 { background-color: #163D67; position: relative; left: -10px; top: -68px; z-index: 1; font-size: 18px; border-radius: 8px; padding-right: 790px; padding-bottom: 700px; transition: all .2s ease-in-out; } .button1 p { position: absolute; left: 325px; top: -7px; z-index: 0; text-decoration: none; color: white; transition: all .2s ease-in-out; top: -11px; } .button1:hover { filter: brightness(85%); } /* .button1:hover p { font-size:24px; left: 200px; } */ .button2 { background-color: #22588B; position: absolute; left: 10px; top: -15px; z-index: 2; font-size: 18px; border-radius: 8px; padding-right: 750px; padding-bottom: 663px; transition: all .2s ease-in-out; } .button2 p { position: absolute; left: 350px; top: -8px; z-index: 0; text-decoration: none; color: white; transition: all .2s ease-in-out; top: -11px; } .button2:hover { filter: brightness(85%); } /* .button2:hover p { font-size:24px; left: 120px; top: -12px; } */ .button3 { background-color: #3483BC; position: absolute; left: 30px; top: 30px; z-index: 2; font-size: 18px; border-radius: 8px; padding-right: 710px; padding-bottom: 608px; transition: all .2s ease-in-out; } .button3 p { position: absolute; left: 315px; top: -7px; z-index: 0; text-decoration: none; color: white; transition: all .2s ease-in-out; top: -11px; } .button3:hover { filter: brightness(85%); } /* .button3:hover p { font-size:24px; left: 145px; top: -12px; } */ .button4 { background-color: #e8d8b4; ; position: absolute; left: 50px; top: 75px; z-index: 2; font-size: 18px; border-radius: 8px; padding-right: 670px; padding-bottom: 553px; transition: all .2s ease-in-out; } .button4 p { position: absolute; left: 229px; top: -8px; z-index: 0; text-decoration: none; color: white; transition: all .2s ease-in-out; top: -11px; } .button4:hover { filter: brightness(85%); } /* .button4:hover p { font-size:24px; left: 190px; top: -12px; } */ /* .button5:hover p { font-size:24px; left: 235px; top: -12px; } */ /* .button5:hover img{ top:60px; } */ .button5 { position: absolute; left: 78px; top: 100px; z-index: 2; font-size: 18px; border-radius: 8px; transition: all .2s ease-in-out; max-width: 615px; } .button5 p { position: absolute; left: 112px !important; top: 180px !important; z-index: 1; text-decoration: none; color: black; transition: all .2s ease-in-out; top: -11px; font-size: 16px !important; } .button5:hover { filter: brightness(85%); } .button6 { position: absolute; left: 78px; top: 400px; z-index: 2; font-size: 18px; border-radius: 8px; transition: all .2s ease-in-out; max-width: 615px; } .button6 p { position: absolute; left: 156px; top: 10px; z-index: 1; text-decoration: none; color: white; transition: all .2s ease-in-out; } .button6:hover { filter: brightness(85%); } .button7 { position: absolute; left: 100px; top: 120px; z-index: 2; font-size: 18px; border-radius: 4px; max-width: 130px; transition: all .2s ease-in-out; } .button7 p { position: absolute; left: 20px; top: 85px !important; z-index: 0; text-decoration: none; color: rgb(0, 0, 0); font-size: 18px; text-align: center; color: white; line-height: 1.2; } .button7:hover { filter: brightness(85%); } .button8 { position: absolute; left: 540px; top: 120px; z-index: 2; font-size: 18px; border-radius: 4px; max-width: 130px; transition: all .2s ease-in-out; } .button8 p { position: absolute; left: 12px; top: 39px !important; z-index: 0; text-decoration: none; color: rgb(0, 0, 0); font-size: 18px; text-align: center; color: white; line-height: 1.2; } .button8:hover { filter: brightness(85%); } .button9 { position: absolute; left: 235px; top: 130px; z-index: 2; font-size: 18px; border-radius: 4px; max-width: 300px; transition: all .2s ease-in-out; } .button9 p { position: absolute; left: 0px; top: 30px !important; z-index: 0; text-decoration: none; color: white; font-size: 15px; text-align: center; line-height: 1.2; } .button9:hover { filter: brightness(85%); } .button10 { background-color: #3483BC; position: absolute; left: 40px !important; top: 540px !important; z-index: 2; font-size: 18px; border-radius: 8px; padding-right: 450px !important; padding-bottom: 90px !important; transition: all .2s ease-in-out; } .button10:hover { filter: brightness(85%); } .staticButton { position: absolute; left: 78px; top: 510px !importa; z-index: 2; font-size: 18px; border-radius: 4px; max-width: 616px; transition: all .2s ease-in-out; } .staticButton p { color:white !important; position: absolute; top: -501px !important; left: 88px; z-index: 0; text-decoration: none; color: rgb(0, 0, 0); font-size: 17px; text-align: center; width: 200px; } .staticButton:hover { filter: brightness(85%); } .staticButton1 { position: absolute; left: 78px; top: 510px; z-index: 2; font-size: 18px; border-radius: 4px; max-width: 616px; transition: all .2s ease-in-out; } .staticButton2 { position: absolute; left: 375px; top: 575px; z-index: 2; font-size: 18px; border-radius: 4px; max-width: 20px; transition: all .2s ease-in-out; filter: invert(1) brightness(2); } .staticButton3 { position: absolute; left: -186px; top: 13px; z-index: 2; font-size: 18px; border-radius: 4px; max-width: 616px; transition: all .2s ease-in-out; } .staticButton3 p { color:white !important; position: absolute; top: 44px; left: 318px; z-index: 0; text-decoration: none; color: rgb(0, 0, 0); font-size: 17px; text-align: center; white-space: nowrap; } .staticButton3:hover { filter: brightness(85%); } #Menu1, #Menu2, #Menu3, #Menu4, #Menu5, #Menu6, #Menu7, #Menu8, #Menu9, #Menu10 { padding: 10px; } .contents h2 { text-align: center; margin-top: 5px; font-size: 1.2em; } .pWrapper { max-width: 980px; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; font-size: 18px; } ul { font-size: 18px; } /*Tabs*/ .page { position: relative; margin: 0 auto; padding: 0 00px 40px; } .accordion { background-color: #eee; color: #333; cursor: pointer; padding: 10px; width: 100%; border: none; text-align: left; outline: none; font-size: 1em; transition: 0.4s; font-weight: 600; } .active, .accordion:hover { background-color: #ccc; } .accordion:after { content: '\002B'; color: #fff; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\2212"; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; max-width: 980px; margin-right: auto; margin-left: auto; } #plfVideo, #lberVideo, #lbVideo, #olbeVideo, #erVideo, #apsVideo, #fpVideo, #fVideo, #ofpVideo, #pVideo, #esVideo, #hliVideo, #furVideo, #eiVideo, #elaleVideo, #dhhcdVideo, #overallDevelopmentVideo{ display: none; position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */ margin-top: 20px; margin-bottom: 20px; } .toggleVideo { display: block !important; } .toggleButton { padding-bottom: 100px !important; } .togglePanel { /*max-height:1000px !important;*/ } .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; } .aslButton { background-color: #ACB9C3 !important; border: none; color: black !important; padding: 12px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 8px; transition-duration: 0.4s; font-style: italic; display: block; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; } .aslButton:hover, .aslButton:active { background-color: #808a91 !important; color: black !important; } .elementor-element .elementor-widget-container { max-width: 960px; margin: auto; } @media only screen and (max-width: 650px) { .button5 p { left: 110px !important; top: 186px !important; font-size: 17px !important; } .button9 p { position: absolute; left: 0px !important; top: 36px !important; line-height: 1 !important; text-align: center !important; font-size: 14px !important; } .staticButton1 b { left: 30px !important; top: 550px !important; font-size: 18px; } .grid { max-width: 900px; grid-template-rows: 650px auto !important; } } .button9 { position: absolute; left: 235px; top: 130px; z-index: 2; font-size: 18px; border-radius: 4px; max-width: 300px; max-height: 125px; transition: all .2s ease-in-out; /* Remove the hover effect from here */ } /* Keep text styling */ .button9 p { position: absolute; left: 0px; top: 34px !important; z-index: 0; text-decoration: none; color: white; font-size: 15px; text-align: center; line-height: 1.0; } /* Optional: Make sure image fits nicely */ .button9 img { display: block; width: 100%; /* or fixed size like 100px */ height: auto; } @media only screen and (max-width: 450px) { .grid { max-width: 900px; grid-template-rows: 500px auto !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-4175019 *//* Style for the container holding the buttons */ .button-container { text-align: center; margin-top: 20px; } /* Style for all buttons */ .button { background-color: white !important; color: black; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px; transition: transform 0.2s; } /* Style for the "Previous" arrow button */ .prev-button { transition: transform 0.2s; background-color: white !important; color: black !important; font-size: 20px; font-weight: 600; border: none; position: absolute; left: 20px; /* Position at the left edge */ visibility: hidden; } /* Style for the "Next" arrow button */ .next-button { transition: transform 0.2s; color: black !important; background-color: white !important; font-size: 20px; font-weight: 600; border: none; position: absolute; right: 20px; /* Position at the right edge */ } /* Style for the center button */ .menu-button { color: black !important; background-color: white !important; border: none; font-size: 20px; font-weight: 600; transition: transform 0.2s; position: relative; top: 0; } /* Hover effect for the arrow buttons */ .prev-button:hover { transform: translateX(-10px); } .next-button:hover { transform: translateX(10px); } .menu-button:hover { top: -5px; }/* End custom CSS */