@include('ai_includes.header')
<style>
    .contact-banner {
  background-color: #f6f4ef;
  padding: 60px 20px;
  border-top: 1px solid #f5caca;
  border-bottom: 1px solid #f5caca;
}

.contact-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.contact-subtext {
  font-size: 1.1rem;
  color: #555;
}

.contact-image {
  max-width: 100%;
  border-left: 1px solid #f5caca;
  padding-left: 20px;
}
.no-max-w{
    max-width: 500px !important;
}
.scrolling-icon {
  position: absolute;
  top: 50px; 
  left: -100px; 
  animation: scroll-right 15s linear infinite;
  z-index: 2;
}
.scrolling-icon2 {
  position: absolute;
  top: 30px; 
  left: -180px; 
  animation: scroll-right2 15s linear infinite;
  z-index: 2;
}
.scrolling-wrapper{
    overflow-x: hidden;
    position: relative;
    width: 100%;
    height: 120px;

}
.scrolling-wrapper img{
    mix-blend-mode: multiply;
}
@keyframes scroll-right {
  0% {
    left: -100px;
    transform: translateY(0);
  }
  25% {
    transform: translateY(-30px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(30px);
  }
  100% {
    left: 100vw;
    transform: translateY(0);
  }
}
@keyframes scroll-right2 {
  0% {
    left: -180px;
    transform: translateY(-30px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(30px);
  }
  75% {
    transform: translateY(0px);
  }
  100% {
    left: 100vw;
    transform: translateY(-30);
  }
}
</style>
<section class="contact-banner">
    <div class="container">
        <div class="">
            <h2  class="text-center fw-bold display-3 mb-5"> Contact Us</h2>
        </div>
        <div class="row align-items-center justify-content-center">
            {{-- <div class="col-md-1"></div> --}}
            <div class="col-md-6 justify-content-center d-flex align-items-center">
              <img src="{{url('custom/ai-asset/ai_contact.png')}}" alt="Contact illustration" class="img-fluid contact-image">
            </div>
            <div class="col-md-6 mt-2">
                {{-- <h1 class="contact-title">Let's Get in Touch</h1>
                <p class="contact-subtext">Have questions or need support? We're here to help you with all your mattress needs.</p> --}}
                <div class="d-flex justify-content-center align-items-center">
                    <form class="form no-max-w w-100" method="POST" action="{{url('contact')}}">
                        @csrf 
                    {{-- <div class="flex"> --}}
                    <input type="text" value="3" name="type" hidden>
                    <label>
                        <input name="name" required placeholder="" type="text" class="input">
                        <span>full name</span>
                    </label>

                        {{-- <label>
                            <input required name="name" placeholder="" type="text" class="input">
                            <span>last name</span>
                        </label> --}}
                    {{-- </div>   --}}
                            
                    <label>
                        <input required name="email" placeholder="" type="email" class="input">
                        <span>email</span>
                    </label> 
                        
                    <label>
                        <input required type="tel" pattern="\d{10}" name="number" placeholder="" title="Enter a valid 10-digit phone number" class="input">
                        <span>contact number</span>
                    </label>
                    <label>
                        <textarea required rows="3" placeholder="" name="message" class="input01"></textarea>
                        <span>message</span>
                    </label>
                    
                    <button class="fancy" type="submit">
                    <span class="top-key"></span>
                    <span class="text">submit</span>
                    <span class="bottom-key-1"></span>
                    <span class="bottom-key-2"></span>
                    </button>
                </form>
            </div>
        </div>
        <div class="scrolling-wrapper">
            <div class="scrolling-icon">
                <img src="{{url('custom/ai-asset/mail.png')}}" height="30" alt="Scrolling Icon">
            </div>    
            <div class="scrolling-icon2">
                <img src="{{url('custom/ai-asset/call.png')}}" height="30" alt="Scrolling Icon">
            </div>    
        </div>    
      </div>
    </div>
  </section>
  

@include('ai_includes.footer')