.menulogo {
  display: inline-block;
  filter: invert(100%);
}
.checkbtn {
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 25px;
  cursor: pointer;
  display: none;
}

#check {
  display: none;
}

@media (min-width:300px)and (max-width: 450px)  and (-webkit-max-device-pixel-ratio: 4){
  .menu ul li a {
    font-size: 16px;
  }
  header{
    justify-content: flex-end;
  }
}

@media (min-width:300px)and (max-width: 450px)  and (-webkit-max-device-pixel-ratio: 4){
  .checkbtn {
    display: block;
    position: fixed;
    margin-right: 80px;
  }
  header{
    background-color: #000000c2;
  }

  .menu ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #000000c2;
    top: 20px;
    right: -120%;
    text-align: center;
    transition: all .5s;
  }

  .menu ul li {
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }

  .menu ul li a {
    font-size: 20px;
  }

  .menu ul li a:hover a.active {
    background: none;
    color: #0082e6;
  }

  #check:checked~ul {
    right: 0;
    
  }
}

@media (min-width:300px)and (max-width: 450px)  and (-webkit-max-device-pixel-ratio: 4){
  .side{
    background-image: none;
    height: 16%;
    align-items: flex-end;
  }
  #bt2{
    background-image: linear-gradient(to right,rgb(9, 14, 18)22%,red 130%);
    border-radius: 0px;
  }
  #into1{
    font-size: 8px;
  }
  #imge{
    height: 20px;
  }
  .con{
    height: 60vh;
  }
}
@media (min-width:150px)and (max-width: 300px)  and (-webkit-max-device-pixel-ratio: 4){
  .container{
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .card{
    height: auto;
    width: auto;
  }
  .card img {
    width: 44vw;
    padding: 15px;
  }
}