.secondary-nav {
    width: 1440px;
    height: 109px;
    top: 344px;
    left: 1px;
    background: #DADADA;

}

.logo_container{
    width: 253px;
    height: 70px;
    flex-shrink: 0;
    }


.logo_container__flex {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 253px;
    height: 70px;
    top: 359px;
    left: 152px;
    flex-shrink: 0;
}


.wrapper-alt {
    background-color: #DADADA;
}

.inner-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px; /* or whatever your site width is */
    margin: 0 auto;
    padding: 0 1.5rem;  /* horizontal spacing */
    width: 100%;
}


.spacer {
    flex-grow: 1;
}

  /* ———————————————————————————————————
       TOP TOOLBAR (below header & hero)
    ——————————————————————————————————— */
    .page-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center; /* Optional fallback */
      gap: 1rem;
      background: #DADADA;
      border-top: 1px solid var(--ci-border);
      border-bottom: 1px solid var(--ci-border);
      padding: 0;
    }

    .page-toolbar > .wrapper {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 0.5rem;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      box-sizing: border-box;
    }


    .ipp-breadcrumb {
      background: #fff;
      height: auto;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 2% 10px 5px;
    }

    .ipp-breadcrumb a {
      font-size: 90%;
      line-height: 120%;
    }

    .ipp-breadcrumb .wrapper {
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: 1200px;
      margin: 20px auto;
    }

      .page-toolbar .title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 1 1 200px;
        min-width: 200px;
        text-decoration: none;
      }

      .page-toolbar .title img {
        width: 55px !important;
        height: 55px !important;
        flex-shrink: 0;
      }

      .page-toolbar .title p {
        width: 560px;
        color: #000;

        /* Mobile/Heading/Extra Large */
        font-family: Lato;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 35px;
        margin: 0;
      }

      .page-toolbar .spacer {
        flex: 1 1 auto;
      }

      .page-toolbar button,
      .page-toolbar .header_link,
      .page-toolbar .select-wrapper {
        flex: 0 0 auto;
        min-width: 60px;
        font-family: "Lato"
      }


      .page-toolbar .title svg {
        width: 40px;
        height: auto;
      }

      .btn {
        display: flex;
        width: 219px;
        height: 44px;
        padding: 8px 12px 7px 12px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;

        white-space: nowrap;
        border-radius: 3px;
        background: var(--CIB_Green, #8AC640);
        box-shadow: 0px -1px 0px 0px #002D18 inset;

        font-family: Lato;
        font-size: 19px;
        font-style: normal;
        font-weight: 700;
        line-height: 25px;
        color: #000;
        text-decoration: none;
      }

      .header_link{
        display: inline-block;
        padding: 0.45rem 0.9rem;
        border: 0;
        border-radius: 4px;
        font-weight: 600;
        font-size: 0.9rem;
        cursor: pointer;
        text-decoration: none;
        color: #000;

        /* Desktop/Paragraph/Body • Bold */
        font-family: Lato;
        font-size: 19px;
        font-style: normal;
        font-weight: 700;
        line-height: 25px;
      }

      /* custom select wrapper */
      .select-wrapper {
        position: relative;
        width: 257px;
        height: 46px;
        flex-shrink: 0;
        border: 1px solid #000;
        background: #FFF;

      }
      .select-wrapper select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding: 10px 20px 10px 22px;
        border: 1px solid var(--ci-border);
        border-radius: 4px;
        font-weight: 600;
        background: #fff;
        cursor: pointer;
        width: 257px;
        height: 46px;

        color: rgba(0, 0, 0, 0.60);
        font-family: Lato;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

      }
      .select-wrapper::after {
        content: "\25BC";
        width: 14px;
        height: 8px;
        flex-shrink: 0;

        position: absolute;
        top: 50%;
        right: 0.75rem;
        transform: translateY(-50%);
        pointer-events: none;
        font-size: 0.6rem;
        color: #666;
      }

      /* Hide mobile menu & hamburger by default */
      .hamburger {
        display: none;
        font-size: 24px;
        cursor: pointer;
      }

      .mobile-menu {
        display: none;
        flex-direction: column;
        background: #f5f5f5;
        padding: 1rem;
        gap: 1rem;
      }

      .toolbar-items {
        display: flex;
        align-items: center;
        gap: 1rem;
      }

      .toolbar-items img{
        width: 24px;
        height: 24px;
      }
        .page-toolbar .language_bar{
          display: flex;
          align-items: center;
          gap: 0.5rem;

        }

      @media (max-width: 1080px) {

        .page-toolbar .wrapper{
          display: flex;
          flex-direction: row;
        }

        .page-toolbar .title{
          align-self: flex-start;
          padding: 0.45rem 0.9rem 0.45rem 0;
        }

        .page-toolbar .title p {
          text-align: left;               /* was: center */
          width: auto;                    /* override the 100% */
          max-width: 100%;
          font-size: 20px;
        }
        .hamburger{
          display: block;
        }
        .hamburger svg{
          width: 39.589px;
          height: 25.952px;
          flex-shrink: 0;
        }
        .menu-open .mobile-menu {
          display: flex;
        }

        .page-toolbar {
          gap: 1rem;
          padding: 0 0.5rem;
          flex: 0 1 250px;
        }



        .page-toolbar button,
        .page-toolbar .header_link,
        .page-toolbar .select-wrapper {
          width: 100%;
          max-width: 100%;
        }
        /*  */

        .page-toolbar .language_bar{
          margin-left: auto;
          padding: 0.45rem 0.9rem;
        }
        .menu-open .mobile-menu {
          display: flex;
        }

        .header-link-container{

          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
        }
         .toolbar-items{
          display: none;
        }
        .ipp-breadcrumb{
          margin: 5px auto;
        }
      }


    /* ———————————————————————————————————
       MAIN SECTION
    ——————————————————————————————————— */
      .ipp-main {
        max-width: 1200px;
        margin: 2rem auto;
        padding: 0 1rem;
        max-height: 340px;
      }

      .sub-category-intro{
        margin-top: 90px !important;
      }


      .intro {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        margin-top: 50px;
      }


      .intro h1 {
        color: #005F81;
        height: 80px;
        margin: 0;
        /* Desktop/Heading/Large */
        font-family: Lato;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px; /* 111.111% */
      }

      .intro p {
        color: #000;
        font-family: Lato;
        font-size: 17.6px;
        font-style: normal;
        font-weight: 400;
        line-height: 33px; /* 137.5% */
        max-height: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;

        display: -webkit-box;
        display: box;

        -webkit-box-orient: vertical;
        box-orient: vertical;

        -webkit-line-clamp: 8;
        line-clamp: 8;

        overflow: hidden;
        text-overflow: ellipsis;
      }

      .video-wrapper {
        width: 605.625px;
        height: 340px ;
        flex-shrink: 0;
        aspect-ratio: 16/9;

        position: relative;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 0 0 1px var(--ci-border);
      }

      .video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .video-wrapper img {
        aspect-ratio: 16/9;
        height: 100%;
        width: 100%;
      }
    /* ———————————————————————————————————
       CARD GRID
    ——————————————————————————————————— */
    .card-grid {
      width: 100%;

      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 28px;

      justify-content: center;
      margin: 3rem auto 0;
      background: #FAFAFA;
      height: auto;
      flex-shrink: 0;

      padding: 2rem 1rem;
      box-sizing: border-box;
    }

    .card-grid {
      width: 100%;
      background: #FAFAFA;
      padding: 2rem 1rem;
    }

    .card-grid-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, 404px);
      gap: 28px;
    }


    .card {
      max-width: 404px;
      margin: 0 auto;
      height: 250px;
      flex-shrink: 0;
      border-radius: 4.453px;
      background: #FFF;
      box-shadow: 0px 6px 6px 1px rgba(0, 0, 0, 0.08);
      padding-left: 40px;
      padding-right: 38px;
      padding-top: 37px;

      cursor: pointer;
      text-decoration: none;
    }

    .card:hover {
      background: var(--ci-card-hover);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
      outline: 3px solid #C27E00;
    }
    .card:focus {
      outline: 3px solid #C27E00;
    }
    .card-title{
      display: flex;
      align-items: center;
      gap: 27px;
      min-height: 74px;
    }

      .card h3 {
        color: #0094C9 !important;
        font-family: Lato;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 0;

        display: -webkit-box;
        display: box;

        -webkit-box-orient: vertical;
        box-orient: vertical;

        -webkit-line-clamp: 3;
        line-clamp: 3;

        overflow: hidden;
        text-overflow: ellipsis;
      }

      .card h3 svg {
        width: 36px;
        height: 48px;
        flex-shrink: 0;
      }

      .card p {
        /* width: 326px; */
        color: #000;
        font-family: Lato;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 27px; /* 112.5% */

        display: -webkit-box;
        display: box;

        -webkit-box-orient: vertical;
        box-orient: vertical;

        -webkit-line-clamp: 4;
        line-clamp: 4;

        overflow: hidden;
        text-overflow: ellipsis;
      }
      .category-card-grid{
        grid-template-columns: repeat(auto-fit, minmax(366px, 1fr));
        background: #FFF;
        padding: 2rem 0.5rem;
        margin-top: 0;
        gap: 47px 37px;
      }

      .category-card{
        width: 381px;
        box-sizing: border-box;
        margin: 0 auto;
        height: 250px;
      }

      .category-card a {
        text-decoration: none;
      }


      .category-card p {
        max-width: 285px;
      }

      .category-card h3 {
        display: -webkit-box;
        display: box;

        -webkit-box-orient: vertical;
        box-orient: vertical;

        -webkit-line-clamp: 4;
        line-clamp: 4;

        overflow: hidden;
        text-overflow: ellipsis;
      }

      .card-grid--wide {
        width: 100%;
        background: #FAFAFA;
        padding: 2rem 1rem;
      }

      .card-grid--wide .card-grid-inner {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
        gap: 28px;
        width: 100%;
        box-sizing: border-box;
        padding: 0 0;
      }

      .divider {
        max-width: 1200px;
        border: 1px solid #B1B4B6;
      }


      @media (max-width: 1080px) {
        .intro {
          grid-template-columns: 1fr;
          gap: 2rem;
        }

        .ipp-main{
          max-height: unset;
        }

        .intro h1,
        .intro p,
        .video-wrapper {
          width: 100%;
        }

        .intro p {
          margin: 20px auto 0;
        }

        .video-wrapper {
          width: 100% !important;
          height: auto !important;
          aspect-ratio: 16 / 9;
        }

        .video-wrapper iframe {
          width: 100%;
          height: 100%;
        }

        .card-grid {
          width: 100%;

          display: grid;
        }
        .card-grid--wide,
        .card-grid-inner{
          padding: 0 1rem;
        }

        .category-card{
          max-width: 100%;
        }

        .category-card-grid{
          padding: 2rem 1rem;
        }

        .divider {
          margin: 30px auto 10px;
        }

      }

    /* ———————————————————————————————————
       Category header
    ——————————————————————————————————— */

    .slice-ipp-cat {
      margin-top: 0;
      background-image: none;
    }

      .section-header {
        display: flex;
        align-items: flex-start;
        gap: 2rem;
        flex-wrap: wrap;
        margin-left: 0.5rem;
      }

      .section-header_mobile{
        display: none;
        align-items: flex-start;
        gap: 1rem;
        flex-wrap: wrap;
        margin-top: 51px;
        margin-left: 0.5rem;
      }

      .section-header__icon {
        display: flex;
        flex-shrink: 0;
        gap: 20px;
        flex-direction: row;
        align-items: center;
      }

      .section-header__icon img {
        width: 58px;
        height: 75px;
        object-fit: contain;
      }

      .section-header__text {
        display: flex;
        flex-direction: column;
      }

      .section-header h2,
      .section-header_mobile h2 {
        display: flex;
        height: 40px;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
        color: #005F81;
        margin: 0;
        /* Desktop/Heading/Large */
        font-family: Lato;
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px; /* 111.111% */
      }

      .section-header__text p {
        display: flex;
        max-height: 200px;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
        color: #000;
        margin: 0;

        font-family: Lato;
        font-size: 24px;
        font-style: normal;
        font-weight: 300;
        line-height: 33px;
      }


      @media (max-width: 768px) {
        .section-header {
          display: none;
        }

        .section-header_mobile{
          margin: 1rem;
          display: flex;
          gap: 1.5rem;
          flex-direction: column;
          margin-left: 1rem;
        }

        .section-header_mobile p{
          margin: 0;

        }

        .section-header_mobile h2 {
          margin-top: 1rem;
        }

        .section-header__icon {
          gap: 1rem;
          display: flex;
          flex-direction: row;
        }

      }

/* ———————————————————————————————————
    Sub-Category
——————————————————————————————————— */
.content-card a{
 text-decoration: none;
}

.info-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  max-width: 800px;
  margin-bottom: 1.5rem;
}

.icon-container{
  display: flex;
  flex-direction: row;
  gap: 22px;
}

.icon-container img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.text-container {
  display: flex;
  flex-direction: column;
}

.text-container p{
  margin: 0;
  color:  #404040;
  font-family: Lato;
  font-style: normal;
  font-weight: 400;
  line-height: 33px;
}

.info-heading h2{
  color: #005F81;

  font-family: Lato;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  margin: 0;
}

.content-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 47px 37px;
  padding: 2rem 0.5rem;
  margin-top: 0;
  margin-bottom: 0;
}

.content-card-grid .card-grid-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 28px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 1rem;
}

.content-card{
  max-width: 361px;
  margin: 0;
  height: 287px;
  padding: 28px 39px;
}

.ipp-content {
  border-color: #B6B6B6;
  margin-bottom: 20px;
  max-width: 825px;
  padding: 20px 1% 0 0;
}

.side-card{
  max-width: 393px;
  min-width: 280px;
  height: auto;
  /* width: 40%; */
  padding-top: 5px;
  flex-shrink: 1;
  gap: 50px;
  border-left: 2px solid #B6B6B6;
  margin-top: 50px;
}

.side-card .card{
  max-width: 393px;
  height: 292px;
  border-radius: 4.453px;
  background: #FFF;
  box-shadow: 0px 6px 18.6px 1px rgba(0, 0, 0, 0.25);
  padding-left: 36px;
  padding-top: 40px;
  gap: 30px;
  box-sizing: border-box;
  margin-bottom: 20px;

}

.side-card h3{
  color: rgb(35, 76, 94);
  font-family: lato_regular, "Open Sans", Arial, sans-serif;
  font-size: 20.5px;
  font-weight: 700;
  line-height: normal;
  margin: 0;


  display: -webkit-box;
  display: box;

  -webkit-box-orient: vertical;
  box-orient: vertical;

  -webkit-line-clamp: 3;
  line-clamp: 3;

  overflow: hidden;
  text-overflow: ellipsis;
}



@media (max-width: 1350px) {
  .content-card-grid .card-grid-inner {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  }
  .content-card {
    max-width: 100%;
  }

  .side-card{
    padding: 0 1rem 20px inherit;
    margin-bottom: 20px;
  }
  .side-card .card{
    flex-shrink: 1;
    margin-left: 1rem;
  }
}