/*---------------------------------------------------------------------------------

 Theme Name:   DiviFlix
 Theme URI:    
 Description:  
 Author:       Divi Flix
 Author URI:   https://diviflix.com
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/
/**effects**/
.gwp_noise1::before{
  content: "";    
  position: absolute;    
  top: 0;    
  left: 0;    
  width: 100%;    
  height: 100%;   
    background-image: radial-gradient(at 20% 80%, #fff 1px, transparent 0);
   background-size: 3px 3px;    
   pointer-events: none;    
   z-index: 200;    
   opacity: .02;    
   mix-blend-mode: plus-lighter;
}
.gwp_noise3::after{
  content: "";    
  position: absolute;    
  top: 0;    
  left: 0;    
  width: 100%;    
  height: 100%;   
   background-image: radial-gradient(at 20% 80%, #fff 1px, transparent 0);    
   background-size: 3px 3px;    
   pointer-events: none;    
   z-index: 200;    
   opacity: .02;    
   mix-blend-mode: plus-lighter;
}
.gwp_noise2:before {
    content: "";
    width: auto;
    height: auto;
    display: block !important;
    background-image: url(/wp-content/uploads/2025/03/noise.webp) !important;
    opacity: .2 !important;
    background-repeat: repeat !important;
    background-size: 180px auto !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
.gwp_noise4::after{
	content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px), linear-gradient(to right, rgba(255, 255, 255, .1) 1px, transparent 1px) !important;
    background-size: 709px 530px !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 70%;
}
.gwp_shadow_effect::before {
content: '';    
position: absolute;    
width: 50%;    
height: 50%;    
top: 0%;    
left: 50%;    
background: #fcc24d;    
border-radius: 100%;    
transform: translate(-50%, -50%);    
filter: blur(200px);    z-index: -1;    
animation: glitch 3s infinite ease-in-out;    
pointer-events: none;}

.gwp_top1::after{
  content: "";    
  height: 7px;    
  width: 100px;    
  position: absolute;    
  bottom: 99%;    
  left: 50%;    
  overflow: hidden ! Important;    
  transform: translateX(-50%) scaleX(1);    
  /*background: linear-gradient(45deg, #5f32bd, #e3d5ff, #a68dda, #a68dda, #5f32bd); */ 
  /*box-shadow: 0 9px 27.1px 0 #5f32bd;	*/
  background: linear-gradient(45deg, #833ab4 0, #ff3000 100%);
  box-shadow: 0 9px 27.1px 0 #833ab4; 
  z-index: 5;       
  transform-origin: center; 
  transition: transform 1.2s ease-in-out, width 0.3s ease-out;    
  border-radius: 999px;
}
.gwp_top1:hover::after {
width: 140px;      
transition: transform 1.2s ease-in-out, width 0.3s ease-out;
}
.quadrado {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    /*background: linear-gradient(90deg, #cc3a33 0, #fd8925 100%);*/
}
.quadrado1 {
    top: -32px;
    left: -32px;
}
.quadrado2 {
    top: -32px;
    left: inherit;
    right: -32px;
}
.quadrado3 {
    top: inherit;
    bottom: -32px;
    left: -32px;;
}
.quadrado4 {
    top: inherit;
    bottom: -32px;;
    left: inherit;
    right: -32px;;
}
.quadrado5 {
    top: -78px !important;
    left: -22px !important;
}
.quadrado6 {
    top: -78px;
    left: inherit;
    right: -22px;
}
.quadrado7 {
  left:-22px;
  bottom: -32px;
}
.quadrado8 {
  right:-22px;
  bottom: -32px;
}
@keyframes glitch {
0% {
    opacity: .8;
}
50% {
opacity: .5;
}
	100% {
opacity: .8;
}
}

@keyframes gwp-updown-effect {
0% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
}
100% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
}
}
.gwp_blurb_effect {
	/*
	-webkit-animation-name: dipi-updown-effect;
    animation-name: dipi-updown-effect;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
*/
    -webkit-animation-name: gwp-updown-effect;
    animation-name: gwp-updown-effect;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
	}

/*DOT EFFECT*/
.gwp_dot_effect::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: radial-gradient(at 20% 80%, #e7e7e77d 1px, transparent 0px);
    background-size: 10px 10px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.3;
    mask-image: linear-gradient(to bottom, transparent 20%, #000);
    -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000);
}
/*END DOT Effect*/

/**END effects**/

/** font style **/
span.title{
      background: linear-gradient(272deg, #5e6688 -20.24%, #f0f6ff 53.39%, #5e6688 127.03%);    
      background-clip: text;   
      -webkit-background-clip: text;    
      -webkit-text-fill-color: transparent;    
      box-decoration-break: clone;    
      -webkit-box-decoration-break: clone;
}
span.blue2 {
    color: transparent !important;
    background: #8c52ff;
    background: linear-gradient(262deg, rgb(140 82 255) 0%, rgb(185 149 255) 50%, rgb(140 82 255) 100%);
    background-clip: text;
    -webkit-background-clip: text;
}
span.orange {
    color: #fd8925;
}
span.featured {
	 background: linear-gradient(45deg, #833ab4 0, #ff3000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pill_647 span{
    padding: 4px 8px;
    border-radius: 8px;
    border: 2px solid;
    display: inline-block;
    margin-bottom: 12px;
    margin-right: 12px;
}

.pill span{
    padding: 4px 8px;
    border-radius: 8px;
    border: 2px solid;
    display: inline-block;
    margin-bottom: 8px;
}
.pill.red span {
    border-color: #e16766;
}
.pill.purple span {
    border-color: #dfa26e;
}
.pill.black span {
    border-color: #fcc24d;
}
.pill.dark span{
	/*background-image: radial-gradient(at top center, #303030 0%, #181818 100%);
	background-color: #000;*/
	border: 1px solid #fff;
    /*background-clip: text;
	background-color: #1a2027;*/
    padding: 4px 8px;
    border-radius: 16px;
	/*background-color: #7847df;*/
	/*background-image: linear-gradient(262deg, #1E64F0 0%, rgb(185 149 255) 50%, #1E64F0 100%) !important;*/
    /*background: linear-gradient(90deg, #cc3a33 0, #fd8925 100%);
    box-shadow: -5px 5px 0 0 #dfa26eb0;*/
    /*background: linear-gradient(90deg, #12141d 0, #12141d 100%);
    /*box-shadow: -5px 5px 0 0 rgb(18 20 29 / 33%);*/
    color: #fff;

    /**new**/
    /*background-color: rgba(18, 20, 29, 0.9);
    box-shadow: -5px 5px 0 0 rgb(18 20 29 / 14%);*/
    /**new**/
}
span.purple {
		color: #8c52ff;
}
span.blue2 {
		/*color: #7847df;*/
	color: transparent !important;
    background: #8c52ff;
    background: #8c52ff;
    background: linear-gradient(262deg, rgb(140 82 255) 0%, rgb(185 149 255) 50%, rgb(140 82 255) 100%);
    background-clip: text;
    -webkit-background-clip: text;
}
span.blue{
	/*font-family: 'MonteressatB', Helvetica, Arial, Lucida, sans-serif!important;*/
	/*color: #8c52ff;*/
	color:  #b497ff;
	/*color: #7f36ff;*/
	/*color: #4B41E4;*/
	/*color: rgb(196,178,255);*/
	/*color: #c4b2ff;*/
	/*PRIMEIRA OPÇÃO 
	background: linear-gradient(262deg,rgb(140 82 255) 0%,rgb(185 149 255) 50%,rgb(140 82 255) 100%);
	background: linear-gradient(270deg, #EDBFFF 0.02%, #D261FF 44.5%, #5000FF 94.66%);
	background: linear-gradient(270deg, #A855F7 0.02%, #D261FF 44.5%, #A855F7 94.66%);
	background: linear-gradient(270deg, #ebe29a .02%, #bc944e 44.5%, #bc944e 94.66%);
	background: linear-gradient(90deg, #897DFF 0%, #A299FF 50%, #897DFF 100%);
	background-image: radial-gradient(at top right, #1DCFFC 25%, #ac01ff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	FIM PRIMERA OPÇÃO*/
}
span.red {
		/*font-family: 'MonteressatB', Helvetica, Arial, Lucida, sans-serif!important;*/
		color: #e16766;
	    /*background: linear-gradient(262deg, #f14442 0%, #ff9191 50%, #f14442 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
	
}
/*end font style*/

/*LIST*/
.gwp_list ul li {
    padding-left: 16px;
    margin-bottom: 8px;
	/*background: url(), linear-gradient(180deg, #12141d 0%, #000000 100% 100%);
    border-radius: 16px;
    padding: 16px;*/
}
.gwp_list li:last-child{
    margin-bottom: 0px!important;
}
.gwp_list.pros ul li:before {
left: 0;
    position: absolute;
    content: '\24' !important;
    background-repeat: no-repeat;
    font-family: 'ETMODULES' !important;
    font-size: 16px !important;
    /*background: linear-gradient(262deg, rgb(140 82 255) 0%, rgb(185 149 255) 50%, rgb(140 82 255) 100%)!important;*/
	
	/*Blue */
 	background-image: linear-gradient(262deg, #1E64F0 0%, rgb(185 149 255) 50%, #1E64F0 100%) !important;
	/*End Blue*/
		/*Green
	background-image: linear-gradient(262deg, #238665 0%, #344a2470 50%, #238665 100%) !important;
	background-image: linear-gradient(148deg, #165741 0%, #238665 85%);
	End Green*/
	box-shadow: -5px 5px 0 0 rgb(140 82 255 / 33%);
    color: #ffffff;
    padding: 4px 9px;
    border-radius: 40px;
    margin-left: -12px;
    margin-right: 10px;
    margin-top: 6px;
}

.gwp_list.neg ul li:before {
left: 0;
    position: absolute;
    content: '\72' !important;
    background-repeat: no-repeat;
    font-family: 'ETMODULES' !important;
    font-size: 16px !important;
    background: linear-gradient(262deg, #f14442 0%, #ff9191 50%, #f14442 100%)!important;
	box-shadow: -5px 5px 0 0 rgb(241 68 66 / 33%);;
    color: #ffffff;
    padding: 4px 9px;
    border-radius: 40px;
    margin-left: -12px;
    margin-right: 10px;
    margin-top: 6px;
}

@media (max-width: 479px) {
    .df-resp-col2-first {
        margin-right: 4.7% !important;
    }
}
@media (max-width: 479px) {
    .df-resp-col2 {
        width: 47.25% !important;
    }
}

/*end list*/

/**VIDEO TEST**/

.video-player-container {
    position: relative;
    width: 100%; /* Or a specific width, e.g., 640px */
    max-width: 800px; /* Example: limit maximum width */
    /* Maintain aspect ratio. For 16:9 videos, use 56.25% (9/16 * 100) */
    padding-bottom: 56.25%; 
    height: 0;
    overflow: hidden;
    background-color: #000; /* Fallback for video loading */
}

.video-player-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the container without distortion */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Use flexbox to easily center content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    background-color: rgba(0, 0, 0, 0.4); /* Slightly dark overlay for contrast */
    cursor: pointer;
    z-index: 10; /* Ensure overlay is on top of the video */
    opacity: 1;
    transition: opacity 0.3s ease-out; /* Smooth transition when disappearing */
}

.video-overlay.hidden {
    opacity: 0;
    pointer-events: none; /* Make overlay unclickable when hidden */
}

.video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the thumbnail covers the container without distortion */
    z-index: 5; /* Below the play button, above the video */
}

.play-button {
    background: none;
    border: none;
    cursor: pointer;
    width: 80px; /* Size of the play button */
    height: 80px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 15; /* Ensure button is on top of thumbnail and overlay */
    transition: transform 0.2s ease-in-out;
}

.play-button svg {
    width: 100%;
    height: 100%;
    /* Optional: add a slight shadow to the play button for depth */
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

.play-button:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/**END VIDEO TEST**/