* {margin: 0; padding: 0; box-sizing: border-box;}

body {font-family: 'Poppins', sans-serif; background: #f4f6fb; color: #222;}

/* HEADER */
header {background: #ffffff; box-shadow: 0 5px 10px rgb(0 0 0 / 15%); position: sticky; top: 0; z-index: 999;}
/* HERO */
.hero {background: linear-gradient(135deg,#4f46e5,#06b6d4); color: white; text-align: center; padding:50px 20px;}
.hero h1 {font-size: clamp(20px, 4.5vw, 32px);}
h1 {font-size: clamp(22px, 5vw, 42px); line-height: 1.2;}
h2 {font-size:30px;}
h3 {font-size:20px;}
p {font-size:16px;}
.hero p {margin-top: 10px; font-size: 16px; opacity: 0.9;}
.btn {display: inline-block; margin-top: 15px; padding: 12px 18px; background: white; color: #1877f2; border-radius: 8px; text-decoration: none; font-weight: 600;}

/* SECTION */
.section {max-width: 1200px; margin: auto;  padding: 40px 20px;}
.section-title {text-align: center; font-size: 24px; margin-bottom: 20px;}

/* GRID CARDS */
.grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;}
.card {background: white; padding: 20px; border-radius: 15px; box-shadow:0 2px 10px rgba(0,0,0,0.08);transition: 0.3s;}
.card:hover {transform: translateY(-5px);}
.card h3 {margin-bottom: 10px;}
.card p {font-size: 14px; color: #555;}
.card a {display: inline-block; margin-top: 12px; padding: 8px 14px;background: #1877f2; color: white;
  text-decoration: none; border-radius: 8px;}

/* CATEGORY COLORS */
.card.blue { border-left: 5px solid #1877f2; }
.card.green { border-left: 5px solid #22c55e; }
.card.orange { border-left: 5px solid #f59e0b; }
.card.red { border-left: 5px solid #ef4444; }

/* LINKS */
.links {display: flex; flex-wrap: wrap; gap: 10px;justify-content: center;}
.links a { background: white; padding: 10px 14px; border-radius: 8px; text-decoration: none; color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.05);font-size: 14px;}

/* FOOTER */
footer {text-align: center; padding:10px 15px; background: #111827; color: white;}

.trending-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px;}
.trend-card {background: #ffffff; padding: 14px 16px; border-radius: 12px; text-decoration: none; color: #222; font-weight: 500;  
box-shadow:0 2px 10px rgba(0,0,0,0.08); transition: 0.3s;  position: relative;}
.trend-card:hover {transform: translateY(-4px); background: #1877f2; color: white;}

.badge {position: absolute; top: 8px; right: 10px; background: #ef4444; color: white; font-size: 10px; padding: 3px 6px; border-radius: 5px;}
.tabs-wrapper {max-width: 1100px; margin: auto; padding:0px;}
.tabs {display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 20px;}
.tab-btn {padding: 12px 18px; border: none; background:#c5c5c5; border-radius: 12px; cursor: pointer;
  font-weight: 500; transition: 0.3s; font-size: 14px;}
.tab-btn.active {background: #1877f2; color: white;}
.tab-content {display: none; animation: fade 0.3s ease-in-out;}
.tab-content.active {display: block;}

@keyframes fade {
  from {opacity: 0; transform: translateY(5px);}
  to {opacity: 1; transform: translateY(0);}
}

/* CARDS INSIDE TABS */
.tab-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 15px;}
.tab-card {background: #fff; padding: 18px; border-radius: 14px;box-shadow:0 2px 10px rgba(0,0,0,0.08);}
.tab-card h3 {font-size: 16px; margin-bottom: 8px;}
.tab-card p {font-size: 13px; color: #555;}
.tab-card a {display: inline-block; margin-top: 10px; padding: 8px 14px; background: #1877f2;
  color: #fff; border-radius: 8px; text-decoration: none;}

/* MOBILE */
@media (max-width: 768px) {
  .tab-btn {flex: 1; font-size: 13px; padding: 10px;}
  .hero h1 {font-size: 24px;}
}