Links Container

<nav aria-label="Footer Link" class="grid lg:grid-cols-2 gap-x-6 lg:gap-x-8 3xl:gap-x-10">
    <div class="grid lg:grid-cols-2 gap-x-6 lg:gap-x-8 3xl:gap-x-10">

        <script>
            'use strict';

            function accordion(expanded = false) {
                return {
                    expanded: expanded,
                    isTablet: false,
                    init() {
                        this.checkExpand();
                    },
                    toggleExpanded() {
                        this.expanded = !this.isTablet || !this.expanded;
                    },
                    checkExpand() {
                        this.isTablet = window.innerWidth < 1024;
                        // Initialize expanded to false so that it is closed by default.
                        this.expanded = false
                    }
                };
            }
        </script>

        <div x-data="accordion(false)" @resize.debounce.100.window="expanded = !isTablet; checkExpand()" class=" accordion-dark" aria-labelledby="accordion-1824325056">
            <div class="font-bold text-body-base">
                <button type="button" @click="toggleExpanded()" class="flex justify-between items-center w-full lg:cursor-text " :class="isTablet ? 'accordion-button py-3' : ''" :aria-expanded="expanded" aria-controls="content-1434210076" id="accordion-1824325056">
                    <span class="flex flex-wrap gap-2 ">
                        Plan du site
                    </span>
                    <span :class="expanded ? 'rotate-180' : ''" class="lg:hidden transition-transform" aria-hidden="true">
                        <svg class=" shrink-0" width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                        </svg> </span>
                </button>
            </div>
            <div x-cloak x-show="expanded || !isTablet" x-collapse class="" id="content-1434210076">
                <div class="pt-2" :class="isTablet ? 'pb-4' : ''">
                    <div :class="isTablet ? 'pb-3' : ''">
                        <ul class="inline-flex flex-col gap-2">
                            <li>
                                <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                    Prendre soin de ma peau

                                </a>
                            </li>
                            <li>
                                <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                    Traiter ma peau

                                </a>
                            </li>
                            <li>
                                <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                    Comprendre la peau

                                </a>
                            </li>
                            <li>
                                <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                    Diagnositic

                                </a>
                            </li>
                            <li>
                                <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                    Pourquoi Etat pur

                                </a>
                            </li>
                        </ul>

                    </div>
                </div>
            </div>
        </div>

        <script>
            'use strict';

            function accordion(expanded = false) {
                return {
                    expanded: expanded,
                    isTablet: false,
                    init() {
                        this.checkExpand();
                    },
                    toggleExpanded() {
                        this.expanded = !this.isTablet || !this.expanded;
                    },
                    checkExpand() {
                        this.isTablet = window.innerWidth < 1024;
                        // Initialize expanded to false so that it is closed by default.
                        this.expanded = false
                    }
                };
            }
        </script>

        <div x-data="accordion(false)" @resize.debounce.100.window="expanded = !isTablet; checkExpand()" class=" accordion-dark" aria-labelledby="accordion-1131765237">
            <div class="font-bold text-body-base">
                <button type="button" @click="toggleExpanded()" class="flex justify-between items-center w-full lg:cursor-text " :class="isTablet ? 'accordion-button py-3' : ''" :aria-expanded="expanded" aria-controls="content-2137578706" id="accordion-1131765237">
                    <span class="flex flex-wrap gap-2 ">
                        Informations
                    </span>
                    <span :class="expanded ? 'rotate-180' : ''" class="lg:hidden transition-transform" aria-hidden="true">
                        <svg class=" shrink-0" width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                        </svg> </span>
                </button>
            </div>
            <div x-cloak x-show="expanded || !isTablet" x-collapse class="" id="content-2137578706">
                <div class="pt-2" :class="isTablet ? 'pb-4' : ''">
                    <div :class="isTablet ? 'pb-3' : ''">
                        <ul class="inline-flex flex-col gap-2">
                            <li>
                                <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                    Programme de fidélité

                                </a>
                            </li>
                            <li>
                                <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                    F.A.Q.

                                </a>
                            </li>
                            <li>
                                <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                    Livraisons et retours

                                </a>
                            </li>
                            <li>
                                <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                    Suivi de commande

                                </a>
                            </li>
                            <li>
                                <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                    Conditions générales de vente

                                </a>
                            </li>
                            <li>
                                <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                    Notice légale

                                </a>
                            </li>
                            <li>
                                <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                    Charte cookies

                                </a>
                            </li>
                            <li>
                                <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                    Charte données personnelles

                                </a>
                            </li>
                            <li>
                                <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                    Paramètres de cookies

                                </a>
                            </li>
                        </ul>

                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="grid lg:grid-cols-2 gap-x-6 lg:gap-x-8 3xl:gap-x-10">
        <div class="flex flex-col gap-y-4 lg:gap-y-6 3xl:gap-y-10">

            <script>
                'use strict';

                function accordion(expanded = false) {
                    return {
                        expanded: expanded,
                        isTablet: false,
                        init() {
                            this.checkExpand();
                        },
                        toggleExpanded() {
                            this.expanded = !this.isTablet || !this.expanded;
                        },
                        checkExpand() {
                            this.isTablet = window.innerWidth < 1024;
                            // Initialize expanded to false so that it is closed by default.
                            this.expanded = false
                        }
                    };
                }
            </script>

            <div x-data="accordion(false)" @resize.debounce.100.window="expanded = !isTablet; checkExpand()" class=" accordion-dark" aria-labelledby="accordion-1146363888">
                <div class="font-bold text-body-base">
                    <button type="button" @click="toggleExpanded()" class="flex justify-between items-center w-full lg:cursor-text " :class="isTablet ? 'accordion-button py-3' : ''" :aria-expanded="expanded" aria-controls="content-1127830512" id="accordion-1146363888">
                        <span class="flex flex-wrap gap-2 ">
                            Pourquoi Etat pur ?
                        </span>
                        <span :class="expanded ? 'rotate-180' : ''" class="lg:hidden transition-transform" aria-hidden="true">
                            <svg class=" shrink-0" width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                            </svg> </span>
                    </button>
                </div>
                <div x-cloak x-show="expanded || !isTablet" x-collapse class="" id="content-1127830512">
                    <div class="pt-2" :class="isTablet ? 'pb-4' : ''">
                        <div :class="isTablet ? 'pb-3' : ''">
                            <ul class="inline-flex flex-col gap-2">
                                <li>
                                    <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                        Découvrez Etat Pur

                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                        Etat Pur, une marque Naos

                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                        L’écobiologie, qu’est-ce que c’est ?

                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                                        Notre Science de l’âge

                                    </a>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>

            <div>
                <div>
                    <div class="font-bold mb-4">International</div>
                    <div class="flex flex-col w-full gap-y-1 field field-reserved">
                        <div x-data="selectcountrySwitcher" class="input-wrapper input-wrapper-select flex flex-col relative w-full  ">

                            <button type="button" @click="openSelect" x-ref="selectButton" class="form-select w-full peer flex justify-between btn gap-x-2 dropdown-country
                required
                
                " :class="selected ? 'option-selected' : ''">
                                <label for="countrySwitcher" class="text-body-xs text-black/72 flex items-center sr-only">
                                    <span>Séléctionnez...</span>
                                </label>
                                <span class="flex flex-row items-center gap-2">
                                    <template x-if="selected && selected.type === 'leading-icon'">
                                        <img :src="selected.image" :alt="selected.name">
                                    </template>
                                    <span x-text="selected ? selected.name : 'Séléctionnez...'">
                                        Séléctionnez...
                                    </span>
                                </span>
                                <span class="transition-all transform flex items-center" :class="{'rotate-180' : show}">
                                    <svg class=" shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                                    </svg> </span>
                            </button>

                            <div class="dropdown-content relative w-full overflow-auto max-h-screen-40" x-show="show" x-transition x-cloak @click.outside="show = false" x-anchor.bottom-start.offset.0="$refs.selectButton">
                                <template x-for="option in options">
                                    <div>
                                        <template x-if="option.type === 'group'">
                                            <div class="item-category text-brand-700 font-bold">
                                                <div class="dropdown-item-category p-2">
                                                    <span class="flex-1" x-text="option.name"></span>
                                                </div>
                                            </div>
                                        </template>

                                        <template x-if="option.type !== 'group'">
                                            <div @click="select(option.id)" :class="option.checked ? 'selected' : ''">

                                                <template x-if="option.href">
                                                    <div>
                                                        <a :href="option.href" class="dropdown-item cursor-pointer p-2">
                                                            <template x-if="option.image">
                                                                <img :src="option.image" :alt="option.name">
                                                            </template>

                                                            <span class="flex-1" x-text="option.name"></span>
                                                            <template x-if="option.checked">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                                    <path d="M21 2H3C2.4 2 2 2.4 2 3V21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21V3C22 2.4 21.6 2 21 2ZM17.7 9.3L10.9 16.1C10.5 16.5 9.9 16.5 9.5 16.1L6.3 12.9C5.9 12.5 5.9 11.9 6.3 11.5C6.7 11.1 7.3 11.1 7.7 11.5L10.2 14L16.3 7.9C16.7 7.5 17.3 7.5 17.7 7.9C18.1 8.3 18.1 8.9 17.7 9.3Z" fill="#34A5C3" />
                                                                </svg>
                                                            </template>
                                                        </a>
                                                    </div>
                                                </template>

                                                <template x-if="!option.href">
                                                    <div class="dropdown-item cursor-pointer p-2">
                                                        <template x-if="option.image">
                                                            <img :src="option.image" :alt="option.name">
                                                        </template>

                                                        <span class="flex-1" x-text="option.name"></span>
                                                        <template x-if="option.checked">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                                <path d="M21 2H3C2.4 2 2 2.4 2 3V21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21V3C22 2.4 21.6 2 21 2ZM17.7 9.3L10.9 16.1C10.5 16.5 9.9 16.5 9.5 16.1L6.3 12.9C5.9 12.5 5.9 11.9 6.3 11.5C6.7 11.1 7.3 11.1 7.7 11.5L10.2 14L16.3 7.9C16.7 7.5 17.3 7.5 17.7 7.9C18.1 8.3 18.1 8.9 17.7 9.3Z" fill="#34A5C3" />
                                                            </svg>
                                                        </template>
                                                    </div>
                                                </template>
                                            </div>
                                        </template>
                                    </div>
                                </template>
                            </div>
                            <select class="sr-only required" id="countrySwitcher" required name="select" id="select">
                                <option value="" selected disabled hidden></option>
                                <option value="fr" selected="selected">France (€)</option>
                                <option value="br">Brazil (R$)</option>
                                <option value="sg">Singapore ($)</option>
                            </select>
                        </div>
                    </div>

                    <script>
                        function selectcountrySwitcher() {
                            return {
                                rawOptions: [{
                                    "value": "fr",
                                    "text": "France (€)",
                                    "href": "https://www.etatpur.fr/",
                                    "type": "leading-icon",
                                    "image": "/img/flags/fr.svg",
                                    "selected": true
                                }, {
                                    "value": "br",
                                    "text": "Brazil (R$)",
                                    "href": "https://www.etatpur.com.br/",
                                    "type": "leading-icon",
                                    "image": "/img/flags/br.svg"
                                }, {
                                    "value": "sg",
                                    "text": "Singapore ($)",
                                    "href": "https://www.etatpur.sg/",
                                    "type": "leading-icon",
                                    "image": "/img/flags/sg.svg"
                                }],
                                options: [],
                                show: false,
                                selected: null,
                                init() {
                                    Array.from(this.rawOptions).forEach(option => {
                                        if (!option.disabled) {
                                            this.options.push({
                                                id: option.value,
                                                name: option.text,
                                                checked: option.selected,
                                                image: option.image,
                                                href: option.href,
                                                type: option.type,
                                            })
                                        }
                                        if (option.selected && option.value) {
                                            this.select(option.value);
                                        }
                                    });
                                },
                                openSelect() {
                                    this.show = !this.show;
                                },
                                select(id) {
                                    this.options = this.options.map(option => {
                                        if (option.id === id) {
                                            option.checked = true;
                                            this.selected = option;
                                        } else {
                                            option.checked = false;
                                        }
                                        return option;
                                    });
                                    document.getElementById('countrySwitcher').value = this.selected.id;
                                    this.show = false;
                                }
                            }
                        }
                    </script>
                </div>

            </div>
        </div>

        <div class="flex flex-col gap-y-4 2xl:gap-y-6 3xl:gap-y-10 pt-6 lg:pt-0">
            <div class="flex flex-col gap-y-2">
                <div class="font-bold">Newsletter</div>
                <form class="flex gap-x-2">

                    <div class="footer-newsletter w-full flex relative">
                        <label for="newsletter" class="sr-only">Votre adresse email pour recevoir la newsletter</label>
                        <input id="newsletter" type="email" name="newsletter" placeholder="Email" required aria-required="true" class="form-email bg-transparent w-full h-auto">
                        <span class="required absolute right-0 top-0 h-full flex items-center pr-3 text-error">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M8.48605 7.23004L8.81938 7.03759L11.8608 5.2816C12.0734 5.15887 12.3452 5.23171 12.468 5.44428C12.5907 5.65685 12.5179 5.92867 12.3053 6.0514L9.26383 7.80738L8.9305 7.99983L9.26383 8.19228L12.3053 9.94827C12.5179 10.071 12.5907 10.3428 12.468 10.5554C12.3452 10.768 12.0734 10.8408 11.8608 10.7181L8.81938 8.96208L8.48605 8.76963V9.15453V12.6665C8.48605 12.912 8.28706 13.1109 8.0416 13.1109C7.79614 13.1109 7.59716 12.912 7.59716 12.6665V9.15454V8.76964L7.26382 8.96209L4.22237 10.7181L4.32568 10.897L4.22237 10.7181C4.0098 10.8408 3.73798 10.768 3.61525 10.5554C3.49252 10.3428 3.56536 10.071 3.77793 9.94827L6.81938 8.19228L7.15272 7.99983L6.81938 7.80738L3.77794 6.0514L3.66964 6.23898L3.77794 6.0514C3.56536 5.92867 3.49253 5.65685 3.61526 5.44428C3.73799 5.23171 4.0098 5.15887 4.22238 5.2816L7.26382 7.03758L7.59716 7.23003V6.84513V3.33317C7.59716 3.08771 7.79614 2.88873 8.0416 2.88873C8.28706 2.88873 8.48605 3.08771 8.48605 3.33317V6.84514V7.23004Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
                            </svg>
                        </span>
                    </div>

                    <button type="submit" aria-label="S'inscrire à la newsletter" class=" btn  btn-dark  btn-solid  btn-size-lg">
                        OK

                    </button>
                </form>

                <div class="text-body-xs text-black/72">
                    NAOS France (Etat Pur) collecte les données personnelles ci-dessus afin de prendre en charge votre demande. Pour
                    en savoir plus sur l’utilisation de vos données et sur vos droits,
                    <a href="#" class="underline hover:no-underline">cliquez-ici</a>
                </div>
            </div>

            <div class="flex flex-col md:flex-row lg:flex-col justify-between gap-y-4 2xl:gap-y-6 3xl:gap-y-10">
                <div>
                    <div class=" font-bold mb-2">Contact</div>
                    <div class="flex items-center gap-2">
                        <a href="#" class="
        
         link-medium
         link-dark
        
        
    ">

                            Voir le formulaire de contact

                        </a>
                        <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none" />

                        </svg>
                    </div>
                </div>

                <div>
                    <div class="md:text-right lg:text-left font-bold mb-2">Nous suivre</div>
                    <div class="flex gap-2">
                        <a href="https://www.facebook.com/etatpur" type="button" target="_blank" rel="noopenner noreferer" aria-label="Ouvrir le réseau facebook (s'ouvre dans un nouvel onglet)" aria-label="Ouvrir le réseau facebook" class=" btn  btn-dark  btn-subtle btn-border btn-size-sm btn-only-icon">
                            <svg class=" shrink-0" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0801 3.23972H11.3334V1.11972C10.7266 1.05662 10.1168 1.02546 9.50674 1.02639C7.6934 1.02639 6.4534 2.13305 6.4534 4.15972V5.90639H4.40674V8.27972H6.4534V14.3597H8.90674V8.27972H10.9467L11.2534 5.90639H8.90674V4.39305C8.90674 3.69305 9.0934 3.23972 10.0801 3.23972Z" fill="currentColor" />

                            </svg>

                        </a>
                        <a href="https://www.instagram.com/etatpur/" type="button" target="_blank" rel="noopenner noreferer" aria-label="Ouvrir le réseau instagram (s'ouvre dans un nouvel onglet)" aria-label="Ouvrir le réseau instagram" class=" btn  btn-dark  btn-subtle btn-border btn-size-sm btn-only-icon">
                            <svg class=" shrink-0" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">

                                <g clip-path="url(#clip0_10589_31690)">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.36 0H4.64C2.0774 0 0 2.0774 0 4.64V11.36C0 13.92 2.08 16 4.64 16H11.36C13.9226 16 16 13.9226 16 11.36V4.64C16 2.08 13.92 0 11.36 0ZM13.2 3.8C13.2 3.24772 12.7523 2.8 12.2 2.8C11.6477 2.8 11.2 3.24772 11.2 3.8C11.2 4.35228 11.6477 4.8 12.2 4.8C12.7523 4.8 13.2 4.35228 13.2 3.8ZM8 4C10.2091 4 12 5.79086 12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8C4 5.79086 5.79086 4 8 4ZM5.6 8C5.6 6.67452 6.67452 5.6 8 5.6C9.32548 5.6 10.4 6.67452 10.4 8C10.4 9.32548 9.32548 10.4 8 10.4C6.67452 10.4 5.6 9.32548 5.6 8Z" fill="currentColor" />
                                </g>
                                <defs>
                                    <clipPath id="clip0_10589_31690">
                                        <rect width="16" height="16" fill="currentColor" />
                                    </clipPath>
                                </defs>
                            </svg>

                        </a>
                        <a href="https://www.youtube.com/etatpur" type="button" target="_blank" rel="noopenner noreferer" aria-label="Ouvrir le réseau youtube (s'ouvre dans un nouvel onglet)" aria-label="Ouvrir le réseau youtube" class=" btn  btn-dark  btn-subtle btn-border btn-size-sm btn-only-icon">
                            <svg class=" shrink-0" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.2511 3.00091C14.9395 3.18488 15.4816 3.72697 15.6656 4.41541C16 5.66316 16 8.26654 16 8.26654C16 8.26654 16 10.8699 15.6656 12.1175C15.4816 12.806 14.9395 13.3482 14.2511 13.5322C13.0032 13.8664 7.99994 13.8664 7.99994 13.8664C7.99994 13.8664 2.99666 13.8664 1.74875 13.5322C1.06047 13.3482 0.51825 12.806 0.33425 12.1175C0 10.8699 0 8.26654 0 8.26654C0 8.26654 0 5.66316 0.33425 4.41541C0.51825 3.72697 1.06047 3.18488 1.74875 3.00091C2.99666 2.6665 7.99994 2.6665 7.99994 2.6665C7.99994 2.6665 13.0032 2.6665 14.2511 3.00091ZM10.5566 8.26706L6.39974 10.6671V5.86702L10.5566 8.26706Z" fill="currentColor" />

                            </svg>

                        </a>
                        <a href="https://www.tiktok.com/@etatpur" type="button" target="_blank" rel="noopenner noreferer" aria-label="Ouvrir le réseau tiktok (s'ouvre dans un nouvel onglet)" aria-label="Ouvrir le réseau tiktok" class=" btn  btn-dark  btn-subtle btn-border btn-size-sm btn-only-icon">
                            <svg class=" shrink-0" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4076 4.18502C12.3176 4.13851 12.23 4.08752 12.1451 4.03225C11.8982 3.86905 11.6719 3.67675 11.4709 3.4595C10.9682 2.88425 10.7804 2.30067 10.7112 1.89208H10.714C10.6563 1.55293 10.6801 1.3335 10.6838 1.3335H8.39387V10.1881C8.39387 10.3069 8.39387 10.4244 8.38887 10.5405C8.38887 10.555 8.38748 10.5683 8.38664 10.5839C8.38664 10.5903 8.38664 10.5969 8.38525 10.6036C8.38525 10.6053 8.38525 10.6069 8.38525 10.6086C8.36112 10.9263 8.25928 11.2332 8.08869 11.5023C7.9181 11.7714 7.684 11.9945 7.40697 12.1518C7.11825 12.3161 6.79169 12.4023 6.45952 12.4018C5.39263 12.4018 4.52795 11.5319 4.52795 10.4575C4.52795 9.38309 5.39263 8.51314 6.45952 8.51314C6.66147 8.51295 6.86219 8.54473 7.05421 8.6073L7.05699 6.27575C6.47406 6.20045 5.88186 6.24678 5.31773 6.41181C4.75361 6.57684 4.22981 6.85699 3.77937 7.23459C3.38469 7.57752 3.05288 7.98669 2.79887 8.4437C2.7022 8.61036 2.3375 9.28004 2.29334 10.3669C2.26556 10.9838 2.45083 11.623 2.53916 11.8871V11.8927C2.59471 12.0482 2.80998 12.579 3.16079 13.0265C3.44368 13.3855 3.7779 13.7008 4.15269 13.9623V13.9568L4.15824 13.9623C5.2668 14.7156 6.4959 14.6662 6.4959 14.6662C6.70867 14.6576 7.42141 14.6662 8.23082 14.2826C9.12855 13.8573 9.63964 13.2237 9.63964 13.2237C9.96614 12.8452 10.2258 12.4137 10.4074 11.948C10.6146 11.4033 10.6838 10.75 10.6838 10.4889V5.79133C10.7115 5.808 11.0815 6.0527 11.0815 6.0527C11.0815 6.0527 11.6145 6.39435 12.4462 6.61684C13.0428 6.77517 13.8466 6.8085 13.8466 6.8085V4.53528C13.565 4.56583 12.9931 4.47695 12.4076 4.18502Z" fill="currentColor" />

                            </svg>

                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</nav>