<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* Desktop Banner */
        .banner {
            background-image: url('../images/banner/Banner-Desktop.jpg');
            height: 100vh;
            background-size: cover;
            background-position: center;
        }

        .banner .form-container {
            max-width: 400px;
            margin-right: 50px;
        }

        .modal-container {
            min-height: 100vh;
        }

        .modal-box {
            background-color: #FCC802;
            padding: 40px;
            width: 40vh !important;
            height: 50vh;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
        }

        .form-control {
            border: none;
            padding: 12px;
        }

        /* Mobile Banner */
        .mob-banner {
            background-image: url('../images/banner/Banner-mobile.jpg');
            height: 100vh;
            background-size: cover;
            background-position: center;
        }

        .mob-banner .form-container {
            max-width: 300px;
            margin: 0 auto;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .banner {
                display: none;
            }

            .mob-banner {
                display: block;
            }

            .desktop-form {
                display: none;
            }

            .mob-form {
                display: block;
            }
        }

        @media (min-width: 1025px) {
            .mob-banner {
                display: none;
            }

            .banner {
                display: block;
            }

            .desktop-form {
                display: block;
            }

            .mob-form {
                display: none;
            }
        }

        .form-view {
            background-color: #FCC203;
        }

        /* Hide mobile banner and form by default */
        .mob-banner,
        .mob-form {
            display: none;
        }

        /* Hide desktop banner and form by default */
        .banner,
        .desktop-form {
            display: none;
        }

        /* Show the desktop banner and form for larger screens */
        @media (min-width: 992px) {
            .banner {
                display: block;
            }

            .desktop-form {
                display: block;
            }
        }

        /* Show the mobile banner and form for smaller screens */
        @media (max-width: 991px) {
            .mob-banner {
                display: block;
            }

            .mob-form {
                display: block;
            }
        }

        .modal-box input {
            margin-bottom: 15px;
        }

        .btn {
            font-size: 16px;
        }
    </style>
</head>
<body>

<!-- Desktop Banner Section (Only for large screens) -->
<section class="banner hero bg-no-repeat bg-cover relative z-0">
    <div class="container h-full">
        <div class="row justify-content-end h-100 align-items-center">
            <div class="col-md-8"></div>
            <div class="col-md-4 d-flex justify-content-center">
                <div class="container d-flex justify-content-center align-items-center modal-container">
                    <div class="modal-box text-center col-12 col-md-6">
                        <h2 class="text-black fw-bold mb-4">Enquire Now</h2>
                        <!-- Desktop form -->
                        <form id="enquiry_form" method="post" action="submit.php" class="desktop-form">
                            <div class="mb-3">
                                <input type="text" name="name" class="form-control" placeholder="Enter your name" required>
                            </div>
                            <div class="mb-3">
                                <input type="email" name="email" class="form-control" placeholder="Email id" required>
                            </div>
                            <div class="mb-3">
                                <input type="tel" name="phone" class="form-control" placeholder="Mobile number" required>
                            </div>
                            <input type="hidden" name="source" id="source" value="<?php echo $utm_source; ?>">
                            <input type="hidden" name="medium" id="medium" value="<?php echo $utm_medium; ?>">
                            <input type="hidden" name="campaign" id="campaign" value="<?php echo $utm_campaign; ?>">
                            <input type="hidden" name="srd" id="srd" value="<?php echo $srd; ?>">
                            <div class="mb-3 text-start">
                                <input type="checkbox" name="agree" checked disabled>
                                <span style="font-size: 12px;"> Your information is safe with us.</span>
                            </div>
                            <button type="submit" class="btn btn-light fw-bold w-100 py-2">
                                I am Interested
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Desktop Banner Section end (Only for large screens) -->

<!-- Mobile Banner Section (Only for small screens) -->
<section class="mob-banner hero bg-no-repeat bg-cover relative z-0">
    <div class="container h-full">
        <!-- Content for Mobile Banner -->
    </div>
</section>

<!-- Mobile Form Section (Only for small screens) -->
<section class="mob-form">
    <div class="container">
        <div class="row justify-content-center h-100 align-items-center">
            <div class="col-12 d-flex justify-content-center">
                <div class="container d-flex justify-content-center align-items-center modal-container">
                    <div class="modal-box text-center col-12">
                        <h2 class="text-black fw-bold mb-4">Enquire Now</h2>
                        <form id="enquiry_form" method="post" action="submit.php">
                            <div class="mb-3">
                                <input type="text" name="name" class="form-control" placeholder="Enter your name" required>
                            </div>
                            <div class="mb-3">
                                <input type="email" name="email" class="form-control" placeholder="Email id" required>
                            </div>
                            <div class="mb-3">
                                <input type="tel" name="phone" class="form-control" placeholder="Mobile number" required>
                            </div>
                            <input type="hidden" name="source" id="source" value="<?php echo $utm_source; ?>">
                            <input type="hidden" name="medium" id="medium" value="<?php echo $utm_medium; ?>">
                            <input type="hidden" name="campaign" id="campaign" value="<?php echo $utm_campaign; ?>">
                            <input type="hidden" name="srd" id="srd" value="<?php echo $srd; ?>">
                            <div class="mb-3 text-start">
                                <input type="checkbox" name="agree" checked disabled>
                                <span style="font-size: 12px;"> Your information is safe with us.</span>
                            </div>
                            <button type="submit" class="btn btn-light fw-bold w-100 py-2">
                                I am Interested
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

</body>
</html>
