Support Image
CTA Section
Support Image
CTA Section
Support Image 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/output.css">
    <title>CTA Section</title>
</head>

<body class="bg-[#FFF5E1] text-white">

    <div class="container mx-auto p-6">
        <div class="bg-[#0C1844] rounded-lg shadow-lg flex flex-col lg:flex-row items-center lg:items-center lg:justify-between">
            <!-- Image Section -->
            <div class="relative w-full lg:w-1/2">
                <img src="<https://images.pexels.com/photos/7176300/pexels-photo-7176300.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1>" alt="Support Image"
                    class="rounded-t-lg lg:rounded-tr-none lg:rounded-l-lg object-cover w-full h-64 lg:h-full">
                <div class="absolute inset-0 bg-[#FF6969] opacity-50 rounded-t-lg lg:rounded-tr-none lg:rounded-l-lg"></div>
            </div>
            <!-- Text Section -->
            <div class="p-12  lg:w-1/2 flex flex-col items-center lg:items-start justify-center h-full text-center lg:text-left">
                
                
                <h3 class="text-base text-[#C80036] mb-2">Award winning support</h3>
                <h2 class="text-3xl font-bold mb-4">We're here to help</h2>
                <p class="text-base mb-6 w-3/4 ">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus etiam sed. Quam a
                    scelerisque amet ullamcorper eu enim et fermentum, augue. 
                </p>
                <a href="#" class="bg-[#FF6969] hover:bg-[#0C1844] text-white font-medium py-3 px-6 rounded-lg">
                    Visit the help center
                </a>
            </div>
        </div>
    </div>

</body>

</html>