.b {
 width: 100%;
 height: 100%;
margin: 0;
padding: 0;
background-color:#a2a4ba;
overflow-y: scroll;
}

.h1 {
width: 100%;
min-height: 80%;
background-color:white;
overflow: hidden;
}
.fixed{ 
position:fixed;
z-index: 9999;
width: 100%;
background-color: white;
max-height: 10vh;

 top:0
}

.title{
 font-size:1vw;
 text-align: center;
font-family:'Cairo', sans-serif;; 
 padding: 0;
 margin: 1px;
}
.title2{
 margin-left:2vh;
 padding-bottom:0;
  width:13%;
 display:inline-block;
 
}
.nav{
float: right;
text-align: center;
margin: 0;
padding-right:3vw;
}
.nav a{
 text-decoration: none;
 font-family: 'Monda', sans-serif; 
 padding-right: 1vw;
 padding-left: 1vw;
 color:black;
 font-size:1.3vw;
 border-left-style: solid;
border-left-width: 0.3vh;
border-left-color: #a2a4ba}
.nav a:hover{
 color:#a2a4ba;
 font-size:1.7vw;
 transition-duration: 0.4s;

}

.hr{
 display: flex;
 height:69vh;
 background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(jhj.jpg);
 width: 100%;
 background-position: center;
  background-repeat:no-repeat;
  background-size: cover;
  position: relative;
 padding: 122px;
 
}
.txt{
 margin: auto;
 padding: 3vh;
 text-align: center;
 line-height:5vh;
 height: 50vh;
 
}


.herotxt{
 font-size: 4vw;
 color: white;
font-family: 'Monda', sans-serif; 
padding: 22px;}

.ht{
 font-size: 2.5vw;
 color: white;
font-family: 'Titillium Web', sans-serif;
 letter-spacing:4px;
 padding: 12px;
 
}

.h2{
 font-size: 1.7vh;
 font-family: 'Monda', sans-serif;
text-decoration: none;
  background-color:#e7e7e7;
 padding: 1vh;
 color: black;
}

.dis{
 width: 40vh;
 margin: 2vh;
 
}


h4.ht{
  font-size: 2.5vw;
 color: black;
font-family: 'Titillium Web', sans-serif;
 letter-spacing:2px;
 
}
.jj{
  width: 6vh;
 text-align: center;
 text-decoration: none;
 
}
.margin{
width: 70%;
background-color: antiquewhite;
 margin:auto;
}
h5.ht{
  font-size: 3.5vw;
 color: black;
font-family: 'Titillium Web', sans-serif;
 letter-spacing:1px;
}
 

.box1{
 width:15vw;
 height: 3vh;
 background-color: #dfe0e8;
 border:2px;
 border-color: #979aaa;
 border-style: solid;
 margin: 1vw;
 display: inline-block;
 border-radius: 6px;

}

.box2{
 width:25vw;
 height: 3vh;
 background-color: #dfe0e8;
 border:2px;
 border-color: #979aaa;
 border-style: solid;
  margin: 1vw;
 display: inline-block;
  border-radius: 6px;
}

.box3{
 
 width:30vw;
 height: 20vh;
 background-color: #dfe0e8;
 border:2px;
 border-color: #979aaa;
 border-style:solid;
  margin: 1vw;
 display: inline-block;
  border-radius: 6px;
 
}

button{
 width: 10vw;
 height: 5vh;
 text-align: center;
 padding: 5px;
 text-decoration: none;
 margin-left:5vh;
 background-color: #dfe0e8;
 border-color: #979aaa;
 border-radius: 6px;
 
 
}
button:hover{
 
background-color: #cc474b;
}
.ul{
 text-align: justify;
 margin-top: 0px;
 list-style-type: none;
 padding: 10px;
}

div form{
 margin:auto;
 
 
}

.frm{
 margin-top:2px;
 margin-bottom: 15px;
 text-align: left;
 font-size: 2.5vw;
 color: black;
font-family: 'Titillium Web', sans-serif;
 letter-spacing:4px;
 margin-left: 90px;
 margin-right: 190px;
}



.ff{
 margin: auto;
 border: 12px hidden;
 border-radius: 13px;
 padding: 10px;
 width: 80%;
 font-size: 1vw;

}
.ff th{

padding: 7px;

}

.ff td{
 border-top: 0.51px solid #979aaa;
padding: 7px;
 background-color:white;
 color:#83859a;
 
 
}
.ff td:hover{
 color:#b0c4de;
 
}
.div22{
 width: 90%;
 margin-top:150px;
 margin-right: 9vw;
 margin-left: 5vw;
max-height: 90%; 
 padding-left: 1vw;
 padding-top: 12px;
 background-color: white;
 font: 'Titillium Web', sans-serif;
 color:Black;
 font-size: 1.2vw;
 border: 20px;
 border-radius: 10px;
 box-shadow: 9px 9px 9px 9px #83859a ;
}
.div222{
 margin-top:150px;
 margin-left: 100px;
 width: 40%;
 max-height: 90%; 
 padding-left: 4vw;
 padding-top: 1.9vw;
 background-color: white;
 font: 'Titillium Web', sans-serif;
 color:Black;
 font-size: 1.2vw;
 border: 20px;
 border-radius: 10px;
 box-shadow: 9px 9px 9px 9px #83859a ;
}

.box5{
 width:40%;
 margin-top: 30vh;
 margin-left: 30vw;
  border: 20px;
 border-radius: 10px;
 box-shadow: 9px 9px 9px 9px #83859a;
 font-family:'Titillium Web', sans-serif;
 font-weight: 400;
background-color: #b0c4de;
 
}
.column{
 height: 20vh;
  float: left;
 margin: auto;
  width: 20vw;
  padding: 5px;
list-style: none;
}
.imglib{
 
width: 100%;
 height:100%;
}
.row:after {
  content: "";
  clear: both;
  display: table;
}

.libframe{
  height: 70%;
  width: 90%;
 margin-left: auto; 
 margin-right: auto;
 padding: 0;
  
 border: 10px black dotted;
 
}
.infobox{
  background-color: white;
  mmin-height: 20%;
  min-width: 20%;
 border:1.5px;
 position: absolute;
  border-style: solid;
 border-color: black;
 border-radius: 5%;
 font-family: 'Titillium Web', sans-serif;
 font-size: 95%;
 padding-top:1vh;
 margin: 1vh;
 padding-left: 5px;
 padding-right: 5px;
 opacity: 65%;
 font-weight: 900;
 text-align: left;

 }
 
.hide{
  display: none;


}

.block{
  width: 30%;
  height: 50%;
}

.modal{
   display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 10vh; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* Modal Content */
.modal-content {
  background: rgb(255,242,204);
  background: radial-gradient(circle, rgba(255,242,204,1) 0%, rgba(232,220,184,1) 35%, rgba(223,205,152,1) 100%);
  border-radius: 0% 0% 0% 0% / 0% 0% 0% 0% ;
  box-shadow: 20px 20px rgba(0,0,0,.15);
  transition: all .4s ease;
  margin: auto;
  padding: 20px;
  width: 65%;
  height: 85%;
  font-family: 'Reenie Beanie', cursive; ;

}
.modal-content:hover {
  border-radius: 0% 0% 50% 50% / 0% 0% 5% 5% ;
  box-shadow: 10px 10px rgba(0,0,0,.25);
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  top: 23px;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;}