*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family:'Inter', sans-serif;;
}
:root{
    --primary-color:#06C167;
    --link-color:#1D1D1F;
}

a{
    text-decoration: none;
    color:var(--link-color);
}
a.active{
    color:var(--primary-color);
}
a:hover{
    cursor: pointer;
}
li{
    list-style: none;
    width:100%;
    text-align: center;
    height: 40px;
}
li:hover{
    border-radius: 10px;
    cursor: pointer;
}
button{
    cursor: pointer;
}
h1{
    color: #06C167;
}
#menu{
    display: none;
}
nav{
    display: flex;
}
.container{
    width:90%;
    margin: 0 auto;
}
.brand__logo ul{
    display: grid;
}

.hero__right{
    background-image: url(./Media/Polcadot.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}

.features ul{
    display: grid;
}
.benefit{
    display: grid;
}
.most__popular .parent{
    display: flex;
}

/* ==================For Small Device==================== */

@media screen and (max-width:768px) {
    nav{
        justify-content: space-between;
        margin-top: 24px;
    }
    .hero__left h2{
        margin-top: 51px;
        font-size: 51px;
    }
    .hero__left p{
        margin-top: 21px;
        text-align: justify;
    }
    .hero__left button{
        width: 100%;
        background-color: var(--primary-color);
        height: 68px;
        border: none;
        outline: none;
        margin-top: 53px;
        color: white;
    }
    .hero__right img{
        width: 100%;
        margin-top: 47px;
    }
    .brand__logo ul{
        margin-top: 52px;
        display: grid;
        grid-template-rows: 100% 100%;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        justify-content: space-between;
    }
    .brand__logo ul li:nth-child(1)
    {
        grid-column:1/3;
    }
    .brand__logo ul li:nth-child(2)
    {
        grid-column: 4/6;
    }
    .brand__logo ul li:nth-child(3)
    {
        grid-column: 2/5;
    }
    .menu__items ul{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap:10px;
    }
    .menu__items {
        display: flex;
        flex-direction: column;
        width: 50px;
        height: 41px;
        gap: 5px;
        justify-content: center;
        align-items: center;
        border: 2px solid var(--primary-color);
    }
    .menu__items span{
        display: block;
        width: 22px;
        height: 3px;
        border-radius: 5px;
        background-color: var(--primary-color);
        transition: all 0.5s ease;
    }
    #menu:checked ~ .menu__items span:nth-child(1){
        transform: translateY(9px) rotate(45deg);
    }   
    #menu:checked ~ .menu__items span:nth-child(2){
        opacity: 0;
    }
    #menu:checked ~ .menu__items span:nth-child(3){
        transform: translateY(-7px) rotate(-45deg);
    }
    #menu:checked ~ .nav__items{
        display: block;
        position: absolute;
    }

    /* Trying to style hamburger menu  */
    .hamburger{
        position: absolute;
        right:0%;
        top:65px;
        width:40%;
        height: auto;
        background-color: white;
        display: block;
        transition: 2s ease-in;
        border-radius: 12px;
        height: auto;
    }
    .hamburger ul {
        display: flex;
        flex-direction: column;
        gap:10px;
        justify-content: center;
        align-items: center;
    }
    .nav__items{
        position: absolute;
        right: -30%;
        display: none;
    }
/* =================For Features Section==================== */

    .features{
        margin-top: 60px;
    }
    .features ul{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        gap:20px;
        row-gap: 20px;
    }
    .features ul li{
        height: auto;
    }
/* =================For Benefit Section==================== */

    .benefit{
        width: 100%;
        margin-top: 62px;
        grid-template-rows: auto auto;
    }

    .benefit__left img{
        width: 100%;
        border-radius: 10px;
    }
    .benefit__right p{
        margin-top: 57px;
        text-align: center;
    }
    .benefit__right h2{
        text-align: center;
        margin-top: 13px;
    }
    .benefit__right ul{
        margin-top: 52px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .benefit__right ul li{
        text-align: start;
        width: 100%;
    }
    .benefit__right ul img{
        margin-right: 22px;
    }
    .star{
        margin-top: 70px;
    }
    .star__left p{
        text-align: center;
        margin-top: 35px;
    }
    .star__left h2{
        text-align: center;
        margin-top: 13px;
    }
    .star__left ul{
        margin-top: 53px;
    }
    .star__left ul li{
        height: auto;
        margin-bottom: 39px;
    }
    .star__left .number{
        color: var(--primary-color);
        font-size: 40px;
        font-weight: 600;
    }
    .star__left button{
        height: 80px;
        background-color: var(--primary-color);
        color:white;
        width:90%;
        border:none;
        outline: none;
        display: block;
        margin: 0 auto;
        border-radius: 10px;
    }
    .star__left button img{
        margin-left: 20px;
    }
    .star .star__right img{
        width: 100%;
    }

    .foods p{
        margin-top: 129px;
        text-align: center;
    }
    .foods h2{
        margin-top: 13px;
        text-align: center;
        margin-bottom: 65px;
    }
    .foods .parent{
        display: flex;
        flex-direction: column;
    }
    .foods .parent .child{
        width: 100%;
    }
    .foods .parent .child img{
        width: 100%;
        border-radius: 5px;
        display: inline-block;
    }
    .foods .parent .child h2{
        margin-bottom: 0;
        margin-top: 38px;
    }
    .foods .parent .child p{
        margin-top: 25px;
        margin-bottom: 38px;
    }
    .foods .parent .child button{
        display: block;
        width: 148px;
        height: 42px;
        background-color: #F0EDE2;
        color:var(--primary-color);
        border: none;
        outline: none;
        padding:11px 14px;
        margin-left: 12%;
        margin-bottom: 35px;
        font-weight: 500;
    }
    .foods .parent .child button img{
        width: 14px;
        margin-left: 10px;
        color: #06C167;
    }
    .product{
        margin-top: 129px;
        text-align: center;
    }
    .product h2{
        text-align: center;
        margin-top: 13px;
    }
    .card{
        width:100%;
        height: 445px;
        margin-top:37px;
        border: 2px solid #76767540;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        border-radius: 5px;
    }
    .card1{
        border: 2px solid var(--primary-color);
    }
    .most__popular .parent{
        flex-direction: column;
    }
    .card__details > img{
        display: block;
        margin: 0 auto;
    }
    .card__details button{
        width: 177px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 57px;
        color:var(--primary-color);
        border: 2px solid var(--primary-color);
        outline:none;
        margin-top:30px;
        text-align: center;
    }
    .card__details button{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        border-radius: 5px;
    }
    .card__details button img{
        width:23px;
    }
    .card__details p{
        margin-top: 22px;
        text-align: center;
    }
    .card__details p +img{
        margin-top: 25px;
    }

    .vegie{
        height: 459px;
        width: 100%;
        background-image: url('./Media/bgimg.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .vegie h2{
        color: white;
    }
    .vegie button{
        margin-top: 52px;
        width: 80%;
        height: 79px;
        background-color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        border-radius: 5px;
        border: none;
        outline: none;
    }
    .vegie p{
        color:white;
        height: 19px;
    }
    .vegie img{
        display: block;
        width:23px;
        height: 19px;
    }

    footer{
        margin-top: 95px;
    }

    .footer .child1{
        display: flex;
        flex-direction: column;
        justify-content:flex-start;
        width: 80%;
        margin: 0 auto;
        align-items: center;
    }
    .footer .child1 h2{
        color:var(--primary-color);
    }
    .footer .child1 p{
        margin-top: 39px;
        text-align: center;
    }
    .footer .child1 img{
        margin-top: 37px;
    }
    .footer .child2 {
        margin-top: 79px;
    }
    .footer .child2 h2{
        text-align: center;
    }
    .footer .child2 ul{
        margin-top: 41px;
    }
    .footer .child3 {
        margin-top: 79px;
    }
    .footer .child3 h2{
        text-align: center;
    }
    .footer .child3 ul{
        margin-top: 41px;
    }
    .footer .child4 {
        margin-top: 79px;
    }
    .footer .child4 h2{
        text-align: center;
    }
    .footer .child4 p{
        margin-top: 41px;
        text-align: center;
    }
    .footer .child4 .email{
        margin-top: 39px;
        flex-direction: column;
    }
    .footer .child4 .email input{
        width: 90%;
        text-align: center;
        height: 54px;
        outline: none;
        background-color: #F0F1EC;
        border-radius: 5px;
        border: none;
    }
    .footer .child4 .email form{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .footer .child4 .email input:focus{
        border:1px solid var(--primary-color)
    }
    .footer .child4 .email button{
        display: block;
        width:90%;
        height: 54px;
        background-color: var(--primary-color);
        color: white;
        margin-top: 10px;
        border: none;
        outline: none;
        border-radius: 5px;
    }
    .copyright p{
        text-align: center;
        margin-top: 81px;
        margin-bottom: 40px;
    }

}

/* =================For Large Device======================= */
@media screen and (min-width:769px){
    nav{
        margin-top: 42px;
        justify-content: space-between;
    }
    .nav__items ul{
        display: flex;
        justify-content: space-between;
        gap:20px;
    }
    .nav__items ul li{
        min-width: 104px;
    }
    .nav__items ul li a:hover{
        display: block;
        color: white;
        height: 100%;
        background-color:var(--primary-color);
        border-radius: 5px;
        transition: 0.5s ease;
    }
    .three__dot{
        display: none;
    }
    .hero{
        display: grid;
        justify-content: center;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;

        gap:20px;
    }
    .hero__left{
        margin-top: 112px;
        grid-row:1/2;
        grid-column: 1/2;
    }
    .hero__left h2{
        font-size: 72px;
    }
    .hero__left p{
        margin-top: 11px;
        text-align: center;
    }
    .hero__left button{
        height: 68px;
        width: 200px;
        background-color: var(--primary-color);
        border: none;
        outline: none;
        display: block;
        border-radius: 12px;
        margin-top: 30px;
        color:white;
    }
    .hero__right{
        grid-column: 2/3;
        grid-row: 1/3;
        margin-top:64px;
    }
    .hero__right img{
        width: 100%;
    }
    .hero .brand__logo{
        grid-column: 1/2;
        grid-row: 2/3;
        margin-top:5%;
    }
    .hero .brand__logo ul{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap:10px;
    }
    .features{
        margin-top: 121px;
    }
    .features ul{
        display: flex;
        gap:4%;
    }
    .features ul li{
        height: 100%;
    }

    .benefit{
        margin-top: 132px;
        height: 604px;
        display: flex;
        gap: 40px;
        justify-content: flex-start;
    }
    .benefit__left{
        width: 45%;
    }
    .benefit .benefit__left img{
        display: block;
        width: 100%;
        height: 100%;
        margin:0 auto;
        background-color: #0ed4ee;
    }
    .benefit .benefit__right p{
        margin-top: 90px;
    }
    .benefit .benefit__right h2{
        margin-top: 20px;
        font-size: 50px;
        font-weight: 500;
    }
    .benefit .benefit__right ul{
        margin-top: 57px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .benefit .benefit__right ul li{
        text-align: start;
    }
    .benefit .benefit__right ul li span{
        margin-left: 40px;
    }

    .star{
        margin-top: 180px;
        display:grid;
        grid-column: 1fr 1fr 1fr 1fr 1fr;
        gap:40px;
        grid-row: 608px;
    }
    .star .star__right{
        grid-column: 4/6;
        grid-row: 1/2;
        background-color: #F3FAFB;
    }
    .star .star__right img{
        width: 90%;
        display: block;
        margin:0 auto;
    }
    .star .star__left{
        grid-column: 1/4;
        grid-row: 1/2;
    }
    .star .star__left p{
        margin-top: 80px;
    }
    .star .star__left h2{
        margin-top: 20px;
        text-align: start;
    }
    .star .star__left ul{
        display: flex;
        margin-top: 55px;
        justify-content: space-between;
    }
    .star .star__left ul li{
        height: 100%;
    }
    .star .star__left ul li .number{
        color: var(--primary-color);
        font-size: 40px;
        display: block;
    }
    .star .star__left button{
        height: 79px;
        width: 233px;
        background-color: var(--primary-color);
        color: white;
        border: none;
        outline: none;
        margin-top: 51px;
    }
    .foods{
        margin-top: 170px;
    }
    .foods p,h2{
        text-align: center;
        margin-top: 20px;
    }
    .foods h2{
        margin-bottom: 70px;
    }
    .foods .parent{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .foods .parent .child{
        width: 293px;
        background-color: #F3FCF7;
    }
    .foods .parent .child h2{
        margin-top: 37px;
        margin-bottom: 0;
    }
    .foods .parent .child p{
        margin-top: 25px;
    }
    .foods .parent .child button{
        margin-top: 38px;
        width: 148px;
        height: 42px;
        border: none;
        outline: none;
        margin-left: 30px;
        color: var(--primary-color);
    }
    .most__popular{
        margin-top: 192px;
    }
    .most__popular .product h2{
        margin-top: 20px;
        text-align: start;
    }
    .most__popular .parent{
        margin-top: 63px;
        display: flex;
        gap:30px;
        justify-content: space-between;
    }
    .most__popular .parent .card{
        width: 270px;
        height: 445px;
        border: 2px solid #76767540;
        text-align: center;
    }
    .most__popular .parent .card1{
        border: 2px solid var(--primary-color);
    }
    .most__popular .parent .card__details p{
        margin-top: 22px;
    }
    .most__popular .parent .card__details p+img{
        margin-top: 22px;
    }
    .most__popular .parent .card__details button{
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 22px;
        width: 177px;
        height: 57px;
        border: none;
        outline: none;
        color: var(--primary-color);
        border: 2px solid var(--primary-color);
        margin: 0 auto;
        margin-top: 29px;
        padding-bottom: 20px;
    }
    .vegie{
        margin-top: 193px;
        width: 100%;
        height: 459px;
        background-image: url('./Media/bgimg.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        color:white;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .vegie button{
        margin-top: 37px;
        background-color: var(--primary-color);
        border: none;
        outline: none;
        width: 210px;
        height: 79px;
        color: white;
        border-radius: 10px;
    }
    .vegie button p{
        display: inline-block;
        margin-right: 20px;
    }
    .footer{
        margin-top: 64px;
        display:grid;
        grid-template-columns: 2fr 1fr 1fr 2fr;
        justify-content: space-between;
    }
    .footer .child1 h2{
        color: var(--primary-color);
    }
    .footer .child1 p{
        text-align: start;
        margin-top: 41px;
    }
    .footer .child1 img{
        display: block;
        margin: 0 auto;
        margin-top:51px;
    }
    .footer .child2 ul{
        margin-top:41px;
    }
    .footer .child3 ul{
        margin-top:41px;
    }
    .footer .child4 p{
        margin-top: 41px;
    }
    .footer .child4 .email{
        margin-top:37px;
    }
    .footer .child4 .email input{
        height: 50px;
        width: 180px;
        text-align: center;
        margin-right: 15px;
    }
    .footer .child4 .email button{
        border:none;
        outline:none;
        background-color: var(--primary-color);
        height: 50px;
        width: 100px;
        color: white;
        border-radius: 10px;
    }
    .copyright{
        margin-top:96px;
        margin-bottom: 38px;
        text-align: center;
    }

}