body {
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(145deg, #e8f9f7, #d0f0ed);
    color: #222
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #4fd1c5, #38b2ac);
    color: #fff;
    padding: 12px 25px
}

.navbar {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.navbar a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.2rem;
}

.navbar a:hover {
    opacity: .8
}
h1{text-align:center;margin-bottom:25px;font-size:2rem;}

.main-blog{
  max-width:1100px;
  margin:40px auto;
  padding:20px;
}

footer {
  background: linear-gradient(135deg, #4fd1c5, #38b2ac);
  color: #fff;
  padding: 20px 10% 0px 10%;
  display: flex;
  flex-direction: column;
  gap: 25px;
  text-align: center;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-section {
  flex: 1;
  min-width: 220px;
}

.footer-section h4 {
  margin-bottom: 10px;
  font-size: 18px;
  color: #fff;
  border-bottom: 2px solid rgba(255,255,255,0.3);
  display: inline-block;
  padding-bottom: 5px;
}

.footer-section a {
  display: flex;
  justify-content: center;
  color: #fff;
  align-items: center;
  text-decoration: none;
  margin: 10px 0px;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 1px;
}

.footer-section a:hover {
  color: #e6fdfb;
  transform: translateX(3px);
}

.common {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0px;
}

.copyright {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding: 15px;
  font-size: 16px;
}

 a{
    text-decoration: none;
    color: #38b2ac;
    font-weight: 600;
 }


/* 🌙 Dark Mode Styles */
.toggle-theme {
    padding: 6px 10px;
    background: rgba(255, 255, 255, .25);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
    font-size: 16px;
}

.toggle-theme:hover {
    background: rgba(255, 255, 255, .4);
}

body.dark {
    background: linear-gradient(145deg, #1b1b1b, #242424);
    color: #f0f0f0;
}
body.dark .active,
body.dark header {
    background: linear-gradient(135deg, #319795, #285e61);
}

body.dark main {
    background: #2b2b2b;
    color: #f0f0f0;
    border-color: #444;
}



body.dark button,
body.dark .toggle-theme {
    background: linear-gradient(135deg, #319795, #2c7a7b);
    color: #fff;
}

body.dark footer {
    background: linear-gradient(135deg, #319795, #285e61);
}
main{max-width:850px;margin:40px auto;padding:20px;background:#fff;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1);line-height:1.7}
main img{width:100%;border-radius:10px;margin-bottom:20px;}

/* Responsive Navbar */
.menu-icon {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 255, 255, 0.25);
    padding: 6px 10px;
    border-radius: 6px;
    transition: .3s;
}

.menu-icon:hover {
    background: rgba(255, 255, 255, 0.4);
}

@media (max-width: 768px) {
    .navbar {
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: linear-gradient(135deg, #4fd1c5, #38b2ac);
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 15px 0;
        display: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        z-index: 999;
        animation: slideDown .3s ease forwards;
    }

    .navbar.active {
        display: flex;
    }

    .menu-icon {
        display: block;
    }

    header {
        position: relative;
        flex-wrap: wrap;
    }
.navbar a{
    font-size: 1rem;
} 
    .toggle-theme {
        order: 3;
        margin-top: 10px;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#searchBox{
  display:block;
  margin:0 auto 30px;
  padding:10px 15px;
  width:90%;
  max-width:400px;
  font-size:16px;
  border-radius:6px;
  border:1px solid #bcdad6;
  outline:none;
  transition:all .3s ease;
}
#searchBox:focus{
  border-color:#4fd1c5;
  box-shadow:0 0 6px rgba(79,209,197,.4);
}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:25px;
}
.blog-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 5px 18px rgba(0,0,0,.08);
  transition:all .35s ease;
  display:flex;
  flex-direction:column;
}
.blog-card:hover{
  transform:translateY(-7px);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.blog-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  transition:transform .5s ease;
}
.blog-card:hover img{transform:scale(1.05);}
.blog-card h2{
  padding:15px;
  font-size:20px;
  color:#333;
}
.blog-card p{
  padding:0 15px 15px;
  color:#555;
  font-size:15px;
  line-height:1.6;
  flex-grow:1;
}
.blog-card a{
  display:inline-block;
  margin:0 15px 15px;
  padding:8px 12px;
  background:linear-gradient(135deg,#4fd1c5,#38b2ac);
  color:#fff;
  text-decoration:none;
  border-radius:6px;
  font-size:14px;
  transition:background .3s ease;
}
.blog-card a:hover{background:linear-gradient(135deg,#38b2ac,#319795);}

body.dark .blog-card{background:#2b2b2b;box-shadow:0 3px 12px rgba(0,0,0,.3);}
body.dark .blog-card h2{color:#fff;}
body.dark .blog-card p{color:#ccc;}
body.dark .blog-card a{background:linear-gradient(135deg,#319795,#2c7a7b);}
@media(max-width:600px){h1{font-size:1.6rem}}
/* ✨ Smooth fade animations for search filtering */
.fade-in {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-out {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.3s ease, transform 0.3s ease;
}