As a complete beginner, I am currently in the process of learning bootstrap. I have noticed that the animation breaks when I apply it, specifically the scaling part. Interestingly, the animation works perfectly fine without Bootstrap. I am wondering if there are any alternative solutions?
HTML
<main class="row g-0 align-items-center">
<div class="col-md-6 g-0 ">
<div class="left_side text-center ">
<h1 class="titulo_index">¿Quienes Somos?</h1>
<p class="texto_index">Desde 1933 tostamos nuestro propio café.
Lo cuidamos desde la selección de sus granos, hasta la taza, conservando el amor y el respeto que tenemos por lo que hacemos, desde el primer día. Por eso nuestro café es <strong> ÚNICO.</strong>
</p>
<a id="i_link" class="index_link" href="menu.html">¡Conoce nuestro menu!</a>
</div>
</div>
</main>
CSS
.index_link{
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 40px;
padding: 10px 20px 10px 20px;
width: 400px;
color: black;
background-color: #d99771;
border: #442b0c 2px solid;
border-radius: 25px;
text-align: center;
text-transform: capitalize;
text-decoration: none;
transition: 0.3s;
box-shadow: 3px 5px 3px black;
}
.index_link:hover{
background-color: #dbb098;
scale: 1.2;
box-shadow: 10px 10px 8px black;
}