<footer class="footer-area footer-area-2">
        <div class="container">
          <div class="footer-top">
            <div class="row">
              <div class="col-lg-3 col-md-6">
                <div class="footer-logo">
                  <img src="assets/images/reff.png" class="flogo" alt="">
                </div>
                <div class="footer-widget">
                  <ul class="footer-social">
                    <li><a href="https://www.facebook.com/profile.php?id=61571106727346"><i class="fa-brands fa-facebook-f"></i></a></li>
                    <li><a href="https://www.linkedin.com/company/106098134/admin/dashboard/"><i class="fa-brands fa-linkedin"></i></a></li>
                    <li><a href="https://www.instagram.com/the_referred_brand?igsh=OHJ5djJ3d3U3Ynk5&utm_source=qr"><i class="fa-brands fa-instagram"></i></a></li>

                    <!-- <li><a href="#"><i class="fa-brands fa-pinterest"></i></a></li> -->
                  </ul>
                </div>
              </div>
              <div class="col-lg-2 col-md-6">
                <div class="footer-widget">
                  <h4 class="footer-widget-title">Navigation</h4>
                  <ul class="footer-widget-menu">
                    <li><a href="index.php">Home</a></li>
                    <li><a href="blog.php">Blogs</a></li>
                    <li><a href="about.php">About Us</a></li>
                    <li><a href="contact.php">Contact Us</a></li>
                  </ul>
                </div>
              </div>
              <div class="col-lg-4 col-md-6">
                <div class="footer-widget">
                  <h4 class="footer-widget-title">Contact Us</h4>
                  <ul class="footer-contact-list">
                    <li><i class="fa fa-map-marker"></i> : Noida</li>
                    <li><i class="fa fa-phone"></i> : +91 8968645521</li>
                    <li><i class="fa fa-envelope"></i> : info@thereferredbrand.com</li>
                  </ul>
                </div>
              </div>
              <div class="col-lg-3 col-md-6">
                <div class="footer-widget">
                  <h4 class="footer-widget-title">Reach Us </h4>
                  <div class="footer-subscribe">
                    <p>We empower creators and communities to share their voices, showcase their talents, and connect with the world. Your content fuels our platform. <a style="cursor:default; text-decoration: none; color:#070707" href="https://www.watchesuk.uk.com">Replica Watches</a></p>
                  </div>
                  <!-- <div class="footer-subscribe-form">
                    <form action="#">
                      <input type="email" placeholder="Your Email..." id="emails" required="">
                      <button class="subscribe_button" type="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                    </form>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
          <div class="footer-bottom">
            <div class="container">
              <div class="row">
                <div class="col-12">
                  <div class="footer-copyright">
                    <p>2024 © All Right Reserved by <a href="index.php">The Referred Brand</a> ||  Designed & Developed By <a href="https://saavytechnologies.com/">Saavy Technologies</a></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </footer>





      <!-- model -->

      
<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="mail.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="number" class="form-control custom-input" name="phone" placeholder="Phone" >
                            </div>
                            <div class="col-md-12 mt-2">
                                <input type="email" class="form-control custom-input" name="email" placeholder="Email" required>
                            </div>
                            <div class="col-md-12 mt-2">
                            <input type="text" class="form-control custom-input" name="subject" placeholder="Subject">
                            </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>

  .model{
    display: block;
    padding-left: 0px;
    top: 387px;
  }
    /* Custom styles for the form */
    .custom-form-container {
        /* background: linear-gradient(149deg, #ed0606, #00800075); */
        background: gray;
        /* background: #f3a423; */
        /* background:#8080807d; */
        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;

    }

    .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>