body.page-node-type-wso2con-2026-africa-article {
  font-family: "Inter", sans-serif !important;
  background:
    /* subtle dark patch, top-right corner */
    radial-gradient(
      circle at top right,
      rgba(8, 8, 8, 0.55) 0%,
      rgba(8, 8, 8, 0) 45%
    ),
    /* main vertical gradient: dark navy -> periwinkle blue */
    linear-gradient(
      to bottom,
      #050422 0%,
      #0a0635 16%,
      #0a0b58 32%,
      #0819a8 48%,
      #0825c3 56%,
      #0d32d2 64%,
      #1941dd 72%,
      #2650e6 80%,
      #3e67ed 88%,
      #6488f6 96%,
      #82a0fb 100%
    );
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

article.wso2con-2026-africa-articles {
  background-image: url(https://wso2.cachefly.net/wso2/sites/all/image_resources/wso2con/2026/wso2conusa-themebg-article.webp) !important;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;

  .row.cHighlightedRow.cHighLift {
    margin: 0 !important;
  }

  section.cSectionAboveHighlight {
    padding-top: 5rem;
    padding-bottom: 1rem;
  }

  section.cOpen-Banking {
    padding-top: 0;
  }

  .cPresenterPic,
  .cPresenterDetails {
    p.caption_text {
      display: none;
    }
  }

  .DownloadPDF {
    background-image: url(https://wso2.cachefly.net/wso2/sites/all/image_resources/wso2conafrica2026-Article-PDF-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* Match the box to the banner's own 2667x1500 proportions so the button
       sits at the true centre of the artwork at every width, rather than
       relying on fixed padding that only lines up at one column width. */
    aspect-ratio: 2667 / 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-bottom: 2rem;

    a.cButtonN_Standard {
      background-color: #ff6700 !important;
      color: #1c1565 !important;
      border-radius: 320px !important;
    }

    a.cButtonN_Standard:hover {
      color: #ffffff !important;
    }
  }

  .Dark .cWhiteBG.cLightGreyBG,
  .cEmptyArticleBody,
  .cLightGreyBG {
    background-color: transparent !important;
  }

  .cPresenterContent h3 {
    color: #ff7300 !important;
    border-bottom: solid 1px #ccc;

    font-size: 2.5rem !important;
    padding-bottom: 2rem;
    font-weight: 800 !important;
  }

  .cPresenterDetails h4 {
    padding-top: 1rem;
    font-size: 1.3rem !important;
    margin-bottom: 0rem !important;
    line-height: 1.8rem !important;
    color: #000 !important;
    font-weight: 500 !important;

    a {
      color: #000 !important;
      text-decoration: none;

      &:hover {
        color: #ff6700 !important;
      }
    }
  }

  .cPresenterDetails img {
    width: 107px;
    text-align: center;
  }

  h4.cDesignation {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    margin-bottom: 0.5rem;
    color: #747272 !important;
  }

  .cPresenterBio {
    padding-top: 2rem;
    padding-left: 0 !important;
  }

  ul.cTriangleBullet li:before {
    content: "\2022";
    font-size: 24px;
    top: -6px;
    left: 3px;
    position: absolute;
    color: transparent;
  }

  .cArticleBody h4 {
    margin-top: .25rem;
  }

  .cArticleBody h2 {
    margin-top: 0.5rem;
  }

  iframe {
    border-radius: 0 !important;
  }

  .cPresenterPic img {
    border-radius: 50%;
  }

  .cPresenterDetails img {
    background-color: #fff;
    padding: 0.5rem 1rem;
    border: solid 1px #ccc !important;
    margin-top: 1rem !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  p,
  a,
  span,
  label,
  select,
  input,
  textarea,
  div {
    font-family: "Inter", sans-serif !important;
  }
}

body.Dark article.wso2con-2026-africa-articles .cPresenterDetails h4 {
  color: #fff !important;
}

body.Dark article.wso2con-2026-africa-articles .cPresenterDetails h4 a {
  color: #fff !important;
  text-decoration: none;
}

body.Dark article.wso2con-2026-africa-articles .cPresenterDetails h4 a:hover {
  color: #ff6700 !important;
}

.cArticleBody p {
  font-size: 1.1rem !important;
}