<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BAS Charity International</title>

<!===== BAS PERFORMANCE OPTIMISATION BLOCK =====*/

/* 1. GPU power preference */
let renderer = new THREE.WebGLRenderer({
antialias:true,
alpha:true,
powerPreference:"high-performance"
});

/* 2. device pixel ratio control */
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2));

/* 3. resize stability */
function resizeRenderer(){
const width=document.getElementById("logo-space").clientWidth;
renderer.setSize(width,340);
camera.aspect=width/340;
camera.updateProjectionMatrix();
}

/* 4. resize listener */
window.addEventListener("resize",resizeRenderer);

/* 5. tab visibility optimisation */
document.addEventListener("visibilitychange",function(){
running=!document.hidden;
if(running) animate();
});

/* 6. window focus optimisation */
window.addEventListener("focus",function(){
running=true;
animate();
});

/* 7. window blur optimisation */
window.addEventListener("blur",function(){
running=false;
});

/* 8. CPU safety guard */
let frameLimiter=0;

/* 9. animation controller */
function animate(){
if(!running) return;

requestAnimationFrame(animate);

/* frame limiter */
frameLimiter++;
if(frameLimiter%1!==0) return;

/* earth rotation */
earthGroup.rotation.y+=0.003;

/* moon orbit */
angle-=0.01;
moon.position.x=Math.cos(angle)*4.5;
moon.position.z=Math.sin(angle)*2.8;

renderer.render(scene,camera);
}

/* 10. start animation */
animate();

/* ===== END BAS PERFORMANCE BLOCK =====*/
<!==============================-------
CODE NO:1B : BAS SYSTEM PROTECTION & PERFORMANCE BLOCK
Purpose : Future stability, browser compatibility,
performance optimisation and global scalability notes.
This block is documentation only. Browser will ignore=====================================================-->

h1{
color:#fff !important;
}
.malayalam-fix{
color:#bbb !important;
}
#dedication-text{
color:#bbb !important;
font-weight:300;
}
#gallery{
display:flex;
overflow-x:auto;
scroll-behavior:smooth;
gap:10px;
}
#gallery::-webkit-scrollbar{
display:none;
}
.card{
min-width:180px;
flex-shrink:0;
}

.card img{
width:100%;
height:auto;
border-radius:10px;
display:block;
}

#gallery.zoom{
transform:scale(1.05);
transition:0.3s;
}
*{box-sizing:border-box;}

body{
margin:0;
background:#000;
font-family:Arial, sans-serif;
color:#fff;
overflow-x:hidden;

/* ✅ GLOBAL FIX */
font-size:23px;
}

/* GLOBAL TEXT */
p, span, div{
font-size:23px;
}

/* ===== LAYOUT FIX (FULL SITE) ===== */

.country-box{
box-sizing:border-box;
}
.bas-dedication,
.lang-box,
.country-box,
.shop-container,
.compare-container,
.share-container,
.mainbox,
.info-box,
.bas7-wrapper,
.trust-container,
.peace-wrapper,
.vada-wrapper,
.vision-wrapper,
#bas-mega-portal{
   max-width:900px;
   width:96%;
   margin-left:auto;
   margin-right:auto;
}

/* ===== HEADER ===== */
.header-box{
display:flex;
flex-direction:column;
align-items:center;
background:#000;
}

#logo-space{
width:100%;
height:340px;
}

.brand-heading{
text-align:center;
margin-top:-35px;
padding:10px 20px;
}

.hunger-message{
font-size:13px;
letter-spacing:2px;
color:#FFD700;
font-weight:bold;
text-transform:uppercase;
margin-bottom:20px;
}

.brand-heading h1{
font-size:clamp(32px,9vw,65px);
letter-spacing:1px;
text-transform:uppercase;
margin:0;
font-weight:1000;
-webkit-text-stroke:1.5px white;
line-height:1.1;
}

/* ===== LANGUAGE ===== */
.top-bar{
background:#111;
padding:15px 8px;
border-top:1px solid #333;
border-bottom:1px solid #333;
}

.lang-buttons{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
max-width:600px;
margin:auto;
}

.lang-btn{
padding:10px 2px;
border:none;
border-radius:20px;
font-size:14px;
font-weight:bold;
cursor:pointer;
color:#fff;
}

.en{background:#007BFF}
.hi{background:#FF9933;color:#000}
.ml{background:#00C853}
.ar{background:#2E7D32}
.ta{background:#C62828}
.ur{background:#6A1B9A}
.es{background:#F4C430;color:#000}
.pt{background:#1B5E20}

.google-row{
text-align:center;
font-size:14px;
margin-top:15px;
color:#bbb;

</style>
</head>

<body>

<div class="brand-heading">
<div class="hunger-message">
YOUR PURCHASE SATISFIES A HUNGER
</div>

<h1 class="notranslate" translate="no">
BAS CHARITY INTERNATIONAL
</h1>
</div>
</div>

.lang-box{
max-width:900px;
width:95%;
margin:25px auto;
}

.country-box{
max-width:900px;
width:95%;
margin:25px auto;
}

.shop-container{
max-width:900px;
width:95%;
margin:20px auto;
}

.compare-container{
max-width:900px;
width:95%;
margin:25px auto;
}

.share-container{
max-width:900px;
width:95%;
margin:25px auto;
}

.mainbox{
max-width:900px;
width:95%;
margin:30px auto;
}

body{
font-size:23px;
}

p, span, div{
font-size:23px;
}
</style>

<div id="dedication-text" class="malayalam-fix">
സർവ്വ ലോകങ്ങളിലുമുള്ള
നമ്മൾ ഓരോരുത്തരുടെയും<br>
മാതാപിതാക്കളുടെയും മറ്റ് പൂർവ്വികരുടെയും<br>
പാവനമായ ഓർമ്മയ്ക്കും നന്മയ്ക്കുമായി<br>
സമർപ്പിക്കുന്നു.

</div>

</div>
<div class="top-bar">
<style>
.lang-box {
max-width:900px;
Width :96%
margin: 25px auto;
padding: 15px;
background: #000;
border: 1px solid #ff9800; /* നേർത്ത ബോർഡർ */
border-radius: 15px;
font-family: Arial, sans-serif;
}

.lang-title {
background: #b3ecff;
color: #000;
font-weight: 900;
text-align: center;
padding: 10px;
border-radius: 10px;
border: 1px solid #ff9800;
border-left: 6px solid #ff9800; /* സിഗ്നേച്ചർ ലൈൻ */
margin-bottom: 10px;
text-transform: uppercase;
}
</style>

<div class="lang-box">
<div class="lang-title">SELECT LANGUAGE</div>
</div>

<div class="lang-buttons">
<button class="lang-btn en" onclick="resetToEnglish()">English</button>
<button class="lang-btn hi" onclick="changeLang('hi')">Hindi Language</button>
<button class="lang-btn ml" onclick="changeLang('ml')">Malayalam</button>
<button class="lang-btn ar" onclick="changeLang('ar')">Arabic</button>
<button class="lang-btn ta" onclick="changeLang('ta')">Tamil</button>
<button class="lang-btn ur" onclick="changeLang('ur')">Urdu</button>
<button class="lang-btn es" onclick="changeLang('es')">Spanish</button>
<button class="lang-btn pt" onclick="changeLang('pt')">Portuguese</button>
</div>
<div class="google-row">
🌐 All Languages : <span id="google_translate_element"></span>
</div>
</div>

<style>

.msg-container{
width:96%;
padding:20px 0;
}
.question-box{
margin:0 auto;
width:96%;
max-width:900px;
background:#000;
color:#00BFFF;
padding:25px;
border-radius:12px;
border:1px solid #00BFFF;
text-align:center;
line-height:1.8;
}

.malayalam-text{
font-size:18px;
font-weight:500;
display:block;
}
.hunger-footer{
text-align:center;
color:#FFD700;
font-weight:bold;
font-size:14px;
margin-top:15px;
letter-spacing:1px;
}

</style>

"ഒരു പൈസ പോലും അധികം ചിലവാക്കാതെ, അതേ വിലയിൽ, അതേ ഓഫറിൽ താഴെ കാണുന്ന ബാസ് ചാരിറ്റി ഇൻ്റർനാഷണൽ ലിങ്കുകൾ വഴി പർച്ചേസ് ചെയ്യുന്നതിലൂടെ ലോകത്തിന്റെ ഏതെങ്കിലും ഒരു കോണിൽ ഒരാളുടെ വിശപ്പ് അടങ്ങിയാലോ...?"

</span>

</div>

<div class="hunger-footer notranslate" translate="no">
YOUR PURCHASE SATISFIES A HUNGER
</div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

/* device pixel ratio optimisation */
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2));

document.getElementById('logo-space').appendChild(renderer.domElement);

let ambient = new THREE.AmbientLight(0xffffff,1.2);
scene.add(ambient);

let loader = new THREE.TextureLoader();

let earthGroup = new THREE.Group();
let earth = new THREE.Mesh(
new THREE.SphereGeometry(2,32,32),
new THREE.MeshStandardMaterial({
map:loader.load('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/planets/earth_atmos_2048.jpg'),
metalness:0.2,
roughness:0.8
})
);
earthGroup.add(earth);

let canvas=document.createElement('canvas');
let ctx=canvas.getContext('2d');
canvas.width=1024;
canvas.height=256;
ctx.fillStyle="#FFFFFF";
ctx.font="Bold 140px Arial";
ctx.textAlign="center";
ctx.fillText("BAS",256,160);
ctx.fillText("BAS",768,160);

let textTexture=new THREE.CanvasTexture(canvas);
let textMesh=new THREE.Mesh(
new THREE.CylinderGeometry(2.05,2.05,0.8,64,1,true),
new THREE.MeshBasicMaterial({map:textTexture,transparent:true,side:THREE.DoubleSide})
);
earthGroup.add(textMesh);
scene.add(earthGroup);

let moon=new THREE.Mesh(
new THREE.SphereGeometry(0.35,16,16),
new THREE.MeshStandardMaterial({color:0xcccccc})
);
scene.add(moon);

camera.position.z=8;

let angle=0;
let running=true;

/* ===== PERFORMANCE OPTIMISATION ===== */

/* tab hidden → animation pause */
document.addEventListener("visibilitychange",function(){
running=!document.hidden;
if(running) animate();
});

/* window focus restart */
window.addEventListener("focus",function(){
running=true;
animate();
});

/* window blur stop */
window.addEventListener("blur",function(){
running=false;
});

/* resize stability */
function resizeRenderer(){
const width=document.getElementById("logo-space").clientWidth;
renderer.setSize(width,340);
camera.aspect=width/340;
camera.updateProjectionMatrix();
}

window.addEventListener("resize",resizeRenderer);

/* ===== END OPTIMISATION ===== */

function animate(){
if(!running) return;
requestAnimationFrame(animate);
earthGroup.rotation.y+=0.003;
angle-=0.01;
moon.position.x=Math.cos(angle)*4.5;
moon.position.z=Math.sin(angle)*2.8;
renderer.render(scene,camera);
}
animate();

/* GOOGLE TRANSLATE */
function googleTranslateElementInit(){
new google.translate.TranslateElement(
{pageLanguage:'en',autoDisplay:false},
'google_translate_element'
);
}

function changeLang(langCode){
let select=document.querySelector('select.goog-te-combo');
if(select){
select.value=langCode;
select.dispatchEvent(new Event('change'));
}
}

function resetToEnglish(){
let select=document.querySelector('select.goog-te-combo');
if(select){
select.value='en';
select.dispatchEvent(new Event('change'));
}
}

/* Force remove bottom floating bar */
setInterval(function(){
const frame=document.querySelector('.goog-te-banner-frame');
if(frame){ frame.style.display='none'; }
},500);
</script>

.country-box{
max-width:900px;
width:96%;
margin:25px auto;
padding:20px;
background:#e6f4ff;
border-radius:15px;
font-family:Arial,sans-serif;
}

.country-title{
background:#cfe9ff;
color:#000;
font-weight:900;
text-align:center;
padding:15px;
border-radius:10px;
border-left:10px solid #ff9800;
margin-bottom:20px;
text-transform:uppercase;
}

.country-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin-bottom:20px;
}

.country-btn{
background:#dff1ff;
color:#000;
padding:15px;
text-align:center;
border-radius:8px;
border-left:8px solid #ff9800;
font-weight:bold;
cursor:pointer;
box-shadow:0 0 8px #ff9800;
}

.all-country select{
width:96%;
padding:15px;
border-radius:8px;
border-left:8px solid #ff9800;
background:#dff1ff;
color:#000;
font-weight:bold;
cursor:pointer;
box-shadow:0 0 8px #ff9800;
}

</style>

<style>

<style>

.country-box{
max-width:900px;
Width:96%;
margin:25px auto;
padding:15px;
background:#000;
border:1px solid #ff9800;
border-radius:15px;
font-family:Arial,sans-serif;
}

.country-title{
background:#333;
color:#fff;
font-weight:900;
text-align:center;
padding:10px;
border-radius:10px;
border:1px solid #ff9800;
border-left:6px solid #ff9800;
margin-bottom:10px;
}

.country-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:8px;
}

.country-btn{
background:#333;
color:#fff;
padding:10px;
text-align:center;
border-radius:10px;
border:1px solid #ff9800;
border-left:6px solid #ff9800;
font-weight:bold;
cursor:pointer;
}

.country-btn:hover{
transform:scale(1.05);
transition:0.2s;
}

.country-btn.active{
background:#ff9800;
color:#000;
}

.all-country{
margin-top:10px;
}

.all-country select{
width:96%;
padding:10px;
border-radius:10px;
border:1px solid #ff9800;
border-left:6px solid #ff9800;
background:#333;
color:#fff;
font-weight:bold;
cursor:pointer;
}

</style>

<div class="country-title">
SELECT COUNTRY
</div>

<div class="country-btn" data-country="india" onclick="setCountry('india',this)">India</div>

<div class="country-btn" data-country="usa" onclick="setCountry('usa',this)">United states</div>

<div class="country-btn" data-country="canada" onclick="setCountry('canada',this)">Canada</div>

<div class="country-btn" data-country="saudi" onclick="setCountry('saudi',this)">Saudi</div>

<div class="country-btn" data-country="singapore" onclick="setCountry('singapore',this)">Singapore</div>

<div class="country-btn" data-country="malaysia" onclick="setCountry('malaysia',this)">Malaysia</div>

</div>

<option value="">Search All Countries</option>

<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="canada">Canada</option>
<option value="uae">UAE</option>
<option value="germany">Germany</option>
<option value="france">France</option>
<option value="australia">Australia</option>
<option value="saudi">Saudi Arabia</option>
<option value="singapore">Singapore</option>
<option value="malaysia">Malaysia</option>
<option value="indonesia">Indonesia</option>
<option value="thailand">Thailand</option>
<option value="philippines">Philippines</option>
<option value="qatar">Qatar</option>
<option value="kuwait">Kuwait</option>
<option value="oman">Oman</option>
<option value="bahrain">Bahrain</option>
<option value="netherlands">Netherlands</option>
<option value="sweden">Sweden</option>
<option value="poland">Poland</option>
<option value="italy">Italy</option>
<option value="spain">Spain</option>
<option value="newzealand">New Zealand</option>

</select>
</div>

</div>

function setCountry(country,btn){

if(country===""){return;}

localStorage.setItem("bas_country",country);

/* button highlight */

document.querySelectorAll(".country-btn")
.forEach(b=>b.classList.remove("active"));

if(btn){
btn.classList.add("active");
}

/* update shop heading */

if(typeof updateCountryTitle==="function"){
updateCountryTitle();
}

/* refresh shop list */

if(typeof renderShops==="function"){
renderShops(countryShops[country]);
}

}

/* page load → restore saved country */

window.addEventListener("load",function(){

let saved=localStorage.getItem("bas_country");

if(!saved){
saved="india";
localStorage.setItem("bas_country","india");
}

let btn=document.querySelector('.country-btn[data-country="'+saved+'"]');

if(btn){
btn.classList.add("active");
}

if(typeof updateCountryTitle==="function"){
updateCountryTitle();
}

if(typeof renderShops==="function"){
renderShops(countryShops[saved]);
}

});

</script>

</div>

function setCountry(country,btn){

if(country===""){return;}

localStorage.setItem("bas_country",country);

/* button highlight */

document.querySelectorAll(".country-btn")
.forEach(b=>b.classList.remove("active"));

if(btn){
btn.classList.add("active");
}

/* update shop heading */

if(typeof updateCountryTitle==="function"){
updateCountryTitle();
}

/* refresh shop list */

if(typeof renderShops==="function"){
renderShops(countryShops[country]);
}

}

/* page load → restore saved country */

window.addEventListener("load",function(){

let saved=localStorage.getItem("bas_country");

if(!saved){
saved="india";
localStorage.setItem("bas_country","india");
}

let btn=document.querySelector('.country-btn[data-country="'+saved+'"]');

if(btn){
btn.classList.add("active");
}

if(typeof updateCountryTitle==="function"){
updateCountryTitle();
}

if(typeof renderShops==="function"){
renderShops(countryShops[saved]);
}

});

</script>

<style>

.shop-container{
max-width:900px;
Width : 96%;
margin:20px auto;
padding:15px;
}
.shop-title-box{
background:#000;
border-radius:14px;
padding:20px;
border:1px solid #ff9800;
border-left:8px solid #ff9800;
}

.shop-title-box h2{
margin:0;
font-size:26px;
font-weight:900;
color:#fff;
}

.shop-title-box span{
display:block;
margin-top:6px;
font-size:13px;
color:#ffb74d;
}

.global-search{
width:96%;
padding:18px;
border-radius:12px;
border:3px solid #00e5ff;
background:#111;
color:#fff;
font-size:20px;
margin-top:15px;
margin-bottom:12px;
}
.shop-btn{
display:flex;
align-items:center;
background:#1a1a1a;
border-radius:12px;
padding:12px;
margin-bottom:10px;
text-decoration:none;
color:#fff;
border:1px solid #ff9800;
border-left:6px solid #ff9800;
}

.shop-logo{
width:42px;
height:42px;
border-radius:8px;
margin-right:12px;
background:#fff;
object-fit:contain;
padding:3px;
}

.shop-info b{
font-size:20px;
display:block;
}

</style>

<div class="shop-title-box">
<h2 id="shopCountryTitle">Shop on INDIA Shops</h2>
<span>(Shops & items categorised at the end of the site)</span>
</div>

</div>

/* GLOBAL SHOP DATABASE */

const countryShops = {
            india: [
        { name: "Amazon India", logo: "https://www.amazon.in/favicon.ico", link: "https://www.amazon.in?tag=vmmbaslinks-21" },
        { name: "Flipkart", logo: "https://www.flipkart.com/favicon.ico", link: "https://extp.in/frLCl1" },
        { name: "Myntra", logo: "https://www.myntra.com/favicon.ico", link: "https://extp.in/Xl9qHe" },
        { name: "Nykaa", logo: "https://www.nykaa.com/favicon.ico", link: "https://extp.in/hj6ArG" },
        { name: "Tata CLiQ", logo: "https://www.tatacliq.com/favicon.ico", link: "https://extp.in/XQxoLW" },
        { name: "Reliance Digital", logo: "https://www.reliancedigital.in/favicon.ico", link: "https://extp.in/cxkWbr" },
        { name: "Croma", logo: "https://www.croma.com/favicon.ico", link: "https://extp.in/9myzwo" },
        { name: "Ajio", logo: "https://www.ajio.com/favicon.ico", link: "https://extp.in/J56J4f" },
        { name: "JioMart", logo: "https://www.jiomart.com/favicon.ico", link: "https://extp.in/jrfhBK" },
        { name: "Shopsy", logo: "https://www.shopsy.in/favicon.ico", link: "https://extp.in/9zNj2z" }
    ],

usa:[
{name:"Amazon",logo:"https://www.amazon.com/favicon.ico",link:"https://www.amazon.com"},
{name:"Walmart",logo:"https://www.walmart.com/favicon.ico",link:"https://www.walmart.com"},
{name:"Target",logo:"https://www.target.com/favicon.ico",link:"https://www.target.com"},
{name:"BestBuy",logo:"https://www.bestbuy.com/favicon.ico",link:"https://www.bestbuy.com"},
{name:"eBay",logo:"https://www.ebay.com/favicon.ico",link:"https://www.ebay.com"},
{name:"Costco",logo:"https://www.costco.com/favicon.ico",link:"https://www.costco.com"},
{name:"HomeDepot",logo:"https://www.homedepot.com/favicon.ico",link:"https://www.homedepot.com"},
{name:"Etsy",logo:"https://www.etsy.com/favicon.ico",link:"https://www.etsy.com"},
{name:"Newegg",logo:"https://www.newegg.com/favicon.ico",link:"https://www.newegg.com"},
{name:"Wayfair",logo:"https://www.wayfair.com/favicon.ico",link:"https://www.wayfair.com"}
],

uk:[
{name:"Amazon UK",logo:"https://www.amazon.co.uk/favicon.ico",link:"https://www.amazon.co.uk"},
{name:"Tesco",logo:"https://www.tesco.com/favicon.ico",link:"https://www.tesco.com"},
{name:"Argos",logo:"https://www.argos.co.uk/favicon.ico",link:"https://www.argos.co.uk"},
{name:"Currys",logo:"https://www.currys.co.uk/favicon.ico",link:"https://www.currys.co.uk"},
{name:"Boots",logo:"https://www.boots.com/favicon.ico",link:"https://www.boots.com"},
{name:"Next",logo:"https://www.next.co.uk/favicon.ico",link:"https://www.next.co.uk"},
{name:"Very",logo:"https://www.very.co.uk/favicon.ico",link:"https://www.very.co.uk"},
{name:"AO",logo:"https://ao.com/favicon.ico",link:"https://ao.com"},
{name:"Asda",logo:"https://www.asda.com/favicon.ico",link:"https://www.asda.com"},
{name:"John Lewis",logo:"https://www.johnlewis.com/favicon.ico",link:"https://www.johnlewis.com"}
],

canada:[
{name:"Amazon Canada",logo:"https://www.amazon.ca/favicon.ico",link:"https://www.amazon.ca"},
{name:"Walmart Canada",logo:"https://www.walmart.ca/favicon.ico",link:"https://www.walmart.ca"},
{name:"BestBuy Canada",logo:"https://www.bestbuy.ca/favicon.ico",link:"https://www.bestbuy.ca"},
{name:"Canadian Tire",logo:"https://www.canadiantire.ca/favicon.ico",link:"https://www.canadiantire.ca"},
{name:"Costco Canada",logo:"https://www.costco.ca/favicon.ico",link:"https://www.costco.ca"},
{name:"Staples",logo:"https://www.staples.ca/favicon.ico",link:"https://www.staples.ca"},
{name:"Indigo",logo:"https://www.indigo.ca/favicon.ico",link:"https://www.indigo.ca"},
{name:"Hudson Bay",logo:"https://www.thebay.com/favicon.ico",link:"https://www.thebay.com"},
{name:"Well",logo:"https://well.ca/favicon.ico",link:"https://well.ca"},
{name:"Simons",logo:"https://www.simons.ca/favicon.ico",link:"https://www.simons.ca"}
],

uae:[
{name:"Amazon UAE",logo:"https://www.amazon.ae/favicon.ico",link:"https://www.amazon.ae"},
{name:"Noon",logo:"https://www.noon.com/favicon.ico",link:"https://www.noon.com"},
{name:"Carrefour",logo:"https://www.carrefouruae.com/favicon.ico",link:"https://www.carrefouruae.com"},
{name:"Sharaf DG",logo:"https://www.sharafdg.com/favicon.ico",link:"https://www.sharafdg.com"},
{name:"Jumbo",logo:"https://www.jumbo.ae/favicon.ico",link:"https://www.jumbo.ae"},
{name:"Namshi",logo:"https://www.namshi.com/favicon.ico",link:"https://www.namshi.com"},
{name:"Sivvi",logo:"https://www.sivvi.com/favicon.ico",link:"https://www.sivvi.com"},
{name:"Ounass",logo:"https://www.ounass.ae/favicon.ico",link:"https://www.ounass.ae"},
{name:"DubaiStore",logo:"https://www.dubaistore.com/favicon.ico",link:"https://www.dubaistore.com"},
{name:"Emax",logo:"https://www.emaxme.com/favicon.ico",link:"https://www.emaxme.com"}
],

saudi:[
{name:"Amazon Saudi",logo:"https://www.amazon.sa/favicon.ico",link:"https://www.amazon.sa"},
{name:"Noon Saudi",logo:"https://www.noon.com/favicon.ico",link:"https://www.noon.com"},
{name:"Jarir",logo:"https://www.jarir.com/favicon.ico",link:"https://www.jarir.com"},
{name:"Extra",logo:"https://www.extra.com/favicon.ico",link:"https://www.extra.com"},
{name:"Saco",logo:"https://www.saco.sa/favicon.ico",link:"https://www.saco.sa"},
{name:"Namshi",logo:"https://www.namshi.com/favicon.ico",link:"https://www.namshi.com"},
{name:"Centerpoint",logo:"https://www.centerpointstores.com/favicon.ico",link:"https://www.centerpointstores.com"},
{name:"Carrefour KSA",logo:"https://www.carrefourksa.com/favicon.ico",link:"https://www.carrefourksa.com"},
{name:"Ounass",logo:"https://www.ounass.sa/favicon.ico",link:"https://www.ounass.sa"},
{name:"Souq",logo:"https://www.souq.com/favicon.ico",link:"https://www.souq.com"}
],

singapore:[
{name:"Shopee",logo:"https://shopee.sg/favicon.ico",link:"https://shopee.sg"},
{name:"Lazada",logo:"https://www.lazada.sg/favicon.ico",link:"https://www.lazada.sg"},
{name:"Qoo10",logo:"https://www.qoo10.sg/favicon.ico",link:"https://www.qoo10.sg"},
{name:"Amazon SG",logo:"https://www.amazon.sg/favicon.ico",link:"https://www.amazon.sg"},
{name:"FairPrice",logo:"https://www.fairprice.com.sg/favicon.ico",link:"https://www.fairprice.com.sg"},
{name:"Courts",logo:"https://www.courts.com.sg/favicon.ico",link:"https://www.courts.com.sg"},
{name:"Harvey Norman",logo:"https://www.harveynorman.com.sg/favicon.ico",link:"https://www.harveynorman.com.sg"},
{name:"RedMart",logo:"https://redmart.lazada.sg/favicon.ico",link:"https://redmart.lazada.sg"},
{name:"Best Denki",logo:"https://www.bestdenki.com.sg/favicon.ico",link:"https://www.bestdenki.com.sg"},
{name:"Zalora",logo:"https://www.zalora.sg/favicon.ico",link:"https://www.zalora.sg"}
],

malaysia:[
{name:"Shopee MY",logo:"https://shopee.com.my/favicon.ico",link:"https://shopee.com.my"},
{name:"Lazada MY",logo:"https://www.lazada.com.my/favicon.ico",link:"https://www.lazada.com.my"},
{name:"Zalora MY",logo:"https://www.zalora.com.my/favicon.ico",link:"https://www.zalora.com.my"},
{name:"PGMall",logo:"https://pgmall.my/favicon.ico",link:"https://pgmall.my"},
{name:"Senheng",logo:"https://www.senheng.com.my/favicon.ico",link:"https://www.senheng.com.my"},
{name:"Courts",logo:"https://www.courts.com.my/favicon.ico",link:"https://www.courts.com.my"},
{name:"Harvey Norman",logo:"https://www.harveynorman.com.my/favicon.ico",link:"https://www.harveynorman.com.my"},
{name:"Lelong",logo:"https://www.lelong.com.my/favicon.ico",link:"https://www.lelong.com.my"},
{name:"AEON Store",logo:"https://www.aeonstore.com.my/favicon.ico",link:"https://www.aeonstore.com.my"},
{name:"Tesco MY",logo:"https://www.tesco.com/favicon.ico",link:"https://www.tesco.com.my"}
]

};

/* RENDER SHOPS */

function renderShops(list){

const container=document.getElementById("shopList");

container.innerHTML="";

if(!list) return;

list.forEach(function(shop){

const a=document.createElement("a");

a.className="shop-btn";
a.href=shop.link;
a.target="_blank";

a.innerHTML =
'<img class="shop-logo" src="'+shop.logo+'">'+
'<div class="shop-info notranslate" translate="no"><b>'+shop.name+'</b></div>';

container.appendChild(a);

});

}

/* SEARCH */

function filterShops(){

let value=document.getElementById("globalSearch").value.toLowerCase();

let country=localStorage.getItem("bas_country") || "india";

let shops=countryShops[country] || countryShops["india"];

const filtered=shops.filter(function(s){
return s.name.toLowerCase().includes(value);
});

renderShops(filtered);

}

/* UPDATE COUNTRY */

function updateCountryTitle(){

let country=localStorage.getItem("bas_country") || "india";

document.getElementById("shopCountryTitle").innerText =
"Shop on "+country.toUpperCase()+" Shops";

let shops=countryShops[country] || countryShops["india"];

renderShops(shops);

}

/* PAGE LOAD */

window.addEventListener("load",function(){

updateCountryTitle();

});

</script>

<style>

.compare-container{
max-width:900px;
width:96%;
margin:25px auto;
}

.compare-box{
background:#000;
border:1px solid #00BFFF;
border-radius:12px;
padding:20px;
text-align:center;
line-height:1.6;
}

.compare-btn{
width:96%;
padding:14px;
border-radius:10px;
border:none;
font-weight:bold;
font-size: 22px;
background:#00BFFF;
color:#000;
cursor:pointer;
margin-bottom:15px;
}

.return-note{
font-size:22px;
color:#fff;
text-align:center;
}

.return-note b{
color:#FFD700;
font-size:16px;
}

</style>

Compare Price on Trusted Sites

</button>

<b>വില താരതമ്യം ചെയ്ത് തിരിച്ചു വരണേ...</b>

<span>
വ്യത്യസ്ത ഷോപ്പുകളിൽ ഏറ്റവും കുറഞ്ഞ വില കണ്ടെത്തി,
അതേ ഷോപ്പിൽ നിന്ന് അതേ ഓഫറിൽ
മുകളിലെ ലിങ്കുകൾ വഴി വാങ്ങുമ്പോൾ
നിങ്ങളും ഈ ചാരിറ്റിയുടെ ഭാഗമാകുന്നു —
അതുവഴി വിശക്കുന്ന ഒരു വയറിന് ആശ്വാസമാകുന്നു. നന്ദി.
</span>

</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

.share-text {
font-size: 22px;
line-height: 1.7;
color: #fff;
margin-bottom: 20px;
}

.share-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px
margin-top: 15px;
}

.share-grid a {
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
height: 50px;
background: #111;
border-radius: 10px;
border: 1px solid #333;
text-decoration: none;
}

.share-grid a:hover {
transform: scale(1.08);
transition: 0.2s;
}

.share-sign {
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #333;
color: #FFD700;
font-weight: bold;
letter-spacing: 2px;
font-size: 16px;
}
</style>
<div class="share-container">
<p class="share-text">
Even if you are not buying anything right now, you can still support this charity mission.
<br><br>Simply share this page with your friends and groups.
<br><br>When someone purchases through these links, most of the income helps provide food for a hungry person somewhere in the world.
<br><br>Through your share, you and your parents become part of this act of kindness.
</p>

<div class="share-sign">
YOUR PURCHASE SATISFIES A HUNGER
</div>
</div>
<script>
function copyLink() {
navigator.clipboard.writeText("https://bascharity.com");
alert("Link Copied. Share with friends.");
}
</script>

/* മെയിൻ ബോക്സ്: മൊബൈലിൽ 96% വീതി, കമ്പ്യൂട്ടറിൽ പരമാവധി 900px */
.mainbox {
max-width: 900px;
width: 96%;
margin: 20px auto;
padding: 25px 15px;
border: 2px solid #ff4500;
border-radius: 15px;
background: #050505;
box-sizing: border-box;
}

h1 {
color: #ff4500;
font-size: clamp(24px, 8vw, 36px);
margin-top: 0;
}

.sub {
color: #aaa;
font-size: clamp(16px, 5vw, 22px);
margin-bottom: 20px;
}

.impact {
width: 100%;
max-width: 420px;
margin: auto;
padding: 20px;
border: 2px solid #555;
background: #111;
box-sizing: border-box;
}

.amount {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}

.rs {
font-size: 36px;
color: #00ff00;
}

.counter {
font-size: 44px;
color: #00ff00;
border: 2px solid #333;
padding: 5px 12px;
background: #000;
}

.till {
color: #ff4500;
font-size: 16px;
margin-top: 8px;
}

/* RECEIPT GALLERY */
.gallery {
display: flex;
overflow: hidden;
gap: 20px;
padding: 20px;
margin: 25px auto;
width: 100%;
position: relative;
box-sizing: border-box;
}

.card {
min-width: 280px;
height: 230px;
border: 3px solid #ff4500;
display: flex;
align-items: center;
justify-content: center;
background: #000;
border-radius: 10px;
overflow: hidden;
transition: transform 0.4s ease, z-index 0.4s;
cursor: pointer;
position: relative;
flex-shrink: 0;
}
.gallery {
scroll-behavior: auto !important; /* സ്മൂത്ത് ആകാൻ ഇത് സഹായിക്കും */
}

/* ടച്ച് സൂം */
.card.zoom-active {
transform: scale(2);
z-index: 100;
border-color: #00ff00;
box-shadow: 0 0 20px rgba(0,255,0,0.5);
}

.card img {
width: 100%;
height: 100%;
object-fit: contain;
}

.rotate {
transform: rotate(-90deg);
}
</style>
</head>

<body>

<div class="mainbox">
<h1>IMPACT</h1>
<div class="sub">Amount Distributed for Hunger Relief & Food Support</div>

<div class="impact">
<div class="amount">
<div class="rs">Rs</div>
<div class="counter" id="counter">0000000</div>
<div class="rs">/-</div>
</div>
<div class="till">TILL TODAY</div>
</div>

<div style="margin-top:10px; font-size:16px; color:#bbb; line-height:1.6; text-align:center;">
Updated weekly/monthly.<br>
Affiliate income may take 2–3 months to reflect after purchase.<br>
Your direct donations are not included in this impact.
</div>
</div>

function runCounter() {
if (count < target) {
count += 251;
counter.innerText = count.toString().padStart(7, "0");
setTimeout(runCounter, 120);
}
}
runCounter();

/* PHOTO LIST */
const photos = [
"https://raw.githubusercontent.com/2vmmbas-cmd/bas-charity/main/receipts/IMG-20260313-WA0110.jpg",
"https://raw.githubusercontent.com/2vmmbas-cmd/bas-charity/main/receipts/IMG-20260313-WA0111.jpg",
"https://raw.githubusercontent.com/2vmmbas-cmd/bas-charity/main/receipts/Screenshot_20260313_175205_Drive.jpg",

"https://raw.githubusercontent.com/2vmmbas-cmd/bas-charity/main/receipts/Screenshot_20260314_140531_Drive.jpg",
"https://raw.githubusercontent.com/2vmmbas-cmd/bas-charity/main/receipts/Screenshot_20260314_140000_Drive.jpg",
"https://raw.githubusercontent.com/2vmmbas-cmd/bas-charity/main/receipts/Screenshot_20260314_140310_Chrome.jpg",
"https://raw.githubusercontent.com/2vmmbas-cmd/bas-charity/main/receipts/Screenshot_20260314_140644_Chrome.jpg"
];

const gallery = document.getElementById("gallery");

function loadImages() {
photos.forEach((src, i) => {
let card = document.createElement("div");
card.className = "card";

card.onclick = function() {
scrolling = false;
this.classList.add("zoom-active");

setTimeout(() => {
this.classList.remove("zoom-active");
scrolling = true;
}, 4000);
};

let img = document.createElement("img");
if (i < 2) { img.className = "rotate"; }
img.src = src;

card.appendChild(img);
gallery.appendChild(card);
});
}

loadImages();
loadImages();

/* ✅ CONTINUOUS SCROLL FIXED */
let scrolling = true;
function scrollGallery() {
if (scrolling) {
gallery.scrollLeft += 5; // വേഗത അല്പം കുറച്ചു (1 ആക്കി)

// പകുതി ദൂരം എത്തുമ്പോൾ തടസ്സമില്ലാതെ ആദ്യം മുതൽ തുടങ്ങാൻ
if (gallery.scrollLeft >= (gallery.scrollWidth / 2)) {
gallery.scrollLeft = 0;
}
}
}
setInterval(scrollGallery, 10);
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>

<body>

.info-title{
font-size:25px;
color:#FFD700;
margin-bottom:10px;
font-weight:bold;
}

.info-text{
font-size:25px;
color:#ccc;
}

.readmore-btn{
color:#00BFFF;
font-size:26px;
font-weight:bold;
cursor:pointer;
}

.more-text{
display:none;
}

.signature{
margin-top:15px;
font-size:25px;
color:#FFD700;
font-weight:bold;
}
</style>

<div class="info-title">BAS CHARITY PURPOSE</div>

<div class="info-text">
Our mission is to ensure that support reaches those who truly need it.
Through affiliate partnerships with 50,000+ online shops worldwide,
a significant portion of the income generated is used for hunger relief
and similar humanitarian activities.
</div>

<br>

<div class="info-text">
At present, 100% of the
<span class="readmore-btn" id="readBtn" onclick="toggleMore7()">Read More...</span>
</div>

<br>

<div class="info-text">
affiliate income is directed towards helping people in need.
In the future, a minimum of 51% or more will always be dedicated to
charity and hunger relief.
The remaining portion may be used for platform maintenance, staff support,
development, and operational expenses ,etc
</div>

<br>

<div class="info-text">
Many people have expressed their willingness to donate through this platform.
However, currently we do not accept any donations through this website.
This may be considered in the future only after obtaining the necessary approvals
from the Central Government and relevant authorities.
</div>

<br>

<div class="info-text">
Anyone who wishes to support hunger relief may do so directly through
our trusted institutions listed below.
</div>

<br>

<div class="info-text">
The widespread misuse and scams carried out in the name of charity on many
online platforms inspired us to start this initiative.
</div>

<br>

<div class="info-text">
In any case, our goal is to ensure that 100% of your donation reaches those
who truly need it.
</div>

</div>

<div class="signature">
Give your donations only through trusted hands
</div>

</div>

<style>

.bas7-wrapper{
max-width:480px;
margin:30px auto;
font-family:Arial,sans-serif;
}

.bas7-box{
background:#1a1a1a;
border-radius:14px;
border:1px solid #333;
border-left:6px solid #e91e63;
overflow:hidden;
color:#fff;
}

.bas7-header{
padding:18px;
text-align:center;
background:#111;
border-bottom:1px solid #333;
}

.title-main{
margin:0;
font-size:22px;
font-weight:900;
color:#FFD700;
}

.title-name{
margin:8px 0 0;
font-size:20px;
font-weight:800;
}

.title-sub{
margin:5px 0 0;
font-size:16px;
}

.bas7-slider{
width:100%;
height:420px;
overflow:hidden;
background:#000;
}

.bas7-slider img{
width:100%;
height:100%;
object-fit:cover;
transition:opacity .8s;
}

.bas7-content{
padding:18px;
font-size:20px;
line-height:1.6;
color:#ccc;
text-align:justify;
}

.bas8-more{
display:none;
}

.bas8-toggle{
color:#39FF14;
cursor:pointer;
font-weight:bold;
font-size:18px;
display:block;
margin-top:10px;
}

.bas7-quote{
margin:15px;
padding:12px;
background:#111;
border-radius:10px;
border-left:4px solid #e91e63;
font-weight:bold;
text-align:center;
color:#FFD700;
font-size:14px;
}

</style>

<div class="bas7-header">
<h2 class="title-main">VISIONARY</h2>
<h2 class="title-name">Mohammed M. Basheer (BAS)</h2>
<h3 class="title-sub">Retired Assistant Engineer, KSEB</h3>
</div>

<p>
Mohammed M. Basheer is the visionary founder behind this project,
bringing over four decades of dedicated professional and social
expertise to the mission.
</p>

<p>
A Retired Assistant Engineer from KSEB, his career is marked by
20 years of <span id="bas8Dots">...</span>

exemplary service in the power sector.
His professional journey also includes 5 years of international
experience working across various Arabian countries.

He has dedicated more than 10 years as an active member of the
Ideal Relief Wing (IRW), a premier government-recognized NGO
known for disaster management.

He is supported by his family, including his wife Rasheena K H
(High School Teacher – English, Govt. Girl's High School,
Perumbavoor) and children Alif Bayan (Oman), Amna Bayan (Qatar),
Azeem Ahmed (Oman) and son-in-law Anees Ameer (Qatar Naval Force).

</span>

</p>

</div>

<div class="bas7-quote">
"YOUR PURCHASE SATISFIES A HUNGER"
</div>

</div>

/* SECTION 7 */

let opened7=false;

function toggleMore7(){

let more=document.getElementById("moreText");
let btn=document.getElementById("readBtn");

if(opened7){
more.style.display="none";
btn.innerText="Read More...";
opened7=false;
}
else{
more.style.display="block";
btn.innerText="";
opened7=true;
}

}

/* SECTION 8 */

let opened8=false;

function toggleBas8(){

let more=document.getElementById("bas8More");
let dots=document.getElementById("bas8Dots");
let btn=document.getElementById("bas8Btn");

if(opened8){

more.style.display="none";
dots.style.display="inline";
btn.innerText="More";
opened8=false;

}
else{

more.style.display="inline";
dots.style.display="none";
btn.innerText="Less";
opened8=true;

}

/* IMAGE SLIDER */

const bas7Images=[

"https://drive.google.com/thumbnail?id=1keyWL0GF-HysweqAYntVaS-vB_fwZj_H&sz=w1000",

"https://drive.google.com/thumbnail?id=1KdZnPqKlSOXAFY-Lu2FU41B1n7sWtt85&sz=w1000"

];

let bas7Index=0;

const bas7Img=document.getElementById("bas7Img");

setInterval(function(){

bas7Img.style.opacity=0;

setTimeout(function(){

bas7Index=(bas7Index+1)%bas7Images.length;

bas7Img.src=bas7Images[bas7Index];

bas7Img.style.opacity=1;

},800);

},5000);

/* AUTO RESET WHEN SECTION LEAVES SCREEN */

const observer78=new IntersectionObserver(entries=>{

entries.forEach(entry=>{

if(!entry.isIntersecting){

if(entry.target.id==="section7" && opened7){
toggleMore7();
}

if(entry.target.id==="section8" && opened8){
toggleBas8();
}

}

});

},{threshold:0});

observer78.observe(document.getElementById("section7"));
observer78.observe(document.getElementById("section8"));

</script>

display:flex;              /* ✅ ADD */
align-items:center;        /* ✅ ADD */
justify-content:center;    /* ✅ ADD */
flex-direction: column;    /* already added */

}
.btn-red{
background:#8b0000;
color:#fff;
flex:1;
}
.btn-green{
background:#006400;
color:#fff;
flex:2;
}
.inner-card{
background:#111;
padding:18px;
border-radius:10px;
border:1px solid #333;
margin-top:15px;
font-size:22px;
line-height:1.7;
border-left:4px solid #00e676;
color:#fff;
}
.sub-view{display:none;}
.back-btn{
margin-top:20px;
background:#333;
color:#fff;
padding:14px;
border-radius:10px;
text-align:center;
font-size:22px;
font-weight:bold;
cursor:pointer;
}
</style>

<div class="trust-title"> OUR TRUSTED INSTITUTIONS </div>

<div class="trust-box">
<h1>Guidance India Education and Charitable Trust</h1>
<span class="trust-sub"> Paracode Rehabilitation Project </span>

<p>
A rehabilitation initiative focusing on pain and palliative care, orphan support, ration aid, education assistance, de addiction awareness and sustainable welfare.
</p>

<div class="btn-row">
<div class="trust-btn btn-red" onclick="showDetails9()">DETAILS</div>
<div <div class="trust-btn btn-green" onclick="showDonate9()">
Donate Directly→
<span style="font-size:18px;">(India Only)</span>
</div>
</div>

<div id="details9" class="sub-view">
<div class="trust-box">
<h1>Project Details</h1>

<div class="inner-card">
The Paracode Rehabilitation Project supports individuals and families through pain and palliative care, orphan care, ration distribution, education support and rehabilitation awareness.
</div>

<div class="inner-card">
Even a small daily contribution can relieve hunger and bring dignity to lives in need.
</div>

<div id="donate9" class="sub-view">
<div class="trust-box">
<h1>Donation Categories</h1>

<div class="inner-card">
<b>Pain and Palliative Care</b><br>
Medical support, medicines and comfort care.
</div>

<div class="inner-card">
<b>Orphan Support</b><br>
Food, shelter, education and basic needs.
</div>

<div class="inner-card">
<b>Building Fund Contribution - Sustainable Income (Sadaqa Jaria)</b>
<br><br>
1 sq.ft - Rs 1500<br>
2 sq.ft - Rs 3000<br>
5 sq.ft - Rs 7500<br>
10 sq.ft - Rs 15000<br>
25 sq.ft - Rs 37500<br>
50 sq.ft - Rs 75000<br>
100 sq.ft - Rs 150000
<br><br>
One Flat Sponsorship - Rs 1500000<br>
Total Project - Rs 7500000
</div>

<div class="inner-card">
<b>Bank Transfer Details</b><br><br>
Account Name : Guidance India Education and Charitable Trust<br>
Account Number : 10350200008909<br>
IFSC : FDRL0001035<br>
Federal Bank Kizhakkambalam Branch
</div>

</div>

function showDetails9(){
document.getElementById("details9").style.display="block";
document.getElementById("donate9").style.display="none";
window.scrollBy({top:200, behavior:"smooth"});
startTimer9();
}

function showDonate9(){
document.getElementById("details9").style.display="none";
document.getElementById("donate9").style.display="block";
window.scrollBy({top:200, behavior:"smooth"});
startTimer9();
}

function reset9(){
document.getElementById("details9").style.display="none";
document.getElementById("donate9").style.display="none";
clearTimeout(timer9);
}

function startTimer9(){
clearTimeout(timer9);
timer9=setTimeout(function(){
reset9();
},15000);
}
</script>

<div class="peace-box">
<h1>Peace Valley – Kothamangalam</h1>
<span class="peace-sub"> Charitable Care Institution </span>

<p>
A humanitarian institution providing shelter, medical care, rehabilitation and daily support for the needy and vulnerable.
</p>

<div class="peace-btn-row">
<div class="peace-btn peace-btn-details" onclick="peaceDetails10()">Details</div>
<a class="peace-link" href="https://peacevalley.org.in/donation/" target="_blank">
Donate Directly ➜
<br><span style="font-size:18px;">(Global)</span>
</a>
</div>

<div id="peaceDetails10" class="peace-section">
<div class="peace-box">

<h1>About Peace Valley</h1>

<div class="peace-card">
Peace Valley Charitable Trust in Kothamangalam provides long-term shelter, food, medical care and rehabilitation support.
</div>

<div class="peace-card">
Visit official website for full information.
<br>
<a class="peace-link" href="https://peacevalley.org.in/" target="_blank">
Visit Website
</a>
</div>

</div>
</div>

<div id="peaceDonate10" class="peace-section">
<div class="peace-box">

<h1>Support Categories</h1>

<div class="peace-card">
<b>Food and Daily Care</b><br>
Providing nutritious meals and daily essentials.
<br>
<a class="peace-link" href="https://peacevalley.org.in/donation/" target="_blank">
Donate Directly
</a>
</div>

<div class="peace-card">
<b>Medical and Dialysis Support</b><br>
Helping patients with life-saving treatment.
<br>
<a class="peace-link" href="https://peacevalley.org.in/donation/" target="_blank">
Donate Directly
</a>
</div>

<div class="peace-card">
<b>Shelter and Rehabilitation</b><br>
Safe accommodation and rehabilitation support.
<br>
<a class="peace-link" href="https://peacevalley.org.in/donation/" target="_blank">
Donate Directly
</a>
</div>

</div>
</div>

</div>

function peaceDetails10(){
document.getElementById("peaceDetails10").style.display="block";
document.getElementById("peaceDonate10").style.display="none";
window.scrollBy({top:200, behavior:"smooth"});
startTimer10();
}

function peaceDonate10(){
document.getElementById("peaceDetails10").style.display="none";
document.getElementById("peaceDonate10").style.display="block";
window.scrollBy({top:200, behavior:"smooth"});
startTimer10();
}

function peaceReset10(){
document.getElementById("peaceDetails10").style.display="none";
document.getElementById("peaceDonate10").style.display="none";
clearTimeout(timer10);
}

function startTimer10(){
clearTimeout(timer10);
timer10=setTimeout(function(){
peaceReset10();
},15000);
}
</script>

display:flex;              /* ✅ ADD */
align-items:center;        /* ✅ ADD */
justify-content:center;    /* ✅ ADD */
flex-direction: column;    /* already added */
}
.vada-details{
background:#b71c1c;
color:#fff;
flex:1;
}
.vada-donate{
background:#0b5e20;
color:#fff;
flex:2;
}
.vada-section{
display:none;
}
.vada-card{
background:#111;
padding:18px;
border-radius:10px;
border:1px solid #333;
margin-bottom:14px;
font-size:22px;
line-height:1.7;
border-left:4px solid #00e676;
}
.vada-back{
margin-top:20px;
background:#333;
color:#fff;
padding:14px;
border-radius:10px;
text-align:center;
cursor:pointer;
font-weight:bold;
font-size:22px;
}
</style>

<div class="vada-box">
<h1>Vadanappally Orphanage</h1>

<p>
A charitable institution dedicated to the care, protection and
upbringing of orphaned and destitute children through education,
shelter and moral support.
</p>

<div class="vada-btn-row">
<div class="vada-btn vada-details" onclick="vadaDetails11()">Details</div>
<div class="vada-btn vada-donate" onclick="vadaDonate11()">
Donate Directly→
<span style="font-size:18px;">(India Only)</span>
</div>
</div>
</div>

<div id="vadaDetails11" class="vada-section">
<div class="vada-box">

<h2>About Vadanappally Orphanage</h2>

<div class="vada-card">
Vadanappally Orphanage Committee is a community-based charitable
organisation functioning in Thrissur district, Kerala.
The institution provides shelter, education and emotional care
for orphaned and vulnerable children.
</div>

<div class="vada-card">
Their activities focus on long-term child welfare, education
support and social upliftment.
</div>

</div>
</div>

<div id="vadaDonate11" class="vada-section">
<div class="vada-box">

<h2>Support Their Work</h2>

<div class="vada-card">
<b>Orphan Care & Shelter</b><br>
Providing food, clothing, accommodation and daily care for orphaned children.
</div>

<div class="vada-card">
<b>Education Support</b><br>
Schooling, books, uniforms and guidance to help children build a better future.
</div>

<div class="vada-card">
<b>Bank Details</b><br><br>

A/c Name : VATANAPPALLY ORPHANAGE COMMITTEE<br><br>

A/c No : 917020025053101<br>
Bank : Axis Bank<br>
Branch : Vatanappally, Thrissur<br>
IFSC : UTIB0003224<br><br>

A/c No : 10532244438<br>
Bank : SBI<br>
Branch : Vatanappally, Thrissur<br>
IFSC : SBIN0008683
</div>

</div>
</div>

</div>

function vadaDetails11(){
document.getElementById("vadaDetails11").style.display="block";
document.getElementById("vadaDonate11").style.display="none";
window.scrollBy({top:200, behavior:"smooth"});
startTimer11();
}

function vadaDonate11(){
document.getElementById("vadaDetails11").style.display="none";
document.getElementById("vadaDonate11").style.display="block";
window.scrollBy({top:200, behavior:"smooth"});
startTimer11();
}

function vadaReset11(){
document.getElementById("vadaDetails11").style.display="none";
document.getElementById("vadaDonate11").style.display="none";
clearTimeout(timer11);
}

function startTimer11(){
clearTimeout(timer11);
timer11=setTimeout(function(){
vadaReset11();
},20000);
}
</script>

}
.vision-box h1{
font-size:26px;
margin:0 0 12px;
}
.vision-box h2{
font-size:22px;
color:#ffd54f;
margin-bottom:10px;
}
.vision-box p{
font-size:22px;
line-height:1.6;
color:#ddd;
}
.vision-impact{
margin-top:14px;
font-size:18px;
line-height:1.8;
color:#ffd54f;
}
.vision-btn-row{
display:flex;
gap:14px;
margin-top:18px;
}
.vision-btn{
flex:1;
padding:14px 0;
text-align:center;
border-radius:12px;
font-weight:bold;
cursor:pointer;
}
.vision-details{
background:#b71c1c;
color:#fff;
}
.vision-donate{
background:#0b5e20;
color:#fff;
}
.vision-section{
display:none;
margin-top:18px;
}
.vision-card{
background:#181818;
padding:14px;
border-radius:12px;
margin-bottom:12px;
font-size:14px;
line-height:1.6;
}
.vision-card b{
display:block;
margin-bottom:6px;
}
.vision-link{
display:inline-block;
margin-top:8px;
padding:8px 14px;
background:#00c853;
color:#000;
border-radius:8px;
font-weight:bold;
text-decoration:none;
}
.vision-back{
margin-top:20px;
background:#333;
color:#fff;
padding:14px;
border-radius:10px;
text-align:center;
cursor:pointer;
font-weight:bold;
}
</style>

<div class="vision-box">

<h1>Vision 2026 – Human Welfare Foundation</h1>

<p>
Humanitarian initiatives focusing on hunger relief, education,
healthcare, orphan care and disaster response.
</p>

<div class="vision-impact">
✔️ <b>20,000,000+</b> Lives Impacted<br>
✔️ <b>6000+</b> Projects Implemented<br>
✔️ <b>200+</b> Partner Organisations<br>
✔️ <b>23+</b> States Covered<br>
✔️ <b>16+</b> Years of Service
</div>

<div class="vision-btn-row">
<div class="vision-btn vision-details" onclick="visionDetails12()">Details</div>
<a class="vision-link" href="https://www.hwfindia.org/donate/" target="_blank">
Donate Directly⇒
<br><span style="font-size:18px;">(Global)</span>
</a>

</div>

<div id="visionDetails12" class="vision-section">
<div class="vision-box">

<h2>About Vision 2026 – HWF</h2>

<p>
Vision 2026 is a flagship humanitarian mission of Human Welfare Foundation,
addressing hunger, education, healthcare, orphan care, disaster relief
and sustainable livelihood development across communities.
</p>

<p>
<a href="https://www.hwfindia.org/about-hwf/" target="_blank" style="color:#4fc3f7;">
For more details →
</a>
</p>

</div>
</div>

<div id="visionDonate12" class="vision-section">
<div class="vision-box">

<h2>Donation Categories</h2>

<div class="vision-card">
<b>Orphan Care</b>
Food, shelter, education and protection for orphaned children.
<br>
<a class="vision-link" href="https://www.hwfindia.org/donate/" target="_blank">
Donate Directly
</a>
</div>

<div class="vision-card">
<b>Hunger Relief</b>
Feeding programmes for vulnerable families and disaster victims.
<br>
<a class="vision-link" href="https://www.hwfindia.org/donate/" target="_blank">
Donate Directly
</a>
</div>

<div class="vision-card">
<b>Education Support</b>
Scholarships, learning materials and school support for poor students.
<br>
<a class="vision-link" href="https://www.hwfindia.org/donate/" target="_blank">
Donate Directly
</a>
</div>

<div class="vision-card">
<b>Healthcare Assistance</b>
Medical aid, treatment support and health awareness programs.
<br>
<a class="vision-link" href="https://www.hwfindia.org/donate/" target="_blank">
Donate Directly
</a>
</div>

<div class="vision-card">
<b>Disaster Relief</b>
Emergency response during floods, earthquakes and crises.
<br>
<a class="vision-link" href="https://www.hwfindia.org/donate/" target="_blank">
Donate Directly
</a>
</div>

<div class="vision-card">
<b>Livelihood & Community Development</b>
Empowering families through skills, employment and sustainability.
<br>
<a class="vision-link" href="https://www.hwfindia.org/donate/" target="_blank">
Donate Directly
</a>
</div>

</div>
</div>

</div>

function visionDetails12(){
document.getElementById("visionDetails12").style.display="block";
document.getElementById("visionDonate12").style.display="none";
window.scrollBy({top:200, behavior:"smooth"});
startTimer12();
}

function visionDonate12(){
document.getElementById("visionDetails12").style.display="none";
document.getElementById("visionDonate12").style.display="block";
window.scrollBy({top:200, behavior:"smooth"});
startTimer12();
}

function visionReset12(){
document.getElementById("visionDetails12").style.display="none";
document.getElementById("visionDonate12").style.display="none";
clearTimeout(timer12);
}

function startTimer12(){
clearTimeout(timer12);
timer12=setTimeout(function(){
visionReset12();
},20000);
}
</script>
<style>

/* ===== WIDTH FIX FOR 7–12 ===== */

.info-box,
.bas7-wrapper,
.trust-container,
.peace-wrapper,
.vada-wrapper,
.vision-wrapper{
max-width:900px !important;
width:95% !important;
margin-left:auto !important;
margin-right:auto !important;
}

/* ===== SCROLL FIX ===== */
</style>

/* ===== SCROLL TOP FIX ===== */

function scrollTopSmooth(el){
document.getElementById(el).scrollIntoView({
behavior:"smooth",
block:"start"
});
}

/* OVERRIDE FUNCTIONS */

/* 9 */
function showDetails9(){
document.getElementById("details9").style.display="block";
document.getElementById("donate9").style.display="none";
scrollTopSmooth("details9");
startTimer9();
}
function showDonate9(){
document.getElementById("details9").style.display="none";
document.getElementById("donate9").style.display="block";
scrollTopSmooth("donate9");
startTimer9();
}

/* 10 */
function peaceDetails10(){
document.getElementById("peaceDetails10").style.display="block";
document.getElementById("peaceDonate10").style.display="none";
scrollTopSmooth("peaceDetails10");
startTimer10();
}
function peaceDonate10(){
document.getElementById("peaceDetails10").style.display="none";
document.getElementById("peaceDonate10").style.display="block";
scrollTopSmooth("peaceDonate10");
startTimer10();
}

/* 11 */
function vadaDetails11(){
document.getElementById("vadaDetails11").style.display="block";
document.getElementById("vadaDonate11").style.display="none";
scrollTopSmooth("vadaDetails11");
startTimer11();
}
function vadaDonate11(){
document.getElementById("vadaDetails11").style.display="none";
document.getElementById("vadaDonate11").style.display="block";
scrollTopSmooth("vadaDonate11");
startTimer11();
}

/* 12 */
function visionDetails12(){
document.getElementById("visionDetails12").style.display="block";
document.getElementById("visionDonate12").style.display="none";
scrollTopSmooth("visionDetails12");
startTimer12();
}
function visionDonate12(){
document.getElementById("visionDetails12").style.display="none";
document.getElementById("visionDonate12").style.display="block";
scrollTopSmooth("visionDonate12");
startTimer12();
}

</script>

/* WRAPPER */
.basglobal-wrapper{
max-width:900px;
width:95%;
margin:20px auto;
padding:0 10px;
font-family:Arial, Helvetica, sans-serif;
}

.basglobal-box{
background:#121212;
padding:18px;
border-radius:14px;
border:1px solid #666;
color:#fff;
}

.basglobal-box h1{
font-size:24px;
text-align:center;
margin-bottom:14px;
}

/* BUTTONS */
.basglobal-btn{
background:#1a1a1a;
padding:16px;
border-radius:10px;
margin-bottom:10px;
cursor:pointer;

font-size:22px;
font-weight:600;

border:1px solid #00e676;
border-left:6px solid #00e676;

transition:0.3s;
}

.basglobal-btn.active{
border-left:6px solid #ff5252;
background:#222;
}

/* PANEL (MAIN FIX HERE) */
.basglobal-support{
position:fixed;
left:50%;
bottom:0;

width:90%;
max-width:480px;

background:#1a1a1a;
padding:24px;
padding-bottom:100px;

border-top-left-radius:18px;
border-top-right-radius:18px;

line-height:1.8;
font-size:22px;
color:#ddd;

border:1px solid #666;
border-top:2px solid #00e676;

box-shadow:0 -10px 30px rgba(0,0,0,0.8);

transform:translate(-50%,100%);
display:none;
transition:0.4s;

overflow-y:auto;
z-index:999;
}

.basglobal-support.show{
transform:translate(-50%,0);
}

/* HEADING */
.basglobal-head{
font-size:22px;
font-weight:bold;
margin-bottom:12px;
color:#ffd54f;
}

/* BIG BUTTON */
.basglobal-big{
position:sticky;
bottom:0;
background:#00c853;
padding:18px;
border-radius:12px;
text-align:center;
font-weight:bold;
margin-top:18px;
cursor:pointer;
font-size:22px;
}

.basglobal-back{
background:#333;
margin-top:10px;
}
</style>

<h1>Bas-Global relief& support</h1>

<div class="basglobal-btn" onclick="basglobalSwitch(this,'ifrc')">Red Crescent</div>
<div class="basglobal-btn" onclick="basglobalSwitch(this,'ifrc')">Red Cross</div>
<div class="basglobal-btn" onclick="basglobalSwitch(this,'ifrc')">Red Crystal</div>

<div class="basglobal-btn" onclick="basglobalSwitch(this,'unicef')">UNICEF</div>
<div class="basglobal-btn" onclick="basglobalSwitch(this,'msf')">MSF</div>
<div class="basglobal-btn" onclick="basglobalSwitch(this,'unrwa')">UNRWA</div>

<div class="basglobal-btn" onclick="basglobalSwitch(this,'irc')">IRC</div>
<div class="basglobal-btn" onclick="basglobalSwitch(this,'care')">CARE</div>
<div class="basglobal-btn" onclick="basglobalSwitch(this,'save')">Save the Children</div>

<div class="basglobal-btn" onclick="basglobalSwitch(this,'islamic')">Islamic Relief</div>

</div>

</div>
</div>

<div id="basglobal-support" class="basglobal-support">

<div class="basglobal-head">Details & Donate</div>

<p>
Many people want to help, but are afraid of scams. Once money is sent, we may never know where it goes.
</p>

<p>
This platform helps you reach trusted humanitarian organisations, so you can support safely and confidently.
</p>

<p>
Remember:<br>
Your support can save lives.<br>
Your support can satisfy someone’s hunger.<br>
Your purchase can also help feed someone.
</p>

<p>
Please spread this.<br>
Let your one share become a lasting reward beyond this life.
</p>

<div class="basglobal-big" onclick="basglobalGo()">View Details & Donate</div>
<div class="basglobal-big basglobal-back" onclick="basglobalClose()">Close</div>

</div>

// SWITCH
function basglobalSwitch(el,type){

document.querySelectorAll(".basglobal-btn").forEach(btn=>{
btn.classList.remove("active");
});

el.classList.add("active");

box.classList.remove("show");

setTimeout(()=>{
box.style.display="block";
setTimeout(()=>{ box.classList.add("show"); },10);
setLink(type);
},250);

resetTimer();
}

// LINK
function setLink(type){
if(type==="ifrc"){ basglobalLink="https://www.ifrc.org/donate"; }
else if(type==="unicef"){ basglobalLink="https://www.unicef.org/donate"; }
else if(type==="msf"){ basglobalLink="https://www.doctorswithoutborders.org/donate"; }
else if(type==="unrwa"){ basglobalLink="https://donate.unrwa.org"; }
else if(type==="irc"){ basglobalLink="https://www.rescue.org/donate"; }
else if(type==="care"){ basglobalLink="https://www.care.org/donate"; }
else if(type==="save"){ basglobalLink="https://www.savethechildren.org/donate"; }
else if(type==="islamic"){ basglobalLink="https://www.islamic-relief.org/donate"; }
}

// GO
function basglobalGo(){
window.open(basglobalLink,"_blank");
}

// CLOSE
function basglobalClose(){
box.classList.remove("show");

setTimeout(()=>{ box.style.display="none"; },300);

document.querySelectorAll(".basglobal-btn").forEach(btn=>{
btn.classList.remove("active");
});

clearTimeout(basglobalTimer);
}

// TIMER
function resetTimer(){
clearTimeout(basglobalTimer);
basglobalTimer=setTimeout(()=>{
basglobalClose();
},30000);
}

</script>

<style>

/* SAFE WIDTH FIX */
.info-box,
.bas7-wrapper,
.trust-container,
.peace-wrapper,
.vada-wrapper,
.vision-wrapper{
max-width:900px !important;
width:96% !important;
margin-left:auto !important;
margin-right:auto !important;
}

/* 👇 ഇതിന് താഴെ paste ചെയ്യൂ */

/* BUTTON UPGRADE */

.trust-btn,
.peace-btn,
.vada-btn,
.vision-btn{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
box-shadow:0 0 10px rgba(0,255,150,0.2);
transition:0.2s;
}

.trust-btn:hover,
.peace-btn:hover,
.vada-btn:hover,
.vision-btn:hover{
transform:scale(1.05);
box-shadow:0 0 15px rgba(0,255,150,0.5);
}

.btn-icon{
font-size:20px;
}
</style>

<!DOCTYPE html>
<html lang="ml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BAS Charity - Final Signature</title>

<input id="findShop" placeholder="Search Shops..." onkeyup="search()">
<div id="resetBtn" onclick="resetView()">← Back to All Shops</div>
<div class="btn-grid" id="btns"></div>

</div>

/* ===== SHOP DATA ===== */
/* 👉 നീ add ചെയ്യണം: country:"India" / "USA" etc */
const shops = [

{n:"Times Prime", c:"General", country:"India", u:"https://extp.in/ZMd1Nw", d:"timesprime.com", t:"Subscriptions"},
{n:"Flipkart", c:"General", country:"India", u:"https://fkrt.co/4qfbAT", d:"flipkart.com", t:"Online Shopping"},
{n:"Shopsy", c:"General", country:"India", u:"https://extp.in/Gs6Rb1", d:"shopsy.in", t:"Budget Deals"},
{n:"TATA CLiQ", c:"General", country:"India", u:"https://extp.in/xBzdCz", d:"tatacliq.com", t:"Premium Shopping"},
{n:"HamaraMall", c:"General", country:"India", u:"https://extp.in/8X1jbY", d:"hamaramall.com", t:"Multi-Brand"},
{n:"Zop Multi-Brand", c:"General", country:"India", u:"https://extp.in/IrhoNZ", d:"zopnow.com", t:"Deals"},
{n:"Borosil", c:"General", country:"India", u:"https://extp.in/24qA7X", d:"borosil.com", t:"Home & Kitchen"},
{n:"Loop Earplugs", c:"General", country:"India", u:"https://extp.in/BB0Xou", d:"loopearplugs.com", t:"Accessories"},
{n:"BigRock", c:"General", country:"India", u:"https://extp.in/Nlegt8", d:"bigrock.in", t:"Domains & Hosting"},
{n:"Hostinger", c:"General", country:"India", u:"https://extp.in/ftfK2f", d:"hostinger.in", t:"Web Hosting"},

{n:"Reliance Digital", c:"Electronics", country:"India", u:"https://extp.in/0PgZJ7", d:"reliancedigital.in", t:"Tech Store"},
{n:"Realme", c:"Electronics", country:"India", u:"https://extp.in/hnJCyL", d:"realme.com", t:"Official Store"},
{n:"OPPO", c:"Electronics", country:"India", u:"https://extp.in/fVoq06", d:"oppo.com", t:"Official Store"},
{n:"Croma", c:"Electronics", country:"India", u:"https://extp.in/8qwyol", d:"croma.com", t:"Electronics"},
{n:"OnePlus", c:"Electronics", country:"India", u:"https://extp.in/FEEReP", d:"oneplus.in", t:"Smartphones"},
{n:"boAt", c:"Electronics", country:"India", u:"https://extp.in/oRxSTk", d:"boat-lifestyle.com", t:"Audio & Wearables"},
{n:"HP Store", c:"Electronics", country:"India", u:"https://extp.in/U9ewhY", d:"hp.com", t:"Laptops & PCs"},
{n:"Apple (Imagine)", c:"Electronics", country:"India", u:"https://extp.in/SqFm4N", d:"apple.com", t:"Authorised Store"},
{n:"Havells", c:"Electronics", country:"India", u:"https://extp.in/S9xPk5", d:"havells.com", t:"Home Appliances"},
{n:"Acer", c:"Electronics", country:"India", u:"https://extp.in/VrnWUI", d:"acer.com", t:"Laptops"},

{n:"Agoda", c:"Travel", country:"India", u:"https://extp.in/IVQGXK", d:"agoda.com", t:"Hotels Worldwide"},
{n:"Cleartrip", c:"Travel", country:"India", u:"https://extp.in/MScmZs", d:"cleartrip.com", t:"Flights & Hotels"},
{n:"Skyscanner", c:"Travel", country:"India", u:"https://extp.in/OkutuN", d:"skyscanner.co.in", t:"Flight Search"},
{n:"Wego Hotels", c:"Travel", country:"India", u:"https://extp.in/p1wwg6", d:"wego.com", t:"Best Prices"},
{n:"Cleartrip App", c:"Travel", country:"India", u:"https://extp.in/LK0lCN", d:"cleartrip.com", t:"Mobile Booking"},
{n:"Air India Express", c:"Travel", country:"India", u:"https://extp.in/Yt5n0D", d:"airindiaexpress.com", t:"Low-cost Flights"},
{n:"Goibibo Hotels", c:"Travel", country:"India", u:"https://extp.in/hI611P", d:"goibibo.com", t:"Hotel Deals"},
{n:"Radisson", c:"Travel", country:"India", u:"https://extp.in/NZ4D3c", d:"radissonhotels.com", t:"Premium Hotels"},
{n:"Air India", c:"Travel", country:"India", u:"https://extp.in/dglSuK", d:"airindia.com", t:"International Flights"},
{n:"Qatar Airways", c:"Travel", country:"India", u:"https://extp.in/j1zDhQ", d:"qatarairways.com", t:"Global Travel"},

{n:"Ajio", c:"Fashion", country:"India", u:"https://ajiio.co/FB2bjd", d:"ajio.com", t:"Fashion Deals"},
{n:"Savana", c:"Fashion", country:"India", u:"https://extp.in/vneaiB", d:"savana.com", t:"Latest Trends"},
{n:"Adidas", c:"Fashion", country:"India", u:"https://extp.in/O8an9N", d:"adidas.co.in", t:"Sportswear"},
{n:"Snitch", c:"Fashion", country:"India", u:"https://extp.in/9HobPl", d:"snitch.co.in", t:"Men Fashion"},
{n:"Bewakoof", c:"Fashion", country:"India", u:"https://extp.in/YTpmLn", d:"bewakoof.com", t:"Casual Wear"},
{n:"Nykaa Fashion", c:"Fashion", country:"India", u:"https://extp.in/K4vmPe", d:"nykaafashion.com", t:"Designer Wear"},
{n:"Shyaway", c:"Fashion", country:"India", u:"https://extp.in/I17VdZ", d:"shyaway.com", t:"Lingerie"},
{n:"Palmonas", c:"Fashion", country:"India", u:"https://extp.in/zLMREw", d:"palmonas.com", t:"Jewellery"},
{n:"Tanishq", c:"Fashion", country:"India", u:"https://extp.in/JW39eV", d:"tanishq.co.in", t:"Gold Jewellery"},
{n:"Aramya", c:"Fashion", country:"India", u:"https://extp.in/weizVL", d:"aranya.com", t:"Ethnic Wear"},

{n:"PharmEasy", c:"Health", country:"India", u:"https://extp.in/health1", d:"pharmeasy.in", t:"Online Pharmacy"},
{n:"Tata 1mg", c:"Health", country:"India", u:"https://extp.in/health2", d:"1mg.com", t:"Medicines & Lab Tests"},
{n:"Netmeds", c:"Health", country:"India", u:"https://extp.in/health3", d:"netmeds.com", t:"Online Pharmacy"},
{n:"Apollo Pharmacy", c:"Health", country:"India", u:"https://extp.in/health4", d:"apollopharmacy.in", t:"Medicines"},
{n:"Practo", c:"Health", country:"India", u:"https://extp.in/health5", d:"practo.com", t:"Doctor Consultation"},
{n:"HealthKart", c:"Health", country:"India", u:"https://extp.in/health6", d:"healthkart.com", t:"Supplements"},
{n:"Boldfit", c:"Health", country:"India", u:"https://extp.in/health7", d:"boldfit.com", t:"Fitness Products"},
{n:"Wellness Forever", c:"Health", country:"India", u:"https://extp.in/health8", d:"wellnessforever.com", t:"Pharmacy"},
{n:"Zandu Care", c:"Health", country:"India", u:"https://extp.in/health9", d:"zanducare.com", t:"Ayurveda"},
{n:"MyUpchar", c:"Health", country:"India", u:"https://extp.in/health10", d:"myupchar.com", t:"Health Info & Products"},

{n:"Dot & Key", c:"Beauty", country:"India", u:"https://extp.in/FLG6iL", d:"dotandkey.com", t:"Skincare"},
{n:"Love Beauty & Planet", c:"Beauty", country:"India", u:"https://extp.in/IGrjfb", d:"lovebeautyandplanet.com", t:"Haircare"},
{n:"Nykaa", c:"Beauty", country:"India", u:"https://extp.in/BnQJFH", d:"nykaa.com", t:"Beauty Store"},
{n:"Clove Oral Care", c:"Beauty", country:"India", u:"https://extp.in/RSLak4", d:"cloveoralcare.com", t:"Dental Care"},
{n:"The Man Company", c:"Beauty", country:"India", u:"https://extp.in/JW1fyD", d:"themancompany.com", t:"Men Grooming"},
{n:"Lotus Botanicals", c:"Beauty", country:"India", u:"https://extp.in/2vyqbh", d:"lotusbotanicals.com", t:"Ayurvedic"},
{n:"Nourish Mantra", c:"Beauty", country:"India", u:"https://extp.in/Gg2Mzw", d:"nourishmantra.com", t:"Natural Beauty"},
{n:"The Body Shop", c:"Beauty", country:"India", u:"https://extp.in/Uel1q3", d:"thebodyshop.in", t:"Skincare"},
{n:"Swiss Beauty", c:"Beauty", country:"India", u:"https://extp.in/0I5GeF", d:"swissbeauty.in", t:"Cosmetics"},
{n:"Sadhev Ayurveda", c:"Beauty", country:"India", u:"https://extp.in/BCljjQ", d:"sadhev.com", t:"Ayurveda"},

{n:"Airtel Payments Bank", c:"Banking", country:"India", u:"https://extp.in/g0pxj2", d:"airtel.in", t:"Open Account"},
{n:"Angel One", c:"Banking", country:"India", u:"https://extp.in/frLCl1", d:"angelone.in", t:"Demat Account"},
{n:"Swiggy HDFC Card", c:"Banking", country:"India", u:"https://extp.in/Xl9qHe", d:"hdfcbank.com", t:"Apply Now"},
{n:"IndusInd Avios Card", c:"Banking", country:"India", u:"https://extp.in/hj6ArG", d:"indusind.com", t:"Apply Now"},
{n:"AyushPay", c:"Banking", country:"India", u:"https://extp.in/XQxoLW", d:"ayushpay.com", t:"Healthcare Finance"},
{n:"Marriott Bonvoy HDFC", c:"Banking", country:"India", u:"https://extp.in/cxkWbr", d:"marriott.com", t:"Apply Now"},
{n:"Axis MyZone Card", c:"Banking", country:"India", u:"https://extp.in/9myzwo", d:"axisbank.com", t:"Apply Now"},
{n:"Navi UPI", c:"Banking", country:"India", u:"https://extp.in/J56J4f", d:"navi.com", t:"UPI Services"},
{n:"Upstox", c:"Banking", country:"India", u:"https://extp.in/jrfhBK", d:"upstox.com", t:"Trading Platform"},
{n:"Zagg Money", c:"Banking", country:"India", u:"https://extp.in/9zNj2z", d:"zagg.money", t:"UPI Credit"},
/* ================= USA ================= */
/* ===== AMAZON GLOBAL LINKS (Copy & Paste into shops array) ===== */
{id:"G2", n:"Amazon UK", c:"General", country:"UK", u:"https://www.amazon.co.uk/?tag=vmmbaslinks03-21", d:"amazon.co.uk", t:"Online Shopping"},
{id:"G3", n:"Amazon USA", c:"General", country:"USA", u:"https://www.amazon.com/?tag=vmmbaslinks-20", d:"amazon.com", t:"Online Shopping"},
{id:"G4", n:"Amazon Canada", c:"General", country:"Canada", u:"https://www.amazon.ca/?tag=vmmbaslinks06-20", d:"amazon.ca", t:"Online Shopping"},
{id:"G5", n:"Amazon UAE", c:"General", country:"UAE", u:"https://www.amazon.ae/?tag=vmmbaslinks01-21", d:"amazon.ae", t:"Online Shopping"},
{id:"G6", n:"Amazon Saudi", c:"General", country:"Saudi", u:"https://www.amazon.sa/?tag=vmmbaslinks01-21", d:"amazon.sa", t:"Online Shopping"},
{n: "Alibaba",
c: "Shopping",
country: "ALL",
u: "https://rzekl.com/g/pm1aev55clcf9d224bea219aa26f6f/",
t: "Shop Now"
},
{n: "AliExpress",
c: "Shopping",
country: "ALL",
u: "https://rzekl.com/g/1e8d114494cf9d224bea16525dc3e8/?ulp=https%3A%2F%2Fwww.aliexpress.com%2F",
t: "Shop Now"
},
{n: "Boardmix",
c: "Tools",
country: "ALL",
u: "https://axavl.com/g/3tevoaw5qqcf9d224bead12233f6f4/?ulp=https%3A%2F%2Fboardmix.com%2F",
t: "Try Now"
},
{n: "Kama Ayurveda",
c: "Beauty",
country: "India",
u: "https://tjzuh.com/g/yqewe0ii4ccf9d224bea238bfeb32d/?ulp=https%3A%2F%2Fwww.kamaayurveda.com%2F",
t: "Shop Now"
},
{n: "Malabar Gold",
c: "Jewellery",
country: "India",
u: "https://tjzuh.com/g/zcflox2g0ncf9d224bea24725e5aee/?ulp=https%3A%2F%2Fwww.malabargoldanddiamonds.com%2F",
t: "Shop Jewellery"
},
{n: "Bodylab24",
c: "Health",
country: "ALL",
u: "https://ad.admitad.com/...", // അഡ്മിറ്റാഡ് ലിങ്ക് ഇവിടെ നൽകുക
t: "Fitness Supplements"
},
{n: "italki",
c: "Education",
country: "ALL",
u: "https://xcudus.com/...", // ഇറ്റാക്കി ലിങ്ക് ഇവിടെ നൽകുക
t: "Learn Languages Online"
},

/* ============================================================== */

{n:"Amazon USA", c:"General", country:"United states", u:"#", d:"amazon.com", t:"Shopping"},
{n:"BestBuy", c:"Electronics", country:"United states", u:"#", d:"bestbuy.com", t:"Electronics"},
{n:"Expedia", c:"Travel", country:"USA", u:"#", d:"expedia.com", t:"Travel"},
{n:"Sephora", c:"Beauty", country:"USA", u:"#", d:"sephora.com", t:"Beauty"},
{n:"Nike USA", c:"Fashion", country:"USA", u:"#", d:"nike.com", t:"Fashion"},
{n:"Walgreens", c:"Health", country:"USA", u:"#", d:"walgreens.com", t:"Pharmacy"},

/* ================= UK ================= */
{n:"Amazon UK", c:"General", country:"UK", u:"#", d:"amazon.co.uk", t:"Shopping"},
{n:"Currys", c:"Electronics", country:"UK", u:"#", d:"currys.co.uk", t:"Electronics"},
{n:"Booking UK", c:"Travel", country:"UK", u:"#", d:"booking.com", t:"Travel"},
{n:"Boots UK", c:"Beauty", country:"UK", u:"#", d:"boots.com", t:"Beauty"},
{n:"ASOS", c:"Fashion", country:"UK", u:"#", d:"asos.com", t:"Fashion"},
{n:"NHS Shop", c:"Health", country:"UK", u:"#", d:"nhs.uk", t:"Health"},

/* ================= CANADA ================= */
{n:"Amazon Canada", c:"General", country:"Canada", u:"#", d:"amazon.ca", t:"Shopping"},
{n:"BestBuy Canada", c:"Electronics", country:"Canada", u:"#", d:"bestbuy.ca", t:"Electronics"},
{n:"Expedia Canada", c:"Travel", country:"Canada", u:"#", d:"expedia.ca", t:"Travel"},
{n:"Sephora Canada", c:"Beauty", country:"Canada", u:"#", d:"sephora.ca", t:"Beauty"},
{n:"Zara Canada", c:"Fashion", country:"Canada", u:"#", d:"zara.com", t:"Fashion"},
{n:"Shoppers Drug Mart", c:"Health", country:"Canada", u:"#", d:"shoppersdrugmart.ca", t:"Pharmacy"},

/* ================= UAE ================= */
{n:"Noon", c:"General", country:"UAE", u:"#", d:"noon.com", t:"Shopping"},
{n:"Sharaf DG", c:"Electronics", country:"UAE", u:"#", d:"sharafdg.com", t:"Electronics"},
{n:"Cleartrip UAE", c:"Travel", country:"UAE", u:"#", d:"cleartrip.ae", t:"Travel"},
{n:"Faces UAE", c:"Beauty", country:"UAE", u:"#", d:"faces.com", t:"Beauty"},
{n:"Namshi", c:"Fashion", country:"UAE", u:"#", d:"namshi.com", t:"Fashion"},
{n:"Aster Pharmacy", c:"Health", country:"UAE", u:"#", d:"asterpharmacy.ae", t:"Pharmacy"},

/* ================= SAUDI ================= */
{n:"Amazon Saudi", c:"General", country:"Saudi", u:"#", d:"amazon.sa", t:"Shopping"},
{n:"Extra Stores", c:"Electronics", country:"Saudi", u:"#", d:"extra.com", t:"Electronics"},
{n:"Almosafer", c:"Travel", country:"Saudi", u:"#", d:"almosafer.com", t:"Travel"},
{n:"Nice One", c:"Beauty", country:"Saudi", u:"#", d:"niceonesa.com", t:"Beauty"},
{n:"Namshi Saudi", c:"Fashion", country:"Saudi", u:"#", d:"namshi.com", t:"Fashion"},
{n:"Nahdi Pharmacy", c:"Health", country:"Saudi", u:"#", d:"nahdionline.com", t:"Pharmacy"},

/* ================= SINGAPORE ================= */
{n:"Lazada", c:"General", country:"Singapore", u:"#", d:"lazada.sg", t:"Shopping"},
{n:"Courts", c:"Electronics", country:"Singapore", u:"#", d:"courts.com.sg", t:"Electronics"},
{n:"Agoda SG", c:"Travel", country:"Singapore", u:"#", d:"agoda.com", t:"Travel"},
{n:"Sephora SG", c:"Beauty", country:"Singapore", u:"#", d:"sephora.sg", t:"Beauty"},
{n:"Zalora", c:"Fashion", country:"Singapore", u:"#", d:"zalora.sg", t:"Fashion"},
{n:"Guardian", c:"Health", country:"Singapore", u:"#", d:"guardian.com.sg", t:"Pharmacy"},

/* ================= MALAYSIA ================= */
{n:"Shopee", c:"General", country:"Malaysia", u:"#", d:"shopee.com.my", t:"Shopping"},
{n:"Senheng", c:"Electronics", country:"Malaysia", u:"#", d:"senheng.com.my", t:"Electronics"},
{n:"AirAsia Travel", c:"Travel", country:"Malaysia", u:"#", d:"airasia.com", t:"Travel"},
{n:"Sephora MY", c:"Beauty", country:"Malaysia", u:"#", d:"sephora.my", t:"Beauty"},
{n:"Zalora MY", c:"Fashion", country:"Malaysia", u:"#", d:"zalora.com.my", t:"Fashion"},
{n:"Watsons MY", c:"Health", country:"Malaysia", u:"#", d:"watsons.com.my", t:"Pharmacy"},

];
/* ===== CATEGORY ===== */
/* ===== AUTO CATEGORY + COLOR + COUNTRY ===== */

const cats = [...new Set(shops.map(s => s.c))];

const countries = [...new Set(shops.map(s => s.country))];

const baseColors = [
"#2196f3","#e91e63","#9c27b0","#ff5722",
"#4caf50","#00bcd4","#795548","#607d8b",
"#3f51b5","#8bc34a","#ffc107","#009688"
];

const colors = {};

cats.forEach((cat, i) => {
colors[cat] = baseColors[i % baseColors.length];
});

/* ===== GLOBAL STATE ===== */
let activeCountry="";

/* ===== DEFAULT COUNTRY ===== */
shops.forEach(s=>{
if(!s.country) s.country="India";
});

/* ===== RENDER ===== */
function render(data){
let out=document.getElementById("out");
out.innerHTML="";

cats.forEach(cat=>{
let g=data.filter(s=>s.c===cat);
if(!g.length) return;

out.innerHTML+=`<div class="cat-head" style="background:${colors[cat]}">${cat}</div>`;

g.forEach(s=>{
out.innerHTML+=`
<a class="shop-card" href="${s.u}" target="_blank" style="border-left-color:${colors[cat]}">
<img src="https://www.google.com/s2/favicons?sz=64&domain=${s.d}">
<div class="info">
<b class="notranslate" translate="no">${s.n}</b>
<small>${s.t}</small>
</div>
</a>`;
});
});
}

/* ===== SEARCH ===== */
function search(){

let v=document.getElementById("findShop").value.toLowerCase();

let data=shops;

/* COUNTRY FILTER */
if(activeCountry && activeCountry!=="All Countries"){
data=data.filter(s =>
(s.country && s.country.toLowerCase()===activeCountry.toLowerCase()) ||
(s.country && s.country.toLowerCase()==="all")
);
}

/* SEARCH FILTER */
if(v){
data=data.filter(s =>
s.n.toLowerCase().includes(v) ||
s.t.toLowerCase().includes(v)
);
}

render(data);
}

/* ===== RESET ===== */
function resetView(){
document.getElementById("findShop").value="";

if(activeCountry && activeCountry!=="All Countries"){
search();
}else{
render(shops);
}
}

/* ===== CATEGORY FILTER ===== */
function filter(cat){

let data=shops.filter(s=>s.c===cat);

if(activeCountry && activeCountry!=="All Countries"){
data=data.filter(s =>
(s.country && s.country.toLowerCase()===activeCountry.toLowerCase()) ||
(s.country && s.country.toLowerCase()==="all")
);
}

render(data);
}

/* ===== BUTTON INIT ===== */
function initBtns(){
let b="";
cats.forEach(c=>{
b+=`<button class="m-btn" onclick="filter('${c}')" style="border-bottom:2px solid ${colors[c]}">${c}</button>`;
});
document.getElementById("btns").innerHTML=b;
}

/* ===== COUNTRY CLICK ===== */
document.addEventListener("click",function(e){
if(e.target.classList.contains("country-btn")){
activeCountry=e.target.innerText.trim();
document.getElementById("findShop").value="";
search();
}
});

/* ===== COUNTRY DROPDOWN ===== */
document.addEventListener("change",function(e){
if(e.target.closest(".all-country")){
activeCountry=e.target.value;
document.getElementById("findShop").value="";
search();
}
});

/* ===== AUTO DETECT COUNTRY ===== */
function detectUserCountry(){
fetch("https://ipapi.co/json/")
.then(r=>r.json())
.then(d=>{
const map={
"India":"India",
"United States":"USA",
"United Kingdom":"UK",
"United Arab Emirates":"UAE",
"Saudi Arabia":"Saudi",
"Singapore":"Singapore",
"Malaysia":"Malaysia",
"Canada":"Canada"
};

activeCountry=map[d.country_name] || "All Countries";
search();
})
.catch(()=>{
activeCountry="All Countries";
render(shops);
});
}

/* ===== INIT ===== */
initBtns();
detectUserCountry();

/* ===== INDIA CATEGORY CONTROL ===== */

/* CATEGORY BUTTONS */
function initBtns(){

let b="";

if((activeCountry || "").toLowerCase()==="india"){

cats.forEach(c=>{
b+=`<button class="m-btn" onclick="filter('${c}')" style="border-bottom:2px solid ${colors[c]}">${c}</button>`;
});

}

document.getElementById("btns").innerHTML=b;
}

/* RENDER CATEGORY HEADINGS ONLY FOR INDIA */
const oldRender = render;

render = function(data){

let out=document.getElementById("out");
out.innerHTML="";

const isIndia = (activeCountry || "").toLowerCase()==="india";

cats.forEach(cat=>{

let g=data.filter(s=>s.c===cat);
if(!g.length) return;

/* CATEGORY TITLE */
if(isIndia){
out.innerHTML+=`<div class="cat-head" style="background:${colors[cat]}">${cat}</div>`;
}

g.forEach(s=>{
out.innerHTML+=`
<a class="shop-card" href="${s.u}" target="_blank" style="border-left-color:${colors[cat]}">
<img src="https://www.google.com/s2/favicons?sz=64&domain=${s.d}">
<div class="info">
<b>${s.n}</b>
<small>${s.t}</small>
</div>
</a>`;
});

});
};

/* AUTO UPDATE ON COUNTRY CHANGE */
document.addEventListener("click",function(e){
if(e.target.classList.contains("country-btn")){
setTimeout(initBtns,100);
}
});

document.addEventListener("change",function(e){
if(e.target.closest(".all-country")){
setTimeout(initBtns,100);
}
});

</script>
<div id="bas-charity-total-dark-info" style="
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.8;
color: #eeeeee;
background-color: #121212; /* Full Black Background */
border: 1px solid #333333;
border-radius: 15px;
max-width: 900px;
margin: 25px auto;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
box-sizing: border-box;
width: 96%;
overflow: hidden;
">

<div style="padding: 35px 25px;">

    <div style="margin-bottom: 40px; text-align: center;">
        <h2 style="color: #2ecc71; border-bottom: 3px solid #27ae60; display: inline-block; padding-bottom: 8px; margin-bottom: 15px; letter-spacing: 1px;">TRANSPARENCY & LEGAL DISCLOSURES</h2>
        <p style="font-weight: bold; color: #27ae60; font-size: 1.15em; margin: 15px 0;">"YOUR PURCHASE SATISFIES A HUNGER"</p>
        <p style="text-align: justify; color: #cccccc; font-size: 0.98em;">
            <strong>BAS Charity International</strong> acts as a bridge between global commerce and humanitarian aid. Our mission is to ensure that support reaches those who truly need it through affiliate partnerships with <strong>50,000+ online shops</strong> worldwide.
        </p>
    </div>

    <div style="background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%); padding: 25px; border-radius: 12px; margin-bottom: 35px; border-left: 8px solid #27ae60;">
        <h3 style="color: #2ecc71; margin-top: 0; font-size: 1.25em;">Financial Governance</h3>
        <p><strong>Initially, 100% of the affiliate income</strong> generated through this platform was dedicated entirely to hunger relief. As we scale, a <strong>minimum of 51% or more</strong> will always be strictly dedicated to these noble causes.</p>
        <p style="font-style: italic; color: #999999; font-size: 0.95em; margin-bottom: 0;">The remaining portion is utilized for platform maintenance, technical development, staff support, and operational expenses to ensure long-term sustainability.</p>
    </div>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-bottom: 35px;">
        <div style="padding: 0 10px;">
            <h3 style="color: #3498db; border-left: 4px solid #3498db; padding-left: 12px; margin-bottom: 12px; font-size: 1.15em;">Privacy Commitment</h3>
            <p style="font-size: 0.93em; text-align: justify; color: #bbbbbb;">
                We value your digital safety. <strong>BAS Charity International</strong> does not collect or store your personal financial information. When you click the <strong>above links</strong>, your transaction happens directly on the official retailer's secure website.
            </p>
        </div>
        <div style="padding: 0 10px;">
            <h3 style="color: #f39c12; border-left: 4px solid #f39c12; padding-left: 12px; margin-bottom: 12px; font-size: 1.15em;">Affiliate Disclosure</h3>
            <p style="font-size: 0.93em; text-align: justify; color: #bbbbbb;">
                Shopping through the <strong>above links</strong> costs you <strong>nothing extra</strong>. The retailers pay a commission to us, which we use for our humanitarian missions to fight hunger and help those in need.
            </p>
        </div>
    </div>

    <div style="margin-bottom: 10px; padding: 20px; border: 2px solid #c0392b; border-radius: 12px; background-color: #1a0d0d; text-align: center;">
        <h3 style="color: #e74c3c; margin-top: 0; font-size: 1.15em;">Direct Donations Notice</h3>
        <p style="font-weight: 500; margin-bottom: 8px;">Currently, we <strong>do not accept any direct donations</strong> through this website.</p>
        <p style="font-size: 0.92em; color: #888888; font-weight: bold; letter-spacing: 0.5px;">"Give your donations only through trusted hands."</p>
    </div>

</div>

<div style="text-align: center; background-color: #0a0a0a; color: #ffffff; padding: 35px 20px; border-top: 1px solid #222222;">
    <p style="font-size: 1.1em; color: #2ecc71; margin: 0;"><strong>Contact:</strong> <a href="mailto:support@bascharity.com" style="color: #27ae60; text-decoration: none; font-weight: bold; border-bottom: 1px dashed #27ae60;">support@bascharity.com</a> | Kerala, India</p>
    <p style="font-size: 0.85em; color: #666666; margin-top: 20px; letter-spacing: 1px;">© 2026 BAS Charity International. All Rights Reserved.</p>
</div>
</div>
<div id="floating-selector" style="position: fixed; bottom: 30px; right: 20px; display: flex; flex-direction: column; gap: 15px; z-index: 9999;">

<div onclick="document.querySelector('.lang-box').scrollIntoView({behavior: 'smooth'})"
     style="background: linear-gradient(135deg, #FF5722, #E64A19);
            color: white;
            padding: 15px 20px;
            border-radius: 50px;
            cursor: pointer;
            font-weight: bold;
            box-shadow: 0 10px 20px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            gap: 10px;
            animation: float-anim 3s ease-in-out infinite;">
    <span style="font-size: 20px;">🌐</span> <span>ഭാഷ മാറ്റുക</span>
</div>

</div>

.goog-te-balloon-frame{display:none!important;}
.goog-te-menu-frame{display:none!important;}

#goog-gt-tt, .goog-te-tooltip{
display:none !important;
}
</style>

// banner remove
var el=document.querySelector('.goog-te-banner-frame');
if(el){el.remove();}

// tooltip remove
var tt=document.getElementById('goog-gt-tt');
if(tt){tt.remove();}

// balloon remove
var balloon=document.querySelector('.goog-te-balloon-frame');
if(balloon){balloon.remove();}

document.body.style.top='0px';

},1000);

id="shop-fix-script">
setTimeout(function(){
document.querySelectorAll('.shop-card b').forEach(function(el){
el.classList.add('notranslate');
el.setAttribute('translate','no');
});
},2000);

let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e;
    // ഇവിടെ ഇൻസ്റ്റാൾ ബട്ടൺ കാണിക്കാൻ സാധിക്കും
});

</script>

        // സർവീസ് വർക്കർ രജിസ്റ്റർ ചെയ്യുന്നു
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js');
            });
        }

        // ഇൻസ്റ്റാൾ ബലൂൺ കാണിക്കാനുള്ള ലോജിക്
        window.addEventListener('beforeinstallprompt', (e) => {
            e.preventDefault();
            deferredPrompt = e;

            const msgBox = document.createElement("div");
            msgBox.id = "installBalloon";
            msgBox.innerHTML = `
                <div style="position:fixed; bottom:30px; left:50%; transform:translateX(-50%);
                            background:white; color:black; padding:15px; border-radius:10px;
                            box-shadow: 0px 4px 10px rgba(0,0,0,0.3); z-index:9999; text-align:center; width:80%;">
                    <p style="margin:0 0 10px 0; font-weight:bold;">BAS Charity ഫോണിലേക്ക് ഇൻസ്റ്റാൾ ചെയ്യണോ?</p>
                    <button id="installBtn" style="background:#28a745; color:white; border:none; padding:8px 15px; border-radius:5px; cursor:pointer;">ഇൻസ്റ്റാൾ ചെയ്യാം</button>
                    <button id="closeBtn" style="background:none; border:none; color:grey; margin-left:10px; cursor:pointer;">വേണ്ട</button>
                </div>
            `;
            document.body.appendChild(msgBox);

            });

            document.getElementById('closeBtn').addEventListener('click', () => {
                msgBox.remove();
            });
        });
    </script>
<style>
.balloon-scene {
    position: fixed;
    bottom: -25px;
    left: -20px;
    width: 380px;
    height: 100vh;
    z-index: 99999;
    pointer-events: none;
    transition: transform 12s ease-in-out;
}

.hide-action { transform: translateY(120%); }

.balloon {
    position: absolute;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: black;
    font-family: 'Arial Black', sans-serif;
    box-shadow: inset -10px -10px 25px rgba(0,0,0,0.4);
    cursor: pointer;
    pointer-events: auto;
}

.string-white {
    position: absolute;
    width: 2px;
    background: #ffffff;
    bottom: -1000px;
    left: 50%;
    height: 1000px;
    transform-origin: top;
    opacity: 0.7;
}

.nipple-wrap {
    position: absolute;
    bottom: -12px;
    width: 22px;
    height: 12px;
    background: inherit;
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.knot-white {
    position: absolute;
    bottom: -15px;
    width: 10px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
}

.blue-ball {
    width: 240px;
    height: 310px;
    background: #007bff;
    bottom: 230px;
    left: 60px;
    z-index: 30;
    animation: blue-float 14s ease-in-out infinite;
}

.red-ball {
    width: 140px;
    height: 185px;
    background: #ff4d4d;
    bottom: 75px;
    left: 25px;
    z-index: 10;
    animation: red-float 10s ease-in-out infinite;
}

.step-item {
    display: none;
    font-size: 21px;
    margin: 4px 0;
    font-weight: 900;
    color: #ffffff;
}

@keyframes tick-loop {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes blue-float {
    0%, 100% { transform: translate(0, 0) rotate(-3deg); }
    30% { transform: translate(85px, 145px) rotate(6deg); }
    60% { transform: translate(-55px, -75px) rotate(-5deg); }
}

@keyframes red-float {
0%, 100% { transform: translate(0, 0) rotate(4deg); }
50% { transform: translate(55px, -25px) rotate(-4deg); }
}

.info-txt { font-size: 16px; padding: 15px; font-weight: 900; line-height: 1.2; }
</style>

<div id="balloonSection" class="balloon-scene">

<div class="balloon blue-ball" onclick="handleBalloonTap()">
    <div id="defaultMsg" class="info-txt">SAVE A BEAUTIFUL ICON TO YOUR HOME SCREEN</div>
    <div id="animSteps">
      <div class="step-item">CHROM ✓</div>
      <div class="step-item">⋮ 3 DOT ✓</div>
      <div class="step-item">SAVE TO SCREEN ✓</div>
      <div class="step-item">INSTALL ✓</div>
    </div>
    <div class="nipple-wrap"></div><div class="knot-white"></div><div class="string-white"></div>
</div>

<div class="balloon red-ball" onclick="goWhatsApp()">
<div class="info-txt" style="font-size: 14px;">SAVE TO<br>WHATSAPP</div>
<div class="nipple-wrap"></div><div class="knot-white"></div><div class="string-white"></div>
</div>

</div>

// പകുതി വഴിയിലാണെങ്കിലും ബലൂൺ തിരിച്ചു കൊണ്ടുവരാനുള്ള ഫംഗ്ഷൻ
function returnBalloon() {
    const section = document.getElementById('balloonSection');
    section.classList.remove('hide-action');
    if (hideTimeout) {
      clearTimeout(hideTimeout);
      startHideLoop();
    }
}

function goWhatsApp(){
    returnBalloon();
    let msg = "Save a beautiful icon to your screen\n\n" +
              "https://bas-charity.pages.dev\n\n" +
              "Chrome → ⋮ 3 dot → Save to Screen → Install";
    window.open("https://wa.me/?text=" + encodeURIComponent(msg), "_blank");
}

    runSteps();
    stepInterval = setInterval(runSteps, 4500);
    resetTimeout = setTimeout(() => { stopAndReset(); }, 10000);
}

</body>
</html>