@extends('frontend.template')

@section('styles')

<style type="text/css">

section.paragraph {
    /* max-width: 1600px; */
    margin: 0 auto;
    padding: 50px 0 0px 0;
    background-color: #f5f5f5;
}

.content {
    max-width: 90%;
    margin: 0 auto;
}
button#inquiry_form_btn {
    background: #002b3c;
    border-color: #002b3c;
}
.content h1 {
    padding: 0 0 20px 0;
    color: #000;
    font-size: 32px;
    font-weight: 600;
}

.content p {
    color: #000;
    font-size: 16px;
    line-height: 30px;
    text-align: left;
    
}

.fss {padding-top: 27px;}

.dsf {padding-top: 15px;}

h3.feature-title {margin-top: 0px;font-size: 16px !important;line-height: 26px !important;}

button#inquiry_form_btn {
    /*margin-top: 2px;*/
    /*float: right;*/
    /*background-color: #e85e04;*/
    /*border-color: #000;*/
    /*padding: 7px 15px 7px 15px;*/
    /*font-size: 14px;*/
}

ul.contact-list {
    padding: 0;
}
section.adds {
    background-color: #f5f5f5;
    padding: 30px 0px;
}
.feature-box.box-hovered {
    background: #fefefe;
    box-shadow: 0 2px 5px 0px rgb(0 0 0 / 7%);
    height: 180px !important;
    padding: 35px;
}
.feature-box.icon-top-centered {
    text-align: left;
    padding-left: 50px;
}
.shadow-box {
    padding: 50px!important;
    height: 500px;
    margin-top: 50px;
    margin-bottom: 50px;
}
.body-dark .feature-title, .feature-box .feature-title {
    color: #333;
    font-size: 1.3em;
    line-height: 1.2em;
    margin-bottom: 0;
}
.shadow-box:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    left: 0;
    top: 0;
    z-index: -1;
}
.shadow-box, .shadow-box.light {
    position: relative;
    padding: 50px;
    background: #fff;
    box-shadow: 0 2px 15px 0px rgb(0 0 0 / 7%);
    z-index: 2;
}
button#inquiry_form_btn:hover {
    /*background-color: #e85e04;*/
    /*box-shadow: unset;*/
    /*border-color: #e85e04;*/
}
input#inquiry_form_email {
    margin-left: 10px;
    width: 90%;
    display: inline;
    margin: 0 auto;
    /* text-align: center; */
    margin-left: 22px;
}

a.cta-footer {
    position: relative;
    display: block;
    text-align: center;
    background: #2d2e29;
    margin: 0;
    padding: 50px;
    text-decoration: none;
    transition: .1s;
    margin-top: -10px;
    border-top: 1px solid rgba(0,0,0,.1);
    position: relative;
    top: 2px;
}

a.cta-footer h2, a.cta-footer h2:after {
    color: #ffffff!important;
}
body .contactmain {
    padding-top: 10px !important;
}
.feature-box.icon-top-centered.box-hovered.default span {
    font-size: 25px;
}
.fa, .far, .fas {
    font-family: "Font Awesome 5 Free" !important;
}


/*section.menu-menu {*/
/*    position: unset;*/
/*}*/

/*body .row.menus {*/
/*    background-color: unset;*/
/*    box-shadow: unset;*/
/*}*/
	.contact-list li{
		font-size: 16px;
		padding:4px;
	}
	h2.contact-head {
    font-size: 32px;
    color: #c90916;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    padding-bottom:20px;
    
    
}
ul.contact-list h5 {
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 1px;
    color: #2a2a2b;
    font-size: 16px;
    
}
.alert-danger {
    padding: 1px 10px;
}

p.info {
    padding-bottom: 20px;
}

.contactmain .form-control {
    background: transparent;
    border: 1px solid #e6e1e1;
    border-radius: 6px;
}
.col-md-5.PACK {
height: 500px;
background: #eaeaea;
padding: 40px;
border-top-right-radius: 10px;
    
}
.col-md-6.back-colour {
    border: black;
    padding:40px;
}

.container.entry {
    border-radius: 10px;
    box-shadow: 0 0 10px #ccc;
    position: relative;
    background: #fff;
    height: 500px;
  
}


	.contact-list li i{
		margin-right: 10px;
		color:#242424;
	}
	
	.map_img{
	    height:auto;
	}
	
	h2.title {
    border-bottom: 1px dotted;
    color: #282828 !important;
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
    font-size: 30px;
    font-weight:600;
}

h2.title:after {
    content: '';
    position: relative;
    bottom: -4px;
    border-bottom: 5px solid #0f4e98;
    width: 30%;
    display: flex;
}

h2.title {
    margin-left: 15px;
}
.cont {
    position: inherit;
}

ul.contact-list2 li {
    list-style: none;
    display: -webkit-box;
}
ul.contact-list2 .fa, ul.contact-list2 .fab {
    color: #0f4e98 !important;
    display: inline-block;
    font-size: 16px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    top: -2px;
    word-spacing: 1px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    max-width: 100%;
}
.contactmain form .col-md-6 {
    padding: 0;
}
.contactmain form .col-md-12 {
    padding: 0;
}
.contactmain form .col-md-4 {
    padding: 0;
}

body .contactmain {
    background-color: unset !important;

    
    background-position: left top;
    background-repeat: repeat;
    background-color: #ffffff;
}
h2.info-info {
    font-size: 32px;
    color: #c90916;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    padding-bottom: 20px;
}
.contactmain .btn-primary {
    padding: 6px 10px;
}


.contactmain {
    padding: 0 0 50px 0 !important;
}

.cap_code {
    /* text-align: right; */
    margin-top: -40px;
    float: right;}

@media only screen and (max-width: 992px)
{

.cap_code {
    margin-top: 10px;
    margin-left: 0px;
}
.col-xs-12 {
    width: 100%;
    padding: 0 5px;
}
body .shadow-box, .shadow-box.light {
    height: unset !important;
    background: unset !important;
    background-color: unset !important;
    box-shadow: unset;
}
body .shadow-box {
    padding: 10px!important;
    height: auto;
    margin-top: 50px;
    margin-bottom: 50px;
}
body input#inquiry_form_email {
    margin-left: 0px;
    width: 100%;
}

body .contactmain .btn-primary {
    padding: 6px 10px;
    text-align: left;
    display: block;
    margin-top: 20px;
}
body .contactmain form .col-md-4 {
  
}


}
	
</style>

@endsection

@section('content')	
	<div class="bannermain innerbanner">
		<div class="banner_overlay"></div>
	<img src="/images/contact.jpg" alt="{{$basic_details->name}}">
		<div class="innercaption">adds
			<div class="container">
				<h2>Contact Us</h2>
			</div>
		</div>
	</div>
	
	<section class="paragraph">
	    <div class="container">
	        <div class="row">
	            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
	                <!--<div class="content">-->
	                <!--    <h1>Welcome to our contact us page!</h1>-->
	                <!--    <p>We are dedicated to providing our customers with the best possible service. As we, Rongsheng Sports Product Co, LTD, give more value to our customers. If you have any questions or would like more information about our products, please don’t hesitate to get in touch with us. You can reach us by the given phone number or by email at mentioned email addresses.</p>-->
	                <!--    <br>-->
	                <!--    <p>We look forward to hearing from you!</p>-->
	                <!--</div>-->
	            </div>
	        </div>
	    </div>
	</section>
		<section class="adds">
		<div class="container">
	<div class="row">
	    <div class="col-md-4 back-c">
   <div id="pgc-28-0-0" class="panel-grid-cell">
      <div id="panel-28-0-0-0" class="so-panel widget widget_interico_feature_box panel-first-child panel-last-child" data-index="0">
         <div class="feature-box icon-top-centered box-hovered default">
            <span class="fa fa-phone"></span>
            <div class="content-wrapper">
                <!--<h3 class="feature-title">Name: Mr. Happy Wang</h3>-->
               <h3 class="feature-title">Phone : {{$basic_details->phone_number}}</h3>
               <!--<h3 class="feature-title">Whatsapp : {{$basic_details->phone_number}}</h3>-->
                <!--<h3 class="feature-title">Skype : benleiatskype</h3>-->
               <!--<p class="feature-text">Call us any time from 08:00 till 17:00 Mon-Fri</p>-->
            </div>
         </div>
      </div>
   </div>
   </div>
   <div class="col-md-4 back-c">
   <div id="pgc-28-0-1" class="panel-grid-cell">
      <div id="panel-28-0-1-0" class="so-panel widget widget_interico_feature_box panel-first-child panel-last-child" data-index="1">
         <div class="feature-box icon-top-centered box-hovered default">
            <span class="fa fa-envelope"></span>
            <div class="content-wrapper fss">
               <h3 class="feature-title">Email : {{$basic_details->email}}</h3>
               <!--<h3 class="feature-title">Email : {{$basic_details->email2}}</h3>-->
               <!--<p class="feature-text">Email us any time, we usually reply within 24 hours.</p>-->
            </div>
         </div>
      </div>
   </div>
   </div>
   <div class="col-md-4 back-c">
   <div id="pgc-28-0-2" class="panel-grid-cell">
      <div id="panel-28-0-2-0" class="so-panel widget widget_interico_feature_box panel-first-child panel-last-child" data-index="2">
         <div class="feature-box icon-top-centered box-hovered default">
            <span class="fa fa-home"></span>
            <div class="content-wrapper dsf">
               <h3 class="feature-title cxz">{{$basic_details->address}}</h3>
               <!--<p class="feature-text">Phone us before visiting</p>-->
            </div>
         </div>
      </div>
   </div>
   </div>
</div>
</div>
</section>


	<div class="contactmain">
		<div class="container ">
		    
		    
		    
			<div class="row">
			    
			       <div class="col-md-6">
			    <div id="pgc-28-1-0" class="panel-grid-cell">
   <div id="panel-28-1-0-0" class="so-panel widget widget_sow-editor panel-first-child" data-index="3">
      <div class="so-widget-sow-editor so-widget-sow-editor-base">
         <div class="siteorigin-widget-tinymce textwidget no-mrg">
            <span class="subtitle dash-true style-dark text-default">Fill the form.</span>
            <h2><strong>Let's discuss your project.</strong></h2>
         </div>
      </div>
   </div>
   <div id="panel-28-1-0-1" class="so-panel widget widget_sow-editor panel-last-child" data-index="4">
      <div class="shadow-box btn-fullwidth panel-widget-style panel-widget-style-for-28-1-0-1">
         <div class="so-widget-sow-editor so-widget-sow-editor-base">
            <div class="siteorigin-widget-tinymce textwidget">
               <div class="siteorigin-widget-tinymce textwidget">
                  	<form class="form_submit" id='form21' method="post" action="/save_contact/2" autocomplete="off" >
                  <div class="col-md-12">
                     <div id="form_success" class="form_success"></div>
                     <div id="err_msg_1" class="err_msg_1"></div>
                  </div>
                  <div class="col-md-12">
                     <div role="form" class="wpcf7" id="wpcf7-f264-o2" lang="en-US" dir="ltr">
                        {{csrf_field()}}
                        <div class="col-md-12">
                           <div class="form-group">
                              <input type="text" class="form-control" maxlength="150" id='inquiry_form_name' name="inquiry_form_name" placeholder="Full Name" required>
                           </div>
                        </div>
                        <div class="col-md-6">
                           <div class="form-group">
                              <input type="text" class="form-control" maxlength="50" id='inquiry_form_phone' name="inquiry_form_phone" placeholder="Phone Number" required>
                           </div>
                        </div>
                        <div class="col-md-6 paddingg">
                           <div class="form-group">
                              <input type="email" class="form-control" maxlength="100" id='inquiry_form_email' name="inquiry_form_email" placeholder="Email Address" required>
                           </div>
                        </div>
                        <input type="hidden" name="inquiry_form_subject" value="{{$basic_details->company_name}} Inquiry">
                        <!-- Test --> 
                     </div>
                      <div class="col-md-12">
			                <div class="form-group full">
			                    <textarea id='inquiry_form_message' name="inquiry_form_message" class="form-control" maxlength="1500" rows="5" placeholder="Message" required></textarea>
			                </div>
              </div>
                  </div>
                  <div class="col-md-12">
                     <div class="form-group full">
                     </div>
                  </div>
                  <div class="form-row" style="height: 62px;">
                     <div class="col-md-4 col-sm-6 col-xs-6">
                        <input class="form-control" type="text" id="captcha" name="captcha" placeholder="Captcha" required="">
                     </div>
                     <div class="col-md-4 col-sm-6 col-xs-6 cap_img" >
                        {!! $captcha_img !!}
                     </div>
                     <div class="col-md-4 col-sm-6 col-xs-12 cap_codee">
                        <button id='inquiry_form_btn' class="btn btn-primary inquiry_form_btn" type="submit" title="Submit">Send Message</button>
                     </div>
                  </div>
               </form>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="col-md-6 CONS">
    
<img src="/images/CONS.jpg" class="img-responsive">
</div>
</div>	</div>
	</div>
<a data-toggle="modal" data-target="#contactSupplierModal" href="javascript:" class="cta-footer"><div><h2>Get a free quote for your project. Click here.</h2></div> </a>

	<div class="clear"> </div>

@endsection