Итак, у меня на сайте 3 кнопки социальных сетей. Я добавляю к ним эффект наведения, чтобы они стали красными с эффектом плавного перехода. Но по какой-то причине эффект перехода применяется только к последнему значку svg .. Почему и как я могу изменить его, чтобы он применялся ко всем
<div class="socials">
<svg xmlns="http://www.w3.org/2000/svg" width="25.029" height="25.029" viewBox="0 0 25.029 25.029">
<g id="Icon_feather-instagram" data-name="Icon feather-instagram" transform="translate(1.5 1.5)">
<path id="Path_1" data-name="Path 1" d="M8.507,3H19.522a5.507,5.507,0,0,1,5.507,5.507V19.522a5.507,5.507,0,0,1-5.507,5.507H8.507A5.507,5.507,0,0,1,3,19.522V8.507A5.507,5.507,0,0,1,8.507,3Z" transform="translate(-3 -3)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Path_2" data-name="Path 2" d="M20.829,15.695a4.406,4.406,0,1,1-3.712-3.712,4.406,4.406,0,0,1,3.712,3.712Z" transform="translate(-5.408 -5.374)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Path_3" data-name="Path 3" d="M26.25,9.75h0" transform="translate(-9.177 -4.793)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
</g>
</svg>
</div>
<div class="socials">
<svg xmlns="http://www.w3.org/2000/svg" width="24.797" height="26.183" viewBox="0 0 24.797 26.183">
<path id="Icon_feather-github" data-name="Icon feather-github" d="M10.71,21.316C5.2,22.968,5.2,18.562,3,18.011M18.42,24.62V20.357a3.712,3.712,0,0,0-1.035-2.875c3.459-.386,7.093-1.7,7.093-7.71a5.991,5.991,0,0,0-1.651-4.13,5.584,5.584,0,0,0-.1-4.153s-1.3-.386-4.307,1.63a14.738,14.738,0,0,0-7.71,0C7.7,1.1,6.4,1.489,6.4,1.489a5.584,5.584,0,0,0-.1,4.153A5.992,5.992,0,0,0,4.652,9.805c0,5.97,3.635,7.281,7.093,7.71a3.712,3.712,0,0,0-1.035,2.842V24.62" transform="translate(-1.181 0.063)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
</svg>
</div>
<div class="socials">
<svg xmlns="http://www.w3.org/2000/svg" width="23.131" height="23.131" viewBox="0 0 23.131 23.131">
<path id="Icon_awesome-linkedin" data-name="Icon awesome-linkedin" d="M21.478,2.25H1.647A1.659,1.659,0,0,0,0,3.918v19.8a1.659,1.659,0,0,0,1.647,1.668H21.478a1.664,1.664,0,0,0,1.652-1.668V3.918A1.664,1.664,0,0,0,21.478,2.25ZM6.991,22.076H3.563V11.038H7V22.076ZM5.277,9.53A1.988,1.988,0,1,1,7.264,7.542,1.989,1.989,0,0,1,5.277,9.53ZM19.842,22.076H16.413v-5.37c0-1.28-.026-2.927-1.781-2.927-1.786,0-2.06,1.394-2.06,2.835v5.463H9.144V11.038h3.289v1.508h.046a3.611,3.611,0,0,1,3.248-1.781c3.47,0,4.115,2.287,4.115,5.261Z" transform="translate(0 -2.25)" fill="#fff"/>
</svg>
</div>
.socials:hover path{
fill: #FF4141;
transition: 0.5s ease;
}