@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Poppins:wght@400;700&display=swap');

/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Poppins', sans-serif; background:#f5f5f5; color:#333; line-height:1.6; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

/* Header */
.header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 2rem;
  background:linear-gradient(135deg,#4b0082,#9333ea);
  color:white;
  flex-wrap:wrap;
}
.logo h1 { font-family: 'Pacifico', cursive; font-size:2rem; background:linear-gradient(to right, #fff, #ccc); -webkit-background-clip:text; color:transparent; }
.nav { display:flex; gap:2rem; font-weight:700; }
.nav a { padding:0.5rem 0; transition:0.3s; }
.nav a:hover { color:#ffd700; }

/* Hero Section */
.hero { text-align:center; padding:4rem 2rem; background:#e0d7f5; }
.hero-title { font-size:2.5rem; font-weight:700; margin-bottom:1rem; color:#4b0082; }
.hero-subtitle { font-size:1.2rem; color:#555; }

/* Cards Grid */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; max-width:1200px; margin:2rem auto; }
.card, .post-card, .carousel-card { background:white; border-radius:10px; padding:1.5rem; box-shadow:0 10px 20px rgba(0,0,0,0.1); transition:0.3s; }
.card:hover, .post-card:hover, .carousel-card:hover { transform:translateY(-5px); box-shadow:0 15px 25px rgba(0,0,0,0.2); }
.card h3, .post-card h3, .carousel-card h3 { color:#9333ea; margin-bottom:0.5rem; font-size:1.2rem; }
.card p, .post-card p, .carousel-card p { color:#333; font-size:0.95rem; }

/* Recent Posts Section */
.recent-posts, .most-viewed { padding:3rem 2rem; text-align:center; }
.recent-posts h2, .most-viewed h2 { font-size:2rem; font-weight:700; margin-bottom:2rem; color:#4b0082; }
.posts-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; }

/* Post Cards */
.post-card img { border-radius:10px; margin-bottom:1rem; }
.post-content h3 { margin-bottom:0.5rem; }
.post-content p { color:#555; }

/* Carousel */
.carousel { position:relative; max-width:1000px; margin:auto; overflow:hidden; }
.carousel-card { display:none; text-align:center; }
.carousel-card img { border-radius:10px; margin-bottom:1rem; }
.carousel-content h3 { margin-bottom:0.5rem; }
.carousel-content p { color:#555; }

/* Profile Info Section */
.profile-info { padding:3rem 2rem; background:#f0ebff; }
.education, .experience { padding:3rem 2rem; }

/* Contact Info Section */
.contact-info { padding:3rem 2rem; background:#f5f5f5; text-align:center; }

/* Footer */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 3rem;
  background: linear-gradient(135deg,#4b0082,#9333ea);
  color: white;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Forms (if ever needed) */
.contact-form input, .contact-form textarea { width:100%; padding:0.8rem; border-radius:5px; border:1px solid #ccc; font-size:1rem; margin-bottom:1rem; }
.contact-form button { background:#4b0082; color:white; padding:0.8rem; font-size:1rem; border:none; border-radius:5px; cursor:pointer; transition:0.3s; }
.contact-form button:hover { background:#9333ea; }

/* Responsive Design */
@media(max-width:768px){
  .nav { flex-direction:column; gap:1rem; width:100%; text-align:center; margin-top:1rem; }
  .header { flex-direction:column; align-items:flex-start; }
  .cards-grid { grid-template-columns:1fr; }
  .posts-grid { grid-template-columns:1fr; }
}

/* See More Posts Section */
.see-more-posts { text-align:center; padding:3rem 2rem; background:#e0d7f5; border-radius:15px; margin:2rem auto; max-width:900px; }
.see-more-container h2 { font-size:2rem; color:#4b0082; margin-bottom:1rem; }
.see-more-container p { color:#555; margin-bottom:1.5rem; }
.see-more-btn { display:inline-block; background:#9333ea; color:white; padding:0.8rem 2rem; border-radius:8px; font-weight:700; transition:0.3s; }
.see-more-btn:hover { background:#4b0082; transform:translateY(-3px); }

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

body {
  min-height: 100vh;
}

main, .content-wrapper {
  flex: 1; /* pushes footer to bottom */
}