/** Shopify CDN: Minification failed

Line 55:0 Unexpected "{"
Line 55:1 Unexpected "{"
Line 55:3 Expected identifier but found "'contact-page.css'"
Line 56:0 Unexpected "<"
Line 59:7 Expected identifier but found "%"
Line 60:8 Unexpected "<"
Line 61:44 Unexpected "{"
Line 61:53 Expected ":"
Line 61:85 Unexpected "<"
Line 62:15 Unexpected "{"
... and 246 more hidden warnings

**/
.contact img {
  max-width: 100%;
}

.contact .form__message {
  align-items: flex-start;
}

.contact .icon-success {
  margin-top: 0.2rem;
}

.contact .field {
  margin-bottom: 1.5rem;
}

@media screen and (min-width: 750px) {
  .contact .field {
    margin-bottom: 2rem;
  }
}

.contact__button {
  margin-top: 3rem;
}

@media screen and (min-width: 750px) {
  .contact__button {
    margin-top: 4rem;
  }
}

@media screen and (min-width: 750px) {
  .contact__fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2rem;
  }
}
{{ 'contact-page.css' | asset_url | stylesheet_tag }}
<section class="contact-us-section contact_us_padding">
  <div class="container page-width">
    <div class="form-flex-block">
      {% if section.settings.heading != blank or section.settings.subheading != blank %}
        <div class="left-content">
          <p class="rich-text__subheading">{{ section.settings.subheading | escape }}</p>
          <h3>{{ section.settings.heading }}</h3>
        </div>
      {% endif %}

      <div
        class="right-content"
        {% if section.settings.heading == blank or section.settings.subheading == blank %}
          style="width: 100%"
        {% endif %}
      >
        <form-state>
          {%- assign form_id = 'ContactForm-' | append: section.id -%}
          {%- form 'contact', id: form_id -%}
            {%- if form.posted_successfully? -%}
            <div class="form-status form-status-list form__message" tabindex="-1" autofocus> 
                {% render 'icon', icon: 'success' %}
                {{ 'templates.contact.form.post_success' | t }}
              </div>
            {%- endif -%}
            
<!-- CONTACT INFO  -->
          
            <div class="contact_info">
               <div class="left-content">
          <p class="rich-text__subheading">{{ section.settings.subheading_1 | escape }}</p>
                 <div class="text_differ">
          <h3>{{ section.settings.heading_1 }}</h3>
                   <span> {{ section.settings.small_text_1 }} </span>
                   </div>
        </div>
              <div class="right_content">
              <div class="form-group"> 
               <input
                id="{{ form_id }}-name"
                class="form-control"
                autocomplete="name"
                type="text"
                name="contact[{{ 'templates.contact.form.name' | t }}]"
                value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
                placeholder="First and Last"
              >
            </div>
            <div class="form-group"> 
              <input
                id="{{ form_id }}-name"
                class="form-control"
                autocomplete="name"
                type="text"
                name="contact[{{ 'templates.contact.form.name' | t }}]"
                value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
                placeholder="Farm Business Name"
              >
            </div> 
            <div class="field form-group">
              <input id="{{ form_id }}-phone" type="tel" class="form-control field__input" autocomplete="tel" name="contact[{{ 'templates.contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}" placeholder="Phone Number"/>
              <label class="visually-hidden" for="{{ form_id }}-phone">{{ 'templates.contact.form.phone' | t }}</label>
            </div>

            <div class="field form-group field--with-error">
              <input
                id="{{ form_id }}-email"
                autocomplete="email"
                type="email"
                id="ContactForm-email-{{ section.id }}"
                class="field__input required{% if form.errors contains 'email' %} invalid{% endif %}"
                name="contact[email]"
                spellcheck="false"
                autocapitalize="off"
                value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
                aria-required="true"
                {% if form.errors contains 'email' %}
                  aria-invalid="true"
                  aria-describedby="ContactForm-email-error-{{ section.id }}"
                {% endif %}
                placeholder="{{ 'templates.contact.form.email' | t }}"
                required="required"
              />
              <label class="visually-hidden" for="{{ form_id }}-email">{{ 'templates.contact.form.email' | t }} <span aria-hidden="true">*</span></label>
              {%- if form.errors contains 'email' -%}
                <small id="ContactForm-email-error-{{ section.id }}">
                  <span class="form__message errors">
                    {% render 'icon', icon: 'error' %}
                    {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
                  </span>
                </small>
              {%- endif -%}
            </div>
            <div class="form-group"> 
              <input
                id="{{ form_id }}-name"
                class="form-control"
                autocomplete="name"
                type="text"
                name="contact[{{ 'templates.contact.form.name' | t }}]"
                value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
                placeholder="Years in Business"
              >
            </div> 
              </div>


            </div>

<!-- BILLING ADDRESS  -->

          <div class="billing_address">
               <div class="left-content">
          <p class="rich-text__subheading">{{ section.settings.subheading_2 | escape }}</p>
          <div class="text_differ">
          <h3>{{ section.settings.heading_2 }}</h3>
                   <span> {{ section.settings.small_text_2 }} </span>
                   </div>
        </div>
            <div class="right_content">
                             <div class="form-group"> 
               <input
                id="{{ form_id }}-name"
                class="form-control"
                autocomplete="name"
                type="text"
                name="contact[{{ 'templates.contact.form.name' | t }}]"
                value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
                placeholder="Address"
              >
            </div>
            <div class="form-group"> 
               <input
                id="{{ form_id }}-name"
                class="form-control"
                autocomplete="name"
                type="text"
                name="contact[{{ 'templates.contact.form.name' | t }}]"
                value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
                placeholder="City"
              >
            </div>
            <div class="form-group"> 
               <input
                id="{{ form_id }}-name"
                class="form-control"
                autocomplete="name"
                type="text"
                name="contact[{{ 'templates.contact.form.name' | t }}]"
                value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
                placeholder="State"
              >
            </div>
            <div class="form-group"> 
               <input
                id="{{ form_id }}-name"
                class="form-control"
                autocomplete="name"
                type="text"
                name="contact[{{ 'templates.contact.form.name' | t }}]"
                value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
                placeholder="Zip Code"
              >
            </div>
            </div>

          </div>


          <!-- SHIPPING ADDRESS  -->

          <div class="shipping_address"> 
          <div class="left-content">
          <p class="rich-text__subheading">{{ section.settings.subheading_3 | escape }}</p>
          <div class="text_differ">
          <h3>{{ section.settings.heading_3 }}</h3>
                   <span> {{ section.settings.small_text_3 }} </span>
                   </div>
            </div>
            <div class="right_content">
                 <div class="form-group"> 
               <input
                id="{{ form_id }}-name"
                class="form-control"
                autocomplete="name"
                type="text"
                name="contact[{{ 'templates.contact.form.name' | t }}]"
                value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
                placeholder="Address"
              >
            </div>
            <div class="form-group"> 
               <input
                id="{{ form_id }}-name"
                class="form-control"
                autocomplete="name"
                type="text"
                name="contact[{{ 'templates.contact.form.name' | t }}]"
                value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
                placeholder="City"
              >
            </div>
            <div class="form-group"> 
               <input
                id="{{ form_id }}-name"
                class="form-control"
                autocomplete="name"
                type="text"
                name="contact[{{ 'templates.contact.form.name' | t }}]"
                value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
                placeholder="State"
              >
            </div>
            <div class="form-group"> 
               <input
                id="{{ form_id }}-name"
                class="form-control"
                autocomplete="name"
                type="text"
                name="contact[{{ 'templates.contact.form.name' | t }}]"
                value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
                placeholder="Zip Code"
              >
            </div>
            <div class="form-group"> 
               <input
                id="{{ form_id }}-name"
                class="form-control"
                autocomplete="name"
                type="text"
                name="contact[{{ 'templates.contact.form.name' | t }}]"
                value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
                placeholder="Hours of Operation"
              >
            </div>
           
            <div class="field__input_main dropdown form-group" style="margin-top: 0px !important;">
                <select
                  required
                  class="required field__input form-control"
                  id="Fork_Lift"
                  name="properties[_Enquiry Type]"
                  aria-required="true"
                >
                  <option value="Fork Lift">Fork Lift</option>
                  <option value="Yes">Yes</option>
                  <option value="No">No</option>
                </select>
              </div>
     
       
            <div class="field__input_main dropdown form-group" style="margin-top: 0px !important;">
                <select
                  required
                  class="required field__input form-control"
                  id="Loading_dock"
                  name="properties[_Enquiry Type]"
                  aria-required="true"
                >
                  <option value="Loading dock">Loading dock</option>
                  <option value="Yes">Yes</option>
                  <option value="No">No</option>
                </select>
              </div>

            <div class="field__input_main dropdown form-group" style="margin-top: 0px !important;">
                <select
                  required
                  class="required field__input form-control"
                  id="Pallet_Jack"
                  name="properties[_Enquiry Type]"
                  aria-required="true"
                >
                  <option value="Pallet Jack">Pallet Jack</option>
                  <option value="Yes">Yes</option>
                  <option value="No">No</option>
                </select>
              </div>
            </div>
         
          </div>
          
<!-- TOTAL QUANTITY  -->
          <div  class="totoal_quantity">
          <div class="left-content">
          <p class="rich-text__subheading">{{ section.settings.subheading_4 | escape }}</p>
          <div class="text_differ">
          <h3>{{ section.settings.heading_4 }}</h3>
                   <span> {{ section.settings.small_text_4 }} </span>
                   </div>
            </div>
            <div class="right_content">
             <div class="field__input_main form-group" style="margin-top: 0px !important;">
               <input type="number" id="quantity" style="padding-right: 25px;" name="quantity" id="{{ form_id }}-name" class="form-control" placeholder="Total Amount Needed (quantities of 1)" min="1">
      
              </div>
            
            <div class="field__input_main dropdown form-group" style="margin-top: 0px !important;">
                <select
                  required
                  class="required field__input form-control"
                  id="Species"
                  name="properties[_Enquiry Type]"
                  aria-required="true"
                >
                  <option value="Pallet Jack">Species (All species)</option>
                  <option value="POBO">POBO</option>
                  <option value="POCNS">POCNS</option>
                  <option value="HECNS">HECNS</option>
                  <option value="LE379080">LE3790</option>
                  <option value="PPLOG">PPLOG</option>
                  <option value="PO3015">PO3015</option>
                  <option value="POKB">POKB</option>
                  <option value="POELMA">POELMA</option>
                  <option value="AACNS">AACNS</option>
                  <option value="PEKONG">PEKONG</option>
                  <option value="PE2603">PE2603</option>
                  <option value="PCMM">PCMM</option>
                  <option value="PD1">PD1</option>
                  <option value="HCFF">HCFF</option>
                  <option value="FV4600">FV4600</option>
                  <option value="PACNS">PACNS</option>
                  <option value="GLZ9724">GLZ9724</option>
                  <option value="POSNOW">POSNOW</option>
                  <option value="GF9827">GF9827</option>
                  <option value="HE9514">HE9514</option>
                  <option value="GMTF05">GMTF05</option>
                  <option value="HEPOW">HEPOW</option>
                  <option value="FV1037">FV1037</option>
                  <option value="HT4780">HT4780</option>
                  <option value="POLOG">POLOG</option>
                  <option value="PO3044">PO3044</option>

                </select>
              </div>

            <div class="field__input_main dropdown form-group" style="margin-top: 0px !important;">
                <select
                  required
                  class="required field__input form-control"
                  id="Frequency"
                  name="properties[_Enquiry Type]"
                  aria-required="true"
                >
                  <option value="Frequency">Frequency</option>
                  <option value="weekly">Weekly</option>
                  <option value="Bi-weekly">Bi-weekly</option>
                  <option value="Every 3 weeks">Every 3 weeks</option>
                  <option value="Every 4 weeks">Every 4 weeks</option>
                </select>
            </div>
             <div class="field__input_main dropdown form-group" style="margin-top: 0px !important;">
                <select
                  required
                  class="required field__input form-control"
                  id="Order_Type"
                  name="properties[_Enquiry Type]"
                  aria-required="true"
                >
                  <option value="Order Type">Order Type</option>
                  <option value="One Time">One Time</option>
                  <option value="As Needed">As Needed</option>
                  <option value="Standing">Standing</option>
                </select>
            </div>
            </div>
 
            
          </div> 


    <!-- TOTAL QUANTITY 4lb Grain Masters  -->
          
          <div  class="totoal_quantity 4lb_Grain">
          <div class="left-content">
          <p class="rich-text__subheading">{{ section.settings.subheading_5 | escape }}</p>
         <div class="text_differ">
          <h3>{{ section.settings.heading_5 }}</h3>
                   <span> {{ section.settings.small_text_5 }} </span>
                   </div>
            </div>
            <div class="right_content">
             <div class="field__input_main form-group" style="margin-top: 0px !important;">
             <input type="number" id="quantity" style="padding-right: 25px;" name="quantity" id="{{ form_id }}-name" class="form-control" placeholder="Total Amount Needed (quantities of 1)" min="1">
              </div>
            
            <div class="field__input_main dropdown form-group" style="margin-top: 0px !important;">
                <select
                  required
                  class="required field__input form-control"
                  id="Species"
                  name="properties[_Enquiry Type]"
                  aria-required="true"
                >
                  <option value="Pallet Jack">Species (All species)</option>
                  <option value="POBO">POBO</option>
                  <option value="POCNS">POCNS</option>
                  <option value="HECNS">HECNS</option>
                  <option value="LE379080">LE3790</option>
                  <option value="PPLOG">PPLOG</option>
                  <option value="PO3015">PO3015</option>
                  <option value="POKB">POKB</option>
                  <option value="POELMA">POELMA</option>
                  <option value="AACNS">AACNS</option>
                  <option value="PEKONG">PEKONG</option>
                  <option value="PE2603">PE2603</option>
                  <option value="PCMM">PCMM</option>
                  <option value="PD1">PD1</option>
                  <option value="HCFF">HCFF</option>
                  <option value="FV4600">FV4600</option>
                  <option value="PACNS">PACNS</option>
                  <option value="GLZ9724">GLZ9724</option>
                  <option value="POSNOW">POSNOW</option>
                  <option value="GF9827">GF9827</option>
                  <option value="HE9514">HE9514</option>
                  <option value="GMTF05">GMTF05</option>
                  <option value="HEPOW">HEPOW</option>
                  <option value="FV1037">FV1037</option>
                  <option value="HT4780">HT4780</option>
                  <option value="POLOG">POLOG</option>
                  <option value="PO3044">PO3044</option>

                </select>
              </div>

            <div class="field__input_main dropdown form-group" style="margin-top: 0px !important;">
                <select
                  required
                  class="required field__input form-control"
                  id="Frequency"
                  name="properties[_Enquiry Type]"
                  aria-required="true"
                >
                  <option value="Frequency">Frequency</option>
                  <option value="weekly">Weekly</option>
                  <option value="Bi-weekly">Bi-weekly</option>
                  <option value="Every 3 weeks">Every 3 weeks</option>
                  <option value="Every 4 weeks">Every 4 weeks</option>
                </select>
            </div>
             <div class="field__input_main dropdown form-group" style="margin-top: 0px !important;">
                <select
                  required
                  class="required field__input form-control"
                  id="Order_Type"
                  name="properties[_Enquiry Type]"
                  aria-required="true"
                >
                  <option value="Order Type">Order Type</option>
                  <option value="One Time">One Time</option>
                  <option value="As Needed">As Needed</option>
                  <option value="Standing">Standing</option>
                </select>
            </div>
            </div>
 
            
          </div> 

          <!-- TOTAL QUANTITY of 6lb G2’s -->
          <div  class="totoal_quantity 6lb_G2">
          <div class="left-content">
          <p class="rich-text__subheading">{{ section.settings.subheading_6 | escape }}</p>
          <div class="text_differ">
          <h3>{{ section.settings.heading_6 }}</h3>
                   <span> {{ section.settings.small_text_6 }} </span>
                   </div>
            </div>
            <div class="right_content">
             <div class="field__input_main form-group" style="margin-top: 0px !important;">
  <input type="number" id="quantity" style="padding-right: 25px;" name="quantity" id="{{ form_id }}-name" class="form-control" placeholder="Total Amount Needed (quantities of 1)" min="1">
          
              </div>
            
            <div class="field__input_main dropdown form-group" style="margin-top: 0px !important;">
              
                <select
                  required
                  class="required field__input form-control"
                  id="Species"
                  name="properties[_Enquiry Type]"
                  aria-required="true"
                >
                  <option value="Pallet Jack">Species (All species)</option>
                  <option value="POBO">POBO</option>
                  <option value="POCNS">POCNS</option>
                  <option value="HECNS">HECNS</option>
                  <option value="LE379080">LE3790</option>
                  <option value="PPLOG">PPLOG</option>
                  <option value="PO3015">PO3015</option>
                  <option value="POKB">POKB</option>
                  <option value="POELMA">POELMA</option>
                  <option value="AACNS">AACNS</option>
                  <option value="PEKONG">PEKONG</option>
                  <option value="PE2603">PE2603</option>
                  <option value="PCMM">PCMM</option>
                  <option value="PD1">PD1</option>
                  <option value="HCFF">HCFF</option>
                  <option value="FV4600">FV4600</option>
                  <option value="PACNS">PACNS</option>
                  <option value="GLZ9724">GLZ9724</option>
                  <option value="POSNOW">POSNOW</option>
                  <option value="GF9827">GF9827</option>
                  <option value="HE9514">HE9514</option>
                  <option value="GMTF05">GMTF05</option>
                  <option value="HEPOW">HEPOW</option>
                  <option value="FV1037">FV1037</option>
                  <option value="HT4780">HT4780</option>
                  <option value="POLOG">POLOG</option>
                  <option value="PO3044">PO3044</option>

                </select>
              </div>

            <div class="field__input_main dropdown form-group" style="margin-top: 0px !important;">
                <select
                  required
                  class="required field__input form-control"
                  id="Frequency"
                  name="properties[_Enquiry Type]"
                  aria-required="true"
                >
                  <option value="Frequency">Frequency</option>
                  <option value="weekly">Weekly</option>
                  <option value="Bi-weekly">Bi-weekly</option>
                  <option value="Every 3 weeks">Every 3 weeks</option>
                  <option value="Every 4 weeks">Every 4 weeks</option>
                </select>
            </div>
             <div class="field__input_main dropdown form-group" style="margin-top: 0px !important;">
                <select
                  required
                  class="required field__input form-control"
                  id="Order_Type"
                  name="properties[_Enquiry Type]"
                  aria-required="true"
                >
                  <option value="Order Type">Order Type</option>
                  <option value="One Time">One Time</option>
                  <option value="As Needed">As Needed</option>
                  <option value="Standing">Standing</option>
                </select>
            </div>
            </div>
 
            
          </div> 
          
          <!-- SHIPPING OPTIONS AND QUOTES  -->
          
          <div  class="SHIPPING_OPTIONS">
          <div class="left-content">
          <p class="rich-text__subheading">{{ section.settings.subheading_7 | escape }}</p>
          <div class="text_differ">
          <h3>{{ section.settings.heading_7 }}</h3>
                   <span> {{ section.settings.small_text_7 }} </span>
                   </div>
            </div>
<div class="right_content">
                <div class="field__input_main dropdown form-group" style="margin-top: 0px !important;">
                <select
                  required
                  class="required field__input form-control"
                  id="Pickup"
                  name="properties[_Enquiry Type]"
                  aria-required="true"
                >
                  <option value="Pickup">Pickup</option>
                  <option value="Yes">Yes</option>
                  <option value="No">No</option>
     
                </select>
              </div>

             <div class="field__input_main dropdown form-group" style="margin-top: 0px !important;">
                <select
                  required
                  class="required field__input form-control"
                  id="Refrigerated"
                  name="properties[_Enquiry Type]"
                  aria-required="true"
                >
                  <option value="Refrigerated">Standard Ground (UPS/FEDex)</option>
                  <option value="Yes">Yes</option>
                  <option value="No">No</option>
        
                </select>
              </div>

               <div class="field__input_main dropdown form-group" style="margin-top: 0px !important;">
                <select
                  required
                  class="required field__input form-control"
                  id="Refrigerated"
                  name="properties[_Enquiry Type]"
                  aria-required="true"
                >
                  <option value="Refrigerated">Southwest Same Day Airlines</option>
                  <option value="Yes">Yes</option>
                  <option value="No">No</option>
        
                </select>
              </div>

               <div class="field__input_main dropdown form-group" style="margin-top: 0px !important;">
                <select
                  required
                  class="required field__input form-control"
                  id="Refrigerated"
                  name="properties[_Enquiry Type]"
                  aria-required="true"
                >
                  <option value="Refrigerated">Refrigerated LTL</option>
                  <option value="Yes">Yes</option>
                  <option value="No">No</option>
        
                </select>
              </div>
</div>

            </div>

 <!--  button  -->
            <div class="buttons button_submit">
              <button type="submit" class="send-btn button">Submit</button>
            </div>
          {%- endform -%}
        </form-state>
      </div>
    </div>

    
    
  </div>
</section>
<style>
  #shopify-section-{{ section.id }} .custom_field.field{
    position: relative;
  }
  #shopify-section-{{ section.id }} .dropdown:before {
      position: absolute;
      content: '';
      top: 32%;
      z-index: 10;
      background-image: url("/cdn/shop/files/chevron-down.svg?v=1702732857");
      background-size: 20px;
      background-position: center;
      background-repeat: no-repeat;
      right: 25px;
      height: 20px;
      width: 20px;
  }
  #shopify-section-{{ section.id }} .contact-form input::placeholder,
  #shopify-section-{{ section.id }} .contact-form select{
    color: #171717;
    /* opacity: 0.5 !important; */
  }
  #shopify-section-{{ section.id }} .field__input_main.dropdown select{
      height: 60px;
      outline: none;
      box-shadow: none;
      width: 100%;
      background: transparent;
      outline-color: #704c1e;
      color: #171717;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 32px;
      padding-left: 17px;
      border-radius: 96px;
      border: 2px solid #EDEDED;
  }
  #shopify-section-{{ section.id }} .contact-form{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #shopify-section-{{ section.id }} .left-content{
    width: 100%;
  }
  #shopify-section-{{ section.id }} .right_content{
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
          }
  #shopify-section-{{ section.id }} .button_submit{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
  }
  #shopify-section-{{ section.id }} .button_submit button{
    border-radius: 70px;
    min-width: 15rem !important;
  }
  #shopify-section-{{ section.id }} .form__message{
    width: 100%;
  }
  #shopify-section-{{ section.id }} .contact_info, 
  #shopify-section-{{ section.id }} .billing_address, 
  #shopify-section-{{ section.id }} .shipping_address, 
  #shopify-section-{{ section.id }} .totoal_quantity,
  #shopify-section-{{ section.id }} .SHIPPING_OPTIONS{
    width: 100%;
    max-width: 100%;
  }
  #shopify-section-{{ section.id }} .rich-text__subheading{
    color: #20262E;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 200% */
    text-transform: uppercase;
  }
  #shopify-section-{{ section.id }} .left-content h3{
    font-size: 30px !important;
    font-style: normal;
    font-weight: 600;
    line-height: 109.453%; /* 52.538px */
    letter-spacing: -0.48px;
  }
  #shopify-section-{{ section.id }} .form-flex-block{
    flex-direction: column;
    gap: 10px;
  }
  #shopify-section-{{ section.id }} .form-flex-block .right-content .form-group{
    width: 100%;
    max-width: 46%;
    margin-bottom: 35px;
  }
  #shopify-section-{{ section.id }} .left-content{
    padding-right: 100px;
  }
  #shopify-section-{{ section.id }} .contact_us_padding{
    padding-top: {{section.settings.padding_top_desk}}px !important;
    padding-bottom: {{section.settings.padding_bottom_desk}}px !important;
  }
  #shopify-section-{{ section.id }} .form-flex-block select:focus{
  border: 2px solid #C4932C !important;
}
  #shopify-section-{{ section.id }} .form-flex-block select:focus select{
   color: 2px solid #000 !important;
}
  #shopify-section-{{ section.id }} .form-flex-block .right-content .form-group{

 }
#shopify-section-{{ section.id }} .text_differ{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
 }
#shopify-section-{{ section.id }} .text_differ span{
    font-size: 18px;
    font-weight: 500;
 }
#shopify-section-{{ section.id }} .text_differ h2{
   margin-bottom: 0px;
 }      
  @media screen and (max-width: 1200px){
    #shopify-section-{{ section.id }} .left-content h3{
      font-size: {{ '48' | times: 0.8 }}px;
    }
  #shopify-section-{{ section.id }} .contact_info, 
  #shopify-section-{{ section.id }} .billing_address, 
  #shopify-section-{{ section.id }} .shipping_address, 
  #shopify-section-{{ section.id }} .totoal_quantity,
  #shopify-section-{{ section.id }} .SHIPPING_OPTIONS{
    width: 100%;
    max-width: 80%;
  }
  }
  @media screen and (max-width: 1024px){
    #shopify-section-{{ section.id }} .left-content h3{
      font-size: {{ '30' | times: 0.7 }}px;
    }
  #shopify-section-{{ section.id }} .contact_info, 
  #shopify-section-{{ section.id }} .billing_address, 
  #shopify-section-{{ section.id }} .shipping_address, 
  #shopify-section-{{ section.id }} .totoal_quantity,
  #shopify-section-{{ section.id }} .SHIPPING_OPTIONS{
    width: 100%;
    max-width: 70%;
  }
  }
  @media screen and (max-width: 749px){
    #shopify-section-{{ section.id }} .left-content h3{
      font-size: 20px !important;
    }  
  #shopify-section-{{ section.id }} .contact_info, 
  #shopify-section-{{ section.id }} .billing_address, 
  #shopify-section-{{ section.id }} .shipping_address, 
  #shopify-section-{{ section.id }} .totoal_quantity,
  #shopify-section-{{ section.id }} .SHIPPING_OPTIONS{
    width: 100%;
    max-width: 100%;
  }
    #shopify-section-{{ section.id }} .contact_us_padding{
    padding-top: {{section.settings.padding_top_mob}}px !important;
    padding-top: {{section.settings.padding_bottom_mob}}px !important;
  }
    #shopify-section-{{ section.id }} .form-flex-block .right-content .form-group{
    width: 100%;
    max-width: 100%;
    margin-bottom: 35px;
  }
    #shopify-section-{{ section.id }} .text_differ h3{
   margin-bottom: 0px !important;
 } 
    #shopify-section-{{ section.id }} .text_differ span{
   margin-bottom: 15px !important;
 } 
  }
</style>
{% schema %}
{
  "name": "spawn Form",
  "settings": [
    {
      "type": "text",
      "id": "heading_1",
      "label": "Heading"
    },
    {
      "type": "text",
      "id": "subheading_1",
      "label": "Sub Heading"
    },
    {
      "type": "text",
      "id": "small_text_1",
      "label": "Mall Text after Heading"
    },
    {
      "type": "text",
      "id": "heading_2",
      "label": "Heading"
    },
        {
      "type": "text",
      "id": "subheading_2",
      "label": "Sub Heading"
    },
        {
      "type": "text",
      "id": "small_text_2",
      "label": "Mall Text after Heading"
    },
    {
      "type": "text",
      "id": "heading_3",
      "label": "Heading"
    },
    {
      "type": "text",
      "id": "subheading_3",
      "label": "Sub Heading"
    },
        {
      "type": "text",
      "id": "small_text_3",
      "label": "Mall Text after Heading"
    },
    {
      "type": "text",
      "id": "heading_4",
      "label": "Heading"
    },
        {
      "type": "text",
      "id": "subheading_4",
      "label": "Sub Heading"
    },
    {
      "type": "text",
      "id": "small_text_4",
      "label": "Mall Text after Heading"
    },
    {
      "type": "text",
      "id": "heading_5",
      "label": "Heading"
    },
        {
      "type": "text",
      "id": "subheading_5",
      "label": "Sub Heading"
    },
        {
      "type": "text",
      "id": "small_text_5",
      "label": "Mall Text after Heading"
    },
    {
      "type": "text",
      "id": "heading_6",
      "label": "Heading"
    },
        {
      "type": "text",
      "id": "subheading_6",
      "label": "Sub Heading"
    },
        {
      "type": "text",
      "id": "small_text_6",
      "label": "Mall Text after Heading"
    },
        {
      "type": "text",
      "id": "heading_7",
      "label": "Heading"
    },
    {
      "type": "text",
      "id": "subheading_7",
      "label": "Sub Heading"
    },
        {
      "type": "text",
      "id": "small_text_7",
      "label": "Mall Text after Heading"
    },
    {
      "type": "range",
      "id": "padding_top_desk",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "t:sections.all.padding.padding_top.unit",
      "label": "Padding top desktop",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom_desk",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "t:sections.all.padding.padding_bottom.unit",
      "label": "Padding bottom desktop",
      "default": 36
    },
        {
      "type": "range",
      "id": "padding_top_mob",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "t:sections.all.padding.padding_top.unit",
      "label": "Padding top mobile",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom_mob",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "t:sections.all.padding.padding_bottom.unit",
      "label": "Padding bottom mobile",
      "default": 36
    }
    ],
  "presets":[
    {
      "name": "Spawn Form"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}