<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="home-catering"> <div class="container"> <div class="row"> <div class="col-lg-4"> <div class="catering-wrapper"> <div class="section-title"> <h2>Catering</h2> </div> <div class="heading"> <h1>WE CATER ALL TYPES OF EVENTS!</h1> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem ipsum dolor, sit amet consectetur</p> <ul class="nav-tabs mt-3rem"> <li class="nav-item active"> <a class="nav-link" data-toggle="tab" data-target="#tab1"> <img src="/ext/antunsbyminar.thefastbite.com/images/wedding.PNG" /> Wedding Reception </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" data-target="#tab2"> <img src="/ext/antunsbyminar.thefastbite.com/images/mehandi.PNG" /> Mehandi </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" data-target="#tab3"> <img src="/ext/antunsbyminar.thefastbite.com/images/birthday-party.PNG" /> Birthday Parties </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" data-target="#tab4"> <img src="/ext/antunsbyminar.thefastbite.com/images/quinceañera.PNG" /> Quinceañera </a> </li> </ul> </div> </div> <div class="col-lg-8"> <div class="tab-content"> <div id="tab1" class="tab-pane active"><img class="img-fluid" src="/ext/antunsbyminar.thefastbite.com/images/wed.jpg" /></div> <div id="tab2" class="tab-pane"><img class="img-fluid" src="/ext/antunsbyminar.thefastbite.com/images/meh.jpg" /></div> <div id="tab3" class="tab-pane"><img class="img-fluid" src="/ext/antunsbyminar.thefastbite.com/images/bdp.jpg" /></div> <div id="tab4" class="tab-pane"><img class="img-fluid" src="/ext/antunsbyminar.thefastbite.com/images/quin.jpg" /></div> <div id="tab5" class="tab-pane"><img class="img-fluid" src="/ext/antunsbyminar.thefastbite.com/images/swee.jpg" /></div> <div id="tab6" class="tab-pane"><img class="img-fluid" src="/ext/antunsbyminar.thefastbite.com/images/corp.jpg" /></div> </div> </div> </div> </div> </section>

.home-catering .nav-tabs { display: flex; flex-direction: column; gap: 15px; border: none; } .home-catering .nav-tabs li { margin: 0 !important; width: 100%; } .home-catering .nav-tabs li a.nav-link { padding: 8px; border-radius: 4px; display: flex; font-weight: 700; gap: 16px; align-items: center; transition: 400ms all cubic-bezier(0.075, 0.82, 0.165, 1); background: transparent; cursor: pointer; } .home-catering .nav-tabs li a.nav-link:is(:hover, :focus-visible) { background: #fff6eb; } .home-catering .nav-tabs li a.nav-link img { max-width: 40px; transition: 400ms all cubic-bezier(0.075, 0.82, 0.165, 1); } .home-catering .nav-tabs li.active a.nav-link { background: #ff511c; } .home-catering .nav-tabs li.active a.nav-link img { filter: brightness(0) invert(1); } .home-catering .catering-wrapper { background-color: #f1f5f9; border-radius: 15px; padding: 30px; position: relative; z-index: 1; } .home-catering .tab-content img { aspect-ratio: 1; object-fit: cover; width: 100%; object-position: center; border-radius: 15px; box-shadow: 0 8px 32px hsl(0deg 0% 0% / 10%); } .home-catering .tab-content .tab-pane.active img { animation: 700ms slide cubic-bezier(0.075, 0.82, 0.165, 1) forwards 1; } .menu_list_outersec p { color: #000 !important; } .menu_list_outersec .menu .multicol_itemwrapper { width: 100% !important; padding: 20px 10px 0 10px !important; margin: 0 !important; } .menu_list_outersec .menu .multicol_itemwrapper p:empty{ display: none; } .menu_list_outersec .menu .multicol_itemwrapper .spn-item-price { top: 20px !important; } @keyframes slide { from { opacity: 0.5; scale: 0.75; } to { opacity: 1; scale: 1; } }