/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background: #f7f9fb;
  color: #222;
}


/* NAVBAR */
/* HEADER */
.header {
  width: 100%;
  padding: 15px 30px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e5e5;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* LOGO */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #333;
}

.logo img {
  width: 120px;
  height: 40px;
  object-fit: contain;
}

/* NAVIGATION */
.nav {
  display: flex;
  gap: 25px;
}

.nav-link {
  text-decoration: none;
  font-size: 16px;
  color: #333;
  font-weight: 500;
  transition: 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #4a6cf7;
}

/* MOBILE MENU ICON */
.menu-icon {
  font-size: 28px;
  cursor: pointer;
  display: none;
}

/* RESPONSIVE NAV MENU */
@media (max-width: 768px) {
  .nav {
    position: absolute;
    top: 70px;
    right: 0;
    background: #fff;
    flex-direction: column;
    width: 200px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: none;
  }

  .nav.show {
    display: flex;
  }

  .menu-icon {
    display: block;
  }
}



/* HERO */
.hero-resources { padding:100px 7%; text-align:center; background:linear-gradient(135deg,#6a6aff,#2e2e88); color:#fff; border-radius:20px; }
.hero-resources h1 { font-size:42px; margin-bottom:15px; }
.hero-resources p { font-size:20px; }

/* FEATURED RESOURCES */
.featured-section { padding:80px 7%; }
.featured-section h2 { text-align:center; font-size:36px; color:#2e2e88; margin-bottom:40px; }
.featured-grid { display:flex; flex-wrap:wrap; gap:30px; justify-content:center; }
.featured-card { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 15px 30px rgba(0,0,0,0.1); transition:0.3s; width:300px; }
.featured-card:hover { transform:translateY(-10px); box-shadow:0 25px 50px rgba(0,0,0,0.15); }
.featured-card img { width:100%; height:180px; object-fit:cover; }
.featured-card h3 { font-size:22px; margin:15px; }
.featured-card p { margin:0 15px 15px 15px; font-size:16px; }

/* COPING TABS */
.coping-tabs { padding:80px 7%; background:#f0f4ff; border-radius:20px; text-align:center; }
.coping-tabs h2 { font-size:36px; color:#2e2e88; margin-bottom:30px; }
.tabs { display:flex; justify-content:center; gap:15px; margin-bottom:30px; flex-wrap:wrap; }
.tab-btn { padding:12px 25px; border:none; border-radius:50px; background:#6a6aff; color:#fff; font-weight:600; cursor:pointer; transition:0.3s; }
.tab-btn.active { background:#2e2e88; }
.tab-content { display:none; }
.tab-content.active { display:block; }
.tab-content img { width:100%; max-width:400px; border-radius:20px; margin-top:20px; }

/* TIMELINE */
.timeline-section { padding:80px 7%; }
.timeline-section h2 { font-size:36px; text-align:center; color:#2e2e88; margin-bottom:40px; }
.timeline-container { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
.timeline-step { background:#fff; border-radius:20px; padding:20px; width:250px; box-shadow:0 15px 30px rgba(0,0,0,0.1); transition:0.3s; }
.timeline-step:hover { transform:translateY(-10px); }
.step-number { font-size:28px; font-weight:700; color:#6a6aff; margin-bottom:10px; }

/* CATEGORIES */
.resource-categories { padding:80px 7%; background:#f0f4ff; border-radius:20px; text-align:center; }
.resource-categories h2 { font-size:36px; color:#2e2e88; margin-bottom:30px; }
.category-cards { display:flex; flex-wrap:wrap; gap:15px; justify-content:center; }
.category-card { padding:12px 25px; border-radius:50px; background:#6a6aff; color:#fff; font-weight:600; cursor:pointer; transition:0.3s; }
.category-card.active, .category-card:hover { background:#2e2e88; transform:scale(1.05); }
#category-content { margin-top:30px; font-size:18px; }

/* FOOTER */
.footer { padding:40px 7%; text-align:center; background:#2e2e88; color:#fff; border-radius:20px 20px 0 0; }

/* RESPONSIVE */
@media(max-width:900px){
  .featured-grid, .timeline-container { flex-direction:column; align-items:center; }
  .tab-content img { max-width:100%; }
  .category-cards { flex-direction:column; }
}