/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* --- Bubble Animation Styles --- */

.stage {
    position:absolute;
/*     width:min(100%,900px); */
	width:min(100%,1300px);
    aspect-ratio:1691/1973;
    overflow:hidden;
    margin-inline:auto;
		bottom: 0;
	z-index: 0!important;
}
.stage, .blob, .rotor {
  will-change: transform, opacity;
}

.blob, .rotor {
/*   transform: translate3d(0, 0, 0); */
/*   -webkit-transform: translate3d(0, 0, 0); */
/*   backface-visibility: hidden; */
/*   -webkit-backface-visibility: hidden; */
/*   perspective: 1000; */
/*   -webkit-perspective: 1000; */
}

	.stage .blob {
/* 		transform: scale(3) */
	}
.stage .blob {
	width: 300%!important
}
	.stage-1 {
		left: -15%;
	}
.blob {
	will-change: auto;
	position:absolute; 
}
.rotor {
    position:absolute; inset:0;
    transform-origin:50% 50%;
    will-change:transform;
}
.blob svg { width:100%; height:100%; display:block; }
.b19 { z-index:1; }
.b20 { z-index:2; }
	
	.stage.stage-2 {
		right: -19%;
	}

.video-controls-buttons {
	position: absolute;
    bottom: 6%;
    max-width: 122px;
    min-width: 122px;
    max-height: 122px;
    min-height: 122px;
    left: 22%;
	border-radius: 500px;
	cursor: pointer;
}

@media (max-width: 767px) {
	.video-controls-buttons {
		position: absolute;
		bottom: 6%;
		max-width: 62px;
		min-width: 62px;
		max-height: 62px;
		min-height: 62px;
		left: 22%;
		border-radius: 500px;
		cursor: pointer;
	}
}

.phone {
  position: relative;
      aspect-ratio: 557 / 930;
}
.phone .elementor-wrapper {
        aspect-ratio: 557 / 930;
}

.phone-content {
  position: absolute;
  inset: 0;
  /* Use clip-path instead of mask */
/*   clip-path: path("M30,5 L204,5 C218,5 229,16 229,30 L229,447 C229,461 218,472 204,472 L30,472 C16,472 5,461 5,447 L5,30 C5,16 16,5 30,5 Z"); */
  overflow: hidden;
}
	
	.phone-content video {
		clip-path: inset(0px 10px 0px 10px round 35px) !important
	}

.phone-content img{
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block;
}

.phone-chrome{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
@media (max-width: 767px) {
  .phone-content video {
		clip-path: inset(0px 7px 4px 7px round 30px) !important
	}
}

.video{
/*   position: relative; */
  aspect-ratio: 320 / 322;
}

/* Elementor helper if needed */
.video .elementor-wrapper{
  aspect-ratio: 320 / 322;
}

.video-content {
  mask: url(https://www.w3schools.com/css/w3logo.png);
  mask-size: 100%;
}


.video-content img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

.video-chrome{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
@media (max-width: 1023px) {
.video {
    min-width: 100%!important;
    position: relative!important;
    left: 0!important;
    right: 0!important;
    bottom: 0!important;
    top: 0!important;
}    
}

.bubble-section {
	min-width: 100%!important;
}