:root {
  /* Brand / Accent */
  --primary-color: #1b8773;        /* Softer than #128c7e but still strong */
  --secondary-color: #0e776a;      /* Deep teal accent */

  /* Backgrounds */
  --background-color: #f0f2f5;     /* WhatsApp-like app background */
  --white-color: #ffffff;          /* Main surface */
  --light-color: #f7f8fa;          /* Cards / sections */
  --card-form-color: #ffffff;      /* Forms / cards with clear contrast */
  --footer-color: #0b141a;         /* Dark footer for clear separation */

  /* Text & Muted Text */
  --text-color: #111b21;           /* Strong, readable text (WhatsApp standard) */
  --off-color: #5f6368;            /* Muted text but still readable on light bg */

  /* Links */
  --link-color: #0c63ce;           /* Strong, accessible blue (WhatsApp web style) */

  /* Buttons */
  --btn-color: #1ca68c;            /* Solid CTA */
  --btn-hover-color: #0f6f64;      /* Darker for clear hover state */

  /* Danger / Alerts */
  --danger-color: #d93232;         /* Strong red with good contrast */
  --danger-hover-color: #b32626;   /* Darker red on hover */
}

/* 🌑 Dark Mode Variables */
[data-theme="dark"] {
  /* Brand / Accent */
  --primary-color: #1ca68c;        /* WhatsApp bright green, high contrast */
  --secondary-color: #128c7e;      /* Deep green/teal */

  /* Backgrounds */
  --background-color: #111b21;     /* WhatsApp dark bg */
  --white-color: #1f2c33;          /* Raised dark surface */
  --light-color: #202c33;          /* Cards / panels */
  --card-form-color: #202c33;      /* Inputs / cards */
  --footer-color: #000000;         /* Hard footer edge */

  /* Text & Muted Text */
  --text-color: #e9edef;           /* Main text, high contrast */
  --off-color: #9aa0a6;            /* Muted gray, still legible */

  /* Links */
  --link-color: #53bdeb;           /* WhatsApp-like link blue for dark mode */

  /* Buttons */
  --btn-color: #25d366;            /* Strong green CTA */
  --btn-hover-color: #1fb55a;      /* Slightly darker hover */

  /* Danger / Alerts */
  --danger-color: #ff6b6b;         /* Noticeable but not neon */
  --danger-hover-color: #e05555;   /* Darker hover red */
}



  
/*[data-theme="dark"] body {background: url(whatsapp-dark-bg.jpg);}*/
/*background:url(whatsapp-bg.png);*/
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;font-size:16px;line-height:1.4;background-color:var(--background-color);  color: var(--text-color);overflow-wrap:break-word} .filter-section,.intro-text h2,.intro-text p,.no-groups-message,footer,header{text-align:center}.group-name::after,.hamburger span,.social-share img,footer .footer-icon,header .logo,header .menu li{transition:transform .2s}.group-card,.tags{align-content:center}.cta-link,.group-meta a,.join-btn,.join-button-link,.social-share a,a,footer .footer-links a,footer .footer-social a,header .menu a{text-decoration:none}#to-top,.hamburger.active span:nth-child(2){opacity:0}*,.float-add-btn-div,header .menu li{padding:0;margin:0;box-sizing:border-box}h1,h2,h3,h4,h5,h6{line-height:normal;font-weight:700;background-color:transparent;border-bottom:none}a,button{-webkit-tap-highlight-color:transparent;color:var(--btn-color);transition:color .3s}footer,header .menu a,header .menu a:hover{color:var(--white-color)}h1,h2{margin:15px 0}.filter-section .clear,.filter-section .submit{transition:background-color .3s;margin-bottom:18px}.required-asterisk{color:var(--danger-color)}main.container{margin:30px auto;width:96%;max-width:1200px}.main-div{margin:0 6px}.join-button-link:hover,a:hover{color:var(--link-color)}header{padding:.2rem;background-color:var(--primary-color);box-shadow:0 2px 4px rgba(0,0,0,.1)}header nav{display:flex;justify-content:space-evenly;padding:0 .8rem;margin: 0.8rem 0;align-items:center;flex-wrap:wrap;line-height:1.4rem;gap:.4rem}header .container{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:100%;margin:0 auto;padding:0 15px}header .logo:hover{transform:scale(1.05)}header .menu{display:flex;list-style:none;gap:.5rem}.social-share img:hover,footer .footer-icon:hover,header .menu li:hover{transform:translateY(2px)}header .menu a{font-size:1rem;padding:6px 12px;transition:background-color .3s,color .3s}header .menu a:active{background-color:rgba(0,0,0,.2)}.hamburger{display:none;flex-direction:column;justify-content:space-between;width:28px;height:22px;background:0 0;border:none;cursor:pointer;padding:0}.hamburger span{display:block;width:100%;height:3px;background-color:var(--white-color);border-radius:3px}.hamburger.active span:first-child{transform:rotate(45deg) translate(5px,5px)}.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}footer{background-color:var(--primary-color);padding:25px 0;font-size:.9rem}footer .container{width:100%;margin:0 auto;padding:0 20px 28px}footer .footer-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; margin-bottom: 12px}footer .footer-content p,footer .footer-links{margin-bottom:12px}footer .footer-links a{color:var(--white-color);margin:0 8px}.form-div form div,.help-list-item{margin-bottom:8px}.form-div form label,h1{font-weight:600;color:var(--secondary-color)}.cta-link:hover,.group-meta a:hover,footer .footer-links a:hover{text-decoration:underline}footer .footer-social{display:flex;justify-content:center;gap:20px;margin-top:12px}footer .footer-icon{outline:0;width:32px;height:32px;border-radius:50px;border:2px solid var(--white-color)}.social-share img{width:25px;height:25px;border-radius:8px}h1{font-size:2rem}h2{font-size:1.4rem;font-weight:600}.form-div form{max-width:800px;margin:20px auto;padding:50px;background-color:var(--white-color);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:1px solid #ddd}.form-div form label{font-size:1.1rem;display:block;margin-bottom:10px}.form-div form input,.form-div form select,.form-div form textarea,.tagify{max-height:800px;resize:vertical;max-width:100%;width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:1rem;color:#333;background-color:var(--card-form-color);outline:0;transition:border-color .3s;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}.float-add-btn,.form-div form button{background-color:var(--btn-color);font-weight:700}.form-div form input:focus,.form-div form select:focus,.form-div form textarea:focus{border-color:var(--primary-color);box-shadow:inset 0 2px 4px rgba(0,0,0,.08),0 0 5px rgba(37,211,102,.2)}.form-div form button{padding:12px 20px;color:var(--white-color);border:none;border-radius:8px;font-size:1.1rem;cursor:pointer;width:100%;transition:transform .3s,background-color .3s,box-shadow .3s;box-shadow:0 4px 8px rgba(0,0,0,.1)}.form-div form button:hover{background-color:#075e54;transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.2)}.intro-text h2{font-size:1.3rem;color:#444;margin-bottom:12px}.intro-text p{font-size:1.1rem;}.loading-spinner img{width:70px;height:70px;filter:drop-shadow(0 4px 6px rgba(0, 0, 0, .15))}.form-field-help-container{cursor:pointer;position:relative;display:inline-block;margin-top:5px}.fa-circle-info{color:#4b4b4bb5;transition:color .2s ease}.fa-circle-info:hover{color:var(--secondary-color)}.form-field-help{opacity:0;position:absolute;background:#e9fef1;border:1px solid #b2e7cc;padding:12px 15px;border-radius:10px;width:280px;z-index:100;left:50%;transform:translateX(-50%) translateY(10px);top:100%;margin-top:10px;box-shadow:0 4px 12px rgba(0,0,0,.1);font-size:.95rem;line-height:1.5;transition:opacity 0.1s ease,transform 0.1s ease;opacity:0;pointer-events:none;color:#075E54}.form-field-help::before{content:'';position:absolute;top:-16px;left:50%;border:8px solid transparent;border-bottom-color:#e9fef1;transform:translateX(-50%)}.form-field-help::after{content:'';position:absolute;top:-17px;left:50%;border:8px solid transparent;border-bottom-color:#b2e7cc;transform:translateX(-50%);z-index:-1}.form-field-help-container:hover .form-field-help{display:block;opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}.help-list-item{font-size:1rem;line-height:1.6rem}ul.help-list-item { list-style: none; padding-left: 0; } .help-list-item b { font-weight: 700; display: block; margin-bottom: 0.3rem; } .faq{margin-top: 30px;}.faq p { margin-top: 0.2rem; margin-bottom: 1rem; font-size: 0.95rem; line-height: 1.5;}.Search-form form { display: flex; align-items: center; gap: 0; width: 100%; max-width: 380px; margin: 0 auto; background: var(--background-color); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); overflow: hidden; } .Search-form form input, .Search-form form select, .Search-form form textarea { flex: 1 1 auto; width: 220px; padding: 7px 10px; border: none; border-radius: 6px 0 0 6px; font-size: 0.85rem; background-color: var(--background-color); color: var(--off-color); outline: none; margin: 0; box-sizing: border-box; } .Search-form button { flex: 0 0 auto; padding: 10px; background-color: transparent; color: var(--text-color); border: none; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 100%; transition: background-color 0.2s; } .Search-form button:hover { background-color: var(--white-color); }.float-add-btn-div{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);z-index:9999;width:auto;max-width:100%}.float-add-btn{margin-bottom:0!important}.float-add-btn{display:inline-block;border:1px solid var(--secondary-color);color:var(--white-color);margin-bottom:1.2rem;padding:4px 12px;border-radius:5px;font-size:.8rem;transition:transform .6s,background-color .3s,box-shadow .3s}.float-add-btn:hover{color:var(--secondary-color);background-color:var(--white-color);transform:translateY(-5px);box-shadow:0 6px 10px rgba(0,0,0,.15)}.filter-section .clear,.filter-section .submit,.filter-section select{max-width:220px;color:var(--white-color);font-size:1rem;width:100%}#to-top,.filter-section .submit{background-color:var(--primary-color); color:#fff;cursor:pointer}.filter-section{display:flex;justify-content:center;gap:1rem;margin:0 auto;flex-wrap:wrap}.filter-section select{padding:8px 15px;border-radius:5px;border:1px solid #ddd;margin-bottom:.3rem}.filter-section .submit{padding:7px;border-radius:5px;border:1px solid #ddd}.filter-section .submit:hover{background-color:var(--btn-hover-color)}.filter-section .clear{background-color:var(--danger-color);padding:7px;border-radius:5px;border:1px solid #ddd;cursor:pointer}.filter-section .clear:hover,.report-btn:hover{background-color:var(--danger-hover-color)}.group-meta a{color:var(--btn-color)}.no-groups-message{padding:2rem;background:var(--card-form-color);border-radius:8px;margin:2rem auto;max-width:600px;line-height:1.6rem}.group-list.list-view .group-item{flex-basis:100%;border:1px solid #ddd;border-radius:12px;padding:10px;box-shadow:0 2px 5px rgba(0,0,0,.1);background-color:var(--white-color);margin:10px 0;flex-direction:column;transition:transform .3s}.group-item:hover{transform:translateY(-4px);box-shadow:0 6px 12px rgba(0,0,0,.1)}.group-image{color:transparent;height:50px;width:50px;border-radius:50%;float:left;margin-right:8px}img.lazy{background:linear-gradient(to right,#f6f6f6,#f1f1f1,#ececec,#f1f1f1,#f6f6f6) var(--white-color);background-size:150% 100%;animation-duration:.6s;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:ease-out}@keyframes placeHolderShimmer{from{background-position:150% 0}to{background-position:-150% 0}}@-webkit-keyframes placeHolderShimmer{from{background-position:150% 0}to{background-position:-150% 0}}@-moz-keyframes placeHolderShimmer{from{background-position:150% 0}to{background-position:-150% 0}}@-webkit-keyframes fadeThis{from{opacity:0}to{opacity:1}}@keyframes fadeThis{from{opacity:0}to{opacity:1}}.group-name{position:relative;font-size:1rem;font-weight:600;margin:0;transition:color .3s;padding-bottom:4px;color:var(--btn-color)}.group-name::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background-color:var(--secondary-color);transform:scaleX(0)}.join-btn:hover,.load-more-btn:hover{background-color:var(--btn-hover-color);transform:translateY(-3px)}.group-name:hover{color:#0a6b63}.group-name:hover::after{transform:scaleX(1)}.group-meta{font-size:.9rem;margin-top:4px;margin-bottom:10px;color:#666}.meta-icon{height:1rem;width:1rem;vertical-align:middle}.group-meta span{display:inline-block;margin-right:10px}.group-actions{padding-top:12px;margin-top:4px;border-top:1px solid #1a19192a;display:flex;justify-content:space-between;align-items:center}.desc,.description{font-size:1rem;color:var(--off-color)}.read-more{font-size:.8rem;color:var(--link-color)}.read-more:hover,.tag:hover{color:var(--primary-color)}.join-button-link{font-weight:bolder;color:var(--btn-color);transition:color .3s}.cta-link,.join-btn{font-weight:700}.load-more-btn-div{display:flex;justify-content:flex-end}.load-more-btn{margin:20px 0;padding:10px 20px;background-color:var(--btn-color);color:var(--white-color);border:none;border-radius:5px;cursor:pointer;transition:transform .3s}.description{max-height:200px;width:90%;max-width:90%;overflow:auto;margin-top:6px;padding:18px;white-space:pre-wrap;text-align:left;border:1px solid #cbcbc3;color:var(--off-color);border-radius:5px;word-wrap:break-word}.cta-link{font-size:18px;color:var(--secondary-color)}.group-card-label{position: absolute; top: 0; left: 0; width: 100%; background: var(--secondary-color); color: white; font-size: 14px; font-weight: bold; padding:10px; margin-bottom: 1rem; text-align: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);}.group-card{position: relative; overflow: hidden; display:flex;width:100%;max-width:1200px;margin:10px auto;padding:30px;background:var(--card-form-color);border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.199);flex-direction:column;flex-wrap:wrap;justify-content:center;align-items:center}.single-group-image{transition: opacity 0.25s ease;color:transparent;height:120px;width:120px;border-radius:50%;margin-bottom:20px!important;margin:6px auto;filter:drop-shadow(6px 6px 10px #3b3b3b13)}.single-group-image:hover { opacity: 0.8; }.image-wrapper { position: relative; display: inline-block; } .zoom-icon { position: absolute; bottom: 28px; right: 8px; background: rgba(0,0,0,0.55); padding: 6px 7px; border-radius: 6px; color: #fff; font-size: 14px; line-height: 1; z-index: 5; }.group-meta p{margin:5px 0;color:#555}.tags{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;margin:2px 0}.join-btn,.tag{display:inline-block}.tag{border-radius:20px;padding:2px 3px;align-items:center;margin:2px;font-size:.8rem;color:var(--link-color)}.join-btn{color:var(--white-color);text-align:center;padding:10px 20px;background-color:var(--btn-color);border-radius:50px;width:100%;max-width:200px;margin:1.4rem 0;transition:transform .3s,background-color .3s}.join-btn:hover{color:var(--white-color)}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);display:none;z-index:998;transition:opacity .3s}.report-btn{padding:.5rem;background-color:var(--danger-color);font-size:.8rem;border-radius:5px;transition:background-color .3s;border:none;margin:1rem 0;cursor:pointer}.report-modal{position:relative;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;background-color:var(--white-color);border-radius:10px;padding:20px;box-shadow:0 6px 12px rgba(0,0,0,.1)}.close-report-btn,.report-btn,.report-submit{display:inline-block;font-weight:700;text-decoration:none;color:var(--white-color);text-align:center}.report-text-box{width:100%;padding:10px;border:1px solid #ddd;border-radius:5px;font-size:.9rem;color:#333;background-color:var(--card-form-color);outline:0;transition:border-color .3s;margin-bottom:8px}.close-report-btn,.report-submit{padding:6px 14px;background-color:var(--secondary-color);color:var(--white-color);border-radius:28px;font-size:.9rem;transition:background-color .3s;margin-right:6px;margin-top:8px}.close-report-btn:hover,.report-submit:hover{background-color:var(--link-color);cursor:pointer}.report_message_container{font-size:1rem;text-align:center;color:var(--danger-color)}.report-modal form input,.report-modal form select,.report-modal form textarea{max-width:100%;width:100%;max-height:1000px;resize:vertical;margin-bottom:18px;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:1rem;color:#333;background-color:var(--card-form-color);outline:0;transition:border-color .3s;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}#to-top{z-index: 2147483647 !important;position:fixed;bottom:1.2rem;right:.8rem;padding:.75rem;color:var(--white-color);border:none;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.2);visibility:hidden;z-index:1000;width:3.2rem;height:3.2rem;display:flex;align-items:center;justify-content:center;transform:scale(.8) translateY(20px);transition:.4s cubic-bezier(.4, 0, .2, 1)}#to-top.show{opacity:1;visibility:visible;transform:scale(1) translateY(0);animation:1s ease-in-out bounce}#to-top:hover{transform:translateY(-2px) scale(1.1);box-shadow:0 4px 12px var(--primary-color)}#to-top:active{transform:translateY(0) scale(.95)}#to-top:focus{outline:var(--primary-color) solid 2px;outline-offset:3px}#to-top svg{width:24px;height:24px;fill:none;stroke:rgb(255,255,255);transition:transform .3s}#to-top:hover svg{animation:1s infinite arrowBounce}@keyframes bounce{0%,100%,20%,50%,80%{transform:translateY(0) scale(1)}40%{transform:translateY(-5px) scale(1.05)}60%{transform:translateY(-2px) scale(1.02)}}@keyframes arrowBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}@media screen and (max-width:768px){header .logo{width:80%!important;height:80%!important}footer .footer-content{flex-direction:column;align-items:center}footer .footer-social{margin-top:10px}h1{font-size:1.6rem}.group-card{padding:15px}.group-meta,.tags .tag{font-size:.8rem}.read-more{font-size:.7rem}.join-btn{padding:7px 14px}.desc,.description{font-size:.9rem;color:var(--off-color)}.social-share img,footer .footer-icon{width:25px;height:25px}.form-div form{padding:35px}}@media screen and (max-width:480px){header .logo{width:70%!important;height:70%!important}header .menu a{font-size:1rem;padding:5px 10px}.social-share img,footer .footer-icon{width:20px;height:20px}.form-div form{padding:30px}.form-div form input,.form-div form select,.form-div form textarea{font-size:12px}.form-div form button{font-size:.9rem}.group-card{width:90%}.read-more,.tags .tag{font-size:.7rem}#to-top{right:.5rem;width:2.8rem;height:2.8rem}}@media screen and (max-width:892px){.hamburger,header .menu{margin:1rem 0}.hamburger,header .menu.active{display:flex}header .container{align-items:flex-start;width:100%}header .menu{display:none;flex-direction:column;width:100%}header .menu li{width:100%;padding:10px;text-align:center}}@media (min-width:391px) and (max-width:407px){.float-add-btn-div .float-add-btn{font-size:12px}}@media (max-width:390px){.float-add-btn-div .float-add-btn{font-size:10px}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--background-color);border-radius:10px}::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--secondary-color)}

.page-h2 { padding-top: 8px; color: var(--white-color); font-weight: bolder; padding-right: 8px; padding-bottom: 8px; padding-left: 30px; margin-top: var(--global-kb-spacing-xs, 1rem); margin-bottom: var(--global-kb-spacing-xs, 1rem); text-align: left; background-color: var(--btn-color); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); border-radius: 5px; }

.dropdown { position: relative; z-index: 1; } .dropdown-content { display: none; position: absolute; top: 30px; left: 0; background-color: var(--primary-color); box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); z-index: 1; list-style: none; padding: 0; margin: 0; min-width: 150px; } .dropdown-content a { display: block; padding: 10px 15px; text-decoration: none; color: var(--white-color) !important; } .dropdown-content a:hover { text-decoration: underline; } @media screen and (max-width:480px){.dropdown-content { margin-top: 1rem; position: unset;}}

.category-info, .country-info{margin: 3rem 0; background-color:var(--white-color); padding: 20px; display: flex; align-items: center; border-radius: 12px;}
.category-info-img, .country-info-img{width: 100px; height: 100px; border-radius: 100%; object-fit: cover; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.188);}

.group-item.featured { position: relative; background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(255,105,180,0.12)); border-radius: 10px; box-shadow: 0 4px 25px rgba(255,215,0,0.3); transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; will-change: transform, box-shadow, filter; overflow: hidden; } .group-item.featured::before { content: "★ Featured"; position: absolute; top: 10px; right: 10px; color: #fff; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.5px; padding: 5px 12px; border-radius: 20px; background: linear-gradient( 120deg, #d4af37, #b8860b, #ffd700, #b8860b, #d4af37 ); background-size: 300% 300%; animation: goldSheen 8s ease-in-out infinite; box-shadow: 0 3px 8px rgba(212, 175, 55, 0.35); border: 1px solid rgba(255, 255, 255, 0.1); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); z-index: 2; backdrop-filter: blur(1px); will-change: background-position; } @keyframes goldSheen { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (max-width: 480px) { .group-item.featured::before { top: 6px; right: 6px; font-size: 0.6rem; padding: 3px 8px; } }

.ad-box{ display: flex; margin: 1rem 0; padding: 1rem; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center;}