#nav{
    /* position: sticky; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    background-color: #6c757d;
}
#nav>div:nth-child(1){
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: auto;
    height: auto;
    cursor: pointer;
    
}
#nav>div:nth-child(1)>div{
  color: white;
    font-size: 20px;
}
#logo{
    margin-right: 15px;
    
}
#logo>img{
    height: 50px;
}
#username{
  display: block;
  margin-left: 50px;
}
.dropdown{
border: none;
background-color: #6c757d;


}
#bar{
background-color: #6c757d;
width: 60px;
border: none;
padding: 10px;
}
#bar:hover{
background-color:#455A64 ;
}
/* #barr>img{
background-color: white;
} */
.para{
text-align: center;
cursor: pointer;
}
.para:hover{
  text-decoration: underline;
color: black;
}
.offcanvas-body,.offcanvas-header{
background-color: #6c757d;
color: white;
}
#money{
width: 70px;
height: auto;
border: none;
border-radius: 5px;
background-color: #6c757d;
color: white;
padding: 10px;
padding-top: 8px;
padding-bottom: 13px;
}
#money:hover{
background-color:#455A64 ;
}
#banner{
 overflow: hidden;
/*overflow-x: hidden;
overflow-y: hidden; */
position: relative;
width: 100%;
max-width: 100%;
}
#banner>img{
width: 100%;
height: 500px;
max-width: 100%;
filter: brightness(60%);
}
.child{
display: grid;
grid-template-columns: repeat(5,1fr);
align-items: center;
width: 100%;
max-width: 100%;
}
input{
border: none;
}
select{
font-size: 50px;
border: none;
}
.child>div{
border:1px solid #6c757d;

}
/* #inner_search{
    width: 230px;
} */
.common{
display: flex;
align-items: center;
width: 100%;
}
/* .common>div:nth-child(2){
    width:auto;
} */
.common>div{
padding: 5px 2px;
}
.imgas>img{
width: 100%;
height: 25px;
}

.search_bar{
padding: 10px;
width: auto;
margin: auto;
background-color: white;
margin-top: 20px;
}
#heading{
color: white;
grid-column-start: 2;
grid-column-end: 7;
}
#heading>div>h1{
font-size: 25px;
/* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */

}
.banner_search{
/* display: block; */
position: absolute;
display: grid;
grid-template-columns: repeat(7,1fr);
grid-template-rows: auto;
margin-top: -350px;
text-align: center;
box-sizing: border-box;
font-family: ProximaNova,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-weight: 400;
text-rendering: optimizeLegibility;
text-size-adjust: 100%;
width: 100%;
max-width: 100%;

}
.search_bar{
    grid-column-start: 1;
grid-column-end: 8;
}

#search_btn{
    padding: 7px 0px;
color: white;
background-color: rgb(11, 112, 195);
border: none;
padding-top: 6px;
width: 100%;
}
#search_btn:hover{
    background-color: rgb(19, 142, 213);
}
/* #guest-child{
padding: px 0px;
} */
#guest{
padding: 1px 0px  ;
}
#search_var{
border: none;
width: 150px;
}
#sc_head{
    width: 90%;
    margin: auto;
    font-weight: 300;
    font-size: 30px;
}
#main{
    margin-top: 30px;
    position: relative;
    width: 100%;
    max-width: 100%;
}
#main>div:nth-child(2)>img{
    width: 40px;
    height: 40px;
    margin-top: -253px;
    background-color: white;
    border-radius: 50px;
    color: white;
}
#main>div:nth-child(3)>img{
    width: 40px;
    height: 40px;
    margin-top: -280px;
    margin-left: 1480px;
    background-color: white;
    border-radius: 50px;
    color: white;
    max-width: 40px;
}
#top_cont{
    /* display:flex; */
    display: grid;
    grid-template-columns:repeat(16,1fr);
    max-height: 200px;
    /* position: relative; */
    padding: 10px;

    text-align: center;
    overflow-x: auto;
}
#top_cont::-webkit-scrollbar {
   width: 0px;
  }
  /* #top_cout::-webkit-scrollbar-button{
    width: 20px;
  } */
#adjustit{
    width: 230px;
    height: 200px;
    border-radius: 10px;
    cursor: pointer;
}
#child_div{
    min-width: 200px;
    margin-left: 20px;
    margin-right: 25px;
}
#scrl_btn{
    position: absolute;
    margin-left: 1400px;
    margin-top: -20px;
}
#realone{
    margin-top: -60px;
    font-size: 25px;
    color: white;
    background-color: #6c757d;
}
.top_second{
    display: flex;
    justify-content: space-evenly;
    width: 95%;
    height: auto;
    margin: auto;
}
.top_one{
    width: 30%;
    height: auto;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    text-align: center;
}
.top_two{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    width: 65%;
    height: auto;
    text-align: center;
    gap: 15px;
}
#innertop_one{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    
}
.workimg>img{
    width: 60px;
    height: 60px;
}
#innertop_one>div>p{
    font-weight: 300;
}
#top_firstnam{
    font-size: 25px;
    font-weight: 300;
}
#topadjustit>img{
   
    width: 230px;
    height: 150px;
    text-align: center;
    margin: auto;
    border-radius: 5px;
    filter: brightness(40%);
    cursor: pointer;
}
#topchild_div{
 width: 230px;
 height: 150px;
 position: relative;

}
.centered {
  text-align: center;
    position: absolute;
    color: white;
    font-size: 20px;
    margin-top: -90px;
    width: 100%;
    cursor: pointer;
  }
  .mid_thirdbot{
    width: 95%;
    display: flex;
    justify-content: space-between;
    height: auto;
    margin: auto;
    margin-top: 50px;
  }
  .mid_thir1{
    width: 49%;
    padding: 30px;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  }
  .mid_thir2{
    width: 49%;
    padding: 30px;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;

  }
  .mid_thir2{
    width: 49%;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;

  }
  .dous>img{
    width: 50px;
    height: 50px;
  }
  .gid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-bottom: 20px;
  }
  .hed>h4{
    font-weight: 300;
    padding-bottom: 25px;
  }
  .gid>div>p{
    font-weight: 300;
  }
  .mid_thir1>button{
    padding: 10px 20px;
    background-color: #39f;
    color: white;
    border: none;
    font-size: 15px;
  }
  .mid_thir2>button{
    padding: 10px 20px;
    background-color: #39f;
    color: white;
    border: none;
    font-size: 15px;

  }
  .mid_lat{
    width: 95%;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 60px;
  }
  .mid_lat>div:nth-child(1){
    margin-bottom: 30px;
  }
  .mid_lat>div>h4{
    font-weight: 300;
    font-size: 25px;
   
  }
  .mid_lastchild{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 20px;
  }
 
  .mid_lastchild>div>div>img{
    width: 260px;
    height: 150px;
    text-align: center;
    margin: auto;
    border-radius: 5px;
    filter: brightness(40%);
    cursor: pointer;
  }
  .mid_lastchild>div{
    width: 260px;
    height: 200px;
    position: relative;
    border-radius: 5px;
  }
  .mid_lastchild>div>div>p{
    text-align: center;
    position: absolute;
    color: white;
    font-size: 20px;
    margin-top: -90px;
    width: 100%;
    cursor: pointer;
  }

  .bottom{
    width: 95%;
    margin: auto;
  }
  .bottom>h1{
    font-weight: 300;
    font-size: 30px;
  }
 
  .bool{
    display: flex;
    margin-bottom: 40px;
  }
 /* .dip{
  margin-left: 30px;
 }
 .but>p>button{
  background-color: white;
  color: black;
  font-weight: 300;
  border: none;
 } */

  .but>button{
    border: none;
    background-color: white;
    font-weight: 300;
  }
  .dip>button{

    border: none;
    background-color: white;
    font-weight: 300;
    margin-left: 20px;
  }
  .but>button:hover{
    text-decoration: underline;
    text-decoration-color: #1e87f0;
  }
  .dip>button:hover{
    text-decoration: underline;
    text-decoration-color: #1e87f0;
  }
  .contrys{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 10px
    ;
    width: 95%;
    margin: auto;
  }
  .contrys>div>h6{
    font-size: 15px;
    font-weight: 400;
    
  }
  .contrys>div>p{
    font-weight: 300;
  }
  .contrys>div:hover{
    text-decoration: underline;
    cursor: pointer;
  }
  
  #tect{
    margin-top: 15px;
    font-weight: 400;
  }

  .bottom-tip{
    height: auto;
    padding: 60px 150px;
    background-color: black;
}
.content{
    color: white;
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 20px;
}
.manage{
display: flex;
}
.manage>div>img{
    width: 30px;
    height: 30px;
}
.ifnot{
    display: flex;
    
}
.ifnot>div{
    margin-left: 8px;
}
.ifnot>div>img{
    width: 20px;
    height: 20px;
}
.first-cell{
width: 200px;
}
.first-cell>p{
    font-size: 10px;
    font-weight: 500;
}
.second-cell{
    width: 200px;
}
.notif>img{
    width: 200px;
    height: 50px;
}
.images{
    display: flex;
}
.bttn{
    border: none;
    padding: 10px 20px;
    background-color: aqua;
    color: white;
    border-radius: 5px;
    font-size: 20px;
    font-weight: 500;
}
.notif{
    background-color: white;
}



@media screen and (min-width:701px) and (max-width:1000px) {
    .child{
        grid-template-columns: repeat(2,1fr);
        }
    .child>div:nth-child(5){
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .top_second{
      flex-direction: column;
      text-align: center;
    }


    #topadjustit>img{
   
      width: 100%;
  }
  #topchild_div{
   width: 100%;
  }





    .top_one{
      width: 100%;
    }
    .top_two{
      grid-template-columns: repeat(2,1fr);
      width: 100%;
    }
    .mid_thirdbot{
      flex-direction: column;
    }
    .mid_thir1{
      width: 95%;
      margin: auto;
    }
    .mid_thir2{
      width: 95%;
      margin: auto;
    }
    .mid_lat{
      text-align: center;
    }
    .mid_lastchild{
      grid-template-columns: repeat(2,1fr);
      
      width: 95%;
      margin: auto;
      /* gap: 20px; */
    }
    .contrys{
      grid-template-columns: repeat(3,1fr);
    }
  }
  @media screen and (min-width:100px) and (max-width:700px) {
    .child{
        grid-template-columns: repeat(1,1fr);
        }
        .top_second{
          flex-direction: column;
        }
        #topadjustit>img{
   
          width: 100%;
      }
      #topchild_div{
       width: 100%;
      }
        .top_one{
          width: 100%;
        }
        .top_two{
          grid-template-columns: repeat(1,1fr);
          width: 100%;
        }
        .mid_thirdbot{
          flex-direction: column;
        }
        .mid_thir1{
          width: 95%;
          margin: auto;
        }
        .mid_thir2{
          width: 95%;
          margin: auto;
        }
        .mid_lat{
          text-align: center;
        }
        .mid_lastchild{
          grid-template-columns: repeat(1,1fr);
          
          width: 95%;
          margin: auto;
          /* gap: 20px; */
        }
        .mid_lastchild>div{
          margin-left: 25%;
        }
        .contrys{
          grid-template-columns: repeat(1,1fr);
        }
}