/home/hdwebsolution/public_html/ns-interior/blog-details.php
<?php include('include/header.php');?>
        <div class="clearfix"></div>
        <!-- Header Container / End -->

        <section class="headings">
            <div class="text-heading">
                <div class="container">
                    <h1 class="text-center">BLOG</h1>
                </div>
            </div>
        </section>
        <div class="road">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <a href="index.php">Home</a><span>ยป</span><span>BLOG</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- END SECTION HEADINGS -->

        <!-- START SECTION BLOG -->
       <!-- START SECTION BLOG -->
<section class="blog-section py-5 bg-light">
  <div class="container">
    <div class="row">

      <!-- BLOG CONTENT -->
      <div class="col-lg-8 col-md-12">
        <article class="blog-post shadow-sm bg-white p-4 rounded-3 mb-4">
          <div class="blog-image mb-4">
            <img src="images/blog/b-1.jpg" alt="Interior Design News" class="img-fluid rounded-3 w-100">
          </div>
          <div class="blog-meta mb-3 text-muted d-flex flex-wrap align-items-center gap-3">
            <span><i class="fa fa-calendar text-primary me-1"></i> April 11, 2020</span>
            <span><i class="fa fa-user text-primary me-1"></i> By Lisa Jhonson</span>
            <span><i class="fa fa-comment text-primary me-1"></i> 34 Comments</span>
          </div>

          <h2 class="fw-bold mb-3">Interior Design News</h2>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae pariatur ab amet iusto tempore neque a,
            deserunt eaque recusandae obcaecati eos atque delectus. Lorem ipsum dolor sit amet consectetur adipisicing
            elit. Eligendi labore vel enim repellendus excepturi autem. Eligendi cum laboriosam exercitationem illum
            repudiandae quasi sint dicta consectetur porro fuga ea, perspiciatis aut!</p>

          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae pariatur ab amet iusto tempore neque a,
            deserunt eaque recusandae obcaecati eos atque delectus. Lorem ipsum dolor sit amet consectetur adipisicing
            elit. Eligendi labore vel enim repellendus excepturi autem. Eligendi cum laboriosam exercitationem illum
            repudiandae quasi sint dicta consectetur porro fuga ea, perspiciatis aut!</p>
        </article>

       
      </div>

      <!-- SIDEBAR -->
   
    </div>
  </div>
</section>
<!-- END SECTION BLOG -->

<style>
.blog-section h2 { color: #222; }
.blog-meta i { color: #f1c40f; }
.comment img { object-fit: cover; }
.sidebar a { color: #333; text-decoration: none; }
.sidebar a:hover { color: #f1c40f; }
.widget ul li { padding: 6px 0; border-bottom: 1px solid #eee; }
.widget ul li:last-child { border: none; }
.widget h5 { border-left: 4px solid #f1c40f; padding-left: 10px; }
</style>

        <!-- END SECTION BLOG -->
 <style>
    .parallax-search.home-1 {
  position: relative;
  width: 100%;
  height: 85vh;
  overflow: hidden;
}
.frd {
    gap: 20px;
    display: flex
}
section.portfolio {
    padding: 6rem 0;
    background: #ffffff;
}
.parallax-search.home-1 video#bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.parallax-search.home-1 .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Adjust opacity for darkness */
  z-index: 1;
}

.parallax-search.home-1 .hero-main {
  position: relative;
  z-index: 2;
  color: #fff;
}
.top-bar {
    background-color: #111;
    color: #fff;
    font-size: 14px;
    padding: 8px 0;
}
.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.top-bar-left {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.top-bar i {
    color: #f1c40f;
    margin-right: 5px;
}
.top-bar-right {
    font-weight: 600;
}
/* === Top Bar Styles === */
.top-bar {
    background-color: #111;
    color: #fff;
    font-size: 14px;
    padding: 8px 0;
}

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

.top-bar-left {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.top-bar i {
    color: #f1c40f;
    margin-right: 5px;
}

.top-bar-right {
    font-weight: 600;
}
.road {
    background: red;
    padding: 20px;
    color: white;
}
.headings {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(17, 17, 17, 0.5)), to(rgba(17, 17, 17, 0.5))), url(images/bg/bg-1.jpg) no-repeat center center;
    background: linear-gradient(rgba(17, 17, 17, 0.5), rgba(17, 17, 17, 0.5)), url(images/bg/bg-1.jpg) no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 50vh;
}
/* Optional: improve responsiveness */
@media (max-width: 768px) {
    .top-bar .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

</style>
      <?php include('include/footer.php');?>