/* 
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 */

/*-------- header --------*/
.et_smart_header { position: fixed;top: 0;left: 0;width: 100%;z-index: 9999;transform: translateY(0);transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);will-change: transform; }
.et_smart_header.is-hidden { transform: translateY(-100%); }
.et_nav_menu li.menu-item-647,.et_nav_menu li.menu-item-648 { display: none; }

/*-------- Typography & btn props --------*/
/* Title Font */
.et_title h1 .curve{ font-family: "Cookie", Sans-serif; font-weight: 400; font-size: 90px; line-height: 68px; background: linear-gradient(90deg, #FFFFFF 0%, #33E37E 34.62%, #FFFFFF 57.69%, #FFFFFF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.et_title h2 .curve{ font-family: "Cookie", Sans-serif; font-weight: 400; font-size: 68px; line-height: 76px; background: linear-gradient(90deg, #FFFFFF 0%, #33E37E 34.62%, #FFFFFF 57.69%, #FFFFFF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* p tag remove margin */
p:last-child{margin: 0;}

/* common button */
.et_btn a .elementor-button-content-wrapper{display: block;width: 100%;padding: 8px 20px; background-size: 300% 100%; background-image: linear-gradient(to right, #000000, #000000, #33e37e, #e3fff1); border-radius: 8px; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out;}
.et_btn a:hover .elementor-button-content-wrapper{ background-position: 100% 0; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
.et_btn a { display: flex; justify-content: center; align-items: center; color: #eee; border: 1px solid transparent; animation: gradientBorder 3s linear infinite; background: linear-gradient(to right, #050213, #050213) content-box,conic-gradient(from var(--angle),#050213 0deg,#0D2624 53.3deg,#124633 90.46deg,#1B6C46 126.24deg,#259E5D 178.82deg,#33E37E 360deg)border-box;}
.et_btn-g a{ background-image: linear-gradient(to right, #ffffff, #33e37e, #33e37e, #ffffff); background-size: 300% 100%; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
.et_btn-g a:hover{ background-position: 100% 0; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }

/*-------- Home page --------*/
/* hero section */
.et_imgglow { position: relative; }
.et_imgglow::before{ content: ''; position: absolute; width: 100%; height: 576px; top: 50%; left: 50%; transform: translate(-50%,-50%); background: radial-gradient(50% 50% at 50% 50%, #33E37E 0%, rgb(5 2 18) 100%); backdrop-filter: blur(60px); background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -1; }

/* Why choose card section */
.et_hover_border{ display: flex; justify-content: center; align-items: center; color: #eee; border: 1px solid transparent; animation: gradientBorder 3s linear infinite; background: linear-gradient(to right, #050213, #050213) content-box,conic-gradient(from var(--angle),#050213 0deg,#0D2624 53.3deg,#124633 90.46deg,#1B6C46 126.24deg,#259E5D 178.82deg,#33E37E 360deg)border-box;}
.et_hover_border:nth-child(2){ animation-delay:1s; }
.et_hover_border:nth-child(3){ animation-delay:2s; }
.et_hover_border:nth-child(4){ animation-delay:3s; }
@keyframes gradientBorder {
	from { --angle: 0deg; }
	to { --angle: 360deg; }
}
@property --angle {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0deg;
}
.et_whychoose_card:nth-child(1){ border: 1px solid transparent; background: linear-gradient(#050213, #050213) padding-box,linear-gradient(294.38deg, #33E37E -0.16%, #050213 100.91%) border-box;}
.et_whychoose_card:nth-child(2){ border: 1px solid transparent; background: linear-gradient(#050213, #050213) padding-box,linear-gradient(32.39deg, #33E37E -37.67%, #050213 117.6%) border-box;}
.et_whychoose_card:nth-child(3){ border: 1px solid transparent; background: linear-gradient(#050213, #050213) padding-box,linear-gradient(140.92deg, #33E37E 6.72%, #050213 110.59%) border-box;}
.et_whychoose_card:nth-child(4){ border: 1px solid transparent; background: linear-gradient(#050213, #050213) padding-box,linear-gradient(319.22deg, #33E37E -9.89%, #050213 110.02%) border-box;}
.et_whychoose_card:nth-child(5){ border: 1px solid transparent; background: linear-gradient(#050213, #050213) padding-box,linear-gradient(140.92deg, #33E37E 6.72%, #050213 110.59%) border-box;}

/* Key features section */
.et_features_wrap .elementor-image-box-title{ margin-top:0px; }

/* how it works section */
.et_hiwork_card { position: relative; }
.et_hiwork_card::before { content: counter(htwork-counter); counter-increment: htwork-counter; position: absolute; top: -128px; left: 16px; height: fit-content; font-family: "DM Sans", sans-serif; font-size: 150px; line-height: 150px; font-weight: 400; background: linear-gradient(174deg,rgba(255, 255, 255, 0.88) 24.88%,rgba(51, 227, 126, 0.88) 54.34%,rgba(5, 2, 19, 0.88) 71.77%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; pointer-events: none; }

/* Pricing section */
.pricing-card { will-change: transform, box-shadow; }
.pricing-card.active { animation: floatShadowSmooth 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.pricing-card.active .et_pricing_card_i { background-color: #0B1A09 !important; }
@keyframes floatShadowSmooth {
  0% { transform: translate3d(0, 0, 0); box-shadow: 0 0 32px 0 rgba(51, 227, 126, 0.65); }
  50% { transform: translate3d(0, -10px, 0); box-shadow: 0 0 46px 4px rgba(51, 227, 126, 0.95); }
  100% { transform: translate3d(0, 0, 0); box-shadow: 0 0 32px 0 rgba(51, 227, 126, 0.65); }
}
.et_pricing_card { border: 1px solid transparent; background: linear-gradient(#151515, #151515) padding-box, linear-gradient(319.22deg, #33E37E -9.89%, #151515 110.02%) border-box; }
.et_pricing_price h4{ background: linear-gradient(89deg, #33E37E 2.68% -2.32%, #FFFFFF 84.4%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* who is this plugin section */
.cards { position: relative; }
.cards__inner { display: flex; flex-wrap: wrap; gap: 20px; }
.card { --flow-space: 0.5em; --hsl: var(--hue), var(--saturation), var(--lightness); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; width: calc(20% - 16px); padding: 15px; min-height:258px; color: #eceff1; background-color: #151515; border: 1px solid rgb(159 159 159 / 20%); border-radius: 15px; }
.card h4 { text-align: center; margin: 0; min-height: 52px; }
.card:nth-child(1),.card:nth-child(2),.card:nth-child(3),.card:nth-child(4),.card:nth-child(5) { --hue: 165; --saturation: 82.26%; --lightness: 51.37%; }
.overlay { position: absolute; inset: 0; pointer-events: none; user-select: none; opacity: var(--opacity, 0); -webkit-mask: radial-gradient(25rem 25rem at var(--x) var(--y),#000 1%,transparent 50%); mask: radial-gradient(25rem 25rem at var(--x) var(--y),#000 1%, transparent 50%); transition: 400ms mask ease; will-change: mask; }
.overlay .card { background-color: hsla(146,76%,55%,0.15); border-color: hsla(146,76%,55%,1); box-shadow: 0 0 0 1px inset hsla(146,76%,55%,1); }
:not(.overlay) > .card { transition: 400ms background ease; will-change: background; }
:not(.overlay) > .card:hover { --lightness: 95%; background: hsla(var(--hsl), 0.1); }

/*-------- Media query --------*/
@media(max-width:1320px){
	.card { width: calc(25% - 15px);}
}
@media(max-width:1024px){
	.et_nav_menu li.menu-item-647,.et_nav_menu li.menu-item-648 { display: flex; }
	.et_nav_menu ul{ padding-bottom:20px; }
	.et_title h1 .curve{ font-size: 54px; line-height: 64px; }
	.et_title h2 .curve{ font-size: 46px; line-height: 56px; }
	.et_imgglow::before{ height: 436px !important; }
	.card { width: calc(50% - 10px);}
}
@media(max-width:767px){
	.et_title h1 .curve{ font-size: 48px; line-height: 36px; }
	.et_imgglow::before{ height: 366px !important; }
	.et_hiwork_card::before { top: -65px; font-size: 76px; line-height: 76px; background: linear-gradient(177deg, rgba(255, 255, 255, 0.88) 24.88%, rgba(51, 227, 126, 0.88) 54.34%, rgba(5, 2, 19, 0.88) 71.77%); background-clip: text; -webkit-background-clip: text; }
	.card { width: 100%; min-height:auto;}
	.card h4 { min-height: auto; }
}
@media(max-width:425px){
	.et_imgglow::before{ height: 266px !important; }
}