.section-wrapper {
  position: relative;
  --max-width: 1110px;
  --padding: 1.25rem;
  width: min(var(--max-width), 100% - var(--padding)*2);
  margin-inline: auto;
}
.thematic-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
   
}

.thematic-card-one {
  grid-area: 1 / 1 / 3 / 2;
}

.thematic-card-two {
  grid-area: 1 / 2 / 2 / 3;
}

.thematic-card-three {
  grid-area: 1 / 3 / 2 / 4;
}

.thematic-card-four {
  grid-area: 2 / 2 / 3 / 3;
}

.thematic-card-five {
  grid-area: 2 / 3 / 3 / 4;
}


.thematics .text-overlay-card {
  position: relative;
}

.thematics .text-overlay-card::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(360deg, #111827 12.5%, rgba(17, 24, 39, 0) 56.1%, #111827 89.27%);
  opacity: 0.4;
  z-index: 1;
  border-radius: 12px;
}

.thematics .thematic-card-one::after {
  background: linear-gradient(180deg, rgba(67, 48, 119, 0.6) 0%, #433077 40.73%, #433077 63.33%, rgba(67, 48, 119, 0.6) 100%);
;
  opacity: 0.6;
  border-radius: 12px;
}

.thematics .text-overlay-card .arrow-circle-upRight {
  transition: rotate 0.3s ease;
}

.thematics .text-overlay-card:hover .arrow-circle-upRight {
  rotate: 45deg;
}
/* text overlay card with image  */
.text-overlay-card .scale-animation-img img,
.scale-animation-img img {
  transition: transform 0.3s ease;
}

.text-overlay-card:hover .scale-animation-img img,
.scale-animation-img:hover img {
  transform: scale(1.1);
}

@media (max-width: 900px) {
  .thematic-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }

  .thematic-card-one {
    grid-area: 1 / 1 / 3 / 3;
  }

  .thematic-card-two {
    grid-area: 1 / 3 / 2 / 5;
  }

  .thematic-card-three {
    grid-area: 2 / 3 / 3 / 5;
  }

  .thematic-card-four {
    grid-area: 3 / 1 / 4 / 3;
  }

  .thematic-card-five {
    grid-area: 3 / 3 / 4 / 5;
  }
}

@media (max-width:500px) {
  .thematic-cards {
    display: flex;
    flex-direction: column;
  }

  .thematic-card-one {
    display: none;
  }

  .thematics .section-heading {
    display: flex;
    padding-bottom: 20px;
  }
}

.thematicCardIcon {
  width: 30px;
  height: 30px;
}

.thematicCardIcon img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.thematicCardIcon img.visible {
  opacity: 1;
}

/*Publication cards*/
.card {
  position: relative;
}

.read-more-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: 'Mulish', sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #36265F;
  padding-bottom: 0.25rem;
  text-decoration: none;
}


.read-more-link .arrow-wrapper {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 0.25rem;
  overflow: visible;
}


.read-more-link .arrow-icon {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) translateX(8px);
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  font-size: 1rem;
  color: #36265F;
  /* Tailwind's orange-500 */
}

.read-more-link .underline-bar {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background-color:#36265F;
  transition: width 0.3s ease-in-out;
}


.article-card:hover .read-more-link .arrow-icon {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

.article-card:hover .read-more-link .underline-bar {
  width: 100%;
}

/*Initiative card*/
.initiative-card {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}

.initiative-card-1 { grid-area: 1 / 1 / 2 / 3; }
.initiative-card-2 { grid-area: 1 / 3 / 2 / 4; }
.initiative-card-3 { grid-area: 1 / 4 / 2 / 5; }
.initiative-card-4 { grid-area: 2 / 1 / 3 / 2; }
.initiative-card-5 { grid-area: 2 / 2 / 3 / 3; } 
.initiative-card-6 { grid-area: 2 / 3 / 3 / 5; }

@media (max-width:768px)
{
  .initiative-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 15px;
    grid-row-gap: 15px;
}
.initiative-card-1 { grid-area: 1 / 1 / 2 / 2; }
.initiative-card-2 { grid-area: 1 / 2 / 2 / 3; }
.initiative-card-3 { grid-area: 1 / 3 / 2 / 4; }
.initiative-card-4 { grid-area: 2 / 1 / 3 / 2; }
.initiative-card-5 { grid-area: 2 / 2 / 3 / 3; }
.initiative-card-6 { grid-area: 2 / 3 / 3 / 4; }
}
@media (max-width:500px)
{
  .initiative-card {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(6, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}

.initiative-card-1 { grid-area: 1 / 1 / 2 / 2; }
.initiative-card-2 { grid-area: 2 / 1 / 3 / 2; }
.initiative-card-3 { grid-area: 3 / 1 / 4 / 2; }
.initiative-card-4 { grid-area: 4 / 1 / 5 / 2; }
.initiative-card-5 { grid-area: 5 / 1 / 6 / 2; }
.initiative-card-6 { grid-area: 6 / 1 / 7 / 2; }
}

.initiative-gradient-overlay {
  background: linear-gradient(0deg, #111827 3.26%, rgba(17, 24, 39, 0.8) 38.66%, rgba(17, 24, 39, 0.2) 64.66%);
}

/*Mobile hamburger menu*/
@media (max-width:1026px)
{
 .navbar{
   position:fixed;
   top:0;
   right:-100%;
   width:280px;
   height: 100svh;
   z-index:99;
   background-color:white;
   transition: all 300ms ease-in-out;
   box-shadow: 0px 0px 4px 0px #13151540;
   opacity: 1;
  }
  .navbar.active{
    right: 0;
  }
  .nav-menu{
   margin-top:60px;
   flex-direction: column;
  }
  .nav-menu li{
    padding-block:20px;
  }
  .nav-menu li:not(:last-child)
  {
    border-bottom: 1px solid #dddddd;
  }
}

/*Header scrolled*/
.header-scrolled {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  background-color:white;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 0.5rem;
  z-index: 9999;
   transition: all 300ms ease-in-out;
}
 
.header-scrolled > .section-wrapper{
  box-shadow: none;
  margin-top: 10px;
  margin-bottom: 10px;
}

  #NPI-header:has(.header-scrolled) .hamburger {
    margin-right: 20px;
  }

  #NPI-header:has(.header-scrolled) .hamburger {
    color: var(--clr-primary-500) !important;
  }


#NPI-header:has(.header-scrolled) .NPI-header-logo::after,
#NPI-header:has(.header-scrolled) .NPI-header-logo::before {
  display: none;
}

#NPI-header:has(#NPI-hero-section) {
  min-height: 850px;
}

#NPI-hero-section::after {
  content: '';
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:-1;
  background: linear-gradient(90deg, #131515 -5%, #131515 -15.12%, rgba(111, 123, 123, 0) 32.03%);
  border-radius: 8px;
}
 
/*About us masking*/
.masked-content {
  -webkit-mask-image: url('../images/about-us-mask.svg');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url('../images/about-us-mask.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  scale: 1.18;
}
@media (max-width:800px)
{
  .masked-content{
    scale:1.15;
  }
}
.ml-4 {
    margin-left: calc(var(--spacing) * 6)!important;
}
.hover\:after\:w-full {
    &:hover {
      @media (hover: hover) {
        &::after {
          top: 24px!important;
        }
      }
    }
}