.box2 {
  position: absolute;
  top: 15%;
  right: 0;
  transform: translateY(-50%);
  z-index: 3;
}

.btn2:link,
.btn2:visited{
  text-decoration: none;
  text-transform:uppercase;
  position:relative;
  top:0;
  left:0;
  padding:20px 20px;
  border-radius: 8px !important;
  display:inline-block;
  transition: all .5s;
}

.btn2-white2{
  background:#f03629;
  color:#000;
}

.btn2:hover{
   box-shadow:0px 10px 10px rgba(0,0,0,0.2);
   transform : translateY(-3px);
}

.btn2:active{
  box-shadow:0px 5px 10px rgba(0,0,0,0.2);
  transform : translateY(-1px);
}

.btn2-bottom-animation-2{
  animation:comeFromBottom 1s ease-out .8s;
}

.btn2::after{
  content:"";
  text-decoration: none;
  text-transform:uppercase;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  border-radius: 8px !important;
  display:inline-block;
  z-index:-1;
  transition: all .5s;
}

.btn2-white::after {
    background: #f03629;
}

.btn2-animation-1:hover::after {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}

.btn2 {
  display: inline-flex;          /* makes text + icon align */
  align-items: center;           /* vertical alignment */
  gap: 10px;                     /* space between text and icon */
}

.btn2-icon {
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.btn2-icon .icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  transition: opacity 0.3s ease;
}

.btn2-icon .hover {
  opacity: 0; /* hidden by default */
}

.btn2:hover .btn2-icon .default {
  opacity: 0; /* fade out default */
}

.btn2:hover .btn2-icon .hover {
  opacity: 1; /* fade in hover */
}

@keyframes comeFromBottom{
  0%{
    opacity:0;
    transform:translateY(40px);
  } 
  100%{
    opacity:1;
    transform:translateY(0);
  }
}
