.card.card-overlay-bottom:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
    background-image: linear-gradient(180deg, transparent, black);
    z-index: 1;
}
  

    .imagem-escura::before {
      content: '';
      position: relative;
      top: -0;
      left: 00;
      width: 100%;
      height: 500%;
      background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)); /* Gradiente transparente para escuro */
      z-index: 1;
    }

    .imagem-escura img {
      display: block;
      #width: 20%;
      height: 300px;
      z-index: 2; /* Garante que a imagem esteja acima da sobreposição */
    }


/*@import url("https://fonts.googleapis.com/css?family=Dosis");*/

* {
	box-sizing: border-box;
}
body {
	/*font-family: Helvetica, Arial;*/
	margin: 1em 0;
	text-align: center;
}
h1 {
	/*font-family: Dosis;*/
	/*color: #333cff;*/
	text-align: center;
	font-size: 3em;
	i {
		color: #33fff3;
	}
}
.timeline-wrapper {
	position: relative;

	&::after {
		content: "";
		position: absolute;
		height: 10px;
		transition: 0.75s ease-out;
		background-color: #33fff3;
		// background: linear-gradient(90deg, #33fff3,white);
		width: 0px;
		z-index: 0 !important;
		left: 0;
		bottom: 0px;
	}
}
.timeline {
	display: flex;
	transition: all 0.3s;
	justify-content: center;
	padding-bottom: 30px;
	border-bottom-color: #0684c2;
  border-bottom-style: solid;
  border-bottom-width: 10px;
	margin: 0 0 50px 0;

	.event {
		/*background: lighten(#0684c2, 50);*/
		background-color: #caecfd;
		cursor: pointer;
		padding: 1em;
		border-radius: 5px;
		position: relative;
		margin: 0 1em 0 1em;
		transition: all 0.3s;
		box-shadow: 0 0 5px #ccc;
		color: #333cff;
		text-align: center;

		.close {
			position: absolute;
			bottom: 10px;
			right: 10px;
			text-align: center;
			border-radius: 3px;
			width: 20px;
			height: 20px;
			cursor: pointer;
			transition: 0.2s;
			&:hover {
				color: #ff3f33;

				background: #fff;
			}
		}

		h2 {
			/*font-family: Dosis;*/
			position: relative;
			z-index: 1;

			&::before {
				content: "\f073";
				display: block;
				position: absolute;
				top: 50px;
				left: calc(50% - 15px);
				font-size: 30px;
				/*font-family: "FontAwesome";*/
				color: #0684c2;
				opacity: 0.1;
				z-index: 0;
			}
		}

		p {
			color: #0684c2;
		}

		* {
			padding: 0;
			margin: 0;
		}

		&:hover {
			// color:#33fff3;
			/*background: lighten($blue, 40);*/
			background-color: #33fff3;
			box-shadow: 0px 0px 10px #ccc;
			  transform-origin: 100px 0px;
			transform: rotate(-10deg);
			z-index: 2;
		}
			
		&:hover::after {
			/* transform: scale(1.1);
			border-color: darken($blue, 10);*/
			border-color: 333cff;
			z-index: 2;
		}

		&::after {
			// position: absolute;
			margin: 0 auto;
			position: absolute;
			bottom: -30%;
			right: 20%;
			content: "";
			display: block;
			border-radius: 15px;
			height: 30px;
			width: 30px;
			box-sizing: border-box;
			box-shadow: 0 0 5px 333cff;
			background: #fff;
			border: 5px solid #0684c2;
			transition: all 0.25s;
			z-index: 2;
		}

		&.active {
			/*background: lighten(yellow, 44);*/
			background-color: lightyellow;
			transform: scale(1.1) translateY(-5px);
			box-shadow: 0 0 10px #ccc;
			z-index: 2;
		}
		&.active::after {
			border-color: #33fff3;
			transform: scale(1.1);
		}
		
		&.previous {
			background: rgba(0,0,0,0.05);
						color: rgba(0,0,0,0.1);
			p {
										color: rgba(0,0,0,0.1);
			}
			&:hover {
				opacity:1;
			}
		}
	}
}

	/*Just to make it beautiful*/

.area{
  display: flex;
  justify-content: center;
  padding: 20px;
}
.area button{
  margin: 0 10px;
  border-radius:3px;
  border: 1px solid #9a28fc;
  padding: 10px 15px;
  color: #9a28fc;
  background-color:transparent;
  cursor:pointer;
}
.area button:hover{
  border: 1px solid white;
  color: white;
}

/** Here comes the chart*/
.chart{
  position: relative;
  width:200px;
  height:200px;
  
  border-radius: 50%;
  background-color: #1006c7;
  
  overflow:hidden;
}

.chart .radio_chart{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  
  position:absolute;
}

.chart .radio_chart.animate{
  animation-name: circled;
  animation-duration: 1s;
  animation-timing-function: linear;
  -moz-animation-name: circled;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: linear;
  -webkit-animation-name: circled;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  background: #1cabe8;
}

.chart .cap{
  border-top: #666 3px solid;
  border-left: #666 2px solid;
  position:absolute;
  width: 100%;
  height: 100%;
  
  transform: scale(.8);
  
  background-color: #4564ba;
  margin: 0 auto;
  border-radius:50%;
  
  box-shadow: 2px 2px 10px rgba(0,0,0,.5);
}

.chart .value{
  color: white;
  width:100%;
  height:100%;
  text-align: center;
  font-size:300%;
  top:37.5%;
  
  position:absolute;

  text-shadow: -2px -2px 5px #9a28fc, 2px 2px 5px #9a28fc, 0 0 50px #9a28fc;
}

/* The animation based on an hexagon
* its make the radial anim effet
*/
@keyframes circled {
    0%   {
       clip-path: polygon(100% 0, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 50% 50%);
    }
    25%  {
        clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 50%);
    }
    50%{
       clip-path: polygon(100% 0, 100% 100%, 0% 100%, 0% 100%, 0 100%, 50% 50%);
    }
    75%  {
       clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0%, 0 0, 50% 50%);
    }
    100% {
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 100% 0, 50% 50%);
    }
}
@-webkit-keyframes circled {
    0%   {
       -webkit-clip-path: polygon(100% 0, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 50% 50%);
    }
    25%  {
        -webkit-clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 50%);
    }
    50%{
       -webkit-clip-path: polygon(100% 0, 100% 100%, 0% 100%, 0% 100%, 0 100%, 50% 50%);
    }
    75%  {
       -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0%, 0 0, 50% 50%);
    }
    100% {
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 100% 0, 50% 50%);
    }
}
@-moz-keyframes circled {
    0%   {
       clip-path: polygon(100% 0, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 50% 50%);
    }
    25%  {
        clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 50%);
    }
    50%{
       clip-path: polygon(100% 0, 100% 100%, 0% 100%, 0% 100%, 0 100%, 50% 50%);
    }
    75%  {
       clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0%, 0 0, 50% 50%);
    }
    100% {
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 100% 0, 50% 50%);
    }
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: "Nunito Sans", sans-serif;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bs-heading-color);
}