                        

:root {
	--card-height: 300px;
	--card-width: 150px;
}

* {
	box-sizing: border-box;
}

.body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: black;
}

.card {
	width: var(--card-width);
	height: var(--card-height);
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding: 0 36px;
	perspective: 2500px;
	margin: 0 50px;
	cursor: pointer;
}

.cover-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wrapper {
	transition: all 0.5s;
	position: absolute;
	width: 100%;
	z-index: -1;
}

.card:hover .wrapper {
	transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
	box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}

.wrapper::before,
.wrapper::after {
	content: "";
	opacity: 0;
	width: 100%;
	height: 80px;
	transition: all 0.5s;
	position: absolute;
	left: 0;
}

.wrapper::before {
	top: 0;
	height: 100%;
	background-image: linear-gradient(to top,
			transparent 46%,
			rgba(12, 13, 19, 0.5) 68%,
			rgba(12, 13, 19) 97%);
}

.wrapper::after {
	bottom: 0;
	opacity: 1;
	background-image: linear-gradient(to bottom,
			transparent 46%,
			rgba(12, 13, 19, 0.5) 68%,
			rgba(12, 13, 19) 97%);
}

.card:hover .wrapper::before,
.wrapper::after {
	opacity: 1;
}

.card:hover .wrapper::after {
	height: 120px;
}

.title {
	width: 100%;
	transition: transform 0.5s;
}

.card:hover .title {
	transform: translate3d(0%, -50px, 100px);
}

.character {
	width: 100%;
	opacity: 0;
	transition: all 0.5s;
	position: absolute;
	z-index: -1;
}

.card:hover .character {
	opacity: 1;
	transform: translate3d(0%, -30%, 100px);
}

body {
 background: black;
}

.area {
  text-align: center;
  font-size: 6.5em;
  color: #fff;
  letter-spacing: -7px;
  font-weight: 700;
  text-transform: uppercase;
  animation: blur .75s ease-out infinite;
  text-shadow: 0px 0px 5px #f47218, 0px 0px 7px #f47218;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 10px #f47218,
      0px 0px 10px #f47218, 
      0px 0px 25px #f47218,
      0px 0px 25px #f47218,
      0px 0px 25px #f47218,
      0px 0px 25px #f47218,
      0px 0px 25px #f47218,
      0px 0px 25px #f47218,
      0px 0px 50px #f47218,
      0px 0px 50px #f47218,
      0px 0px 50px #f47218,
      0px 0px 150px #f47218,
      0px 10px 100px #f47218,
      0px 10px 100px #f47218,
      0px 10px 100px #f47218,
      0px 10px 100px #f47218,
      0px -10px 100px #f47218,
      0px -10px 100px #f47218;
  }
}
.div1{
    text-align: center;
    margin-top: 90px;
}

button {
    margin: 20px;
}
.custom-btn {
    color: #fff;
    width: 330px;
    height: 40px;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
  }


  /* 12 */
.btn-12{
    color: #f47218;
    position: relative;
    right: 20px;
    bottom: 20px;
    border:none;
    width: 330px;
    height: 40px;
    line-height: 40px;
    -webkit-perspective: 230px;
    perspective: 230px;
  }
  .btn-12 span {
    display: block;
    position: absolute;
    width: 330px;
    height: 40px;
    border: 1px solid #f47218;
    box-shadow: 0 0 5px #f47218, 0 0 5px #f47218 inset;
    margin:0;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
  }
  .btn-12 span:nth-child(1) {
    box-shadow: 0 0 5px #f47218, 0 0 5px #f47218 inset;
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
    transform-origin: 50% 50% -20px;
  }
  .btn-12 span:nth-child(2) {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
    transform-origin: 50% 50% -20px;
  }
  .btn-12:hover span:nth-child(1) {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  .btn-12:hover span:nth-child(2) {
    background: #000;
    color: #000;
    box-shadow: 0 0 5px #f47218, 0 0 5px #f47218 inset;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
  }
  
  