#hamburger,#hamBtn{
    display:none;
}

#logo {
   
  width: 75px;
  height: 40px;
  border-radius: 22px;
}

#nav {
  display: flex;
  justify-content: space-between;
  /* background-color: #dedede; */
  border: 0px solid black;
  width: 90%;
margin: auto;
  padding: 13px;
}
#nav>div:nth-child(2){
    display: flex;
    justify-content: space-evenly;
    gap:20px;
}
body {
  /* width: 90%; */
  border: 0px solid red;
  margin: auto;
  font-family: sans-serif;
}
#navbtnDiv {
    border:0px solid red;
    width:40%;
 color:white;
}
#navbtnDiv a{
    border:0px solid green;
    color:white;
    text-decoration: none;
}
/* #navbtnDiv>a{
border:1px solid green;
display:inline-block;
} */
#navBtn {
  width: 80%;
  color:white;
  border:1px solid rgb(4, 0, 255);
  /* height: 50px; */
 
  border-radius: 7px;
  background-color: #f39c12 ;
  border: 0px solid green;
  color: white;
  font-size: 14px;
  line-height: 18px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  font-weight: bold;
}
.logoutBtn{
    width: 80%;
  color:white;
  border:1px solid rgb(4, 0, 255);
  /* height: 50px; */
 
  border-radius: 7px;
  background-color: red ;
  border: 0px solid green;
  color: white;
  font-size: 14px;
  line-height: 18px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  font-weight: bold;
}
#top {
  border: 0px solid black;
  height: auto;
  padding: 11px;
  padding-bottom: 7%;
  /* background-color: #90d1e9; */
  
  background-image: linear-gradient(rgb(41, 81, 82), rgb(213, 162, 171));
}

#find{
    color:white;
    /* border:1px solid white; */
    width:70%;
    margin:auto;
    text-align: center;
    margin-top: 5%;
    /* font-family:sans-serif; */
    font-weight:500;
}
#topForm{
    border:1px solid white;
    /* box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; */
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:5px;
    text-align: center;
    width:70%;
    margin:auto;
    /* height:20vh; */
    margin-top: 3%;
    padding:15px;
    background-color: white;
    border-radius: 10px;
}
#topForm input{
    padding:7px;
     border-radius: 7px;
     text-align: center;
     border:1px solid black;
}
#topFormsearch{
    text-align: center;
    margin:auto;
    border-radius: 7px;
    padding: 10px;
    width:60px;
    background-color: #F39C12  ;
     border:none;
}
#topBottomDiv{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    gap:5px;
    border:0px solid red;

     width:72%;
     margin:auto;
     border-radius: 10px;
     margin-top: 3%;

}
#topBottomDiv>div{
    border:2px solid white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
     padding:15px;
}
#pTag img{
width:10%;
display:flex;
}
#middle{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap:5px;
    border:0px solid black;
}
#middle img{
    width:90%;
    height:auto;
    
}
#middle>div{
    border:0px solid red ;
   
}
/* #middle>div:nth-child(1){
    width:100%;
    margin:auto;
    text-align: center;
} */
#text{
    border:0px solid rgb(79, 46, 46) ;
margin:auto;
    text-align: center;
     margin-top: 10%;
     width:90%;
     padding:15px;
   
}
#text button{
    background-color: #F39C12;
    padding:15px;
    border-radius: 7px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border:none;
}
#midThird{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap:7px;
    height: 50vh;
    border:0px solid black;
    width:99%;
}
#midThird div{
    border:0px solid rgb(108, 21, 21);
}

#midThird>div:nth-child(2){
    text-align: center;
    /* margin-top: 4%; */
    width:85%;
    border:0px solid rgb(108, 21, 21);
}
#midThird>div:nth-child(2) button{
    background-color: #F39C12;
    border:none;
    padding:10px;
    border-radius: 10px;
}
#thirdDiv{
    border:0px solid black;
    text-align: center;
    margin-top: 4%;
}

#thirdDiv>div:nth-child(2){
    border:0px solid red;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:10px;
    text-align: center;
    /* margin-top: 2%; */
    padding:10px;
    border-radius: 7px;

}

#third{
    
    padding: 15px;
    border:2px solid #F39C12;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
#fourthImg{
    width:100%;
    border:0px solid red;
    /* height:5%; */
}
.fifth{
    border:1px solid black;
    margin-top: 10%;
}

.sixth{
    border:1px solid rgb(170, 8, 35)
}
#middle2{
    margin-top: 10%;
     display: grid;
    grid-template-columns: repeat(2,1fr);
    gap:5px;
    border: 0px solid red;
}

#eigth{
    margin-top: 10%;
    border:0px solid blue
}
#frequently{
    border:0px solid red;
    width:80%;
    margin:auto;
    text-align: center;
}
#questions{
    border:0px solid red;
    font-family:sans-serif;
    width:60%;
    margin:auto;
    text-align: center;

}
#questions>div{
    border:0px solid rgb(179, 0, 255);
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    padding:7px;
    margin-top: 5px;
    border-radius: 7px;
    margin-bottom: 3%;
}
#footer1{
    display:grid;
    grid-template-columns: repeat(5,1fr);
    gap:5px;
    border:0px solid black;
    margin-top: 2%;
    width:98%;
    margin:auto;
    text-align: center;
    background-color: #e8f2f5;
    padding:10px;
}
#footer1 h3{
    color:teal;
}

#footer1 p{
    color:grey;
}
#footerMain{
    margin-top: 2%;
    display:grid;
    grid-template-columns: repeat(5,1fr);
    gap:5px;
    background-color: #345b6f;
    border:0px solid black;
    color:white;
}
#footerMain>div{
    border:0px solid red;
    text-align: center;
}

#FooterLogo{
    width:100%;
   
}
#footerMain>div:nth-child(1) {
    border:0px solid blue;
    
}

#footerMain>div:nth-child(1) div:nth-child(1){
    border:0px solid green
}
#icons {
    padding:7px;
    display:grid;
    grid-template-columns: repeat(5,1fr);
    gap:3px;
}
#icons img{
    width:80%;
}
h1{
    font-family: sans-serif;
}


/* hover styling */

#topForm:hover{
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}
#pTag:hover{
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
border:none;
}
#navBtn:hover{
   filter:brightness(110%);
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}
#findd:hover{
     color:white;
     background-color: red;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    border:1px solid white
}
#third:hover{
   box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    border:1px solid red;

}
/* MEDIA QUERIES */
@media all and (min-width:320px) and (max-width:780px)  {
   #nav{
    width:100%;
    display:flex;
    justify-content: space-between;
    padding:10px;
   }
  #nav>div:nth-child(2){
    display:none;
   }
   #hamburger{

    display:block;
   }
   #hamburger:hover #hamBtn{
display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap:10px;
   }
   #hamBtn button{
    width:100%
   }
  #find{
width:100%;
margin:auto;
   }
    #topForm,#topBottomDiv{
    display:grid;
    grid-template-columns: repeat(1,1fr);

   }
   #middle,#midThird,#middle2{
    display:grid;
    grid-template-columns: repeat(1,1fr);
    margin-bottom: 13%;
   }
   #midThird{
    margin-bottom: 3%;
   }
    #thirdDiv>div:nth-child(1){
    display: none;
   }
    #thirdDiv>div:nth-child(2){
    /* display: none; */
    margin:auto;
     display:flex;
    flex-wrap: wrap;
margin-top: 2%;
    border: 0px solid red;
   }
   #midThird>div:nth-child(2)
   {
    display: none;
   }
   
   #midThird>div:nth-child(1) img{
    width:95%;
    border:0px solid black;
   }
   #footer1{
    display:flex;
    flex-wrap: wrap;
   }
   #footerMain{
    display:flex;
    flex-direction: column;
   }
    #footerImg img{
    width:70%;
   }
    #third{
        margin:auto;
    margin-top: 10%;
    border:0px solid green
   }
   #fourth>div:nth-child(1){
    border:0px solid black;
    width:80%
   }
     #fourthImg{
    border:0px solid red;
    margin-left: 20px;
   }
   #middle2>div:nth-child(1){
    border:0px solid red;
    width:90%;
   }
}
@media all and (min-width:780px) and (max-width:1500px){
     #nav{
    width:100%;
    display:flex;
    justify-content: space-between;
    padding:10px;
   }
  #nav>div:nth-child(2){
    display:none;
   }
   #hamburger{

    display:block;
   }
   #hamburger:hover #hamBtn{
display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap:10px;
   }
   #hamBtn button{
    width:100%
   }
    #find{
width:90%;
margin:auto;
   }
   #topForm,#topBottomDiv{
    display:flex;
    flex-wrap: wrap;
    width:auto;
   }
    #middle,#midThird,#middle2{
    display:grid;
    grid-template-columns: repeat(1,1fr);
    margin-bottom: 13%;
   }
   #midThird{
    margin-bottom: 3%;
   }
   #thirdDiv>div:nth-child(1){
    display: none;
   }
   #thirdDiv>div:nth-child(2){
    /* display: none; */
   
    display:flex;
    flex-wrap: wrap;
margin-top:2%;
   width:auto;
    border: 0px solid red;
   }
   #midThird>div:nth-child(2)
   {
    display: none;
   }
   #midThird>div:nth-child(1) img{
    width:95%;
    border:0px solid black;
   }
    #footer1{
    display:flex;
    flex-wrap: wrap;
   }
    #footerMain{
    display:flex;
    flex-direction: column;
   }
   #footerImg img{
    width:70%;
   }
   #third{
    margin:auto;
    margin-top: 10%;
    border:0px solid green
   }
    #fourth>div:nth-child(1){
    border:0px solid black;
    width:80%;
   }
   #fourthImg{
    border:0px solid red;
    margin-left: 20px;
   }
   #middle2>div:nth-child(1){
    border:0px solid red;
    width:90%;
   }
}