.box2{
  position:absolute;
  top:50%;
  left:70%;
  transform : translate(-50% ,-50%);
}

.btn:link,
.btn:visited{
  text-decoration: none;
  text-transform:uppercase;
  position:relative;
  top:0;
  left:0;
  padding:20px 40px;
  border-radius:100px;
  display:inline-block;
  transition: all .5s;
}

.btn-white2{
  background:#f03629;
  color:#000;
}

.btn:hover{
   box-shadow:0px 10px 10px rgba(0,0,0,0.2);
   transform : translateY(-3px);
}

.btn:active{
  box-shadow:0px 5px 10px rgba(0,0,0,0.2)
  transform:translateY(-1px);
}

.btn-bottom-animation-2{
  animation:comeFromBottom 1s ease-out .8s;
}

.btn::after{
  content:"";
  text-decoration: none;
  text-transform:uppercase;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  border-radius:100px;
  display:inline-block;
  z-index:-1;
  transition: all .5s;
}

.btn-white::after {
    background: #f03629;
}

.btn-animation-1:hover::after {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}

.btn {
  display: inline-flex;          /* makes text + icon align */
  align-items: center;           /* vertical alignment */
  gap: 10px;                     /* space between text and icon */
}

.btn-icon {
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.btn-icon .icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  transition: opacity 0.3s ease;
}

.btn-icon .hover {
  opacity: 0; /* hidden by default */
}

.btn:hover .btn-icon .default {
  opacity: 0; /* fade out default */
}

.btn:hover .btn-icon .hover {
  opacity: 1; /* fade in hover */
}

@keyframes comeFromBottom{
  0%{
    opacity:0;
    transform:translateY(40px);
  } 
  100%{
    opacity:1;
    transform:translateY(0);
  }
}