/* body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
} */
/* * {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
} */ 
/* .page {
  position:relative;
  min-height: 300mm;
  padding: 0;
  margin: 0mm auto;
  border-radius: 0px;
  background: transparent;
} */
/* 
.pagetwo {
  position: relative;
  min-height: 240mm;
  padding: 0mm;
  margin: 10mm auto;
  border: 1px #d3d3d3 solid;
  border-radius: 5px;
  background: white;
} */

/* .sub_page {
  padding: 1cm;
  min-height: 200mm;
} */
/* 
@media print {
  html,
  body {
      height: 100%;
      width: 100%;
  }
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
  .no-print,
  .no-print * {
    display: none !important;
  }
}

p {
  margin-bottom: 1rem;
}

.iframe {
  border: none;
} */


h6.padded,
p.padded {
  padding: 2px 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.blue-text {
  color: #8496b8;
}

table {
  width: 100%;
}

td {
  padding: 2px 0px;
}

tr:nth-child(even) {
  background-color: #f0f0f0;
}
tr:nth-child(odd) {
  background-color: #fafafa;
}

.typing-title {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: normal;
  border-right: 2px solid #2db29b;
  padding-right: 4px;
  clip-path: inset(0 100% 0 0);
  animation: typing-clip 5.4s steps(40, end) 0.2s infinite both, blink-caret 0.8s step-end infinite;
}

@keyframes typing-clip {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  60% {
    clip-path: inset(0 0 0 0);
  }
  96% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 100% 0 0);
  }
}

@keyframes blink-caret {
  50% {
    border-color: transparent;
  }
}

table.reversed tr:nth-child(odd) {
  background-color: #f0f0f0;
}
table.reversed tr:nth-child(even) {
  background-color: #f0f0f0;
}

table {
  font-size: 1rem;
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  border: 0px solid #ddd;
  padding: 8px;
}

table.tiny-header tr:first-child {
  font-size: 8px;
}

.columns {
  margin-left: 0 !important;
}

.row > .columns:not(:first-child) {
  padding-left: 20px;
}

.rowdd{
  padding-left: 20px;
  width: 150%;

}


h1,
h5,
h6 {
  margin: 0;
}
h5 {
  font-size: 2.6rem;
}
h6 {
  font-size: 1.425rem;
}

.risk-reward {
  height: 150px;
  width: auto;
}

li {
  color: #7a7a7a;
  list-style: square;
  padding-left: 0;
}

.product {
  position: relative;
  height: 15%;
  padding: 30px;
  margin-bottom: 25px;
  border-radius: 1px;
  background: #14ac9c;
  color: #ffffff;
}

.product_A {
  position: relative;
  height: 15%;
  padding: 30px;
  margin-bottom: 25px;
  border-radius: 1px;
  background: #D8A488;
  color: #ffffff;
}

.product_B {
  position: relative;
  height: 15%;
  padding: 30px;
  margin-bottom: 25px;
  border-radius: 1px;
  background: #86BBD8;
  color: #ffffff;
}
.full-view-link {
  background-color: rgb(20, 172, 156);
  color: white !important;
  font-size: medium;
  padding: 15px 15px;
  float: left;
  margin-left: 75%;
  width: 35%;
  text-align: center;
  transition-duration: 1s;
}
.all-tabs {
  text-align: center;
  font-size: 22px;
  margin-bottom: 20px;
  width: 100%;
}
.tab{
  border-style: solid;
  border-color: #2db29b;
  border-bottom-style: none;
  border-width: 2px;
  height: 25px;
  border-top-style: none;
  border-right-style: none;
  padding: 5px 10px;
  color: #ddd;
  margin-bottom: 15px;
  /* width: 100%; */
}
.main-title {
  position: relative;
  color: #3a3a3a;
  font-size: 40px !important;
  width: 80%;
  border-left: 20px solid #2db29b;
  background: #ffffff;
  padding-left: 30px;
}

.subtitle {
  position: relative;
  color: #3a3a3a;
  left: 0;
  height: 20%;
  margin: 0mm;
  border-left: 5px solid #2db29b;
  background: #f9f9f9;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 30px;
  padding-right: 60px;
}

/* .logo {
  height: 85px;
  width: auto;
  position: relative;
  top: 90px;
  left: -130px;
} */

.logo {
  height: 85px;
  width: auto;
  position: relative;
  top: 30px;
  left: 15px;
  margin-bottom: 80px;
}

.logo1 {
  height: 150px;
  top: -10px;
  position: relative;
  width: auto;
  margin: 40px 0 0 10px ;
}

.all-tabs .tab{
  border: none;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  font-size: 30px;
  width: auto;
  /* margin: 30px 20px 20px 30px ; */

}

.all-tabs .tab:hover{
  transform: scale(1,1);
}

.all-tabs .tab:after{
  content: "";
  transition:all .400s ease-in-out;
}

.all-tabs .tab:hover:after{
  transform: scale(1,1);
  display: block;
  font-weight:bold;
  background:#ffffff;
  width: auto;
  position: relative;
  height: 2px;
  left: 0;
  transition:all .400s ease-in-out;

}

/* Elegant main menu buttons styling for GESI Index, AI-driven Simulation, Evidence Library */
.main-menu-button {
  cursor: pointer;
  position: relative;
}

.main-menu-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(45, 178, 155, 0.35) !important;
}

/* Active button hover effect */
.main-menu-button[style*="backgroundColor: rgb(45, 178, 155)"]:hover,
.main-menu-button[style*="background-color: #2db29b"]:hover {
  background-color: #26a68a !important;
  box-shadow: 0 4px 14px rgba(45, 178, 155, 0.4) !important;
}

/* Inactive button hover effect */
.main-menu-button[style*="backgroundColor: rgb(255, 255, 255)"]:hover,
.main-menu-button[style*="background-color: #ffffff"]:hover,
.main-menu-button[style*="backgroundColor: rgba(255, 255, 255"]:hover {
  background-color: #f0fdfa !important;
  border-color: rgba(45, 178, 155, 0.6) !important;
  color: #2db29b !important;
  box-shadow: 0 3px 10px rgba(45, 178, 155, 0.25) !important;
}

.greyline {
  width: 90%;
  border-bottom: 1px solid lightgrey;
}


.rowrow {
  margin: auto;
  text-align: center;
  width: 97%;
}

.rowrow2 {
  margin: auto;
  width: 97%;
}

.tablast {
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.2);
  border-bottom-style: none;
  border-top-style: none;
  color: rgb(255, 255, 255);
  padding: 6px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

#learn-more-button {
  float: right;
  padding-left: 15px;
  padding-right: 15px;
  text-transform: none;
  margin: 25px 25px;
}

/* for screens smaller than 768px */
/* @media only screen and (max-width: 550px) {
  .tab {
    display: block;
  }
  .tablast {
    display: block;
    border-right-style: none;
  }
  .page {
    width: auto;
  }
  .sub_page {
    width: auto;
  }
  .risk-reward {
    height: 120px;
    width: auto;
  }
  .logo {
    height: 20px;
    width: auto;
  }
  #learn-more-button {
    line-height: 0;
    font-size: 10px;
    height: 30px;
    padding: 0 10px;
  }
  h5 {
    font-size: 1.5rem;
  }
  .main-title {
    width: 55%;
    padding-left: 15px;
    border-left: 15px solid #2db29b;
  }
  .five.columns {
    width: 45%;
  }
  .fees {
    width: auto;
  }
  .full-view-link {
    font-size: small;
    padding: 10px 10px;
    width: 40%;
    margin-left: 60%;
  }
  .row > .columns:not(:first-child) {
    padding: 0 0;
  }
  .svg-container {
    width: 255px !important;
  }
  .main-svg {
    width: 255px !important;
  }
  .three.columns {
    text-align: left;
    padding: 0 10px;
    margin-bottom: 5px;
  }
  .nine.columns {
    padding: 0 20px !important;
  }
} */
/* @media only screen and (max-width: 400px) {
  .full-view-link {
    width: 45%;
    margin-left: 55%;
  }
}

@media only screen and (max-width: 350px) {
  .full-view-link {
    width: 50%;
    margin-left: 50%;
  }
}
 */

.pretty_container {
  border-radius: 5px;
  background-color: #f9f9f9;
  margin: 10px;
  padding: 15px;
  position: relative;
  box-shadow: 2px 2px 2px lightgrey;
  border: 2px solid #e0e0e0;
  overflow: visible;
}

/* Corner decorations removed */

.bare_container {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.dcc_control {
  margin: 0;
  padding: 5px;
  width: calc(100%-40px);
}

.control_label {
  margin: 0;
  padding: 10px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  width: calc(100%-40px);
}

.rc-slider {
  margin-left: 0px;
  padding-left: 0px;
}

.flex-display {
  display: flex;
}

.container-display {
  display: flex;
}

.mini_container {
  border-radius: 5px;
  background-color: #f9f9f9;
  margin: 10px;
  padding: 15px;
  position: relative;
  box-shadow: 2px 2px 2px lightgrey;
  color: #3a3a3a;
  width: auto;
  position: relative;
}


.mainheader {
  position:relative;
  z-index: 5;
  border-bottom: 4px solid #2db29b;
  min-height: 50mm;
  /* Raised from 365px to 385px so the enlarged Rwanda logo doesn't push the
     menu buttons (GESI Index / AI-driven Simulation / Evidence Library) past
     the bottom edge of the header. */
  height: 385px;
  width: auto;
  overflow: hidden;
}

.mainheader::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20%;
  right: -20%;
  /* A 1920px web copy of prof_image/RWA4.jpg (8192px, 6 MB) - this is on
     every page. It is also the first frame of the Home slideshow below. */
  background-image: url("./hero/rwa_kigali.jpg");
  background-size: cover;
  background-position: center;
  /* animation temporarily disabled — re-enable later */
  /* animation: header-pan 18s ease-in-out infinite alternate;
  will-change: transform; */
  z-index: -1;
}

/* ---- Home banner slides -------------------------------------------------
   Five photographs of the country crossfading in turn, each drifting slowly
   in (a 6% zoom over its time on screen). utils.hero_slides() draws them and
   assets/hero_slides.js runs them; SHOW_MS and FADE_MS there must agree with
   the animation and transition here. Each slide's background-position is set
   inline from HERO_SLIDES, because the strip shows one band of the frame and
   the band worth showing differs from photograph to photograph.

   The slides sit over the still banner (.mainheader::before, the same first
   photograph, so nothing jumps while they load) and under the logos, nav and
   title, which are lifted over them; the caption bar is over everything.
   A light scrim keeps the white title readable over pale sky and water. */
.hero-slides {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.hero-slides::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(8, 38, 45, 0.30) 0%,
    rgba(8, 38, 45, 0.22) 50%,
    rgba(8, 38, 45, 0.38) 100%);
}
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  will-change: opacity, transform;
}
.hero-slide.is-active { opacity: 1; animation: hero-drift 9s ease-out forwards; }
/* The outgoing frame keeps the zoom it reached while it fades out. */
.hero-slide.is-leaving { opacity: 0; transform: scale(1.06); }
@keyframes hero-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.mainheader--home > :not(.hero-slides):not(.hero-slidebar) { position: relative; z-index: 1; }

/* ---- Home: a full-screen banner ------------------------------------------
   Home opens on the photographs rather than a strip of them, as the PNG and
   UAE dashboards do: the same height (clamp(560px, 84vh, 760px)), the logos
   and nav at the top, the title and the three section buttons centred in the
   space left, and a cue to scroll at the foot. Every other page keeps the
   385px strip above.

   The header's own layout is inline styles in utils.get_header, shared with
   every page, so this re-flows it for Home only: the header row becomes a
   column whose title block and buttons take auto margins, which centres them
   in whatever height the banner has. The title's size is inline too, hence
   !important on the two that change. */
.mainheader.mainheader--home {
  /* Edge to edge: index.py sets a 0.15cm / 0.25cm margin on the page root,
     which leaves a grey frame round the photograph. These cancel it for the
     banner only, so the rest of the page keeps its gutter. */
  margin: -0.15cm -0.25cm 0;
  height: auto;
  min-height: clamp(560px, 84vh, 760px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 22px;
}
.mainheader--home > .header-top {
  align-self: stretch;
  flex: 1 1 auto;
  display: flex;
}
.mainheader--home .header-row {
  float: none;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.mainheader--home .header-row > .mainnav { margin-top: auto !important; }
.mainheader--home .header-row > .mainnav > br { display: none; }
.mainheader--home .header-row > :last-child { margin-bottom: auto !important; }
.mainheader--home .mainnav h2 {
  font-size: clamp(28px, 3.6vw, 46px) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}
.mainheader--home .mainnav h1 {
  font-size: clamp(18px, 1.9vw, 26px) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
/* The one-sentence summary under the title, Home only. */
.mainheader--home .hero-subtitle {
  max-width: 880px;
  margin: 14px auto 0;
  padding: 0 20px;
  color: #f3f3f3;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}
@media only screen and (max-width: 767px) {
  .mainheader--home .hero-subtitle { font-size: 15px; margin-top: 10px; }
}
/* A full screen of sky and water needs a firmer scrim than the strip did,
   heaviest behind the nav at the top and the cue at the foot. */
.mainheader--home .hero-slides::after {
  background: linear-gradient(180deg,
    rgba(8, 38, 45, 0.50) 0%,
    rgba(8, 38, 45, 0.34) 30%,
    rgba(8, 38, 45, 0.30) 55%,
    rgba(8, 38, 45, 0.50) 100%);
}

/* The cue at the foot of the Home banner. */
.hero-scroll {
  position: relative; z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  opacity: 0.95;
}
.hero-scroll:hover,
.hero-scroll:focus { color: #ffffff; opacity: 1; text-decoration: none; }
.hero-scroll-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  transition: background .18s ease;
  animation: hero-bob 2.2s ease-in-out infinite;
}
.hero-scroll:hover .hero-scroll-arrow,
.hero-scroll:focus-visible .hero-scroll-arrow { background: rgba(255, 255, 255, 0.20); }
.hero-scroll:focus-visible { outline: 3px solid #bdeae3; outline-offset: 4px; border-radius: 8px; }
@keyframes hero-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-arrow { animation: none; }
}
/* A phone banner is taller than it is wide; the cue keeps its arrow and its
   label is kept for screen readers only, so it clears the dots. */
@media only screen and (max-width: 900px) {
  .mainheader.mainheader--home { min-height: clamp(520px, 80vh, 680px); }
}
@media only screen and (max-width: 700px) {
  .hero-scroll > span:first-child {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* Where the photograph on screen was taken, then a dot per frame and the
   pause button, in the bottom corner clear of the section buttons. */
.hero-slidebar {
  position: absolute; right: 20px; bottom: 16px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
}
.hero-cap {
  display: inline-flex; flex-direction: column; min-width: 0;
  max-width: 300px; padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 10px;
  background: rgba(8, 24, 30, 0.55); color: #ffffff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  line-height: 1.25;
  transition: opacity 0.25s ease;
}
.hero-cap.is-changing { opacity: 0; }
.hero-cap-where { font-size: 12px; font-weight: 700; }
.hero-cap-title { font-size: 11px; font-weight: 400; color: #d8e6e9; }
.hero-dots { display: flex; gap: 7px; }
.hero-dot,
.hero-dot:focus {
  width: 10px; height: 10px; padding: 0; min-width: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.85); border-radius: 50%;
  background: transparent;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-dot.hero-dot:hover,
.hero-dot.hero-dot:focus-visible { background: rgba(255, 255, 255, 0.5); border-color: #ffffff; }
.hero-dot.is-current { background: #ffffff; transform: scale(1.15); }
.hero-dot.hero-dot:focus-visible { outline: 2px solid #bdeae3; outline-offset: 3px; }
.hero-pause,
.hero-pause:focus {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.7); border-radius: 50%;
  background: rgba(8, 24, 30, 0.35);
}
.hero-pause.hero-pause:hover,
.hero-pause.hero-pause:focus-visible { background: rgba(8, 24, 30, 0.7); border-color: #ffffff; }
.hero-pause.hero-pause:focus-visible { outline: 2px solid #bdeae3; outline-offset: 3px; }
/* Two bars while playing; a triangle once paused. */
.hero-pause-glyph {
  display: block; width: 10px; height: 12px;
  border-left: 3px solid #ffffff; border-right: 3px solid #ffffff;
}
.hero-pause.is-paused .hero-pause-glyph {
  width: 0; height: 0; margin-left: 3px;
  border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide.is-active { animation: none; }
  .hero-slide.is-leaving { transform: none; }
}
/* Below 1100px the caption would reach the scroll cue in the middle of the
   banner's foot, so it goes and the dots and the pause button stay. */
@media only screen and (max-width: 1100px) {
  .hero-cap { display: none; }
}
/* On phones the app's mobile stylesheet (app.index_string) gives every button
   a 44px minimum, so five dots became a row of squares across the scroll cue.
   They go below that width; the slideshow still advances on its own, and the
   pause button - fine at 44px - stays in the corner. */
@media only screen and (max-width: 767px) {
  .hero-dots { display: none; }
  .hero-slidebar { right: 12px; bottom: 14px; }
}

@keyframes header-pan {
  0% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(10%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mainheader {
    animation: none;
  }
  .mainheader::before {
    animation: none;
    transform: none;
  }
}

.mainheader .mainnav li{
  list-style: none;
}
.mainheader .mainnav li a{
  text-decoration: none;
}


.mainheader .mainnav li a:link{
  font-size: 18px;
  font-weight:500;
  text-align: center;
  text-decoration: none;
  color:#2db29b;
  margin-bottom: 30px;

}

/* visited link */
.mainheader .mainnav li a:visited {
  color: white;
  text-decoration: none;
}


.mainheader .mainnav  li a:hover:after{
  transform: scale(1,1);
}

.mainheader .mainnav li  a:hover{
  color:#2db29b;
  transition:all .400s ease-in-out;
}


.mainheader .mainnav  li a:after {
  /* opacity: 0.6; */
  content: "";
  /* display: block; */
  background:#2db29b;
  transform: scale(0,1);
  width: 100%;
  height: 2px;
  transition:all .400s ease-in-out;
}


.mainheader .mainnav li span{
  height: 27px;
  width: 1px;
  background-color: white;
  display: block;
  margin: 0 10px;
}

  
.mainheader .mainnav{
 background:transparent;
 margin:20px 0 0 10px;
}

/* Search component in top right corner */
.search-component {
    position: absolute !important;
    top: 10px !important;
    right: 20px !important;
    z-index: 1000 !important;
}

.search-component input {
    width: 200px !important;
    padding: 6px 10px !important;
    border: 2px solid #2db29b !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    outline: none !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #333 !important;
}

.search-component input:focus {
    border-color: #1e8b73 !important;
    box-shadow: 0 0 0 3px rgba(45, 178, 155, 0.1) !important;
}

.search-results {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background-color: white !important;
    border: 1px solid #ddd !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    z-index: 1000 !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    width: 300px !important;
}

@media only screen and (max-width: 962px){
  /* Reduce logo sizes on mobile */
  .partner-logos {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 3px !important;
    margin-bottom: 8px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }
  
  .partner-logo {
    max-height: 20px !important;
    max-width: 50px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }
  
  .mainheader .partner-logos {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 3px !important;
    margin-bottom: 8px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }
  
  .mainheader .partner-logo {
    max-height: 18px !important;
    max-width: 45px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }
  
  /* Government of Rwanda logo - larger size */
  .mainheader .rwanda-logo {
    max-height: 50px !important;
    max-width: 130px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }
  
  /* Make search component much smaller on mobile to not block logos */
  .search-component {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    z-index: 1000 !important;
  }
  
  .search-component input {
    width: 80px !important;
    padding: 2px 4px 2px 25px !important;
    border: 1px solid #2db29b !important;
    border-radius: 10px !important;
    font-size: 8px !important;
    outline: none !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #333 !important;
  }
  
  .search-component i {
    position: absolute !important;
    left: 6px !important;
    top: 6px !important;
    color: #333 !important;
    font-size: 12px !important;
    pointer-events: none !important;
    font-weight: normal !important;
  }
  
  .search-results {
    width: 200px !important;
    max-height: 150px !important;
    font-size: 10px !important;
  }
  
  /* Mobile navigation - compact and stack vertically */
  .mainnav ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .mainnav ul a, .mainnav ul li {
    display: block !important;
    color: white !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .mainnav ul li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
  }
  
  .mainnav ul li a {
    display: block !important;
    width: 100% !important;
    padding: 8px 10px !important;
    margin: 1px 0 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    color: white !important;
    text-align: center !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
    border-bottom: none !important;
    padding-bottom: 8px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .mainnav ul li a:hover {
    background-color: rgba(45, 178, 155, 0.2) !important;
    transform: translateY(-1px) !important;
  }
  
  .mainnav ul li span {
    display: none !important;
  }
  
  /* Override any inline styles */
  .mainnav ul[style] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* Force mobile navigation layout */
  .mainheader .mainnav ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .mainheader .mainnav ul li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
  }
  
  .mainheader .mainnav ul li a {
    display: block !important;
    width: 100% !important;
    padding: 8px 10px !important;
    margin: 1px 0 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    color: white !important;
    text-align: center !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
    border-bottom: none !important;
    padding-bottom: 8px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .mainheader .mainnav ul li span {
    display: none !important;
  }
}

@media only screen and (max-width:560px){
  /* Further reduce logo sizes on smaller mobile screens */
  .partner-logos {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 2px !important;
    margin-bottom: 5px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }
  
  .partner-logo {
    max-height: 15px !important;
    max-width: 40px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }
  
  .mainheader .partner-logos {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 2px !important;
    margin-bottom: 5px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }
  
  .mainheader .partner-logo {
    max-height: 13px !important;
    max-width: 35px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }
  
  /* Government of Rwanda logo - larger size for mobile */
  .mainheader .rwanda-logo {
    max-height: 45px !important;
    max-width: 115px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }
  
  /* Make search component even smaller on smallest mobile screens */
  .search-component {
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    z-index: 1000 !important;
  }
  
  .search-component input {
    width: 60px !important;
    padding: 1px 2px 1px 18px !important;
    border: 1px solid #2db29b !important;
    border-radius: 8px !important;
    font-size: 7px !important;
    outline: none !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #333 !important;
  }
  
  .search-component i {
    position: absolute !important;
    left: 4px !important;
    top: 4px !important;
    color: #333 !important;
    font-size: 11px !important;
    pointer-events: none !important;
    font-weight: normal !important;
  }
  
  .search-results {
    width: 150px !important;
    max-height: 120px !important;
    font-size: 9px !important;
  }
  
  /* Additional mobile navigation fixes for smaller screens */
  .mainnav ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  .mainnav ul li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  
  .mainnav ul li a {
    display: block !important;
    width: 100% !important;
    padding: 6px 8px !important;
    margin: 1px 0 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    color: white !important;
    text-align: center !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .mainnav ul li span {
    display: none !important;
  }
  
  .logo{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: 30%;
  }
   .logo1{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: 30%;
  }
}
@media only screen and (max-width:1300px){
 .pretty_container .thirdtabmain {
  display:block;
  }
  
  .pretty_container .thirdtabmain .thirdtabs{
    width: 95%;
   margin: 5px;
  }
}

.mainheader .mainnav ul{
  display: flex;
  flex-direction: row;
  align-items: center;
}


.subtab-container {
  width: 85%;
}
.subtab {
  border-top-left-radius: 3px;
  background-color: #f9f9f9;
  padding: 0px 24px;
  height: 44px;
  font-size: 1.5rem;
  border-bottom: 1px solid #d6d6d6;
}

.subtab {
  color:#586069;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-top: 3px solid transparent !important;
  border-left: 0px !important;
  border-right: 0px !important;
  border-bottom: 0px !important;
  background-color: #fafbfc;
  padding: 12px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.subtab--selected {
  color: black;
  box-shadow: 1px 1px 0px white;
  border-left: 1px solid lightgrey !important;
  border-right: 1px solid lightgrey !important;
  border-top: 3px solid #14ac9c !important;
}



.img-slide{
  width:105%;
  height: 80%;
  border-radius: 12px;
}

/*-------------------------------*/

.img-slide_parteners{
  width: 800px;
  height: 800px;
}
/*-------------------------------------*/


.story-side{
  padding:1em;
}
.story-side{
  font-weight: bold;
  top: -175px;
  left: 145px;
}
.expert-title{
  font-weight: bold;
  text-align: center;
  
}

.expert-container{
  display: flex;
  width: 28%;
}

.expert-container-Partners{
  display: flex;
  width: 22%;
  height: 22%;
}




.pretty_container11 {
  border-radius: 5px;
  background-color: #f9f9f9;
  margin: 1em;
  padding: 1em;
  position: static;
  box-shadow: 2px 2px 2px lightgrey;
}
.pretty_container22{
  background-color: white;
  display: block;
  margin: 0 auto;
}
.aside{
  width: 30%;
  text-align: center;
}
/*-------------------------------------------------------------*/
.Partners{
  width: 70%;
  text-align: center;
}

.aside-Partners{
  width: 100%;
  text-align: center;
}



.content{
  margin-left: 1em;
}

.main-container{
  display:flex;
  width: 100vw;
  flex-wrap: wrap;
}

.expert-ti{
  text-align: center
}
/*=========================================================================================================================================================*/
.main-story{
  display: flex;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-top: 4rem;
}
.main-story1{
  display: flex;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-top: 4rem;
}
.main-storyDiv{
  padding-left: 4rem;
  padding-right: 4rem;
}

.main-imgDiv{
  width: 160rem;
  height: 40rem;

}

.main-img{
  width:100%;
  height: 100%;
  position: relative;
}

.content-container{
  display: flex;
  margin-left: 2rem;
  margin-right: 2rem;
  overflow: scroll;
}
.content-story{
  width: 70%;
}

.title-st{
  font-weight: bold;
  font-size: 28px;
  /*line-height: 1.5;*/
}

.content{
  width: 57%;
}

.content-img{
  width:40rem;
}

.story-container{
margin: 2rem;
}

.img-para{
  display: flex;
}

.p-img{
  width: 50rem;
}

.p-imge {
  width: 1000px;
  height: 500px; /* Adjust the height as needed */
  display: flex;
  justify-content: center;
  align-items: center;
}


.para-imgDiv{
  margin: 2rem;
}


.last-img{
  width: 40%;
}
/* working on dawnload button layout
/* ----------------------------------------------- */

.main_link{
  bottom: -20px;
  left: -160px;
  position: relative;
  font-weight: bold;
}
.main_sentence{
  bottom: 400px;
  left: 240px;
  position: relative;
  color:black
}
.top-left_img {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Events tab  */

.expert-container-event{
  display: flex;
  width: 28%;

}

/* background-color:white; */

.pretty_container11-event{
  background-color:white;
  width: 600px; 
  height: 300px;
  margin: 1em;
  padding: 1em;
  position: static;
  box-shadow: 2px 2px 2px lightgrey;
}
.expert-title-event{
  font-weight: bold;
  animation: move-left 2s ease-in-out infinite;
}
  @keyframes move-left {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-50px);
    }
    100% {
      transform: translateX(0);
    }
  }

 
  .paragraph-event{
    /*border: 1px solid black; /* adds a border around the paragraph */
    /*margin: 10px; /* adds margin around the paragraph */
    /*padding: 5px; /* adds padding between the content and border of the paragraph */
    position: relative; /* sets the position to relative */
    font-size: 16px;
    line-height: 1.5;
    color: #2e3133;
    top: 23px; /* moves the paragraph 50 pixels down from its default position */
    left: 35px; /* moves the paragraph 20 pixels to the right from its default position */
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
  }
  .button-event{
    padding: 2px 10px;
    background-color: #0ec1a8;
    color: #fff;
    position: relative;
    top: 229px;
    left: 15px;
    font-size: 14px;
    text-transform: lowercase;
    text-transform: capitalize;
    width: 140px;
    height: 40px;
    box-shadow: 2px 2px 2px lightgrey;
    
  }
  .paragraph-event2{
    /*border: 1px solid black; /* adds a border around the paragraph */
    /*margin: 10px; /* adds margin around the paragraph */
    /*padding: 5px; /* adds padding between the content and border of the paragraph */
    position: relative; /* sets the position to relative */
    font-size: 11px;
    color: #2e3133;
    top: -12px; /* moves the paragraph 50 pixels down from its default position */
    left: 25px; /* moves the paragraph 20 pixels to the right from its default position */
  }
  .paragraph-event2a{
    /*border: 1px solid black; /* adds a border around the paragraph */
    /*margin: 10px; /* adds margin around the paragraph */
    /*padding: 5px; /* adds padding between the content and border of the paragraph */
    position: relative; /* sets the position to relative */
    font-size: 11px;
    color: #2e3133;
    top: 150px; /* moves the paragraph 50 pixels down from its default position */
    left: 25px; /* moves the paragraph 20 pixels to the right from its default position */
  }

  .button-event11{
    background-color: #0ec1a8;

  }
  .pretty_container11-event-last{
    background-color:white;
    width: 600px; 
    height: 350px;
    margin: 1em;
    padding: 1em;
    position: static;
    box-shadow: 2px 2px 2px lightgrey;
  }
 
  .pretty_container11-event1{
    background-color:rgb(196, 241, 226);
    width: 600px; 
    height: 300px;
    margin: 1em;
    padding: 1em;
    position: static;
    box-shadow: 2px 2px 2px lightgrey;
  }

  /* styles.css */
.partners-container {
  margin: 40px; /* Adjust the overall container margin */
}

.partners-grid {
  
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 2px; /* Set the gap between column images to 3px */
}

/* .partner-item {
  flex: 0 0 calc(33.33% - 16px); /* Adjusted to accommodate the 3px gap 
  margin-bottom: 20px;
  padding: 0px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40px;
} */

.partner-item {
  flex: 0 0 calc(33.33% - 16px); /* Adjusted to accommodate the 3px gap */
  margin-bottom: 20px;
  padding: 0px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto; /* Set margin to 0 on top/bottom and auto on left/right */
}


.partner-name {
  margin-top: 5px;
}

.label {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: inline; /* Display labels and info on the same line */
  margin-right: 5px; /* Add a small margin to separate them */
}

.label_for_email {
  font-size: 16px;
  font-weight: normal;
  color: #333;
  display: inline; /* Display labels and info on the same line */
  margin-right: 5px; /* Add a small margin to separate them */
}

.expert-email {
  font-size: 14px !important;
  color: #007bff !important;
  text-decoration: underline !important;
}


.expert-email:hover {
  text-decoration: underline;
}

.expert-info {
  font-size: 14px; /* Adjust the font size as needed */
  color: #333; /* Change the text color as desired */
  margin: 5px 0; /* Add margin to separate the labels and information */
  font-family: 'Helvetica', Arial, sans-serif; /* Use 'Roboto' or the desired font */
}

/********************************************************************************************************/
/* Overall layout styles */
.page {
  font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  font-size: 16px;
  padding: 20px;
}

/* Header styles */
.header-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

/* Event heading styles */
.event-heading-container {
  text-align: center;
  margin-bottom: 20px;
}

.event-heading {
  font-size: 22px;
  font-weight: bold;
  color: #0ec1a8;
}

/* Events container styles */
.events-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Align boxes justified to the page */
  align-items: flex-start;
  gap: 40px; /* Reduce the gap between event boxes */
  padding: 0 30px; /* Add padding to the right and left */

}

/* Professional event card styles - BBC inspired */
.event-card {
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
  border-color: #d0d0d0 !important;
}

.event-card:hover img {
  transform: scale(1.05);
}

.event-card .read-more-link span:last-child {
  transition: transform 0.3s ease;
}

.event-card:hover .read-more-link span:last-child {
  transform: translateX(4px);
}

.event-card:hover .read-more-link {
  color: #25a088;
}

.event-card h3 {
  transition: color 0.3s ease;
}

.event-card:hover h3 {
  color: #2db29b !important;
}

/* Responsive card layout */
@media screen and (max-width: 768px) {
  .event-card {
    max-width: 100% !important;
    min-width: 100% !important;
    flex: 1 1 100% !important;
    margin-bottom: 25px;
  }
  
  #event-cards-container {
    flex-direction: column !important;
    gap: 20px !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .event-card {
    flex: 0 1 calc(33.333% - 17px) !important;
    max-width: calc(33.333% - 17px) !important;
    min-width: 0 !important;
  }
}

@media screen and (min-width: 1025px) {
  .event-card {
    flex: 0 1 calc(33.333% - 17px) !important;
    max-width: calc(33.333% - 17px) !important;
    min-width: 0 !important;
  }
  
  #event-cards-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
  }
}

/* Event tab styles */
.event-tab {
  border: 1px solid #ddd;
  padding: 10px;
  width: 440px;
  height: 570px; /* Adjust the height as needed */
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
}







/* Event title styles */
.event-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Event image styles */
.event-image {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

/* Event details styles */
.event-details {
  margin-bottom: 10px;
}

/* Event location and date styles */
.event-location-date {
  text-align: left;
  font-weight: bold;
  color: #777;
  margin-top: 10px;
  font-size: 16px;
}

/* Event summary styles */
.event-summary {
  text-align: justify;
  margin-bottom: 10px;
  font-size: 14px;
}

/* Read more button styles */
.read-more-button {
  text-transform: capitalize;
  width: 160px;
  height: 40px;
  box-shadow: 2px 2px 2px lightgrey;
  background-color: #0ec1a8;
  border: none;
  color: white;
  padding: 5px 10px; /* Adjust the padding for a smaller width */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: -1px 5px;
  cursor: pointer;
  margin-left: auto; /* Move the button to the right */
}

.Eng_link{
  top: 10px;
  right: 10px;
  position: absolute;
  font-weight: bold;
  text-decoration: underline;
}
.fra_link{
  top: 10px;
  right: 60px;
  position: absolute;
  font-weight: bold;
  text-decoration: none;
}

.header-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 10px 20px;
}

.logo-left-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.logo-row {
    display: flex;
    gap: 20px;
    align-items: center;
}

.logo-left {
    height: 120px;
    max-width: 140px;
    object-fit: contain;
}

.logo-togo {
    height: 120px; /* Adjust as needed for balance */
    max-width: 140px;
    object-fit: contain;
}

.gggi-wrapper {
    margin-top: 5px;
}

.logo-gggi {
    height: 70px;
    max-width: 150px;
    object-fit: contain;
}

.language-toggle {
    display: flex;
    gap: 15px;
    font-weight: 600;
    font-size: 16px;
    align-items: center;
    margin-top: 10px;
}

.lang_link {
    text-decoration: none;
    color: #007B8A;
}

.lang_link:hover {
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
    .header-flex-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .language-toggle {
        align-self: flex-end;
        margin-top: 15px;
    }
}

/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ========================================
   GLOBAL TYPOGRAPHY + JUSTIFICATION
   Applies consistently across all pages
   ======================================== */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
               Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  color: #1b1b1b;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Paragraphs and long-form content: justify for clean edges */
p, .pretty_container p, .mini_container p, .event-summary,
.content-story p, .paragraph-event, .paragraph-event2, .paragraph-event2a,
li {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* Keep headings left-aligned and crisp */
h1, h2, h3, h4, h5, h6 { text-align: left; letter-spacing: 0.2px; }

/* Improve readability in lists */
ul, ol { padding-left: 1.25rem; line-height: 1.7; }

/* Cards/containers default text color */
.pretty_container, .mini_container, .expert-container { color: #1f2937; }

/* Apply Inter font only to the expert cards */
.expert-container,
.label,
.expert-info,
.expert-email {
    font-family: 'Inter', sans-serif;
}

/* Section container */
.team-section {
    padding: 30px 20px;
    background-color: #f8f9fa;
}

/* Flex layout for all expert cards */
.main-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 30px;
}

/* Expert card container */
.expert-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    padding: 24px 18px;
    width: 360px;          /* Increased width */
    min-height: 380px;     /* Reduced height */
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.expert-container:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

/* Profile image */
.img-slide {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 12px;
    border: 3px solid #e1e1e1;
}

/* Name/title */
.label {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 12px 0 6px;
    line-height: 1.4;
}

/* Role, department, location, etc. */
.expert-info {
    font-size: 14px;
    font-weight: 400;
    color: #444;
    text-align: center;
    line-height: 1.5;
    word-break: break-word;
    hyphens: auto;
    max-width: 320px;     /* Wider text block */
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
}

/* Email link */
.expert-email {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #0066cc;
    text-decoration: none;
}

.expert-email:hover {
    text-decoration: underline;
}

/* Responsive layout for small screens */
@media (max-width: 768px) {
    .expert-container {
        width: 90%;
    }
}


.partner-logos {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 20px;
    margin-left: 0;
    background-color: transparent;
}

/* White chip behind each header partner logo (Government of Rwanda, REMA, GGGI)
   so they stay readable over the photographic header — same treatment as the
   Green Growth Index dashboard. */
.partner-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 80px;                 /* equal height for all three chips */
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 12px;
    padding: 8px 22px;
    margin-right: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
/* Normalise the logo heights inside the equal-height chips. */
.partner-chip .partner-logo {
    max-height: 52px;
    margin-right: 0;
}
.partner-chip .rwanda-logo {
    max-height: 72px;            /* crest+wordmark has internal padding, so fill more of the chip */
    max-width: 230px;
}

.partner-logo {
    max-height: 60px;
    object-fit: contain;
    margin-right: 10px;
}

/* The Government of Rwanda logo has more transparent padding inside its canvas
   than REMA/GGGI, so at the shared 60px height its crest + wordmark reads ~15%
   smaller. Enlarge it slightly on desktop to balance the three logos. */
.rwanda-logo {
    max-height: 75px;
    max-width: 200px;
}

/* Keep the white logo chips compact (and still equal height) on smaller screens. */
@media only screen and (max-width: 962px) {
    .partner-chip {
        height: 46px;
        padding: 4px 10px;
        margin-right: 8px;
        border-radius: 8px;
    }
    .partner-chip .partner-logo {
        max-height: 30px;
    }
    .partner-chip .rwanda-logo {
        max-height: 38px;
        max-width: 120px;
    }
}

/* Nutrient Balance Page Styles */
.metric-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
    min-width: 200px;
    margin: 10px;
}

.metric-card h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-card h2 {
    font-size: 32px;
    font-weight: bold;
    margin: 10px 0;
}

.metric-card p {
    font-size: 12px;
    color: #666;
    margin: 0;
}

/* Professional fade-in animation for title */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   MOBILE RESPONSIVE IMPROVEMENTS
   ======================================== */

/* Mobile responsive styles are now handled by mobile-only.css */

/* CRITICAL MOBILE NAVIGATION FIX - Override existing CSS */
@media (max-width: 767px) {
  /* Override the CSS that hides navigation on mobile */
  .mainnav ul a, .mainnav ul li {
    display: block !important;
    color: white !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Force navigation to stack vertically */
  .mainheader .mainnav ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    list-style: none !important;
    list-style-type: none !important;
  }
  
  .mainheader .mainnav li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
  }
  
  .mainheader .mainnav li a {
    display: block !important;
    width: 100% !important;
    padding: 12px 15px !important;
    margin: 2px 0 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    color: white !important;
    text-align: center !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
  }
  
  .mainheader .mainnav li a:hover {
    background-color: rgba(45, 178, 155, 0.2) !important;
    transform: translateY(-1px) !important;
  }
  
  .mainheader .mainnav li span {
    display: none !important;
  }
  
  /* Ensure all navigation items are visible */
  .mainheader .mainnav ul li:nth-child(odd),
  .mainheader .mainnav ul li:nth-child(even) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Fix for header container */
  .mainheader .header-row {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 10px !important;
  }
  
  .mainheader .mainnav {
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 0 !important;
  }
}

/* ========================================
   NATIONAL EXPERTS PAGE STYLES
   ======================================== */
.expert-container {
    flex: 0 0 calc(25% - 24px) !important;
    min-width: 280px !important;
    max-width: 320px !important;
}

.expert-container:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-color: #2db29b;
}

.expert-email:hover {
    color: #0052a3 !important;
    text-decoration: underline !important;
}

.expert-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

.expert-container:hover .expert-avatar-initials {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(45, 178, 155, 0.3);
}

.expert-avatar-image {
    transition: all 0.3s ease;
}

.expert-container:hover .expert-avatar-image {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(45, 178, 155, 0.3);
    border-color: #2db29b;
}

/* Responsive grid adjustments */
@media (max-width: 1400px) {
    .expert-container {
        flex: 0 0 calc(25% - 24px) !important;
    }
}

@media (max-width: 1200px) {
    .expert-container {
        flex: 0 0 calc(33.333% - 24px) !important;
        max-width: calc(33.333% - 24px) !important;
    }
}

@media (max-width: 900px) {
    .expert-container {
        flex: 0 0 calc(50% - 24px) !important;
        max-width: calc(50% - 24px) !important;
    }
}

@media (max-width: 768px) {
    .expert-container {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 10px 0 !important;
    }
}

/* Key Features Cards - Responsive Design for Home Page */
@media (min-width: 1400px) {
    .pretty_container .four.columns {
        max-width: calc(33.333% - 20px) !important;
        margin: 0 10px !important;
    }
}

@media (max-width: 1200px) and (min-width: 768px) {
    .pretty_container .four.columns {
        max-width: calc(33.333% - 15px) !important;
        margin: 0 7.5px !important;
    }
}

@media (max-width: 768px) {
    .pretty_container .four.columns {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
    }
}

/* Key Features Container - Professional styling with decorative corners on all sides */
.key-features-container {
    position: relative;
    padding: 40px !important;
    background-color: #ffffff !important;
    border: 2px solid #e0e0e0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    overflow: visible;
}