/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'component-button.css'"
Line 17:0 Unexpected "{"
Line 17:1 Expected identifier but found "%"
Line 292:4 "max-widht" is not a known CSS property
Line 295:0 Unexpected "{"
Line 295:1 Expected identifier but found "%"
Line 297:5 Unexpected "<"
Line 307:1 Expected identifier but found "%"
... and 67 more hidden warnings

**/
{{ 'component-button.css' | asset_url | stylesheet_tag }}
{%- style -%}
.if-needed{
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden;
  }
    .text-center{
        text-align: center;
      justify-content: center;
    }
    .consultation-tab{
        background: #E4EAEC 0% 0% no-repeat padding-box;
    }
    .consultation-tabs{
        padding: 0;
        list-style: none;
        display: flex;
    }
    .consultation-tabs li{
        cursor: pointer;
        flex: 3;
        text-align: center;
        padding: 18px;
        background-color: #fff;
        color: #1D1D1B;
        font-family: gill-sans-nova,sans-serif;
        font-size: 1.2rem;
        font-style: normal;
        font-weight: 400;
        border: 1px solid #F1F4F5;
    }
    .consultation-tabs li:first-child{
        display: block;
    }
    .consultation-tabs li.active{
        background: transparent;
        font-weight: 500;
        border: 0;
    }
    .consultation-content{
        padding: 45px 42px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .consultation-content figure{
        margin: 0;
    }
    .consultation-content figure img{
        width: 100%;
        height: auto;
        display: block;
    }
    .cc_content{
        width: calc((100% / 2) - 15px)
    }   
    .content_part h2, .content_part h3{
        margin-bottom: 0;
    }
    .content_part h2 a{
        font-size: 3rem;
        line-height: 3.429rem;
        margin-top: 0;
        transition: all .2s ease-in-out;
        position: relative;
    }
    .content_part h2 a::after{
        content: '';
        position: absolute;
        bottom: 2px;
        left: 0;
        display: block;
        width: 100%;
        height: 3px;
        background: #7a5163;
        border-radius: 38px;
        opacity: 0;
        transition: all .2s ease-in-out;
    }
    .content_part h2 a:hover{
        color: #7a5163;
    }
    .content_part h2 a:hover::after {
        opacity: 1;
      }
    .content_part h4{
        color: #1D1D1B;
        opacity: 0.82;
        letter-spacing: -1.07px;
        font-size: 1.8rem;
        margin-bottom: 0;
    }
    .content_part p{
        color: #646363;
    }
    .advise{
        padding: 40px 47px;
    }
    .advise h3, .enquire h3{
        margin-bottom: 10px;
    }
    .advise h3, .advise h3 span, .enquire h3, .enquire h3 span{
        font-family: gill-sans-nova,sans-serif;
        font-size: 1.5rem;
    }
    .advise h3 span, .enquire h3 span{
        font-weight: 500;
    }
    .advise ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .advise ul li{
        display: flex;
        font-size: 1.3rem;
        line-height: normal;
        position: relative;
        padding-left: calc(13px + 14px)
    }
    .advise ul li:not(:first-child){
        margin-top: 10px;
    }
    .advise ul li svg{
        margin-right: 14px;
    }
    .enquire{
        margin-top: 30px;
        padding: 40px 47px;
        background: rgb(204 216 220 / 58%);
    }
    .enquire ul{
        list-style:none;
        padding: 0;
        margin: 0;
        margin-bottom: 30px;
    }
    .enquire ul li{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
    }
    .enquire ul li:not(:last-child){
        border-bottom: 1px solid #C4C9CA;
    }
    .enquire ul li span{
        font-family: gill-sans-nova,sans-serif;
        font-size: 1.4rem;
        font-weight: 500;
        color: #1d1d1b;
    }
    .enquire ul li span:last-child{
        width: 111.92px !important;
    }
    .enquire ul li span:first-child{
        width: 50%;
    }
    .enquire ul li span span{
        font-size: 1.2rem;
        color: #1d1d1b;
        opacity: 0.83;
        width: 100%;
        display: block;
        width: 100% !important;
    }
    .enquire ul li:last-child span{
        width: 100% !important;
    }
    .j_center{
        display: flex;
        justify-content: center;
    }
    .j_center .button-primary-outlined{
        padding-right: 70px;
        padding-left: 70px;
    }
    .none{
        visibility: hidden !important;
        height: 1px !important;
    }
    .advise ul li:before{
    content: '';
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11" fill="none"><path d="M13 1.91327L4.08571 10.8618L0 6.7604L1.04743 5.70895L4.08571 8.75145L11.9526 0.861816L13 1.91327Z" fill="%23A0B4B9"/></svg>');
    background-size: cover;
    display: block;
    margin-right: 14px;
    width: 14px;
    height: 12px;
    position: absolute;
    top: 10px;
    left: 0;
    }
    .mobile_advise{
      display: none;
    }
    div#_oH3NinU8cAFneAmj6j2fA {
      width: 100%;
  }
  .custom-form-image div#ImageWithText--template--21755883094330__b89daff0-95a9-4ee0-8ac9-f5a03d3ba115{
    min-height: 600px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
  }
  .customize_heading_area .section-subheading{
    max-width: 769px;
    margin: 0 auto;
  }
  .customize_heading_area .section-heading{
    font-size: 3rem !important;
    line-height: 3.429rem !important;
    margin-top: 0 !important;
    margin-bottom: 2.857rem !important;
    text-transform: none;
    letter-spacing: 0;
  }
  @media screen and (max-width: 1025px) {
    .advise {
      padding: 40px 20px;
    }
    .enquire{
      padding: 30px;
    }
  }
    @media screen and (max-width: 749px) {
        .customize_heading_area .section-heading{    
            font-size: 2.143rem !important;
            line-height: 2.857rem !important;
            margin-bottom: 1.786rem !important;
        }
        .consultation-tabs li{
            font-size: 1.1rem;
            padding: 13px;
        }
        .consultation-content{
            padding: 20px;
            flex-direction: column;
        }
        .cc_content{
            width: 100%;
        }
        .advise{
            padding-left: 20px;
            padding-right: 20px;
        }
        .enquire{
            padding: 20px;
        }
        .advise{
            display: none;
        }
        .content_part{
            margin-top: 20px;
        }
        .mobile_advise{
            display: block !important;
            padding-top: 20px !important;
        }
        .enquire{
            padding: 30px 20px;
        }
        .enquire ul{
            margin-bottom: 20px;
        }
        .enquire ul li{
            padding: 15px 0;
        }
      .padding-bottom--small, .padding-bottom--large, .shopify-challenge__container{
        padding-top: 30px;
        padding-bottom: 30px;
      }
    }
.header__heading-logo{
    max-widht: 140px;
}
 
{%- endstyle -%}

<!-- <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'YOUR-GA-CODE-HERE', 'auto');
    ga('send', 'pageview');
</script> -->

{% comment %} 42 32 {% endcomment %}
<meta name="description" content="{{ section.settings.consultation-description }}">
<section class="customize_heading_area image-with-text--no-background page-width page-width--small {% if section.settings.padding_top == 'normal' %}padding-top--large {% elsif section.settings.padding_top == 'half' %}padding-top--large-half {% else %}padding-top--none {% endif %}{% if section.settings.padding_bottom == 'normal' %}padding-bottom--large {% elsif section.settings.padding_bottom == 'half' %}padding-bottom--large-half {% else %}padding-bottom--none{% endif %}">
    <div class="title-wrapper-with-link text-center">
        <div class="heading-subheading-container">
            <h1 class="section-heading">
                {{ section.settings.consultation-heading }}
            </h1>
            <div class="section-subheading">
                <p>
                {{ section.settings.consultation-description }}
                </p>            
            </div>
        </div>
    </div>
    <div class="consultation-tab">
        <ul class="consultation-tabs">
            {% for block in section.blocks %}
                {% case block.type %}
                    {%- when 'director' -%}
                     <li class="get-{{ forloop.index }}" data-click="get-{{ forloop.index }}">{{block.settings.tab1_name}}</li>
                {% endcase %}
            {% endfor %}
        </ul>
        <div class="details_c">
            {% for block in section.blocks %}
                {% case block.type %}
                    {%- when 'director' -%}
                    <div class="get-{{ forloop.index }}" style="display:none">
                        <div class="consultation-content">
                            <div class="cc_content">
                                <figure>
                                    <img src="{{ block.settings.nicola_image  | image_url: width: 900 }}" defer>
                                </figure>
                                <div class="advise">
                                    {{ block.settings.advise_hadding }}
                                    <ul>
                                        {{ block.settings.advise_list }}
                                    </ul>
                                </div>
                            </div>
                            <div class="cc_content content_part">
                                <h2>{{ block.settings.nicola_name }}</h2>
                                <h4>{{ block.settings.nicola_job_title }}</h4>
                                {{ block.settings.nicola_bio }}
                                <div class="enquire">
                                    <h3><span>{{ block.settings.consultation_price_heading }}</span></h3>
                                    <ul>
                                        {{ block.settings.consultation_price }}
                                    </ul>
                                    <div class="j_center">
                                        <a class="button button-primary-outlined">
                                            {{ block.settings.consultation_price_button }}
                                        </a>
                                    </div>
                                </div>
                                <div class="advise mobile_advise">
                                    {{ block.settings.advise_hadding }}
                                    <ul>
                                        {{ block.settings.advise_list }}
                                    </ul>
                                </div>
                            </div> 
                        </div>
                    </div>
                {% endcase %}
            {% endfor %}
        </div>
    </div>
</section>
<script defer>
    document.addEventListener('DOMContentLoaded', () => {
        var activeTab = {{ section.settings.active_consultant | json}};
        $(`.${activeTab}`).fadeIn();
        $(`.consultation-tabs .${activeTab}`).addClass('active')
        $('.consultation-tabs li').on('click', function(){
            const value = $(this).attr('data-click')
            $(this).addClass('active')
            $(this).siblings().removeClass('active')
            $('.details_c').find(`.${value}`).siblings().hide()
            $('.details_c').find(`.${value}`).fadeIn()
        })

        $('.j_center').on('click', function(){
            $("html, body").animate(
            {
                scrollTop: $("#scroll_too").offset().top - 30
            },
            800 
            );
        })
    })
</script>

{% schema %}
{
"name": "Consultation",
"tag": "section",
"class": "section section__transparent-nav",
  "settings": [
    {
        "type": "text",
        "id": "consultation-heading",
        "label": "Consultation Heading"
    },
    {
        "type": "text",
        "id": "consultation-description",
        "label": "Consultation Description"
    },
    {
    "type": "select",
    "id": "active_consultant",
    "options": [
        {
        "value": "get-1",
        "label": "Tab 1"
        }, {
        "value": "get-2",
        "label": "Tab 2"
        }, {
        "value": "get-3",
        "label": "Tab 3"
        }
    ],
    "default": "get-1",
    "label": "Default Active Tab"
    },
    {
        "type": "select",
        "id": "padding_top",
        "label": "Top padding",
        "options": [
          {
            "value": "normal",
            "label": "Normal"
          }, {
            "value": "half",
            "label": "Half"
          }, {
            "value": "none",
            "label": "None"
          }
        ],
        "default": "normal"
      }, {
        "type": "select",
        "id": "padding_bottom",
        "label": "Bottom padding",
        "options": [
          {
            "value": "normal",
            "label": "Normal"
          }, {
            "value": "half",
            "label": "Half"
          }, {
            "value": "none",
            "label": "None"
          }
        ],
        "default": "normal"
      }
  ],
  "blocks": [
    {
        "type": "director",
        "name": "Add Consultant",
        "limit": 3,
        "settings":[
            {
                "type": "text",
                "label": "Designer's Name",
                "id": "tab1_name",
                "default": "Nicola Harding"
            },
            {
                "type": "image_picker",
                "label": "Designer's Image",
                "id": "nicola_image",
                "info": "Upload Designer's image"
            },
            {
                "type": "text",
                "label": "Name",
                "id": "nicola_name",
                "default": "Nicola (Nix)"
            },
            {
                "type": "text",
                "label": "Job Title",
                "id": "nicola_job_title",
                "default": "Creative director"
            },
            {
                "type": "textarea",
                "label": "Designer's Bio",
                "id": "nicola_bio",
                "info": "Enter Designer's biography"
            },
            {
                "type": "html",
                "label": "Advise Hadding",
                "id": "advise_hadding",
                "default": "<h3>Nicola Harding <span>can advise on</span></h3>" 
            },
            {
                "type": "textarea",
                "label": "Advise List",
                "id": "advise_list"
            },
            {
                "type": "text",
                "label": "Consultation Price Heading",
                "id": "consultation_price_heading",
                "default": "Consultation price packages"
            },
            {
                "type": "textarea",
                "label": "Consultation Price",
                "id": "consultation_price"
            },
            {
                "type": "text",
                "label": "Consultation Price Button",
                "id": "consultation_price_button",
                "default": "Enquire"
            }
        ]
    }
  ],
  "presets": [
    {
      "name": "Consultations"
    }
  ]
}
{% endschema %}