.page-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;

     padding-bottom: 10px;
 }

 .header-left {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .header-left h1 {
     margin: 0;
     color: var(--primary);
 }

 .header-left p {
     margin: 2px 0 0;
     color: #555;
     font-size: 0.9rem;
 }

 /* HAMBURGER */
 .menu-toggle {
     display: none;
     background: var(--primary);
     color: white;
     border: none;
     padding: 8px 10px;
     border-radius: 4px;
     cursor: pointer;
 }



 .page-wrapper {
     display: flex;
     gap: 20px;
 }

 /* SIDEBAR */
 .sidebar {
     width: 320px;
     background: var(--background-color-1);
     color: white;
     padding: 20px;
     border-radius: 6px;
     position: sticky;
     top: 20px;
     height: calc(100vh - 40px);
     overflow-y: auto;
 }

 .sidebar-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .close-btn {
     font-size: 1.3rem;
     cursor: pointer;
     display: none;
 }

 /* GROUPS */
 .sidebar-group {
     margin-bottom: 18px;
 }

 .sidebar-group:not(:last-child) {
     border-bottom: 1px solid rgba(255, 255, 255, 0.15);
     padding-bottom: 0px;
 }

 .group-label {
     font-size: 0.8rem;
     text-transform: uppercase;
     color: var(--text-color-black);
     margin-bottom: 6px;
     border-left: 3px solid var(--accent-1);
     padding-left: 6px;
     font-weight: 500;
 }

 .sidebar a {
     display: block;
     color: var(--text-color-black-2);
     text-decoration: none;
     padding: 8px;
     border-radius: 4px;
     font-size: 0.8rem;
     font-weight: 500;
 }

 .sidebar a i {
     margin-right: 8px;
     width: 16px;
 }

 .sidebar a:hover {
     background: var(--primary-grad-100);
     color: #fff;
 }

 .sidebar a.active {
     background: var(--primary-grad-100);
     color: var(--text-2);
 }

 /* CONTENT */
 .content-area {
     flex: 1;
 }

 .content-area h1 {
     font-size: 2rem;
     font-weight: 500;
     color: var(--primar-hover-black);
 }

 .section {
     border-bottom: 1px solid #ddd;

 }

 .section h2 {
     color: var(--primary-grad-0);
     /* border-left: 4px solid #2e7d32; */
     padding-left: 10px;
     font-weight: 500;
     padding: 20px 0px;
 }

 /* OVERLAY */
 .overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.4);
     z-index: 99;
 }

 .sidebar::-webkit-scrollbar {
     width: 6px;
 }

 .sidebar::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.08);
     border-radius: 10px;
 }

 .sidebar::-webkit-scrollbar-thumb {
     background: var(--accent-1);
     /* light green */
     border-radius: 10px;
     transition: 0.3s;
 }

 .sidebar::-webkit-scrollbar-thumb:hover {
     background: #a5d6a7;
 }

 /* Firefox */
 .sidebar {
     scrollbar-width: thin;
     scrollbar-color: var(--accent-1) rgba(255, 255, 255, 0.08);
 }

 /* Intro */
 .section-intro {
     color: #444;
     margin-bottom: 20px;
     line-height: 1.6;
 }

 /* IMAGE GRID */
 .image-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 16px;
     margin-bottom: 25px;
 }

 .image-grid-2 {
     display: flex;
     justify-content: center;
 }

 /* IMAGE CARD */
 .image-card {

     border-radius: 6px;
     overflow: hidden;

     transition: 0.3s;
 }

 .image-card:hover {
     transform: translateY(-4px);
 }

 /* IMAGE */
 .image-card img {
     width: 100%;
     height: 150px;
     object-fit: cover;
 }

 /* CAPTION */
 .img-caption {
     font-size: 0.85rem;
     color: #444;
     text-align: center;
 }

 /* SERVICE BOX */
 .service-box {

     padding: 15px;
     border-radius: 6px;
     background: var(--background-color-1);
 }

 .service-box h3 {
     margin-bottom: 10px;
     color: var(--text-color-black-2);
     font-weight: 500;
 }

 .service-table {
     counter-reset: rowNumber;
 }

 .service-table tbody tr {
     counter-increment: rowNumber;
 }

 .service-table tbody tr td:first-child::before {
     content: counter(rowNumber);
 }

 .service-table {
     counter-reset: rowNumber;
 }

 .service-table tbody tr {
     counter-increment: rowNumber;
 }

 .service-table tbody tr td:first-child::before {
     content: counter(rowNumber);
 }

 .service-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 0.9rem;
 }

 .service-table th,
 .service-table td {
     border: 1px solid #ddd;
     padding: 8px;
     text-align: left;
 }

 .service-table th {
     background: #e8f5e9;
     color: var(--text-color-2);
 }

 .service-table tr:hover {
     background: #f1f1f1;
 }

 /* GROUP ROW (A, B, C sections) */
 .group-row {
     background: var(--background-color-2);
     color: var(--text-color-1);
     font-weight: 600;
 }

 /* SUB ROW (for insect categories) */
 .sub-row td {
     font-size: 0.9rem;
     color: #555;
     padding-left: 20px;
 }

 /* NOTES */
 .note {
     font-size: 0.75rem;
     color: var(--text-color-2);
 }

 /* SMALL TEXT */
 .sub-text {
     font-size: 0.75rem;
     color: #555;
 }

 /* TABLE IMPROVEMENT */
 .service-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 0.9rem;
 }

 .service-table th {
     background: var(--primary-grad-100);
     color: var(--text-color-5);
     font-weight: 500;
 }

 .service-table th,
 .service-table td {
     border: 1px solid #ddd;
     padding: 10px;
 }

 .service-table tr:hover {
     background: #f5f5f5;
 }

 .list-content {
     padding: 20px;
 }

 .service-list {
     padding-left: 20px;
     line-height: 1.8;
     font-size: 0.9rem;
     color: #444;
 }

 .service-list li {
     margin-bottom: 6px;
 }

 .service-list li {
     background: var(--bg-color-1);
     margin-bottom: 15px;
     padding: 15px 18px;
     border-left: 4px solid #2e7d32;
     border-radius: 6px;
     line-height: 1.6;
     font-size: 0.9rem;
     color: #333;
     transition: 0.25s ease;
 }

 /* GRID */
 .facility-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 18px;
     margin-top: 15px;
 }

 /* CARD */
 .facility-card {
     background: #fff;
     border-radius: 8px;
     padding: 16px;
     border: 1px solid #e0e0e0;
     transition: 0.3s;
     position: relative;
 }

 .facility-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }

 /* ICON */
 .facility-card .icon {
     font-size: 1.3rem;
     color: var(--primary-light);
     margin-bottom: 10px;
 }

 /* TITLE */
 .facility-card h4 {
     font-size: 0.9rem;
     color: var(--text-color-black-2);
     margin-bottom: 12px;
     line-height: 1.4;
     font-weight: 500;
 }

 /* PDF LINK */
 .pdf-link {
     display: inline-block;
     font-size: 0.8rem;
     color: var(--primary-grad-100);
     text-decoration: none;
     font-weight: 500;
 }

 .pdf-link i {
     margin-right: 6px;
 }

 .pdf-link:hover {
     text-decoration: underline;
 }

 .feature-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 20px;
     margin-top: 15px;
 }

 .feature-card {
     background: #f1f8f4;
     border-left: 4px solid #2e7d32;
     padding: 15px;
     border-radius: 8px;
     transition: 0.3s;
     display: flex;
     flex-direction: column;
     gap: 12px;
     align-items: flex-start;
     background: #fff;
     border-radius: 8px;
     padding: 16px;
     border: 1px solid #e0e0e0;
     transition: 0.3s;
     position: relative;
 }

 .feature-card i {
     font-size: 1.3rem;
     color: var(--accent-1);
     min-width: 28px;
     margin-top: 3px;
 }

 .feature-card p {
     margin: 0;
     font-size: 0.9rem;
     line-height: 1.5;
     text-align: left;
 }

 .feature-card:hover {
     background: #DCEAF0;
     transform: translateY(-3px);
 }

 .contact-section {
     margin-top: 40px;
 }

 .contact-card {
     background: #fff;
     border-radius: 5px;
     padding: 25px;


 }



 .contact-intro {
     color: #555;
     margin-bottom: 20px;
 }

 .contact-person h3 {
     margin: 0;

     color: var(--text-color-black-2);
     font-weight: 500;
     font-size: 1.2rem;
 }

 .contact-person i {
     margin-right: 6px;
     color: var(--primary-grad-100);
 }

 .designation-division {
     color: var(--text-color-1);
     font-size: 0.8rem;
     margin-bottom: 0px;
     margin-left: 2rem;
 }

 .contact-details p {
     margin: 12px 0;
     font-size: 0.9rem;
 }

 .contact-details i {
     margin-right: 8px;
     color: var(--primary-grad-100);
 }

 .contact-details a {
     color: var(--primary-grad-100);
     text-decoration: none;
 }

 .contact-details a:hover {
     text-decoration: underline;
 }

 .project-section {
     padding: 20px 20px;
     background: #f5f7fa;
     font-family: 'Segoe UI', sans-serif;
 }

 /* Title */


 /* Grid */
 .project-grid {
     max-width: 900px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
 }

 /* Card */
 .project-card {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     text-decoration: none;

     background: #ffffff;
     padding: 20px;
     border-radius: 10px;

     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
     min-height: 160px;
     justify-content: center;
 }

 /* Hover Effect */
 .project-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
     background: #f6fbf7;
 }

 /* Header (icon + title) */
 .project-header {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 8px;
 }

 /* Icon */
 .project-header i {
     font-size: 1rem;
     color: var(--accent-1);
 }

 /* Title */
 .project-content h3 {
     margin: 0;
     font-size: 1rem;
     color: var(--primary);
     font-weight: 500;
 }

 /* Description */
 .project-content p {
     margin: 5px 0 0;
     font-size: 0.9rem;
     color: #555;
     line-height: 1.5;
 }

 /* Arrow (bottom-right) */
.project-card .arrow {
     margin-top: 15px;
     font-size: 1.2rem;
     color: var(--primary);
     align-self: flex-end;
     transition: transform 0.3s ease;
 }

 /* Arrow animation */
 .project-card:hover .arrow {
     transform: translateX(10px);
 }

 .section-intro i.fa-circle {
     font-size: 0.3rem;
     vertical-align: middle;
     margin-right: 10px;
 }

 /* MOBILE */
 @media (max-width: 768px) {

     .menu-toggle {
         display: inline-block;
     }

     .sidebar {
         position: fixed;
         left: -320px;
         top: 0;
         height: 100%;
         z-index: 100;
         border-radius: 0;
         transition: 0.3s;
     }

     .sidebar.active {
         left: 0;
     }

     .close-btn {
         display: block;
     }

     .overlay.active {
         display: block;
     }

     .page-wrapper {
         flex-direction: column;
     }
 }

 html {
     scroll-behavior: smooth;
 }