/*
	Theme Name: Hello Elementor
	Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
	Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
	Author: Elementor Team
	Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
	Version: 3.4.5
	Stable tag: 3.4.5
	Requires at least: 6.0
	Tested up to: 6.8
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-elementor
	Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready,
*/

body{
	background: #AC1C1C;
	color: #fff;
}

a,
a:hover{
	color: currentcolor;
}



.card-form-title{
	font-size: 32px;
	text-align: center;
	margin-bottom: 50px;
  font-family: "Aestetico", Sans-serif;
}

.card-form-wrapper{
	max-width: 640px;
	margin: 0 auto;
}


#main-tree-wrap.top-tree{
  position: absolute;
  bottom: 0;
  width: 100%;
  
  
}


.top-tree .lightrope{
  height: 300px;
  bottom: 20%;
  top: inherit;
}



.bottom-tree .lightrope{
  top: -50px;
 
}






#wpcf7-f52-p9-o1 .wpcf7-submit{
	background: #D0A66F;
	color: #000;
	border: 0;
	font-weight: bold;
	font-size: 24px;
	width: 278px;
	height: 72px;
	margin-top: 20px;
  
  display: block;
  margin: 0 auto;
    margin-top: 0px;
  margin-top: 40px;
  
	
}
#wpcf7-f52-p9-o1 textarea{
	border-radius: 20px;
  border: 0;
  outline: none;
}

#wpcf7-f52-p9-o1 input{
	border-radius: 40px;
  border: 0;
  outline: none;
}

#wpcf7-f52-p9-o1 .form-fields br{
	display: none;
}
#wpcf7-f52-p9-o1 .wpcf7-form-control-wrap{
	margin-bottom: 15px;
	display: block;
}

.lust-script > *{
	font-family: "lust-script";
}


.tree-wrap {
  position: relative;
  width: 100%;
  height: 600px;
}




.lightrope {
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
  height: 600px;
}
.lightrope li {
  position: absolute;
  z-index: 10;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding: 0;
  top: 0;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #eaea18;
  box-shadow: 0px 4.66667px 24px 3px #00f7a5;
  -webkit-animation-name: flash-1;
  animation-name: flash-1;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/* 
.lightrope li:nth-child(2n + 1) {
  background: #eaea18;
  box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.5);
  -webkit-animation-name: flash-2;
  animation-name: flash-2;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
}
*/

.lightrope li.active-bulb {
  background: #E30420;
  box-shadow: 0px 4.66667px 24px 3px #f41a35;
  -webkit-animation-name: flash-3;
  animation-name: flash-3;
  -webkit-animation-duration: 1.1s;
  animation-duration: 1.1s;
  
  width: 25px;
  height: 25px;
  
} 

.lightrope li:nth-child(odd) {
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s;
}

.lightrope li:nth-child(3n + 1) {
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
}

.lightrope li:before {
  content: "";
  position: absolute;
  background: #222;
  width: 100%;
  height: 40%;
  border-radius: 3px;
  top: -2px;
  left: 0px;
  display: none;
}

@-webkit-keyframes flash-1 {
  0%,
  100% {
	background: #eaea18;
	box-shadow: 0px 4.66667px 24px 3px #eaea18;
  }
  50% {
	background: rgba(234, 234, 24, 0.4);
	box-shadow: 0px 4.66667px 24px 3px rgba(234, 234, 24, 0.2);
  }
}
@keyframes flash-1 {
  0%,
  100% {
	background: #eaea18;
	box-shadow: 0px 4.66667px 24px 3px #eaea18;
  }
  50% {
	background: rgba(234, 234, 24, 0.4);
	box-shadow: 0px 4.66667px 24px 3px rgba(234, 234, 24, 0.2);
  }
}
@-webkit-keyframes flash-2 {
  0%,
  100% {
	background: cyan;
	box-shadow: 0px 4.66667px 24px 3px cyan;
  }
  50% {
	background: rgba(0, 255, 255, 0.4);
	box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}
@keyframes flash-2 {
  0%,
  100% {
	background: cyan;
	box-shadow: 0px 4.66667px 24px 3px cyan;
  }
  50% {
	background: rgba(0, 255, 255, 0.4);
	box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}
@-webkit-keyframes flash-3 {
  0%,
  100% {
	background: #E30420;
	box-shadow: 0px 4.66667px 24px 3px #ff5167;
  }
  50% {
	background: rgba(227, 4, 32, 0.4);
	box-shadow: 0px 4.66667px 24px 3px rgba(234, 234, 24, 0.2);
  }
}
@keyframes flash-3 {
  0%,
  100% {
	background: #E30420;
	box-shadow: 0px 4.66667px 24px 3px #ff5167;;
  }
  50% {
	background: rgba(227, 4, 32, 0.4);
	box-shadow: 0px 4.66667px 24px 3px rgba(234, 234, 24, 0.2);
  }
}

/**/

.snow {
  background: white;
  border-radius: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  width: 5px;
  height: 5px;

  z-index: 99;
  box-shadow: 0 0px 2px 0px #fff, 10px 10px 0px 0 #fff, 50px 20px 2px 0 #fff,
	100px 30px 2px 0 #fff, 30px 70px 2px 0 #fff, 130px 70px 2px 0px #fff,
	-30px 30px 2px 0 #fff, -55px 45px 2px 0 #fff, -70px 30px 2px 0 #fff,
	-130px 40px 2px 0 #fff, -150px 90px 2px 0 #fff, -160px 80px 2px 0 #fff,
	-190px 130px 2px 0 #fff, -150px 150px 2px 0 #fff, -130px 120px 2px 0 #fff,
	-100px 130px 2px 0 #fff, -90px 80px 2px 0 #fff, -40px 100px 2px 0 #fff,
	-30px 90px 2px 0 #fff, 0px 100px 2px 0 #fff, 40px 140px 2px 0 #fff,
	70px 120px 2px 0 #fff, 50px 180px 2px 0 #fff, 100px 150px 2px 0 #fff,
	140px 120px 2px 0 #fff, 170px 90px 2px 0 #fff, 170px 130px 2px 0 #fff,
	160px 140px 2px 0 #fff, 170px 130px 2px 0 #fff, 10px 130px 2px 0 #fff,
	180px 180px 2px 0 #fff, 200px 160px 2px 0 #fff, 200px 260px 2px 0 #fff,
	250px 195px 2px 0 #fff, -200px 160px 2px 0 #fff, -200px 180px 2px 0 #fff,
	-220px 185px 2px 0 #fff, -150px 200px 2px 0 #fff, -100px 250px 2px 0 #fff,
	-80px 195px 2px 0 #fff, -190px 280px 2px 0 #fff, -150px 350px 2px 0 #fff,
	-250px 250px 2px 0 #fff, 150px 350px 2px 0 #fff, 100px 230px 2px 0 #fff;

  -webkit-animation: snow 20s linear infinite;
  -moz-animation: snow 20s linear infinite;
  -ms-animation: snow 20s linear infinite;
  animation: snow 20s linear infinite;
}

.snow::after {
  content: "";
  background: white;
  border-radius: 100%;
  left: 100px;
  position: absolute;
  top: -200px;
  width: 5px;
  height: 5px;

  z-index: 99;
  box-shadow: 0 0px 2px 0px #fff, 10px 10px 0px 0 #fff, 50px 20px 2px 0 #fff,
	100px 30px 2px 0 #fff, 30px 70px 2px 0 #fff, 130px 70px 2px 0px #fff,
	-30px 30px 2px 0 #fff, -55px 45px 2px 0 #fff, -70px 30px 2px 0 #fff,
	-130px 40px 2px 0 #fff, -150px 90px 2px 0 #fff, -160px 80px 2px 0 #fff,
	-190px 130px 2px 0 #fff, -150px 150px 2px 0 #fff, -130px 120px 2px 0 #fff,
	-100px 130px 2px 0 #fff, -90px 80px 2px 0 #fff, -40px 100px 2px 0 #fff,
	-30px 90px 2px 0 #fff, 0px 100px 2px 0 #fff, 40px 140px 2px 0 #fff,
	70px 120px 2px 0 #fff, 50px 180px 2px 0 #fff, 100px 150px 2px 0 #fff,
	140px 120px 2px 0 #fff, 170px 90px 2px 0 #fff, 170px 130px 2px 0 #fff,
	160px 140px 2px 0 #fff, 170px 130px 2px 0 #fff, 10px 130px 2px 0 #fff,
	180px 180px 2px 0 #fff, 200px 160px 2px 0 #fff, 200px 260px 2px 0 #fff,
	250px 195px 2px 0 #fff, -200px 160px 2px 0 #fff, -200px 180px 2px 0 #fff,
	-220px 185px 2px 0 #fff, -150px 200px 2px 0 #fff, -100px 250px 2px 0 #fff,
	-80px 195px 2px 0 #fff, -190px 280px 2px 0 #fff, -150px 350px 2px 0 #fff,
	-250px 250px 2px 0 #fff, 150px 350px 2px 0 #fff, 100px 230px 2px 0 #fff;
}

.snow::before {
  content: "";
  background: white;
  border-radius: 100%;
  left: -200px;
  position: absolute;
  top: -300px;
  width: 5px;
  height: 5px;

  z-index: 99;
  box-shadow: 0 0px 2px 0px #fff, 10px 10px 0px 0 #fff, 50px 20px 2px 0 #fff,
	100px 30px 2px 0 #fff, 30px 70px 2px 0 #fff, 130px 70px 2px 0px #fff,
	-30px 30px 2px 0 #fff, -55px 45px 2px 0 #fff, -70px 30px 2px 0 #fff,
	-130px 40px 2px 0 #fff, -150px 90px 2px 0 #fff, -160px 80px 2px 0 #fff,
	-190px 130px 2px 0 #fff, -150px 150px 2px 0 #fff, -130px 120px 2px 0 #fff,
	-100px 130px 2px 0 #fff, -90px 80px 2px 0 #fff, -40px 100px 2px 0 #fff,
	-30px 90px 2px 0 #fff, 0px 100px 2px 0 #fff, 40px 140px 2px 0 #fff,
	70px 120px 2px 0 #fff, 50px 180px 2px 0 #fff, 100px 150px 2px 0 #fff,
	140px 120px 2px 0 #fff, 170px 90px 2px 0 #fff, 170px 130px 2px 0 #fff,
	160px 140px 2px 0 #fff, 170px 130px 2px 0 #fff, 10px 130px 2px 0 #fff,
	180px 180px 2px 0 #fff, 200px 160px 2px 0 #fff, 200px 260px 2px 0 #fff,
	250px 195px 2px 0 #fff, -200px 160px 2px 0 #fff, -200px 180px 2px 0 #fff,
	-220px 185px 2px 0 #fff, -150px 200px 2px 0 #fff, -100px 250px 2px 0 #fff,
	-80px 195px 2px 0 #fff, -190px 280px 2px 0 #fff, -150px 350px 2px 0 #fff,
	-250px 250px 2px 0 #fff, 150px 350px 2px 0 #fff, 100px 230px 2px 0 #fff;
}

@keyframes snow {
  0% {
	transform: translate(0, 0);
	opacity: 0.15;
  }
  20% {
	transform: translate(-20px, 100px);
	opacity: 1;
  }
  70% {
	transform: translate(-70px, 250px);
	opacity: 0.7;
  }
  100% {
	transform: translate(-100px, 300px);
	opacity: 0.1;
  }
}
@-moz-keyframes snow {
  0% {
	transform: translate(0, 0);
	opacity: 0.15;
  }
  20% {
	transform: translate(-20px, 100px);
	opacity: 1;
  }
  70% {
	transform: translate(-70px, 250px);
	opacity: 0.7;
  }
  100% {
	transform: translate(-100px, 300px);
	opacity: 0.1;
  }
}
@-webkit-keyframes snow {
  0% {
	transform: translate(0, 0);
	opacity: 0.15;
  }
  20% {
	transform: translate(-20px, 100px);
	opacity: 1;
  }
  70% {
	transform: translate(-70px, 250px);
	opacity: 0.7;
  }
  100% {
	transform: translate(-100px, 300px);
	opacity: 0.1;
  }
}
@-ms-keyframes snow {
  0% {
	transform: translate(0, 0);
	opacity: 0.15;
  }
  20% {
	transform: translate(-20px, 100px);
	opacity: 1;
  }
  70% {
	transform: translate(-70px, 250px);
	opacity: 0.7;
  }
  100% {
	transform: translate(-100px, 300px);
	opacity: 0.1;
  }
}

.snow2 {
  content: "";
  position: absolute;
  top: -100px;
  left: 50%;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background: #fff;
  opacity: 0.8;

  -webkit-animation: slowSnow 40s linear infinite;
  -moz-animation: slowSnow 40s linear infinite;
  -ms-animation: slowSnow 40s linear infinite;
  animation: slowSnow 40s linear infinite;

  box-shadow: 0 0px 6px 0px #fff, -20px 50px 4px 1px #fff,
	80px 70px 4px 1px #fff, 200px 150px 4px 1px #fff, -200px 150px 4px 1px #fff,
	-100px 100px 4px 1px #fff, 90px 180px 4px 1px #fff, 190px 280px 4px 1px #fff,
	-150px 250px 4px 1px #fff, -190px 280px 4px 1px #fff,
	-190px 80px 4px 1px #fff, -250px 200px 4px 1px #fff,
	-270px 380px 4px 1px #fff, 270px 330px 4px 1px #fff,
	-200px 390px 4px 1px #fff, -240px 310px 4px 1px #fff,
	180px 380px 4px 1px #fff;
}

.snow2::before {
  content: "";
  position: absolute;
  top: -500px;
  left: 50%;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background: #fff;
  opacity: 0.8;

  -webkit-animation: slowSnow 30s linear infinite;
  -moz-animation: slowSnow 30s linear infinite;
  -ms-animation: slowSnow 30s linear infinite;
  animation: slowSnow 30s linear infinite;

  box-shadow: 0 0px 6px 0px #fff, -20px 50px 4px 1px #fff,
	80px 70px 4px 1px #fff, 200px 150px 4px 1px #fff, -200px 150px 4px 1px #fff,
	-100px 100px 4px 1px #fff, 90px 180px 4px 1px #fff, 190px 280px 4px 1px #fff,
	-150px 250px 4px 1px #fff, -190px 280px 4px 1px #fff,
	-190px 80px 4px 1px #fff, -250px 200px 4px 1px #fff,
	-270px 380px 4px 1px #fff, 270px 330px 4px 1px #fff,
	-200px 390px 4px 1px #fff, -240px 310px 4px 1px #fff,
	180px 380px 4px 1px #fff;
}

/* slowSlow */

@keyframes slowSnow {
  0% {
	transform: translate(0, 0);
  }
  20% {
	transform: translate(-20px, 100px);
  }
  70% {
	transform: translate(0px, 250px);
  }
  100% {
	transform: translate(10px, 300px);
  }
}





.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900;
background: #ffb900;
padding: 10px;
border-radius: 0;
text-align: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 10;
margin: 0;
font-weight: 500;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450;
background: #46b450;
padding: 10px;
border-radius: 0;
text-align: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 10;
margin: 0;
font-weight: 500;
color: #ffffff;
}
.wpcf7-spinner{
display: none;
}

.wpcf7-not-valid-tip {
  color: #dc3232;
  font-size: 1em;
  font-weight: normal;
  display: block;
}

.wpcf7-not-valid-tip {
  text-align: left;
  font-size: 12px;
  margin-top: 0;
  padding-left: 20px;
  color: #fff;
}



.wobble-hor-bottom {
  -webkit-animation: wobble-hor-bottom 0.8s infinite both;
          animation: wobble-hor-bottom 0.8s infinite both;
}



/* ----------------------------------------------
 * Generated by Animista on 2025-12-2 13:9:59
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation wobble-hor-bottom
 * ----------------------------------------
 */
@-webkit-keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
  }
}
@keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
  }
}


#flying-bulb {
    width: 40px;
    height: 40px;
    background-image: url('YOUR-BULB.png');
    background: red;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 999999;
}


.mask {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px; /* initial star size */
  height: 100px;
  background: black; /* the "mask" layer */
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
  transform: translate(-50%, -50%);
  mix-blend-mode: destination-out; /* this makes the star “cut out” from the overlay */
}



.generate-video-body{
  background: #fff;
  border-radius: 20px;
  padding: 40px 40px;
  color: #000;
  max-width: 900px;
  margin: 0 auto;
}



.generate-video-body button {
  background: #D0A66F;
  color: #000;
  border: 0;
  font-weight: bold;
  font-size: 24px;
  line-height: 24px;
  max-width: 278px;
  width: 100%;
  height: 72px;
  margin-top: 20px;
  display: block;
  margin: 0 auto;
    margin-top: 0px;
  margin-top: 0px;
  margin-top: 40px;
  border-radius: 110px;
}


.generate-video-body button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}


#btn-genereaza-video{
  background: #e30420;
  color: #fff;
}

.step p{
font-size: 24px;
  font-weight: 500;
  margin-top: 10px;
  
  font-family: "lust-script", Sans-serif;
  
  
}
 


#result_video{
  margin-top: 50px;
}
.download-btn {
    background: #D0A66F;
    color: #000;
    font-weight: bold;
    font-size: 24px;
    line-height: 24px;
    width: 278px;
    height: 72px;
    display: block;
    text-align: center;
    padding-top: 22px; /* vertically center text inside 72px height */
    margin: 40px auto 0 auto;
    border-radius: 110px;
    text-decoration: none;
    cursor: pointer;
}



.step{
  font-size: 28px;
  font-weight: bold;
  text-align: center;
}


.thumbnail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 25px;
    justify-content: center;
    margin-top: 40px;
}

.thumbnail-list li  img{
    cursor: pointer;
    border: 3px solid #fff;
    transition: 0.2s;
    text-align: center;
}

.thumbnail-list li img {
    width: 300px;
    height: auto;
    display: block;
    opacity: 0.7;
}

.thumbnail-list li.active img {
    border-color: #D0A66F; /* purple */
    opacity: 1;
}

.thumbnail-list .label {
    font-size: 20px;
    margin-top: 10px;
    font-weight: 900;
    font-family: "Aestetico", Sans-serif;
    text-transform: uppercase;
}


.mesaj-form{
  max-width: 500px;
  margin: 0 auto;
  margin-top: 50px;
}

.input-title {
  font-size: 16px;
  line-height: 16px;
  text-align: left;
  padding-left: 2px;
}

.mesaj-form input{
  padding: .5rem 1rem;
  transition: all .3s;
  width: 100%;
  margin-bottom: 20px;
  border-radius: 8px;
  border: 0;
  outline: none;
  border: 1px solid #ccc;
}



/* Main grid */
.lista-participanti {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ALWAYS 3 columns */
  gap: 22px;
  width: 100%;
  align-items: start;
}

/* each note is already .grid-item (same element has .container-participant) */
.grid-item{
  /* grid gives width; no calc() needed */
  transition: opacity .35s ease, transform .25s ease;
  opacity: 0;
  will-change: transform;
}

/* reveal */
.grid-item.loaded{ opacity: 1; }

/* the yellow sticky look (the same element has .container-participant) */
.container-participant{
  position: relative;
  background: #FFD72D;
  padding: 50px;
  box-shadow: 0 10px 18px rgba(0,0,0,.18), 0 4px 8px rgba(0,0,0,.12);
  transform-origin: 50% 50%;
  will-change: transform;

  /* tilt variables populated by JS */
  --rotate: 0deg; --tx: 0px; --ty: 0px;
  transform: translate(var(--ty), var(--tx)) rotate(var(--rotate));

  /* smoother text while rotated */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  min-height: 300px;
}


/* optional subtle sheen */
.container-participant::after{
  content:"";
  position:absolute; inset:0;
  border-radius:8px;             /* match card radius */
  pointer-events:none;
  background: linear-gradient(to bottom right, rgba(255,255,255,.08), rgba(0,0,0,.03));
  mix-blend-mode: overlay;
}

/* text */
.urare{
  font-family: Aestetico, Sans-serif;
  font-size: 16px; line-height: 1.35; letter-spacing: -0.5px; color:#000; text-align:center;
}
.nume-participant{
  margin-top: 12px;
  font-family: Aestetico, Sans-serif;
  font-size: 16px; font-weight:700; line-height:1.2; letter-spacing:-0.5px; color:#000; text-align:center;
}

/* empty state unchanged */
.lista-participanti .nu-exista-participanti{
  grid-column: 1/-1;
  text-align:center; color:#fff; font-family:Aestetico, Sans-serif; font-size:18px; padding:50px 0;
}

/* optional: make the layout a bit denser on big screens */
@media (min-width: 1200px){
  .lista-participanti{ gap: 26px; }
}

/* Tablet */
@media (max-width: 1024px) {
  .lista-participanti {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .lista-participanti {
    grid-template-columns: 1fr;
  }
}


@media only screen and (max-width: 767px) {
    
    .card-form-title{
      font-size: 28px;
      
    }
    
    .lightrope li {
      width: 14px;
      height: 14px;
      
    }
    .thumbnail-list li img{
      width: 100%;
    }
    .thumbnail-list{
      flex-direction: column;
    }
    .thumbnail-list li{
      width: 100%;
      flex: 0 0 100%;
    }
}



@media only screen and (max-width: 500px) {
    
    .step {
      font-size: 21px;
      line-height: 26px;
    }
    
    .thumbnail-list .label {
    font-size: 16px;
  }
    .top-tree .lightrope {
      height: 180px;
      bottom: 0;
      
    }
    
    .bottom-tree .lightrope {
      top: 0;
    }
    /* .step-2 p {
    font-size: 14px;
  }
     */
    .step p{
    font-size: 18px;
    
  }
    .input-title {
      padding-left: 12px;
      margin-bottom: 5px;
      
    }
    
    
    .whatsapp-btn,
    .download-btn,
    .generate-video-body button {
      font-size: 18px;
      line-height: 18px;
      max-width: 278px;
      width: 100%;
      height: 56px;
      margin-top: 20px;
    }
    
    .thumbnail-list .label{
      margin-top: 0;
    }
    
    #result_video,
    .mesaj-form{
      margin-top: 30px;
    }
    .generate-video-body{
      padding: 30px 30px;
    }
    
    .download-btn{
      padding-top: 18px;
    }
}