/* ==================== RESET & BASE ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* ensures padding/margin don't break layout */
}

body {
  font-family: 'Arial', sans-serif; /* main font */
  background: #f5f5f5; /* light gray background */
  line-height: 1.6; /* better readability */
  color: #333; /* default text color */
}

/* ==================== CONTAINER ==================== */
.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

/* ==================== HEADER ==================== */
.header {
  background: #111; /* dark header */
  color: white;
  padding: 20px 0;
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 28px;
  font-weight: bold;
  color: #00bcd4; /* accent color */
}

/* ==================== NAVIGATION ==================== */
.nav ul {
  list-style: none;
  display: flex;
  gap: 25px;
}

.nav a {
  text-decoration: none;
  color: white;
  font-size: 16px;
  transition: color 0.3s;
}

.nav a:hover {
  color: #00bcd4; /* hover effect matches logo accent */
}

/* ==================== HERO SECTION ==================== */
.hero {
  text-align: center;
  padding: 100px 20px;
  background: linear-gradient(135deg, #00bcd4, #2563eb); /* gradient hero */
  color: white;
  border-radius: 10px; /* rounded edges for hero */
  margin-bottom: 50px;
}

.hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.hero p {
  font-size: 20px;
  margin-bottom: 30px;
}

/* ==================== BUTTON ==================== */
.btn {
  display: inline-block;
  background: #ff6f61; /* primary button color */
  color: white;
  padding: 15px 30px;
  font-size: 16px;
  text-decoration: none;
  border-radius: 50px; /* rounded pill button */
  transition: all 0.3s ease;
}

.btn:hover {
  background: #ff3b2f; /* hover effect */
  transform: translateY(-2px); /* small lift effect */
}

/* ==================== MAIN CONTENT ==================== */
main {
  padding: 60px 0;
}

/* ==================== FOOTER ==================== */
.footer {
  background: #111;
  color: white;
  text-align: center;
  padding: 20px 0;
  margin-top: 60px;
  font-size: 14px;
}

/* ==================== MEDIA QUERIES (Responsive) ==================== */
@media (max-width: 768px) {
  .header .container {
    flex-direction: column;
    gap: 15px;
  }

  .nav ul {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .hero h1 {
    font-size: 36px;
  }

  .hero p {
    font-size: 18px;
  }
}

/* ==================== ABOUT SECTION ==================== */

.about {
  padding: 80px 0;
  text-align: center;
}

.about p {
  max-width: 700px;
  margin: auto;
  margin-top: 20px;
}

/* ==================== FEATURED BLOG POSTS ==================== */

.featured-posts {
  background: #f9f9f9;
  padding: 80px 0;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.post-card {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.post-card h3 {
  margin-bottom: 10px;
}

.read-more {
  display: inline-block;
  margin-top: 15px;
  color: #2563eb;
  text-decoration: none;
}

/* ==================== SKILLS SECTION ==================== */

.skills {
  padding: 80px 0;
  text-align: center;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-top: 40px;
}

.skill-card {
  background: #111;
  color: white;
  padding: 20px;
  border-radius: 10px;
}

/* ==================== CTA SECTION ==================== */

.cta {
  background: linear-gradient(135deg,#2563eb,#00bcd4);
  color: white;
  text-align: center;
  padding: 80px 20px;
}

.cta p {
  margin: 20px 0;
}

/* ==================== HERO PORTFOLIO ==================== */
.hero-portfolio {
  background: linear-gradient(135deg, #2563eb, #00bcd4);
  color: white;
  text-align: center;
  padding: 100px 20px;
  border-radius: 10px;
  margin-bottom: 50px;
}

/* ==================== PORTFOLIO SECTION ==================== */
.portfolio-section {
  padding: 80px 0;
}

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

/* ==================== PORTFOLIO CARD ==================== */
.portfolio-card {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  text-align: center;
}

.portfolio-card h3 {
  margin-bottom: 15px;
}

.portfolio-card p {
  margin-bottom: 20px;
}

/* Buttons already styled from .btn */

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================== HERO BLOG ==================== */
.hero-blog {
  background: linear-gradient(135deg, #00bcd4, #2563eb);
  color: white;
  text-align: center;
  padding: 100px 20px;
  border-radius: 10px;
  margin-bottom: 50px;
}

.hero-blog h1 {
  font-size: 48px;
}

.hero-blog p {
  font-size: 20px;
  margin-top: 20px;
}

/* ==================== BLOG GRID ==================== */
.blog-section {
  padding: 80px 0;
}

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

/* ==================== BLOG CARD ==================== */
.blog-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  text-align: center;
  padding: 20px;
  transition: transform 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
}

.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.blog-card h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

.blog-card p {
  margin-bottom: 20px;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .hero-blog h1 {
    font-size: 36px;
  }

  .hero-blog p {
    font-size: 18px;
  }
}

/* ==================== BLOG ARTICLE ==================== */
.blog-article {
  background: white;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  margin-bottom: 80px;
}

.blog-article h1 {
  font-size: 42px;
  margin-bottom: 15px;
}

.post-meta {
  font-size: 14px;
  color: #666;
  margin-bottom: 30px;
}

/* ==================== TABLE OF CONTENTS ==================== */
.toc {
  background: #f9f9f9;
  padding: 20px;
  border-left: 5px solid #00bcd4;
  margin-bottom: 40px;
}

.toc h3 {
  margin-bottom: 15px;
}

.toc ul {
  list-style: disc inside;
}

.toc a {
  text-decoration: none;
  color: #2563eb;
}

.toc a:hover {
  text-decoration: underline;
}

/* ==================== ARTICLE SECTIONS ==================== */
.blog-article section {
  margin-bottom: 40px;
}

.blog-article h2 {
  font-size: 28px;
  margin-bottom: 15px;
}

.blog-article p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 15px;
}

.blog-article img {
  width: 100%;
  margin: 20px 0;
  border-radius: 10px;
}

/* ==================== CODE BLOCKS ==================== */
pre {
  background: #1e1e1e;
  color: #f8f8f2;
  padding: 20px;
  overflow-x: auto;
  border-radius: 10px;
  margin-bottom: 20px;
}

pre code {
  font-family: 'Courier New', monospace;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  .blog-article {
    padding: 20px;
  }

  .blog-article h1 {
    font-size: 32px;
  }

  .blog-article h2 {
    font-size: 24px;
  }

  .blog-article p {
    font-size: 16px;
  }
}

/* ==================== STICKY HEADER ==================== */

/* Header fixed on top when scrolling */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Add shadow when header is sticky */
.header.scrolled {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ==================== ACTIVE NAVIGATION ==================== */

/* Highlight active page link */
.nav a.active {
  color: #00bcd4;
  font-weight: bold;
}

/* ==================== SMOOTH SCROLL ==================== */

html {
  scroll-behavior: smooth;
}

/* ==================== ABOUT HERO ==================== */

.about-hero {
  background: linear-gradient(135deg,#2563eb,#00bcd4);
  color: white;
  text-align: center;
  padding: 100px 20px;
}

/* ==================== BIO SECTION ==================== */

.bio {
  padding: 80px 0;
  text-align: center;
}

.bio p {
  max-width: 700px;
  margin: auto;
  margin-top: 20px;
}

/* ==================== SKILLS ==================== */

.skills-section {
  padding: 80px 0;
}

.skill {
  margin-bottom: 25px;
}

.skill-bar {
  background: #ddd;
  height: 10px;
  border-radius: 10px;
}

.skill-level {
  height: 10px;
  border-radius: 10px;
  background: #2563eb;
}

/* Skill percentages */

.python {
  width: 80%;
}

.data-science {
  width: 75%;
}

.ml {
  width: 70%;
}

.ai {
  width: 65%;
}

/* ==================== CERTIFICATIONS ==================== */

.certifications {
  padding: 80px 0;
  background: #f9f9f9;
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 30px;
  margin-top: 40px;
}

.cert-card {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* ==================== CONTACT HERO ==================== */

.contact-hero{
background:linear-gradient(135deg,#2563eb,#00bcd4);
color:white;
text-align:center;
padding:100px 20px;
}


/* ==================== CONTACT SECTION ==================== */

.contact-section{
padding:80px 0;
}

.contact-section h2{
text-align:center;
margin-bottom:40px;
}

.form-group{
margin-bottom:20px;
}

.form-group label{
display:block;
margin-bottom:5px;
}

.form-group input,
.form-group textarea{

width:100%;
padding:12px;

border:1px solid #ccc;

border-radius:6px;

font-size:16px;

}

/* ==================== SOCIAL LINKS ==================== */

.social-section{
padding:80px 0;
background:#f9f9f9;
text-align:center;
}

.social-links{
margin-top:20px;
}

.social-links a{

margin:10px;

text-decoration:none;

color:#2563eb;

font-weight:bold;

}

/* ==================== BLOG HERO ==================== */

.blog-hero{

background:linear-gradient(135deg,#2563eb,#00bcd4);

color:white;

text-align:center;

padding:100px 20px;

}


/* ==================== BLOG GRID ==================== */

.blog-section{

padding:80px 0;

}

.blog-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}


/* ==================== BLOG CARD ==================== */

.blog-card{

background:white;

border-radius:10px;

overflow:hidden;

box-shadow:0 5px 15px rgba(0,0,0,0.1);

}

.blog-card img{

width:100%;

height:200px;

object-fit:cover;

}

.blog-content{

padding:20px;

}

.blog-meta{

display:flex;

justify-content:space-between;

margin:10px 0;

font-size:14px;

color:#666;

}

.category{

color:#2563eb;

font-weight:bold;

}


/* ==================== RESPONSIVE ==================== */

@media (max-width:900px){

.blog-grid{

grid-template-columns:1fr 1fr;

}

}

@media (max-width:600px){

.blog-grid{

grid-template-columns:1fr;

}

}

/* ==================== BLOG SEARCH ==================== */

.blog-search{
padding:40px 0;
text-align:center;
}

#blogSearch{

width:60%;

padding:12px;

font-size:16px;

border:1px solid #ccc;

border-radius:6px;

}

/* ==================== BLOG FILTER ==================== */

.blog-filter{

text-align:center;

margin-bottom:40px;

}

.filter-btn{

margin:5px;

padding:10px 20px;

border:none;

background:#2563eb;

color:white;

border-radius:6px;

cursor:pointer;

}

.filter-btn:hover{

background:#1e40af;

}