input[type="date"]{
    background-color: #0080ff;
    padding: 15px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-family: "Roboto Mono",monospace;
    color: #ffffff;
    font-size: 18px;
    border: none;
    outline: none;
    border-radius: 5px;
}
::-webkit-calendar-picker-indicator{
    background-color: #ffffff;
    padding: 5px;
    cursor: pointer;
    border-radius: 3px;
}

.container2
{
	position: relative;
	display: flex;
	padding: 80px 40px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 80px;
}
.card
{
	position: relative;
	width: 350px;
	height: 180px;
	background: #333;
	transition: 0.5s;
}

.card:hover
{
	height: 450px;
}
.card .lines
{
	position: absolute;
	inset: 0;
	background: #000;
	overflow: hidden;
}
.card .lines::before
{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 600px;
	height: 120px;
	background: linear-gradient(transparent, #45f3ff, #45f3ff,#45f3ff, transparent);
	animation: animate 4s linear infinite;
    animation-play-state:paused;
}
.card:hover .lines::before
{
	animation-play-state: running;
}
 
@keyframes animate
{
	0%
	{
		transform: translate(-50%,-50%) rotate(0deg);
	}
 	100%
	{
		transform: translate(-50%,-50%) rotate(360deg);
	}
}

.card .lines::after
{
	content: '';
	position: absolute;
	inset: 3px;
	background: #292929;
}

.card .imgBx
{
	position: absolute;
	top: -60px;
	left: 50%;
	width: 150px;
	height: 150px;
	transform: translateX(-50%);
	background: #000;
	transition: 0.5s;
	z-index: 10;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.card:hover .imgBx
{
	top:25px;
	width: 200px;
	height: 200px;
}
.card .imgBx::before
{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 500px;
	height: 150px;
	transform: translate(-50%,-50%);
	background: linear-gradient(transparent, #ff3c7b, #ff3c7b,#ff3c7b, transparent);
	animation: animate2 2s linear infinite;
    animation-play-state:paused;
}
.card:hover .imgBx::before
{
	animation-play-state: running;
}
@keyframes animate2
{
	0%
	{
		transform: translate(-50%,-50%) rotate(360deg);
	}
 	100%
	{
		transform: translate(-50%,-50%) rotate(0deg);
	}
}
.card .imgBx::after
{
	content: '';
	position: absolute;
	inset: 3px;
	background: #292929;
}
.card .imgBx img
{
	position: absolute;
	width: 100px;
	z-index: 1;
	/*filter: invert(1); */
	opacity: 0.5;
	transition: 0.5s;
}
.card:hover .imgBx img
{
	opacity: 1;
}

.card .content
{
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	overflow: hidden;
}
.card .content .details
{
	padding: 30px 20px;
	text-align: center;
	width: 100%;
	transition: 0.5s;
	transform: translateY(145px);
}
.card:hover .content .details
{
	transform: translateY(0px);
}
.card .content .details h2
{
	font-size: 1.5em;
	font-weight: 500;
	color:#45f3ff;
	line-height: 1.2em;
}

.card .content .details p
{
	color:#fff;
	opacity :0;
	transition: 0.5s;
	
}

.card:hover .content .details p
{
	opacity :1;
}

.card .content .details a
{
	display: inline-block;
	padding: 8px 15px;
	background: #45f3ff;
	color:#292929;
	margin-top: 10px;
	font-weight: 500;
	
}

.box
{
	position: relative;
	width: 400px;
	height: 300px;
	background: rgba(0,0,0,0.75);
	border-radius:20px;
	display: flex;
	justify-content: center ;
	align-items: center;
	overflow: hidden;
}
.box::after
{
	content:'';
	position: absolute;
	width: 400px;
	height: 400px;
	background-image:conic-gradient(transparent,transparent,transparent,#d400d4);
	animation: animate 4s linear infinite;
	animation-delay: -2s;
}
.box::before
{
	content:'';
	position: absolute;
	width: 400px;
	height: 400px;
	background-image:conic-gradient(transparent,transparent,transparent,#00ccff);
	animation: animate 4s linear infinite;
}
@keyframes animate
{
	0%
	{
		transform:rotate(0deg);
	}
	100%
	{
		transform:rotate(360deg);
	}
}
.box span
{
	position: absolute;
	inset: 5px;
	border-radius: 16px;
	background: #0c1022;
	z-index:1;	
}
.box h2
{
	position: relative;
	z-index: 2;
	color: #fff;
	font-size: 5em;
}
.box h3
{
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 1em;
}

.box hr
{
    border: 3px;
    height: 3px;
    color: #333; 
    background-color: hsl(140, 36%, 95%);
}
.glow {
	font-size: 80px;
	color: #fff;
	text-align: center;
	animation: glow 1s ease-in-out infinite alternate;
  }
  
  @-webkit-keyframes glow {
	from {
	  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0cfa18, 0 0 40px #10ec22, 0 0 50px #96f719, 0 0 60px #51f510, 0 0 70px #7af804;
	}
	
	to {
	  text-shadow: 0 0 20px #fff, 0 0 30px #00ff4c, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
	}
  }

  .gold-glow {
	-webkit-animation: gold-glow 0.75s ease-in-out infinite alternate;
	-moz-animation: gold-glow 0.75s ease-in-out infinite alternate;
	animation: gold-glow 0.75s ease-in-out infinite alternate;
  }
  
  @-webkit-keyframes gold-glow {
	from {
	  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
	}
	to {
	  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
	}
  }

  .button {
	background-color: #004A7F;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: none;
	color: #FFFFFF;
	cursor: pointer;
	display: inline-block;
	font-family: Arial;
	font-size: 20px;
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
	-webkit-animation: glowing 1500ms infinite;
	-moz-animation: glowing 1500ms infinite;
	-o-animation: glowing 1500ms infinite;
	animation: glowing 1500ms infinite;
  }
  @-webkit-keyframes glowing {
	0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
	50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
	100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
  }
  
  @-moz-keyframes glowing {
	0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
	50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; }
	100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
  }
  
  @-o-keyframes glowing {
	0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
	50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
	100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  }
  
  @keyframes glowing {
	0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
	50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
	100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  }