<style>
    .card.bg-dark.btn-hover:hover
    {
        background-color:#2c3144 !important;
    }
</style>
<section class="container">
    <div class="card bg-light-transparent">
		<div class="card-body">
            <div class="card">
                <div class="card-body">
                   <div class="row">
                        <div class="col">
                            <div 
                                class="btn card bg-dark btn-hover" 
                                data-trigger="hover" 
                                data-tooltip="tooltip" title="" 
                                data-original-title="Add Claim Item for Local Travel (Malaysia)" 
                                onclick="localTravel();">
                                <div class="card-body text-white text-center">
                                    <!-- <h3><i class="animated infinite pulse delay-2s fas fa-taxi"></i> Local Travel</h3> -->
                                    <h3><i class="animated pulse delay-2s fas fa-taxi"></i> Local Travel</h3>

                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div 
                                class="btn card bg-dark text-center btn-hover" 
                                data-trigger="hover" data-tooltip="tooltip" 
                                title="" data-original-title="Add Claim Item for International Travel (other than Malaysia)"
                                onclick="internationalTravel();">
                                <div class="card-body text-white">
                                    <!-- <h3><i class="animated infinite slideInLeft delay-2s fas fa-plane"></i> International Travel</h3> -->
                                    <h3><i class="animated slideInLeft delay-2s fas fa-plane"></i> International Travel</h3>

                                </div>
                            </div>
                        </div>
                   </div>
                </div>
            </div>
		</div>
	</div>
</section>
<script>
    function localTravel()
    {
        $('.animated').removeClass('infinite');
        console.log('local');
        $('#option_local').removeClass('d-none');
        $('#option_international').addClass('d-none');
    }

    function internationalTravel()
    {
        $('.animated').removeClass('infinite');
        console.log('international');
        $('#option_international').removeClass('d-none');
        $('#option_local').addClass('d-none');
    }
</script>