/* ===== LAYOUT ===== */
 main.content {
     padding: 0px 10px;
 }

 .page-layout {
     max-width: 1200px;
     margin: auto;
     /* padding: 40px 15px; */
     display: grid;
     grid-template-columns: 224px 1fr 265px;
 }

 /* ===== SIDEBARS ===== */
 .sidebar_ap {
     position: sticky;
     top: 90px;
     height: fit-content;
 }

 .left-sidebar_ap {
     border-right: 1px solid #eee;
     padding-right: 15px;
 }

 .sidebar_ap-title {
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 16px;
 }

 .toc {
     list-style: none;
 }

 .toc li {
     margin-bottom: 10px;
 }

 .toc a {
     text-decoration: none;
     font-size: 14px;
     color: #2563eb;
 }

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

 /* ===== CENTER CONTENT ===== */
 .content h1 {
     font-size: 34px;
     margin-bottom: 16px;
     line-height: 1.25;
     font-weight: 600;
 }

 .content h2 {
     font-size: 24px;
     margin: 40px 0 12px;
     font-weight: 600;
 }

 .content h3 {
     font-size: 18px;
     margin: 28px 0 10px;
     font-weight: 600;
 }

 .content p {
     font-size: 16px;
     line-height: 1.75;
     color: #444;
     margin-bottom: 16px;
 }

 .content ul {
     margin: 12px 0 20px 20px;
 }

 .content li {
     margin-bottom: 8px;
     color: #444;
 }

 .meta {
     background: #f8fafc;
     padding: 16px;
     border-radius: 12px;
     margin-bottom: 24px;
     font-size: 14px;
     color: #333;
 }

 .quote {
     background: #f1f5f9;
     padding: 20px;
     border-left: 4px solid #2563eb;
     border-radius: 8px;
     margin: 20px 0;
     font-style: italic;
 }

 /* ===== RIGHT CTA ===== */
 .cta-box-cs {
     background: #e9f4ff;
     padding: 24px;
     border-radius: 16px;
 }

 .cta-box-cs h3 {
     font-size: 20px;
     margin-bottom: 12px;
     font-weight: 600;
 }

 .cta-box-cs p {
     font-size: 14px;
     margin-bottom: 16px;
 }

 .cta-box-cs input {
     width: 100%;
     padding: 12px;
     border-radius: 24px;
     border: 1px solid #ccc;
     margin-bottom: 12px;
 }

 .checkbox {
     font-size: 12px;
     display: flex;
     gap: 8px;
     margin-bottom: 16px;
 }

 .cta-box-cs button {
     width: 100%;
     padding: 12px;
     border-radius: 24px;
     border: none;
     background: #2563eb;
     color: #fff;
     cursor: pointer;
     font-size: 14px;
 }

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

     .sidebar_ap {
         position: relative;
     }

     .left-sidebar_ap {
         border: none;
         padding: 0;
     }
 }

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

 /* Large Tablets */
 @media (max-width: 1024px) {
     .page-layout {
         padding: 32px 16px;
         gap: 32px;
     }

     .content h1 {
         font-size: 28px;
     }

     .content h2 {
         font-size: 22px;
     }
 }

 /* Tablets & Small Laptops */
 @media (max-width: 900px) {
     .page-layout {
         grid-template-columns: 1fr;
     }

     .sidebar_ap {
         position: relative;
         top: unset;
         margin-bottom: 24px;
     }

     .left-sidebar_ap {
         border-right: none;
         padding-right: 0;
         display: none;

     }

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

 /* Mobile Devices */
 @media (max-width: 576px) {

     /* Banner fix */
     .banner-cs {
         position: relative;
         overflow: hidden;
         width: -webkit-fill-available !important;
         margin: auto;
         /* prevents large gap on mobile */
     }

     .content h1 {
         font-size: 24px;
         line-height: 1.35;
     }

     .content h2 {
         font-size: 20px;
         margin-top: 32px;
     }

     .content h3 {
         font-size: 17px;
     }

     .content p {
         font-size: 15px;
         line-height: 1.65;
     }

     .meta {
         padding: 14px;
         font-size: 13px;
     }

     .quote {
         padding: 16px;
         font-size: 14px;
     }

     /* TOC single column */
     .toc {
         grid-template-columns: 1fr;
         display: none;
     }

     /* CTA */
     .cta-box-cs {
         padding: 20px;
         border-radius: 12px;
     }

     .cta-box-cs h3 {
         font-size: 18px;
     }

     .cta-box-cs button {
         padding: 14px;
         font-size: 15px;
     }
 }


 /* banner-cs Section */
 .banner-cs {
     position: relative;
     overflow: hidden;
     margin-top: 60px;
     width: 1200px;
     margin: auto;
     padding-top: 90px;
 }

 /* banner-cs Image */
 .banner-cs img {
     width: 100%;
     height: 600px;
     /* object-fit: cover; */
     display: block;
     border-radius: 4px
 }

 /* Optional overlay (remove if not needed) */
 .banner-cs::after {
     content: "";
     position: absolute;
     inset: 0;
     /* background: linear-gradient(rgba(0, 0, 0, 0.1),
             rgba(0, 0, 0, 0.1)); */
 }

 /* Tablet */
 @media (max-width: 991px) {
    /* Banner fix */
     .banner-cs {
         position: relative;
         overflow: hidden;
         width: -webkit-fill-available !important;
         margin: auto;
         /* prevents large gap on mobile */
     }
     .banner-cs img {
         width: -webkit-fill-available;
         height: -webkit-fill-available;
         /* object-fit: cover; */
         display: block;
     }
 }

 /* Mobile */
 @media (max-width: 576px) {
     .banner-cs img {
         width: -webkit-fill-available;
         height: -webkit-fill-available;
         /* object-fit: cover; */
         display: block;
     }
 }

 ul.toc {
     margin-bottom: 20px;
     border-bottom: 1px solid #ccc;
 }

 /* ===== SOCIAL FOLLOW ===== */
 .social-box {
     margin-top: 24px;
 }

 .social-box h5 {
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 0px;
     color: #111;
 }

 .social-links {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .social-links a {
     display: flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
     font-size: 14px;
     color: #374151;
     padding: 8px 10px;
     border-radius: 8px;
     transition: background 0.2s ease;
 }

 .social-links a:hover {
     background: #f1f5f9;
 }

 .social-icon {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     color: #fff;
 }

 .linkedin {
     background: #0a66c2;
 }

 .twitter {
     background: #1d9bf0;
 }

 .facebook {
     background: #1877f2;
 }

 .youtube {
     background: #ff0000;
 }

 /* blogs section code added by rahat */

 /* BLOG LAYOUT */
.blog-layout{
  max-width:1140px;
  margin:auto;
  padding:5rem 16px;
  display:grid;
  grid-template-columns:1fr 260px;
  gap:32px;
}

/* BLOG SIDEBAR */
.blog-sidebar{
  position:sticky;
  top:100px;
  height:fit-content;
  border-left:1px solid #eee;
  padding-left:20px;
}

.blog-sidebar-title{
  font-size:16px;
  font-weight:600;
  margin-bottom:14px;
}

.blog-toc{
  list-style:none;
}

.blog-toc li{
  margin-bottom:10px;
}

.blog-toc a{
  font-size:14px;
  color:#2563eb;
  text-decoration:none;
}

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

/* BLOG CONTENT */
.blog-content h1{
  font-size:34px;
  margin-bottom:16px;
  line-height:1.25;
}

.blog-content h2{
  font-size:24px;
  margin:40px 0 12px;
}

.blog-content h3 {
    font-size: 20px;
    font-weight: 600;
    color: #252a32;
}

.blog-content p{
  font-size:16px;
  line-height:1.75;
  color:#444;
  margin-bottom:16px;
}

.blog-content ul{
  margin:12px 0 20px 20px;
}

.blog-content li{
  margin-bottom:8px;
  color:#444;
}

/* BLOG HIGHLIGHT */
.blog-highlight{
  background:#f8fafc;
  border-left:4px solid #2563eb;
  padding:16px;
  border-radius:8px;
  margin-bottom:24px;
}

/* RESPONSIVE */
@media(max-width:1024px){
  .blog-layout{
    grid-template-columns:1fr;
  }
  .blog-sidebar{
    position:relative;
    border:none;
    padding:0;
    margin-top:32px;
    display: none;
  }
}