@import url("https://fonts.googleapis.com/css2?family=Licorice&family=Outfit:wght@300;400&family=Poppins:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
    body {
    margin: 0;
    padding: 0;
    font-family: "Outfit";
    font-weight: 300;
    box-sizing: border-box;
    background-color: #fff;
    }   

    #main-container{
        width:80vw;
        margin: auto;
    }
    img ,input,label{
        cursor: pointer;
    }

/*--------------------------- nav bar css----------------------------------  */
#out-nav {
  width: 100vw;
  background-color: #fff;
  position: fixed;
  top: 0;
  z-index: 2;
  box-shadow: rgba(0, 0, 0, 0.11) 0px 2px 8px;
}
#navbar {
  width: 80vw;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  font-size: 1vw;
}
#nav-top {
  /* height: 5vh; */
  width: 65vw;
  display: flex;
  justify-content: flex-end;
  /* border: 0.5px solid gray; */
}
#nav-top img {
  height: 1vw;
}
#logo img {
  width: 13vw;
  cursor: pointer;
}
#box {
  width: 65vw;
  /* border: 1px solid red; */
}
#nav-top > div {
  margin: 0px 2%;
  padding: 3px;
  cursor: pointer;
}
#nav-top > div:hover {
  color: rgb(132, 194, 37);
}
#nav-mid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4vw;
  /* border: 1px solid black; */
}
#search {
  width: 50vw;
  display: flex;
}
#search > img {
  height: 2.5vw;
  outline: 1px solid rgb(132, 194, 37);
  cursor: pointer;
}
#nav-mid input {
  width: 35vw;
  outline: 1px solid rgb(132, 194, 37);
  cursor: pointer;
  height: 2.5vw;
  padding: 1vw;
}
#basket-cart {
  display: flex;
  padding: 0.5vw;
  max-height: 4vw;
  cursor: pointer;
  font-weight: 500;
  align-items: center;
  text-align: center;
  background-color: rgb(230, 230, 230);
}
#basket-cart img {
  height: 3vw;
}

/*----------------------------------------- nav bar css ends----------------------------------------------------------- */

 /* -----------------------------------------------  Slider CSS------------------------------------------ */

#carouselExampleIndicators {
    margin-top: 6.5vw ;
    /* border :2px solid black; */
  z-index: 0;
}
.carousel-indicators li {
  margin: 0;
  width: 8vw;
  height: 3.5vw;
  padding: 0.5vw 1vw;
  font-size: 1.1vw;
  text-align: center;
  color: rgb(36, 33, 33);
  line-height: 120%;
  text-indent: 0px;
  cursor: pointer;
}
.carousel-indicators .active {
  border-bottom: 0.4vw solid rgb(132, 194, 37);
}
.carousel-indicators li::first-line {
  font-weight: bold;
}
.carousel-indicators {
  margin-bottom: -0.7%;
}

/*----------------------Fresh offer banner start--------------------*/
#bannerphoto
{
    width: 80vw;
    /* border: 1px solid; */
    /* width: 95vw; */
    /* height: 70px; */
    margin: auto;
    margin-top: 2vw;
}
.bannerphoto
{
    width: 100%;
    height: 100%;
}

/*-----------------------Fresh offer banner End----------------------*/
   
/*-----------------------Container start-----------------------------*/
#container
{
    /* border: 1px solid green; */
    /* width: 94vw; */
    padding: .4vw;
    margin: auto;
    margin-top: 4vw;
    display: flex;
}
/*-----------------------Container End--------------------------------*/
    
/*----------------------left side box start---------------------------*/
#leftsidebox
{
    margin-top:2vw ;
    /* border: 1px solid blue; */
    padding: .5vw;
    width: 20%;
}
/*-----------------------left side box End----------------------------*/
/* --------------------------Category-Container start------------- */
#left-box-category
{
   border-bottom: 1px solid rgba(128, 128, 128, 0.5);
   color: rgb(132, 194, 37);
   font-weight: 500;
}
#category-container
{
    /* border: .1vw solid; */
    padding: .4vw;
    padding-left: 0px;
    margin-top: 0px;
    }
    #fruitsvegitables
    {
        margin-top: auto;
        margin-bottom: auto;
        width: fit-content;
        font-size: 1vw;
        font-weight: 600;;
    }
    #all-category
    {
        /* border: 1px solid; */
        margin-left: 1vw;
        padding: .4vw;
        padding-left: 0px;
        display: grid;
        grid-gap: .4vw;
    }
    #all-category a{
           /* border: 1px solid; */
        text-decoration: none;
        color: black;
        font-size: 1vw;

    }
     #all-category a:hover,label:hover{
         color: rgb(132, 194, 37);
     }
    /*--------------------------Category-Container End----------------------*/
    
    /*---------------------------Brand-Container-start----------------------*/
    #Brand-container
    {
        /* border: .1px solid; */
        padding: .4vw;
        padding-left: 0px;
    }
    #Each-Brand
    {
        /* border: 1px solid; */
        padding: .4vw;
        display: grid;
        grid-gap: -2vw;
        font-size: 1vw;
        height: fit-content;
    }
    /*-----------------------------Brand-Container-Start-----------------------*/
    #Price-container
    {
        /* border: .1px solid; */
        padding: .2vw;
        padding-left: 0px;
    }
    #Each-Price
    {
        /* border: 1px solid; */
        padding: .4vw;
        display: grid;
        grid-gap: -2vw;
        font-size: 1vw;
        height: fit-content;
    }
    /*----------------------------Brand-Container-End--------------------------*/
   
    /*----------------------------Price-Filter-Start---------------------------*/
    #Discount-container
    {
        /* border: .1px solid; */
        padding: .4vw;
        padding-left: 0px;
    }
    #Each-Discount
    {
        /* border: 1px solid; */
        padding: .4vw;
        display: grid;
        grid-gap: -2vw;
        font-size: 1vw;
    }
    /*------------------------------Price-Filter-End---------------------------*/
    /* -----------------------------------rightside css------------------- */
     #rightbox
    {
        border-left: 1px solid rgba(128, 128, 128, 0.466);
        padding: .5vw;
        width: 80%;
    }
    /*-----------------fruit-vegitales-heading-container-Start-----------*/
    #fruit-vegitales-heading-container
    {
        /* border: 1px solid; */
        padding: .5vw;
        display: flex;
        justify-content: space-between;
    }
    #heading-container-child
    {
        /* border: 1px solid; */
        padding: .1vw;
        width: fit-content;
        padding-top: 0px;
        padding-bottom: 0px;
        display: flex;
    }
    .fruit-vegitales-heading
    {
        margin: 0.4vw;
        /* border: 1px solid; */
        font-size: 2vw;
    }
    /*-------------------fruit-vegitales-heading-container-End----------*/
    
    /*------------sorting-start-----------------*/
    #sorting-border/*sorting-border*/
    {
        /* border: 1px solid; */
        padding: 0vw;
        width: 15vw;
        height: 2vw;
        display: flex;
    }
    #select1
    {
        width: 100%;
        font-size: 1vw;
    }
    /*----------sorting-end----------*/
     /*--------all-product-heading-start-----------*/
    #all-product-border
    {
        border-bottom: 0.3vw solid rgb(132, 194, 37);
        width: fit-content;
        margin-top: .5vw;
        /* height: 3vw; */
        display: flex;
        padding: .4vw;
    }
    #all-product-border:hover,#all-product-image-border:hover,#all-product-content-border:hover
    {
        font-weight: 600;
    }
    #all-product-image-border
    {
        /* border: 1px solid; */
        width: 2vw;
        /* height: 2vw; */
        display: flex;
    }
    .all-product-image-border
    {
        /* border: 1px solid; */
        width: 100%;
        height: 100%;
    }
    #all-product-content-border
    {
        /* border: 1px solid; */
        width: fit-content;
        margin: 0px;
        margin-left: 5px;
        font-size: 1vw;
        font-weight: 500;
    }
    /*------------------all-product-heading-end-----------------*/

    /*grid-container-start*/
    #gridcontainer
    {
        border-top: 1px solid rgba(128, 128, 128, 0.514);
        width: 100%;
        padding: .4vw;
        margin-top: 0vw;
        /* padding-top: 1.5vw; */
        display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-gap: 0.5vw;
    }
/* --------------------all products are here -------------- */
.card{
    min-width: 15vw;
    min-height: 28vw ;
    position: relative;
    left: 0;
    /* margin: 0.1vw; */
     padding: 0.5vw;
    border: 1px solid rgba(158, 158, 158, 0.37);
    border-radius: 0.5vw;
    transition:0.5s;
}
.card:hover
{
    /* background-color: rgba(222, 184, 135, 0.315); */
    box-shadow: rgba(0, 0, 0, 0.534) 0px 6px 10px;
}
.discount{
    padding: 0.5vw;
    display: flex;
    justify-content: right;
    box-shadow: rgba(68, 72, 77, 0.226) 0px 2px 5px 1px;
}
.get-off
{
    margin: 0px;
    font-size:0.8vw;
    /* border: 1px solid; */
}
.red-dot
{
    /* border: 1px dotted; */
    width:1vw;
    height: 1vw;
    margin-left: 2px;
    border-radius: 50%;
    background-color: rgb(238, 22, 22)
}
.product-photo
{
    /* border: 1px solid; */
    margin-top: 0.5vw;
    width: 99%;
    /* height: 120px; */
}
.product-image
{
    /* border:1px solid saddlebrown; */
    margin:0 10%;
    width: 80%;
    /* position: relative; */
}
.veg-tag-border
{
    border: 1px solid green;
    width: 1vw;
    padding: 1px;
    position: absolute;
    margin-top: 12vw;
}
.veg-color-tag
{
    /* border: 2px solid; */
    margin: auto;
    width: 0.8vw;
    height: 0.8vw;
    border-radius: 50%;
    background-color: rgb(2,145,53);
}
.brandName
{
    /* border: 1px solid; */
    margin: 0px;
    font-size: 0.8vw;
    color: gray;
    margin-top: 0.5vw;
    width: fit-content;
}
.product-name{
    /* border: 1px solid; */
    font-size: 1.1vw;
    margin: 0px;
    margin-top: 0.5vw;
    width: fit-content;
}
.Qty-Piece{
    margin:0px auto;
    color: rgba(128, 128, 128, 0.753);
    font-size: 1vw;
    width: 50%;
    /* border: 1px solid grey; */
}
.qty-mrp-container
{
    /* border: 1px solid; */
    width: 95%;
    background-color: rgba(180, 180, 180, 0.274);
    margin: auto;
    /* margin-top: 0.5vw; */
    padding: 0.5vw;
}
.mrp-container
{
    /* border: 1px solid; */
    width: 100%;
    /* margin-top: 0px; */
    /* padding:0.2vw; */
    display: flex;
    align-items: center;
}
.mrp-border
{
    /* border: 1px solid; */
    margin: 0.2vw;
    font-size: 0.8vw;
    margin-bottom: 0px;
}
.strick-price
{
    /* border: 1px solid ; */
    margin: 0.2vw;
    font-size: 1vw; 
    color: gray;
    text-decoration: line-through;
}
.product-price
{
    margin: 0.2vw;
    font-size: 1.1vw;
    margin-left: 0.4vw;
    margin-bottom: 0px;
    font-weight: 500;;
}
.standart-delivery-box
{
    /* border: 1px solid; */
    width: 93.5%;
    /* padding: 0.5vw; */
    display: flex;
    align-items: center;
}
.truckBox
{
    /* border: 1px solid; */
    width: 15%;
    /* height: 20px; */
}
.delivery-date
{
    /* border: 1px solid; */
    text-align: center;
    padding:0px 0.5vw;
    font-size: 0.9vw;
    margin:0px;
}
.qty-div
{
    /* border: 1px solid; */
    width: 100%;
    padding:0.4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.qty-border
{
    /* border: 1px solid; */
    margin: 0px;
    padding: 0.3vw;
    font-size: 0.6vw; 
}
.qty-box
{
    /* border: 1px solid; */
    display: flex;
    align-items: center;
    height: 1.5vw;
    border: 1px solid rgb(179, 179, 179);
    border-radius: 0.3vw;
    width: 40%;
    background-color: rgb(228, 228, 228);
}
.qty-input
{
    width: 80%;
    font-size: 1vw;
    outline: 1px solid rgb(132,194,37);
    text-align: center;
}
.add-to-cart-box
{
    /* border: 1px solid; */
    margin: auto;
    width: 50%;
}
.add-to-cart-button
{
    width: 100%;
    height: 2vw;
    font-size: 0.8vw;
    font-weight: 500;
    border: none;
    background-color: rgb(255, 187, 60);
    border-radius: 0.5vw;
}
.add-to-cart-button:hover{
    background-color: rgb(255, 212, 131);
    cursor: pointer;
}


/* ----------------------------------------------- About Section CSS------------------------------------------ */
#about {
  border: 1px solid gray;
  padding: 1.5vw;
  text-align: justify;
}

#read-more-btn {
  outline: rgba(128, 128, 128, 0.514);
  border: 1px solid silver;
  padding: 0.5vw 1vw;
}
#read-more-btn:hover {
  background-color: silver;
}
#more-text {
  display: none;
}

/* ----------------------------------------------- Footer CSS------------------------------------------ */
.footer {
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 8vw;
  border-bottom: 1px solid gray;
}
.footer li {
  list-style: none;
}
.footer li:nth-child(1) {
  color: rgb(132, 194, 37);
  font-size: 1.1em;
}
.footer li:hover {
  color: rgb(132, 194, 37);
  cursor: pointer;
}
.footer-end > div {
  display: flex;
  padding: 2rem;
}
.footer-end > div h1 {
  font-size: 1em;
  font-weight: 300;
  color: rgb(132, 194, 37);
}
.ft-div {
  width: 20vw;
}
.ft-div ~ div {
  width: 70vw;
  display: flex;
}
#download-img {
  display: block;
  margin: 0.5rem;
  height: 5vw;
}
.footer-contact div {
  size: 3vw;
  border: 1px solid red;
}
.footer-end img {
  width: 40vw;
}


/* ---------------------------media queries------------------------  */
@media only screen and (max-width:768px) {
    .card{
        max-width: 20vw;
    }
    #rightbox{
        width:100%;
        border :0px;
    }
    #leftsidebox{
        display: none;
    }
      #gridcontainer{
    grid-template-columns: repeat(3,1fr);      
  }
    .card{
      max-width: 28vw;
  }
     #navbar,
  #container,#bannerphoto,
  #main-container {
    width: 90vw;
  }
    .get-off{
    font-size:50%
  }
  .brandName{
    font-size:50%
  }
  .product-name{
    font-size: 60%;
  }
.add-to-cart-button ,.qty-input, .delivery-date ,.product-price ,.strick-price,.mrp-border{
    font-size: 60%;
  } 
  .qty-border{
    font-size: 50%;
  }
  .add-to-cart-button {
    height: 20%;
  }

}

@media only screen and (max-width:499px){
    #about,
  .footer,
  .footer li,
  .footer-end {
    font-size: 3vw;
  }
  .footer {
    grid-template-columns: repeat(2, 1fr);
  }
  .card{
      max-width: 45vw;
  }
  #navbar,
  #container,#bannerphoto,
  #main-container {
    width: 90vw;
  }
  #gridcontainer{
    grid-template-columns: repeat(2,1fr);      
  }
  .get-off{
    font-size:50%
  }
  .brandName{
    font-size:50%
  }
  .product-name{
    font-size: 60%;
  }
.add-to-cart-button ,.qty-input, .delivery-date ,.product-price ,.strick-price,.mrp-border{
    font-size: 60%;
  } 
  .qty-border{
    font-size: 50%;
  }
  .add-to-cart-button {
    height: 20%;
  }
}