/* ===== 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;

     }

     .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;
 }