<footer data-component-type="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 sm:grid-cols-2 lg:grid-cols-5 gap-12 pb-10 border-b border-[#C7D2D1]">

      <!-- Navigation -->


        <!-- BRAND + DESCRIPTION -->
      <div class="">
        <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="../assets/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="#" class="footer-link text-white">
              <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" 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" 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" 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="../assets/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="../assets/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="../assets/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="../assets/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>