<footer class="page-footer bg-grey-dark-key">
			<div class="container">
				<div class="footer-top">
					<div class="row">
						<div class="col-lg-2 col-md-4 col-6">
							<div class="footer-widget">
								<h2 class="footer-widget-title">
									World
								</h2>
								<ul class="footer-nav">
									<li><a href="#">U.N.</a></li>
									<li><a href="#">Conflicts</a></li>
									<li><a href="#">Terrorism</a></li>
									<li><a href="#">Disasters</a></li>
									<li><a href="#">Global Economy</a></li>
									<li><a href="#">Global Economy</a></li>
									<li><a href="#">Environment</a></li>
									<li><a href="#">Religion</a></li>
									<li><a href="#">Scandals</a></li>
								</ul>
								<!-- End of .footer-nav -->
							</div>
							<!-- End of .footer-widget -->
						</div>
						<!-- End of .col-lg-2 -->
						<div class="col-lg-2 col-md-4 col-6">
							<div class="footer-widget">
								<h2 class="footer-widget-title">
									Politics
								</h2>
								<ul class="footer-nav">
									<li><a href="#">Executive</a></li>
									<li><a href="#">Senate</a></li>
									<li><a href="#">House</a></li>
									<li><a href="#">Judiciary</a></li>
									<li><a href="#">Foreign policy</a></li>
									<li><a href="#">Polls</a></li>
									<li><a href="#">Elections</a></li>
								</ul>
								<!-- End of .footer-nav -->
							</div>
							<!-- End of .footer-widget -->
						</div>
						<!-- End of .col-lg-2 -->
						<div class="col-lg-2 col-md-4 col-6">
							<div class="footer-widget">
								<h2 class="footer-widget-title">
									Entertainment
								</h2>
								<ul class="footer-nav">
									<li><a href="#">Celebrity News</a></li>
									<li><a href="#">Movies</a></li>
									<li><a href="#">TV News</a></li>
									<li><a href="#">Music News</a></li>
									<li><a href="#">Style News</a></li>
									<li><a href="#">Entertainment Video</a></li>
								</ul>
								<!-- End of .footer-nav -->
							</div>
							<!-- End of .footer-widget -->
						</div>
						<!-- End of .col-lg-2 -->
						<div class="col-lg-2 col-md-4 col-6">
							<div class="footer-widget">
								<h2 class="footer-widget-title">
									Business
								</h2>
								<ul class="footer-nav">
									<li><a href="#">Markets</a></li>
									<li><a href="#">Politics</a></li>
									<li><a href="#">Technology</a></li>
									<li><a href="#">Features</a></li>
									<li><a href="#">Business Leaders</a></li>
								</ul>
								<!-- End of .footer-nav -->
							</div>
							<!-- End of .footer-widget -->
						</div>
						<!-- End of .col-lg-2 -->
						<div class="col-lg-2 col-md-4 col-6">
							<div class="footer-widget">
								<h2 class="footer-widget-title">
									Health
								</h2>
								<ul class="footer-nav">
									<li><a href="#">Healthy Living</a></li>
									<li><a href="#">Medical Research</a></li>
									<li><a href="#">Mental Health</a></li>
									<li><a href="#">Cancer</a></li>
									<li><a href="#">Heart Health</a></li>
									<li><a href="#">Children's Health</a></li>
								</ul>
								<!-- End of .footer-nav -->
							</div>
							<!-- End of .footer-widget -->
						</div>
						<!-- End of .col-lg-2 -->
						<div class="col-lg-2 col-md-4 col-6">
							<div class="footer-widget">
								<h2 class="footer-widget-title">
									About
								</h2>
								<ul class="footer-nav">
									<li><a href="#">Contact Us</a></li>
									<li><a href="#">Careers</a></li>
									<li><a href="#">Fox Around the World</a></li>
									<li><a href="#">Advertise With Us</a></li>
									<li><a href="#">Ad Choices</a></li>
									<li><a href="#">Media Relations</a></li>
									<li><a href="#">Compliance</a></li>
								</ul>
								<!-- End of .footer-nav -->
							</div>
							<!-- End of .footer-widget -->
						</div>
						<!-- End of .col-lg-2 -->
					</div>
					<!-- End of .row -->
				</div>
				<!-- End of .footer-top -->
				<div class="footer-mid">
					<div class="row align-items-center">
						<div class="col-md">
							<div class="footer-logo-container">
								<a href="index.html">
									<img src="assets/images/logo-symbol.svg" alt="footer logo" class="footer-logo">
								</a>
							</div>
							<!-- End of .brand-logo-container -->
						</div>
						<!-- End of .col-md-6 -->
						<div class="col-md-auto">
							<div class="footer-social-share-wrapper">
								<div class="footer-social-share">
									<div class="axil-social-title">Find us here</div>
									<ul class="social-share social-share__with-bg">
										<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
										<li><a href="#"><i class="fab fa-twitter"></i></a></li>
										<li><a href="#"><i class="fab fa-youtube"></i></a></li>
										<li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
										<li><a href="#"><i class="fab fa-pinterest"></i></a></li>
									</ul>
								</div>
							</div>
							<!-- End of .footer-social-share-wrapper -->
						</div>
						<!-- End of .col-md-6 -->
					</div>
					<!-- End of .row -->
				</div>
				<!-- End of .footer-mid -->
				<div class="footer-bottom">
					<ul class="footer-bottom-links">
						<li><a href="#">Terms of Use</a></li>
						<li><a href="#">Accessibility & CC</a></li>
						<li><a href="#">AdChoices</a></li>
						<li><a href="#">Modern Slavery Act Statement</a></li>
						<li><a href="#">Advertise with us</a></li>
						<li><a href="#">Papr Store</a></li>
						<li><a href="#">Newsletters</a></li>
						<li><a href="#">Transcripts</a></li>
						<li><a href="#">License Footage</a></li>
						<li><a href="#">Sitemap</a></li>
					</ul>
					<!-- End of .footer-bottom-links -->
					<p class="axil-copyright-txt">
						© 2024. All rights reserved by Your Company.
					</p>
				</div>
				<!-- End of .footer-bottom -->
			</div>
			<!-- End of .container -->
		</footer>



        <div class="modal fade modal-fullscreen-sm-down" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Enquiry Form</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            <!-- id="contactForm1 -->
                <form action="add_form.php" method="POST">
                    <div class="custom-form-container">
                        <div class="row">
                            <div class="col-md-6 mt-2">
                                <input type="text" class="form-control custom-input" name="name" placeholder="Name">
                            </div>
                            <div class="col-md-6 mt-2">
                                <input type="email" class="form-control custom-input" name="email" placeholder="Email" required>
                            </div>
                            <div class="col-md-6 mt-2">
                                <input type="number" class="form-control custom-input" name="phone" placeholder="Phone" >
                            </div>
                            <div class="col-md-6 mt-2">
                                <select name="enq" class="form-control custom-input">
                                    <option value="">Select Partners</option>
                                    <option value="As A Student">As A Student</option>
                                    <option value="As A Institutions">As A Institutions</option>
                                </select>
                            </div>
                            <!-- <div class="col-md-12 mt-2">
                                <input type="text" class="form-control custom-input" name="url" placeholder="Website URL" required>
                            </div> -->
                            <div class="col-md-12 mt-2">
                                <textarea name="msg" class="form-control custom-textarea" placeholder="Message"></textarea>
                            </div>
                            <div class="col-md-12 mt-4 text-center">
                                <button type="submit" name="add_form" class="btn btn-primary custom-btn send_message">Send</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    /* Custom styles for the form */
    .custom-form-container {
        /* background: linear-gradient(149deg, #ed0606, #00800075); */
        background: gray;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .custom-input, .custom-select, .custom-textarea {
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 12px;
        background-color: #fff;
        transition: all 0.3s ease;
        outline: none;
        line-height: 25px;
        width: 100%;
        height: 46px;

    }

    .custom-input:focus, .custom-select:focus, .custom-textarea:focus {
        border-color: #007bff;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
    }

    .custom-textarea {
        height: 100px;
        resize: none;
    }

    .custom-btn {
        background-color: #007bff;
        border: none;
        padding: 10px 30px;
        border-radius: 25px;
        font-size: 16px;
        transition: background-color 0.3s ease;
    }

    .custom-btn:hover {
        background-color: #0056b3;
    }

    /* Adding animation */
    .modal-content {
        animation: slideIn 0.5s ease-out;
    }

    @keyframes slideIn {
        from {
            transform: translateY(50px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Responsive styling */
    @media (max-width: 768px) {
        .custom-input, .custom-select, .custom-textarea {
            font-size: 14px;
        }

        .custom-btn {
            font-size: 14px;
            padding: 8px 20px;
        }
    }
</style>

<script>
    window.addEventListener('load', function () {
        setTimeout(function () {
            var myModal = new bootstrap.Modal(document.getElementById('myModal'));
            myModal.show();
        }, 5000);
    });
</script>