
<div class="flex flex-col md:flex md:flex-row justify-center items-center mx-auto lg:pt-20 pt-8">
    <div class="flex flex-wrap justify-center items-center w-full md:w-1/3">
     <h1 class="font-semibold">The Vision</h1>
     <h3 class="blue font-normal my-0">Pioneering. Empowering.</h3>
    </div>
    <div class="w-full md:w-2/3">
        <div class="flex flex-wrap justify-center md:justify-end">
            <div class="relative my-6 mx-2">
                <img class="w-full object-cover rounded-md" src="/images/vision1.png" alt="Random image">
                <div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 duration-300 rounded-md absolute inset-0  flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Most countries only rely on cable networks, meaning they lack control over their own digital infrastructure. </div>
            </div>
            <div class="relative my-6 mx-2">
                <img class="w-full object-cover rounded-md" src="/images/vision2.png" alt="Random image">
                <div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0  flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Today, most of the cloud is owned and operated by a few major companies taking all the profits and control of the Internet.</div>
            </div>
            <div class="relative my-6 mx-2">
                <img class="w-full object-cover rounded-md" src="/images/vision3.png" alt="Random image">
                <div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0  flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Digital experiences should not manipulate people, rather they should empower them. </div>
            </div>
            <div class="relative my-6 mx-2">
                <img class="w-full object-cover rounded-md" src="/images/vision4.png" alt="Random image">
                <div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0  flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Current IT infrastructures consume far too much energy. Now it is time we do something about it.</div>
            </div>
        </div>
    </div>
</div>






<style>

    .cardhover{
        background-color: rgba(224, 224, 224, 0);

        
    }

    .cardhover:hover{ 
        background-color: rgba(224, 224, 224, 0.8);
        animation-duration: 200;
        
    }


    @media (max-width: 640px) {
        .cardhover{ 
            background-color: rgba(224, 224, 224, 0.8);
            
            
        }
    }
</style>



