*{ box-sizing: border-box;}
body {margin: 0;padding: 0;}

/* Header */
header {align-items: center;width: 75vw;margin: auto;}
header > img {width: 3rem;}
header > p {display: inline;font-weight: 500;}  

/* Navbar */
.collapse {padding: 0 10vw; display: flex; flex-direction: row;justify-content: space-between;align-items: center;}

/* Carousel */
.carousel-item > img {width: 100%;height: 300px;}

/* Coupon */
.coupon  {width: 75%;}
.coupon > img {width: 100%;}
.adv > img {max-width: 100%;}

/* items */
.items {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;}
.items > .card {width: 22% ;margin: 10px;}
.item-box, .offer-box ,.adv {width: 75%;}

/* Offers */
.offers > .card  {width: 23%;}
.offers{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between}

/* Footer */
.footer {width: 90%;display: grid;margin: auto; box-shadow: 1px 1px 1px 1px rgb(143, 143, 143);}
.footer > div:nth-child(1) > ul >li {font-size: large;font-weight: 500;text-transform: capitalize;padding-right: 1rem;}
.horizontal-line {color: grey;font-size: 10px;}

/* Footer */
footer {background-color: black;text-align: center;color: white;}
footer p {margin: 0;padding: 0;}

@media screen and (max-width:1024px) {
    header{width: 100% !important;}
    .collapse {padding: 0;margin: 0 !important; font-size: large !important;}
    .collapse > ul:nth-child(2) {display: flex;align-items: center;}
    .footer > div:nth-child(1) > ul  > li, .footer >div:nth-child(3) > p  {font-size: 0.9rem !important;}
    .coupon {width: 100% !important;}
    .item-box, .offer-box ,.adv {width: 95%;}
}

@media screen and (max-width:768px) {
    .collapse > ul:nth-child(2){display: flex;flex-direction: row;}
    .collapse > ul > li {margin: 1rem 2rem 0 0 !important;}  
    .footer {margin: 0 !important;width: 100% !important;}
    .footer > div:nth-child(1) > ul  > li {font-size: 0.8rem !important; margin: 2px;padding: 1px;}
    .items > .card ,.offers > .card  {width: 28% ;margin: 10px;}
    .items,.offers {justify-content: center;}
}

@media screen and (max-width:500px) {
    .carousel-item > img{width: 100vw;height: 30vh;}
    .item-box > h1{font-size: 1rem;}
    .items > .card, .offers >.card {width: 44% ;margin: 10px;}
    .items, .offers {justify-content: center;margin: 0px;}
    .adv > img {width: 90%;}
    .footer {display: flex !important;flex-direction: column;}
    .footer > div {display: flex !important;flex-direction: column;}
    .about {display: flex !important;flex-direction: column;text-align: center;}
    .content > p {font-size: 0.7rem !important;}
}

@media screen and (max-width:400px) {
    .items > .card, .offers >.card {width: 64% ;margin: 10px;}
    .items, .offers {justify-content: center;margin: 0px;}
    .adv > img {width: 90%;}
    .footer {display: flex !important;flex-direction: column;}
    .footer > div {display: flex !important;flex-direction: column;}
    .about {display: flex !important;flex-direction: column;text-align: center;}
    .content > p {font-size: 0.7rem !important;}
}