* {
    font-family: 'Inter', sans-serif;

}

:root {
    --color-white: #FFFFFF;
    --color-darkgray: #a8a8a8;
    --color-gray: #F3FCF7;
    --color-deepgray: #F0F1EC;
    --color-deepwhite: #F0EDE2;
    --color-white-border: #76767540;
    --color-white: #FFFFFF;
    --color-green: #06C167;
    --color-black: #1D1D1F;
}



/* Mobile first design */
@media (max-width: 600px) {
    .desktop-body{
        display: flex;
        flex-direction: column;
        align-items: center;

    }


    .body {
        /* margin-left: 27px;
        margin-right: 27px; */
        margin: 0px;
        min-width: 375px;
        max-width: 600px;
    }

    .header {
        width: 330px;
        height: 860px;
        padding-left: 27px;
        padding-right: 27px;
        background-color: var(--color-gray);
    }

    /* Navbar Design */
    .navbar {
        display: flex;
        width: 100%;
        height: 40px;
        padding-top: 30px;
        justify-content: space-between;
    }

    .foodies {
        height: 30px;
        width: 120px;
        margin: 0px;
        font-weight: 500;
        font-style: Medium;
        font-size: 32px;
        color: var(--color-green);
    }

    .menuIcons {
        margin-right: 5px;
    }

    .ul-items {
        display: none;
    }

    /* main- body Desing  */
    .main-body {}

    .main-body h1 {
        width: 320px;
        height: 186px;
        font-weight: 600;
        font-style: Semi Bold;
        font-size: 51px;
        line-height: 100%;
        text-align: center;
        margin-bottom: 0px;
    }

    .main-body p {
        font-weight: 400;
        font-style: Regular;
        font-size: 14px;
        line-height: 159%;
        text-align: center;
        margin-top: 0px;
    }

    .getbutton {
        width: 320px;
        height: 68px;
        background-color: var(--color-green);
        border: none;
        font-weight: 400;
        margin-top: 40px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        color: var(--color-white);
    }

    /* Image section  */

    .container {
        display: flex;
        position: relative;
        margin-top: 50px;
        width: 320px;
        height: 469px;
        align-items: center;
        justify-content: center;
    }

    .rating-badge img {
        width: 99px;
        height: 14px;
    }


    .rating-badge {
        bottom: 70px;
        width: 230px;
        height: 53px;
        font-weight: 500;
        font-style: Medium;
        font-size: 15px;
        background-color: var(--color-white);
        border-radius: 30px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .review-badge {
        bottom: 5px;
        width: 230px;
        height: 53px;
        font-weight: 500;
        font-style: Medium;
        font-size: 15px;
        background-color: var(--color-white);
        border-radius: 30px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .Polcadot {
        width: 174px;
        height: 174px;
        bottom: -13px;
        left: 185px;
        position: absolute;
    }



    /* middle section  brand-logos design */

    .brand-logos {
        margin-top: 165px;
        margin-left: 27px;
        width: 319px;
        height: 87px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .logos {
        display: flex;
        gap: 60px;
    }

    .brandimg {
        width: 123px;
        height: 28px;
    }

    .services {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 2fr));
        margin-top: 60px;
        margin-left: 27px;
        width: 324px;
        height: 497px;
        text-align: center;
        border-block: solid 2px var(--color-white-border);
    }

    .service {
        width: 117px;
        height: 137px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 30px 20px;
    }

    .service h3 {
        width: 150px;
        height: 22px;
        font-weight: 400;
        margin-bottom: 0px;
        font-size: 18px;
    }

    .service p {
        font-size: 0.9rem;
        width: 155px;
        height: 22px;
        margin-top: 10px;

    }



    /* <!-- -- vagis section Design -- --> */

    .item-section {
        width: 360px;
        height: 1200px;
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .imgdesign {
        width: 320px;
        height: 442px;
        background-color: #F0F1EC;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 60px;
    }

    .imgdesign img {
        width: 274px;
        height: 417px;
        bottom: 30px;
        position: relative;

    }

    .info {
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .info p {
        width: 100px;
        height: 18px;
        position: relative;
        font-weight: 500;
        font-style: Medium;
    }

    .info h2 {

        width: 318px;
        height: 84px;
        font-weight: 500;
        font-style: Medium;
        font-size: 35px;
        text-align: center;
        position: relative;

    }

    .infoPolcadot {
        background-color: var(--color-white);
        width: 174px;
        height: 180px;
        margin-top: 14px;
        left: -20px;
        position: absolute;
    }

    .textinfo {
        display: flex;
        flex-direction: column;
        margin-top: 8px;
        list-style: none;
        gap: 20px;
    }

    .textinfo img {

        width: 25px;
        height: 19px;
    }

    .textinfo li {
        width: 280px;
        height: 25px;
        font-weight: 400;
        font-style: Regular;
        font-size: 17px;
        display: flex;
        gap: 10px;
        text-align: center;

    }



      /* <!-- -- vagis section Design -- --> */

    #juiceSection {
        margin-top: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;

    }

    #juiceimg {
        width: 320px;
        height: 460px;

    }

    #juiceglass {
        bottom: 60px;
        width: 277px;
        height: 489px;

    }

    .numinfo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 50px;
    }


    .numhading {
        width: 150px;
        height: 82px;
        text-align: center;
    }

    .numhading h1 {
        font-weight: 600;
        font-style: Semi Bold;
        font-size: 40px;
        margin-bottom: 15px;
        color: var(--color-green);

    }

    .numhading p {
        margin: 0px;
        font-weight: 400;
        font-style: Regular;
        font-size: 15px;
        color: var(--color-black);

    }

    #numinfo :last-child {
        margin-top: 40px;

    }


    /* <!-- -- Features Section layout --  --> */



    .FeaturesSection {
        max-width: 600px;
        min-width: 300px;
        margin-left: auto;
        display: flex;
        flex-direction: column;
        align-items: center;


        /* grid-template-columns: repeat(auto-fit, minmax(320px, 4fr)); */
    }

    #mixf-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #fruits-info {
        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .infocard {
        width: 320px;
        height: 292px;
        background-color: var(--color-deepgray);
        display: grid;
        gap: 10px;
        border: solid 2px var(--color-green);


    }

    .infocard h2 {
        width: 228px;
        height: 55px;
        font-weight: 500;
        font-style: Medium;
        font-size: 32px;
        margin-left: 40px;
        margin-top: 40px;
        margin-bottom: 0px;


    }

    .infocard p {
        width: 190px;
        height: 25px;
        font-weight: 400;
        font-style: Regular;
        font-size: 16px;
        margin-left: 40px;
    }

    .cardImg {
        width: 290px;
        height: 292px;
    }


    .disbutton {
        width: 148px;
        height: 42px;
        font-family: Inter;
        font-weight: 500;
        font-style: Medium;
        font-size: 15px;
        margin-left: 40px;
        border: none;
        background-color: var(--color-deepwhite);
        color: var(--color-green);
    }

    .disbutton img {
        margin-left: 10px;
    }



    /* <!-- -- Product Section Design --  --> */


    .ProductSection {
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .productCard {
        width: 316px;
        height: 441px;
        background-color: var(--color-white);
        display: flex;
        flex-direction: column;
        align-items: center;
        border: solid 2px var(--color-white-border);
    }

    .cardImg1 {
        width: 190PX;
        height: 190PX;
        margin-top: 30PX;
    }

    .cardstar {
        width: 99px;
        height: 14px;
        margin-top: 10px;

    }

    .productCard h3 {
        width: 154;
        height: 24;
        font-weight: 400;
        font-style: Regular;
        font-size: 20px;

    }

    .buyButton {
        width: 177px;
        height: 57px;
        font-weight: 400;
        font-style: Regular;
        font-size: 16px;
        border: solid 2px var(--color-green);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-top: 25px;
        color: var(--color-green);

    }

    .buyButton img {

        width: 22px;
        height: 11px;

    }

    #lt {
        text-decoration: line-through;
        color: var(--color-darkgray);
        width: 39px;
        height: 24px;
        font-weight: 600;
        font-style: Semi Bold;
        font-size: 20px;
    }

    #Pt {
        color: var(--color-green);
        width: 39px;
        height: 24px;
        font-size: 20px;
        margin-left: 5px;

    }
    #green {
        border-color: var(--color-green);
    }
   


    /* <!-- --bottom Image--  --> */


    #bottomImage {
        background-image: url("./images/Rectangle 9.png");
        width: 375px;
        height: 459px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top:100px ;


    }

    #veggieFood {
        width: 293px;
        height: 126px;
        font-weight: 500;
        font-style: Medium;
        font-size: 35px;
        text-align: center;
        color: var(--color-white);

    }


    /* --Footer section Design--  */


    #FooterSection {
        margin-top: 70px;
        width: 375px;
        height: 1000px;


    }

    .footerDiv {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;


    }

    .media {
        display: flex;
        justify-items: center;
        align-items: center;
        flex-direction: column;
        width: 277px;
        height: 206px;
        gap: 10px;

    }

    .media p {
        text-align: center;
        margin-top: 25px;
    }

    .about-ccompany {
        width: 107px;
        height: 194px;
        text-align: center;
    }

    .about-ccompany h2 {
        width: 107;
        height: 29;
        font-weight: 500;
        font-style: Medium;
        font-size: 24px;

    }

    .about-ccompany p {
        margin-top: 20px;
        width: 110px;
        height: 19px;
        font-weight: 400;
        font-style: Regular;
        font-size: 16px;


    }

    .getintouch {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 320px;
        height: 320px;
        /* gap: 20px; */



    }

    .getintouch p {
        text-align: center;
    }

    .getintouch button {
        margin: 5px;
    }

    #m {
        margin-top: 20px;
    }

    #email {
        background-color: var(--color-deepgray);
        color: var(--color-black);
        opacity: 50%;

    }























}