@media(max-width:820px){
    body{
        overflow-x: hidden;
    }
    .desktop-h nav{
        display: none;
    }

    .desktop-h  button{
        display: none;
    }

    .desktop-h{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .desktop-h .logo{
        width: 50px;
    }

    .desktop-h .hamburger{
        display: flex;
        width: 20px;
        cursor: pointer;
        right: 35px;
    }
    
    .desktop-h .cancel{
        position: absolute;
        right: 32px;
        width: 20px;
        transform: rotate(360deg);
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .sidebar{
        height: max-content;
        width: 80%;
        padding: 30px 0;
        background-color: hsl(13, 100%, 96%);
        position: absolute;
        top: 90px;
        right: 36px;
        text-align: center;
        opacity: 1;
        transition: all 0.3s ease-in-out;
        /* transform: translate(-50%, -50%); */
        display: block;
        z-index: 5;
        filter: drop-shadow(5px 6px 10px hsl(11, 26%, 83%));
    }

     .h-rotate{
        opacity: 0;
    }

    .sidebar ul{
        padding-top: 5px;
    }

    .sidebar ul li{
        padding: 15px;
        list-style: none;
    }

    .sidebar ul li a{
        font-size: 20px;
        text-decoration: none;
        color: #000;
    }

    .sidebar ul li a:hover{
        color: #fff;
        background-color: #000;
        padding: 10px 20px;
        transition: all 0.1s ease;
    }

    #home .container{
        grid-template-columns: 1fr;
        align-items: center;
        padding: 20px 0;
    }

    #home .container .home_div{
        align-items: center;
        max-width: fit-content;
        display: flex;
        flex-direction: column;
        align-content: center;
        margin-top: 300px;
    }

    #home .container .home_div h1{
        font-size: 30px;
        margin-bottom: 25px;
        text-align: center;
        justify-self: center;
    }

    #home .container .home_div p{
        text-align: center;
        justify-self: center;
    }

    #home .container img{
        top: 100px;
        width: 250px;
        justify-self: center;
        position: absolute;
        z-index: 2;
        align-self: center;

    }

    .bg{
        position: absolute;
        background-color: bisque;
        top: -330px;
        left: -100px;
    }

    #product .container{
        display: grid;
        grid-template-columns: 1fr;
    }
    
    #product .container .product_div{
        justify-content: center;
        text-align: center;
        margin-top: 20px;
    }

    #product .container .product_div h1{
        max-width: initial;
    }
    
    #product .container .product_div p{
        max-width: initial;
    }

    #product .container .product_div2{
        display: grid;
        grid-template-columns: 1fr;
    }

    #product .container .product_div2 .card1{
        margin-right: 0;
    }

    #product .container .product_div2 .card3{
        margin-left: 0;
    }

    #product .container .product_div2 .box h3{
        display: inline;
    }

    /* #product .container .product_div2 .box h2{
        /* padding: 3px 60px; */
        /* padding-right: 20px hsl(13, 100%, 96%) solid;
    } */

    #product .container .product_div2 .box p{
        margin-left: 0;
    }
    
    /*<-- for slider -->*/
    #about-us .container .about-us_div{
        display: grid;
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    #about-us .container .about-us_div .card{
        margin: 0;
        margin-bottom: 20px;
    }

    #career .container{
        padding: 20px 20px;
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    #career .container h2{
        line-height: 2.6rem;
        margin-bottom: 27px;
        text-align: center;
    }

    #contact-us{
        display: none;
    }

    #contact-us2{
        display: flex;
    }

    .attribution{
        display: none;
    }

    #contact-us2{
        padding: 50px 8%;
        background-color: hsl(228, 39%, 23%);
        color: #fff;
        display: flex;
        justify-content: center;
    }
    
    #contact-us2 .container{
        display: flex;
        flex-direction: column;
        padding: 0 20px;
    }

    #contact-us2 .container .part2{
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
    }

    #contact-us2 .container .part1{
        margin-bottom: 25px;
        display: flex;
        justify-content: center;
    }

    
    /* #contact-us2 .container .part1 button{
        align-self: center;
    } */

    #contact-us2 .container .part2 ul li{
        list-style: none;
        margin-bottom: 13px;
    }

    #contact-us2 .container .part2 ul li a{
        margin-bottom: 11px;
        cursor: pointer;
        color: #fff;
        text-decoration: none;
    }
    
    #contact-us2 .container .part2 ul li a:hover{
        color: hsl(12, 88%, 59%);
        cursor: pointer;
    }

    #contact-us2 .container .part3{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 40px;
    }

    #contact-us2 .container .part3 ul{
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    #contact-us2 .container .part3 ul li{
        display: flex;
        padding: 20px 0;
    }

      #contact-us2 .container p{
        align-self: center;
      }

      #contact-us2 .container .part3 p{
        text-align: center;
        align-self: center;
      }
    
}