/* ******header start here****** */
*{
    font-family: 'Roboto',sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.border{
    text-align: center;
    background-color: #64B5F6;
    padding: 5px;
}


.border>a{
    text-decoration: none;
    color: white
}

.nav{
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    margin-bottom: 20px;
   
}
.nav>img{
    width: 12%;
    margin-left: 20px;
    cursor: pointer;
}

.search{
    width: 50%;
    align-items: center;
    justify-content: space-between;
}

.search>div>input{
    width: 100%;
    padding: 8px;
    border: 2px solid rgb(222, 216, 216);
    border-radius: 5px;
}

/* For screens smaller than 600px */
@media (max-width: 600px) {
    body {
      font-size: 14px;
    }
    /* Other styles for smaller screens */
  }
  
  /* For screens between 600px and 900px */
  @media (min-width: 600px) and (max-width: 900px) {
    body {
      font-size: 16px;
    }
    /* Other styles for medium screens */
  }
  
  /* For screens larger than 900px */
  @media (min-width: 900px) {
    body {
      font-size: 18px;
    }
    /* Other styles for larger screens */
  }
  
#container {
    margin-top: 25px;
    width: 90%;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 10px;
        text-align: center;
    }


.search>div:nth-child(1){
    width: 100%;
}

.search>div:nth-child(2){
   position: relative;
   right: 5%;
   cursor: pointer;
}

.display>div:nth-child(2){
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  margin-top: 10px;
}


.icons{
    margin-right: 30px;
}

.icons>a{
    width: 15%;
    font-size: 22px;
    margin-left: 13px;
    color: black;
}

.drop{
    width: 92%;
    height: 30px;
    display: flex;
    gap: 33px;
    text-align: center;
    margin: auto;
    cursor: pointer;
    /* white-space: nowrap;
    overflow: auto; */
   
}

.dropdown {
  position: relative;
  display: inline-block;
 
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  margin-top: 10px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  
}
.ok{
    display: flex;
    gap: 50px;
    /* border: 1px solid red; */
    /* margin-top: 20px; */
}


.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

/* ******header end here******* */

.pk{
    margin-left: 52px;
    margin-top: 22px;
}

H3{
    margin-top: 15px;
}
.append{
    margin-top: 20px;
}

#container {
    margin-top: 0px;
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    text-align: center;
    /* border: solid red; */
    /* height:7040px; */
}
        
#container div {
    width: 95%;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    padding: 5px;
}

#container div img {
    width: 100%;
    border-radius: 10px;
    display: block;
    margin: auto;
}
#container div:hover{
    scale: 1.05;
}

#container div button{
    color: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    background-color: #64B5F6;
    border: 0px;
    margin-top: 10px;
}

#main{
    width: 95%;
    margin: auto;
    height: 7050px;
    display: flex;
}

.right{
    width: 17%;
    height: 500px;
}

.left{
    width: 83%;
    height: 500px;
}

#high{
    width: 80%;
    padding: 6px;
    margin: auto;
   display: block;
   font-size: 20px;
   font-weight: bold;
   cursor: pointer;
   margin-top: 23px;
   border: 0px;
   background-color: #64B5F6;
   border-radius: 10px;
   color: white;
}
#high:hover{
    background-color: rgb(83, 105, 233);
    color: white;
}

#low{
    width: 80%;
    padding: 6px;
    margin: auto;
   display: block;
   font-size: 20px;
   margin-top: -8px;
   font-weight: bold;
   cursor: pointer;
   border: 0px;
   background-color: #64B5F6;
   border-radius: 10px;
   color: white;
}
#low:hover{
    background-color: rgb(83, 105, 233);
    color: white;

}

#filter{
   width: 80%;
   padding: 8px;
   margin: auto;
   display: block;
   font-size: 17px;
   margin-top: 15px;
   font-weight: bold;
   cursor: pointer;
   border: 0px;
   background-color: #64B5F6;
   border-radius: 10px;
   color: white;
}

/* **********footer start here*********** */
.footer{
   
    border: 1px solid #595353;
    width: 100%;
    height: 500px;
    margin-top: 80px;
    background-color: #50514f;
    
}
.cont1{
   width: 90%;
   height: 400px;
   margin-top: 80px;
   margin-left: 50px;
   display: flex;
}

.b1{
    width: 30%;
}
.b2{
    width: 70%;
}

h2{
 color: white;
}

.para{
    color: white;
    margin-top: 15px;
    font-size: 14px;
}

.but{
    height: 45px;
    width: 70%;
    background-color: #65c297;
    cursor: pointer;
    margin-top: 40px;
    color: white;
    font-size: 16px;
    letter-spacing: 3px;
    border-radius: 8px;
}

.ic{
    margin-top: 25px;
}

.ic>a:hover{
    filter: invert(1);
}

.ic>a{
    padding: 2px;
    font-size: 33px;
    color: white;
}

.p4{
    color: white;
    margin-top: 35px;
    font-weight: 0;
    font-size: 11px;
}

.line{
    border: 1px solid white;
    height: 78%;
}

.but1{
    height: 60px;
    border-radius: 12px;
    width: 85%;
    background-color: rgb(236, 152, 61);
    color: black;
    margin-left: 60px;
    font-size: 17px;
}

span{
    text-decoration: underline;
    margin-left: 20px;
    font-size: 14px;
}

.last{
    height: 280px;
    width: 80%;
    margin-top: 40px;
    margin-left: 60px;
    display: flex;
}
.last>div{
    width: 100%;
}

.res{
    color: white;
    margin-left: -20;
}

.p3{
    font-size: 14px;
    font-weight: bolder;
}
p{
    font-size: 13px;
    margin-top: 11px;
}
/* **********footer end here********** */