HEX
Server: LiteSpeed
System: Linux premium260.web-hosting.com 4.18.0-553.45.1.lve.el8.x86_64 #1 SMP Wed Mar 26 12:08:09 UTC 2025 x86_64
User: aliazzsr (627)
PHP: 7.4.33
Disabled: NONE
Upload Files
File: /home/aliazzsr/html.vqode.com/Pankore/whoWeAre.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
      integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <script
      defer
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>

    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/output.css" />
  </head>
  <body class="whoWeAre-body">
    <main>
      <header
        class="fixed w-full top-0 z-50 py-4 scroll-header max-sm:max-w-[100vw]"
      >
        <nav class="flex items-center justify-between wrapper z-50">
          <a>
            <img
              class="header-logo md:h-auto h-[55px]"
              src="public/header_footer/logo.webp"
            />
          </a>
          <button id="menu-button">
            <img class="header-menu" src="public/header_footer/menu.webp" />
          </button>
        </nav>
      </header>

      <div id="menu" class="menu px-4">
        <div class="h-full flex flex-col wrapper">
          <div
            class="flex items-center justify-between py-4 text-black font-semibold"
          >
            <button id="closeMenu">
              <i
                class="fa fa-times fa-xmark text-gray-500 md:text-[32px] text-[20px] absolute md:right-14 right-4 md:top-6 top-3"
                aria-hidden="true"
              ></i>
            </button>
            <a class="flex-1">
              <img
                id="menu-button"
                class="md:h-auto h-[50px]"
                src="public/menu/logo.webp"
              />
            </a>
            <div class="flex items-center justify-between md:flex-1">
              <div class="flex items-center space-x-3">
                <i
                  class="fa fa-globe text-purple text-[16px]"
                  aria-hidden="true"
                ></i>
                <div class="font-bold text-[17px] space-x-1.5">
                  <span>EN</span>
                  <span class="text-slate-500/80 text-lg font-[300]">|</span>
                  <span class="text-slate-500/80">AR</span>
                </div>
              </div>
              <div class="space-x-3 hidden md:block">
                <i
                  class="fa fa-phone text-purple text-[13px]"
                  aria-hidden="true"
                ></i>

                <span>+971 4227 4088</span>
              </div>
              <div class="space-x-3 hidden md:block">
                <i
                  class="fa fa-envelope text-purple text-[16px]"
                  aria-hidden="true"
                ></i>
                <span>[email protected]</span>
              </div>
            </div>
          </div>
          <div
            class="flex items-center flex-1 md:justify-between justify-center 2xl:justify-center 2xl:space-x-12"
          >
            <div id="menu-left-images" class="flex items-center space-x-8">
              <img
                class="rounded-[28px] h-[460px] hidden md:inline-flex"
                src="public/menu/menu-img1.webp"
              />
              <img
                class="rounded-[28px] h-[460px] hidden md:inline-flex"
                src="public/menu/menu-img2.webp"
              />
            </div>
            <div
              id="menu-center"
              class="bg-black rounded-[34px] md:w-[450px] w-[380px] md:px-20 px-6 md:py-14 py-8"
            >
              <span class="text-neutral-600 font-semibold text-[18px]"
                >Menu</span
              >
              <nav>
                <ul
                  class="text-white font-[600] tracking-[1px] text-[22px] space-y-7 mt-6"
                >
                  <li class="nav-item" id="home">
                    <a href="home.html">HOME</a>
                  </li>
                  <li class="nav-item active" id="about">
                    <a href="whoWeAre.html">WHO WE ARE</a>
                  </li>
                  <li class="nav-item" id="services">
                    <a href="businesses.html">OUR BUSINESS</a>
                  </li>
                  <li class="nav-item" id="contact">
                    <a href="productsSlider.html">PRODUCTS</a>
                  </li>
                  <li class="nav-item" id="services">
                    <a href="blogListing.html">BLOGS</a>
                  </li>
                  <li class="nav-item" id="contact">
                    <a href="contactUs.html">CONTACT US</a>
                  </li>
                </ul>
              </nav>
            </div>
            <div id="menu-right-images" class="flex items-center space-x-8">
              <img
                class="rounded-[28px] h-[460px] hidden md:inline-flex"
                src="public/menu/menu-img3.webp"
              />
              <img
                class="rounded-[28px] h-[460px] hidden md:inline-flex"
                src="public/menu/menu-img4.webp"
              />
            </div>
          </div>
          <div class="flex items-center justify-between pb-2 font-semibold">
            <div class="space-x-2 md:hidden block">
              <i
                class="fa fa-phone text-purple text-[13px]"
                aria-hidden="true"
              ></i>

              <span>+971 4227 4088</span>
            </div>
            <div class="space-x-2 md:hidden block">
              <i
                class="fa fa-envelope text-purple text-[16px]"
                aria-hidden="true"
              ></i>
              <span>[email protected]</span>
            </div>
          </div>
        </div>
      </div>
      <!-- Carousel Section -->
      <section
        id="carouselExampleIndicators"
        class="carousel slide"
        data-bs-ride="carousel"
      >
        <!-- <div class="carousel-indicators home-banner">
          <button
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide-to="0"
            class="active"
            aria-current="true"
            aria-label="Slide 1"
          ></button>
          <button
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide-to="1"
            aria-label="Slide 2"
            class="bg-red-200"
          ></button>
          <button
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide-to="2"
            aria-label="Slide 3"
          ></button>
        </div> -->
        <div class="carousel-inner">
          <div class="carousel-item active relative">
            <img
              src="public/whoWeAre/banner.webp"
              class="w-full md:h-[80vh] md:min-h-[650px] min-h-[550px] object-cover"
              alt="..."
            />
            <div
              class="absolute inset-0 md:pt-10 mt-12 text-white flex flex-col items-center justify-center px-3 banner-content-animation"
            >
              <h1 class="md:text-8xl text-center text-[38px] font-bold tracking-[1px] mb-6">
                WHO WE ARE
              </h1>
              <div class="text-center font-medium md:text-lg space-y-[3px]">
                <p class="hidden md:block">
                  We have established ourselves as a trusted player in the global foodstuff industry, 
                </p>
                <p class="hidden md:block">
                  enabling the trade of goods and services across borders and between  
                </p>
                <p class="hidden md:block">different regions.</p>
                <!-- only visible in mobile view -->
                <p class="md:hidden">
                  We have established ourselves as a trusted player in the global foodstuff industry, enabling the trade of goods and services across borders and between different regions. 
                </p>
              </div>
              <a
                href="contactUs.html"
                class="primary-button text-white md:px-10 md:py-[9px] px-6 py-[8px] space-x-2 rounded-lg font-semibold md:text-[15px] text-[14px] mt-12"
                type="button"
              >
                <span>CONTACT US</span> <span class="text-lg">+</span>
              </a>
            </div>
          </div>
          <div class="carousel-item relative">
            <img
              src="public/whoWeAre/banner1.webp"
              class="w-full md:h-[80vh] md:min-h-[650px] min-h-[550px] object-cover"
              alt="..."
            />
            <div
              class="absolute inset-0 md:pt-10 mt-12 text-white flex flex-col items-center justify-center px-3 banner-content-animation"
            >
              <h1 class="md:text-8xl text-[38px] font-bold tracking-[1px] mb-6">
                EXPERTISE
              </h1>
              <div class="text-center font-medium md:text-lg space-y-[3px]">
                <p class="hidden md:block">
                  Our deep industry knowledge and expertise allow us to provide the highest 
                </p>
                <p class="hidden md:block">
                  quality products and services.
                </p>
                <!-- only visible in mobile view -->
                <p class="md:hidden">
                  Our deep industry knowledge and expertise allow us to provide the highest quality products and services.
                </p>
              </div>
              <a
                href="contactUs.html"
                class="primary-button text-white md:px-10 md:py-[9px] px-6 py-[8px] space-x-2 rounded-lg font-semibold md:text-[15px] text-[14px] mt-12"
                type="button"
              >
                <span>CONTACT US</span> <span class="text-lg">+</span>
              </a>
            </div>
          </div>
          <div class="carousel-item relative">
            <img
              src="public/whoWeAre/banner2.webp"
              class="w-full md:h-[80vh] md:min-h-[650px] min-h-[550px] object-cover"
              alt="..."
            />
            <div
              class="absolute inset-0 md:pt-10 mt-12 text-white flex flex-col items-center justify-center px-3 banner-content-animation"
            >
              <h1 class="md:text-8xl text-[38px] font-bold tracking-[1px] mb-6">
                COLLABORATION
              </h1>
              <div class="text-center font-medium md:text-lg space-y-[3px]">
                <p class="hidden md:block">
                  We value collaboration, both within our team and with our partners. Together,
                </p>
                <p class="hidden md:block">
                  we achieve more.
                </p>
                <!-- only visible in mobile view -->
                <p class="md:hidden">
                  We value collaboration, both within our team and with our partners. Together, we achieve more.
                </p>
              </div>
              <a
                href="contactUs.html"
                class="primary-button text-white md:px-10 md:py-[9px] px-6 py-[8px] space-x-2 rounded-lg font-semibold md:text-[15px] text-[14px] mt-12"
                type="button"
              >
                <span>CONTACT US</span> <span class="text-lg">+</span>
              </a>
            </div>
          </div>
        </div>
        <button
          class="carousel-control-prev md:-ml-10 md:flex hidden"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          data-bs-slide="prev"
        >
          <img src="public/home/slider-pre.webp" />
        </button>
        <button
          class="carousel-control-next md:-mr-10 md:flex hidden"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          data-bs-slide="next"
        >
          <img src="public/home/slider-next.webp" />
        </button>
      </section>

      <section
        class="wrapper grid md:grid-cols-2 grid-cols-1 gap-10 md:py-16 md:pt-20 py-8 max-sm:overflow-hidden"
      >
        <div class="reveal fade-left overflow-hidden md:pb-10">
          <h4 class="md:text-[60px] text-[32px] font-bold mb-2.5">
            WHO WE ARE?
          </h4>
          <p class="font-semibold text-[21px]">
            Pan Kore specializes in trading wide range of Commodities
          </p>
          <p class="text-[18px] font-medium mt-[20px] text-paragraph-color">
            We have established ourselves as a trusted player in the global foodstuff industry, enabling the trade of goods and services across borders and between different regions. Our expertise and dedication to excellence have earned us a respectful place within the industry, and we're committed to continuing our tradition of excellence and professionalism
          </p>
          <p class="text-[18px] font-medium mt-[20px] text-paragraph-color">
            Looking ahead, we remain firmly committed to our mission and our values to provide our clients with superior quality products.
          </p>
          <a
            href="contactUs.html"
            class="primary-button text-white md:px-8 md:py-[9px] px-6 py-[8px] space-x-2 rounded-[10px] font-semibold md:text-[15px] text-[14px] md:mt-12 mt-6"
            type="button"
          >
            <span>GET IN TOUCH</span> <span class="text-lg">+</span>
          </a>
        </div>
        <div class="reveal fade-right relative md:h-full h-[600px]">
          <img
            class="absolute -top-[44px] md:block hidden -right-[44px]"
            src="public/whoWeAre/dot1.webp"
          />
          <img
            class="absolute top-[180px] md:block hidden left-[80px]"
            src="public/whoWeAre/dot1.webp"
          />
          <img
            class="absolute bottom-[80px] md:block hidden right-[180px]"
            src="public/whoWeAre/dot1.webp"
          />
          <img
            class="rounded-[24px] absolute top-0 right-0"
            src="public/whoWeAre/img1.webp"
          />
          <img
            class="rounded-[24px] absolute bottom-0 md:left-0 left-6 z-20"
            src="public/whoWeAre/img2.webp"
          />
          <div
            class="absolute bottom-0 md:right-8 right-0 bg-dark-gray rounded-[24px] px-8 text-center pb-4 pt-[38px] z-30 reveal latePopOut"
          >
            <div class="text-white font-bold leading-8">
              <span class="text-[80px]">11</span>
              <span class="text-[24px]">+</span>
            </div>
            <span class="text-white text-[16px] font-semibold uppercase"
              >Years Experience</span
            >
          </div>
        </div>
      </section>

      <section class="bg-image-whoWeAre md:h-[350px] h-[300px]">
        <div class="wrapper">
          <h3
            class="text-white md:font-bold font-semibold md:text-[42px] text-[28px] text-center md:pt-14 pt-8"
          >
            Pan kore Mission and Vision
          </h3>
        </div>
      </section>
      <section
        class="wrapper  grid md:grid-cols-2 grid-cols-1 justify-center md:gap-8 gap-4 -mt-[170px] overflow-hidden pb-2"
      >
        <!-- Only Displayed on the Larger Screen --- Animation Stagger problem -->
        <div
          style="--i: 0s"
          class="bg-white  px-8 py-6 rounded-[24px] border border-slate-200/10 shadow-[rgba(0,_0,_0,_0.16)_0px_3px_8px] hover:shadow-[rgba(0,_0,_0,_0.4)_0px_3px_8px] reveal fade-stagger-top hidden md:inline-grid"
        >
        <div class="setHeight">
          <img src="public/whoWeAre/icon1.webp" />
        </div>
          <h3 class="font-bold text-[26px] mb-[10px]">Our Vision</h3>
          <p
            class="text-paragraph-color text-[17px] font-medium leading-[28px]"
          >
          To be the preferred leader in the foodstuff industry, with a special emphasis on sugar, catering to both the African and Asian markets. Our commitment is to deliver high-quality products that are recognized for their excellence, sustainability, and customer satisfaction.
          </p>
        </div>
        <div
          style="--i: 1s"
          class="bg-white px-8 py-6 rounded-[24px] border border-slate-200/10 shadow-[rgba(0,_0,_0,_0.16)_0px_3px_8px] hover:shadow-[rgba(0,_0,_0,_0.4)_0px_3px_8px] reveal fade-stagger-top hidden md:inline-grid"
        >
          <div class="setHeight">
            <img src="public/whoWeAre/icon2.webp" />
          </div>
          <h3 class="font-bold text-[26px] mb-[10px]">Our Mission</h3>
          <p
            class="text-paragraph-color text-[17px] font-medium leading-[28px] contentHeight"
          >
          To consistently deliver premium foodstuff and sugar products to our valued customers, leveraging our expertise and partnerships, while promoting sustainability, innovation, and economic growth for both our company and the markets we serve.
          </p>
        </div>

        <!-- Our values here removed -->

        <!-- Only Display on the Mobile Screens -->
        <div
          class="bg-white px-8 py-6 rounded-[24px] border border-slate-200/10 shadow-[rgba(0,_0,_0,_0.16)_0px_3px_8px] reveal fade-top md:hidden"
        >
          <img src="public/whoWeAre/icon1.webp" class="mb-[20px]" />
          <h3 class="font-bold text-[26px] mb-[10px]">Our Vision</h3>
          <p
            class="text-paragraph-color text-[17px] font-medium leading-[28px]"
          >
          To be the preferred leader in the foodstuff industry, with a special emphasis on sugar, catering to both the African and Asian markets. Our commitment is to deliver high-quality products that are recognized for their excellence, sustainability, and customer satisfaction.
          </p>
        </div>
        <div
          class="bg-white px-8 py-6 rounded-[24px] border border-slate-200/10 shadow-[rgba(0,_0,_0,_0.16)_0px_3px_8px] reveal fade-top md:hidden"
        >
          <img src="public/whoWeAre/icon2.webp" class="mb-[20px]" />
          <h3 class="font-bold text-[26px] mb-[10px]">Our Mission</h3>
          <p
            class="text-paragraph-color text-[17px] font-medium leading-[28px]"
          >
          To consistently deliver premium foodstuff and sugar products to our valued customers, leveraging our expertise and partnerships, while promoting sustainability, innovation, and economic growth for both our company and the markets we serve.
          </p>
        </div>
      </section>
      <section class="wrapper py-14">
        <h3 class="font-bold md:text-[58px] text-[32px] text-center">
          Our Values
        </h3>
        <p
          class="font-semibold text-[18px] text-center max-w-[600px] mx-auto mt-2"
        >
        We ensure that our team works sustainably towards growth and excellence with a strong focus on expertise, a customer-centric approach, passion, collaboration, and integrity.
        </p>
        <div
          class="grid md:grid-cols-3 grid-cols-1 md:gap-8 gap-4 mt-10 overflow-hidden pb-2"
        >
          <!-- WEB SECTION -->
          <div
            style="--i: 0s"
            class="standout border rounded-[24px] px-6 py-6 reveal fade-stagger-top hidden md:inline-grid"
          >
          <div class="valueHeight">
            <img src="public/whoWeAre/icon4.webp" class="mb-[20px]" />
          </div>
            <h3 class="font-semibold text-[26px]">Commitment to Excellence</h3>
            <p
              class="font-medium text-[18px] mx-auto mt-2 text-paragraph-color paragrapghHeight"
            >
            We are dedicated to delivering excellence in everything we do, from the quality of our products to the service we provide to our customers.
            </p>
          </div>
          <div
            style="--i: 0.5s"
            class="standout border rounded-[24px] px-6 py-6 reveal fade-stagger-top hidden md:inline-grid"
          >
          <div class="valueHeight">
            <img src="public/whoWeAre/icon5.webp" class="mb-[20px]" />
            </div>
            <h3 class="font-semibold text-[26px]">Expertise</h3>
            <p
              class="font-medium text-[18px] mx-auto mt-2 text-paragraph-color paragrapghHeight"
            >
            Our deep industry knowledge and expertise allow us to provide the highest quality products and services.
            </p>
          </div>
          <div
            style="--i: 1s"
            class="standout border rounded-[24px] px-6 py-6 reveal fade-stagger-top hidden md:inline-grid"
          >
          <div class="valueHeight">
            <img src="public/whoWeAre/icon6.webp" class="mb-[20px]" />
            </div>
            <h3 class="font-semibold text-[26px]">Passion</h3>
            <p
              class="font-medium text-[18px] mx-auto mt-2 text-paragraph-color paragrapghHeight"
            >
            Our team is driven by a deep passion for what we do. It fuels our dedication, creativity, and pursuit of excellence, ensuring we always go the extra mile.
            </p>
          </div>
          <div
            style="--i: 1s"
            class="standout border rounded-[24px] px-6 py-6 reveal fade-stagger-top hidden md:inline-grid"
          >
          <div class="valueHeight">
            <img class="mb-[20px]" src="public/whoWeAre/icon7.webp" />
            </div>

            <h3 class="font-semibold text-[26px]">Customer-Centric Approach</h3>
            <p
              class="font-medium text-[18px] mx-auto mt-2 text-paragraph-color paragrapghHeight"
            >
            Our customers are at the heart of everything we do. We listen to their needs, respond with tailored solutions, and consistently strive to exceed their expectations.
            </p>
          </div>
          <div
            style="--i: 1.5s"
            class="standout border rounded-[24px] px-6 py-6 reveal fade-stagger-top hidden md:inline-grid"
          >
          <div class="valueHeight">
            <img class="mb-[20px]" src="public/whoWeAre/icon8.webp" />
            </div>
            <h3 class="font-semibold text-[26px]">Collaboration</h3>
            <p
              class="font-medium text-[18px] mx-auto mt-2 text-paragraph-color paragrapghHeight"
            >
            We value collaboration, both within our team and with our partners. Together, we achieve more.
            </p>
          </div>
          <div
            style="--i: 2s"
            class="standout border rounded-[24px] px-6 py-6 reveal fade-stagger-top hidden md:inline-grid"
          >
          <div class="valueHeight">
            <img class="mb-[20px]" src="public/whoWeAre/icon9.webp" />
            </div>
            <h3 class="font-semibold text-[26px]">Integrity and Transparency</h3>
            <p
              class="font-medium text-[18px] mx-auto mt-2 text-paragraph-color paragrapghHeight"
            >
            We conduct our business with the utmost integrity and transparency, upholding ethical standards in all our dealings with customers, partners, and employees.
            </p>
          </div>

          <!-- Mobile Section -->
          <div
            class="border rounded-[24px] px-6 py-6 reveal fade-top md:hidden"
          >
            <img src="public/whoWeAre/icon4.webp" class="mb-[20px]" />
            <h3 class="font-semibold text-[26px]">Commitment to Excellence</h3>
            <p
              class="font-medium text-[18px] mx-auto mt-2 text-paragraph-color"
            >
            We are dedicated to delivering excellence in everything we do, from the quality of our products to the service we provide to our customers.
            </p>
          </div>
          <div
            class="border rounded-[24px] px-6 py-6 reveal fade-top md:hidden"
          >
            <img src="public/whoWeAre/icon5.webp" class="mb-[20px]" />
            <h3 class="font-semibold text-[26px]">Expertise</h3>
            <p
              class="font-medium text-[18px] mx-auto mt-2 text-paragraph-color"
            >
            Our deep industry knowledge and expertise allow us to provide the highest quality products and services.
            </p>
          </div>
          <div
            class="border rounded-[24px] px-6 py-6 reveal fade-top md:hidden"
          >
            <img src="public/whoWeAre/icon6.webp" class="mb-[20px]" />
            <h3 class="font-semibold text-[26px]">Passion</h3>
            <p
              class="font-medium text-[18px] mx-auto mt-2 text-paragraph-color"
            >
            Our team is driven by a deep passion for what we do. It fuels our dedication, creativity, and pursuit of excellence, ensuring we always go the extra mile.
            </p>
          </div>
          <div
            class="border rounded-[24px] px-6 py-6 reveal fade-top md:hidden"
          >
            <img class="mb-[20px]" src="public/whoWeAre/icon7.webp" />

            <h3 class="font-semibold text-[26px]">Customer-Centric Approach</h3>
            <p
              class="font-medium text-[18px] mx-auto mt-2 text-paragraph-color"
            >
            Our customers are at the heart of everything we do. We listen to their needs, respond with tailored solutions, and consistently strive to exceed their expectations.
            </p>
          </div>
          <div
            class="border rounded-[24px] px-6 py-6 reveal fade-top md:hidden"
          >
            <img class="mb-[20px]" src="public/whoWeAre/icon8.webp" />
            <h3 class="font-semibold text-[26px]">Collaboration</h3>
            <p
              class="font-medium text-[18px] mx-auto mt-2 text-paragraph-color"
            >
            We value collaboration, both within our team and with our partners. Together, we achieve more.
            </p>
          </div>
          <div
            class="border rounded-[24px] px-6 py-6 reveal fade-top md:hidden"
          >
            <img class="mb-[20px]" src="public/whoWeAre/icon9.webp" />
            <h3 class="font-semibold text-[26px]">Integrity and Transparency</h3>
            <p
              class="font-medium text-[18px] mx-auto mt-2 text-paragraph-color"
            >
            We conduct our business with the utmost integrity and transparency, upholding ethical standards in all our dealings with customers, partners, and employees.
            </p>
          </div>
        </div>
      </section>
    </main>
    <section class="transparent-section"></section>

    <footer class="md:flex bg-purple justify-between pt-3 pb-6 md:pb-0 hidden">
      <img class="" src="public/header_footer/footer-left-sugarcane.webp" />
      <div class="flex-1 flex flex-col max-w-[800px]">
        <div class="flex w-full justify-between text-white flex-1 pt-10">
          <div>
            <h4 class="font-semibold text-[22px] mb-8">OUR PAGES</h4>
            <nav class="space-y-3 flex flex-col text-[17px] font-[500]">
              <a href="home.html">Home</a>
              <a href="whoWeAre.html">Who We Are</a>
              <a href="productsSlider.html">Products</a>
              <a href="pankoreBusiness.html">Our Businesses</a>
              <a href="blogListing.html">Blog</a>
              <a href="contactUs.html">Contact Us</a>
            </nav>
          </div>
          <div class="">
            <h4 class="font-semibold text-[22px] mb-8">ASK FOR MORE</h4>
            <form class="flex flex-col space-y-4">
              <input
                type="text"
                class="placeholder-white outline-none border text-sm border-white px-4 py-[13px] bg-transparent text-white w-[240px]"
                placeholder="Enter full name"
              />
              <input
                type="text"
                class="placeholder-white outline-none border text-sm border-white px-4 py-[13px] bg-transparent text-white w-[240px]"
                placeholder="Enter email address"
              />
              <textarea rows="2" class="footer-msg px-[20px] py-[13px] w-full placeholder:text-[#ffffff] text-[#ffffff] font-medium resize-none" placeholder="Type..." type="text" id="message" name="message" required=""></textarea>
              <button
                class="text-purple bg-white py-[12px] text-[16px] font-bold w-[240px]"
                type="submit"
              >
                SUBMIT NOW
              </button>
            </form>
          </div>
          <div class="">
            <h4 class="font-semibold text-[22px] mb-8">OUR PRODUCTS</h4>
            <nav class="space-y-3 flex flex-col text-[17px] font-[500]">
              <a href="whiteRefinedSugar.html">White Refined Sugar</a>
              <a href="whiteCrystalSugar.html">White Crystal Sugar</a>
              <a href="proboiledRice.html">Proboiled Rice</a>
              <a href="shortGrainSwarna.html">Short Grain Swarna</a>
              <a href="gadarifHalawaSesame.html">Gadarif Halawa Sesame</a>
              <a
                href="productsGrid.html"
                class="underline underline-offset-2 mt-4"
                >View All</a
              >
            </nav>
          </div>
        </div>
        <div
          class="flex -mx-10 items-center justify-center text-white text-[14px] footer-border mt-auto pt-[26px] pb-[26px] px-3"
        >
          <div>
            <span class="font-[400]">COPYRIGHT: </span
            ><span class="font-bold"> ©2023. ALL RIGHTS RESERVED</span>
          </div>
        </div>
      </div>
      <img class="" src="public/header_footer/footer-right-sugarcane.webp" />
    </footer>
    <footer
      class="flex flex-col bg-purple justify-between pt-4 pb-6 md:pb-0 md:hidden"
    >
      <div class="flex justify-between text-white flex-1 pt-10 px-6">
        <div>
          <h4 class="font-semibold md:text-[22px] text-[18px] md:mb-8 mb-3">
            OUR PAGES
          </h4>
          <nav
            class="space-y-3 flex flex-col md:text-[18px] text-[16px] font-[500]"
          >
            <a href="home.html">Home</a>
            <a href="whoWeAre.html">Who We Are</a>
            <a href="productsSlider.html">Products</a>
            <a href="pankoreBusiness.html">Our Businesses</a>
            <a href="blogListing.html">Blog</a>
            <a href="contactUs.html">Contact Us</a>
          </nav>
        </div>

        <div>
          <h4 class="font-semibold md:text-[22px] text-[18px] md:mb-8 mb-3">
            OUR PRODUCTS
          </h4>
          <nav
            class="space-y-3 flex flex-col md:text-[18px] text-[16px] font-[500]"
          >
            <a href="whiteRefinedSugar.html">White Refined Sugar</a>
            <a href="whiteCrystalSugar.html">White Crystal Sugar</a>
            <a href="proboiledRice.html">Proboiled Rice</a>
            <a href="shortGrainSwarna.html">Short Grain Swarna</a>
            <a href="gadarifHalawaSesame.html">Gadarif Halawa Sesame</a>
            <a
              href="productsGrid.html"
              class="underline underline-offset-2 mt-4"
              >View All</a
            >
          </nav>
        </div>
      </div>
      <div class="text-white mt-8 px-4 mb-4">
        <h4 class="font-semibold md:text-[22px] text-[18px] mb-4">
          ASK FOR MORE
        </h4>
        <form class="flex flex-col space-y-4">
          <input
            type="text"
            class="placeholder-white outline-none border text-sm border-white px-4 py-[13px] bg-transparent text-white w-full"
            placeholder="Enter full name"
          />
          <input
            type="text"
            class="placeholder-white outline-none border text-sm border-white px-4 py-[13px] bg-transparent text-white w-full"
            placeholder="Enter email address"
          />
          <textarea rows="2" class="footer-msg px-[20px] py-[13px] w-full placeholder:text-[#ffffff] text-[#ffffff] font-medium resize-none" placeholder="Type..." type="text" id="message" name="message" required=""></textarea>
          <button
            class="text-purple bg-white py-[12px] text-[16px] font-bold w-full"
            type="submit"
          >
            SUBMIT NOW
          </button>
        </form>
      </div>
      <div class="text-white text-[15px] footer-border mt-auto pt-[28px] px-4">
        <div>
          <span class="font-[400]">COPYRIGHT: </span
          ><span class="font-bold"> ©2023. ALL RIGHTS RESERVED</span>
        </div>
      </div>
    </footer>

    <!-- Add your JavaScript scripts here or link to external scripts -->
    <script src="javascript/header-footer.js"></script>
  </body>
</html>