.elementor-146 .elementor-element.elementor-element-5eaea30{--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;--padding-top:100px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-146 .elementor-element.elementor-element-5eaea30:not(.elementor-motion-effects-element-type-background), .elementor-146 .elementor-element.elementor-element-5eaea30 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-5ffe6dc );}.elementor-146 .elementor-element.elementor-element-3b0fa43{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-146 .elementor-element.elementor-element-f6af249{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-146 .elementor-element.elementor-element-f6af249.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-146 .elementor-element.elementor-element-1f59fc2{--display:flex;--justify-content:center;}.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-146 .elementor-element.elementor-element-1824e3a .elementor-heading-title{font-family:"Mulish", Sans-serif;font-size:24px;font-weight:800;color:var( --e-global-color-27e836f );}.elementor-146 .elementor-element.elementor-element-b9a5d2a{--display:flex;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{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-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-146 .elementor-element.elementor-element-d9b2aa8 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-146 .elementor-element.elementor-element-d9b2aa8 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-146 .elementor-element.elementor-element-d9b2aa8 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-146 .elementor-element.elementor-element-d9b2aa8 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-146 .elementor-element.elementor-element-d9b2aa8 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-146 .elementor-element.elementor-element-d9b2aa8 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-146 .elementor-element.elementor-element-d9b2aa8 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-146 .elementor-element.elementor-element-d9b2aa8 .elementor-field-type-html{padding-bottom:0px;color:#FFFFFF;}.elementor-146 .elementor-element.elementor-element-d9b2aa8 .elementor-field-group .elementor-field{color:var( --e-global-color-61de875 );}.elementor-146 .elementor-element.elementor-element-d9b2aa8 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-146 .elementor-element.elementor-element-d9b2aa8 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-146 .elementor-element.elementor-element-d9b2aa8 .e-form__buttons__wrapper__button-next{background-color:#004482;color:#ffffff;}.elementor-146 .elementor-element.elementor-element-d9b2aa8 .elementor-button[type="submit"]{background-color:#004482;color:#ffffff;}.elementor-146 .elementor-element.elementor-element-d9b2aa8 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-146 .elementor-element.elementor-element-d9b2aa8 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-146 .elementor-element.elementor-element-d9b2aa8 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-146 .elementor-element.elementor-element-d9b2aa8 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-146 .elementor-element.elementor-element-d9b2aa8 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-146 .elementor-element.elementor-element-d9b2aa8 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-146 .elementor-element.elementor-element-d9b2aa8 .elementor-button{padding:015px 050px 015px 050px;}.elementor-146 .elementor-element.elementor-element-d9b2aa8{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-146 .elementor-element.elementor-element-4fba6ff{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-146 .elementor-element.elementor-element-730da03{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:030px;}.elementor-146 .elementor-element.elementor-element-b4cb342 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:22px;font-weight:600;color:var( --e-global-color-27e836f );}.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-146 .elementor-element.elementor-element-9922c98{font-family:"Roboto", Sans-serif;font-size:14px;font-weight:400;color:#FFFFFF;}.elementor-146 .elementor-element.elementor-element-dabe45c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 030px;--row-gap:0px;--column-gap:030px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-146 .elementor-element.elementor-element-fc06888{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:100px 100px 100px 100px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-146 .elementor-element.elementor-element-fc06888:not(.elementor-motion-effects-element-type-background), .elementor-146 .elementor-element.elementor-element-fc06888 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-146 .elementor-element.elementor-element-9b2eeb4{border-radius:0px 0px 0px 0px;}.elementor-146 .elementor-element.elementor-element-9b2eeb4 .elementor-icon-wrapper{text-align:center;}.elementor-146 .elementor-element.elementor-element-9b2eeb4.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-5ffe6dc );}.elementor-146 .elementor-element.elementor-element-9b2eeb4.elementor-view-framed .elementor-icon, .elementor-146 .elementor-element.elementor-element-9b2eeb4.elementor-view-default .elementor-icon{color:var( --e-global-color-5ffe6dc );border-color:var( --e-global-color-5ffe6dc );}.elementor-146 .elementor-element.elementor-element-9b2eeb4.elementor-view-framed .elementor-icon, .elementor-146 .elementor-element.elementor-element-9b2eeb4.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-5ffe6dc );}.elementor-146 .elementor-element.elementor-element-9b2eeb4 .elementor-icon{font-size:30px;}.elementor-146 .elementor-element.elementor-element-9b2eeb4 .elementor-icon svg{height:30px;}.elementor-146 .elementor-element.elementor-element-587f5fe{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:100px 100px 100px 100px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-146 .elementor-element.elementor-element-587f5fe:not(.elementor-motion-effects-element-type-background), .elementor-146 .elementor-element.elementor-element-587f5fe > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-146 .elementor-element.elementor-element-8ca9b38{border-radius:0px 0px 0px 0px;}.elementor-146 .elementor-element.elementor-element-8ca9b38 .elementor-icon-wrapper{text-align:center;}.elementor-146 .elementor-element.elementor-element-8ca9b38.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-5ffe6dc );}.elementor-146 .elementor-element.elementor-element-8ca9b38.elementor-view-framed .elementor-icon, .elementor-146 .elementor-element.elementor-element-8ca9b38.elementor-view-default .elementor-icon{color:var( --e-global-color-5ffe6dc );border-color:var( --e-global-color-5ffe6dc );}.elementor-146 .elementor-element.elementor-element-8ca9b38.elementor-view-framed .elementor-icon, .elementor-146 .elementor-element.elementor-element-8ca9b38.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-5ffe6dc );}.elementor-146 .elementor-element.elementor-element-8ca9b38 .elementor-icon{font-size:30px;}.elementor-146 .elementor-element.elementor-element-8ca9b38 .elementor-icon svg{height:30px;}.elementor-146 .elementor-element.elementor-element-76b1fc5{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:100px 100px 100px 100px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-146 .elementor-element.elementor-element-76b1fc5:not(.elementor-motion-effects-element-type-background), .elementor-146 .elementor-element.elementor-element-76b1fc5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-146 .elementor-element.elementor-element-819403f{border-radius:0px 0px 0px 0px;}.elementor-146 .elementor-element.elementor-element-819403f .elementor-icon-wrapper{text-align:center;}.elementor-146 .elementor-element.elementor-element-819403f.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-5ffe6dc );}.elementor-146 .elementor-element.elementor-element-819403f.elementor-view-framed .elementor-icon, .elementor-146 .elementor-element.elementor-element-819403f.elementor-view-default .elementor-icon{color:var( --e-global-color-5ffe6dc );border-color:var( --e-global-color-5ffe6dc );}.elementor-146 .elementor-element.elementor-element-819403f.elementor-view-framed .elementor-icon, .elementor-146 .elementor-element.elementor-element-819403f.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-5ffe6dc );}.elementor-146 .elementor-element.elementor-element-819403f .elementor-icon{font-size:30px;}.elementor-146 .elementor-element.elementor-element-819403f .elementor-icon svg{height:30px;}.elementor-146 .elementor-element.elementor-element-4dcfb25{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:100px 100px 100px 100px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-146 .elementor-element.elementor-element-4dcfb25:not(.elementor-motion-effects-element-type-background), .elementor-146 .elementor-element.elementor-element-4dcfb25 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-146 .elementor-element.elementor-element-cba5a21{border-radius:0px 0px 0px 0px;}.elementor-146 .elementor-element.elementor-element-cba5a21 .elementor-icon-wrapper{text-align:center;}.elementor-146 .elementor-element.elementor-element-cba5a21.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-5ffe6dc );}.elementor-146 .elementor-element.elementor-element-cba5a21.elementor-view-framed .elementor-icon, .elementor-146 .elementor-element.elementor-element-cba5a21.elementor-view-default .elementor-icon{color:var( --e-global-color-5ffe6dc );border-color:var( --e-global-color-5ffe6dc );}.elementor-146 .elementor-element.elementor-element-cba5a21.elementor-view-framed .elementor-icon, .elementor-146 .elementor-element.elementor-element-cba5a21.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-5ffe6dc );}.elementor-146 .elementor-element.elementor-element-cba5a21 .elementor-icon{font-size:30px;}.elementor-146 .elementor-element.elementor-element-cba5a21 .elementor-icon svg{height:30px;}.elementor-146 .elementor-element.elementor-element-103aaca{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:100px 100px 100px 100px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-146 .elementor-element.elementor-element-103aaca:not(.elementor-motion-effects-element-type-background), .elementor-146 .elementor-element.elementor-element-103aaca > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-146 .elementor-element.elementor-element-470ef93{border-radius:0px 0px 0px 0px;}.elementor-146 .elementor-element.elementor-element-470ef93 .elementor-icon-wrapper{text-align:center;}.elementor-146 .elementor-element.elementor-element-470ef93.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-5ffe6dc );}.elementor-146 .elementor-element.elementor-element-470ef93.elementor-view-framed .elementor-icon, .elementor-146 .elementor-element.elementor-element-470ef93.elementor-view-default .elementor-icon{color:var( --e-global-color-5ffe6dc );border-color:var( --e-global-color-5ffe6dc );}.elementor-146 .elementor-element.elementor-element-470ef93.elementor-view-framed .elementor-icon, .elementor-146 .elementor-element.elementor-element-470ef93.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-5ffe6dc );}.elementor-146 .elementor-element.elementor-element-470ef93 .elementor-icon{font-size:30px;}.elementor-146 .elementor-element.elementor-element-470ef93 .elementor-icon svg{height:30px;}.elementor-146 .elementor-element.elementor-element-2a6a1d2{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-146 .elementor-element.elementor-element-ebf07ee .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:22px;font-weight:600;color:var( --e-global-color-27e836f );}.elementor-146 .elementor-element.elementor-element-5254331{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-146 .elementor-element.elementor-element-ed56233 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:600;color:var( --e-global-color-27e836f );}.elementor-146 .elementor-element.elementor-element-4a6d516 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:600;color:var( --e-global-color-27e836f );}.elementor-146 .elementor-element.elementor-element-d5ba060 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:600;color:var( --e-global-color-27e836f );}.elementor-146 .elementor-element.elementor-element-970b0b9 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:600;color:var( --e-global-color-27e836f );}.elementor-146 .elementor-element.elementor-element-4190678 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:600;color:var( --e-global-color-27e836f );}.elementor-146 .elementor-element.elementor-element-5626855{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-146 .elementor-element.elementor-element-7a1c68c .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:22px;font-weight:600;color:var( --e-global-color-27e836f );}.elementor-146 .elementor-element.elementor-element-d101bdc{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-146 .elementor-element.elementor-element-4d638f5 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:600;color:var( --e-global-color-27e836f );}.elementor-146 .elementor-element.elementor-element-2548bf7 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:600;color:var( --e-global-color-27e836f );}.elementor-146 .elementor-element.elementor-element-378c00b .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:600;color:var( --e-global-color-27e836f );}.elementor-146 .elementor-element.elementor-element-03352ce{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-146 .elementor-element.elementor-element-83dbc91 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:22px;font-weight:600;color:var( --e-global-color-27e836f );}.elementor-146 .elementor-element.elementor-element-2d26976{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-146 .elementor-element.elementor-element-b0671e2 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:14px;font-weight:600;color:var( --e-global-color-27e836f );}.elementor-146 .elementor-element.elementor-element-0a7e372 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:14px;font-weight:600;color:var( --e-global-color-27e836f );}.elementor-146 .elementor-element.elementor-element-6772e9b .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:14px;font-weight:600;color:var( --e-global-color-27e836f );}.elementor-146 .elementor-element.elementor-element-3f0f1aa .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:14px;font-weight:600;color:var( --e-global-color-27e836f );}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-146 .elementor-element.elementor-element-bc1bdae{--divider-border-style:solid;--divider-color:#FFFFFF;--divider-border-width:1px;}.elementor-146 .elementor-element.elementor-element-bc1bdae .elementor-divider-separator{width:80%;margin:0 auto;margin-center:0;}.elementor-146 .elementor-element.elementor-element-bc1bdae .elementor-divider{text-align:center;padding-block-start:15px;padding-block-end:15px;}.elementor-146 .elementor-element.elementor-element-c21edd0{text-align:center;color:#FFFFFF;}@media(max-width:576px){.elementor-146 .elementor-element.elementor-element-730da03{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-146 .elementor-element.elementor-element-9922c98{text-align:center;}.elementor-146 .elementor-element.elementor-element-dabe45c{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-146 .elementor-element.elementor-element-dabe45c.e-con{--align-self:center;}.elementor-146 .elementor-element.elementor-element-fc06888{--width:22%;}.elementor-146 .elementor-element.elementor-element-587f5fe{--width:22%;}.elementor-146 .elementor-element.elementor-element-76b1fc5{--width:22%;}.elementor-146 .elementor-element.elementor-element-4dcfb25{--width:22%;}.elementor-146 .elementor-element.elementor-element-103aaca{--width:22%;}.elementor-146 .elementor-element.elementor-element-2a6a1d2{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-146 .elementor-element.elementor-element-5254331{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-146 .elementor-element.elementor-element-5626855{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-146 .elementor-element.elementor-element-d101bdc{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-146 .elementor-element.elementor-element-03352ce{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-146 .elementor-element.elementor-element-2d26976{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-146 .elementor-element.elementor-element-3f0f1aa{text-align:center;}}@media(min-width:577px){.elementor-146 .elementor-element.elementor-element-f6af249{--width:100%;}.elementor-146 .elementor-element.elementor-element-730da03{--width:27%;}.elementor-146 .elementor-element.elementor-element-2a6a1d2{--width:15%;}.elementor-146 .elementor-element.elementor-element-5626855{--width:17%;}.elementor-146 .elementor-element.elementor-element-03352ce{--width:37%;}}/* Start custom CSS for container, class: .elementor-element-f6af249 */Glass UI
Sign up to Glass UI:
Email address
Glassmorphism CSS Generator
Get started with this free CSS generator based on the glassmorphism design specifications to quickly design and customize the style properties.

Design based on ui.glass and built by Flowbite.

ads via Carbon
Copy‑paste ready CSS & JavaScript patterns with accessibility baked in.
ads via Carbon
Background image URL
https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100
Background type
Image
Card color
Blur value

18px
Opacity

13%
Saturation

129%
Members card

Team members
See all
Chris Wood
Chris Wood
Online
Image placeholder
Jose Leos
Busy
Image placeholder
Jeny Green
Offline
Image placeholder
Neil Sims
Online

HTML
/* Background styles */
body {
    background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100');
    background-position: center;
}

/* Glassmorphism card effect */
.card {
    backdrop-filter: blur(18px) saturate(129%);
    -webkit-backdrop-filter: blur(18px) saturate(129%);
    background-color: rgba(255, 255, 255, 0.13);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

/* Generated by https://generator.ui.glass/ */
Found a bug or do you want to request a feature? Give us feedback!
FAQ about glassmorphism in UI interfaces and the generator
What is "Glassmorphism"?
Glassmorphism is a new design trend which is primarely based on the blurry effect of an element and a background. Although glassmorphism can be seen dated all the way back to Windows Vista, it has recently re-emerged with the macOS Big Sur update and it is increasinly being used across all platforms, including mobile apps, websites, and desktop programs.

How do you achieve the "blurry" effect?
The glassmorphism effect can be achieved using the backdrop-filter: blur(); CSS property and a semi-transparent background for the element that is positioned over the background.

Everything else, such as shadows, borders, border radiuses and colors can all be tweaked based on your own preferences and project specifications.

Another aspect to keep in mind is that the glassmorphism effect should not be overused, but rather be a complementary design effect for components that usually have a background that often changes, such as the navigation bar, a sidebar, and certain cards.

Read the following tutorial to learn more about glassmorphism.

How can I get the HTML code for the components?
This Glassmorphism UI generator is based on the upcoming Glass UI library which will be available to download or include via NPM. For the HTML components to work, you need will need to include the CSS and Javascript file from the library. The release is estimated to happen in July, 2021.

Feel free to sign up for Glass UI to get updates and find out when it will be launched.

Can I use the generated code for my project?
The glassmorphism generator is subject to the MIT license, which means that the code generated by this page is considered open-source and you're free to use it for free or commercial projects. We would appreciate a footer credits backlink, but it is not necessary.

Which brands are currently using glassmorphism?
Although not officially declared, glassmorphism is being used by big brands such as Apple, Microsoft, and even Google to some extent. Apple introduced the glassy background look with the launch of macOS Big Sur, Microsoft is using it with its new Fluent UI design system, and Google is increasingly starting to use transparency in their UI interfaces.

Check out this article to learn more about how glassmorphism is being used by well established companies.

What is the difference between glassmorphism and neumorphism?
The only real similarity between the two is that they are both design trends. Neumorphism UI uses a much more radical set of UI constraints to obtain the effect and it is quite a controversial design system as well.

Glassmorphism on the other hand can also be used sparcely and it is much more versatile and adaptable to different scenarios. With the launch of Glass UI we will try to deliver a set of UI elements that can be used in any project, regardless of the size or requirements.

What about browser support?
Although over 88% percent of browsers support the backdrop-filter CSS property, which is important to obtain the "glassy" look, unfortunately Firefox disabled this feature by default (although it can be enabled from the settings page).

Internet Explorer browsers also don't support this CSS property, however, support has been dropped for this browser and thankfully Microsoft Edge does support it. You can read more about browser support for glassmorphism here.

As a fallback for the Firefox browser issue, you can add a much smaller transparency to the card using the @-moz-document url-prefix() CSS rule.

How can I help?
The Glassmorphism CSS generator is a free tool that you can use to generate CSS and HTML components based on the Glass UI library. You can help us by sharing the project via Twitter, Facebook, YouTube or with your friends.

Sign up to Glass UI
A free and open-source CSS UI library based on the glassmorphism design specifications that will help you quickly design and build beautiful websites and applications.

Get notified when we launch
Your email address...
By subscribing, you agree with Revue’s Terms of Service and Privacy Policy.
Beats speakers
Beats Pill
Black Beats Pill + Portable Speaker
4.7
$299.00
$199.00
Chris Wood
Chadwick Harrison
Senior Designer
Articles
38
Followers
100k
Posts
1578
$19/ month
Faster sites deliver better business results for your clients.

Full Support No
Storage 50 GB
Monthly Visitors 400k
Global Budget
$25,370
18.2% higher vs previous month
Glass UI
Glass UI is a free and open-source CSS library based on the glassmorphism design specifications.

Resources
Glassmorphism
Themesberg
Flowbite
Knowledge center
Help and support
Tutorial
Contact us
Custom development
Follow us
Twitter
Github
Facebook
LinkedIn
Legal
Terms and conditions
Privacy policy
EULA
© 2019-2025 Themesberg. All Rights Reserved.
Glass UI Generator - CSS generator for glassmorphism | Product Hunt/* End custom CSS */