@media (min-width:250px) and (max-width:575px){


        .mainBanner {
        display: none;
    }

    .mobileBanner {
        display: block;
    }
    
        .ingredient-box{
        font-size: 1rem !important;
    }

    .logo{
        width: 70%;
    }

    nav ul li a{
        font-size: 28px;
    }

    nav ul li a:hover{
        border-bottom: none;
        color: black;
    }

    .carousel-item img{
        width: 90%;
    }

    .increment{
        grid-template-columns: repeat(1,1fr);

        & span{
            font-size: 2.7rem;
            color: var(--mainColor);
        }

        & p{
            font-size: 1.5rem;
        }
    }

    .getInForm{
        width: 100%;
    }

    .middleFooter a{
        font-size: 1.8vw;
    }

    .rightFooter a{
        font-size: 14px;
    }

    .buyBtn {
        height: 45%;
        width: 93%;
        display: flex;
        align-items: end;
        justify-content: center;
    }
    
        .productBox img{
        width: 50%;
    }
    
        .realbottle2{
        display: block;
    }

    .realbottle{
        display: none;
    }
    
        .homeImage a {
        left: 31%;
        font-size: 3.3vmax;
    }
    
        /* popup start */

    .popUp {
        flex-direction: column;
        z-index: 1002;
    }

    .mainPopUp {
        margin-top: auto;
        width: 100%;
        flex-direction: column;
        height: 100vh;
        justify-content: center;
    }

    .popUpImage {
        width: 100%;
    }

    .popUpForm {
        width: 100%;
        padding: 12px 0;

    }

    /* popup end */


}

@media (min-width:767px) and (max-width:1023px){

    .getInForm{
        width: 70%;
    }
    
        .increment{
        grid-template-columns: repeat(2,1fr);
    }
    
    /*popup start*/
    
        .mainPopUp{
        width: 80%;
    }
    
    /*popup ended*/
}