/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 22 2024 | 08:11:57 */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

body{
	overflow-x:hidden !important;
}

.moving .lid,.moving .fruits,.moving .intro{
	transition: all 300ms ease-in-out;	
	
}
.moving .fruits{
	transform:scale(0);
}

.moving .intro p{
    position: relative;
    overflow: hidden;
	max-height:0;
	transition: all 300ms ease-in-out;	

}
.moving:hover .lid{
    top: -150px;
}

.moving:hover .fruits{
	transform:scale(1.05) rotate(40deg);
}
.moving:hover .intro p{
	max-height:100px;
}
#logo{
	display:none;
}
.icon .hfe-site-logo{
	height:64px;
}
.menu-image-wrapper{
	position:relative;
	overflow:hidden;
}

.menu-image-wrapper img{
	right:-150%;
	top:50%;
	transform:translatey(-50%);
	position:absolute;
	transition:all 300ms ease-out;
}

.menu-image-wrapper img.active{
	right:0;
	 padding: 20px;
}

.menu-image-wrapper .menu-storage-image {
	right:0;
	top:50%;
	transform:translatey(-50%);
	position:absolute;
	transition:all 300ms ease-out;
	    padding: 10px;
}
.menu-image-wrapper .menu-storage-image img{
	position:relative;
	right:auto;
	top:auto;
		transform:translatey(0);
}
.menu-image-wrapper .menu-storage-image.hover {
	right:-150%;
}
.menu-link{
	height:44px;
}
.menu-link .menu-hover-button a{
	height:0;
	overflow:hidden;
	transition:all 300ms ease-out;
}
.menu-link:hover .menu-hover-button a{
	height:13px;
}

header .elementor-sticky{
	transition:all 300ms ease-out;
}
header.sticky .elementor-sticky{
	background-color:#ffffff !important;
}
.right-image-slide.moving{
	transition: all 1000ms ease-in-out;
	transform:translatex(100%);
}
.left-image-slide.moving{
	transition: all 1000ms ease-in-out;
	transform:translatex(-100%);
}
.back-image-moving.moving img{
	transition: all 1000ms ease-in-out;
	top: 70vh !important;
    transform: scale(1.3);
}
.text-container.moving{
	top:35% !important;
	transition: all 1000ms ease-in-out;
	transition-delay: 1000ms;
}
.back2-image-moving.moving img{
	top:-20vh !important;
	transition: all 1000ms ease-in-out;
	transition-delay: 500ms;
}
.back3-image-moving.moving img{
	left:-7% !important;
	transition: all 1000ms ease-in-out;
	transition-delay: 1000ms;
}
.back4-image-moving.moving img{
	left:10% !important;
	transition: all 1000ms ease-in-out;
	transition-delay: 1500ms;
}
.house-scale.moving{
	animation-name: scaleopac;
  	animation-duration: 2s;
	animation-delay: 2s;
	 animation-fill-mode: forwards;
	transform-origin:center center;
}
@keyframes scaleopac {
  from {transform:scale(1);}
  to {transform:scale(10);opacity:0;}
}
.top-opac.moving,.bot-opac.moving{
	animation-name: opac;
  	animation-duration: 1s;
	animation-delay: 2s;
	 animation-fill-mode: forwards;
	transform-origin:top center;
}
@keyframes opac {
  from {transform:scale(1)}
  to {transform:scale(2); opacity:0;}
}
.header-pos{
	position:relative;
}

.video-container.moving{
	animation-name: scale;
  	animation-duration: 1s;
	animation-delay: 1s;
	 animation-fill-mode: forwards;
	
}
@keyframes scale {
  from {border-radius:50px;}
  to {width:100%; height:100vh;margin:0;position:absolute;border-radius:0;}
}
.video-container.moving video{
	width:100% !important; height:100% !important;
}
.elementor-element.elementor-element-4fb2e8cc.e-con-full.video-container.e-flex.e-con.e-child.moving{
	border-radius:0 !important;
}
/* @keyframes videofull {
  from {}
  to {}
} */


.header-pos{
	position:relative;
}
.header-pos:after{
	content:"";
	position:absolute;
	
	left:0;
	bottom:0;
	width:100%;
	height:100%;
	background: #0b748a;
background: -webkit-linear-gradient(0deg, #0b748a 0%, rgba(71, 74, 255, 0) 100%);
background: linear-gradient(0deg, #0b748a 0%, rgba(71, 74, 255, 0) 30%);
	z-index:5;
}
strong{
	font-weight:700;
}

.wavy-wave {
	display: block;
	height: 4px;
	width: 33%;
	background-color: #0B748A;
	margin: 0 auto;
}
.e-hotspot__direction-mask.e-hotspot--tooltip-position{
	width:400px;
}
.e-hotspot__direction-mask.e-hotspot--tooltip-position .e-hotspot__tooltip{
	width:400px;
	text-wrap:wrap;
}
.e-hotspot__direction-mask.e-hotspot--tooltip-position .e-hotspot__tooltip p:last-child{
	font-size:15px;
	margin:40px 0 0 0;
}
.hotspot_button{
	background-color:transparent;
	border-radius:50px;
	padding:5px 25px;
	border:1px solid #fff;
	color:#fff;
	font-size:15px;
	line-height:14px;
	transition:all 300ms ease-out;
	margin-top:20px;
}
.hotspot_button:hover{
	background-color:#fff;
	color:#EF6323;
}

.wavy-vague {
	position: absolute !important;
		top: 20px;
	left:50%;
	transform:translateX(-50%);
  display: block;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform-origin: center;
	
}

.wavy-vague::after {
  display: block;
  content: "";
  width: 200%;
  height: 100%;
  background-image: url('https://playground.diizz.com/wp-content/uploads/2024/05/wave-anime.png');
  background-repeat: repeat-x;
  background-size: 100% 100%;
  animation: wavy 5s linear infinite forwards;
}

@keyframes wavy {
   to {
        transform: translateX(-50%)
    }
}


.why-back {
	position: absolute !important;
  
	left:50%;
	transform:translateX(-50%);
  display: block;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform-origin: center;
	opacity:0;
}

.why-back::after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
/*   background-color:#0B748A; */
background-image:url('https://playground.diizz.com/wp-content/uploads/2024/05/wave-back.png');
	background-position:top;
	background-repeat:no-repeat;
	background-size:cover;
	
}

.eapps-instagram-feed-posts-item{
    border-radius: 25px !important;
	background:none;
}
.eapps-instagram-feed-header-user-picture {
	border-radius: 50% !important;
}