@import url('https://fonts.googleapis.com/css2?family=Martel+Sans:wght@200;300;400;600;700;800;900&display=swap');


/* * || RESET */

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



/* * || VARIABLES */

:root {
  /* * MARGIN */
  /* --BODY-MARGIN: 0 10.6rem; */
  --BODY-MARGIN: 0 13.1rem;


  /* *FONTS */
  /* --FF: Okra, Helvetica, sans-serif; */
  --FF: "Martel Sans", sans-serif;
  --FS: clamp(1rem, 2.2vh, 1.5rem);
  --FSM: 18px;
  --PATH-FS: 12px;
  --FILTER-BTN-TEXT-FS: 16px;
  --FOOTER-H3-FS: 14px;
  --FOOTER-A-TAG-FS: 15px;
  --FOOTER-COPYRIGHT-FS: 13px;

  /* * COLORS */
  --ZOMATO-RED: rgb(239, 79, 95);
  --BODY-TEXT-COLOR: #000;
  --BODY-BG-COLOR: #fff;
  --HEADER-BG-COLOR: #fff;
  --BUTTON-BORDER-COLOR: #000;
  --HEADER-FONT-COLOR: rgb(105, 105, 105);
  --TOP-MENU-ICON-ACTIVE-BG-COLOR: rgb(252, 238, 192);
  --TOP-MENU-ICON-INACTIVE-BG-COLOR: linear-gradient(to right, rgb(248, 248, 248) 0%, rgb(255, 255, 255) 10%, rgb(248, 248, 248) 40%, rgb(248, 248, 248) 100%) no-repeat rgb(248, 248, 248);
  --TOP-MENU-SHADOW: rgb(232, 232, 232) 0px -0.5px 0px inset;

  /* * BORDERS */
  --BORDER-RADIUS: 8px;

  /* * --BOX-SHADOW */
  --BOX-SHADOW: rgba(28, 28, 28, 0.08) 0px 2px 8px;

  /* * ICON */
  --ICON-SIZE: 25px;

  /* * BUTTON */
  --FILTER-BTN-BG-COLOR: #fff;
  --FILTER-BTN-HOVER-BG-COLOR: hsl(0, 0%, 41%, 0.1);
  --FILTER-BTN-TEXT-COLOR: hsl(0, 0%, 41%, 0.8);
  --FILTER-BTN-BORDER-COLOR: hsl(0, 0%, 41%, 0.8);
  --GO-TO-TOP-A-BG-COLOR: var(--ZOMATO-RED);
  --GO-TO-TOP-A-HOVER-BG-COLOR: rgb(224, 53, 70);
  --GO-TO-TOP-A-SHADOW: rgba(0, 0, 0, 0.16) 0px 0.4rem 0.6rem;

  /* * || FIRST ORDER */
  --FIRSTORDER-BG-COLOR: rgb(248, 248, 248);
  --FIRSTORDER-SIZE: 9.3rem;
  --FIRSTORDER-TEXT-COLOR: rgb(54, 54, 54);
  --FIRSTORER-TITLE-COLOR: rgb(28, 28, 28);

  /* * || TOP BRANDS */
  --TOP-BRAND-CONTAINER-SHADOW: rgba(0, 0, 0, 0.08) 0px 3px 12px;
  --TOP-BRANDS-IMG-SIZE: 7.3rem;

  /* * || DELIVERY  */
  --DELIVERY-BOX-BORDER-RADIUS: 15px;
  --DELIVERY-OFFER-TAG-BG-COLOR: rgb(37, 111, 239);
  --DELIVERY-OFFER-TAG-TEXT-COLOR: #fff;
  --DELIVERY-IMG-HEIGHT: 15.5rem;
  --DELIVERY-IMG-WIDTH: 20.5rem;
  --DELIVERY-NAME-FS: 17px;
  --DELIVERY-LOCATION-TEXT-COLOR: rgb(105, 105, 105);
  --DELIVERY-LOCATION-TEXT-SIZE: 14px;
  --DELIVERY-RATING-CONTAINER-GAP: 1px;
  --DELIVERY-RATING-BG-COLOR: rgb(38, 126, 62);
  --DELIVERY-RATING-TEXT-COLOR: #fff;
  --DELIVERY-RATING-STAR-SIZE: 13px;
  --DELIVERY-SAFETY-IMG-WIDTH: 37.125px;
  --DELIVERY-SAFETY-IMG-HEIGHT: 18px;
  --DELIVERY-BOX-BORDER: 0.1rem solid #fff;
  --DELIVERY-BOX-BORDER-HOVER: 0.1rem solid rgb(232, 232, 232);
  --DELIVERY-BOX-SHADOW: rgba(28, 28, 28, 0.12) 0px 0.4rem 1.8rem;

  /* * FOOTER */
  --FOOTER-BTN-BG-COLOR: rgb(252, 252, 252);
  --FOOTER-BTN-BORDER-COLOR: rgb(232, 232, 232);
  --FOOTER-CONTENTS-BG-COLOR: rgb(248, 248, 248);
  --FOOTER-BOTTOM-BORDER-COLOR: rgb(207, 207, 207);
  --FOOTER-COPYRIGHT-TEXT-COLOR: rgb(79, 79, 79);
  --FOOTER-LINK-HOVER-COLOR: rgb(28, 28, 28);

  /* * ANIMATION */
  --ANIMATION-SHOW-CONTENTS: showContents 0.3s ease-in-out 1 forwards;
}


/* *|| ANIMATIONS */

@keyframes showContents {
  0% {
    transform: scale(0.4);
    opacity: 0.4;
  }

  80% {
    transform: scale(1.1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}


/* * ||  UTILITIES */

.nowrap {
  white-space: nowrap;
}


/* * ||  GENERAL STYLES */

html {
  scroll-behavior: smooth;
  font-family: var(--FF);
  font-size: var(--FS);
  width: 100vw;
  height: 100vh;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;

}


/* * ||  HEADER */

.header {
  background-color: var(--HEADER-BG-COLOR);
  color: var(--HEADER-FONT-COLOR);
  /* position: sticky; */
  /* padding: var(--BODY-MARGIN); */
}

.header__nav {
  display: flex;
  height: 4.5rem;
  align-items: center;
  padding: 0 0.5rem;
}

.header__ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2em;
  width: 100%;
}

.header__image {
  cursor: pointer;
  width: 140px;
  height: 27px;
}


.header__search {
  max-width: 790px;
  max-height: 57px;
  box-shadow: var(--BOX-SHADOW);
  
}


.header__select-container {
 
}

.map-pin {
  width: var(--ICON-SIZE);
  height: var(--ICON-SIZE);
}

.nav__menu-icon {
  width: var(--ICON-SIZE);
  height: var(--ICON-SIZE);
  color: #000;
}

.header__select {
  /* width: 100%; */
  z-index: 1;
  padding: 0 0.3em;
  font-size: var(--FSM);
  cursor: pointer;
}

.header__spacer {
  background-color: var(--HEADER-FONT-COLOR);
  width: 3px;
  border-radius: 18px;

}

.header__search-input-container {
  /* width: 100%; */
  display: flex;
  gap: 1rem;
  justify-content: start;
  align-items: center;
}

.search-icon {
  width: var(--ICON-SIZE);
  height: var(--ICON-SIZE);
  color: var(--HEADER-FONT-COLOR);
}

.header__search-input {

  font-size: var(--FSM);
}

.header__search-input,
.header__search-input:focus-within,
.header__select {
  border: none;
  outline: none;
}

.header__button {
  cursor: pointer;
  border: hidden;
  font-size: var(--FSM);
  padding: 0.5rem;
  background-color: var(--HEADER-BG-COLOR);
}

.header__button span {
  color: var(--HEADER-FONT-COLOR)
}


/* * || MAIN */
.main {
  position: relative;
}

/* *|| PATH */
.path {
  /* margin: var(--BODY-MARGIN);
  padding: 0.2rem; */
}

.path a {
  text-decoration: none;
  color: var(--HEADER-FONT-COLOR);
  font-size: var(--PATH-FS);
}

.path a:is(:hover, :focus-within) {
  color: var(--ZOMATO-RED);
}

.path span {
  opacity: 0.6;
}


/* *|| TOP  MENU */

.top-menu {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: start;
  column-gap: 2rem;
  /* padding: var(--BODY-MARGIN); */
}

.top-menu__item-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem;
  cursor: pointer;
}

.top-menu__item-container span {
  color: var(--HEADER-FONT-COLOR);
  font-weight: 500;
  font-size: 1.25rem;
}

.top-menu__img-container {
  padding: 1rem;
  background: var(--TOP-MENU-ICON-INACTIVE-BG-COLOR);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-menu .top-menu__item-container:nth-child(2) {
  border-bottom: 3px solid var(--ZOMATO-RED);
  color: var(--ZOMATO-RED);
}

.top-menu .top-menu__item-container:nth-child(2) .top-menu__img-container {
  background: var(--TOP-MENU-ICON-ACTIVE-BG-COLOR);
}

.top-menu img {
  width: 30px;
  height: 30px;
}

.top-menu__footer {
  width: 100%;
  height: 1px;
  background-color: gray;
  opacity: 0.5;
}


/* * || FILTERS  */

.filters__container {
  z-index: 20;
  position: sticky;
  top: 0;
  background-color: #fff;
}

.filters {
  background-color: #fff;
  padding-top: 2.2rem;
  padding-bottom: 2.2rem
}


.filters__item-container {
  display: flex;
  gap: 1rem;
  display: flex;
  justify-content: start;
  align-items: center;

}

.filter-icon {
  width: var(--FSM);
  height: var(--FSM);
  color: var(--HEADER-FONT-COLOR);
}

.filters__button {
  cursor: pointer;
  display: flex;
  padding: 0.4rem 0.3rem;
  opacity: 0.6;
  border: 1px solid var(--FILTER-BTN-BORDER-COLOR);
  border-radius: var(--BORDER-RADIUS);
  background-color: var(--FILTER-BTN-BG-COLOR);
}

.filters__button:is(:hover, :focus-within) {
  background-color: var(--FILTER-BTN-HOVER-BG-COLOR)
}



.filters__button span {
  font-size: var(--FILTER-BTN-TEXT-FS);
  color: var(--FILTER-BTN-TEXT-COLOR)
}


/* * || FIRST ORDER */

.first-order__container {
  background-color: var(--FIRSTORDER-BG-COLOR);
}

.first-order {
  position: relative;
  background-color: var(--FIRSTORDER-BG-COLOR);
}

.first-order__h2,
.top-brands__h2,
.delivery__h2 {
  padding: 1rem 0;
  color: var(--FIRSTORER-TITLE-COLOR);
}

.first-order__chev-right-container,
.first-order__chev-left-container {
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 50%;
}

.first-order__chev-right-container {
  right: 10rem;
}

.first-order__chev-left-container {
  left: 10rem;
}


.first-order__chev-right-btn,
.first-order__chev-left-btn {
  z-index: 10;
  cursor: pointer;
  padding: 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid transparent;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px,
    rgba(0, 0, 0, 0.14) 0px 6px 10px 0px,
    rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;
}

.first-order__chev-right-btn:is(:hover, :focus-within),
.first-order__chev-left-btn:is(:hover, :focus-within) {
  background-color: rgb(248, 248, 248);
}

.first-order__chev-right-btn:active,
.first-order__chev-left-btn:active {
  background-color: rgb(232, 232, 232);
  border-color: rgb(255, 219, 224);
}

.first-order__chev-right-btn svg,
.first-order__chev-left-btn svg {
  width: 1rem;
  height: 1rem;
  color: #000;
}

.first-order__ul,
.top-brands__ul {
  list-style-type: none;
  display: flex;
  /* gap: 2.2rem; */
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.first-order__li,
.top-brands__li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  animation: var(--ANIMATION-SHOW-CONTENTS);
}

.first-order__li img {
  border-radius: 50%;
  width: var(--FIRSTORDER-SIZE);
  height: var(--FIRSTORDER-SIZE);
  object-fit: cover;
}

.first-order__li p,
.top-brands__li p {
  padding-top: 0.5rem;
  color: var(--FIRSTORDER-TEXT-COLOR);
  font-weight: bold;
}


/* * || TOP BRANDS */

.top-brands__container {
  background-color: #fff;
}

.top-brands {
  position: relative;
  /* padding: var(--BODY-MARGIN); */
  padding-top: 2rem;
  overflow-x: scroll;
  scrollbar-width: none;
  background-color: #fff;
}

.top-brands__img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--FIRSTORDER-SIZE);
  height: var(--FIRSTORDER-SIZE);
  border: 1px solid #fff;
  border-radius: 50%;
  box-shadow: var(--TOP-BRAND-CONTAINER-SHADOW);
}

.top-brands__img-container img {
  width: var(--TOP-BRANDS-IMG-SIZE);
  height: var(--TOP-BRANDS-IMG-SIZE);
  object-fit: cover;
  overflow: none;
  border-radius: 50%;
}

.top-brands__li span {
  color: var(--FILTER-BTN-TEXT-COLOR);
}



/* * || DELIVERY */

.delivery {
  padding-top: 2rem;
  overflow-x: none;
  background-color: #fff;
  z-index: 2;
}

.delivery__container {
  overflow-x: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}


.delivery__item {
  padding: 0.5rem;
  cursor: pointer;
  border: var(--DELIVERY-BOX-BORDER);
  animation: var(--ANIMATION-SHOW-CONTENTS);
}


.delivery__item:is(:hover, :focus-within) {
  border: var(--DELIVERY-BOX-BORDER-HOVER);
  box-shadow: var(--DELIVERY-BOX-SHADOW);
  border-radius: var(--DELIVERY-BOX-BORDER-RADIUS);
}

.delivery__img-container {
  position: relative;
}

.delivery__img-container img {
  /* width: var(--DELIVERY-IMG-WIDTH);
  height: var(--DELIVERY-IMG-HEIGHT); */
  border-radius: var(--DELIVERY-BOX-BORDER-RADIUS);
  object-fit: cover;
}

.delivery__offer {
  background-color: var(--DELIVERY-OFFER-TAG-BG-COLOR);
  position: absolute;
  z-index: 10;
  padding: 0 1rem;
  bottom: 1.5rem;
  color: var(--DELIVERY-OFFER-TAG-TEXT-COLOR);
  border-radius: 0 8px 8px 0;
}

.delivery__details {
  display: flex;
  justify-content: space-between;
  align-items: start;
  border-bottom: 1px solid var(--DELIVERY-LOCATION-TEXT-COLOR);
}

/* * delivery name and location */
.delivery__item-name-details p:first-child {
  color: var(--FIRSTORER-TITLE-COLOR);
  font-size: var(--DELIVERY-NAME-FS);
  text-transform: capitalize;
  font-weight: 500;
}

.delivery__item-name-details p:last-child {
  width: 10rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--DELIVERY-LOCATION-TEXT-SIZE);
  color: var(--DELIVERY-LOCATION-TEXT-COLOR);
}


/* * rating  ,time and price */

.delivery__item-rating-details {}

.delivery__rating {
  display: flex;
  align-items: center;
  padding: 0 0.2rem;
  width: fit-content;
  height: 1.1rem;
  background-color: var(--DELIVERY-RATING-BG-COLOR);
  border-radius: 6px;
  gap: 0.3rem;
}

.delivery__rating div {
  width: fit-content;
  height: fit-content;
}

.delivery__rating p {
  color: var(--DELIVERY-RATING-TEXT-COLOR);
  font-weight: bold;
}

.delivery__rating .star-icon {
  height: var(--DELIVERY-RATING-STAR-SIZE);
  width: var(--DELIVERY-RATING-STAR-SIZE);
  color: var(--DELIVERY-RATING-TEXT-COLOR);
  fill: var(--DELIVERY-RATING-TEXT-COLOR);
}

.delivery__item-rating-details .price {
  color: var(--DELIVERY-LOCATION-TEXT-COLOR);
}

.delivery__item-rating-details .time {
  font-weight: bold;
  font-size: 12px;
  color: var(--FIRSTORDER-TEXT-COLOR);
}

/* * safety */
.delivery__safety {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 1rem;
}

.delivery__safety p {
  color: var(--DELIVERY-LOCATION-TEXT-COLOR);
  font-size: 12px;
}


/* * || FOOTER */
.footer {
  margin-top: 3rem;
  background-color: var(--FOOTER-BTN-BG-COLOR);
}

.footer__inner-container{
  background-color: var(--FOOTER-BTN-BG-COLOR);
}

.footer__btn-container {
  /* padding: var(--BODY-MARGIN); */
  background-color: var(--FOOTER-BTN-BG-COLOR);

}

.footer__btns-h1 {}

.footer__btns {
  display: grid;
  column-gap: 1rem;
}

.footer__btn-outer-container {
  margin: 1rem 0;
  border-radius: 15px;
  border: 1px solid var(--FOOTER-BTN-BORDER-COLOR);
  background-color: #fff;
  cursor: pointer;
}

.footer__inner-btn-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.footer__inner-btn-container button {
  border: none;
  overflow: hidden;
  background-color: #fff;
  font-size: 20px;
  padding: 1rem;
  margin-left: 1rem;
  text-transform: capitalize;
  cursor: pointer;
}


.footer__inner-btn-container .chevdown {
  width: var(--ICON-SIZE);
  height: var(--ICON-SIZE);
  margin: 0 0.5rem;
}

.footer__btn-data {
  display: none;
}


/* * footer contents */

.footer__contents-container{
  background-color: var(--FOOTER-CONTENTS-BG-COLOR);
}

.footer__contents {
  /* padding: var(--BODY-MARGIN); */
  background-color: var(--FOOTER-CONTENTS-BG-COLOR);
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.footer__contents-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.footer__contents-top select {
  border-radius: 8px;
  padding: 0.5rem;
  font-size: var(--FSM);
  opacity: 0.8;
  cursor: pointer;
}

.footer__contents-top select:is(:focus-within, :active) {
  border-radius: 8px;
  opacity: 0.8;
  outline: none;
}

.footer__contents-top select option {
  border: none;
  margin-bottom: 5rem;
}




/* * footer bottom */
.footer__outer-container-bottom {
  display: grid;
  padding: 1rem 0;

}

.footer__inner-container-bottom {
  padding: 2rem 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--FOOTER-BOTTOM-BORDER-COLOR);
}

.footer__inner-container-bottom section {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.footer__inner-container-bottom section h3 {
  font-size: var(--FOOTER-H3-FS);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.footer__inner-container-bottom section a {
  text-decoration: none;
  color: var(--HEADER-FONT-COLOR);
  text-transform: capitalize;
  font-size: var(--FOOTER-A-TAG-FS);
  white-space: nowrap;
}

.footer__inner-container-bottom section a:is(:hover, :focus-within) {
  color: var(--FOOTER-LINK-HOVER-COLOR);
}

.footer__bottom-social-links {
  gap: 0.5rem 0;
}

.footer__bottom-social-links i {
  cursor: pointer;
}

.footer__bottom-social-links img {
  width: 8.5rem;
  height: 2.5rem;
  cursor: pointer;
}

.footer__copyright-text {
  margin: 1.4rem 0;
  font-size: var(--FOOTER-COPYRIGHT-FS);
  color: var(--FOOTER-COPYRIGHT-TEXT-COLOR);
}


/* * GO TO TOP BTN */
.main__go-to-top {
  background-color: var(--GO-TO-TOP-A-BG-COLOR);
  box-shadow: var(--GO-TO-TOP-A-SHADOW);
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  text-decoration: none;
  border-radius: 50%;
  z-index: 15;
}

.main__go-to-top:is(:focus-within, :hover) {
  background-color: var(--GO-TO-TOP-A-HOVER-BG-COLOR)
}

.main__go-to-top svg {
  width: 32px;
  height: 32px;
  color: #fff;
}