body {
  font-family: "Segoe UI", sans-serif;
  color: #333;
  background: #fff;
}

.nl-top-card {
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  width: 300px; 
  height: 100px; 
}

.nl-top-card:hover {
  transform: translateY(-2px);
  border-color: #cddccc;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.nl-top-card img {
  max-height: 55px;
  max-width: 200px;
  object-fit: contain;
}

.navbar {
  border-top: 4px solid #89C38E;
}

.navbar-brand img {
  height: 30px;
}

.navbar .register {
  background: #89C38E;
  color: #fff;
}

.navbar .login {
  background: #6c8e6e;
  color: #fff;
}

.search-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -34px;
  background: #505050;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  z-index: 2;
  max-width: 1000px; 
  width: 100%;
}

.search-box .btn {
  background: #89C38E;
  color: #fff;
}

.nl-post-box {
  border: 2px solid #89C38E;
  border-radius: 12px;
  background: #fff;
  max-width: 1000px; 
  width: 100%;
}

.nl-post-logo img {
  width: 90px;
  height: 90px;
}

.nl-post-content p {
  color: #333; 
  font-size: 17px;
}

@media (max-width: 767px) {
  .nl-top-card {
    width: 100%; 
    height: 80px; 
  }

  .nl-top-card img {
    max-height: 44px;
    max-width: 180px;
  }

  .search-box {
    bottom: -65px;
  }

  .nl-post-logo img {
    width: 64px;
    height: 64px;
  }

  .nl-post-content p {
    font-size: 16px;
  }

  .nl-posts-container {
    margin-top: 80px;
  }
  .nl-latest-posts{
 margin-top: 80px;
  }
  .search-box{
    width: 95%;
  }
}

@media (max-width: 420px) {
    .search-box{
     bottom: -85px;
    }
        .nl-latest-posts{
        margin-top: 95px;
    }
  }