/*  add to cart page css */
#cart{
    width: 70%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;


}



#cart>div>img{
    width: 100%;
}




/*  top section  */
#position{
    background-color:white; 
    width: 100%;
    position: fixed;
    left: 0%;
    top:  0%;
}

 
#location{
  
    width: 35%;
    margin: auto;
    margin-top: 5px;
height: 40px;
 
}#location>p>button{
    height: 30px;
    width: 95px;
    border-radius: 30px;
    background-color: black;
    color :white;
 
}
/*  nav section  */
#nav{
 
    display: flex;
    width: 80%;
    height: 60px;
   
   justify-content: space-between;
margin: auto;
/* position: fixed;
top: 100%;
left: 0%;
background-color: white; */
}#nav>div{
 
    /* width: 20%; */
    display: flex;


}#nav>div>div{
 
    margin: 15px;
}#logoo>img{
width: 100%;
height: 50px;
}
/*  order  */
#order{
    background-color: black;
    height: 70px;
}
#order>div{
    margin-top: 130px;
    
    display: flex;
    justify-content: center;
     height: 70px;
}#order>div>div{
 margin-left: 25px;
}
#order-btn{
    background-color: red;
    color: white;
    height: 40px;
    border-radius: 30px;
    width: 150px;
 
}
/*  Browse  */
#browse{
    width: 74%;
    margin-top: 70px;
    display: flex;
    margin-left: 300px;
  
}
/*  browse list */
#roots{
    width: 74%;
    margin-top: 70px;
   /* border: 4px solid red; */
    margin-left: 300px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    height: 530px;
    gap: 15px;
}
#roots>div{
    /* border: 3px solid blue; */
    width: 90%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
     */
}#roots>div>img{
    width: 100%;
}
#text1{
    text-align: center;
 
}

/* contact section  */
#contact{
    /* border: 4px solid red; */
    background-color: black;
    width: 100%;
    margin-top: 110px;
    height: 375px;

}
#offers{
    display: flex;
    width: 68%;
    justify-content: space-between;
    color: white;
    height: 45px;
    margin: auto;
    font-family: 'Courier New', Courier, monospace;
}
#information{
    width: 86%;
    display: flex;
    /* border: 2px solid red; */
    margin: auto;
    margin-top: 80px;
}
#information>div{
    /* border: 5px solid blue; */
    width: 12%;
    margin: 5px;

}
#information>div>p{
    color: white;
}
/* #rootdiv>img{
   width: 20%;
}
#root{
    border: 2px solid blue;
    display: flex;
    width: 80%;
} */




/*  Menu page  */







#kfc{
    /* border: 2px solid red; */
    display: flex;
    width: 76%;
    margin: auto;
    margin-top: 40px;

}
#kfc-menu{
    /* border: 2px solid blue; */
    width: 19%;
    display: flex;
    flex-direction: column;
}




#kfc-product{
    /* border: 3px solid yellow; */
width: 81%;
padding-left: 6%;

}
#kfc-product-btn{
    height: 35px;
    width: 200px;
    border-radius: 30px;
    margin-top: 40px;
}
#peri_img>img{
    width: 30%;
}
/* #peri_img{
    border: 2px solid green;
    display: grid;
    grid-template-columns: repeat(2,1fr);

} */
 

/*    dom css */
#peri_peri{
    /* display: flex; */
    border: 3px solid red;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
}
#maindiv{

    /* border: 3px solid red;
     */
     box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
     display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px; 
    padding: 25px;
    margin-top: 120px;
}
 .classs>img{
    width: 100%;
}
.peri_button{
    height: 50px;
    width: 35%;
    border-radius: 35px;
    background-color: red;
    margin: 20px;
    color: white;
}

/* 3rd colom css with dom
  */
.maindiv{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    display: grid;
   grid-template-columns: repeat(3,1fr);
   gap: 20px; 
   padding: 25px;
   margin-top: 60px;
}
#divbtn{
  justify-content: space-between;
    /* border: 3px solid red; */
    display: flex;
}
#sticky{
    height: 40px;
    width: 50px;
    border-radius: 30px;
    background-color: white;
    position: fixed;
    right: 0%;
    bottom: 100px;

}
 


/*  deals page  */

#national-offers-list{
 
    
    display: grid;
    width: 70%;
    grid-template-columns: repeat(3,1fr);
    margin: auto;
    gap: 20px;

}
.classes>img{
width: 100%;
}
.classes{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 15px;
}
#Load{
    height: 50px;
    width: 150px;
    margin: auto;
    margin-top: 50px;
    border-radius: 35px;
    margin-left: 45%;
    
}
.input{
height: 60px;
width: 250px;
border-radius: 30px;
margin:35px;
}



@media screen and (max-width: 1020px) {

    /*  deals page coming in two div */
    #national-offers-list{
 
    
         
        grid-template-columns: repeat(2,1fr);
        
    }
 

/* menu page  */

 
.peri_button{
    height: 40px;
    width: 80%;
 
}

/* 3rd colom css with dom
  */
.maindiv{
    
   grid-template-columns: repeat(1,1fr);
   
}

 
 
/*  index page  */

 
 
 
/*  browse list */
#roots{
    width: 88%;
 
    margin-left: 100px;
     
    grid-template-columns: repeat(2,1fr);
}
   
 
} 

@media screen   and (max-width: 649px) {

    #national-offers-list{
 
    
 
        grid-template-columns: repeat(1,1fr);
        
    }
 
}