<header class="container flex justify-between items-center">
    <div class="logo">
        <img src="https://placehold.co/100x40.png?text=FulterNet"
             class="h-12"
        >
    </div>
        <ul class="flex space-x-4">
            <li><a href="#">Buy</a></li>
            <li><a href="#">Rent</a></li>
            <li><a href="#">Sell</a></li>
            <li><a href="#">Exclusive Listings</a></li>
            <li><a href="#">New Development</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    <a href="#">Login / Register</a>
</header>


<section class="bg-blue-200"
         style="background-image: url('https://placehold.co/100x40.png'); background-size: cover;">
    <div class="container flex items-center min-h-[500px]">
        <div class="grid grid-cols-2 items-center">
            <div class="col-span-1">
                <h1 class="text-8xl">FulterNet</h1>
                <h4 class="text-4xl font-thin">Your Trusted Partner In International Asset Management</h4>
            </div>
            <div class="col-span-1">
                <h5 class="text-5xl font-light">Expertly Curated Real Estate Investment</h5>
            </div>
        </div>
    </div>
</section>


<section id="About" class="w-full bg-blue-400 py-[50px]">
<div class="container text-center">
        <h2 class="text-lg">WHO WE ARE</h2>
        <h4 class="text-5xl font-thin max-w-xl mx-auto mt-4">
    Innovators in Real Estate Investments & Asset Management
        </h4>
        <p class="max-w-md mx-auto mt-8 ">FulterNet is a dynamic company driven by innovation and a deep understanding of global real estate markets. With a focus on high-potential investment opportunities, we offer our clients not just assets, but the expertise to maximize their returns.</p>
    <div class="mt-4">
        <a href="#" class="bg-slate-900 px-4 py-2 font-thin text-orange-300">Get In Touch</a>
    </div>
</div>
</section>


<section class="bg-slate-700 py-20">
<div class="container grid grid-cols-4">
    
    <div class="col-span-1 flex flex-col">
        <div class="flex place-items-center">
        <h5 class="text-2xl font-bold">01</h5>
            <div class="ml-2 h-[1px] w-16 bg-white"></div>
        </div>
        <h4>EXPERTISE</h4>
        <p>Unmateched insight into global real estate</p>
    </div>
    
    
    <div class="col-span-1 flex flex-col">
        <div class="flex place-items-center">
        <h5 class="text-2xl font-bold">02</h5>
            <div class="ml-2 h-[1px] w-16 bg-white"></div>
        </div>
        <h4>EXPERTISE</h4>
        <p>Unmateched insight into global real estate</p>
    </div>
    
    <div class="col-span-1 flex flex-col">
        <div class="flex place-items-center">
        <h5 class="text-2xl font-bold">03</h5>
            <div class="ml-2 h-[1px] w-16 bg-white"></div>
        </div>
        <h4>EXPERTISE</h4>
        <p>Unmateched insight into global real estate</p>
    </div>
    
    <div class="col-span-1 flex flex-col">
        <div class="flex place-items-center">
        <h5 class="text-2xl font-bold">04</h5>
            <div class="ml-2 h-[1px] w-16 bg-white"></div>
        </div>
        <h4>EXPERTISE</h4>
        <p>Unmateched insight into global real estate</p>
    </div>
    

</div>
<div class="container bg-red-300">
    <div class="bg-red-800 grid grid-cols-4">
        <div class="col-span-1">
            <h4>VIEW</h4>
            <h2>Our Exclusive Investment Opportunities</h2>
        </div>
        <div class="col-span-3 bg-blue-300">
            <p>inputs goes here</p>
        </div>
        
    </div>
</div>

</section>


<section class="w-full">
<div class="grid grid-cols-3">
    <div class="">
        Marrakesh
    </div>
    <div class="">
        Marrakesh
    </div>
    <div class="">
        Marrakesh
    </div>
</div>
    <div class="grid grid-cols-3">
    <div class="">
        Marrakesh
    </div>
    <div class="">
        Marrakesh
    </div>
    <div class="">
        Marrakesh
    </div>
</div>
</section>