.elementor-64 .elementor-element.elementor-element-16330aa{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-64 .elementor-element.elementor-element-2a99da7{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );font-style:var( --e-global-typography-primary-font-style );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-64 .elementor-element.elementor-element-a976756{padding:50px 0px 0px 0px;text-align:center;}.elementor-64 .elementor-element.elementor-element-a976756 .elementor-heading-title{font-family:"Comfortaa", Sans-serif;font-size:40px;font-weight:100;text-transform:capitalize;font-style:normal;line-height:58px;letter-spacing:1px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );line-height:var( --e-global-typography-text-line-height );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-64 .elementor-element.elementor-element-d979907{padding:20px 0px 20px 0px;}.elementor-64 .elementor-element.elementor-element-7f589c8{padding:20px 0px 20px 0px;}.elementor-64 .elementor-element.elementor-element-32c3f10{--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 0px;--row-gap:0px;--column-gap:0px;}.elementor-64 .elementor-element.elementor-element-74104b8{--display:flex;}.elementor-64 .elementor-element.elementor-element-74104b8.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );line-height:var( --e-global-typography-text-line-height );}.elementor-64 .elementor-element.elementor-element-645d820{z-index:2;}.elementor-64 .elementor-element.elementor-element-645d820 img{width:200px;border-radius:0px 0px 0px 0px;}.elementor-64 .elementor-element.elementor-element-eb0371e{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;bottom:146px;z-index:5;}body:not(.rtl) .elementor-64 .elementor-element.elementor-element-eb0371e{right:431.4px;}body.rtl .elementor-64 .elementor-element.elementor-element-eb0371e{left:431.4px;}.elementor-64 .elementor-element.elementor-element-eb0371e img{max-width:56%;border-radius:10px 10px 10px 10px;}.elementor-64 .elementor-element.elementor-element-92322d9{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-64 .elementor-element.elementor-element-aae506f{text-align:center;}.elementor-64 .elementor-element.elementor-element-aae506f .elementor-heading-title{font-family:"Comfortaa", Sans-serif;font-size:25px;font-weight:100;text-transform:capitalize;font-style:normal;line-height:58px;letter-spacing:1px;}.elementor-64 .elementor-element.elementor-element-026c369{--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;--justify-content:space-around;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );font-style:var( --e-global-typography-accent-font-style );line-height:var( --e-global-typography-accent-line-height );}.elementor-64 .elementor-element.elementor-element-31b0d4e .elementor-button{background-color:var( --e-global-color-629997c );font-family:"Comfortaa", Sans-serif;font-size:13px;font-weight:normal;text-transform:capitalize;font-style:normal;line-height:24px;fill:var( --e-global-color-text );color:var( --e-global-color-text );border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-accent );border-radius:100px 100px 100px 100px;}.elementor-64 .elementor-element.elementor-element-31b0d4e .elementor-button:hover, .elementor-64 .elementor-element.elementor-element-31b0d4e .elementor-button:focus{background-color:var( --e-global-color-accent );}.elementor-64 .elementor-element.elementor-element-31b0d4e{width:auto;max-width:auto;margin:0px 10px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-64 .elementor-element.elementor-element-31b0d4e.elementor-element{--align-self:center;}.elementor-64 .elementor-element.elementor-element-31b0d4e .elementor-button-content-wrapper{flex-direction:row;}.elementor-64 .elementor-element.elementor-element-31b0d4e .elementor-button .elementor-button-content-wrapper{gap:7px;}.elementor-64 .elementor-element.elementor-element-8fa4086 .elementor-button{background-color:var( --e-global-color-629997c );font-family:"Comfortaa", Sans-serif;font-size:13px;font-weight:normal;text-transform:capitalize;font-style:normal;line-height:24px;fill:var( --e-global-color-text );color:var( --e-global-color-text );border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-accent );border-radius:100px 100px 100px 100px;}.elementor-64 .elementor-element.elementor-element-8fa4086 .elementor-button:hover, .elementor-64 .elementor-element.elementor-element-8fa4086 .elementor-button:focus{background-color:var( --e-global-color-accent );}.elementor-64 .elementor-element.elementor-element-8fa4086{width:auto;max-width:auto;margin:0px 10px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-64 .elementor-element.elementor-element-8fa4086.elementor-element{--align-self:center;}.elementor-64 .elementor-element.elementor-element-8fa4086 .elementor-button-content-wrapper{flex-direction:row;}.elementor-64 .elementor-element.elementor-element-8fa4086 .elementor-button .elementor-button-content-wrapper{gap:7px;}.elementor-64 .elementor-element.elementor-element-e75399d .elementor-button{background-color:var( --e-global-color-629997c );font-family:"Comfortaa", Sans-serif;font-size:13px;font-weight:normal;text-transform:capitalize;font-style:normal;line-height:24px;fill:var( --e-global-color-text );color:var( --e-global-color-text );border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-accent );border-radius:100px 100px 100px 100px;}.elementor-64 .elementor-element.elementor-element-e75399d .elementor-button:hover, .elementor-64 .elementor-element.elementor-element-e75399d .elementor-button:focus{background-color:var( --e-global-color-accent );}.elementor-64 .elementor-element.elementor-element-e75399d{width:auto;max-width:auto;margin:0px 10px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-64 .elementor-element.elementor-element-e75399d.elementor-element{--align-self:center;}.elementor-64 .elementor-element.elementor-element-e75399d .elementor-button-content-wrapper{flex-direction:row;}.elementor-64 .elementor-element.elementor-element-e75399d .elementor-button .elementor-button-content-wrapper{gap:7px;}.elementor-64 .elementor-element.elementor-element-791589d{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.69;--padding-top:50px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-64 .elementor-element.elementor-element-791589d::before, .elementor-64 .elementor-element.elementor-element-791589d > .elementor-background-video-container::before, .elementor-64 .elementor-element.elementor-element-791589d > .e-con-inner > .elementor-background-video-container::before, .elementor-64 .elementor-element.elementor-element-791589d > .elementor-background-slideshow::before, .elementor-64 .elementor-element.elementor-element-791589d > .e-con-inner > .elementor-background-slideshow::before, .elementor-64 .elementor-element.elementor-element-791589d > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-64 .elementor-element.elementor-element-853887e{text-align:center;}.elementor-64 .elementor-element.elementor-element-f08ea31{padding:10px 0px 0px 0px;}.elementor-64 .elementor-element.elementor-element-f08ea31 img{width:30%;}.elementor-64 .elementor-element.elementor-element-4d83138{--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;--overlay-opacity:0.5;}.elementor-64 .elementor-element.elementor-element-4d83138::before, .elementor-64 .elementor-element.elementor-element-4d83138 > .elementor-background-video-container::before, .elementor-64 .elementor-element.elementor-element-4d83138 > .e-con-inner > .elementor-background-video-container::before, .elementor-64 .elementor-element.elementor-element-4d83138 > .elementor-background-slideshow::before, .elementor-64 .elementor-element.elementor-element-4d83138 > .e-con-inner > .elementor-background-slideshow::before, .elementor-64 .elementor-element.elementor-element-4d83138 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-64 .elementor-element.elementor-element-ff11934{width:var( --container-widget-width, 32.292% );max-width:32.292%;--container-widget-width:32.292%;--container-widget-flex-grow:0;--e-icon-list-icon-size:19px;--e-icon-list-icon-align:center;--e-icon-list-icon-margin:0 calc(var(--e-icon-list-icon-size, 1em) * 0.125);--icon-vertical-offset:0px;}.elementor-64 .elementor-element.elementor-element-ff11934.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-64 .elementor-element.elementor-element-ff11934 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(5px/2);}.elementor-64 .elementor-element.elementor-element-ff11934 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(5px/2);}.elementor-64 .elementor-element.elementor-element-ff11934 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(5px/2);}.elementor-64 .elementor-element.elementor-element-ff11934 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-5px/2);}.elementor-64 .elementor-element.elementor-element-ff11934 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-5px/2);}.elementor-64 .elementor-element.elementor-element-ff11934 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-64 .elementor-element.elementor-element-ff11934 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-64 .elementor-element.elementor-element-ff11934 .elementor-icon-list-text{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-64 .elementor-element.elementor-element-34887ba{--display:flex;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-64 .elementor-element.elementor-element-964d3d4{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-64 .elementor-element.elementor-element-1af6e8f{--display:flex;--min-height:183px;--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-64 .elementor-element.elementor-element-1af6e8f:not(.elementor-motion-effects-element-type-background), .elementor-64 .elementor-element.elementor-element-1af6e8f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://wildonecyprus.com/wp-content/uploads/2023/10/lemon-tree-2.svg");background-position:top right;background-repeat:no-repeat;background-size:contain;}.elementor-64 .elementor-element.elementor-element-981dce1{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-64 .elementor-element.elementor-element-c5bfd15{--display:flex;--min-height:183px;--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-64 .elementor-element.elementor-element-c5bfd15:not(.elementor-motion-effects-element-type-background), .elementor-64 .elementor-element.elementor-element-c5bfd15 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://wildonecyprus.com/wp-content/uploads/2023/11/Onopordum-cyprium.svg");background-position:bottom right;background-repeat:no-repeat;background-size:contain;}.elementor-64 .elementor-element.elementor-element-c5bfd15::before, .elementor-64 .elementor-element.elementor-element-c5bfd15 > .elementor-background-video-container::before, .elementor-64 .elementor-element.elementor-element-c5bfd15 > .e-con-inner > .elementor-background-video-container::before, .elementor-64 .elementor-element.elementor-element-c5bfd15 > .elementor-background-slideshow::before, .elementor-64 .elementor-element.elementor-element-c5bfd15 > .e-con-inner > .elementor-background-slideshow::before, .elementor-64 .elementor-element.elementor-element-c5bfd15 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://wildonecyprus.com/wp-content/uploads/2023/10/Cynara-makrisii-leaf-morphology.svg");--background-overlay:'';background-repeat:no-repeat;background-size:contain;}.elementor-64 .elementor-element.elementor-element-7e22ec5{--display:flex;}.elementor-64 .elementor-element.elementor-element-5ef6eab{--display:flex;--min-height:183px;--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-64 .elementor-element.elementor-element-41bd796{--display:flex;}.elementor-64 .elementor-element.elementor-element-62118be{--display:flex;--min-height:183px;--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.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-64 .elementor-element.elementor-element-c5442e0 .elementor-icon-wrapper{text-align:center;}.elementor-64 .elementor-element.elementor-element-146f6e3{--display:flex;}.elementor-64 .elementor-element.elementor-element-f41c380{--display:flex;--min-height:183px;--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-64 .elementor-element.elementor-element-0ebf694 .elementor-icon-wrapper{text-align:center;}.elementor-64 .elementor-element.elementor-element-de8caf3{--display:flex;}.elementor-64 .elementor-element.elementor-element-efef85f{--display:flex;--min-height:183px;--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-64 .elementor-element.elementor-element-efef85f:not(.elementor-motion-effects-element-type-background), .elementor-64 .elementor-element.elementor-element-efef85f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://wildonecyprus.com/wp-content/uploads/2023/07/Falcate.svg");background-position:top right;background-repeat:no-repeat;background-size:contain;}.elementor-64 .elementor-element.elementor-element-cdd2702{--display:flex;}.elementor-64 .elementor-element.elementor-element-72f92cd{--display:flex;--min-height:183px;--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-64 .elementor-element.elementor-element-7cfcd69{--e-n-carousel-swiper-slides-to-display:3;--e-n-carousel-swiper-slides-gap:20px;padding:0px 0px 0px 0px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;--e-n-carousel-arrow-normal-color:var( --e-global-color-primary );--e-n-carousel-swiper-pagination-size:9px;--e-n-carousel-dots-normal-color:var( --e-global-color-primary );--e-n-carousel-dots-hover-color:var( --e-global-color-accent );--e-n-carousel-swiper-pagination-spacing:15px;}:where( .elementor-64 .elementor-element.elementor-element-7cfcd69 .swiper-slide ) > .e-con{--border-radius:10px 10px 10px 10px;--padding-top:10px;--padding-right:10px;--padding-bottom:10px;--padding-left:10px;}:where( [data-core-v316-plus="true"] .elementor-element.elementor-widget-n-carousel .swiper-slide ) > .e-con{--padding-block-start:10px;--padding-inline-end:10px;--padding-block-end:10px;--padding-inline-start:10px;}.elementor-64 .elementor-element.elementor-element-7cfcd69 :is(.elementor-swiper-button-prev, .elementor-swiper-button-next) {padding:0px 0px 0px 0px;}.elementor-64 .elementor-element.elementor-element-56255b0{--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:30px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-64 .elementor-element.elementor-element-4881928{width:auto;max-width:auto;padding:0px 0px 0px 10px;text-align:center;}.elementor-64 .elementor-element.elementor-element-4881928 .elementor-heading-title{font-family:"Comfortaa", Sans-serif;font-size:40px;font-weight:100;text-transform:none;font-style:normal;line-height:58px;letter-spacing:1px;color:var( --e-global-color-706ed4c );}.elementor-64 .elementor-element.elementor-element-61df098{--swiper-slides-to-display:5;--swiper-offset-size:10px;--swiper-slides-gap:10px;--arrow-prev-left-align:0%;--arrow-prev-translate-x:0px;--arrow-prev-left-position:0px;--arrow-prev-top-align:50%;--arrow-prev-translate-y:-50%;--arrow-prev-top-position:0px;--arrow-next-right-align:0%;--arrow-next-translate-x:0%;--arrow-next-right-position:0px;--arrow-next-top-align:50%;--arrow-next-translate-y:-50%;--arrow-next-top-position:0px;--arrow-normal-color:var( --e-global-color-primary );--dots-normal-color:var( --e-global-color-primary );}.elementor-64 .elementor-element.elementor-element-61df098 .swiper-slide > .elementor-element{height:100%;}.elementor-64 .elementor-element.elementor-element-7d5afd1{--display:flex;--padding-top:50px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-64 .elementor-element.elementor-element-64fc30c{--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 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-64 .elementor-element.elementor-element-4c40650{--display:flex;}.elementor-64 .elementor-element.elementor-element-4c40650.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-64 .elementor-element.elementor-element-642e06b .elementor-heading-title{font-family:"Comfortaa", Sans-serif;font-size:35px;font-weight:100;text-transform:capitalize;font-style:normal;line-height:1.5em;letter-spacing:1px;}.elementor-64 .elementor-element.elementor-element-edcab08{--display:flex;}.elementor-64 .elementor-element.elementor-element-c7b74ff .elementor-heading-title{font-family:"Comfortaa", Sans-serif;font-size:35px;font-weight:100;text-transform:capitalize;font-style:normal;line-height:1.5em;letter-spacing:1px;}.elementor-64 .elementor-element.elementor-element-1697175{--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 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-64 .elementor-element.elementor-element-f98bd19{--display:flex;}.elementor-64 .elementor-element.elementor-element-fb5fcc2 .elementor-heading-title{font-family:"Comfortaa", Sans-serif;font-size:35px;font-weight:100;text-transform:capitalize;font-style:normal;line-height:1.5em;letter-spacing:1px;}.elementor-64 .elementor-element.elementor-element-ba8e47f{--display:flex;}.elementor-64 .elementor-element.elementor-element-4175b48 .elementor-heading-title{font-family:"Comfortaa", Sans-serif;font-size:35px;font-weight:100;text-transform:capitalize;font-style:normal;line-height:1.5em;letter-spacing:1px;}.elementor-64 .elementor-element.elementor-element-6269620{--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:50px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-64 .elementor-element.elementor-element-eb44e12{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-animated-headline .elementor-headline-plain-text{color:var( --e-global-color-secondary );}.elementor-widget-animated-headline .elementor-headline{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );font-style:var( --e-global-typography-primary-font-style );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-animated-headline{--dynamic-text-color:var( --e-global-color-secondary );}.elementor-widget-animated-headline .elementor-headline-dynamic-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );font-style:var( --e-global-typography-primary-font-style );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-animated-headline .elementor-headline-dynamic-wrapper path{stroke:var( --e-global-color-accent );}.elementor-64 .elementor-element.elementor-element-afca7c4{--iteration-count:infinite;--dynamic-text-color:var( --e-global-color-primary );}.elementor-64 .elementor-element.elementor-element-afca7c4 .elementor-headline{text-align:center;font-family:"Comfortaa", Sans-serif;font-size:40px;font-weight:100;font-style:normal;line-height:58px;letter-spacing:1px;}.elementor-64 .elementor-element.elementor-element-afca7c4 .elementor-headline-plain-text{color:var( --e-global-color-primary );}.elementor-64 .elementor-element.elementor-element-afca7c4 .elementor-headline-dynamic-text{font-family:"Comfortaa", Sans-serif;font-weight:100;text-transform:none;font-style:normal;line-height:58px;letter-spacing:1px;}.elementor-64 .elementor-element.elementor-element-85b07b4{--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 0px;--row-gap:0px;--column-gap:0px;}.elementor-64 .elementor-element.elementor-element-ee15d67{--display:flex;}.elementor-64 .elementor-element.elementor-element-8502858 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-64 .elementor-element.elementor-element-8502858 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-64 .elementor-element.elementor-element-8502858 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-64 .elementor-element.elementor-element-8502858 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-64 .elementor-element.elementor-element-8502858 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-64 .elementor-element.elementor-element-8502858 .elementor-icon-list-icon i{color:var( --e-global-color-accent );transition:color 0.3s;}.elementor-64 .elementor-element.elementor-element-8502858 .elementor-icon-list-icon svg{fill:var( --e-global-color-accent );transition:fill 0.3s;}.elementor-64 .elementor-element.elementor-element-8502858{--e-icon-list-icon-size:35px;--e-icon-list-icon-align:center;--e-icon-list-icon-margin:0 calc(var(--e-icon-list-icon-size, 1em) * 0.125);--icon-vertical-offset:0px;}.elementor-64 .elementor-element.elementor-element-8502858 .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-64 .elementor-element.elementor-element-8502858 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-64 .elementor-element.elementor-element-8502858 .elementor-icon-list-item > a{font-family:"Comfortaa", Sans-serif;font-size:14px;font-weight:normal;text-transform:none;font-style:normal;line-height:18px;}.elementor-64 .elementor-element.elementor-element-8502858 .elementor-icon-list-text{color:var( --e-global-color-primary );transition:color 0.3s;}.elementor-64 .elementor-element.elementor-element-c5bc08e .elementor-heading-title{font-family:"Comfortaa", Sans-serif;font-size:25px;font-weight:100;text-transform:lowercase;font-style:normal;line-height:58px;letter-spacing:1px;}.elementor-64 .elementor-element.elementor-element-8294bc6{--display:flex;}.elementor-64 .elementor-element.elementor-element-f77ccc7{--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:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-64 .elementor-element.elementor-element-02f625c{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-64 .elementor-element.elementor-element-8775230{text-align:center;}.elementor-64 .elementor-element.elementor-element-7c3c272{--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:20px 20px;--row-gap:20px;--column-gap:20px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-64 .elementor-element.elementor-element-16330aa{--content-width:830px;}.elementor-64 .elementor-element.elementor-element-74104b8{--width:44.902%;}.elementor-64 .elementor-element.elementor-element-92322d9{--content-width:100%;}.elementor-64 .elementor-element.elementor-element-791589d{--content-width:830px;}.elementor-64 .elementor-element.elementor-element-4d83138{--width:100%;}.elementor-64 .elementor-element.elementor-element-7d5afd1{--content-width:830px;}.elementor-64 .elementor-element.elementor-element-4c40650{--width:50%;}.elementor-64 .elementor-element.elementor-element-6269620{--content-width:830px;}.elementor-64 .elementor-element.elementor-element-eb44e12{--width:100%;}.elementor-64 .elementor-element.elementor-element-f77ccc7{--content-width:830px;}.elementor-64 .elementor-element.elementor-element-02f625c{--width:100%;}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-64 .elementor-element.elementor-element-a976756 .elementor-heading-title{font-size:40px;line-height:1.5em;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-64 .elementor-element.elementor-element-645d820{margin:100px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-64 .elementor-element.elementor-element-645d820 img{width:338px;}body:not(.rtl) .elementor-64 .elementor-element.elementor-element-eb0371e{right:70.4px;}body.rtl .elementor-64 .elementor-element.elementor-element-eb0371e{left:70.4px;}.elementor-64 .elementor-element.elementor-element-eb0371e{bottom:151px;}.elementor-64 .elementor-element.elementor-element-aae506f .elementor-heading-title{font-size:50px;}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-64 .elementor-element.elementor-element-31b0d4e .elementor-button{font-size:11px;}.elementor-64 .elementor-element.elementor-element-8fa4086 .elementor-button{font-size:11px;}.elementor-64 .elementor-element.elementor-element-e75399d .elementor-button{font-size:11px;}.elementor-64 .elementor-element.elementor-element-f08ea31{padding:10px 0px 0px 0px;}.elementor-64 .elementor-element.elementor-element-f08ea31 img{width:45%;}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-64 .elementor-element.elementor-element-7cfcd69{--e-n-carousel-swiper-slides-to-display:2;}.elementor-64 .elementor-element.elementor-element-4881928{padding:0px 0px 0px 10px;}.elementor-64 .elementor-element.elementor-element-4881928 .elementor-heading-title{font-size:30px;}.elementor-64 .elementor-element.elementor-element-61df098{--swiper-slides-to-display:3;}.elementor-64 .elementor-element.elementor-element-7d5afd1{--padding-top:50px;--padding-bottom:100px;--padding-left:10px;--padding-right:10px;}.elementor-64 .elementor-element.elementor-element-642e06b .elementor-heading-title{font-size:35px;line-height:1.5em;}.elementor-64 .elementor-element.elementor-element-c7b74ff .elementor-heading-title{font-size:35px;line-height:1.5em;}.elementor-64 .elementor-element.elementor-element-fb5fcc2 .elementor-heading-title{font-size:35px;line-height:1.5em;}.elementor-64 .elementor-element.elementor-element-4175b48 .elementor-heading-title{font-size:35px;line-height:1.5em;}.elementor-widget-animated-headline .elementor-headline{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-animated-headline .elementor-headline-dynamic-text{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-64 .elementor-element.elementor-element-afca7c4 .elementor-headline{font-size:50px;}.elementor-64 .elementor-element.elementor-element-c5bc08e .elementor-heading-title{font-size:50px;}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-64 .elementor-element.elementor-element-a976756 .elementor-heading-title{font-size:30px;line-height:1.2em;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-64 .elementor-element.elementor-element-645d820{margin:35px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-64 .elementor-element.elementor-element-645d820 img{width:80%;}body:not(.rtl) .elementor-64 .elementor-element.elementor-element-eb0371e{right:23px;}body.rtl .elementor-64 .elementor-element.elementor-element-eb0371e{left:23px;}.elementor-64 .elementor-element.elementor-element-eb0371e{bottom:770px;}.elementor-64 .elementor-element.elementor-element-eb0371e img{width:100px;}.elementor-64 .elementor-element.elementor-element-aae506f .elementor-heading-title{font-size:30px;line-height:1.2em;}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-64 .elementor-element.elementor-element-31b0d4e{margin:0px 5px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-64 .elementor-element.elementor-element-31b0d4e .elementor-button{font-size:17px;padding:8px 12px 8px 12px;}.elementor-64 .elementor-element.elementor-element-8fa4086{margin:0px 5px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-64 .elementor-element.elementor-element-8fa4086 .elementor-button{font-size:17px;padding:8px 12px 8px 12px;}.elementor-64 .elementor-element.elementor-element-e75399d{margin:0px 5px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-64 .elementor-element.elementor-element-e75399d .elementor-button{font-size:17px;padding:8px 12px 8px 12px;}.elementor-64 .elementor-element.elementor-element-f08ea31{padding:5px 0px 0px 0px;}.elementor-64 .elementor-element.elementor-element-f08ea31 img{width:50%;}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-64 .elementor-element.elementor-element-ff11934{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-64 .elementor-element.elementor-element-7cfcd69{--e-n-carousel-swiper-slides-to-display:1;}.elementor-64 .elementor-element.elementor-element-4881928{padding:0px 0px 0px 6px;}.elementor-64 .elementor-element.elementor-element-4881928 .elementor-heading-title{font-size:20px;line-height:1.2em;}.elementor-64 .elementor-element.elementor-element-61df098{--swiper-slides-to-display:1;}.elementor-64 .elementor-element.elementor-element-7d5afd1{--padding-top:50px;--padding-bottom:100px;--padding-left:10px;--padding-right:10px;}.elementor-64 .elementor-element.elementor-element-642e06b .elementor-heading-title{font-size:30px;line-height:1.2em;}.elementor-64 .elementor-element.elementor-element-c7b74ff .elementor-heading-title{font-size:30px;line-height:1.2em;}.elementor-64 .elementor-element.elementor-element-fb5fcc2 .elementor-heading-title{font-size:30px;line-height:1.2em;}.elementor-64 .elementor-element.elementor-element-4175b48 .elementor-heading-title{font-size:30px;line-height:1.2em;}.elementor-widget-animated-headline .elementor-headline{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-animated-headline .elementor-headline-dynamic-text{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-64 .elementor-element.elementor-element-afca7c4 .elementor-headline{font-size:30px;line-height:1.2em;}.elementor-64 .elementor-element.elementor-element-afca7c4 .elementor-headline-dynamic-text{line-height:1.2em;}.elementor-64 .elementor-element.elementor-element-c5bc08e .elementor-heading-title{font-size:30px;line-height:1.2em;}}/* Start custom CSS for container, class: .elementor-element-791589d */.elementor-64 .elementor-element.elementor-element-791589d {background-image: linear-gradient(7deg, #376585, #55a3c1, #74b4c9, #84bbcd, #74b4c9, #55a3c1, #2e566e); background-attachment: fixed;}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-424e1b5 */#plate {
  width: 15vmin;
  height: 15vmin;
  border-radius: 49%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  position: relative;
  box-shadow: -2vmin 2vmin 5vmin 2vmin rgba(0, 0, 0, 0.2), inset 0 0 0 0.2vmin #cccccc, inset 0 0 0 0.5vmin #fafafa, inset 0 0 10vmin 0.1vmin rgba(0, 0, 0, 0.2);
}

#handle {
  width: 10%;
  height: 30%;
  background-color: #fff;
  position: absolute;
  left: 71%;
  transform: rotate(-43deg);
  top: 65%;
  border-radius: 1vmin;
  box-shadow: -2vmin -1vmin 2vmin 0vmin rgba(37, 37, 37, 0.1), 0vmin 0vmin 0vmin 0.1vmin rgba(102, 102, 102, 0.1), inset -1vmin 0 2vmin 0.1vmin #ffffff, inset 0 0 0.5vmin 0.5vmin #bbbbbb, inset 0 0 10vmin 0.1vmin rgba(195, 195, 195, 0.2);
}

#cup {
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: -2vmin 2vmin 5vmin -2vmin rgba(0, 0, 0, 0.5), inset 0 0 0.5vmin 0.2vmin #cccccc, inset 0 0 0 1vmin #fafafa;
  z-index: 1;
}

#coffeBg {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #35210d 0%, #231105 100%);
  overflow: hidden;
}

#cupInner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 0.3vmin 0 #000, 0 0 0.5vmin 2.5vmin #dedede, inset 0 0 0.4vmin 0.1vmin rgba(0, 0, 0, 0.5);
  background-color: transparent;
  z-index: 1;
}

#foamWrapper {
  filter: url("#goo") drop-shadow(0px 0px 3px #b37a3c);
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.foam {
  background-color: #f8c99d;
  width: 10%;
  height: 40%;
  border-radius: 50%;
  position: absolute;
  left: -3%;
  transform: rotate(21deg);
  top: 22%;
  filter: url("#scatter");
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foam2 {
  top: -7%;
  left: 14%;
  transform: rotate(53deg);
  width: 6%;
}

#foam3 {
  top: -21%;
  left: 43%;
  transform: rotate(75deg);
}

#foam4 {
  top: -20%;
  left: 46%;
  transform: rotate(105deg);
}

#foam5 {
  top: -9%;
  left: 70%;
  transform: rotate(122deg);
  height: 30%;
}

#foam6 {
  top: 8%;
  left: 98%;
  transform: rotate(152deg);
  height: 60%;
  width: 5%;
}

#foam7 {
  top: 20%;
  left: 97%;
  transform: rotate(181deg);
  height: 60%;
  width: 5%;
}

#foam8 {
  top: 51%;
  left: 96%;
  transform: rotate(211deg);
  height: 40%;
  width: 5%;
}

#foam9 {
  top: 62%;
  left: 70%;
  transform: rotate(224deg);
  height: 80%;
  width: 5%;
}

#foam10 {
  top: 72%;
  left: 62%;
  transform: rotate(74deg);
  height: 50%;
  width: 5%;
}

#foam11 {
  top: 59%;
  left: 51%;
  transform: rotate(104deg);
  height: 80%;
  width: 4%;
}

#foam12 {
  top: 44%;
  left: 9%;
  transform: rotate(124deg);
  height: 80%;
  width: 4%;
}

#foam13 {
  top: 7%;
  left: -6%;
  transform: rotate(-26deg);
  height: 80%;
  width: 4%;
}

@keyframes foamMiddleAnimation {
  0% {
    transform: translate(0%, 0%);
  }
  10% {
    transform: translate(0%, 0%);
  }
  50% {
    transform: translate(45%, 20%);
  }
  90% {
    transform: translate(45%, 20%);
  }
  100% {
    transform: translate(45%, 20%);
  }
}
#foamMiddleWrapper {
  animation-name: foamMiddleAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #foamMiddleWrapper {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes foamMiddleContainerAnimation {
  0% {
    transform: rotate(0);
  }
  55% {
    transform: rotate(30deg);
  }
  90% {
    transform: rotate(30deg);
  }
  100% {
    opacity: 0;
  }
}
#foamMiddleContainer {
  animation-name: foamMiddleContainerAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #foamMiddleContainer {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

.foamMiddle {
  background-color: #f8c99d;
  width: 13%;
  height: 18%;
  border-radius: 50%;
  position: absolute;
  left: 40%;
  transform: rotate(21deg);
  top: 40%;
  filter: url(#scatter);
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foamMiddle2 {
  transform: rotate(-49deg);
  width: 10%;
  left: 47%;
}

@keyframes bubbleMiddle1Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  35% {
    transform: scale(1) translate(60%, 40%);
  }
  45% {
    transform: scale(0) translate(60%, 40%);
  }
  100% {
    transform: scale(0) translate(60%, 40%);
  }
}
#bubbleMiddle1 {
  left: 50%;
  top: 48%;
  width: 7%;
  height: 7%;
  animation-name: bubbleMiddle1Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle1 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes bubbleMiddle2Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  39% {
    transform: scale(1) translate(10%, 10%);
  }
  49% {
    transform: scale(0) translate(10%, 10%);
  }
  100% {
    transform: scale(0) translate(10%, 10%);
  }
}
#bubbleMiddle2 {
  left: 44%;
  top: 40%;
  width: 6%;
  height: 7%;
  transform: rotate(50deg);
  animation-name: bubbleMiddle2Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle2 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes bubbleMiddle3Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  45% {
    transform: scale(1) translate(0%, 0%);
  }
  55% {
    transform: scale(0) translate(0%, 0%);
  }
  100% {
    transform: scale(0) translate(50%, -40%);
  }
}
#bubbleMiddle3 {
  left: 41%;
  top: 49%;
  width: 7%;
  height: 8%;
  transform: rotate(36deg);
  animation-name: bubbleMiddle3Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle3 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
    }
  }
}

#bubbleMiddle4 {
  left: 51%;
  top: 45%;
  width: 2%;
  height: 2%;
  transform: rotate(36deg);
}

.bubble {
  width: 5%;
  height: 7%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 40%;
  left: 2%;
  box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}
.bubble:after {
  display: block;
  content: "";
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 23%;
  top: 12%;
  transform: rotate(-20deg);
  box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
}

#bubble2 {
  left: 5%;
  top: 30%;
  transform: rotate(25deg);
}

#bubble3 {
  left: 8%;
  top: 23%;
  transform: rotate(39deg);
  width: 3%;
  height: 5%;
}

#bubble4 {
  left: 94%;
  top: 43%;
  transform: rotate(-10deg);
  width: 5%;
  height: 7%;
}

#bubble5 {
  left: 95%;
  top: 37%;
  transform: rotate(-17deg);
  width: 3%;
  height: 4%;
}

#bubble6 {
  left: 39%;
  top: 0%;
  transform: rotate(76deg);
  width: 6%;
  height: 9%;
}

#bubble7 {
  left: 60%;
  top: 1%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble8 {
  left: 35%;
  top: 91%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble9 {
  left: 4%;
  top: 63%;
  transform: rotate(-23deg);
  width: 5%;
  height: 7%;
}

#bubble10 {
  left: 2%;
  top: 58%;
  transform: rotate(-18deg);
  width: 3%;
  height: 4%;
}

#bubble11 {
  left: 63%;
  top: 91%;
  transform: rotate(72deg);
  width: 4%;
  height: 6%;
}

#bubble12 {
  left: 31%;
  top: 3%;
  transform: rotate(68deg);
  width: 4%;
  height: 6%;
}

#bubble13 {
  left: 21%;
  top: 85%;
  transform: rotate(118deg);
  width: 4%;
  height: 6%;
}

#bubble14 {
  left: 95%;
  top: 53%;
  transform: rotate(373deg);
  width: 4%;
  height: 6%;
}

#bubble15 {
  left: 50%;
  top: 0%;
  transform: rotate(96deg);
  width: 3%;
  height: 5%;
}

.bubbleSmall {
  width: 1%;
  height: 2%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 48%;
  left: 1%;
  box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}
.bubbleSmall:after {
  display: block;
  content: "";
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 23%;
  top: 12%;
  transform: rotate(-20deg);
  box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
  opacity: 0.8;
}

#bubbleSmall2 {
  left: 3%;
  top: 37%;
  height: 1%;
}

#bubbleSmall3 {
  left: 6%;
  top: 28%;
  height: 1%;
}

#bubbleSmall4 {
  left: 96%;
  top: 35%;
  height: 1%;
}

#bubbleSmall5 {
  left: 60%;
  top: 96%;
  height: 1%;
}

#bubbleSmall6 {
  left: 8%;
  top: 72%;
  height: 1%;
}

#innerShadow {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 100%);
}

#glow {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.26) 90%, rgba(255, 255, 255, 0.9) 100%);
  position: absolute;
  z-index: 10;
}

@keyframes steamAnimation {
  0% {
    transform: translate(30%, -70%);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: translate(60%, -90%);
    opacity: 0;
  }
}
#steamWrapper {
  width: 50%;
  height: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

#steam {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: -156px 492px 123px -252px #fff;
  filter: url(#fog);
  min-width: 600px;
  min-height: 600px;
  animation-name: steamAnimation;
  animation-duration: 4s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
}
@media (max-width: 600px) {
  #steam {
    top: -80%;
    box-shadow: -156px 492px 123px -252px #fff;
  }
}
@media (max-width: 480px) {
  #steam {
    top: -160%;
    box-shadow: -166px 492px 53px -272px #fff;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-424e1b5 */#plate {
  width: 15vmin;
  height: 15vmin;
  border-radius: 49%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  position: relative;
  box-shadow: -2vmin 2vmin 5vmin 2vmin rgba(0, 0, 0, 0.2), inset 0 0 0 0.2vmin #cccccc, inset 0 0 0 0.5vmin #fafafa, inset 0 0 10vmin 0.1vmin rgba(0, 0, 0, 0.2);
}

#handle {
  width: 10%;
  height: 30%;
  background-color: #fff;
  position: absolute;
  left: 71%;
  transform: rotate(-43deg);
  top: 65%;
  border-radius: 1vmin;
  box-shadow: -2vmin -1vmin 2vmin 0vmin rgba(37, 37, 37, 0.1), 0vmin 0vmin 0vmin 0.1vmin rgba(102, 102, 102, 0.1), inset -1vmin 0 2vmin 0.1vmin #ffffff, inset 0 0 0.5vmin 0.5vmin #bbbbbb, inset 0 0 10vmin 0.1vmin rgba(195, 195, 195, 0.2);
}

#cup {
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: -2vmin 2vmin 5vmin -2vmin rgba(0, 0, 0, 0.5), inset 0 0 0.5vmin 0.2vmin #cccccc, inset 0 0 0 1vmin #fafafa;
  z-index: 1;
}

#coffeBg {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #35210d 0%, #231105 100%);
  overflow: hidden;
}

#cupInner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 0.3vmin 0 #000, 0 0 0.5vmin 2.5vmin #dedede, inset 0 0 0.4vmin 0.1vmin rgba(0, 0, 0, 0.5);
  background-color: transparent;
  z-index: 1;
}

#foamWrapper {
  filter: url("#goo") drop-shadow(0px 0px 3px #b37a3c);
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.foam {
  background-color: #f8c99d;
  width: 10%;
  height: 40%;
  border-radius: 50%;
  position: absolute;
  left: -3%;
  transform: rotate(21deg);
  top: 22%;
  filter: url("#scatter");
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foam2 {
  top: -7%;
  left: 14%;
  transform: rotate(53deg);
  width: 6%;
}

#foam3 {
  top: -21%;
  left: 43%;
  transform: rotate(75deg);
}

#foam4 {
  top: -20%;
  left: 46%;
  transform: rotate(105deg);
}

#foam5 {
  top: -9%;
  left: 70%;
  transform: rotate(122deg);
  height: 30%;
}

#foam6 {
  top: 8%;
  left: 98%;
  transform: rotate(152deg);
  height: 60%;
  width: 5%;
}

#foam7 {
  top: 20%;
  left: 97%;
  transform: rotate(181deg);
  height: 60%;
  width: 5%;
}

#foam8 {
  top: 51%;
  left: 96%;
  transform: rotate(211deg);
  height: 40%;
  width: 5%;
}

#foam9 {
  top: 62%;
  left: 70%;
  transform: rotate(224deg);
  height: 80%;
  width: 5%;
}

#foam10 {
  top: 72%;
  left: 62%;
  transform: rotate(74deg);
  height: 50%;
  width: 5%;
}

#foam11 {
  top: 59%;
  left: 51%;
  transform: rotate(104deg);
  height: 80%;
  width: 4%;
}

#foam12 {
  top: 44%;
  left: 9%;
  transform: rotate(124deg);
  height: 80%;
  width: 4%;
}

#foam13 {
  top: 7%;
  left: -6%;
  transform: rotate(-26deg);
  height: 80%;
  width: 4%;
}

@keyframes foamMiddleAnimation {
  0% {
    transform: translate(0%, 0%);
  }
  10% {
    transform: translate(0%, 0%);
  }
  50% {
    transform: translate(45%, 20%);
  }
  90% {
    transform: translate(45%, 20%);
  }
  100% {
    transform: translate(45%, 20%);
  }
}
#foamMiddleWrapper {
  animation-name: foamMiddleAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #foamMiddleWrapper {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes foamMiddleContainerAnimation {
  0% {
    transform: rotate(0);
  }
  55% {
    transform: rotate(30deg);
  }
  90% {
    transform: rotate(30deg);
  }
  100% {
    opacity: 0;
  }
}
#foamMiddleContainer {
  animation-name: foamMiddleContainerAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #foamMiddleContainer {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

.foamMiddle {
  background-color: #f8c99d;
  width: 13%;
  height: 18%;
  border-radius: 50%;
  position: absolute;
  left: 40%;
  transform: rotate(21deg);
  top: 40%;
  filter: url(#scatter);
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foamMiddle2 {
  transform: rotate(-49deg);
  width: 10%;
  left: 47%;
}

@keyframes bubbleMiddle1Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  35% {
    transform: scale(1) translate(60%, 40%);
  }
  45% {
    transform: scale(0) translate(60%, 40%);
  }
  100% {
    transform: scale(0) translate(60%, 40%);
  }
}
#bubbleMiddle1 {
  left: 50%;
  top: 48%;
  width: 7%;
  height: 7%;
  animation-name: bubbleMiddle1Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle1 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes bubbleMiddle2Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  39% {
    transform: scale(1) translate(10%, 10%);
  }
  49% {
    transform: scale(0) translate(10%, 10%);
  }
  100% {
    transform: scale(0) translate(10%, 10%);
  }
}
#bubbleMiddle2 {
  left: 44%;
  top: 40%;
  width: 6%;
  height: 7%;
  transform: rotate(50deg);
  animation-name: bubbleMiddle2Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle2 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes bubbleMiddle3Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  45% {
    transform: scale(1) translate(0%, 0%);
  }
  55% {
    transform: scale(0) translate(0%, 0%);
  }
  100% {
    transform: scale(0) translate(50%, -40%);
  }
}
#bubbleMiddle3 {
  left: 41%;
  top: 49%;
  width: 7%;
  height: 8%;
  transform: rotate(36deg);
  animation-name: bubbleMiddle3Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle3 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
    }
  }
}

#bubbleMiddle4 {
  left: 51%;
  top: 45%;
  width: 2%;
  height: 2%;
  transform: rotate(36deg);
}

.bubble {
  width: 5%;
  height: 7%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 40%;
  left: 2%;
  box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}
.bubble:after {
  display: block;
  content: "";
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 23%;
  top: 12%;
  transform: rotate(-20deg);
  box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
}

#bubble2 {
  left: 5%;
  top: 30%;
  transform: rotate(25deg);
}

#bubble3 {
  left: 8%;
  top: 23%;
  transform: rotate(39deg);
  width: 3%;
  height: 5%;
}

#bubble4 {
  left: 94%;
  top: 43%;
  transform: rotate(-10deg);
  width: 5%;
  height: 7%;
}

#bubble5 {
  left: 95%;
  top: 37%;
  transform: rotate(-17deg);
  width: 3%;
  height: 4%;
}

#bubble6 {
  left: 39%;
  top: 0%;
  transform: rotate(76deg);
  width: 6%;
  height: 9%;
}

#bubble7 {
  left: 60%;
  top: 1%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble8 {
  left: 35%;
  top: 91%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble9 {
  left: 4%;
  top: 63%;
  transform: rotate(-23deg);
  width: 5%;
  height: 7%;
}

#bubble10 {
  left: 2%;
  top: 58%;
  transform: rotate(-18deg);
  width: 3%;
  height: 4%;
}

#bubble11 {
  left: 63%;
  top: 91%;
  transform: rotate(72deg);
  width: 4%;
  height: 6%;
}

#bubble12 {
  left: 31%;
  top: 3%;
  transform: rotate(68deg);
  width: 4%;
  height: 6%;
}

#bubble13 {
  left: 21%;
  top: 85%;
  transform: rotate(118deg);
  width: 4%;
  height: 6%;
}

#bubble14 {
  left: 95%;
  top: 53%;
  transform: rotate(373deg);
  width: 4%;
  height: 6%;
}

#bubble15 {
  left: 50%;
  top: 0%;
  transform: rotate(96deg);
  width: 3%;
  height: 5%;
}

.bubbleSmall {
  width: 1%;
  height: 2%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 48%;
  left: 1%;
  box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}
.bubbleSmall:after {
  display: block;
  content: "";
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 23%;
  top: 12%;
  transform: rotate(-20deg);
  box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
  opacity: 0.8;
}

#bubbleSmall2 {
  left: 3%;
  top: 37%;
  height: 1%;
}

#bubbleSmall3 {
  left: 6%;
  top: 28%;
  height: 1%;
}

#bubbleSmall4 {
  left: 96%;
  top: 35%;
  height: 1%;
}

#bubbleSmall5 {
  left: 60%;
  top: 96%;
  height: 1%;
}

#bubbleSmall6 {
  left: 8%;
  top: 72%;
  height: 1%;
}

#innerShadow {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 100%);
}

#glow {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.26) 90%, rgba(255, 255, 255, 0.9) 100%);
  position: absolute;
  z-index: 10;
}

@keyframes steamAnimation {
  0% {
    transform: translate(30%, -70%);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: translate(60%, -90%);
    opacity: 0;
  }
}
#steamWrapper {
  width: 50%;
  height: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

#steam {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: -156px 492px 123px -252px #fff;
  filter: url(#fog);
  min-width: 600px;
  min-height: 600px;
  animation-name: steamAnimation;
  animation-duration: 4s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
}
@media (max-width: 600px) {
  #steam {
    top: -80%;
    box-shadow: -156px 492px 123px -252px #fff;
  }
}
@media (max-width: 480px) {
  #steam {
    top: -160%;
    box-shadow: -166px 492px 53px -272px #fff;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-424e1b5 */#plate {
  width: 15vmin;
  height: 15vmin;
  border-radius: 49%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  position: relative;
  box-shadow: -2vmin 2vmin 5vmin 2vmin rgba(0, 0, 0, 0.2), inset 0 0 0 0.2vmin #cccccc, inset 0 0 0 0.5vmin #fafafa, inset 0 0 10vmin 0.1vmin rgba(0, 0, 0, 0.2);
}

#handle {
  width: 10%;
  height: 30%;
  background-color: #fff;
  position: absolute;
  left: 71%;
  transform: rotate(-43deg);
  top: 65%;
  border-radius: 1vmin;
  box-shadow: -2vmin -1vmin 2vmin 0vmin rgba(37, 37, 37, 0.1), 0vmin 0vmin 0vmin 0.1vmin rgba(102, 102, 102, 0.1), inset -1vmin 0 2vmin 0.1vmin #ffffff, inset 0 0 0.5vmin 0.5vmin #bbbbbb, inset 0 0 10vmin 0.1vmin rgba(195, 195, 195, 0.2);
}

#cup {
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: -2vmin 2vmin 5vmin -2vmin rgba(0, 0, 0, 0.5), inset 0 0 0.5vmin 0.2vmin #cccccc, inset 0 0 0 1vmin #fafafa;
  z-index: 1;
}

#coffeBg {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #35210d 0%, #231105 100%);
  overflow: hidden;
}

#cupInner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 0.3vmin 0 #000, 0 0 0.5vmin 2.5vmin #dedede, inset 0 0 0.4vmin 0.1vmin rgba(0, 0, 0, 0.5);
  background-color: transparent;
  z-index: 1;
}

#foamWrapper {
  filter: url("#goo") drop-shadow(0px 0px 3px #b37a3c);
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.foam {
  background-color: #f8c99d;
  width: 10%;
  height: 40%;
  border-radius: 50%;
  position: absolute;
  left: -3%;
  transform: rotate(21deg);
  top: 22%;
  filter: url("#scatter");
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foam2 {
  top: -7%;
  left: 14%;
  transform: rotate(53deg);
  width: 6%;
}

#foam3 {
  top: -21%;
  left: 43%;
  transform: rotate(75deg);
}

#foam4 {
  top: -20%;
  left: 46%;
  transform: rotate(105deg);
}

#foam5 {
  top: -9%;
  left: 70%;
  transform: rotate(122deg);
  height: 30%;
}

#foam6 {
  top: 8%;
  left: 98%;
  transform: rotate(152deg);
  height: 60%;
  width: 5%;
}

#foam7 {
  top: 20%;
  left: 97%;
  transform: rotate(181deg);
  height: 60%;
  width: 5%;
}

#foam8 {
  top: 51%;
  left: 96%;
  transform: rotate(211deg);
  height: 40%;
  width: 5%;
}

#foam9 {
  top: 62%;
  left: 70%;
  transform: rotate(224deg);
  height: 80%;
  width: 5%;
}

#foam10 {
  top: 72%;
  left: 62%;
  transform: rotate(74deg);
  height: 50%;
  width: 5%;
}

#foam11 {
  top: 59%;
  left: 51%;
  transform: rotate(104deg);
  height: 80%;
  width: 4%;
}

#foam12 {
  top: 44%;
  left: 9%;
  transform: rotate(124deg);
  height: 80%;
  width: 4%;
}

#foam13 {
  top: 7%;
  left: -6%;
  transform: rotate(-26deg);
  height: 80%;
  width: 4%;
}

@keyframes foamMiddleAnimation {
  0% {
    transform: translate(0%, 0%);
  }
  10% {
    transform: translate(0%, 0%);
  }
  50% {
    transform: translate(45%, 20%);
  }
  90% {
    transform: translate(45%, 20%);
  }
  100% {
    transform: translate(45%, 20%);
  }
}
#foamMiddleWrapper {
  animation-name: foamMiddleAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #foamMiddleWrapper {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes foamMiddleContainerAnimation {
  0% {
    transform: rotate(0);
  }
  55% {
    transform: rotate(30deg);
  }
  90% {
    transform: rotate(30deg);
  }
  100% {
    opacity: 0;
  }
}
#foamMiddleContainer {
  animation-name: foamMiddleContainerAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #foamMiddleContainer {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

.foamMiddle {
  background-color: #f8c99d;
  width: 13%;
  height: 18%;
  border-radius: 50%;
  position: absolute;
  left: 40%;
  transform: rotate(21deg);
  top: 40%;
  filter: url(#scatter);
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foamMiddle2 {
  transform: rotate(-49deg);
  width: 10%;
  left: 47%;
}

@keyframes bubbleMiddle1Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  35% {
    transform: scale(1) translate(60%, 40%);
  }
  45% {
    transform: scale(0) translate(60%, 40%);
  }
  100% {
    transform: scale(0) translate(60%, 40%);
  }
}
#bubbleMiddle1 {
  left: 50%;
  top: 48%;
  width: 7%;
  height: 7%;
  animation-name: bubbleMiddle1Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle1 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes bubbleMiddle2Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  39% {
    transform: scale(1) translate(10%, 10%);
  }
  49% {
    transform: scale(0) translate(10%, 10%);
  }
  100% {
    transform: scale(0) translate(10%, 10%);
  }
}
#bubbleMiddle2 {
  left: 44%;
  top: 40%;
  width: 6%;
  height: 7%;
  transform: rotate(50deg);
  animation-name: bubbleMiddle2Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle2 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes bubbleMiddle3Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  45% {
    transform: scale(1) translate(0%, 0%);
  }
  55% {
    transform: scale(0) translate(0%, 0%);
  }
  100% {
    transform: scale(0) translate(50%, -40%);
  }
}
#bubbleMiddle3 {
  left: 41%;
  top: 49%;
  width: 7%;
  height: 8%;
  transform: rotate(36deg);
  animation-name: bubbleMiddle3Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle3 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
    }
  }
}

#bubbleMiddle4 {
  left: 51%;
  top: 45%;
  width: 2%;
  height: 2%;
  transform: rotate(36deg);
}

.bubble {
  width: 5%;
  height: 7%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 40%;
  left: 2%;
  box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}
.bubble:after {
  display: block;
  content: "";
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 23%;
  top: 12%;
  transform: rotate(-20deg);
  box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
}

#bubble2 {
  left: 5%;
  top: 30%;
  transform: rotate(25deg);
}

#bubble3 {
  left: 8%;
  top: 23%;
  transform: rotate(39deg);
  width: 3%;
  height: 5%;
}

#bubble4 {
  left: 94%;
  top: 43%;
  transform: rotate(-10deg);
  width: 5%;
  height: 7%;
}

#bubble5 {
  left: 95%;
  top: 37%;
  transform: rotate(-17deg);
  width: 3%;
  height: 4%;
}

#bubble6 {
  left: 39%;
  top: 0%;
  transform: rotate(76deg);
  width: 6%;
  height: 9%;
}

#bubble7 {
  left: 60%;
  top: 1%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble8 {
  left: 35%;
  top: 91%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble9 {
  left: 4%;
  top: 63%;
  transform: rotate(-23deg);
  width: 5%;
  height: 7%;
}

#bubble10 {
  left: 2%;
  top: 58%;
  transform: rotate(-18deg);
  width: 3%;
  height: 4%;
}

#bubble11 {
  left: 63%;
  top: 91%;
  transform: rotate(72deg);
  width: 4%;
  height: 6%;
}

#bubble12 {
  left: 31%;
  top: 3%;
  transform: rotate(68deg);
  width: 4%;
  height: 6%;
}

#bubble13 {
  left: 21%;
  top: 85%;
  transform: rotate(118deg);
  width: 4%;
  height: 6%;
}

#bubble14 {
  left: 95%;
  top: 53%;
  transform: rotate(373deg);
  width: 4%;
  height: 6%;
}

#bubble15 {
  left: 50%;
  top: 0%;
  transform: rotate(96deg);
  width: 3%;
  height: 5%;
}

.bubbleSmall {
  width: 1%;
  height: 2%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 48%;
  left: 1%;
  box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}
.bubbleSmall:after {
  display: block;
  content: "";
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 23%;
  top: 12%;
  transform: rotate(-20deg);
  box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
  opacity: 0.8;
}

#bubbleSmall2 {
  left: 3%;
  top: 37%;
  height: 1%;
}

#bubbleSmall3 {
  left: 6%;
  top: 28%;
  height: 1%;
}

#bubbleSmall4 {
  left: 96%;
  top: 35%;
  height: 1%;
}

#bubbleSmall5 {
  left: 60%;
  top: 96%;
  height: 1%;
}

#bubbleSmall6 {
  left: 8%;
  top: 72%;
  height: 1%;
}

#innerShadow {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 100%);
}

#glow {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.26) 90%, rgba(255, 255, 255, 0.9) 100%);
  position: absolute;
  z-index: 10;
}

@keyframes steamAnimation {
  0% {
    transform: translate(30%, -70%);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: translate(60%, -90%);
    opacity: 0;
  }
}
#steamWrapper {
  width: 50%;
  height: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

#steam {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: -156px 492px 123px -252px #fff;
  filter: url(#fog);
  min-width: 600px;
  min-height: 600px;
  animation-name: steamAnimation;
  animation-duration: 4s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
}
@media (max-width: 600px) {
  #steam {
    top: -80%;
    box-shadow: -156px 492px 123px -252px #fff;
  }
}
@media (max-width: 480px) {
  #steam {
    top: -160%;
    box-shadow: -166px 492px 53px -272px #fff;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-424e1b5 */#plate {
  width: 15vmin;
  height: 15vmin;
  border-radius: 49%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  position: relative;
  box-shadow: -2vmin 2vmin 5vmin 2vmin rgba(0, 0, 0, 0.2), inset 0 0 0 0.2vmin #cccccc, inset 0 0 0 0.5vmin #fafafa, inset 0 0 10vmin 0.1vmin rgba(0, 0, 0, 0.2);
}

#handle {
  width: 10%;
  height: 30%;
  background-color: #fff;
  position: absolute;
  left: 71%;
  transform: rotate(-43deg);
  top: 65%;
  border-radius: 1vmin;
  box-shadow: -2vmin -1vmin 2vmin 0vmin rgba(37, 37, 37, 0.1), 0vmin 0vmin 0vmin 0.1vmin rgba(102, 102, 102, 0.1), inset -1vmin 0 2vmin 0.1vmin #ffffff, inset 0 0 0.5vmin 0.5vmin #bbbbbb, inset 0 0 10vmin 0.1vmin rgba(195, 195, 195, 0.2);
}

#cup {
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: -2vmin 2vmin 5vmin -2vmin rgba(0, 0, 0, 0.5), inset 0 0 0.5vmin 0.2vmin #cccccc, inset 0 0 0 1vmin #fafafa;
  z-index: 1;
}

#coffeBg {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #35210d 0%, #231105 100%);
  overflow: hidden;
}

#cupInner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 0.3vmin 0 #000, 0 0 0.5vmin 2.5vmin #dedede, inset 0 0 0.4vmin 0.1vmin rgba(0, 0, 0, 0.5);
  background-color: transparent;
  z-index: 1;
}

#foamWrapper {
  filter: url("#goo") drop-shadow(0px 0px 3px #b37a3c);
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.foam {
  background-color: #f8c99d;
  width: 10%;
  height: 40%;
  border-radius: 50%;
  position: absolute;
  left: -3%;
  transform: rotate(21deg);
  top: 22%;
  filter: url("#scatter");
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foam2 {
  top: -7%;
  left: 14%;
  transform: rotate(53deg);
  width: 6%;
}

#foam3 {
  top: -21%;
  left: 43%;
  transform: rotate(75deg);
}

#foam4 {
  top: -20%;
  left: 46%;
  transform: rotate(105deg);
}

#foam5 {
  top: -9%;
  left: 70%;
  transform: rotate(122deg);
  height: 30%;
}

#foam6 {
  top: 8%;
  left: 98%;
  transform: rotate(152deg);
  height: 60%;
  width: 5%;
}

#foam7 {
  top: 20%;
  left: 97%;
  transform: rotate(181deg);
  height: 60%;
  width: 5%;
}

#foam8 {
  top: 51%;
  left: 96%;
  transform: rotate(211deg);
  height: 40%;
  width: 5%;
}

#foam9 {
  top: 62%;
  left: 70%;
  transform: rotate(224deg);
  height: 80%;
  width: 5%;
}

#foam10 {
  top: 72%;
  left: 62%;
  transform: rotate(74deg);
  height: 50%;
  width: 5%;
}

#foam11 {
  top: 59%;
  left: 51%;
  transform: rotate(104deg);
  height: 80%;
  width: 4%;
}

#foam12 {
  top: 44%;
  left: 9%;
  transform: rotate(124deg);
  height: 80%;
  width: 4%;
}

#foam13 {
  top: 7%;
  left: -6%;
  transform: rotate(-26deg);
  height: 80%;
  width: 4%;
}

@keyframes foamMiddleAnimation {
  0% {
    transform: translate(0%, 0%);
  }
  10% {
    transform: translate(0%, 0%);
  }
  50% {
    transform: translate(45%, 20%);
  }
  90% {
    transform: translate(45%, 20%);
  }
  100% {
    transform: translate(45%, 20%);
  }
}
#foamMiddleWrapper {
  animation-name: foamMiddleAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #foamMiddleWrapper {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes foamMiddleContainerAnimation {
  0% {
    transform: rotate(0);
  }
  55% {
    transform: rotate(30deg);
  }
  90% {
    transform: rotate(30deg);
  }
  100% {
    opacity: 0;
  }
}
#foamMiddleContainer {
  animation-name: foamMiddleContainerAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #foamMiddleContainer {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

.foamMiddle {
  background-color: #f8c99d;
  width: 13%;
  height: 18%;
  border-radius: 50%;
  position: absolute;
  left: 40%;
  transform: rotate(21deg);
  top: 40%;
  filter: url(#scatter);
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foamMiddle2 {
  transform: rotate(-49deg);
  width: 10%;
  left: 47%;
}

@keyframes bubbleMiddle1Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  35% {
    transform: scale(1) translate(60%, 40%);
  }
  45% {
    transform: scale(0) translate(60%, 40%);
  }
  100% {
    transform: scale(0) translate(60%, 40%);
  }
}
#bubbleMiddle1 {
  left: 50%;
  top: 48%;
  width: 7%;
  height: 7%;
  animation-name: bubbleMiddle1Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle1 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes bubbleMiddle2Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  39% {
    transform: scale(1) translate(10%, 10%);
  }
  49% {
    transform: scale(0) translate(10%, 10%);
  }
  100% {
    transform: scale(0) translate(10%, 10%);
  }
}
#bubbleMiddle2 {
  left: 44%;
  top: 40%;
  width: 6%;
  height: 7%;
  transform: rotate(50deg);
  animation-name: bubbleMiddle2Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle2 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes bubbleMiddle3Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  45% {
    transform: scale(1) translate(0%, 0%);
  }
  55% {
    transform: scale(0) translate(0%, 0%);
  }
  100% {
    transform: scale(0) translate(50%, -40%);
  }
}
#bubbleMiddle3 {
  left: 41%;
  top: 49%;
  width: 7%;
  height: 8%;
  transform: rotate(36deg);
  animation-name: bubbleMiddle3Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle3 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
    }
  }
}

#bubbleMiddle4 {
  left: 51%;
  top: 45%;
  width: 2%;
  height: 2%;
  transform: rotate(36deg);
}

.bubble {
  width: 5%;
  height: 7%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 40%;
  left: 2%;
  box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}
.bubble:after {
  display: block;
  content: "";
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 23%;
  top: 12%;
  transform: rotate(-20deg);
  box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
}

#bubble2 {
  left: 5%;
  top: 30%;
  transform: rotate(25deg);
}

#bubble3 {
  left: 8%;
  top: 23%;
  transform: rotate(39deg);
  width: 3%;
  height: 5%;
}

#bubble4 {
  left: 94%;
  top: 43%;
  transform: rotate(-10deg);
  width: 5%;
  height: 7%;
}

#bubble5 {
  left: 95%;
  top: 37%;
  transform: rotate(-17deg);
  width: 3%;
  height: 4%;
}

#bubble6 {
  left: 39%;
  top: 0%;
  transform: rotate(76deg);
  width: 6%;
  height: 9%;
}

#bubble7 {
  left: 60%;
  top: 1%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble8 {
  left: 35%;
  top: 91%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble9 {
  left: 4%;
  top: 63%;
  transform: rotate(-23deg);
  width: 5%;
  height: 7%;
}

#bubble10 {
  left: 2%;
  top: 58%;
  transform: rotate(-18deg);
  width: 3%;
  height: 4%;
}

#bubble11 {
  left: 63%;
  top: 91%;
  transform: rotate(72deg);
  width: 4%;
  height: 6%;
}

#bubble12 {
  left: 31%;
  top: 3%;
  transform: rotate(68deg);
  width: 4%;
  height: 6%;
}

#bubble13 {
  left: 21%;
  top: 85%;
  transform: rotate(118deg);
  width: 4%;
  height: 6%;
}

#bubble14 {
  left: 95%;
  top: 53%;
  transform: rotate(373deg);
  width: 4%;
  height: 6%;
}

#bubble15 {
  left: 50%;
  top: 0%;
  transform: rotate(96deg);
  width: 3%;
  height: 5%;
}

.bubbleSmall {
  width: 1%;
  height: 2%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 48%;
  left: 1%;
  box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}
.bubbleSmall:after {
  display: block;
  content: "";
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 23%;
  top: 12%;
  transform: rotate(-20deg);
  box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
  opacity: 0.8;
}

#bubbleSmall2 {
  left: 3%;
  top: 37%;
  height: 1%;
}

#bubbleSmall3 {
  left: 6%;
  top: 28%;
  height: 1%;
}

#bubbleSmall4 {
  left: 96%;
  top: 35%;
  height: 1%;
}

#bubbleSmall5 {
  left: 60%;
  top: 96%;
  height: 1%;
}

#bubbleSmall6 {
  left: 8%;
  top: 72%;
  height: 1%;
}

#innerShadow {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 100%);
}

#glow {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.26) 90%, rgba(255, 255, 255, 0.9) 100%);
  position: absolute;
  z-index: 10;
}

@keyframes steamAnimation {
  0% {
    transform: translate(30%, -70%);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: translate(60%, -90%);
    opacity: 0;
  }
}
#steamWrapper {
  width: 50%;
  height: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

#steam {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: -156px 492px 123px -252px #fff;
  filter: url(#fog);
  min-width: 600px;
  min-height: 600px;
  animation-name: steamAnimation;
  animation-duration: 4s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
}
@media (max-width: 600px) {
  #steam {
    top: -80%;
    box-shadow: -156px 492px 123px -252px #fff;
  }
}
@media (max-width: 480px) {
  #steam {
    top: -160%;
    box-shadow: -166px 492px 53px -272px #fff;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-424e1b5 */#plate {
  width: 15vmin;
  height: 15vmin;
  border-radius: 49%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  position: relative;
  box-shadow: -2vmin 2vmin 5vmin 2vmin rgba(0, 0, 0, 0.2), inset 0 0 0 0.2vmin #cccccc, inset 0 0 0 0.5vmin #fafafa, inset 0 0 10vmin 0.1vmin rgba(0, 0, 0, 0.2);
}

#handle {
  width: 10%;
  height: 30%;
  background-color: #fff;
  position: absolute;
  left: 71%;
  transform: rotate(-43deg);
  top: 65%;
  border-radius: 1vmin;
  box-shadow: -2vmin -1vmin 2vmin 0vmin rgba(37, 37, 37, 0.1), 0vmin 0vmin 0vmin 0.1vmin rgba(102, 102, 102, 0.1), inset -1vmin 0 2vmin 0.1vmin #ffffff, inset 0 0 0.5vmin 0.5vmin #bbbbbb, inset 0 0 10vmin 0.1vmin rgba(195, 195, 195, 0.2);
}

#cup {
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: -2vmin 2vmin 5vmin -2vmin rgba(0, 0, 0, 0.5), inset 0 0 0.5vmin 0.2vmin #cccccc, inset 0 0 0 1vmin #fafafa;
  z-index: 1;
}

#coffeBg {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #35210d 0%, #231105 100%);
  overflow: hidden;
}

#cupInner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 0.3vmin 0 #000, 0 0 0.5vmin 2.5vmin #dedede, inset 0 0 0.4vmin 0.1vmin rgba(0, 0, 0, 0.5);
  background-color: transparent;
  z-index: 1;
}

#foamWrapper {
  filter: url("#goo") drop-shadow(0px 0px 3px #b37a3c);
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.foam {
  background-color: #f8c99d;
  width: 10%;
  height: 40%;
  border-radius: 50%;
  position: absolute;
  left: -3%;
  transform: rotate(21deg);
  top: 22%;
  filter: url("#scatter");
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foam2 {
  top: -7%;
  left: 14%;
  transform: rotate(53deg);
  width: 6%;
}

#foam3 {
  top: -21%;
  left: 43%;
  transform: rotate(75deg);
}

#foam4 {
  top: -20%;
  left: 46%;
  transform: rotate(105deg);
}

#foam5 {
  top: -9%;
  left: 70%;
  transform: rotate(122deg);
  height: 30%;
}

#foam6 {
  top: 8%;
  left: 98%;
  transform: rotate(152deg);
  height: 60%;
  width: 5%;
}

#foam7 {
  top: 20%;
  left: 97%;
  transform: rotate(181deg);
  height: 60%;
  width: 5%;
}

#foam8 {
  top: 51%;
  left: 96%;
  transform: rotate(211deg);
  height: 40%;
  width: 5%;
}

#foam9 {
  top: 62%;
  left: 70%;
  transform: rotate(224deg);
  height: 80%;
  width: 5%;
}

#foam10 {
  top: 72%;
  left: 62%;
  transform: rotate(74deg);
  height: 50%;
  width: 5%;
}

#foam11 {
  top: 59%;
  left: 51%;
  transform: rotate(104deg);
  height: 80%;
  width: 4%;
}

#foam12 {
  top: 44%;
  left: 9%;
  transform: rotate(124deg);
  height: 80%;
  width: 4%;
}

#foam13 {
  top: 7%;
  left: -6%;
  transform: rotate(-26deg);
  height: 80%;
  width: 4%;
}

@keyframes foamMiddleAnimation {
  0% {
    transform: translate(0%, 0%);
  }
  10% {
    transform: translate(0%, 0%);
  }
  50% {
    transform: translate(45%, 20%);
  }
  90% {
    transform: translate(45%, 20%);
  }
  100% {
    transform: translate(45%, 20%);
  }
}
#foamMiddleWrapper {
  animation-name: foamMiddleAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #foamMiddleWrapper {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes foamMiddleContainerAnimation {
  0% {
    transform: rotate(0);
  }
  55% {
    transform: rotate(30deg);
  }
  90% {
    transform: rotate(30deg);
  }
  100% {
    opacity: 0;
  }
}
#foamMiddleContainer {
  animation-name: foamMiddleContainerAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #foamMiddleContainer {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

.foamMiddle {
  background-color: #f8c99d;
  width: 13%;
  height: 18%;
  border-radius: 50%;
  position: absolute;
  left: 40%;
  transform: rotate(21deg);
  top: 40%;
  filter: url(#scatter);
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foamMiddle2 {
  transform: rotate(-49deg);
  width: 10%;
  left: 47%;
}

@keyframes bubbleMiddle1Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  35% {
    transform: scale(1) translate(60%, 40%);
  }
  45% {
    transform: scale(0) translate(60%, 40%);
  }
  100% {
    transform: scale(0) translate(60%, 40%);
  }
}
#bubbleMiddle1 {
  left: 50%;
  top: 48%;
  width: 7%;
  height: 7%;
  animation-name: bubbleMiddle1Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle1 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes bubbleMiddle2Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  39% {
    transform: scale(1) translate(10%, 10%);
  }
  49% {
    transform: scale(0) translate(10%, 10%);
  }
  100% {
    transform: scale(0) translate(10%, 10%);
  }
}
#bubbleMiddle2 {
  left: 44%;
  top: 40%;
  width: 6%;
  height: 7%;
  transform: rotate(50deg);
  animation-name: bubbleMiddle2Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle2 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes bubbleMiddle3Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  45% {
    transform: scale(1) translate(0%, 0%);
  }
  55% {
    transform: scale(0) translate(0%, 0%);
  }
  100% {
    transform: scale(0) translate(50%, -40%);
  }
}
#bubbleMiddle3 {
  left: 41%;
  top: 49%;
  width: 7%;
  height: 8%;
  transform: rotate(36deg);
  animation-name: bubbleMiddle3Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle3 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
    }
  }
}

#bubbleMiddle4 {
  left: 51%;
  top: 45%;
  width: 2%;
  height: 2%;
  transform: rotate(36deg);
}

.bubble {
  width: 5%;
  height: 7%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 40%;
  left: 2%;
  box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}
.bubble:after {
  display: block;
  content: "";
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 23%;
  top: 12%;
  transform: rotate(-20deg);
  box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
}

#bubble2 {
  left: 5%;
  top: 30%;
  transform: rotate(25deg);
}

#bubble3 {
  left: 8%;
  top: 23%;
  transform: rotate(39deg);
  width: 3%;
  height: 5%;
}

#bubble4 {
  left: 94%;
  top: 43%;
  transform: rotate(-10deg);
  width: 5%;
  height: 7%;
}

#bubble5 {
  left: 95%;
  top: 37%;
  transform: rotate(-17deg);
  width: 3%;
  height: 4%;
}

#bubble6 {
  left: 39%;
  top: 0%;
  transform: rotate(76deg);
  width: 6%;
  height: 9%;
}

#bubble7 {
  left: 60%;
  top: 1%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble8 {
  left: 35%;
  top: 91%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble9 {
  left: 4%;
  top: 63%;
  transform: rotate(-23deg);
  width: 5%;
  height: 7%;
}

#bubble10 {
  left: 2%;
  top: 58%;
  transform: rotate(-18deg);
  width: 3%;
  height: 4%;
}

#bubble11 {
  left: 63%;
  top: 91%;
  transform: rotate(72deg);
  width: 4%;
  height: 6%;
}

#bubble12 {
  left: 31%;
  top: 3%;
  transform: rotate(68deg);
  width: 4%;
  height: 6%;
}

#bubble13 {
  left: 21%;
  top: 85%;
  transform: rotate(118deg);
  width: 4%;
  height: 6%;
}

#bubble14 {
  left: 95%;
  top: 53%;
  transform: rotate(373deg);
  width: 4%;
  height: 6%;
}

#bubble15 {
  left: 50%;
  top: 0%;
  transform: rotate(96deg);
  width: 3%;
  height: 5%;
}

.bubbleSmall {
  width: 1%;
  height: 2%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 48%;
  left: 1%;
  box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}
.bubbleSmall:after {
  display: block;
  content: "";
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 23%;
  top: 12%;
  transform: rotate(-20deg);
  box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
  opacity: 0.8;
}

#bubbleSmall2 {
  left: 3%;
  top: 37%;
  height: 1%;
}

#bubbleSmall3 {
  left: 6%;
  top: 28%;
  height: 1%;
}

#bubbleSmall4 {
  left: 96%;
  top: 35%;
  height: 1%;
}

#bubbleSmall5 {
  left: 60%;
  top: 96%;
  height: 1%;
}

#bubbleSmall6 {
  left: 8%;
  top: 72%;
  height: 1%;
}

#innerShadow {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 100%);
}

#glow {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.26) 90%, rgba(255, 255, 255, 0.9) 100%);
  position: absolute;
  z-index: 10;
}

@keyframes steamAnimation {
  0% {
    transform: translate(30%, -70%);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: translate(60%, -90%);
    opacity: 0;
  }
}
#steamWrapper {
  width: 50%;
  height: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

#steam {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: -156px 492px 123px -252px #fff;
  filter: url(#fog);
  min-width: 600px;
  min-height: 600px;
  animation-name: steamAnimation;
  animation-duration: 4s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
}
@media (max-width: 600px) {
  #steam {
    top: -80%;
    box-shadow: -156px 492px 123px -252px #fff;
  }
}
@media (max-width: 480px) {
  #steam {
    top: -160%;
    box-shadow: -166px 492px 53px -272px #fff;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-424e1b5 */#plate {
  width: 15vmin;
  height: 15vmin;
  border-radius: 49%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  position: relative;
  box-shadow: -2vmin 2vmin 5vmin 2vmin rgba(0, 0, 0, 0.2), inset 0 0 0 0.2vmin #cccccc, inset 0 0 0 0.5vmin #fafafa, inset 0 0 10vmin 0.1vmin rgba(0, 0, 0, 0.2);
}

#handle {
  width: 10%;
  height: 30%;
  background-color: #fff;
  position: absolute;
  left: 71%;
  transform: rotate(-43deg);
  top: 65%;
  border-radius: 1vmin;
  box-shadow: -2vmin -1vmin 2vmin 0vmin rgba(37, 37, 37, 0.1), 0vmin 0vmin 0vmin 0.1vmin rgba(102, 102, 102, 0.1), inset -1vmin 0 2vmin 0.1vmin #ffffff, inset 0 0 0.5vmin 0.5vmin #bbbbbb, inset 0 0 10vmin 0.1vmin rgba(195, 195, 195, 0.2);
}

#cup {
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: -2vmin 2vmin 5vmin -2vmin rgba(0, 0, 0, 0.5), inset 0 0 0.5vmin 0.2vmin #cccccc, inset 0 0 0 1vmin #fafafa;
  z-index: 1;
}

#coffeBg {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #35210d 0%, #231105 100%);
  overflow: hidden;
}

#cupInner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 0.3vmin 0 #000, 0 0 0.5vmin 2.5vmin #dedede, inset 0 0 0.4vmin 0.1vmin rgba(0, 0, 0, 0.5);
  background-color: transparent;
  z-index: 1;
}

#foamWrapper {
  filter: url("#goo") drop-shadow(0px 0px 3px #b37a3c);
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.foam {
  background-color: #f8c99d;
  width: 10%;
  height: 40%;
  border-radius: 50%;
  position: absolute;
  left: -3%;
  transform: rotate(21deg);
  top: 22%;
  filter: url("#scatter");
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foam2 {
  top: -7%;
  left: 14%;
  transform: rotate(53deg);
  width: 6%;
}

#foam3 {
  top: -21%;
  left: 43%;
  transform: rotate(75deg);
}

#foam4 {
  top: -20%;
  left: 46%;
  transform: rotate(105deg);
}

#foam5 {
  top: -9%;
  left: 70%;
  transform: rotate(122deg);
  height: 30%;
}

#foam6 {
  top: 8%;
  left: 98%;
  transform: rotate(152deg);
  height: 60%;
  width: 5%;
}

#foam7 {
  top: 20%;
  left: 97%;
  transform: rotate(181deg);
  height: 60%;
  width: 5%;
}

#foam8 {
  top: 51%;
  left: 96%;
  transform: rotate(211deg);
  height: 40%;
  width: 5%;
}

#foam9 {
  top: 62%;
  left: 70%;
  transform: rotate(224deg);
  height: 80%;
  width: 5%;
}

#foam10 {
  top: 72%;
  left: 62%;
  transform: rotate(74deg);
  height: 50%;
  width: 5%;
}

#foam11 {
  top: 59%;
  left: 51%;
  transform: rotate(104deg);
  height: 80%;
  width: 4%;
}

#foam12 {
  top: 44%;
  left: 9%;
  transform: rotate(124deg);
  height: 80%;
  width: 4%;
}

#foam13 {
  top: 7%;
  left: -6%;
  transform: rotate(-26deg);
  height: 80%;
  width: 4%;
}

@keyframes foamMiddleAnimation {
  0% {
    transform: translate(0%, 0%);
  }
  10% {
    transform: translate(0%, 0%);
  }
  50% {
    transform: translate(45%, 20%);
  }
  90% {
    transform: translate(45%, 20%);
  }
  100% {
    transform: translate(45%, 20%);
  }
}
#foamMiddleWrapper {
  animation-name: foamMiddleAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #foamMiddleWrapper {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes foamMiddleContainerAnimation {
  0% {
    transform: rotate(0);
  }
  55% {
    transform: rotate(30deg);
  }
  90% {
    transform: rotate(30deg);
  }
  100% {
    opacity: 0;
  }
}
#foamMiddleContainer {
  animation-name: foamMiddleContainerAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #foamMiddleContainer {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

.foamMiddle {
  background-color: #f8c99d;
  width: 13%;
  height: 18%;
  border-radius: 50%;
  position: absolute;
  left: 40%;
  transform: rotate(21deg);
  top: 40%;
  filter: url(#scatter);
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foamMiddle2 {
  transform: rotate(-49deg);
  width: 10%;
  left: 47%;
}

@keyframes bubbleMiddle1Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  35% {
    transform: scale(1) translate(60%, 40%);
  }
  45% {
    transform: scale(0) translate(60%, 40%);
  }
  100% {
    transform: scale(0) translate(60%, 40%);
  }
}
#bubbleMiddle1 {
  left: 50%;
  top: 48%;
  width: 7%;
  height: 7%;
  animation-name: bubbleMiddle1Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle1 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes bubbleMiddle2Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  39% {
    transform: scale(1) translate(10%, 10%);
  }
  49% {
    transform: scale(0) translate(10%, 10%);
  }
  100% {
    transform: scale(0) translate(10%, 10%);
  }
}
#bubbleMiddle2 {
  left: 44%;
  top: 40%;
  width: 6%;
  height: 7%;
  transform: rotate(50deg);
  animation-name: bubbleMiddle2Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle2 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes bubbleMiddle3Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  45% {
    transform: scale(1) translate(0%, 0%);
  }
  55% {
    transform: scale(0) translate(0%, 0%);
  }
  100% {
    transform: scale(0) translate(50%, -40%);
  }
}
#bubbleMiddle3 {
  left: 41%;
  top: 49%;
  width: 7%;
  height: 8%;
  transform: rotate(36deg);
  animation-name: bubbleMiddle3Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle3 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
    }
  }
}

#bubbleMiddle4 {
  left: 51%;
  top: 45%;
  width: 2%;
  height: 2%;
  transform: rotate(36deg);
}

.bubble {
  width: 5%;
  height: 7%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 40%;
  left: 2%;
  box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}
.bubble:after {
  display: block;
  content: "";
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 23%;
  top: 12%;
  transform: rotate(-20deg);
  box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
}

#bubble2 {
  left: 5%;
  top: 30%;
  transform: rotate(25deg);
}

#bubble3 {
  left: 8%;
  top: 23%;
  transform: rotate(39deg);
  width: 3%;
  height: 5%;
}

#bubble4 {
  left: 94%;
  top: 43%;
  transform: rotate(-10deg);
  width: 5%;
  height: 7%;
}

#bubble5 {
  left: 95%;
  top: 37%;
  transform: rotate(-17deg);
  width: 3%;
  height: 4%;
}

#bubble6 {
  left: 39%;
  top: 0%;
  transform: rotate(76deg);
  width: 6%;
  height: 9%;
}

#bubble7 {
  left: 60%;
  top: 1%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble8 {
  left: 35%;
  top: 91%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble9 {
  left: 4%;
  top: 63%;
  transform: rotate(-23deg);
  width: 5%;
  height: 7%;
}

#bubble10 {
  left: 2%;
  top: 58%;
  transform: rotate(-18deg);
  width: 3%;
  height: 4%;
}

#bubble11 {
  left: 63%;
  top: 91%;
  transform: rotate(72deg);
  width: 4%;
  height: 6%;
}

#bubble12 {
  left: 31%;
  top: 3%;
  transform: rotate(68deg);
  width: 4%;
  height: 6%;
}

#bubble13 {
  left: 21%;
  top: 85%;
  transform: rotate(118deg);
  width: 4%;
  height: 6%;
}

#bubble14 {
  left: 95%;
  top: 53%;
  transform: rotate(373deg);
  width: 4%;
  height: 6%;
}

#bubble15 {
  left: 50%;
  top: 0%;
  transform: rotate(96deg);
  width: 3%;
  height: 5%;
}

.bubbleSmall {
  width: 1%;
  height: 2%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 48%;
  left: 1%;
  box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}
.bubbleSmall:after {
  display: block;
  content: "";
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 23%;
  top: 12%;
  transform: rotate(-20deg);
  box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
  opacity: 0.8;
}

#bubbleSmall2 {
  left: 3%;
  top: 37%;
  height: 1%;
}

#bubbleSmall3 {
  left: 6%;
  top: 28%;
  height: 1%;
}

#bubbleSmall4 {
  left: 96%;
  top: 35%;
  height: 1%;
}

#bubbleSmall5 {
  left: 60%;
  top: 96%;
  height: 1%;
}

#bubbleSmall6 {
  left: 8%;
  top: 72%;
  height: 1%;
}

#innerShadow {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 100%);
}

#glow {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.26) 90%, rgba(255, 255, 255, 0.9) 100%);
  position: absolute;
  z-index: 10;
}

@keyframes steamAnimation {
  0% {
    transform: translate(30%, -70%);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: translate(60%, -90%);
    opacity: 0;
  }
}
#steamWrapper {
  width: 50%;
  height: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

#steam {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: -156px 492px 123px -252px #fff;
  filter: url(#fog);
  min-width: 600px;
  min-height: 600px;
  animation-name: steamAnimation;
  animation-duration: 4s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
}
@media (max-width: 600px) {
  #steam {
    top: -80%;
    box-shadow: -156px 492px 123px -252px #fff;
  }
}
@media (max-width: 480px) {
  #steam {
    top: -160%;
    box-shadow: -166px 492px 53px -272px #fff;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-424e1b5 */#plate {
  width: 15vmin;
  height: 15vmin;
  border-radius: 49%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  position: relative;
  box-shadow: -2vmin 2vmin 5vmin 2vmin rgba(0, 0, 0, 0.2), inset 0 0 0 0.2vmin #cccccc, inset 0 0 0 0.5vmin #fafafa, inset 0 0 10vmin 0.1vmin rgba(0, 0, 0, 0.2);
}

#handle {
  width: 10%;
  height: 30%;
  background-color: #fff;
  position: absolute;
  left: 71%;
  transform: rotate(-43deg);
  top: 65%;
  border-radius: 1vmin;
  box-shadow: -2vmin -1vmin 2vmin 0vmin rgba(37, 37, 37, 0.1), 0vmin 0vmin 0vmin 0.1vmin rgba(102, 102, 102, 0.1), inset -1vmin 0 2vmin 0.1vmin #ffffff, inset 0 0 0.5vmin 0.5vmin #bbbbbb, inset 0 0 10vmin 0.1vmin rgba(195, 195, 195, 0.2);
}

#cup {
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: -2vmin 2vmin 5vmin -2vmin rgba(0, 0, 0, 0.5), inset 0 0 0.5vmin 0.2vmin #cccccc, inset 0 0 0 1vmin #fafafa;
  z-index: 1;
}

#coffeBg {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #35210d 0%, #231105 100%);
  overflow: hidden;
}

#cupInner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 0.3vmin 0 #000, 0 0 0.5vmin 2.5vmin #dedede, inset 0 0 0.4vmin 0.1vmin rgba(0, 0, 0, 0.5);
  background-color: transparent;
  z-index: 1;
}

#foamWrapper {
  filter: url("#goo") drop-shadow(0px 0px 3px #b37a3c);
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.foam {
  background-color: #f8c99d;
  width: 10%;
  height: 40%;
  border-radius: 50%;
  position: absolute;
  left: -3%;
  transform: rotate(21deg);
  top: 22%;
  filter: url("#scatter");
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foam2 {
  top: -7%;
  left: 14%;
  transform: rotate(53deg);
  width: 6%;
}

#foam3 {
  top: -21%;
  left: 43%;
  transform: rotate(75deg);
}

#foam4 {
  top: -20%;
  left: 46%;
  transform: rotate(105deg);
}

#foam5 {
  top: -9%;
  left: 70%;
  transform: rotate(122deg);
  height: 30%;
}

#foam6 {
  top: 8%;
  left: 98%;
  transform: rotate(152deg);
  height: 60%;
  width: 5%;
}

#foam7 {
  top: 20%;
  left: 97%;
  transform: rotate(181deg);
  height: 60%;
  width: 5%;
}

#foam8 {
  top: 51%;
  left: 96%;
  transform: rotate(211deg);
  height: 40%;
  width: 5%;
}

#foam9 {
  top: 62%;
  left: 70%;
  transform: rotate(224deg);
  height: 80%;
  width: 5%;
}

#foam10 {
  top: 72%;
  left: 62%;
  transform: rotate(74deg);
  height: 50%;
  width: 5%;
}

#foam11 {
  top: 59%;
  left: 51%;
  transform: rotate(104deg);
  height: 80%;
  width: 4%;
}

#foam12 {
  top: 44%;
  left: 9%;
  transform: rotate(124deg);
  height: 80%;
  width: 4%;
}

#foam13 {
  top: 7%;
  left: -6%;
  transform: rotate(-26deg);
  height: 80%;
  width: 4%;
}

@keyframes foamMiddleAnimation {
  0% {
    transform: translate(0%, 0%);
  }
  10% {
    transform: translate(0%, 0%);
  }
  50% {
    transform: translate(45%, 20%);
  }
  90% {
    transform: translate(45%, 20%);
  }
  100% {
    transform: translate(45%, 20%);
  }
}
#foamMiddleWrapper {
  animation-name: foamMiddleAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #foamMiddleWrapper {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes foamMiddleContainerAnimation {
  0% {
    transform: rotate(0);
  }
  55% {
    transform: rotate(30deg);
  }
  90% {
    transform: rotate(30deg);
  }
  100% {
    opacity: 0;
  }
}
#foamMiddleContainer {
  animation-name: foamMiddleContainerAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #foamMiddleContainer {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

.foamMiddle {
  background-color: #f8c99d;
  width: 13%;
  height: 18%;
  border-radius: 50%;
  position: absolute;
  left: 40%;
  transform: rotate(21deg);
  top: 40%;
  filter: url(#scatter);
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foamMiddle2 {
  transform: rotate(-49deg);
  width: 10%;
  left: 47%;
}

@keyframes bubbleMiddle1Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  35% {
    transform: scale(1) translate(60%, 40%);
  }
  45% {
    transform: scale(0) translate(60%, 40%);
  }
  100% {
    transform: scale(0) translate(60%, 40%);
  }
}
#bubbleMiddle1 {
  left: 50%;
  top: 48%;
  width: 7%;
  height: 7%;
  animation-name: bubbleMiddle1Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle1 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes bubbleMiddle2Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  39% {
    transform: scale(1) translate(10%, 10%);
  }
  49% {
    transform: scale(0) translate(10%, 10%);
  }
  100% {
    transform: scale(0) translate(10%, 10%);
  }
}
#bubbleMiddle2 {
  left: 44%;
  top: 40%;
  width: 6%;
  height: 7%;
  transform: rotate(50deg);
  animation-name: bubbleMiddle2Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle2 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes bubbleMiddle3Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  45% {
    transform: scale(1) translate(0%, 0%);
  }
  55% {
    transform: scale(0) translate(0%, 0%);
  }
  100% {
    transform: scale(0) translate(50%, -40%);
  }
}
#bubbleMiddle3 {
  left: 41%;
  top: 49%;
  width: 7%;
  height: 8%;
  transform: rotate(36deg);
  animation-name: bubbleMiddle3Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle3 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
    }
  }
}

#bubbleMiddle4 {
  left: 51%;
  top: 45%;
  width: 2%;
  height: 2%;
  transform: rotate(36deg);
}

.bubble {
  width: 5%;
  height: 7%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 40%;
  left: 2%;
  box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}
.bubble:after {
  display: block;
  content: "";
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 23%;
  top: 12%;
  transform: rotate(-20deg);
  box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
}

#bubble2 {
  left: 5%;
  top: 30%;
  transform: rotate(25deg);
}

#bubble3 {
  left: 8%;
  top: 23%;
  transform: rotate(39deg);
  width: 3%;
  height: 5%;
}

#bubble4 {
  left: 94%;
  top: 43%;
  transform: rotate(-10deg);
  width: 5%;
  height: 7%;
}

#bubble5 {
  left: 95%;
  top: 37%;
  transform: rotate(-17deg);
  width: 3%;
  height: 4%;
}

#bubble6 {
  left: 39%;
  top: 0%;
  transform: rotate(76deg);
  width: 6%;
  height: 9%;
}

#bubble7 {
  left: 60%;
  top: 1%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble8 {
  left: 35%;
  top: 91%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble9 {
  left: 4%;
  top: 63%;
  transform: rotate(-23deg);
  width: 5%;
  height: 7%;
}

#bubble10 {
  left: 2%;
  top: 58%;
  transform: rotate(-18deg);
  width: 3%;
  height: 4%;
}

#bubble11 {
  left: 63%;
  top: 91%;
  transform: rotate(72deg);
  width: 4%;
  height: 6%;
}

#bubble12 {
  left: 31%;
  top: 3%;
  transform: rotate(68deg);
  width: 4%;
  height: 6%;
}

#bubble13 {
  left: 21%;
  top: 85%;
  transform: rotate(118deg);
  width: 4%;
  height: 6%;
}

#bubble14 {
  left: 95%;
  top: 53%;
  transform: rotate(373deg);
  width: 4%;
  height: 6%;
}

#bubble15 {
  left: 50%;
  top: 0%;
  transform: rotate(96deg);
  width: 3%;
  height: 5%;
}

.bubbleSmall {
  width: 1%;
  height: 2%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 48%;
  left: 1%;
  box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}
.bubbleSmall:after {
  display: block;
  content: "";
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 23%;
  top: 12%;
  transform: rotate(-20deg);
  box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
  opacity: 0.8;
}

#bubbleSmall2 {
  left: 3%;
  top: 37%;
  height: 1%;
}

#bubbleSmall3 {
  left: 6%;
  top: 28%;
  height: 1%;
}

#bubbleSmall4 {
  left: 96%;
  top: 35%;
  height: 1%;
}

#bubbleSmall5 {
  left: 60%;
  top: 96%;
  height: 1%;
}

#bubbleSmall6 {
  left: 8%;
  top: 72%;
  height: 1%;
}

#innerShadow {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 100%);
}

#glow {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.26) 90%, rgba(255, 255, 255, 0.9) 100%);
  position: absolute;
  z-index: 10;
}

@keyframes steamAnimation {
  0% {
    transform: translate(30%, -70%);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: translate(60%, -90%);
    opacity: 0;
  }
}
#steamWrapper {
  width: 50%;
  height: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

#steam {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: -156px 492px 123px -252px #fff;
  filter: url(#fog);
  min-width: 600px;
  min-height: 600px;
  animation-name: steamAnimation;
  animation-duration: 4s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
}
@media (max-width: 600px) {
  #steam {
    top: -80%;
    box-shadow: -156px 492px 123px -252px #fff;
  }
}
@media (max-width: 480px) {
  #steam {
    top: -160%;
    box-shadow: -166px 492px 53px -272px #fff;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-424e1b5 */#plate {
  width: 15vmin;
  height: 15vmin;
  border-radius: 49%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  position: relative;
  box-shadow: -2vmin 2vmin 5vmin 2vmin rgba(0, 0, 0, 0.2), inset 0 0 0 0.2vmin #cccccc, inset 0 0 0 0.5vmin #fafafa, inset 0 0 10vmin 0.1vmin rgba(0, 0, 0, 0.2);
}

#handle {
  width: 10%;
  height: 30%;
  background-color: #fff;
  position: absolute;
  left: 71%;
  transform: rotate(-43deg);
  top: 65%;
  border-radius: 1vmin;
  box-shadow: -2vmin -1vmin 2vmin 0vmin rgba(37, 37, 37, 0.1), 0vmin 0vmin 0vmin 0.1vmin rgba(102, 102, 102, 0.1), inset -1vmin 0 2vmin 0.1vmin #ffffff, inset 0 0 0.5vmin 0.5vmin #bbbbbb, inset 0 0 10vmin 0.1vmin rgba(195, 195, 195, 0.2);
}

#cup {
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: -2vmin 2vmin 5vmin -2vmin rgba(0, 0, 0, 0.5), inset 0 0 0.5vmin 0.2vmin #cccccc, inset 0 0 0 1vmin #fafafa;
  z-index: 1;
}

#coffeBg {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #35210d 0%, #231105 100%);
  overflow: hidden;
}

#cupInner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 0.3vmin 0 #000, 0 0 0.5vmin 2.5vmin #dedede, inset 0 0 0.4vmin 0.1vmin rgba(0, 0, 0, 0.5);
  background-color: transparent;
  z-index: 1;
}

#foamWrapper {
  filter: url("#goo") drop-shadow(0px 0px 3px #b37a3c);
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.foam {
  background-color: #f8c99d;
  width: 10%;
  height: 40%;
  border-radius: 50%;
  position: absolute;
  left: -3%;
  transform: rotate(21deg);
  top: 22%;
  filter: url("#scatter");
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foam2 {
  top: -7%;
  left: 14%;
  transform: rotate(53deg);
  width: 6%;
}

#foam3 {
  top: -21%;
  left: 43%;
  transform: rotate(75deg);
}

#foam4 {
  top: -20%;
  left: 46%;
  transform: rotate(105deg);
}

#foam5 {
  top: -9%;
  left: 70%;
  transform: rotate(122deg);
  height: 30%;
}

#foam6 {
  top: 8%;
  left: 98%;
  transform: rotate(152deg);
  height: 60%;
  width: 5%;
}

#foam7 {
  top: 20%;
  left: 97%;
  transform: rotate(181deg);
  height: 60%;
  width: 5%;
}

#foam8 {
  top: 51%;
  left: 96%;
  transform: rotate(211deg);
  height: 40%;
  width: 5%;
}

#foam9 {
  top: 62%;
  left: 70%;
  transform: rotate(224deg);
  height: 80%;
  width: 5%;
}

#foam10 {
  top: 72%;
  left: 62%;
  transform: rotate(74deg);
  height: 50%;
  width: 5%;
}

#foam11 {
  top: 59%;
  left: 51%;
  transform: rotate(104deg);
  height: 80%;
  width: 4%;
}

#foam12 {
  top: 44%;
  left: 9%;
  transform: rotate(124deg);
  height: 80%;
  width: 4%;
}

#foam13 {
  top: 7%;
  left: -6%;
  transform: rotate(-26deg);
  height: 80%;
  width: 4%;
}

@keyframes foamMiddleAnimation {
  0% {
    transform: translate(0%, 0%);
  }
  10% {
    transform: translate(0%, 0%);
  }
  50% {
    transform: translate(45%, 20%);
  }
  90% {
    transform: translate(45%, 20%);
  }
  100% {
    transform: translate(45%, 20%);
  }
}
#foamMiddleWrapper {
  animation-name: foamMiddleAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #foamMiddleWrapper {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes foamMiddleContainerAnimation {
  0% {
    transform: rotate(0);
  }
  55% {
    transform: rotate(30deg);
  }
  90% {
    transform: rotate(30deg);
  }
  100% {
    opacity: 0;
  }
}
#foamMiddleContainer {
  animation-name: foamMiddleContainerAnimation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #foamMiddleContainer {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

.foamMiddle {
  background-color: #f8c99d;
  width: 13%;
  height: 18%;
  border-radius: 50%;
  position: absolute;
  left: 40%;
  transform: rotate(21deg);
  top: 40%;
  filter: url(#scatter);
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foamMiddle2 {
  transform: rotate(-49deg);
  width: 10%;
  left: 47%;
}

@keyframes bubbleMiddle1Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  35% {
    transform: scale(1) translate(60%, 40%);
  }
  45% {
    transform: scale(0) translate(60%, 40%);
  }
  100% {
    transform: scale(0) translate(60%, 40%);
  }
}
#bubbleMiddle1 {
  left: 50%;
  top: 48%;
  width: 7%;
  height: 7%;
  animation-name: bubbleMiddle1Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle1 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes bubbleMiddle2Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  39% {
    transform: scale(1) translate(10%, 10%);
  }
  49% {
    transform: scale(0) translate(10%, 10%);
  }
  100% {
    transform: scale(0) translate(10%, 10%);
  }
}
#bubbleMiddle2 {
  left: 44%;
  top: 40%;
  width: 6%;
  height: 7%;
  transform: rotate(50deg);
  animation-name: bubbleMiddle2Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle2 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
      will-change: inherit;
    }
  }
}

@keyframes bubbleMiddle3Animation {
  0% {
    transform: scale(1) translate(0%, 0%);
  }
  45% {
    transform: scale(1) translate(0%, 0%);
  }
  55% {
    transform: scale(0) translate(0%, 0%);
  }
  100% {
    transform: scale(0) translate(50%, -40%);
  }
}
#bubbleMiddle3 {
  left: 41%;
  top: 49%;
  width: 7%;
  height: 8%;
  transform: rotate(36deg);
  animation-name: bubbleMiddle3Animation;
  animation-duration: 10s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
  /* deactivate animations for safari because it's the new IE */
}
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    #bubbleMiddle3 {
      animation-name: none;
      animation-duration: inherit;
      animation-timing-function: inherit;
    }
  }
}

#bubbleMiddle4 {
  left: 51%;
  top: 45%;
  width: 2%;
  height: 2%;
  transform: rotate(36deg);
}

.bubble {
  width: 5%;
  height: 7%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 40%;
  left: 2%;
  box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}
.bubble:after {
  display: block;
  content: "";
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 23%;
  top: 12%;
  transform: rotate(-20deg);
  box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
}

#bubble2 {
  left: 5%;
  top: 30%;
  transform: rotate(25deg);
}

#bubble3 {
  left: 8%;
  top: 23%;
  transform: rotate(39deg);
  width: 3%;
  height: 5%;
}

#bubble4 {
  left: 94%;
  top: 43%;
  transform: rotate(-10deg);
  width: 5%;
  height: 7%;
}

#bubble5 {
  left: 95%;
  top: 37%;
  transform: rotate(-17deg);
  width: 3%;
  height: 4%;
}

#bubble6 {
  left: 39%;
  top: 0%;
  transform: rotate(76deg);
  width: 6%;
  height: 9%;
}

#bubble7 {
  left: 60%;
  top: 1%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble8 {
  left: 35%;
  top: 91%;
  transform: rotate(106deg);
  width: 4%;
  height: 7%;
}

#bubble9 {
  left: 4%;
  top: 63%;
  transform: rotate(-23deg);
  width: 5%;
  height: 7%;
}

#bubble10 {
  left: 2%;
  top: 58%;
  transform: rotate(-18deg);
  width: 3%;
  height: 4%;
}

#bubble11 {
  left: 63%;
  top: 91%;
  transform: rotate(72deg);
  width: 4%;
  height: 6%;
}

#bubble12 {
  left: 31%;
  top: 3%;
  transform: rotate(68deg);
  width: 4%;
  height: 6%;
}

#bubble13 {
  left: 21%;
  top: 85%;
  transform: rotate(118deg);
  width: 4%;
  height: 6%;
}

#bubble14 {
  left: 95%;
  top: 53%;
  transform: rotate(373deg);
  width: 4%;
  height: 6%;
}

#bubble15 {
  left: 50%;
  top: 0%;
  transform: rotate(96deg);
  width: 3%;
  height: 5%;
}

.bubbleSmall {
  width: 1%;
  height: 2%;
  border-radius: 50%;
  background-color: #35210d;
  position: absolute;
  top: 48%;
  left: 1%;
  box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
}
.bubbleSmall:after {
  display: block;
  content: "";
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 23%;
  top: 12%;
  transform: rotate(-20deg);
  box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
  opacity: 0.8;
}

#bubbleSmall2 {
  left: 3%;
  top: 37%;
  height: 1%;
}

#bubbleSmall3 {
  left: 6%;
  top: 28%;
  height: 1%;
}

#bubbleSmall4 {
  left: 96%;
  top: 35%;
  height: 1%;
}

#bubbleSmall5 {
  left: 60%;
  top: 96%;
  height: 1%;
}

#bubbleSmall6 {
  left: 8%;
  top: 72%;
  height: 1%;
}

#innerShadow {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 100%);
}

#glow {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.26) 90%, rgba(255, 255, 255, 0.9) 100%);
  position: absolute;
  z-index: 10;
}

@keyframes steamAnimation {
  0% {
    transform: translate(30%, -70%);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: translate(60%, -90%);
    opacity: 0;
  }
}
#steamWrapper {
  width: 50%;
  height: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

#steam {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: -156px 492px 123px -252px #fff;
  filter: url(#fog);
  min-width: 600px;
  min-height: 600px;
  animation-name: steamAnimation;
  animation-duration: 4s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
}
@media (max-width: 600px) {
  #steam {
    top: -80%;
    box-shadow: -156px 492px 123px -252px #fff;
  }
}
@media (max-width: 480px) {
  #steam {
    top: -160%;
    box-shadow: -166px 492px 53px -272px #fff;
  }
}/* End custom CSS */
/* Start custom CSS for nested-carousel, class: .elementor-element-7cfcd69 */.heroes {
    background-image: linear-gradient(7deg, #55a3c1, #74b4c9, #65accd, #84bbcd, #74b4c9, #55a3c1);
    background-attachment: fixed;}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56255b0 */.elementor-64 .elementor-element.elementor-element-56255b0 {background-image: linear-gradient(7deg, #376585, #55a3c1, #74b4c9, #84bbcd, #74b4c9, #55a3c1, #2e566e); background-attachment: fixed;}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6269620 */.elementor-64 .elementor-element.elementor-element-6269620 {background-image: linear-gradient(7deg, #376585, #55a3c1, #74b4c9, #84bbcd, #74b4c9, #55a3c1, #2e566e); background-attachment: fixed;}/* End custom CSS */