.elementor-955 .elementor-element.elementor-element-76d9292{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-955 .elementor-element.elementor-element-9de5d0a{--display:flex;}.elementor-955 .elementor-element.elementor-element-0543db7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-955 .elementor-element.elementor-element-705d9cb{--display:flex;}/* Start custom CSS for html, class: .elementor-element-d4bfb23 *//* --- Base & General Styles --- */
.mauritania-energy-investment {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  line-height: 1.6;
  margin: 0 auto;
  padding: 10px; /* Base padding */
  background-color: #f4f6f8; /* Slightly different bg */
  overflow: hidden;
}

.mauritania-energy-investment img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  object-fit: cover;
  margin-bottom: 1em; /* Space below images */
}

/* --- Typography --- */
.mauritania-energy-investment h1,
.mauritania-energy-investment h2,
.mauritania-energy-investment h3,
.mauritania-energy-investment h4 {
  color: #003366; /* Darker blue */
  margin-bottom: 0.7em;
  line-height: 1.3;
  font-weight: 700; /* Bolder headings */
}

.mauritania-energy-investment h1 {
  font-size: clamp(1.8em, 5vw, 2.6em);
  text-align: center;
  margin-bottom: 0.4em;
  padding: 0 10px;
}

.mauritania-energy-investment .mei-subtitle {
  text-align: center;
  font-size: clamp(1em, 3vw, 1.25em);
  color: #4a5568; /* Subdued color */
  margin-bottom: 3em;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;
}

.mauritania-energy-investment h2 {
  font-size: clamp(1.6em, 4.5vw, 2.3em);
  border-bottom: 3px solid #0055A4;
  padding-bottom: 0.5em;
  margin-bottom: 1.2em;
}

.mauritania-energy-investment h3 {
  font-size: clamp(1.3em, 4vw, 1.8em);
  color: #0055A4;
  margin-top: 0.5em; /* Adjust top margin */
}

.mauritania-energy-investment h4 {
  font-size: clamp(1.1em, 3.5vw, 1.35em);
  color: #1a202c; /* Darker text */
  font-weight: 600;
  margin-bottom: 0.6em;
}

.mauritania-energy-investment p,
.mauritania-energy-investment ul {
  margin-bottom: 1.3em;
  font-size: clamp(0.95em, 2.5vw, 1.05em);
  color: #2d3748; /* Slightly lighter body text */
}
.mauritania-energy-investment ul {
  list-style: disc;
  margin-left: 25px;
}

.mauritania-energy-investment strong {
  color: #C09511;
}

.mauritania-energy-investment .stat-highlight {
  font-weight: 700;
  color: #0069d9;
  font-size: 1.15em;
}

/* --- Section Styling (Vertical Blocks) --- */
.mei-section {
  margin-bottom: 4em; /* Vertical separation */
  padding: clamp(25px, 5vw, 45px); /* Generous padding */
  background-color: #ffffff;
  border-radius: 12px; /* Softer radius */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* --- Grid Layout (Used for Images & Project Cards) --- */
.mei-grid {
  display: grid;
  gap: clamp(15px, 4vw, 30px); /* Responsive gap */
  margin-top: 1.5em; /* Space above grids */
  margin-bottom: 1.5em; /* Space below grids */
}

/* Default Grid Columns (Mobile First) */
.project-grid, /* For project cards */
.section-images, /* For image groups within sections */
.challenge-images /* For images in challenge blocks */
{
  grid-template-columns: 1fr; /* Start with 1 column */
}

/* --- Challenge Section Specific Styling --- */
.challenge-block {
  margin-bottom: 3em; /* Space between challenge blocks */
  padding-bottom: 2em;
  border-bottom: 1px solid #e2e8f0; /* Separator line */
}
.challenge-block:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.challenge-images img {
  margin-bottom: 10px; /* Tighter spacing between image pairs */
}
.challenge-text h3 {
  margin-top: 1em; /* Space above challenge title */
}

/* --- Card Styling (For Projects) --- */
.mei-card {
  background-color: #f8fafc; /* Slightly off-white cards */
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: clamp(15px, 3vw, 25px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mei-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 64, 128, 0.1);
}
.mei-card h4 { margin-top: 1em; }
.mei-card p { flex-grow: 1; }
.mei-card .project-image,
.mei-card .card-image-pair img {
    aspect-ratio: 16 / 10;
    margin-bottom: 15px;
}
.mei-card .card-image-pair {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr; /* Stack pair images mobile */
}

/* --- Image Group Styling --- */
.section-images {
    margin-top: 2em; /* Space above image groups */
    margin-bottom: 2em; /* Space below image groups */
}
.section-images img {
    aspect-ratio: 16 / 9; /* Wider aspect ratio for large images */
}
.nouakchott-text .industrial-zone-img {
    margin: 2em auto 1em auto; /* Center and add margin */
    width: 100%;
    max-width: 650px; /* Allow industrial image to be large */
    display: block;
    aspect-ratio: 16 / 9;
}

/* --- Call to Action --- */
.call-to-action {
    margin-top: 2.5em;
    padding: 25px 30px;
    background-color: #e6f4ff;
    border-left: 6px solid #0055A4;
    border-radius: 6px;
    text-align: center;
}
.call-to-action p {
    margin: 0;
    font-size: clamp(1.1em, 3vw, 1.25em);
    font-weight: 500;
    color: #003366;
}
.mei-button {
    display: inline-block;
    background-color: #0055A4;
    color: #fff;
    padding: 14px 35px; /* Larger button */
    text-decoration: none;
    border-radius: 6px;
    margin-top: 18px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: 600;
    font-size: 1.1em;
    box-shadow: 0 2px 5px rgba(0, 85, 164, 0.3);
}
.mei-button:hover {
    background-color: #004080;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 85, 164, 0.4);
}


/* --- Responsive Adjustments --- */

/* Medium Screens (Tablets ~600px and up) */
@media (min-width: 600px) {
    .mauritania-energy-investment { padding: 20px; }

    /* Allow 2 columns for image groups and project cards */
    .section-images,
    .challenge-images,
    .project-grid,
    .mei-card .card-image-pair {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Handle single image challenge block */
     .challenge-block .single-image {
        grid-template-columns: minmax(0, 1.5fr); /* Allow single image to be wide but not full 2 columns */
        justify-content: center; /* Center it */
     }

     .project-grid {
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     }
      .large-project-grid {
         grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     }

     .call-to-action { text-align: left; }
}

/* Large Screens (Desktops ~992px and up) */
@media (min-width: 992px) {
    .mauritania-energy-investment { padding: 30px 40px; }

     /* Wider base for project cards */
     .project-grid {
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     }
      .large-project-grid {
         grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* Even wider base for large projects */
     }

    /* Allow 3 columns for SOMELEC/Nouakchott images */
    .somelec-images, .nouakchott-images {
        grid-template-columns: repeat(3, 1fr);
    }
     /* Keep investor images paired */
     .investor-images {
        grid-template-columns: repeat(2, 1fr);
        max-width: 900px; /* Limit width of investor image pair */
        margin-left: auto;
        margin-right: auto;
     }

    /* Allow large project cards to span */
     .mei-card.large-card {
        grid-column: span 2;
    }
    /* Make sure large card images still pair correctly if grid has >2 cols */
     .large-project-grid .mei-card.large-card .card-image-pair {
        grid-template-columns: 1fr 1fr;
     }

    /* Optional: Center the challenge blocks' content visually */
    /* .challenge-block { max-width: 1000px; margin-left: auto; margin-right: auto; } */

}

/* Extra Large Screens (Optional Refinement ~1200px and up) */
@media (min-width: 1200px) {
    .mauritania-energy-investment { max-width: 1400px; margin: 0 auto; padding: 40px; } /* Center article */

     .project-grid {
         grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     }
     .large-project-grid {
         grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
     }

     /* Maybe allow 3 columns for strategy images */
     /* .strategy-images { grid-template-columns: repeat(3, 1fr); } */
}/* End custom CSS */