/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
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: 1.0.1
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
*/
/**/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;900&display=swap');


/* Marquee styles */
.marquee {
  --gap: 1rem;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  min-width: 100%;
}

ul.marquee__content li {
    list-style: none;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
  .marquee__content {
    animation-play-state: paused !important;
  }
}

/* Enable animation */
.enable-animation .marquee__content {
  animation: scroll 30s linear infinite;
}

/* Reverse animation */
.marquee--reverse .marquee__content {
  animation-direction: reverse;
}

/* Pause on hover */
.marquee--hover-pause:hover .marquee__content {
  animation-play-state: paused;
}

/* Attempt to size parent based on content. Keep in mind that the parent width is equal to both content containers that stretch to fill the parent. */
.marquee--fit-content {
  max-width: fit-content;
}

/* A fit-content sizing fix: Absolute position the duplicate container. This will set the size of the parent wrapper to a single child container. Shout out to Olavi's article that had this solution 👏 @link: https://olavihaapala.fi/2021/02/23/modern-marquee.html  */
.marquee--pos-absolute .marquee__content:last-child {
  position: absolute;
  top: 0;
  left: 0;
}

/* Enable position absolute animation on the duplicate content (last-child) */
.enable-animation .marquee--pos-absolute .marquee__content:last-child {
  animation-name: scroll-abs;
}

@keyframes scroll-abs {
  from {
    transform: translateX(calc(100% + var(--gap)));
  }
  to {
    transform: translateX(0);
  }
}

/* Other page demo styles */
.marquee__content > * {
  flex: 0 0 auto;
  color: white;
}

.text-border {
	-webkit-text-stroke: 2px #ffffff61;
}

/* CSS Media Query LG */
@media only screen and (min-width : 1440px) {
	.elementor-7 .elementor-element.elementor-element-3c302d4 {
    top: 16%;
}
body:not(.rtl) .elementor-7 .elementor-element.elementor-element-dc4fc81 {
    left: -64%;
    top: 9%;
}
	body:not(.rtl) .elementor-7 .elementor-element.elementor-element-6e875d6 {
    top: 9%;
}
	body:not(.rtl) .elementor-7 .elementor-element.elementor-element-b307ce2 {
    left: -50%;
}
	
	.elementor-7 .elementor-element.elementor-element-dc4fc81 .elementor-heading-title, .elementor-7 .elementor-element.elementor-element-6e875d6 .elementor-heading-title, .elementor-7 .elementor-element.elementor-element-3c302d4 .elementor-heading-title {
		font-size: 230px;
	}
	
	.elementor-element.elementor-element-b307ce2 .elementor-heading-title {
		font-size: 200px !important;
	}
	.circule-orange-big {
		left: 165px !important;
    width: 350px !important;
    height: 350px !important;
}
}

/* CSS Fancy */

:root {
	--background: #005;
	--primary: #88D5BF;
	--secondary: #5D6BF8;
	--third: #e27fcb;
}

.shape, .shape-footer {
 	background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
  animation: morph 8s ease-in-out infinite;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  height: 400px;
  transition: all 1s ease-in-out;
  width: 400px;
  z-index: 5;
    position: absolute;
    top: -190px;
    left: -313px;
}

@keyframes morph {
  0% {
			border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
			background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
	} 
	
	50% {
			border-radius:  30% 60% 70% 40% / 50% 60% 30% 60%;
			background: linear-gradient(45deg, var(--third) 0%, var(--secondary) 100%);
	}
  
	100% {
		border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
		background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
	} 
}

.shape-footer {
 	background: linear-gradient(45deg, #e0e452 0%, #81c2b8 100%);
  animation: morph-footer 8s ease-in-out infinite;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  height: 400px;
  transition: all 1s ease-in-out;
  width: 400px;
  z-index: 5;
    position: absolute;
    left: -313px;
	top: 30px;
}

@keyframes morph-footer {
  0% {
			border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
			background: linear-gradient(45deg, #e0e452 0%, #81c2b8 100%);
	} 
	
	50% {
			border-radius:  30% 60% 70% 40% / 50% 60% 30% 60%;
			background: linear-gradient(45deg, #b5d581 0%, #81c2b8 100%);
	}
  
	100% {
		border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
		background: linear-gradient(45deg, #e0e452 0%, #81c2b8 100%);
	} 
}

/* CSS Text Glitch Effect */
.glitch-wrapper {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.glitch {
   position: relative;
   font-size: 50px;
   font-weight: 500;
   line-height: 1.2;
   color: #fff;
   z-index: 1;
	padding-bottom: 20px;
	font-family: 'Poppins', sans-serif;
}

.glitch:before {
   content: attr(data-glitch);
   position: absolute;
   top: 0;
   left: -2px;
   width: 100%;
   color: #fff;
   overflow: hidden;
   clip: rect(0, 900px, 0, 0);
   animation: noise-before 3s infinite linear alternate-reverse;
}

.glitch:after {
   content: attr(data-glitch);
   position: absolute;
   top: 0;
   left: 2px;
   width: 100%;
   color: #fff;
   overflow: hidden;
   clip: rect(0, 900px, 0, 0);
   animation: noise-after 2s infinite linear alternate-reverse;
}

@keyframes noise-before {
   0% {
      clip: rect(61px, 9999px, 52px, 0);
   }

   5% {
      clip: rect(33px, 9999px, 144px, 0);
   }

   10% {
      clip: rect(121px, 9999px, 115px, 0);
   }

   15% {
      clip: rect(144px, 9999px, 162px, 0);
   }

   20% {
      clip: rect(62px, 9999px, 180px, 0);
   }

   25% {
      clip: rect(34px, 9999px, 42px, 0);
   }

   30% {
      clip: rect(147px, 9999px, 179px, 0);
   }

   35% {
      clip: rect(99px, 9999px, 63px, 0);
   }

   40% {
      clip: rect(188px, 9999px, 122px, 0);
   }

   45% {
      clip: rect(154px, 9999px, 14px, 0);
   }

   50% {
      clip: rect(63px, 9999px, 37px, 0);
   }

   55% {
      clip: rect(161px, 9999px, 147px, 0);
   }

   60% {
      clip: rect(109px, 9999px, 175px, 0);
   }

   65% {
      clip: rect(157px, 9999px, 88px, 0);
   }

   70% {
      clip: rect(173px, 9999px, 131px, 0);
   }

   75% {
      clip: rect(62px, 9999px, 70px, 0);
   }

   80% {
      clip: rect(24px, 9999px, 153px, 0);
   }

   85% {
      clip: rect(138px, 9999px, 40px, 0);
   }

   90% {
      clip: rect(79px, 9999px, 136px, 0);
   }

   95% {
      clip: rect(25px, 9999px, 34px, 0);
   }

   100% {
      clip: rect(173px, 9999px, 166px, 0);
   }
}

@keyframes noise-after {
   0% {
      clip: rect(26px, 9999px, 33px, 0);
   }

   5% {
      clip: rect(140px, 9999px, 198px, 0);
   }

   10% {
      clip: rect(184px, 9999px, 89px, 0);
   }

   15% {
      clip: rect(121px, 9999px, 6px, 0);
   }

   20% {
      clip: rect(181px, 9999px, 99px, 0);
   }

   25% {
      clip: rect(154px, 9999px, 133px, 0);
   }

   30% {
      clip: rect(134px, 9999px, 169px, 0);
   }

   35% {
      clip: rect(26px, 9999px, 187px, 0);
   }

   40% {
      clip: rect(147px, 9999px, 137px, 0);
   }

   45% {
      clip: rect(31px, 9999px, 52px, 0);
   }

   50% {
      clip: rect(191px, 9999px, 109px, 0);
   }

   55% {
      clip: rect(74px, 9999px, 54px, 0);
   }

   60% {
      clip: rect(145px, 9999px, 75px, 0);
   }

   65% {
      clip: rect(153px, 9999px, 198px, 0);
   }

   70% {
      clip: rect(99px, 9999px, 136px, 0);
   }

   75% {
      clip: rect(118px, 9999px, 192px, 0);
   }

   80% {
      clip: rect(1px, 9999px, 83px, 0);
   }

   85% {
      clip: rect(145px, 9999px, 98px, 0);
   }

   90% {
      clip: rect(121px, 9999px, 154px, 0);
   }

   95% {
      clip: rect(156px, 9999px, 44px, 0);
   }

   100% {
      clip: rect(67px, 9999px, 122px, 0);
   }
}

img.logo-apled {
    width: 65px;
    padding-right: 10px;
}

.circule {
	background: #6724e4;
    background-image: linear-gradient(45deg,#6724e4 0%,#84bad1 100%);
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  transition: all 1s ease-in-out;
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 3px;
  right: 150px;
}

.circule-orange, .circule-orange-big {
	background: #df546a;
    background-image: linear-gradient(45deg,#df546a 0%,#eeb053 100%);
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  transition: all 1s ease-in-out;
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 220px;
	left: 100px;
  animation: circule-effect 8s ease-in-out infinite;
	z-index: 1;
}

.circule-orange-big {
    left: 160px;
    width: 120px;
    height: 120px;
}

@keyframes circule-effect {
  0% {
			background: linear-gradient(45deg, #df546a 0%, #eeb053 100%);
	} 
	
	50% {
			background: linear-gradient(45deg, #eeb053 0%, #df546a 100%);
	}
  
	100% {
		background: linear-gradient(45deg, #df546a 0%, #eeb053 100%);
	} 
}