Scale up active center item in owl carousel not working

I've seen many questions about this subject , but none of them solves my problem,so i don't think that it's gonna be a "duplicate"

So, i'm trying to scale up the item in middle of Owl Carousel 2 The answers provided on the previous questions didn't solve my problem , so here is my code

  <div class="owl-carousel ftco-owl">

          <div class="item" style="text-align:center;">
            <div class="media d-block mb-4 text-center ftco-media ftco-animate border-0" style="background-image:url(images/events/1.png);text-align:center;">

              <div class="media-body p-md-5 p-4" style="text-align:center;">
              <div style="background:rgba(245,245,245,0.9);padding:15px;height:350px;text-align:center;">
              <div style="border-style:solid;border-width:1px;border-color:#af6e4c;padding-top:150px;height:315px;text-align:center;">
                <h5 style="color:#af6e4c">Cocktail</h5>
                </div>
                </div>

              </div>
            </div>
          </div>

There is other items , i just copied one.

my JS code

    var carousel = function() {
    $('.owl-carousel').owlCarousel({
        loop: true,
        margin: 10,
        nav: true,
        stagePadding: 5,
        center:true,


        navText: ['<span class="icon-chevron-left">', '<span class="icon-chevron-right">'],
        responsive:{
            0:{
                items: 1
            },
            600:{
                items: 2
            },
            1000:{
                items: 3
            }
        }
    });
};
carousel();

And my css that isn't working

.owl-item.active.center{transform: scale(1.3);}

Thank you for your help