phone.css

@media only screen and (max-device-width: 425px) {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;

  }

  .grid-container {
    display: inline-block;
    /* padding: 55px; */
    height: 100vh;
    width: 100vw;
    flex-direction: row;
    display: grid;
    grid-template-columns: 3fr;
    grid-template-rows: 3fr 3fr 3fr 3fr;
    grid-template-areas:
      'left '
      'right '
      'strategy '
      'navbar ';

    justify-content: space-between;
  }

  #navbar {
    grid-area: navbar;
    position: fixed;
    background: rgb(255, 255, 255);
    top: 90%;
    width: 100%;
    height: 100%;
    
  }
 

  #navbar img {
    display: none;
  }
  

  .search{
    float: right;
    margin-right:35px ;
    margin-bottom: 900px;
    color: grey;
  }
  .icon {
    min-width: 60px;
    border-radius: 6px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 102px;
}
#navbar li:hover{
  /* border: 2px solid red; */
  width: 55px;
  background: none;
}

  .place{
    display: none;
  }

  .midnav {
    display: flex;
    font-size: 5px;
    width: 10px;
    margin: 0px;
    padding: 2px;
    justify-content:space-between ;
  }
  .midnav a{
    color: grey;
  }
  .midnav span{
    display: none;
  }
  .hori{
    width: 440px;
  }
  

  #navbar a {
    display: flex;
  }

  /* .sidebar{
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 25%;
    width: 100%;
    height: 250px;
  } */

  #left {
    grid-area: left;
    background: rgb(255, 255, 255);
    /* font-size: 200%; */
    width: 100%;
    height: 100%;
  }
  #left img{
    width: 158px;
    height: 158px;
  }
  .heading1 h1{
    font-size: 5rem;
  }

  .heading1 p{
    font-size: 2rem;
  }


  .year {
    display: flex;
    /* justify-content: space-between; */
    gap: 30px;
  }

  .year p {
    display: block;
  }

  .button {
    padding: 20px 327px;
  }

  #right {
    grid-area: right;
    background: rgb(255, 255, 255);
    font-size: 150%;
    width: 100%;
    height: 100%;
  }

  .goal {
    display: inline;
    justify-content: space-between;
  }

  .goalp {
    display: flex;
    margin-top: 30px;
  }

  .goal2 {
    margin: 0;
  }

  .goal3 {
    margin-left: 30px;
  }
  hr{
    width: 150;
  }

  #strategy {
    grid-area: strategy;
    background: rgb(255, 255, 255);
    margin-bottom: 60px;
    font-size: 70%;
    width: 100%;
    height: 100%;
  }
  .button2 {
    padding: 25px 380px;
    margin-left: 0px;
  }

  input[type="range"] {
    width: 580px;
  }
  .heading4{
    font-size: 25px;
  }
  .range{
    font-size: 20px;
  }

  th,
  td {

    padding-right: 70px;
  }

  table {
    border-spacing: 40pxpx;
    font-size: 25px;
  }

  .info a {
    margin-left: 1px;
    padding: 10px 135px;
  }
  .housing{
    display: none;
  }
  .sidebar{
    background-color: aqua;
    grid-area: navbar;
    position: fixed;
    /* background: rgb(255, 255, 255); */
    top: 90%;
    width: 100%;
    height: 100%;
    padding: ;
  }
  /* .menu{
    display: flex;
    font-size: 5px;
    width: 10px;
    margin: 0px;
    padding: 2px;
    justify-content:space-between ;
  } */
  .menu a{
    display: flex;
  }
  .search-box{
    display: none;
  }
  .nav-link{
    display: flex;

  }
  .text{
    display: none;
  }
  .menu-bar{
    display: flex;
    font-size: 5px;
    width: 10px;
    margin: 0px;
    padding: 0px;
    justify-content:space-between ;
  }
  .bx-search{
    display: none;
  }
}