.container {
    max-width: 1250px; 
    margin: 0 auto;
    padding: 0 20px;
}
    .projectsBanner{
    width:100%;
    height:360px;
    border-radius:20px;
    background-size:cover;
    background-position:center;
    position:relative;
    overflow:hidden;
    margin:30px auto 40px auto;
    max-width:1300px;
}

.bannerOverlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to right,
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.15)
    );
    display:flex;
    align-items:center;
}

.projectsBanner .container{
    color:#fff;
}

.projectsBanner h2{
    font-size:42px;
    font-weight:700;
    margin-bottom:6px;
}

.projectsBanner p{
    font-size:18px;
    opacity:0.9;
}

.article-layout{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:40px;
    margin:50px auto;
}

.article-sidebar{
    position:sticky;
    top:100px;
    height:max-content;
}

.sidebar-card{
    background:#fff;
    padding:18px;
    border-radius:14px;
    box-shadow:0 4px 18px rgba(0,0,0,0.06);
    margin-bottom:22px;
}

.sidebar-card h4{
    font-size:16px;
    margin-bottom:10px;
}

.sidebar-card ul{
    list-style:none;
    padding:0;
}

.sidebar-card li{
    margin-bottom:8px;
}

.sidebar-card a{
    color:#444;
    font-size:14px;
}

.share-btn{
    display:block;
    padding:10px;
    border-radius:6px;
    color:#fff;
    font-size:13px;
    margin-bottom:8px;
    text-align:center;
}

.fb{background:#3b5998;}
.tw{background:#1da1f2;}
.ln{background:#0077b5;}
.em{background:#555;}

.article-body h1{
    font-size:34px;
    margin-bottom:10px;
}

.article-intro{
    color:#777;
    margin-bottom:25px;
}
    

.article-layout{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:40px;
    margin:50px auto;
}

.article-sidebar{
    position:sticky;
    top:100px;
    height:max-content;
}

.sidebar-card{
    background:#fff;
    padding:18px;
    border-radius:14px;
    box-shadow:0 4px 18px rgba(0,0,0,0.06);
    margin-bottom:22px;
}

.sidebar-card h4{
    font-size:16px;
    margin-bottom:12px;
}

.sidebar-card ul{
    list-style:none;
    padding:0;
}

.sidebar-card li{
    margin-bottom:8px;
}

.sidebar-card a{
    color:#444;
    font-size:14px;
    text-decoration:none;
}

.sidebar-card a:hover{
    color:#ff7a00;
}
.share-btn{
    display:block;
    padding:10px;
    border-radius:6px;
    color:#fff;
    font-size:13px;
    margin-bottom:8px;
    text-align:center;
}

.fb{background:#3b5998;}
.tw{background:#1da1f2;}
.ln{background:#0077b5;}
.em{background:#555;}
.article-body h2{
    font-size:26px;
    margin-top:40px;
}

.article-intro{
    color:#777;
    margin-bottom:25px;
}
@media(max-width:900px){
    .article-layout{
        grid-template-columns:1fr;
    }

    .article-sidebar{
        position:relative;
        top:0;
    }
}



/* Layout split */
.article-wrapper {
    display: flex;
    gap: 50px; /* Space between sidebar and your content */
    padding: 40px 0;
}

.article-sidebar {
    flex: 0 0 280px; /* Fixed width for your TOC and Share sidebar */
}

.article-main-content {
    flex: 1; /* Takes up all remaining space on the right */
}

/* The Green Elements Box UI */
.key-elements-box {
    background-color: #f4faf6; /* Subtle mint background */
    border-radius: 18px;
    padding: 40px;
    margin-top: 30px;
}

.key-elements-box h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 30px;
    color: #1a1a1a;
}

/* 2-column grid inside the content area */
.key-elements-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Exact 2-column split */
    gap: 40px;
}

.key-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.key-circle {
    min-width: 34px;
    height: 34px;
    background-color: #619a4e; /* The specific leaf green */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.key-text h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #222;
}

.key-text p {
    font-size: 14.5px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.sidebar-card h4 {
    color: #333;
    font-weight: 700;
    margin-bottom: 15px;
}

/* Button Styling */
.share-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important; /* Removes blue underline */
    color: #ffffff !important;        /* Forces text to white */
    margin-bottom: 10px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Forces Icon to White */
.share-btn i {
    color: #ffffff; 
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* Brand Colors from your UI */
.fb { background-color: #5b73e8; } 
.tw { background-color: #63b3ed; } 
.ln { background-color: #4251d4; } 
.em { background-color: #4a5568; }

/* Hover Effects */
.share-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: #ffffff !important;
}
.key-elements-box{
  background:#f3fbf6;
  padding:30px;
  border-radius:14px;
  margin:30px 0;
}

.key-elements-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.key-card{
  display:flex;
  gap:14px;
}

.key-circle{
  width:34px;
  height:34px;
  border-radius:50%;
  background:#6cbf7d;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
}

/* The Main Light Green Container */
.key-elements-box {
    background-color: #f4faf6; /* Very light mint green */
    border-radius: 15px;
    padding: 35px;
    margin: 40px 0;
}

.key-elements-box h3 {
    font-size: 20px;
    color: #1a1a1a;
    margin-bottom: 30px;
    font-weight: 600;
}

/* 2-Column Grid for the items */
.key-elements-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    column-gap: 50px;
    row-gap: 30px;
}

/* Individual Item Layout */
.key-item {
    display: flex;
    align-items: flex-start; /* Aligns circle with the top of the title */
    gap: 15px;
}

/* The Numbered Green Circle */
.key-circle {
    min-width: 32px;
    height: 32px;
    background-color: #6ba357; /* The specific leaf green color */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0; /* Prevents circle from squishing */
}

/* Text Styling */
.key-text h4 {
    font-size: 17px;
    color: #2c2c2c;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.key-text p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Responsive adjustment for mobile */
@media (max-width: 768px) {
    .key-elements-grid {
        grid-template-columns: 1fr; /* Stack to 1 column on small screens */
    }
}


/* Ensure the grid doesn't break the layout on medium screens */
.key-elements-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* This creates the 2-column UI from your image */
    column-gap: 40px;
    row-gap: 25px;
}

.key-elements-box {
    background-color: #f4faf6; /* Light green background */
    border-radius: 15px;
    padding: 35px;
    margin: 40px 0;
    width: 100%; /* Ensures it fits the article container */
}

/* Individual item alignment */
.key-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.key-circle {
    min-width: 32px;
    height: 32px;
    background-color: #6ba357; /* Leaf green */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.furniture-box{
    background:#fff7e3;
    border-radius:14px;
    padding:30px;
    margin:40px 0;
    border:1px solid #ffe3a3;
}

.furniture-box h3{
    font-size:18px;
    margin-bottom:18px;
    color:#8b5a00;
    font-weight:600;
}

.furniture-box ul{
    list-style:none;
    padding:0;
}

.furniture-box li{
    margin-bottom:10px;
    padding-left:22px;
    position:relative;
    color:#6b4b00;
    font-size:14px;
}

.furniture-box li::before{
    content:"›";
    position:absolute;
    left:0;
    color:#ff8c00;
    font-weight:700;
}