@vite(['resources/sass/app.scss', 'resources/js/app.js'])
<div id="coming-soon" class="d-flex flex-column justify-content-center align-items-center">
        <picture class="text-center">
        <source media="(max-width:991px)" srcset="{{ asset('images/Header-Footer-Mobile/OCera_Logo_Header.webp') }}" type="image/webp">
            <source srcset="{{ asset('images/Header-Footer-Desktop/OCera_Logo_2.webp') }}" type="image/webp">
            <img id="header-logo" src="{{ asset('images/Header-Footer-Desktop/OCera_Logo_2.png') }}" alt="o'cera Logo" title="o'cera Logo" class="mw-100 mb-lg-4 mb-5"/>
        </picture>
    <b class="banner-title montserrat-bold text-green mt-lg-0 mb-lg-0 mt-5 mb-5">COMING SOON</b>
    <p class="banner-paragraph text-green mt-lg-3 mt-2 text-center">We are currently tweaking few details, <br> Stay Tuned!</p>
</div>
<style>
    #header-logo{
        width: 50%;
        @media(max-width:991px){
            width: 75%;
        }
    }
    .banner-title{
        @media(max-width:991px){
            font-size: 5.5rem;
        }
    }
    .banner-paragraph{
        @media(max-width:991px){
            font-size: 2.5rem;
        }
    }
</style>