/* CSS Variables */
 :root {
    --cmPortal-navbar-bg: #ffffff;
    --cmPortal-navbar-text: #355077;
    --cmportal-banner-bg: #355077;
    --cmportal-banner-text: #ffffff;
    --cmPortal-offcanvas-bg: #355077;
    --cmPortal-offcanvas-text: #ffffff;
    --cmPortal-footer-bg: #355077;
    --cmPortal-footer-text: #ffffff;
  }

  .navbar-nav {
    flex-direction: row !important;
}

  /* Container mimics Bootstrap container */
  .cmPortal-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  @media (min-width: 576px) {
    .cmPortal-container {
      max-width: 100%;
    }
  }
  @media (min-width: 768px) {
    .cmPortal-container {
      max-width: 720px;
    }
  }
  @media (min-width: 992px) {
    .cmPortal-container {
      max-width: 960px;
    }
  }
  @media (min-width: 1200px) {
    .cmPortal-container {
      max-width: 1140px;
    }
  }
  @media (min-width: 1400px) {
    .cmPortal-container {
      max-width: 1320px;
    }
  }

  html,
  body {
    overflow-x: hidden;
  }

  body {
    margin: 0;
    padding: 0px !important;
  }

  .body-content{
    min-height: 75vh;
  }

  /* Full width backgrounds stretching */
  .cmPortal-navbar,
  .cmPortal-banner,
  .cmPortal-footer {
    width: 100%;
  }

  /* Navbar */
  .cmPortal-navbar {
    background-color: var(--cmPortal-navbar-bg);
    color: var(--cmPortal-navbar-text);
    padding: 10px;
  }

  /* Navbar content container */
  .cmPortal-navbar > .cmPortal-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .cmPortal-navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--cmPortal-navbar-text);
    user-select: none;
  }

  .cmPortal-brand-logo {
    height: 100%;
    width: 130px;
  }

  .cmPortal-nav-links {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  .cmPortal-nav-links a {
    color: var(--cmPortal-navbar-text);
    text-decoration: none;
    padding: 0.5rem;
    user-select: none;
  }

  .cmPortal-hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    user-select: none;
  }

  .cmPortal-hamburger div {
    width: 25px;
    height: 3px;
    background-color: var(--cmPortal-navbar-text);
    border-radius: 2px;
  }

  /* Offcanvas */
  .cmPortal-offcanvas {
    position: fixed;
    inset: 0;
    background-color: var(--cmPortal-offcanvas-bg);
    padding: 1.5rem;
    display: none;
    flex-direction: column;
    z-index: 1000;
    overflow-x: hidden;
  }

  .cmPortal-offcanvas.cmPortal-active {
    display: flex;
  }

  .cmPortal-offcanvas-close {
    text-align: right;
    cursor: pointer;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--cmPortal-offcanvas-text) !important;
    user-select: none;
    font-size: 24px;
  }

  .cmPortal-offcanvas a {
    display: block;
    color: var(--cmPortal-offcanvas-text);
    text-decoration: none;
    padding: 1rem 0;
    user-select: none;
  }

  /* Banner */
  .cmPortal-banner {
    background-image: url("https://cm.iucn-events.org/cmPortal/Content/cmportal/IUCN2025/images/IUCN_Banner.svg");
    background-color: var(--cmportal-banner-bg);
    background-size: cover;
    background-position: center;
    height: 150px;
    display: flex;
    align-items: center;
    color: var(--cmportal-banner-text);
  }

  /* Banner content container */
  .cmPortal-banner > .cmPortal-container {
    width: 100%;
  }

  .cmPortal-banner-content {
    padding-left: 15px;
    padding-right: 15px;
    user-select: none;
  }

  .cmPortal-banner h1 {
    margin: 0;
    font-size: 48px !important;
  }

  .cmPortal-banner p {
    margin-top: 0.5rem;
    font-size: 18px;
  }

  /* Footer */
  .cmPortal-footer {
    background-color: var(--cmPortal-footer-bg);
    color: var(--cmPortal-footer-text);
  }

  /* Footer content container */
  .cmPortal-footer > .cmPortal-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 2rem 0rem;
  }

  .cmPortal-footer-nav,
  .cmPortal-footer-social {
    list-style: none;
    padding: 0px;
    margin: 0;
    display: flex;
    /* gap: 0.5rem; */
  }

  .cmPortal-footer-nav a,
  .cmPortal-footer-social a {
    color: var(--cmPortal-footer-text);
    text-decoration: none;
    font-size: 14px;
  }

  .cmPortal-footer-nav a,
  .cmPortal-footer-social a:hover {
    color: var(--cmPortal-footer-text) !important;
    text-decoration: none !important;
    font-size: 14px;
  }

  .cmPortal-footer-social {
    flex-direction: row;
    gap: 1rem;
  }

  .cmPortal-footer-social img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
  }

  .cmPortal-footer-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .cmPortal-footer-top{
    display: flex;
    justify-content: space-between;
    width: 100%;

  }

  .cmPortal-footer-bottom{
    display: flex;
    justify-content: start;
    width: 100%;
  }

  .cmPortal-footer-divider{
    display: block;
    padding: 0px 8px;
    }

   #logoutForm > ul > li > a:hover{
       background-color: transparent !important;
   }

  /* Responsive (Bootstrap breakpoints) */
  @media (max-width: 768px) {
   
    .navbar-nav {
        flex-direction: column !important;
        color: #ffffff;
    }

    #logoutForm > ul > li > a{
        padding: 16px 15px !important;
    }

    .cmPortal-nav-links {
      display: none;
    }

    .cmPortal-hamburger {
      display: flex;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      margin-left: auto;
      margin-right: 1.5rem;
      padding-right: 0;
      box-sizing: border-box;
    }

    .cmPortal-footer > .cmPortal-container {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .cmPortal-footer-content {
      flex-direction: row;
      align-items: center;
    }

    .cmPortal-footer-nav {
      flex-direction: column;
      align-items: center;
      margin-bottom: 8px;
    }
    .cmPortal-footer-social {
      justify-content: center;
      flex-wrap: wrap;
    }

    .cmPortal-footer-top{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
      }
    .cmPortal-footer-bottom{
        justify-content: center;
    }

    .cmPortal-footer-divider{
        display: none;
    }
  }