/* .hidenav{
  width: 0px;
  transition: .5s;
} */

.row{
  display: flex;
  flex-direction:row ;
  align-items: center;
}

html{
  scroll-behavior: smooth;
}
body{
  margin: 0;
  background-color: #1e1e1e;
}

/* --------------------header */
header{
  position: sticky;
  top: 0;
  /* justify-content: space-between  ; */
  padding: 10px 10px;
  background-color: #101010;
  border-bottom: 2px solid darkred;
  color: aliceblue;
}

#search_area{
  width: 30%;
  height: 100%;
}
#searchbox{
  align-items: center;
  height: 98%;
  font-size: 2vw;
  /* border-bottom-left-radius: 70%;
  border-top-left-radius:25%; */
  border: 0.2vw solid darkred;
  padding-left:  2%;
  margin-right: 0;
  width: 80%;
  min-width: 100px;
  background-color:aliceblue;
  color: darkred;
  border-radius:4%;
  font-weight: bold;

  /* border-right: 3px solid darkred; */
}
#searchBtn{
  color: aliceblue;
  background-color: darkred;
  border: 0.5vw solid darkred;
  border-radius:  4%;
  /* height: 100%; */
  width: 20%;
  margin-left: 0.5%;
  font-size: 1.5vw;
}
#searchBtn:hover{
  /* background-color: rgb(115, 115, 115);
  border-color: rgb(115, 115, 115); */
  background-color: red;
  border-color: red;
}
#searchBtn_icon{
  width: 30%;
}
#listlighticon{
  width:  80%;
  scale: 1.5;
  opacity: .5;
}
#listlighticon:hover{
  opacity: 1;
}
#show_navBtn{
  width: 5%;
  border: 0;
  background-color:transparent;
  padding: 2px;
}
#sdglogo{
  /* margin: 1%; */
  width:65%;
  padding: 35%;
  border-radius: 50%;
  animation: spin_clockwise 5s linear infinite;
}

#outersdglogo{
  background-image: url(sdglogo.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1%;
  width:5%;
  height: 5vw;
  border-radius: 50%;
  animation: spin_counterclockwise 5s linear infinite;
}
#outersdglogo:hover{
  animation: spin_counterclockwise 0.5s linear infinite;
}
#sdglogo:hover{
  animation: spin_clockwise 0.5s linear infinite;
}
.separated{
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

/* 
----------------------------------main--------------------------
} */
 

button:hover{
  background-color: rgb(115, 115, 115);
  color: rgb(255, 255, 255);
  
}
#listicon:hover{
  opacity: 0.5;
}
hr{
  border:0.2vh solid darkred;
}
#sidenav{ /* height: 10%; */
  position: fixed;
  z-index: 1; /* opacity: 0.7; */
  width: 0px;
  top: 0;
  left: 0;
  bottom: 0; /* background-color: rgba(91, 155, 192, 0.7); */
  background-color: #1a1a1a;
  overflow-x: hidden;
  overflow-y: scroll;
  transition: 0.5s;
  scrollbar-width: thin;
  scrollbar-color:  rgb(0, 0, 0) darkred ;
  border-right: 1px solid rgb(62, 0, 0);
}
.sidenav_icon{
  width: 25%;
  border-radius: 20%;
}
#hide_navBtn{
  top: 0;
  position: sticky;
  width: 100%;
  background-color: darkred;
  border:0;
  border-bottom:1px solid #101010;
  font-weight: bold;
  
}
#listicon{
width: 10%;
}

#hide_navBtn:hover{
  background-color: rgb(115, 115, 115);
}
#sidenav_option1{ margin-top: 7%;  }
.sidenav_option{
  justify-content: space-between;
  align-items: center;
  border-bottom: .2vh solid darkred;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 2%;
  border-bottom-left-radius: 20%;
  border-top-left-radius: 20%;
  
}
.navlink{
  color:rgb(168, 0, 0);
  /* color:rgb(0, 168, 42); */
  font-family: Georgia, 'Times New Roman', Times, serif;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.5vw;
}
.sidenav_text{
  width: 70%;
  
}

.navlink:hover{ 
  color: rgb(255, 255, 255);
}
.sidenav_option:hover{
  background-color: rgb(168, 0, 0);
  /* background-color: rgb(0, 168, 36); */
  margin-left: 2.5%;
  margin-right: 2.5%;
  transition: .15s;
  
}

/* --------------------------- */
.container{
  width:100%;
}
.column{
  display: flex;
  flex-direction: column;
}

.topic{
  display: flex;
  /* flex-direction: row;
  flex-wrap: wrap; */ 
  justify-content: center;
  align-items: center;
  height: 20vw;
  background-color: aliceblue;
  font-weight: bold;
  color: aliceblue;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 3vw;
  /* max-height: 100px; */
}
/* h1{ color :rgb(198, 37, 4); } */
p b{ color :rgb(198, 37, 4) }
.content{
  padding: 5% 0; /* height: 500px; */
  margin-bottom: 5px; /* background-color: aqua; */
  margin: 0 10%;
  color: rgb(173, 32, 4); /* color: rgb(162, 162, 163); */
  font-size: 2vw;
  font-style: italic ;
  text-align: center;
  
  
}
.content_image{
  margin: 2% 0;
  border-radius: 2%;  
  border:0.2vw solid darkred;
}
.separated{
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
#sdg2_second_p{
  width: 58%;
  margin-left: 2%;
}
#sdg3_second_p{
  width: 58%;
  margin-right: 7%;
}
.big_image{width: 100%;}
#poverty_image1{ width: 100%; }
#poverty_image2{ width: 43%; }
#poverty_image3{ width: 55%;  }
#sdg2_image1{ width: 100%;}
#sdg2_image2{width: 40%;}
#sdg3_image1{ width: 30%;}
#sdg10_image1{ width: 40%; margin-right: 2%;}
#sdg11_image1{ width: 30%; margin-left: 2%;}
#sdg12_image1{ width: 42%; margin-right: 2%;}
#sdg12_image2{ width: 56%;}

#intro_container{
  align-items: center;
  padding: 20px 0;
  background-color: rgb(255, 255, 255);
}
#sdg_image{
  width: 90%;
  margin: 5%;
}
#introduction_topic{
  background-color: darkred;
}

#sdg1_topic{ background-color: rgb(198, 0, 0);}
#sdg2_topic{ background-color: #b59618;}
#sdg3_topic{ background-color: #33a43e;}
#sdg4_topic{ background-color: rgb(161, 1, 1);}
#sdg5_topic{ background-color: rgb(255, 0, 0);}
#sdg6_topic{ background-color: rgb(67, 174, 210);}
#sdg7_topic{ background-color: #e9ba00;}
#sdg8_topic{ background-color: rgb(154, 25, 64)}
#sdg9_topic{ background-color: rgb(208, 107, 36)}
#sdg10_topic{ background-color: rgb(164, 65, 95)}
#sdg11_topic{ background-color: rgb(218, 142, 44)}
#sdg12_topic{ background-color: rgb(169, 118, 51)}
#sdg13_topic{ background-color: rgb(53, 115, 53)}
#sdg14_topic{ background-color: rgb(60, 138, 210)}
#sdg15_topic{ background-color: rgb(27, 172, 27)}
#sdg16_topic{ background-color: rgb(41, 94, 144)}
#sdg17_topic{ background-color: rgb(16, 53, 89)}
#conclution{ background-color: darkred}

footer{
  padding: 0 20%;
  background-color: #101010;
  border-top: 2px solid darkred;
  bottom: 0;
  /* color: rgb(255, 9, 9); */
  color: rgb(255, 30, 30);
  font-size: 1.5vw;
  font-style: italic;
  /* height: 20vh; */
  /* justify-content: center; */
  /* align-items: center; */
}
.footer_icons{
  width: 5%;
  margin: 5px;
}
.footer_part{
  height: 80%;
  padding-top: 10%;
  padding-bottom: 10%;
  align-items: center;
  justify-content: start;
}
.footer_row{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 2% 0;
}
.footer_container{
  display: flex;
  flex-direction: row;
  align-items: start;
  border-top: 2% solid darkred;
}
footer a{
  text-decoration: none;
  color: rgb(255, 240, 240);
  font-size: 1.5vw;
}
footer a:hover{
  color: rgb(255, 0, 0);
  
}