@media screen and (max-width:900px) {
    .navbar ,footer{
        grid: auto-flow dense/ 1fr 1fr;
    }
    .navbar {
        display: flex;
        transition: all .5s;
    }
    #logo{
        height: 6rem;
        margin: 1rem;
        justify-self: start;
    }
    .navlist {
        display: none;
        flex-direction: column;
    }
    .burger {
        display: inline-block;
    }
    .line {
        width: 33px;
        background-color: black;
        height: 3px;
        margin: 5px 2px;
    }
     /* Adding transform to the X */
     .burger.close {
        transform: rotate(180deg);
    }
    /* Styling the three lines to make it an X */
    .burger.close .line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
        background-color: rgb(0, 0, 0);
        box-shadow: 0px 0px 10px 0px black;
    }
    .burger.close .line:nth-child(2) {
        opacity: 0;
    }
    .burger.close .line:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
        background-color: rgb(0, 0, 0);
        box-shadow: 0px 0px 10px 0px black;
    }
    .line-click2{
        transform: rotate(.6turn);
    }
    .dispalychanger{
        display: flex;
    }
    .about-main {
        flex-direction: column;
        align-items: center;
        height: 40rem;
        padding: 1rem;
    }
    .about-main p {
        width: 100%;
        overflow: scroll;
        height: 50%;
    }
    .instagram {
        background-color: #dde1e7;
        display: flex;
        flex-direction: column;
        
    }
    /* mapp */
    .mapp {
        flex-direction: column;
    }
    .mapouter {
        height: 50vh;
        padding: 1.5rem;
    }
    .gmap_canvas {
        height: 100%;
    }
    .address p , .about-main p{
        padding: 1rem;
    }
    footer {
        grid: auto-flow dense/ 1fr;
    }
    footer #logo {
        height: 10rem;
    }
    footer .address {
        display: none;
    }
    footer .navlist {
        display: flex;
        flex-direction: row;
    }
    footer .navlist li a span {
        display: none;
    }
    footer .navlist li {
        width: 3rem;
    }

}