@media (min-width: 2000px) {
    html{
        font-size: 20px;
    }
}
@media (min-width: 1500px) {
    html{
        font-size: 16px;
    }
}
@media (max-width: 1135px) {
    .leftbar{
        width: 25rem;
    }
    .rightbar{
        width: calc(100% - 26rem);
    }
}
@media (max-width: 1024px) {
    .leftbar{
        width: 20rem;
    }
    .rightbar{
        width: calc(100% - 21rem);
    }
    .product{
        width: 49.5%;
    }
    .header input{
        width: 15rem;
    }
}
@media (max-width: 900px) {
    .header nav ul{
        display: none;
    }
    .header nav .container{
        display: block;
    }
}
@media (max-width: 768px) {
    html{
        font-size: 8px;
    }
}
@media (max-width: 640px) {
    html{
        font-size: 8px;
    }
    main{
        flex-direction: column;
    }
    .leftbar{
        width: 100%;
        height: fit-content !important;
        display: flex;
        margin-bottom: 1rem;
        justify-content: space-evenly;
        align-items: center;
        padding: 1rem;
    }
    .leftbar .dropdown{
        margin: 0rem 1rem;
    }
    .leftbar #dicon{
        display: none;
    }
    .rightbar{
        width: 100%;
        min-height:60vh !important;
    }
    .product-details, .shoppingCartMain{
        flex-direction: column;
        height: fit-content;
    }
    .sc-left{
        width: 100%;
        height: 30vh;
    }
    .cartProducts{
        overflow: scroll;
    }
    .cartProductsValues{
        font-size: 1rem;
    }
    .pd-left{
        width: 100%;
        height: calc(90vh - 10rem) !important;
    }
    .pd-right, .sc-right{
        margin-top: 2rem;
        width: 100%;
        height: fit-content;
    }
    .paymentMain{
        flex-direction: column;
        margin-bottom: 1rem;
    }
    .pmdetails{
        width: 100%;
        margin: 1rem 0rem;
        height: fit-content;
    }
    .paymentDetails{
        margin-bottom: 1rem !important;
    }
    #contactus{
        flex-direction: column;
    }
    .contact-left{
        padding: 2rem;
    }
    .contact-left, .contact-right{
        width: 100%;
        height: fit-content;
    }
}
@media (max-width: 500px){
    #body{
        height: 90vh;
        display: flex;
        flex-direction: column;
    }
    main{
        flex: 01;
        width: 98%;
    }
    .leftbar .dropdown-button{
        font-size: 1.2rem !important;
        margin: 0rem 0rem;
    }
    .leftbar .dropdown{
        margin: 0rem 0.2rem;
    }
}
@media (max-width: 400px){
    .header input{
        width: 0rem !important;
        transition: width 0.3s;
    }
    .product{
        width: 98%;
    }
    .topbarLeft select{
        width: 15rem;
    }
    .topbarRight #vcLabel{
        display: none;
    }
    .header input:focus{
        width: 20rem !important;
    }
}
@media (max-width: 320px){
    html{
        font-size: 7px;
    }
}