#searchBar {
    border: 1px solid black;
    border-radius: 20px;
    width: 40%;
    transition: width 0.18s;
    margin-left: 16px;
}

/* On screens 700px wide or less (mobile), make wider and center */
@media (max-width: 700px) {
    #searchBar {
        width: 90%;
        margin: 12px auto 8px auto;
        display: block;
        /* Remove left margin and center */
    }
}

        /* --- Featured Posts: Modern Black/Light Black --- */

.featured-posts {
  background: #17181b;
  border-radius: 1.2rem;
  box-shadow: 0 3px 22px #11131840;
  padding: 2.1rem 1.4rem 1.2rem 1.4rem;
  margin: 0 auto 2.5rem auto;
  max-width: 1100px;
}

.featured-posts h3 {
  color: #f6f6f6;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.3rem;
  letter-spacing: 0.5px;
}

.post-grid {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Single Post Card */
.post-grid > div {
  background: #23232a;
  border-radius: 1rem;
  box-shadow: 0 3px 14px #0006;
  flex: 1 1 220px;
  max-width: 315px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 24px;
  transition: box-shadow 0.19s, transform 0.14s;
  border: 1px solid #29292f;
}
.post-grid > div:hover {
  box-shadow: 0 8px 27px #06060740;
  transform: scale(1.016) translateY(-4px);
  border-color: #3d3d44;
}

.post-grid img {
  width: 100%;
  height: 155px;
  object-fit: cover;
  border-radius: 1rem 1rem 0 0;
  background: #1b1e22;
  margin-bottom: 0.75rem;
}

.post-grid h4 {
  color: #f4f4f4;
  font-size: 1.14rem;
  margin: 14px 13px 8px 17px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.13px;
}

.post-grid p {
  font-size: 1rem;
  color: #b8bac0;
  margin: 0 17px 20px 17px;
  line-height: 1.6;
}

.read-more {
  color: #86aaff;
  font-weight: 700;
  margin-left: 10px;
  text-decoration: none;
  transition: color .15s;
}
.read-more:hover {
  color: #f4f4f4;
  text-decoration: underline;
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .post-grid { gap: 12px; }
}
@media (max-width: 650px) {
  .post-grid { flex-direction: column; }
  .post-grid > div { max-width: 100%; }
  .featured-posts { padding: 1rem 0.4rem;}
}
/* --- Latest Posts Section: Modern, Bright, Non-Dark Look --- */
.latest-posts {
  background: #f8fafd;
  border-radius: 1.2rem;
  box-shadow: 0 2px 18px #bfc8da23;
  padding: 2rem 1.4rem 1rem 1.4rem;
  margin: 0 auto 2.5rem auto;
  max-width: 1100px;
}

.latest-posts h3 {
  color: #1a2333;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.3rem;
  letter-spacing: 0.5px;
}

.post-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Single Post Card */
.post-list > div {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 14px #b6bcc71a;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 1.2rem 1.1rem;
  transition: box-shadow 0.18s, transform 0.13s;
  border: 1.2px solid #e7e9f0;
}

.post-list > div:hover {
  box-shadow: 0 7px 24px #8ed1fc18;
  transform: scale(1.017) translateY(-4px);
  border-color: #a4dbe8;
}

.post-list img {
  min-width: 120px;
  max-width: 140px;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  background: #f0faff;
  margin-bottom: 0;
  box-shadow: 0 1px 7px #daf4fd23;
}

.post-list h4 {
  color: #142147;
  font-size: 1.15rem;
  margin: 0 0 6px 0;
  font-weight: 700;
  letter-spacing: 0.11px;
  line-height: 1.22;
}

.post-list p {
  font-size: 1rem;
  color: #42526e;
  margin-bottom: 7px;
  margin-top: 0.1em;
  line-height: 1.55;
}

.post-list .read-more {
  color: #19c7c7;
  font-weight: 600;
  margin-left: 6px;
  text-decoration: none;
  transition: color .13s;
}
.post-list .read-more:hover {
  color: #760c2a;
  text-decoration: underline;
}

@media (max-width: 700px) {
  .post-list > div { flex-direction: column; align-items: center; padding: 0.8rem 0.5rem; gap: 9px;}
  .post-list img { width: 100%; max-width: 245px; height: 130px;}
}

.categories {
  background: #f6f8fa;
  border-radius: 1rem;
  box-shadow: 0 2px 12px #a0c6d60f;
  max-width: 1100px;
  margin: 0 auto 2.5rem auto;
  padding: 2rem 1.3rem 1.2rem 1.3rem;
  text-align: center;
}

.categories h3 {
  color: #142147;          /* Navy/dark blue */
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1.3rem;
  letter-spacing: 0.6px;
}

.category-buttons-container {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  margin-bottom: 10px;
}

.category-button {
  background: #19c7c7;         /* Bright turquoise/teal */
  color: #fff;
  border: none;
  font-weight: 600;
  border-radius: 30px;
  padding: 12px 29px;
  font-size: 1rem;
  box-shadow: 0 2px 10px #19c7c71a;
  letter-spacing: .2px;
  cursor: pointer;
  outline: none;
  transition: background .15s, color .13s, transform .13s;
}

.category-button:hover,
.category-button:focus {
  background: #142147;      /* Navy/dark blue on hover */
  color: #fff;
  transform: scale(1.04);
  box-shadow: 0 6px 20px #19c7c724;
}

@media (max-width: 700px) {
  .category-buttons-container { flex-direction: column; gap:10px;}
  .categories { padding: 1.2rem 0.2rem; }
}
.footer-section.follow-us {
  background: #f6f8fa;             /* Very light neutral gray */
  box-shadow: 0 1px 8px #19c7c715; /* Soft teal shadow */
  border-radius: 1rem;
  text-align: center;
  margin: 2.2rem auto 1.8rem auto;
  padding: 22px 8px 15px 8px;
  max-width: 620px;
}

.footer-section.follow-us h5 {
  color: #19c7c7;                  /* Bright teal */
  font-size: 1.11rem;
  font-weight: 700;
  margin: 8px 0 3px 0;
}

.footer-section.follow-us p {
  color: #142147;                  /* Navy */
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.footer-section.follow-us a {
  display: inline-block;
  margin: 6px 11px 0 11px;
  transition: transform .14s;
}
.footer-section.follow-us a img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 6px #19c7c71a;
  transition: box-shadow .13s, transform .13s;
  border: 1.5px solid #d3eafd;
}
.footer-section.follow-us a img:hover {
  transform: scale(1.10);
  box-shadow: 0 6px 20px #19c7c726;
  border-color: #19c7c7;
}
.call-to-action {
  background: linear-gradient(110deg, #760c2a 4%, #19c7c7 96%);
  color: #fff;
  text-align: center;
  box-shadow: 0 2px 28px #19c7c729;
  border-radius: 1.1rem;
  padding: 40px 10px 30px 10px;
  margin: 2.5rem auto 2.1rem auto;
  max-width: 740px;
}

.call-to-action h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.7rem;
}
.call-to-action p {
  color: #f4f8fa;
  margin-bottom: 1.5rem;
  font-size: 1.08rem;
}

.cta-button {
  background: #fff;
  color: #760c2a;
  font-weight: 700;
  border-radius: 33px;
  padding: 12px 34px;
  font-size: 1.12rem;
  border: none;
  box-shadow: 0 2px 10px #19c7c71a;
  text-decoration: none;
  display: inline-block;
  transition: background 0.14s, color 0.14s, box-shadow 0.14s;
}
.cta-button:hover {
  background: #19c7c7;
  color: #fff;
  box-shadow: 0 7px 24px #19c7c726;
}