<footer data-component-type="Footer" data-component-slug="ss-education-template-footer">
  <div class="bg-[#019D76] pt-[80px] pb-6">
  <div class="max-w-[90%] mx-auto px-6">

    <!-- Top Grid -->
    <div class="grid grid-cols-1 grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-12 pb-10 border-b border-[#C7D2D1]">

      <!-- Navigation -->


        <!-- BRAND + DESCRIPTION -->
      <div class="md:col-span-3 lg:col-span-1">
        <div class="flex items-center gap-3 mb-4">
          <img data-node="footer_logo" data-node-type="file" data-node-label="Footer Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750781/seltrix/templates/ss-education-template/Logo2.png" src="{{footer_logo}}" class="w-[170px]" alt="logo">
        </div>

        <p data-node="footer_description" data-node-type="textarea" data-node-label="Footer Description" data-node-default="Learning that grows with you, anytime, anywhere. Your journey to digital mastery starts here." class="text-white max-w-[450px] leading-relaxed">
          {{footer_description}}
        </p>
      </div>

      <div>
        <h4 class="text-[#FFFFFF] font-medium mb-4" data-node="footer_nav_title" data-node-type="text" data-node-label="Navigation Title" data-node-default="Navigation">
          {{footer_nav_title}}
        </h4>

        <ul class="space-y-3 text-sm text-[#636363]">

          <!-- Nav 1 -->
          <li>
            <a href="{{footer_nav_1_link}}" data-node="footer_nav_1_link" data-node-type="page_links" class="text-white" data-node-label="Navigation Link 1" data-node-default="#">
              <span data-node="footer_nav_1_text" data-node-type="text" data-node-label="Navigation Text 1" data-node-default="Home">
                {{footer_nav_1_text}}
              </span>
            </a>
          </li>

          <!-- Nav 2 -->
          <li>
            <a href="{{footer_nav_2_link}}" data-node="footer_nav_2_link" data-node-type="page_links" class="text-white" data-node-label="Navigation Link 2" data-node-default="#">
              <span data-node="footer_nav_2_text" data-node-type="text" data-node-label="Navigation Text 2" data-node-default="About Us">
                {{footer_nav_2_text}}
              </span>
            </a>
          </li>

          <!-- Nav 3 -->
          <li>
            <a href="{{footer_nav_3_link}}" data-node="footer_nav_3_link" data-node-type="page_links" class="text-white" data-node-label="Navigation Link 3" data-node-default="#">
              <span data-node="footer_nav_3_text" data-node-type="text" data-node-label="Navigation Text 3" data-node-default="Top Courses">
                {{footer_nav_3_text}}
              </span>
            </a>
          </li>

          <!-- Nav 4 -->
          <li>
            <a href="{{footer_nav_4_link}}" data-node="footer_nav_4_link" data-node-type="page_links" class="text-white" data-node-label="Navigation Link 4" data-node-default="#">
              <span data-node="footer_nav_4_text" data-node-type="text" data-node-label="Navigation Text 4" data-node-default="Contact">
                {{footer_nav_4_text}}
              </span>
            </a>
          </li>

        </ul>
      </div>


      <!-- Destinations -->
      <div>
        <h4 class="text-[#FFFFFF] font-medium mb-4" data-node="footer_dest_title" data-node-type="text" data-node-label="Destinations Title" data-node-default="Explore">
          {{footer_dest_title}}
        </h4>

        <ul class="space-y-3 text-sm text-[#636363]">

          <li>
            <a href="{{footer_dest_1_link}}" data-node="footer_dest_1_link" data-node-type="page_links" class="text-white" data-node-default="#">
              <span data-node="footer_dest_1_text" data-node-type="text" data-node-default="Pricing">
                {{footer_dest_1_text}}
              </span>
            </a>
          </li>

          <li>
            <a href="{{footer_dest_2_link}}" data-node="footer_dest_2_link" data-node-type="page_links" class="text-white" data-node-default="#">
              <span data-node="footer_dest_2_text" data-node-type="text" data-node-default="Certifications">
                {{footer_dest_2_text}}
              </span>
            </a>
          </li>

          <li>
            <a href="{{footer_dest_3_link}}" data-node="footer_dest_3_link" data-node-type="page_links" class="text-white" data-node-default="#">
              <span data-node="footer_dest_3_text" data-node-type="text" data-node-default="Resources">
                {{footer_dest_3_text}}
              </span>
            </a>
          </li>

          <li>
            <a href="{{footer_dest_4_link}}" data-node="footer_dest_4_link" data-node-type="page_links" class="text-white" data-node-default="#">
              <span data-node="footer_dest_4_text" data-node-type="text" data-node-default="Testimonials">
                {{footer_dest_4_text}}
              </span>
            </a>
          </li>

        </ul>
      </div>


      <!-- Travel Info -->
      <div>
        <h4 class="text-[#FFFFFF] font-medium mb-4" data-node="footer_info_title" data-node-type="text" data-node-label="Travel Info Title" data-node-default="Support">
          {{footer_info_title}}
        </h4>

        <ul class="space-y-3 text-sm text-[#636363]">

          <li>
            <a href="{{footer_info_1_link}}" data-node="footer_info_1_link" data-node-type="page_links" class="text-white" data-node-default="#">
              <span data-node="footer_info_1_text" data-node-type="text" data-node-default="Student Login">
                {{footer_info_1_text}}
              </span>
            </a>
          </li>

          <li>
            <a href="{{footer_info_2_link}}" data-node="footer_info_2_link" data-node-type="page_links" class="text-white" data-node-default="#">
              <span data-node="footer_info_2_text" data-node-type="text" data-node-default="Help Center">
                {{footer_info_2_text}}
              </span>
            </a>
          </li>

          <li>
            <a href="{{footer_info_3_link}}" data-node="footer_info_3_link" data-node-type="page_links" class="text-white" data-node-default="#">
              <span data-node="footer_info_3_text" data-node-type="text" data-node-default="FAQs">
                {{footer_info_3_text}}
              </span>
            </a>
          </li>

          <li>
            <a href="{{footer_info_4_link}}" data-node="footer_info_4_link" data-node-type="page_links" class="text-white" data-node-default="#">
              <span data-node="footer_info_4_text" data-node-type="text" data-node-default="Terms & Privacy">
                {{footer_info_4_text}}
              </span>
            </a>
          </li>

        </ul>
      </div>


      <!-- Follow Us + Newsletter -->
      <div>
        <h4 class="text-[#FFFFFF] font-medium mb-4" data-node="footer_follow_title" data-node-type="text" data-node-label="Follow Us Title" data-node-default="Follow Us">
          {{footer_follow_title}}
        </h4>

        <!-- Social Icons -->
        <div class="flex gap-4 text-[#FFFFFF] text-lg mb-6">
          <a href="#" class="hover:opacity-70 transition"> <img src="{{follow_logo_icon1}}" data-node="follow_logo_icon1" data-node-type="file" data-node-label="Follow Logo Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750816/seltrix/templates/ss-education-template/tw.png" alt="Company Logo" class="w-6 h-6"></a>
          <a href="#" class="hover:opacity-70 transition">
            <img src="{{follow_logo_icon2}}" data-node="follow_logo_icon2" data-node-type="file" data-node-label="Follow Logo Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750763/seltrix/templates/ss-education-template/face.png" alt="Company Logo" class="w-6 h-6">
          </a>
          <a href="#" class="hover:opacity-70 transition">
            <img src="{{follow_logo_icon3}}" data-node="follow_logo_icon3" data-node-type="file" data-node-label="Follow Logo Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750792/seltrix/templates/ss-education-template/p.png" alt="Company Logo" class="w-6 h-6">
          </a>
          <a href="#" class="hover:opacity-70 transition">
            <img src="{{follow_logo_icon4}}" data-node="follow_logo_icon4" data-node-type="file" data-node-label="Follow Logo Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750758/seltrix/templates/ss-education-template/dis.png" alt="Company Logo" class="w-6 h-6">
          </a>
        </div>

        <!-- Newsletter -->
        <!-- Newsletter -->
        <p class="text-sm text-[#FFFFFF] mb-2" data-node="newsletter_label" data-node-type="text" data-node-default="Subscribe to newsletter">
          {{newsletter_label}}
        </p>

          <div class="flex flex-col sm:flex-row w-full max-w-sm border border-[#C7D2D1]">
          <input type="email" placeholder="Enter your email" class="w-full sm:flex-1 px-4 py-2 text-sm outline-none bg-transparent text-white placeholder-white/100">
          <button class="bg-[#FFFFFF] text-[#019D76] px-5 py-2 text-sm hover:bg-[#0C3132] hover:text-white transition w-full sm:w-auto" data-node="btn_newsletter_label" data-node-type="text" data-node-default="Subscribe">
            {{btn_newsletter_label}}
          </button>
        </div>

      </div>

    </div>

    <!-- Bottom -->
    <div class="text-center text-sm text-[#FFFFFF] pt-6" data-node="copy_right" data-node-type="text" data-node-default="2025 All Rights Reserved">
     {{copy_right}}
    </div>

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