*{
  box-sizing: border-box;
  margin: 0;
}


.content-width-and-margin8{
  display: grid;
  /*grid-template-rows: 25px 79px 448px 516px 554px 830px;*/
}

.landing-project-picture{
  position: relative;
  max-width: 100%;
  height: 100%;
}

.project-landing-image{
  max-width: 100%;
  height: auto;
  width: 100%;
}

.landing-content{
  position: absolute;
  width: 400px;
  top: 25%;
  left: 5%;
  color: #0A2458;

}

.header1{
  font-weight: 400;
  font-size: 40px;
}

.header2{
  font-weight: 400;
  font-size: 60px; 
}

.content-for-projects{
  font-weight: 400;
  font-size: 12pt;
  line-height: 25px;
  margin-top: 30px;
}

.project-lists-section{
  width: 50%;
  background: linear-gradient(180deg, #FEF6FF, #CDD8E1);
  padding-top: 100px;
  padding-right: 5%;
  padding-left: 5%;
}

.header-projects{
  display: flex;
  flex-direction: column;
  font-size: 30px;
}

.header-underline{
  width: 27%;
  border: 2px;
  border-top: 4px solid brown;
  border-color: brown;
  justify-self: center;
  margin-top: 10px;
}

.project-lists{
  display: block;
}

.project-1{
  display: flex;
  flex-direction: column;
  align-content: space-between;
  height: 100%;
  align-items: stretch;
}

.project-2{
  display: flex;
  flex-direction: column;
  align-content: space-between;
  height: 100%;
  align-items: stretch;
}

.project-3{
  display: flex;
  flex-direction: column;
  align-content: space-between;
  height: 100%;
  align-items: stretch;
}

.project-4{
  display: flex;
  flex-direction: column;
  align-content: space-between;
  height: 100%;
  align-items: stretch;
}

.project-list-item{
  height: auto;
}

.header-top{
  display: flex;
}

.header-down{
  display: flex;
}

.horizontal-divider-line-top {
  border: 2px;
  border-top: 1.5px solid #0A2458;
  border-color: #0A2458;
  width: 100%;
  justify-self: center;
  align-self: flex-start;
}

.horizontal-divider-line-down {
  border: 2px;
  border-top: 1.5px solid #0A2458;
  border-color: #0A2458;
  width: 100%;
  justify-self: center;
  align-self: flex-end;
}

.selection-arrow-forward{
  width: 40px;
}

.election-monitoring{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}



.Nigeria-Election-Violence-Report{
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  justify-content: space-between;
}

.Gender-Advocacy{
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  justify-content: space-between;
}

.Youth-Agenda-Area{
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  justify-content: space-between;
}

.election-monitoring{
  padding-left: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.project-1:hover{
  background-color: #e4ebf3;
  cursor: pointer;
}

.project-2:hover{
  background-color: #e4ebf3;
  cursor: pointer;
}

.project-3:hover{
  background-color: #e4ebf3;
  cursor: pointer;
}

.project-4:hover{
  background-color: #e4ebf3;
  cursor: pointer;
}

.project-list-text{
  font-weight: 400; 
  font-size: 11pt;
  line-height: 25px; 
  color:#0A2458;
}

.project-header{
  font-family: montserrat; font-weight: 400; font-size: 20px;
  color:#0A2458;
}

.project-information{
  display: flex;
  flex-direction: column;
  width: 100%;
  line-height: 30px;
  padding: 100px 5%;
  row-gap: 60px;
  color: #0A2458;
  overflow-y: scroll;
  overflow-x: hidden;
}

.project-lists-segment{
  display: flex;
  margin-bottom: 80px;
}

.activity-carousel-images{
  background-color: #CDD8E1;
  padding: 80px;
}

.activity-pictures{
  object-fit: cover;
  width: 100%;
  border-radius: 30px;
}

.header-and-slider{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 30px;
  font-family: montserrat;
  font-weight: 600;
  color: #0A2458;
}

.pagination-container .publication-carounsel-slide-number{
  justify-content: center;
}

.pagination-container .publication-carounsel-slide-number{
  margin-bottom: 0px;
}

.pagination-container{
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 20px;
  padding-right: 0px;
}

.pagination-container .navigation-drop-down{
  justify-content: center;
  padding: 15px;
  border-radius: 10px;
  transition: background 0.5s;
  margin-right: 20px;
  font-family: 'Montserrat';
  font-size: 10pt;
}

.pagination-container .navigation-drop-down:hover{
  background: #0a245861;
  transition: background 0.5s;
  cursor: pointer;
}

.pagination-container .navigation-button{
  height: 50px;
  width: 50px;
  display: flex;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  transition: background 0.5s;
  cursor: pointer;
}

.pagination-container .navigation-button:hover{
  background: #0a245861;
  transition: background 0.5s;
}

.pagination-controls{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px;
}

.page-btn{
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: #0a2458;
  font-size: 18px;
  transition: color 0.2s, transform 0.2s;
}

.page-btn.active{
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: #0a2458;
  font-size: 18px;
  transition: color 0.2s, transform 0.2s;
}

.page-btn.disabled {
    color: #ccc;
    cursor: not-allowed;
    pointer-events: none;
}

.project-lists-segment-mobile, 
.project-information-mobile{
  display: none;
  margin-bottom: 30px;
}

.project-lists-segment-mobile p{
  /* font-size: 10pt; */
  /* line-height: 25px; */
}

.project-information-mobile .project-information{
  padding-bottom: 0px;
  overflow: hidden;
}

.project-information a{
  text-decoration: none;
}

.project-information span{
  display: none;
}

.project-information span:target{
  display: block;
}

.project-lists-segment .project-information{
  display: none;
  opacity: 0%;
  transition: opacity 0.5s;
  font-size: 10pt;
}

.project-lists-segment .project-information h1{
  font-size: 16pt;
  margin-bottom: 25px;
}

.project-lists-segment .project-information p{
  font-size: 10pt;
}

/* .project-lists-segment .project-information:target{
  display: initial;
  transition: opacity 0.5s;
  opacity: 100%;
} */

.project-lists-segment .election-monitoring.selected{
  background-color: #3a61af57;
  padding-right: 30px;
  transition: padding-right 0.5s;
}

.project-activity-image-section{
  margin-top: 25px;
}

.project-activity-image-section .longer-horizontal-divider-line{
  margin-top: 25px;
  margin-bottom: 25px;
}

.project-activity-image-section .title{
  margin-bottom: 25px;
}

.activity-image{
  height: 200px; 
  width: 45%; 
  object-fit: cover;
  object-position: top;
  padding: 2px 4px;
}

.activity-image-mobile{
  height: auto; 
  width: 100%; 
  object-fit: cover; 
  padding: 3px 4px;
  display: block;
}

.gallery-images-container{
  margin-top: 30px;
}

.gallery-images-container a{
  padding: 15px 25px; 
  border-radius: 10px; 
  outline: none; 
  border: 1px solid #142d5f; 
  background-color: transparent;
  display: block;
  margin: 5px;
  cursor: pointer;
  line-height: 25px;
  text-decoration: none;
}

.gallery-images-container a:hover{
  background-color: #142d5f34;
  transition-duration: 500ms;
}

.project-gallery{
  margin-top: 30px;
}