* {
    margin: 0%;
    padding: 0%;
}

#navbar {
    height: 70px;
    display: flex;
    align-items: center;
    background-color: rgb(255, 255, 255);
    justify-content: space-around;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    position: sticky;
    top: 0%;
    z-index: 10;
}

#navbar>a {
    width: 8%;
    cursor: pointer;
    animation: navumage ease-in-out 2s infinite;
    z-index: 10;

}

#navbar>a>img {
    width: 100%;
}

@keyframes navumage {
    from {
        transform: rotateX(0deg);
    }

    to {
        transform: rotateY(359deg);
    }
}



#navbar>#foraddressdiv {

    padding-left: 20px;

    border-left: 0.2px solid rgb(238, 238, 238);
}

#foraddressdiv>h3 {
    margin-top: 8%;
    font-size: 18px;
    font-weight: 1000;
}

#navbar-search {
    display: flex;
}

#navbar-search>div {
    display: flex;
    /* width: 100px; */
}

.input-grouppp {
    position: relative;
    width: 600px;
    height: 60px;
    border-radius: 25px;


}


.input-grouppp>div {
    position: relative;
    left: 8%;
    top: 37%;
    /* height: 10px; */

    color: rgb(174, 173, 173);
    font-size: 19px;


}

#logoutdiv>a {
    text-decoration: none;
    color: black;
    border-bottom: 1px solid rgb(128, 128, 128);
    padding-left: 4%;
}

#logindiv {
    cursor: pointer;
}

.input-grouppp>input {

    width: 100%;
    border: none;
    padding-left: 60px;
    margin-top: 8px;
    height: 50px;

    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;
    font-size: 13px;
    color: black;
}

#cartdiv {
    background-color: green;
    padding: 15px 25px;
    border-radius: 10px;
    font-size: 16px;
    color: white;
    font-weight: 1000;
    cursor: pointer;
    z-index: 10;
}

#cartanimanttion {

    /* transition: all ease-in-out 0.5s; */
    margin-right: 10px;
    animation: cartdivani ease-in-out 4s infinite;

}

@keyframes cartdivani {
    from {
        transform: rotate(360deg)
    }

    to {
        /* transform: rotateX(60deg); */
    }

}



#logoutdiv {
    display: block;
    position: fixed;
    top: 9%;
    background-color: white;
    z-index: 10;
    right: 12%;
    display: flex;
    /* text-align: ; */
    flex-direction: column;
    justify-content: space-between;
    /* align-items: center; */
    width: 15%;
    /* border-radius: 50p%; */
    border: dashed 4px green;
    border-top: none;
    /* padding: 0px 11px;  */
    animation: logoutdiv ease-in-out 0.5s;
    /* z-index: -111; */
}

@keyframes logoutdiv {
    from {
        color: rgb(255, 238, 0);
        background-color: rgb(255, 238, 0);
        top: -10%;
    }

    to {
        /* z-index: -1; */
        background-color: rgb(255, 238, 0);
        color: rgb(255, 238, 0);
        top: 9%;
    }
}

#logoutdiv>span {
    padding: 10px;
    border-bottom: 1px solid rgb(128, 128, 128);
    /*   /*  /* padding-bottom: 10px; */
    cursor: pointer;
}

#logoutdiv>span:hover {
    background-color: rgb(238, 238, 238);
}

#gotocartpage {
    display: none;
    /* visibility: hidden; */
}

#pngan2 {
    position: absolute;
    left: 0%;
    top: 450px;
    z-index: 1;
}

#pngnavanimation {
    position: absolute;
    left: 0%;
    top: 520px;
    /* bottom: 0%; */
    width: 13%;
    cursor: pointer;
    /* border: 1px solid red; */
    z-index: 1;
    overflow: hidden;
}

#animationmen {
    display: none;
}

#animationmenu {
    position: absolute;
    left: 110px;
    top: 656px;
    background: yellow;
    height: 36px;
    /* width: 38.5%; */
    animation: animationmenu 0.5s ease-in-out;
}

@keyframes animationmenu {
    from {
        left: -500px;
    }

    to {
        left: 110px;
    }
}

#animationmenu>ul {
    position: absolute;
    display: flex;

}

#animationmenu a {
    text-decoration: none;
    color: black;
}

#animationmenu>ul>a>li {
    padding: 5px;
    cursor: pointer;
    text-decoration: none;
    list-style: none;
    background-color: rgb(255, 230, 0);
    font-weight: 600;
}

#animationmenu>ul>a>li:hover {
    background-color: green;
    color: white
}


#onsearchclick {
    display: none;
    position: absolute;
    border: 2px solid rgb(241, 241, 241);
    width: 91%;
    left: 3%;
    margin: auto;
    top: 100%;
    background-color: white;
}

#onsearchclick a {
    text-decoration: none;
    color: green;
}

#onsearchclick ul {
    width: 100%;
    padding-left: 0%;
    padding-bottom: 0%;
    margin-bottom: 0%;
    color: green;
}

#onsearchclick li {
    padding-left: 0%;
    padding-bottom: 0%;
    text-decoration: none;
    margin-left: 0%;
    width: 100%;
    list-style: none;
    display: flex;
    background: rgb(255 253 249);
    align-items: center;
    font-weight: 600;
    border-bottom: 1.4px solid rgb(204, 204, 204);

}

#onsearchclick img {
    width: 11%;
    height: 61px;
}

#onsearchclick li:hover {
    background-color: rgb(247, 247, 247);
}

@media (max-width:1090px) {
    #foraddressdiv {
        position: absolute;
        left: 23%;
        top: 0%
    }

    #navbar>a {
        /* display: none; */
        width: 100px;
        position: absolute;
        top: 6%;
        left: 4%;
    }

    #navbar {
        flex-direction: column;
        height: 135px;

    }

    #cartdiv {
        /* display: none; */
        position: absolute;
        width: 90%;
        margin: auto;
        /* bottom: 2%; */
        top: 520%;
        display: flex;
        justify-content: space-between;
    }

    #navbar input {

        bottom: 0%;

        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
        font-size: 16px;
    }

    .input-grouppp {

        width: 100%;
    }

    #navbar-search {
        position: absolute;

        left: -1%;
        top: 50%;
        width: 100%;


    }

    #logindiv {
        position: absolute;
        width: 77px;
        top: 7%;
        right: 4%;


    }

    #gotocartpage {
        display: block;

    }

    #pngnavanimation {
        width: 18%;
    }

    #onsearchclick {
        top: 100%;
        margin: auto;
        width: 90%;
        right: 6%;
    }
}




@media (max-width:470px) {
    #navbar>a {
        width: 80px;
    }

    #foraddressdiv {
        left: 27%;
    }

    #foraddressdiv>h3 {

        margin-top: 8%;
        font-size: 13px;
        font-weight: 1000;
    }

    #foraddressdiv>h5 {
        font-size: 10px;
    }

    #logindiv {
        font-size: 13px;
    }

    #logoutdiv {
        width: 25%;
        right: 2%;
        font-size: 13px;
    }

    #pngnavanimation {
        width: 33%;
    }

    #animationmenu {

        left: 10px;
        top: 606px;

        /* width: 38.5%; */

    }

    #animationmenu>ul>a>li {
        /* margin-left: 0%; */
        /* left: 10px; */
        top: 616px;

        padding: 2px;
        /* font-size: 2%; */
    }

    #onsearchclick {
        top: 95%;
        width: 85%;
        /* right: 10%; */
    }

    #onsearchclick img {

        height: 25px;
    }

    iframe {
        height: 180px;
    }
}

@media (max-width:700px) {
    #animationmenu {

        left: 60px;
        top: 606px;

        /* width: 38.5%; */

    }

    #animationmenu>ul>a>li {
        /* margin-left: 0%; */
        /* left: 10px; */
        top: 616px;
        font-size: 8px;
    }
}