/* --- Begin main-tabs and tab styles from styles_Updated.css --- */
.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-tabs {
  margin: 18px 0 22px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.main-tabs .main-tab {
  background-color: #ffffff !important;
  border: 1px solid #2db29b !important;
  color: #2db29b !important;
  padding: 0 22px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 4px 10px 4px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.main-tabs .main-tab.is-active {
  background-color: #2db29b !important;
  color: #ffffff !important;
}
/* --- End main-tabs and tab styles --- */
/* 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;
}

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;
}

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


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_new {
  position: relative;
  height: 15%;
  padding: 30px;
  margin-bottom: 25px;
  border-radius: 1px;
  background: #ffffff;
  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;
  margin: 30px 0 0 10px ;
}

/* Header partner logos: GGGI | ITU / AI for Good | GGKP */
.header-brandrow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 28px;
  padding-right: 18px;
}

.header-partners {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 30px 0 0 0;
}

.partner-chip {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border-radius: 10px;
  padding: 9px 16px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

.partner-logo {
  height: 42px;
  width: auto;
  object-fit: contain;
  display: block;
}

.partner-divider {
  align-self: stretch;
  width: 1px;
  background: #e4e4e4;
  margin: 0 14px;
}

@media only screen and (max-width: 962px) {
  .header-partners {
    margin-top: 14px;
  }
  .partner-logo {
    height: 30px;
  }
}

.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;

}

.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;
}

.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;
  height: 305px;
  width: auto;
  overflow: hidden;
}

.mainheader::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* A soft scrim over the top of the photograph, fading out by the time it
     reaches the hero. The logos and the navigation sit up here, and the picture
     runs from dark hillside on the left to bright terraces on the right — so
     "Contact Us" at the right-hand end of the row had almost nothing to read
     against. Confined to the top third, it costs the photograph nothing where
     the picture actually shows. */
  background-image:
    linear-gradient(to bottom,
                    rgba(6, 26, 22, 0.62) 0%,
                    rgba(6, 26, 22, 0.34) 18%,
                    rgba(6, 26, 22, 0.08) 32%,
                    rgba(6, 26, 22, 0) 44%),
    url("./background.jpeg");
  background-size: cover;
  background-position: center;
  z-index: -1;
}

/* Home: the banner takes the photograph's own proportions, so the whole picture
   is shown rather than a slice of it.

   background.jpeg is 5000x2089 (10.4 MP, 2.39:1) — already 2.6x wider than Full
   HD, so there is nothing to gain from a larger file. The reason only part of it
   was visible is this banner: at height:305px with `cover`, a 2.39:1 photo
   stretched across a ~6:1 strip showed about 38% of itself on a 1920px screen,
   and less on anything wider. Matching the aspect is what makes `cover` show
   everything, at any width.

   min-height keeps the banner usable on a narrow screen, where the aspect alone
   would leave too little room for the navigation sitting on top of it. */
.mainheader--home {
  height: auto;
  aspect-ratio: 5000 / 2089;
  min-height: 340px;
  /* The top bar keeps its place; the hero takes the room that is left, which is
     what centres the title in the banner at any height. */
  display: flex;
  flex-direction: column;
}

/* ---- Landing hero: what this is, then where to go ---- */
.home-hero {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The bottom padding reserves the strip the scroll cue is pinned into. The
     cue is positioned against the banner, while this block is centred in what
     is left of it — so on a laptop, where the banner is shorter, the centred
     content grew down into the cue and the two overlapped. Reserving the space
     means they cannot meet however short the banner gets. */
  padding: 10px 20px 96px;
  text-align: center;
}
.hh-inner {
  max-width: 1200px;
}
/* One line, and sized against the photograph rather than against the text.
   The banner is 2.39:1 and tall, so type set for a shorter banner reads as
   small and lost in it — this is scaled up to hold the same share of the frame
   the LDC dashboard's banner does. `nowrap` keeps the title on one line and the
   viewport-relative size keeps it inside the screen down to the breakpoint
   below, where wrapping is allowed again. */
.hh-title {
  color: #ffffff;
  white-space: nowrap;
  font-size: clamp(24px, 4vw, 62px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.2px;
  margin: 0 0 14px;
  /* The photograph is bright in places, so the type carries its own shadow
     rather than relying on a scrim heavy enough to dull the picture. */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.hh-sub {
  color: #f2f6f4;
  font-size: clamp(15px, 1.45vw, 20px);
  line-height: 1.6;
  max-width: 820px;
  margin: 0 auto 30px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
/* The three section buttons, now sitting inside the hero. Larger here than in
   the strip other pages carry: against a banner this size the standard 46px
   pill reads as small print on a photograph, where on a 305px strip it is
   correctly scaled. Only the hero copy grows. */
.home-hero .all-tabs.main-tabs {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.home-hero .main-tabs .main-tab {
  padding: 0 30px !important;
  font-size: clamp(15px, 1.15vw, 18px) !important;
  min-height: 56px !important;
  border-radius: 14px !important;
  margin: 0 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
}

/* The cue at the foot of the banner. A plain link to the content below, so it
   works without JavaScript; `scroll-behavior` on the page makes it glide. */
/* :link and :visited spelled out — a bare `.hh-scroll` loses to the global
   `a:link` colour rule, which left the cue rendering in link blue over the
   photograph. */
/* :link and :visited spelled out — a bare `.hh-scroll` loses to the global
   `a:link` colour rule, which left the cue rendering in link blue over the
   photograph.

   The cue sits at the foot of the banner, which is the brightest part of the
   picture — sunlit grass — so white type there was washing out whatever shadow
   it carried. It gets its own dark backdrop instead, which holds up wherever
   the photograph happens to be light. */
.hh-scroll,
.hh-scroll:link,
.hh-scroll:visited,
.hh-scroll:hover {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(8, 24, 20, 0.46);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  transition: background 0.15s ease;
}
.hh-scroll:hover { background: rgba(8, 24, 20, 0.62); }
/* The circle bounces, gently and forever, so the cue reads as an invitation to
   scroll rather than as a label. Only the arrow moves — bouncing the whole pill
   would drag the words with it and make them harder to read, which is the
   opposite of what the animation is for. */
.hh-scroll-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  animation: hh-bounce 1.6s ease-in-out infinite;
}
@keyframes hh-bounce {
  0%, 20%, 100% { transform: translateY(0); }
  50%           { transform: translateY(7px); }
  70%           { transform: translateY(2px); }
}
/* It settles while the pointer is on it: the reader has found it, so the cue
   has done its job and the movement is now just motion under the cursor. */
.hh-scroll:hover .hh-scroll-arrow {
  animation-play-state: paused;
}
html { scroll-behavior: smooth; }

/* ---- Menu button and drawer ---- */
.nav-toggle {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 1200;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0 11px;
  box-sizing: border-box;
  /* A dark pill, not a translucent white one. The button sits over the sky,
     which is the lightest part of the photograph, and white-on-white left it
     almost invisible — the shape has to supply its own contrast because the
     background behind it is not ours to control. */
  background: rgba(8, 24, 20, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-toggle:hover {
  background: rgba(8, 24, 20, 0.72);
  border-color: #ffffff;
}
.nav-toggle:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.nav-toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: #ffffff;
  /* Transformed from the centre so the bars fold into a cross, not a skew. */
  transition: transform 0.25s ease, opacity 0.2s ease;
}
body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Kept in the DOM and faded rather than toggled to display:none, so it can
   transition; pointer-events keeps it from swallowing clicks while shut. */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(10, 22, 18, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

.nav-drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1150;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: min(320px, 86vw);
  height: 100%;
  padding: 84px 18px 24px;
  box-sizing: border-box;
  background: #0f3b32;
  box-shadow: -12px 0 34px rgba(0, 0, 0, 0.28);
  transform: translateX(100%);
  transition: transform 0.28s ease;
  overflow-y: auto;
}
body.nav-open .nav-drawer-panel { transform: translateX(0); }
.nav-drawer-link {
  display: block;
  padding: 13px 14px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.nav-drawer-link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav-scrim, .nav-drawer-panel, .nav-toggle-bar { transition: none; }
  /* A cue that never stops moving is exactly what this setting is asking to be
     spared, so it holds still — the arrow still says which way to go. */
  .hh-scroll-arrow { animation: none; }
}

@media (max-width: 900px) {
  /* Below this the banner's own proportions leave too little height for the
     title, the line under it and the buttons, so it grows instead. */
  .mainheader--home {
    aspect-ratio: auto;
    min-height: 460px;
  }
  /* The top row of links runs out of width here; the drawer carries them. */
  .mainheader .mainnav { display: none; }
}

@media (max-width: 520px) {
  /* Narrow enough that the title no longer fits on one line even at the
     smallest size, so let it wrap rather than run off the screen. */
  .hh-title { white-space: normal; }
  .hh-scroll { font-size: 14px; padding: 7px 14px; }
}

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

/* A hairline under the navigation, separating the institutional row above from
   the banner below — the same divider the reference layout uses. Translucent
   white rather than a solid rule, so it reads as a division of the photograph
   rather than a line drawn on top of it. */
.mainheader .mainnav {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.mainheader .mainnav li{
  list-style: none;
}
.mainheader .mainnav li a{
  text-decoration: none;
}

.navLinks{
  display: flex;
  justify-content: flex-start;
}

.navLinks li a:link{
  margin: 1.5em;
  font-size: 18px;
  font-weight:500;
  text-align: center;
  list-style-type: none;
  text-decoration: none;
  color:white;
}


/* Each link is a target, not just a word: padding gives it a hit area big
   enough to press without aiming, and the rounded tint on hover shows which one
   is about to be pressed. 15.5px rather than 18px so all eight sit on one row
   with room to breathe instead of filling it edge to edge. */
.mainheader .mainnav li a:link{
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 15.5px;
  /* 600 and a shadow, not 500 and none: these sit on a photograph whose
     brightness changes across the row, and the weight is what keeps the links
     at the light end as readable as the ones at the dark end. */
  font-weight: 600;
  letter-spacing: 0.2px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

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


.mainheader .mainnav li a:hover,
.mainheader .mainnav li a:focus-visible{
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

/* The dividers were solid white and 27px tall, which made them read as heavier
   than the words they separate. Short and translucent, they organise the row
   without competing with it. */
.mainheader .mainnav li span{
  height: 16px;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.34);
  display: block;
  margin: 0 4px;
}


.mainheader .mainnav{
 background:transparent;
 /* Set clear of the partner logos above: at 20px the first link sat almost
    against them and the two rows read as one block. */
 margin: 34px 0 0 10px;
 display: flex;
}
/* The list itself does the laying out, so the links and the dividers between
   them stay vertically centred on each other. */
.mainheader .mainnav ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media only screen and (max-width: 962px){

  .mainnav ul a ,.mainnav ul li{
  display: none;
  color: white;
  }
}

@media only screen and (max-width:560px){
  .logo{
    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:80%;
}

.img-top{
  display:flex;
}

.img-list{
  padding: 1.2em
}
.more-events{
  display: flex;
  width: 40%;

}
.img-small{
  width:30vw;
  height: 35vh;
}

.story-side{
  padding: 1em;
}
.story-side h3{
  font-weight: bold;
}
.story-body{
  padding: 1em;
}
.story-body h6{
font-size: larger;
}


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

.expert-title{
  font-weight: bold;
}

.expert-conatiner{
  display: flex;
  width: 45%;
}
.pretty_container11 {
  border-radius: 5px;
  background-color: white;
  margin-right: 1em;
  margin-bottom:2em;
  position: static;
  box-shadow: 2px 2px 2px lightgrey;
}
.aside{
  width: 50%;
  text-align: center;
}


.content{
  margin-left: 1em;
}

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

.expert-ti{
  margin: 2rem;
}

.main-story{
  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%;
}

.content{
  width: 47%;
}

.content-img{
  width:40rem;
}

.story-container{
margin: 2rem;
}

.img-para{
  display: flex;
}
.p-img{
  width: 50rem;
}

.para-imgDiv{
  margin: 2rem;
}


.last-img{
  width: 40%;
}

/* --------------------------------Work on Event tab ------------------------------------------------------------- */

.title_move{
  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);
    }
  }
  .img-slide-event{
    width: 300px;
    height: 200px;
  }
.expert-title{
  font-weight: bold;
}
.expert-conatiner{
  display: flex;
  width: 28%;
}
.pretty_container11-event{
  background-color:white;
  width: 600px; 
  height: 300px;
  margin: 1em;
  padding: 1em;
  position: static;
  box-shadow: 2px 2px 2px lightgrey;
}
.expert-ti{
  text-align: center
}
.img-slide-event{
  width: 300px;
  height: 200px;
}
.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: 13px;
  line-height: 1.5;
  color: #2e3133;
  top: 8px; /* moves the paragraph 50 pixels down from its default position */
  left: 25px; /* 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: 245px;
  left: 15px;
  font-size: 14px;
  text-transform: lowercase;
  text-transform: capitalize;
  width: 140px;
  height: 40px;
  box-shadow: 2px 2px 2px lightgrey;
  
}
.img-slide-eventnew{
  width: 300px;
  height: 200px;
  position: relative;
  top: -40px;
  object-fit: contain;
}
.eventnewsentence{
  position: relative;
  z-index: 1; /* set the z-index of the title to be above the image */
  top: -20px;
}
.button-event11{
  background-color: #0ec1a8;

}

/* newwwwwwwwwwwwwwwww */

.product_new {
  display: flex;
  padding: 20px;
}

.left {
  flex: 1;
}

.middle {
  flex: 2;
  padding: 0; /* Remove padding */
}


.right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid #ccc; /* Adding a vertical line */
  padding-left: 20px; /* Add some padding for spacing */
}


/* Layout rows: keep horizontal and centered */
.primary-tabs-row,
.subtabs-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 6px;
}

/* Primary 3 tabs: pill-style buttons */
.primarytab {
  /* wrapper for each button */
}
.primarytab button {
  display: flex;               /* vertical centering */
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 44px;                /* keeps text vertically centered */
  padding: 0 22px;             /* horizontal breathing room */
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;              /* prevents extra vertical offset */
  text-transform: none;        /* no forced ALL CAPS */
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
  cursor: pointer;
}

/* Active primary tab (color already set inline via active_style) */
.primarytab a:hover button {
  filter: brightness(0.98);
}

/* Secondary 6 sub-tabs: slim underline style */
.subtab button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: #f9fafb;
  border-radius: 6px 6px 0 0;
  font-size: 13px;
  line-height: 1;
  text-transform: none;        /* sentence case (as provided) */
  color: #374151;
}
.subtab a:hover button {
  filter: brightness(0.98);
}

.primarytab a,
.subtab a { text-decoration: none; }


/* Make the active sub-tab underline stand out (set inline via active_style) */


/* ============================================================
   AI-GGSim application cards (Regional / National Applications)
   ============================================================ */
.apps-intro {
  max-width: 920px;
  margin: 28px auto 8px auto;
  text-align: center;
}
.apps-intro h2 {
  color: #1b3b5a;
  font-weight: 700;
  font-size: 26px;
  margin-bottom: 10px;
}
.apps-intro p {
  color: #5b6b78;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 auto;
}
.apps-intro .apps-intro-rule {
  width: 70px;
  height: 4px;
  border: none;
  border-radius: 4px;
  background: linear-gradient(90deg, #0bb89c 0%, #2db29b 100%);
  margin: 14px auto 0 auto;
}

/* Wide container for the application cards: two tool cards in the first row, the
   reports card full-width in the row below. Cards size to their content so the
   "Launch tool" button sits right under the content (no big gap). */
.apps-cards-row {
  max-width: 1140px;
  margin: 26px auto 40px auto;
  padding: 0 24px;
}
.apps-cards-row .row + .row {
  margin-top: 26px;
}

.app-card {
  background-color: #ffffff;
  border: 1px solid #e6e9ed;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.app-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.app-card .app-card-accent {
  height: 6px;
  background: linear-gradient(90deg, #0bb89c 0%, #2db29b 100%);
}
.app-card .app-card-body {
  padding: 26px 28px 30px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.app-card .app-card-badge {
  align-self: flex-start;
  background-color: rgba(11, 184, 156, 0.12);
  color: #0a8f7a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.app-card .app-card-title {
  color: #1b3b5a;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 6px 0;
}
.app-card .app-card-subtitle {
  color: #2db29b;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 16px 0;
}
.app-card .app-card-desc {
  color: #54616b;
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0 0 20px 0;
}
.app-card .sector-chips {
  margin-bottom: 24px;
}
.app-card .sector-chip {
  display: inline-block;
  background-color: #f1f5f4;
  color: #46555a;
  border: 1px solid #e2e8e6;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 6px;
  margin: 0 7px 7px 0;
}
.app-card .app-card-cta-wrap {
  margin-top: auto;
}
.tool-cta {
  display: inline-block;
  background: linear-gradient(90deg, #0bb89c 0%, #2db29b 100%);
  color: #ffffff !important;
  padding: 12px 30px;
  border-radius: 7px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 3px 8px rgba(11, 184, 156, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.tool-cta:hover {
  filter: brightness(1.06);
  box-shadow: 0 7px 18px rgba(11, 184, 156, 0.45);
  transform: translateY(-1px);
  text-decoration: none;
}

/* "Other countries" report list (reports_card). A responsive grid so the reports
   flow into several columns in the full-width card and stack on narrow screens. */
.app-card .report-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 32px;
  margin: 6px 0 18px 0;
}
.app-card .report-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 2px 0 2px 14px;
  border-left: 3px solid #d6efe9;
}
.app-card .report-name {
  color: #2f3e46;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
}
.app-card .report-link {
  color: #0a8f7a;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(11, 184, 156, 0.45);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.app-card .report-link:hover {
  color: #086b5b;
  border-bottom-color: #086b5b;
  text-decoration: none;
}
.app-card .report-desc {
  margin-top: 4px;
}


/* ============================================================
   Site footer
   ============================================================ */
.site-footer {
  margin-top: 48px;
  border-top: 1px solid #e6e9ed;
  background-color: #f7f9f9;
  padding: 22px 16px 26px 16px;
}
.site-footer .site-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.site-footer .site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.site-footer .site-footer-link {
  position: relative;
  color: #1b3b5a;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  padding: 2px 18px;
  transition: color 0.2s ease;
}
.site-footer .site-footer-link:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 13px;
  width: 1px;
  background-color: #cdd5db;
}
.site-footer .site-footer-link:hover {
  color: #0bb89c;
  text-decoration: none;
}
.site-footer .site-footer-copy {
  color: #7a868f;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0.2px;
}




/* LLM section buttons (View summary, Generative AI Analysis) - matches images.ipynb */
.llm-tab-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
}
.llm-tab-btn {
  background: #0d9488;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  padding: 1px 5px;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: none;
}
.llm-tab-btn:hover {
  background: #0f766e;
}

/* Page-level View summary / Generative AI boxes (whole page) */
.llm-page-box {
  background: #0d9488;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  text-transform: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  flex: 1;
  min-width: 0;
}
.llm-page-box:hover {
  background: #0f766e;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* Keep page-level AI action buttons compact on smaller screens */
@media (max-width: 760px) {
  .llm-page-boxes {
    gap: 6px !important;
    flex-wrap: wrap;
  }
  .llm-page-box {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 5px;
    min-height: 28px;
    line-height: 1;
  }
}

@media (max-width: 560px) {
  .llm-page-boxes {
    gap: 4px !important;
    flex-wrap: nowrap;
  }
  .llm-page-box {
    font-size: 9px;
    padding: 3px 6px;
    border-radius: 4px;
    min-height: 24px;
    white-space: nowrap;
  }
  .llm-page-box .llm-tab-icon {
    width: 11px !important;
    height: 11px !important;
    margin-right: 4px !important;
    padding: 1px !important;
  }
}

/* ── Premium AI Summary Panel ─────────────────────────────────────── */
.summary-panel {
  display: none;
  font-family: 'Lato', 'Source Sans Pro', sans-serif;
  border-radius: 10px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.summary-panel-header {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 50%, #14b8a6 100%);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-panel-title {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.95;
}

.summary-panel-close {
  background: rgba(255,255,255,0.18) !important;
  border: none !important;
  color: white !important;
  font-size: 13px !important;
  font-weight: 300;
  cursor: pointer;
  width: 20px;
  height: 20px;
  padding: 0 !important;
  border-radius: 4px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: none !important;
  transition: background 0.2s ease;
}
.summary-panel-close:hover {
  background: rgba(255,255,255,0.3) !important;
}

.summary-panel-body {
  background: #ffffff;
  padding: 10px 14px 12px 14px;
  border-top: 1px solid #e5e7eb;
}

.summary-panel-body p {
  font-family: 'Lato', 'Source Sans Pro', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: #2d3748;
  line-height: 1.8;
  margin: 0;
}

.summary-stat {
  font-weight: 700;
  color: #0d8a7a;
  background: #e8f8f5;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 13.5px;
}

/* Overview content inside body */
.summary-panel-body .summary-overview-label {
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #14ac9c;
  margin-bottom: 10px;
}

.summary-panel-body .summary-overview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  color: #4a5568;
}

.summary-panel-body .summary-overview-row span.val {
  font-weight: 700;
  color: #0d8a7a;
}

/* ======================= AI for Good award ribbon ======================= */
.award-ribbon {
  display: block;
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(90deg, #fbf3da 0%, #f7e7b8 50%, #fbf3da 100%);
  border-top: 1px solid #ecd9a3;
  border-bottom: 2px solid #d9bf7a;
  transition: box-shadow .18s ease, filter .18s ease;
}
.award-ribbon:hover {
  filter: brightness(1.01);
  box-shadow: inset 0 -2px 0 #c9a94f;
}
.award-ribbon-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 5px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  justify-content: center;
}

/* Gold "WINNER" seal */
.award-seal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #caa23c 0%, #b8862a 100%);
  color: #fff;
  padding: 3px 11px 3px 9px;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(150, 110, 20, 0.4);
  flex-shrink: 0;
}
.award-seal-icon { font-size: 14px; line-height: 1; }
.award-seal-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

/* Scrolling announcement ticker */
.award-marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.award-marquee-track {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  will-change: transform;
  animation: award-scroll 26s linear infinite;
}
.award-ribbon:hover .award-marquee-track { animation-play-state: paused; }
.award-marquee-item { padding-right: 70px; }
.award-mq-title { color: #4a3a08; font-size: 14px; font-weight: 700; }
.award-mq-sub { color: #4a3a08; font-size: 14px; font-weight: 700; }

@keyframes award-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .award-marquee-track { animation: none; }
}

/* Call-to-action button */
.award-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #b8862a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 7px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s ease, transform .15s ease;
}
.award-ribbon:hover .award-cta { background: #a5761f; transform: translateX(2px); }
.award-cta-arrow { font-size: 13px; line-height: 1; }

@media (max-width: 820px) {
  .award-ribbon-inner { gap: 10px; padding: 5px 14px; }
}
@media (max-width: 520px) {
  .award-cta { display: none; }
}




/* News article links */
.news-link {
  color: #14ac9c;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.news-link:hover { text-decoration: underline; }

/* ======================= AI for Good news hero ======================= */
.news-hero {
  background: #ffffff;
  padding: 30px 0 26px;
  border-bottom: 1px solid #e9edf0;
}
.news-hero-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  gap: 48px;
  align-items: center;
  flex-wrap: wrap;
}
.news-hero-media { flex: 1 1 480px; min-width: 0; }
.news-hero-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid #e6e9ea;
  box-shadow: 0 12px 34px rgba(31, 59, 77, 0.16);
}
.news-hero-text { flex: 1 1 420px; min-width: 0; color: #1f3b4d; }
.news-eyebrow {
  color: #14ac9c;
  font-weight: 800;
  letter-spacing: 1.8px;
  font-size: 13px;
  margin-bottom: 12px;
}
.news-hero-title {
  color: #1f3b4d;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 16px;
}
.news-hero-date {
  color: #5b6770;
  font-size: 15px;
  font-weight: 600;
}
.news-hero-rule {
  height: 1px;
  background: #e9edf0;
  margin: 20px 0;
}
.news-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.news-chip {
  background: #eaf6f4;
  color: #0e8377;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 20px;
  letter-spacing: 0.4px;
}
@media (max-width: 900px) {
  .news-hero-inner { gap: 24px; padding: 0 22px; }
  .news-hero-title { font-size: 28px; }
}

/* News: back-to-list link */
.news-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #14ac9c;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.news-back:hover { color: #0e8377; text-decoration: underline; }