/* Reset and Base Styles */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     line-height: 1.6;
     color: #333;
     background-color: #f8f9fa;
}
 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
}
/* Navigation */
 .navbar {
     background-color: #2c3e50;
     padding: 1rem 0;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     position: sticky;
     top: 0;
     z-index: 100;
}
 .nav-menu {
     list-style: none;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 0.5rem;
}
 .nav-menu li a {
     font-size: 1rem;
     color: #ecf0f1;
     text-decoration: none;
     padding: 0.5rem .75rem;
     display: block;
     transition: all 0.3s ease;
     border-radius: 4px;
     font-weight: 500;
}
 .nav-menu li a:hover, .nav-menu li a.active {
     background-color: #4A90E2;
     color: #fff;
}
 .banner {
     width: 100%;
}
 .banner-image {
     width: 100%;
     height: auto;
     display: block;
}
/* Map Section */
 .map-section {
     padding: 3rem 0;
     background-color: #fff;
}
 .map-container {
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     max-width: 600px;
     max-height: 450px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .map-image {
     width: 100%;
     height: auto;
     display: block;
     object-fit: contain;
}
/* Content Section with Sidebar */
 .content-section {
     padding: 3rem 0;
     background-color: #f8f9fa;
}
 .content-grid {
     display: grid;
     grid-template-columns: 1fr 450px;
     gap: 2.5rem;
     margin-bottom: 1rem;
}
 .main-content h2 {
     color: #2c3e50;
     margin-bottom: 1.5rem;
     font-size: 2rem;
}
 .main-content p {
     margin-bottom: 1.5rem;
     text-align: justify;
     line-height: 1.8;
     color: #555;
}
/* Sidebar */
 .sidebar {
     display: flex;
     flex-direction: column;
     gap: 2rem;
}
 .chart-container, .highlights-box {
     background-color: #fff;
     padding: 1.5rem;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 .chart-container h3, .highlights-box h3 {
     color: #2c3e50;
     margin-bottom: 1rem;
     font-size: 1.3rem;
     border-bottom: 3px solid #4A90E2;
     padding-bottom: 0.5rem;
}
/* Pie Chart */
 .pie-chart-placeholder {
     margin: 1.5rem 0;
     display: flex;
     justify-content: center;
}
 .pie-chart {
     width: 200px;
     height: 200px;
}
 .chart-legend {
     margin-top: 1rem;
     display: flex;
     justify-content: space-around;
     gap: 0.5rem;
}
 .legend-item {
     display: flex;
     align-items: center;
     font-size: 0.9rem;
}
 .legend-color {
     width: 20px;
     height: 20px;
     border-radius: 3px;
     margin-right: 0.75rem;
     flex-shrink: 0;
}
/* Highlights */
 .highlights-box {
     background-color: #fff;
     padding: 1rem;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     margin-top: 0;
}
 .highlights-box h3 {
     color: #2c3e50;
     margin-bottom: 1.5rem;
     font-size: 1.5rem;
     text-align: center;
}
 .highlights-intro {
     color: #555;
     line-height: 1.8;
     margin-bottom: 1.5rem;
     text-align: left;
     font-size: 1.1rem;
     font-weight: 500;
}
 .highlights-list {
     list-style: none;
     padding-left: 0;
     display: flex;
     flex-direction: column;
     gap: 1rem;
}
 .highlights-list li {
     padding: 1.2rem 1.5rem;
     position: relative;
     color: #333;
     background-color: #fffbea;
     border-radius: 6px;
     border-left: 5px solid #ffd700;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
     line-height: 1.6;
}
/* Water Impact Page */
 .page-content {
     padding: 3rem 0;
     background-color: #fff;
}
 .page-title {
     color: #2c3e50;
     font-size: 2.5rem;
     margin-bottom: 2rem;
     text-align: center;
     border-bottom: 4px solid #4A90E2;
     padding-bottom: 1rem;
}
 .content-with-image {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 2.5rem;
     margin-bottom: 2rem;
     align-items: start;
}
 .text-content h3 {
     color: #2c3e50;
     margin-bottom: 1rem;
     font-size: 1.5rem;
}
 .text-content p {
     margin-bottom: 1.2rem;
     line-height: 1.8;
     color: #555;
     text-align: justify;
}
 .image-container img {
     width: 100%;
     border-radius: 8px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
 .page-content h3 {
     color: #2c3e50;
     margin-top: 2rem;
     margin-bottom: 1rem;
     font-size: 1.5rem;
}
 .page-content p {
     margin-bottom: 1.2rem;
     line-height: 1.8;
     color: #555;
     text-align: justify;
}
/* Water Impact Page - Floating Image Layout */
 .water-impact-content {
     position: relative;
}
 .floating-image {
     float: right;
     margin: 0 0 1.5rem 2rem;
     max-width: 45%;
}
 .floating-image img {
     width: 100%;
     border-radius: 8px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
 .water-impact-content::after {
     content: "";
     display: table;
     clear: both;
}
/* Funding Page */
 .funding-content {
     max-width: 900px;
     margin: 0 auto;
}
 .funding-content h2 {
     color: #333;
     font-size: 1.8rem;
     margin-bottom: 1.5rem;
     margin-top: 2rem;
     font-weight: 600;
}
 .funding-content p {
     color: #333;
     line-height: 1.8;
     margin-bottom: 1.2rem;
}
 .intro-text {
     font-size: 1.1rem;
     color: #555;
     margin-bottom: 2rem;
     text-align: center;
     font-style: italic;
}
 .alert-box {
     background-color: #ffebee;
     border-left: 5px solid #d32f2f;
     padding: 1.5rem;
     border-radius: 4px;
     margin-bottom: 2rem;
}
 .alert-box p {
     color: #c62828;
     margin-bottom: 0.5rem;
}
 .alert-box p:last-child {
     margin-bottom: 0;
}
 .alert-link {
     color: #1976d2;
     text-decoration: underline;
}
 .alert-link:hover {
     color: #0d47a1;
}
 .blue-link {
     color: #1976d2;
     text-decoration: underline;
}
 .blue-link:hover {
     color: #0d47a1;
}
 .attachments-table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 2rem;
     margin-bottom: 2rem;
     background-color: #fff;
     border: 1px solid #ddd;
}
 .attachments-table thead {
     background-color: #f5f5f5;
}
 .attachments-table th {
     padding: 0.75rem 1rem;
     text-align: left;
     font-weight: 600;
     color: #333;
     border-bottom: 2px solid #ddd;
}
 .attachments-table td {
     padding: 0.75rem 1rem;
     border-bottom: 1px solid #e0e0e0;
     color: #333;
}
 .attachments-table tbody tr:last-child td {
     border-bottom: none;
}
 .attachments-table tbody tr:hover {
     background-color: #f9f9f9;
}
 .content-placeholder {
     background-color: #f8f9fa;
     padding: 2rem;
     border-radius: 8px;
     margin-bottom: 1.5rem;
     border-left: 4px solid #4A90E2;
}
 .content-placeholder h3 {
     color: #2c3e50;
     margin-bottom: 1rem;
}
 .content-placeholder p {
     color: #555;
     line-height: 1.8;
     margin-bottom: 1rem;
}
 .content-placeholder p:last-child {
     margin-bottom: 0;
}
 .resource-links {
     list-style: none;
     padding-left: 0;
     margin-top: 1rem;
}
 .resource-links li {
     margin-bottom: 0.75rem;
}
 .resource-link {
     color: #4A90E2;
     text-decoration: none;
     font-weight: 500;
     display: inline-flex;
     align-items: center;
     transition: color 0.3s ease;
}
 .resource-link::before {
     content: "📄";
     margin-right: 0.5rem;
}
 .resource-link:hover {
     color: #2c3e50;
     text-decoration: underline;
}
/* Distribution Page - Table */
 .project-summary {
     margin-bottom: 3rem;
}
 .project-summary h3 {
     color: #2c3e50;
     margin-bottom: 1.5rem;
     font-size: 1.8rem;
}
 .table-container {
     overflow-x: auto;
     background-color: #fff;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 .scrollable-table {
     max-height: 400px;
     overflow-y: auto;
     position: relative;
}
 .scrollable-table::-webkit-scrollbar {
     width: 10px;
}
 .scrollable-table::-webkit-scrollbar-track {
     background: #f1f1f1;
     border-radius: 4px;
}
 .scrollable-table::-webkit-scrollbar-thumb {
     background: #888;
     border-radius: 4px;
}
 .scrollable-table::-webkit-scrollbar-thumb:hover {
     background: #555;
}
 .projects-table {
     width: 100%;
     border-collapse: collapse;
}
 .projects-table thead {
     background-color: #2c3e50;
     color: #fff;
     position: sticky;
     top: 0;
     z-index: 10;
}
 .projects-table th {
     padding: 1rem;
     text-align: left;
     font-weight: 600;
}
 .projects-table td {
     padding: 1rem;
     border-bottom: 1px solid #e0e0e0;
}
 .projects-table tbody tr:hover {
     background-color: #f5f5f5;
}
 .projects-table tbody tr:last-child td {
     border-bottom: none;
}
/* Charts Section */
 .charts-section {
     margin-bottom: 3rem;
}
 .charts-section h3 {
     color: #2c3e50;
     margin-bottom: 1.5rem;
     font-size: 1.8rem;
}
 .charts-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 2rem;
}
 .chart-box {
     background-color: #fff;
     padding: 2rem;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 .chart-box h4 {
     color: #2c3e50;
     margin-bottom: 1.5rem;
     text-align: center;
     font-size: 1.3rem;
}
 .chart-image-container {
     flex:1;
     display: flex;
     justify-content: center;
     align-items: center;
     width:100%;
}
 .chart-image {
     width: 100% !important;
     max-width: 100% !important;
     height: auto;
     border-radius: 4px;
}
/* Make the third chart bigger - simple approach */
 .chart-box:last-child .chart-image {
     max-width: 650px !important;
}
/* Bar Chart */
 .bar-chart {
     height: 300px;
     padding: 1rem;
}
 .bar-container {
     display: flex;
     justify-content: space-around;
     align-items: flex-end;
     height: 100%;
     gap: 1rem;
}
 .bar {
     flex: 1;
     position: relative;
     border-radius: 4px 4px 0 0;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     align-items: center;
     padding: 0.5rem;
     color: #fff;
     font-weight: bold;
     transition: opacity 0.3s ease;
}
 .bar:hover {
     opacity: 0.8;
}
 .bar-label {
     font-size: 0.8rem;
     margin-bottom: 0.5rem;
}
 .bar-value {
     font-size: 0.9rem;
}
/* Region Distribution */
 .region-list {
     padding: 1rem 0;
}
 .region-item {
     display: grid;
     grid-template-columns: 120px 1fr 50px;
     align-items: center;
     gap: 1rem;
     margin-bottom: 1.5rem;
}
 .region-name {
     font-weight: 600;
     color: #2c3e50;
}
 .progress-bar {
     height: 25px;
     background-color: #e0e0e0;
     border-radius: 12px;
     overflow: hidden;
}
 .progress-fill {
     height: 100%;
     border-radius: 12px;
     transition: width 0.5s ease;
}
 .region-percent {
     text-align: right;
     font-weight: bold;
     color: #555;
}
/* Project Gallery */
 .project-gallery h3 {
     color: #2c3e50;
     margin-bottom: 2rem;
     font-size: 1.8rem;
}
 .gallery-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 2rem;
}
 .gallery-grid-compact {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
     gap: 1.5rem;
}
 .project-card {
     background: #90caf9;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 .project-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
 .project-card img {
     width: 100%;
     height: 250px;
     object-fit: cover;
}
 .project-info {
     padding: 1.5rem;
}
 .project-info h4 {
     color: #2c3e50;
     margin-bottom: 0.75rem;
     font-size: 1.2rem;
}
 .project-info p {
     color: #555;
     line-height: 1.6;
     text-align: justify;
}
 .project-card-compact {
     background-color: #fff;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     display: flex;
     flex-direction: row;
     height: 140px;
}
 .project-card-compact:hover {
     transform: translateX(5px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
 .project-card-compact img {
     width: 180px;
     height: 140px;
     object-fit: cover;
     flex-shrink: 0;
}
 .project-info-compact {
     padding: 1rem 1.5rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
}
 .project-info-compact h4 {
     color: #2c3e50;
     margin-bottom: 0.5rem;
     font-size: 1.1rem;
     font-weight: 600;
}
 .project-info-compact p {
     color: #666;
     line-height: 1.5;
     font-size: 0.95rem;
}
/* Team Page Styles */
 .team-section {
     margin-bottom: 3rem;
}
 .team-section-title {
     font-size: 1.4rem;
     font-weight: 600;
     color: #2c5aa0;
     margin-bottom: 2rem;
     text-align: center;
     border-bottom: 2px solid #e0e0e0;
     padding-bottom: 0.5rem;
}
 .team-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 2rem;
     margin-top: 2rem;
}
 .team-card {
     background: white;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     padding: 1.5rem;
     text-align: center;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 .team-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.team-role {
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px; /* Reduce letter spacing */
    margin: 0 0 1rem 0;
    line-height: 1.2;
    text-align: center;
    max-width: 100%;
}
 .team-photo {
     margin: 1rem 0;
}
 .team-photo img {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     object-fit: cover;
     border: 3px solid #f0f0f0;
}
 .team-name {
     font-size: 1.1rem;
     font-weight: 600;
     margin: 1rem 0 0 0;
     color: #2c5aa0;
}
/* Responsive adjustments */
 @media (max-width: 768px) {
     .team-grid {
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 1.5rem;
    }
     .team-photo img {
         width: 100px;
         height: 100px;
    }
     .team-section-title {
         font-size: 1.2rem;
    }
}
/* Metrics Section Styling */
 .metrics-section {
     margin-bottom: 3rem;
}
 .metrics-graphic {
     text-align: center;
     margin: 2rem 0;
}
 .metrics-image-title {
     font-size: 1.3rem;
     font-weight: 600;
     color: #2c5aa0;
     margin-bottom: 1rem;
     text-align: center;
}
 .metrics-image {
     max-width: 70%;
     height: auto;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Responsive design */
 @media (max-width: 768px) {
     .metrics-image-title {
         font-size: 1.1rem;
    }
}
/* Simple table styling */
 table {
     width: 100%;
     border-collapse: collapse;
     margin: 1rem 0;
}
 table td {
     padding: 0.75rem;
     border: 1px solid #ddd;
}
 table tr:nth-child(even) {
     background: #f9f9f9;
}
/* Footer */
 .footer {
     background-color: #2c3e50;
     color: #ecf0f1;
     padding: 2rem 0;
     text-align: center;
     margin-top: 3rem;
}
/* Responsive Design */
 @media (max-width: 968px) {
     .content-grid {
         grid-template-columns: 1fr;
    }
     .sidebar {
         order: -1;
    }
     .content-with-image {
         grid-template-columns: 1fr;
    }
     .charts-grid {
         grid-template-columns: 1fr !important;
    }
     .banner-title {
         font-size: 2rem;
    }
     .gallery-grid {
         grid-template-columns: 1fr;
    }
     .gallery-grid-compact {
         grid-template-columns: 1fr;
    }
}
 @media (max-width: 768px) {
     .nav-menu {
         flex-direction: column;
         align-items: stretch;
    }
     .nav-menu li a {
         text-align: center;
    }
     .banner-title {
         font-size: 1.5rem;
    }
     .banner {
         height: 300px;
    }
     .banner-small {
         height: 200px;
    }
     .page-title {
         font-size: 2rem;
    }
     .floating-image {
         float: none;
         max-width: 100%;
         margin: 0 0 1.5rem 0;
    }
     .region-item {
         grid-template-columns: 100px 1fr 45px;
         gap: 0.5rem;
    }
     .bar-container {
         gap: 0.5rem;
    }
     .bar-label {
         font-size: 0.7rem;
    }
     .bar-value {
         font-size: 0.8rem;
    }
     .gallery-grid-compact {
         grid-template-columns: 1fr;
    }
     .project-card-compact {
         flex-direction: column;
         height: auto;
    }
     .project-card-compact img {
         width: 100%;
         height: 200px;
    }
}
 @media (max-width: 480px) {
     .container {
         padding: 0 15px;
    }
     .banner-title {
         font-size: 1.2rem;
    }
     .projects-table {
         font-size: 0.85rem;
    }
     .projects-table th, .projects-table td {
         padding: 0.6rem;
    }
}