/* FOODFINDER4U HERO
Scoped CSS | No imports | Elementor compatible
*/
#f4u-hero-v2,
#f4u-hero-v2 * {
box-sizing: border-box;
}
#f4u-hero-v2 {
--f4u-orange: #f97316;
--f4u-ink: #111827;
--f4u-muted: #4b5563;
width: 100%;
padding: 32px 20px 36px;
background: #f8fafc;
font-family: inherit;
color: var(--f4u-ink);
-webkit-font-smoothing: antialiased;
}
#f4u-hero-v2 .f4u-inner {
max-width: 1300px;
margin: 0 auto;
width: 100%;
}
#f4u-hero-v2 .f4u-desktop {
display: block;
}
#f4u-hero-v2 .f4u-top {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
gap: 24px;
margin-bottom: 24px;
}
#f4u-hero-v2 .f4u-bottom {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
#f4u-hero-v2 .f4u-card {
position: relative;
overflow: hidden;
border-radius: 20px;
isolation: isolate;
background: #fff;
box-shadow: 0 2px 10px rgba(15,23,42,.045);
transition: transform .45s ease, box-shadow .45s ease;
}
#f4u-hero-v2 .f4u-hover:hover {
transform: translateY(-4px);
box-shadow: 0 18px 34px rgba(15,23,42,.12);
}
#f4u-hero-v2 .f4u-feature,
#f4u-hero-v2 .f4u-fashion {
height: 500px;
min-width: 0;
}
#f4u-hero-v2 .f4u-small {
height: 300px;
min-width: 0;
}
#f4u-hero-v2 .f4u-img {
position: absolute !important;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
display: block;
z-index: 0;
transition: transform .8s ease;
}
#f4u-hero-v2 .f4u-hover:hover .f4u-img {
transform: scale(1.055);
}
#f4u-hero-v2 .f4u-shade {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
/* Main slider */
#f4u-hero-v2 .f4u-feature {
background: #fff;
}
#f4u-hero-v2 .f4u-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .75s ease, visibility .75s ease;
}
#f4u-hero-v2 .f4u-slide.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 2;
}
#f4u-hero-v2 .f4u-slide .f4u-shade {
background: linear-gradient(
90deg,
#fff 0%,
#fff 30%,
rgba(255,255,255,.97) 43%,
rgba(255,255,255,.78) 58%,
rgba(255,255,255,.04) 100%
);
}
#f4u-hero-v2 .f4u-main-copy {
position: relative;
z-index: 3;
width: 70%;
max-width: 620px;
height: 100%;
padding: 48px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
opacity: 0;
transform: translateY(14px);
transition: opacity .6s ease, transform .6s ease;
}
#f4u-hero-v2 .f4u-slide.is-active .f4u-main-copy {
opacity: 1;
transform: translateY(0);
transition-delay: .12s;
}
#f4u-hero-v2 .f4u-pill {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
background: #ffedd5;
color: #ea580c;
border-radius: 50px;
padding: 6px 13px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1.5;
margin-bottom: 18px;
}
#f4u-hero-v2 .f4u-title,
#f4u-hero-v2 .f4u-sub-title,
#f4u-hero-v2 .f4u-m-title {
font-family: inherit;
text-transform: none;
letter-spacing: -.035em;
}
#f4u-hero-v2 .f4u-title {
font-size: clamp(34px, 3.35vw, 54px);
line-height: 1.1;
font-weight: 750;
color: #111827;
margin: 0 0 18px;
}
#f4u-hero-v2 .f4u-title span,
#f4u-hero-v2 .f4u-m-title span {
color: var(--f4u-orange);
}
#f4u-hero-v2 .f4u-description {
font-size: 15px;
line-height: 1.75;
font-weight: 400;
color: #4b5563;
margin: 0 0 28px;
max-width: 430px;
}
#f4u-hero-v2 .f4u-button,
#f4u-hero-v2 .f4u-button:visited {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 11px;
padding: 13px 25px;
width: fit-content;
border-radius: 50px;
border: 0;
background: #111827;
color: #fff !important;
font-size: 14px;
font-weight: 600;
text-decoration: none !important;
line-height: 1.4;
white-space: nowrap;
transition: background .3s ease, transform .3s ease;
}
#f4u-hero-v2 .f4u-button:hover {
background: #f97316;
color: #fff !important;
transform: translateY(-2px);
}
#f4u-hero-v2 .f4u-arrow {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
/* Slider indicators */
#f4u-hero-v2 .f4u-dots {
position: absolute;
left: 48px;
bottom: 25px;
display: flex;
align-items: center;
gap: 8px;
z-index: 10;
}
#f4u-hero-v2 .f4u-dot {
display: block;
width: 10px;
height: 10px;
min-width: 10px;
padding: 0;
border: 0;
border-radius: 50px;
background: #cbd5e1;
cursor: pointer;
transition: width .35s ease, background .35s ease;
}
#f4u-hero-v2 .f4u-dot.is-active {
width: 32px;
background: #f97316;
}
/* Fashion card */
#f4u-hero-v2 .f4u-fashion {
background: #fce7f3;
}
#f4u-hero-v2 .f4u-fashion .f4u-shade {
background: linear-gradient(
180deg,
#fce7f3 0%,
rgba(252,231,243,.98) 20%,
rgba(252,231,243,.83) 42%,
rgba(252,231,243,.28) 78%,
rgba(252,231,243,.6) 100%
);
}
#f4u-hero-v2 .f4u-fashion-copy {
position: relative;
z-index: 3;
height: 100%;
padding: 31px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#f4u-hero-v2 .f4u-sub-title {
color: #111827;
font-size: clamp(22px, 2vw, 29px);
line-height: 1.2;
font-weight: 750;
margin: 0 0 10px;
}
#f4u-hero-v2 .f4u-sub-description {
color: #374151;
font-size: 14px;
line-height: 1.6;
margin: 0;
max-width: 220px;
}
#f4u-hero-v2 .f4u-text-link {
display: inline-flex;
align-items: center;
gap: 9px;
width: fit-content;
margin-top: auto;
padding: 9px 12px;
border-radius: 30px;
color: #111827 !important;
background: rgba(255,255,255,.78);
backdrop-filter: blur(8px);
font-size: 13px;
font-weight: 700;
text-decoration: none !important;
transition: color .3s ease, transform .3s ease;
}
#f4u-hero-v2 .f4u-text-link:hover {
color: #ea580c !important;
transform: translateX(4px);
}
/* Three lower cards */
#f4u-hero-v2 .f4u-agro {
background: #fef08a;
}
#f4u-hero-v2 .f4u-health {
background: #d1fae5;
}
#f4u-hero-v2 .f4u-electronics {
background: #e0f2fe;
}
#f4u-hero-v2 .f4u-small .f4u-img {
left: auto !important;
right: 0 !important;
width: 66% !important;
object-position: right center;
}
#f4u-hero-v2 .f4u-agro .f4u-shade {
background: linear-gradient(90deg,#fef08a 0%,#fef08a 36%,rgba(254,240,138,.88) 51%,transparent 100%);
}
#f4u-hero-v2 .f4u-health .f4u-shade {
background: linear-gradient(90deg,#d1fae5 0%,#d1fae5 36%,rgba(209,250,229,.88) 51%,transparent 100%);
}
#f4u-hero-v2 .f4u-electronics .f4u-shade {
background: linear-gradient(90deg,#e0f2fe 0%,#e0f2fe 36%,rgba(224,242,254,.88) 51%,transparent 100%);
}
#f4u-hero-v2 .f4u-small-copy {
position: relative;
z-index: 3;
height: 100%;
padding: 26px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#f4u-hero-v2 .f4u-small .f4u-sub-title {
font-size: clamp(21px, 1.8vw, 25px);
max-width: 210px;
}
#f4u-hero-v2 .f4u-small .f4u-sub-description {
font-size: 13px;
max-width: 175px;
}
#f4u-hero-v2 .f4u-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.65);
background: rgba(255,255,255,.44);
backdrop-filter: blur(10px);
border-radius: 13px;
margin-bottom: 19px;
color: #111827;
}
#f4u-hero-v2 .f4u-icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Mobile accordion */
#f4u-hero-v2 .f4u-mobile {
display: none;
}
@media (max-width: 1100px) and (min-width: 769px) {
#f4u-hero-v2 .f4u-top {
grid-template-columns: 1.65fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
#f4u-hero-v2 .f4u-bottom {
gap: 16px;
}
#f4u-hero-v2 .f4u-main-copy {
padding: 30px;
width: 85%;
}
#f4u-hero-v2 .f4u-title {
font-size: 38px;
}
#f4u-hero-v2 .f4u-dots {
left: 30px;
}
#f4u-hero-v2 .f4u-small-copy {
padding: 19px;
}
}
@media (max-width: 768px) {
#f4u-hero-v2 {
padding: 16px 0 22px;
}
#f4u-hero-v2 .f4u-desktop {
display: none !important;
}
#f4u-hero-v2 .f4u-mobile {
display: flex;
gap: 7px;
width: 100%;
height: 390px;
padding: 0 12px;
overflow: hidden;
}
#f4u-hero-v2 .f4u-m-item {
position: relative;
flex: 0 0 32px;
min-width: 0;
height: 100%;
border-radius: 16px;
overflow: hidden;
background: #111827;
isolation: isolate;
transition: flex .6s cubic-bezier(.25,1,.5,1);
}
#f4u-hero-v2 .f4u-m-item.is-active {
flex: 1 1 0%;
}
#f4u-hero-v2 .f4u-m-item .f4u-img {
width: 100% !important;
height: 100% !important;
opacity: .72;
}
#f4u-hero-v2 .f4u-m-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: rgba(0,0,0,.56);
transition: background .4s ease;
}
#f4u-hero-v2 .f4u-m-item.is-active .f4u-m-overlay {
background: linear-gradient(
180deg,
rgba(0,0,0,.05) 0%,
rgba(0,0,0,.15) 24%,
rgba(0,0,0,.74) 65%,
rgba(0,0,0,.91) 100%
);
}
#f4u-hero-v2 .f4u-m-trigger {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
z-index: 3;
}
#f4u-hero-v2 .f4u-m-strip {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
pointer-events: none;
transition: opacity .25s ease;
}
#f4u-hero-v2 .f4u-m-strip span {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 11px;
color: #fff;
letter-spacing: 1.5px;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
}
#f4u-hero-v2 .f4u-m-item.is-active .f4u-m-strip {
opacity: 0;
}
#f4u-hero-v2 .f4u-m-copy {
position: absolute;
z-index: 4;
left: 0;
bottom: 0;
width: 100%;
padding: 14px;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
pointer-events: none;
transition: opacity .4s ease, transform .4s ease, visibility .4s ease;
}
#f4u-hero-v2 .f4u-m-item.is-active .f4u-m-copy {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition-delay: .15s;
}
#f4u-hero-v2 .f4u-m-copy .f4u-pill {
font-size: 9px;
padding: 5px 9px;
letter-spacing: .3px;
margin-bottom: 9px;
}
#f4u-hero-v2 .f4u-m-title {
font-size: clamp(19px, 5.8vw, 26px);
line-height: 1.16;
font-weight: 750;
color: white;
margin: 0 0 10px;
overflow-wrap: normal;
}
#f4u-hero-v2 .f4u-m-description {
font-size: 12px;
line-height: 1.5;
color: #e5e7eb;
margin: 0 0 15px;
}
#f4u-hero-v2 .f4u-m-copy .f4u-button {
padding: 10px 12px;
gap: 5px;
font-size: 11px;
max-width: 100%;
white-space: normal;
text-align: center;
background: #f97316;
}
#f4u-hero-v2 .f4u-m-copy .f4u-button:hover {
background: #ea580c;
}
#f4u-hero-v2 .f4u-m-copy .f4u-arrow {
width: 14px;
height: 14px;
}
}
@media (max-width: 359px) {
#f4u-hero-v2 .f4u-mobile {
padding: 0 8px;
gap: 5px;
height: 400px;
}
#f4u-hero-v2 .f4u-m-item {
flex-basis: 28px;
}
#f4u-hero-v2 .f4u-m-copy {
padding: 11px;
}
#f4u-hero-v2 .f4u-m-title {
font-size: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
#f4u-hero-v2 *,
#f4u-hero-v2 *::before,
#f4u-hero-v2 *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
India to Africa
B2B Product Sourcing from India
Source FMCG, agro, healthcare, electronics,
fashion, and general goods from verified Indian
suppliers for African markets.
Request Quote
Verified Suppliers
Quality Products for
African Businesses
We connect importers, wholesalers, retailers,
distributors, and business buyers with trusted
Indian suppliers and bulk supply options.
Send Inquiry
Export Support
From Indian Supplier
to Africa Delivery
Supplier coordination, quality checks, export
documentation, freight, customs support, and
delivery coordination in one process.
Start Sourcing
Fashion & Apparel
Fashion & Apparel
Bulk clothing and lifestyle sourcing from India.
Send Inquiry
Electronics & Tech
Bulk gadgets and smart devices.
Send Inquiry
B2B Sourcing
India to Africa
B2B Sourcing
Source products from verified Indian suppliers.
Request Quote
Fashion
Fashion Apparel
Fashion Supply
Bulk apparel and lifestyle sourcing from India.
Send Inquiry
Agro Products
Agro Products
Agro Supply
Fresh, processed, and packaged agro products.
Request Supply
Healthcare
Healthcare
Healthcare Supply
Hygiene, wellness, and healthcare product sourcing.
Request Quote
Electronics
Electronics
Electronics Supply
Bulk gadgets, devices, and business electronics.
Send Inquiry
(function () {
"use strict";
const root = document.getElementById("f4u-hero-v2");
if (!root || root.dataset.initialized === "true") {
return;
}
root.dataset.initialized = "true";
// DESKTOP AUTOPLAY SLIDER
const slides = Array.from(
root.querySelectorAll(".f4u-slide")
);
const dots = Array.from(
root.querySelectorAll(".f4u-dot")
);
const sliderBox = root.querySelector(".f4u-feature");
const duration = 4500;
let current = 0;
let timer = null;
const reducedMotion =
window.matchMedia &&
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
function showSlide(index) {
if (!slides.length) return;
current = (index + slides.length) % slides.length;
slides.forEach(function (slide, i) {
const active = i === current;
slide.classList.toggle("is-active", active);
slide.setAttribute("aria-hidden", String(!active));
if ("inert" in slide) {
slide.inert = !active;
}
});
dots.forEach(function (dot, i) {
const active = i === current;
dot.classList.toggle("is-active", active);
if (active) {
dot.setAttribute("aria-current", "true");
} else {
dot.removeAttribute("aria-current");
}
});
}
function stopAutoplay() {
if (timer !== null) {
clearInterval(timer);
timer = null;
}
}
function startAutoplay() {
stopAutoplay();
if (slides.length < 2 || reducedMotion || document.hidden) {
return;
}
timer = window.setInterval(function () {
showSlide(current + 1);
}, duration);
}
dots.forEach(function (dot, i) {
dot.addEventListener("click", function () {
showSlide(i);
startAutoplay();
});
});
if (sliderBox) {
sliderBox.addEventListener("mouseenter", stopAutoplay);
sliderBox.addEventListener("mouseleave", startAutoplay);
sliderBox.addEventListener("focusin", stopAutoplay);
sliderBox.addEventListener("focusout", function (event) {
if (!sliderBox.contains(event.relatedTarget)) {
startAutoplay();
}
});
}
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
stopAutoplay();
} else {
startAutoplay();
}
});
showSlide(0);
startAutoplay();
// MOBILE EXPANDABLE CARDS
const cards = Array.from(
root.querySelectorAll(".f4u-m-item")
);
function openCard(selected) {
cards.forEach(function (card) {
const active = card === selected;
card.classList.toggle("is-active", active);
const trigger = card.querySelector(".f4u-m-trigger");
if (trigger) {
trigger.setAttribute("aria-expanded", String(active));
}
});
}
cards.forEach(function (card) {
const trigger = card.querySelector(".f4u-m-trigger");
if (trigger) {
trigger.addEventListener("click", function () {
openCard(card);
});
}
});
})();
