* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
:root {
  font-size: 10px;
  --color-black-primary: #2a333e;
  --color-red-primary: rgba(67, 126, 247, 1);
  --color-red-secondary: rgba(43, 99, 217, 1);
  --color-grey-primary: rgba(228, 228, 228, 1);
  --color-white-primary: white;
  --color-primary-green: rgba(128, 192, 61, 0.2);
  --color-secondary-green: rgba(230, 242, 216, 1);
}

/* @media (max-width: 991px) {
  :root {
    font-size: 5px;
  }
} */
ul {
  list-style: none;
}

a {
  text-decoration: none;
  display: inline-block;
  color: var(--color-black-primary);
}
img {
  width: 100%;
  /* height: 100%; */
  display: block;
}
button {
  all: unset;
  cursor: pointer;
  display: inline-block;
}

span {
  display: inline-block;
}

.container {
  margin: 0 auto;
  width: 85%;
  max-width: 1280px;
}
.container-fluid {
  margin: 0 auto;
  width: 93%;
  /* max-width: 1280px; */
}
.container-fluid-2 {
  margin: 0 auto;
  width: 80%;
  /* max-width: 1280px; */
}
.container-fluid-3 {
  margin: 0 auto;
  width: 70%;
  /* max-width: 1280px; */
}
.container-fluid-4 {
  margin: 0 auto;
  width: 60%;
  /* max-width: 1280px; */
}
.flex-column {
  flex-direction: column;
}
.rel {
  position: relative;
}

.row {
  display: flex;
  flex-wrap: wrap;
}
.d-flex {
  display: flex;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.align-center {
  align-items: center;
}

/* header */
.header {
  padding: 1.5rem 0;
  background-image: url(../photos/tech-overaly.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 87%;
  margin-bottom: 26.2rem;
}
/* nav */

.navbar__logo h3 {
  font-size: 25px;
}

.navbar__links {
  /* width: 50%; */
  gap: 4.1rem;
  font-size: 1.7rem;
  color: var(--color-black-primary);
  margin-right: 10rem;
}
.navbar__links a {
  padding: 0.5rem 0;
}
.navbar__links a.active {
  border-bottom: 2px solid var(--color-red-primary);
  padding: 1rem;
  padding-bottom: 0.5rem;
}

.navbar__icons {
  width: 10%;
  display: flex;
  justify-content: space-around;
  margin-right: 10rem;
}
.navbar__icons a {
  padding: 0.5rem;
}
.navbar__icons a.rel span {
  background-color: var(--color-red-secondary);
  width: 1.4rem;
  height: 1.5rem;
  font-size: 1rem;
  color: var(--color-white-primary);
  font-weight: 700;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  margin-right: -0.3rem;
  margin-top: -0.3rem;
}
.navbar__icons svg {
  height: 2rem;
}
.navbar__res {
  display: none;
  font-size: 2rem;
}

/* nav */

/* hero section */
.hero {
  padding-top: 15rem;
  /* padding-bottom: 1rem; */
}
.hero__slider-bar {
  gap: 1rem;
  position: absolute;
  top: 42%;
  transform: rotate(90deg);
  /* margin-left: -6%; */
}
.hero__slider-bar div {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--color-red-primary);
}
.hero__slider-bar div:nth-child(1) {
  opacity: 0.3;
}
.hero__slider-bar div:nth-child(2) {
  opacity: 0.3;
}
.hero__slider-bar div:nth-child(3) {
  opacity: 1;
}
.hero__slider-bar div:nth-child(4) {
  opacity: 0.3;
}
.hero__slider-bar div:nth-child(5) {
  opacity: 0.3;
}

.hero__content {
  width: 39%;
}
.hero__content h5 {
  color: var(--color-red-primary);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.8rem;
  letter-spacing: 0.096rem;
}
.hero__content h1 {
  color: var(--color-red-primary);
  font-family: "Abhaya Libre", serif;
  font-size: 18.2rem;
  font-weight: 800;
  line-height: 10rem;
  letter-spacing: -1.456rem;
  padding: 4.1rem 0;
}
.hero__content h1 > span {
  color: var(--color-red-primary);
  font-size: 6.2rem;
  font-weight: 700;
  letter-spacing: -0.496rem;
  opacity: 0.15;
  display: inline;
  transform: translateY(-2.5rem) rotate(-90deg);
}

.hero__content p {
  color: var(--color-black-primary);
  font-size: 2rem;
  font-weight: 500;
}

.hero__buttons {
  justify-content: flex-start;
  padding: 9.7rem 0;
}

.hero__buttons a {
  font-weight: 700;
  font-size: 1.8rem;
  border-radius: 1rem;
}
.hero__button-wrapper-1 a {
  background-color: var(--color-red-primary);
  color: var(--color-white-primary);
  padding: 1.8rem 4.1rem 1.9rem 4.3rem;
}
.right-rounded {
  aspect-ratio: 0;
  clip-path: shape(
    from 91.22% 90.44%,
    curve to 86.97% 100% with 90.51% 96.22%/88.84% 100%,
    hline to 4.58%,
    curve to 0% 84.62% with 2.05% 100%/0% 93.11%,
    vline to 15.38%,
    curve to 4.58% 0% with 0% 6.89%/2.05% 0%,
    hline to 95.41%,
    curve to 99.65% 21.21% with 98.67% 0%/100.89% 11.09%,
    line to 91.22% 90.44%,
    close
  );
}

.hero__button-wrapper-1 {
  filter: drop-shadow(0 0.185rem 0.314rem rgba(67, 126, 247, 0.02))
    drop-shadow(0 0.815rem 0.652rem rgba(67, 126, 247, 0.04))
    drop-shadow(0 2rem 1.3rem rgba(67, 126, 247, 0.05))
    drop-shadow(0 3.852rem 2.548rem rgba(67, 126, 247, 0.06))
    drop-shadow(0 6.481rem 4.685rem rgba(67, 126, 247, 0.08))
    drop-shadow(0 10rem 8rem rgba(67, 126, 247, 0.1));
}

.hero__button-wrapper-2 a {
  background-color: var(--color-black-primary);
  color: var(--color-white-primary);
  padding: 1.8rem 4.5rem 1.9rem 6rem;
}
.left-rounded {
  aspect-ratio: 3.356;
  clip-path: shape(
    from 8.78% 9.56%,
    curve to 13.03% 0% with 9.49% 3.78%/11.16% 0%,
    hline to 95.42%,
    curve to 100% 15.38% with 97.95% 0%/100% 6.89%,
    vline to 84.62%,
    curve to 95.42% 100% with 100% 93.11%/97.95% 100%,
    hline to 4.59%,
    curve to 0.35% 78.79% with 1.33% 100%/-0.89% 88.91%,
    line to 8.78% 9.56%,
    close
  );
}
.hero__button-wrapper-2 {
  filter: drop-shadow(0 0.185rem 0.314rem rgba(68, 68, 68, 0.02))
    drop-shadow(0 0.815rem 0.652rem rgba(68, 68, 68, 0.04))
    drop-shadow(0 2rem 1.3rem rgba(68, 68, 68, 0.05))
    drop-shadow(0 3.852rem 2.548rem rgba(68, 68, 68, 0.06))
    drop-shadow(0 6.481rem 4.685rem rgba(68, 68, 68, 0.08))
    drop-shadow(0 10rem 8rem rgba(68, 68, 68, 0.1));
}
.hero__times {
  gap: 6rem;
  color: var(--color-black-primary);
}

.hero__times h4 {
  font-size: 2.6rem;
  font-weight: 700;
}
.hero__times p {
  font-size: 2rem;
  font-weight: 500;
  opacity: 0.5;
}

/* hero section */
/* header */

/* products */
.products {
  padding-top: 4.7rem;
  padding-bottom: 7.1rem;
}
div:has(img[alt="blurred-2"]) {
  position: absolute;
  left: 0;
  width: 6rem;
}
.products__head {
  text-align: center;
  margin-bottom: 11.2rem;
}
.products__head h5 {
  color: var(--color-black-primary);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.04rem;
}

.products__head h2 {
  color: var(--color-red-primary);
  font-family: "Abhaya Libre", serif;
  font-size: 8rem;
  font-weight: 800;
  letter-spacing: -0.64rem;
  position: relative;
}
.products__head div {
  position: absolute;
  width: 18.3rem;
  height: 2.1rem;
  left: 38%;
}

.products__cards {
  flex-wrap: wrap;
}
.products__card {
  width: 25%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.products__card-image {
  margin-bottom: 3.7rem;
  width: 18rem;
}

.products__card-image img {
  box-shadow: 0 0.185rem 0.314rem rgba(68, 68, 68, 0.02),
    0 0.815rem 0.652rem rgba(68, 68, 68, 0.04),
    0 2rem 1.3rem rgba(68, 68, 68, 0.05),
    0 3.852rem 2.548rem rgba(68, 68, 68, 0.06),
    0 6.481rem 4.685rem rgba(68, 68, 68, 0.08),
    0 10rem 8rem rgba(68, 68, 68, 0.1);
  border-radius: 50%;
}
.products__card-stars {
  margin-bottom: 2.5rem;
  position: relative;
  font-size: 1rem;
  line-height: 1;
}
.stars {
  display: flex;
  gap: 0.2rem;
}
.front {
  color: var(--color-red-secondary);
  overflow: hidden;
}
.back {
  color: var(--color-black-primary);
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.products__card h6 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 1.6rem;
}

.products__card h3 {
  font-size: 2.8rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4.4rem;
}

.products__card a {
  padding: 1.3rem 2.8rem 1.6rem 3.2rem;
  gap: 1.7rem;
  font-weight: 500;
  display: flex;
  font-size: 1.2rem;
  border-radius: 1rem;
  transform: skewX(162deg);
  background-color: var(--color-red-primary);
  color: white;
  box-shadow: 0 0.185rem 0.314rem rgba(67, 126, 247, 0.02),
    0 0.815rem 0.652rem rgba(67, 126, 247, 0.04),
    0 2rem 1.3rem rgba(67, 126, 247, 0.05),
    0 3.852rem 2.548rem rgba(67, 126, 247, 0.06),
    0 6.481rem 4.685rem rgba(67, 126, 247, 0.08),
    0 10rem 8rem rgba(67, 126, 247, 0.1);
}

/* products  */

/* delivery */
.delivery {
  padding-bottom: 12.2rem;
}

.delivery__categories {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  padding: 1rem 0;
  max-height: 482px;
  overflow-y: auto;
}

.delivery__categories::-webkit-scrollbar {
  width: 5px;
}

.delivery__categories::-webkit-scrollbar-track {
  background-color: var(--color-grey-primary);
}

.delivery__categories::-webkit-scrollbar-thumb {
  background-color: var(--color-black-primary);
}

.delivery__item.active {
  background-color: var(--color-red-primary);
  aspect-ratio: 2.948;
  clip-path: shape(
    from 0% 14.42%,
    curve to 4.89% 0% with 0% 6.46%/2.19% 0%,
    hline to 95.11%,
    curve to 99.87% 17.66% with 98.25% 0%/100.58% 8.62%,
    line to 94.31% 88.82%,
    curve to 89.54% 100% with 93.8% 95.36%/91.82% 100%,
    hline to 4.89%,
    curve to 0% 85.58% with 2.19% 100%/0% 93.54%,
    vline to 14.42%,
    close
  );

  border-radius: 1rem;
}
.item-wrapper:has(.active) {
  filter: drop-shadow(0 0.185rem 0.314rem rgba(67, 126, 247, 0.02))
    drop-shadow(0 0.815rem 0.652rem rgba(67, 126, 247, 0.04))
    drop-shadow(0 2rem 1.3rem rgba(67, 126, 247, 0.05))
    drop-shadow(0 3.852rem 2.548rem rgba(67, 126, 247, 0.06))
    drop-shadow(0 6.481rem 4.685rem rgba(67, 126, 247, 0.08))
    drop-shadow(0 10rem 8rem rgba(67, 126, 247, 0.1));
}
.delivery__item {
  padding: 0.747rem 0 0.845rem 0.854rem;
  gap: 1.73rem;
  width: 21.7rem;
}
.delivery__item div {
  padding: 0.61rem;
  border-radius: 1rem;
}
.delivery__item div img {
  width: 4.1rem;
}
.delivery__item.active div {
  background-color: var(--color-white-primary);
}
.delivery__item h5 {
  font-weight: 600;
  line-height: 1.707rem;
  font-size: 1.461rem;
  color: var(--color-black-primary);
  opacity: 0.5;
}
.delivery__item.active h5 {
  color: var(--color-white-primary);
  opacity: 1;
}
.delivery__scroll {
  width: 1.5%;
}
.delivery__scroll {
  background-color: var(--color-grey-primary);
  align-self: stretch;
  padding-top: 2rem;
}

.delivery__scroll span {
  display: block;
  height: 14%;
  background-color: var(--color-black-primary);
}

.delivery__content {
  width: 63%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
  gap: 2rem;
  background-color: rgba(67, 126, 247, 0.15);
  border-radius: 3.044rem;
  padding: 7.3rem 16rem 6rem 7.4rem;
  position: relative;
}

.delivery__content h5 {
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.948rem;
  background-color: var(color-red-primary);
  border: 0.122rem solid var(--color-red-secondary);
  padding: 0.652rem 1.348rem 1.052rem 1.95rem;
  display: flex;
  border-radius: 5rem;
}
.delivery__content h5 div {
  width: 2.679rem;
  display: inline-block;
  margin-left: 1.8rem;
}
.delivery__content h2 {
  color: var(--color-red-primary);
  font-family: "Abhaya Libre", serif;
  font-size: 8rem;
  line-height: 6.2rem;
  letter-spacing: -0.48rem;
}

.delivery__content p {
  color: var(--color-black-primary);
  font-weight: 500;
  font-size: 1.461rem;
  line-height: 3.409rem;
  width: 65%;
  margin-bottom: 2rem;
}

.delivery__button-wrapper a {
  background-color: var(--color-black-primary);
  color: var(--color-white-primary);
  padding: 2rem 3.2rem 2rem 2.3rem;
  border-radius: 1rem;
  font-size: 1.8rem;
  line-height: 1.948rem;
  font-weight: 500;
}

.delivery__button-wrapper {
  filter: drop-shadow(0 0.185rem 0.314rem rgba(68, 68, 68, 0.02))
    drop-shadow(0 0.815rem 0.652rem rgba(68, 68, 68, 0.04))
    drop-shadow(0 2rem 1.3rem rgba(68, 68, 68, 0.05))
    drop-shadow(0 3.852rem 2.548rem rgba(68, 68, 68, 0.06))
    drop-shadow(0 6.481rem 4.685rem rgba(68, 68, 68, 0.08))
    drop-shadow(0 10rem 8rem rgba(68, 68, 68, 0.1));
}
.delivery__content > div:has(img) {
  position: absolute;
}

.delivery__image-1 {
  width: 8.1rem;
  right: 35%;
  top: 0;
  margin: -3rem;
  margin-bottom: -4rem;
}

.delivery__image-2 {
  top: 56%;
  left: 0;
  margin-left: -6rem;
  width: 11.9rem;
}
.delivery__image-3 {
  right: 0;
  bottom: 0;
  width: 30rem;
  margin-right: -5rem;
  margin-bottom: -5rem;
}
.delivery__image-3 img {
  mix-blend-mode: multiply;
}
.delivery__slider {
  position: absolute;
  gap: 0.423rem;
  top: 2rem;
  left: 2.6rem;
}
.delivery__slider div {
  width: 0.987rem;
  height: 0.987rem;
  border-radius: 50%;
}

.delivery__slider div:nth-child(1) {
  background-color: var(--color-red-primary);
}
.delivery__slider div:nth-child(2) {
  background-color: var(--color-primary-green);
}
.delivery__slider div:nth-child(3) {
  background-color: var(--color-secondary-green);
}
/* delivery */

/* menu */

.menu {
  padding-top: 2rem;
  padding-bottom: 4.2rem;
  margin-bottom: 9.8rem;
}
div:has(img[alt="blurred"]) {
  width: 9rem;
  position: absolute;
  left: 0;
}
.menu > div {
  gap: 5.4rem;
}
.menu__head {
  text-align: center;
}
.menu__head h5 {
  font-size: 2rem;
  letter-spacing: 0.04rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-black-primary);
}
.menu__head h2 {
  font-family: "Abhaya Libre", serif;
  color: var(--color-red-primary);
  font-size: 8rem;
  line-height: 8rem;
  letter-spacing: -0.48rem;
  width: 70%;
}

.menu__items {
  flex-wrap: wrap;
  gap: 2.5%;
}
.items-leaf {
  position: absolute;
  right: 0;
  width: 5rem;
  top: 45%;
  margin-right: -5rem;
}
.menu__item {
  align-items: flex-start;
  width: 31%;
  gap: 0.6rem;
  padding: 2rem 2.5rem 2rem 2.8rem;
  border: 0.05rem solid rgba(0, 0, 0, 0.13);
  border-radius: 2rem;
  margin-bottom: 1rem;
}
.menu__item figure {
  width: 18.5rem;
  align-self: center;
  margin-bottom: 0.9rem;
}

.menu__item figure img {
  border-radius: 50%;
  box-shadow: 0 0.185rem 0.314rem rgba(68, 68, 68, 0.02),
    0 0.815rem 0.652rem rgba(68, 68, 68, 0.04),
    0 2rem 1.3rem rgba(68, 68, 68, 0.05),
    0 3.852rem 2.548rem rgba(68, 68, 68, 0.06),
    0 6.481rem 4.685rem rgba(68, 68, 68, 0.08),
    0 10rem 8rem rgba(68, 68, 68, 0.1);
}
.menu__item .stars span svg {
  width: 2rem;
  height: 2rem;
}

.menu__item h6 {
  font-weight: 600;
  font-size: 2rem;
  color: var(--color-black-primary);
  margin-top: 0.4rem;
}

.menu__item p {
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--color-black-primary);
  letter-spacing: -0.016rem;
  margin-bottom: 1.4rem;
}
.menu__item-foot {
  width: 100%;
}
.menu__item-foot span {
  font-weight: 500;
  font-size: 2rem;
  color: var(--color-black-primary);
}

.menu__items-buttons a {
  color: var(--color-white-primary);
  padding: 0.9rem 0.8rem;
  border-radius: 1rem;
}

.menu__items-buttons a svg {
  width: 1.6rem;
  height: 1.4rem;
}

.menu__items-buttons a:nth-child(1) {
  background-color: var(--color-red-secondary);
  margin-right: 1rem;
  box-shadow: 0 0.185rem 0.314rem rgba(67, 126, 247, 0.02),
    0 0.815rem 0.652rem rgba(67, 126, 247, 0.04),
    0 2rem 1.3rem rgba(67, 126, 247, 0.05),
    0 3.852rem 2.548rem rgba(67, 126, 247, 0.06),
    0 6.481rem 4.685rem rgba(67, 126, 247, 0.08),
    0 10rem 8rem rgba(67, 126, 247, 0.1);
}

.menu__items-buttons a:nth-child(2) {
  background-color: var(--color-black-primary);
  box-shadow: 0 0.185rem 0.314rem rgba(68, 68, 68, 0.02),
    0 0.815rem 0.652rem rgba(68, 68, 68, 0.04),
    0 2rem 1.3rem rgba(68, 68, 68, 0.05),
    0 3.852rem 2.548rem rgba(68, 68, 68, 0.06),
    0 6.481rem 4.685rem rgba(68, 68, 68, 0.08),
    0 10rem 8rem rgba(68, 68, 68, 0.1);
}
.button-wrapper {
  filter: drop-shadow(0 0.185rem 0.314rem rgba(67, 126, 247, 0.02))
    drop-shadow(0 0.815rem 0.652rem rgba(67, 126, 247, 0.04))
    drop-shadow(0 2rem 1.3rem rgba(67, 126, 247, 0.05))
    drop-shadow(0 3.852rem 2.548rem rgba(67, 126, 247, 0.06))
    drop-shadow(0 6.481rem 4.685rem rgba(67, 126, 247, 0.08))
    drop-shadow(0 10rem 8rem rgba(67, 126, 247, 0.1));
}
.button-wrapper a {
  aspect-ratio: 3.001;
  clip-path: shape(
    from 0% 16.13%,
    curve to 5.37% 0% with 0% 7.22%/2.41% 0%,
    hline to 94.62%,
    curve to 99.92% 18.95% with 97.97% 0%/100.5% 9.07%,
    line to 95.91% 86.69%,
    curve to 90.62% 100% with 95.46% 94.39%/93.23% 100%,
    hline to 5.37%,
    curve to 0% 83.87% with 2.41% 100%/0% 92.78%,
    vline to 16.13%,
    close
  );

  font-size: 1.6rem;
  color: var(--color-white-primary);
  background-color: var(--color-red-secondary);
  border-radius: 1rem;
  padding: 1.2rem 1.6rem 1.2rem 2rem;
}

.button-wrapper a span {
  background-color: var(--color-white-primary);
  color: var(--color-red-secondary);
  border-radius: 1rem;
  aspect-ratio: 0.947;
  clip-path: shape(
    from 0% 26.32%,
    curve to 27.78% 0% with 0% 11.78%/12.44% 0%,
    hline to 72.21%,
    curve to 99.53% 31.08% with 89.57% 0%/102.68% 14.91%,
    line to 90.32% 78.45%,
    curve to 63% 100% with 87.89% 90.94%/76.4% 100%,
    hline to 27.78%,
    curve to 0% 73.68% with 12.44% 100%/0% 88.22%,
    vline to 26.32%,
    close
  );

  margin-left: 1rem;
  padding: 1.2rem 1.4rem;
}
/* menu */

/* app */

.app {
  background-color: rgba(67, 126, 247, 0.15);
  padding: 10.4rem 0;
}

.app .row {
  justify-content: flex-start;
  gap: 17.2rem;
}
.app figure {
  width: 32rem;
}

img[alt="leaves"] {
  position: absolute;
  width: 12rem;
  left: 0;
  bottom: 0;
  margin-left: -4rem;
}

.app__content {
  width: 40%;
  gap: 1.2rem;
}
.app__content h5 {
  font-weight: 700;
  font-size: 2rem;
  color: var(--color-black-primary);
  letter-spacing: -0.08rem;
}

.app__content h3 {
  font-family: "Abhaya Libre", serif;
  font-weight: 800;
  font-size: 6.2rem;
  line-height: 6rem;
  color: var(--color-red-secondary);
  letter-spacing: -0.372rem;
}

.h3Collection {
  padding-bottom: 0.9rem;
}
.app__content p {
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--color-black-primary);
  letter-spacing: -0.08rem;
  margin-bottom: 5rem;
}

.app__buttons {
  gap: 4.8rem;
}

.app__button {
  background-color: var(--color-black-primary);
  border-radius: 1rem;
  padding: 1.317rem 2.341rem 1.065rem 2.284rem;
  gap: 0.5rem;
}

.app__button:nth-child(2) {
  padding: 1.1rem 2.194rem 1.065rem 2.284rem;
}
.app__button:nth-child(1) .app__button-image {
  width: 2.015rem;
  height: 2.477rem;
}
.app__button:nth-child(2) .app__button-image {
  width: 2.626rem;
  height: 2.925rem;
}

.app__button-content h5 {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-white-primary);
  line-height: 70%;
}
.app__button-content h5 span {
  font-size: 1.8rem;
  font-weight: 500;
  display: block;
  line-height: 100%;
}
/* app */

/* test */
.test {
  padding-top: 10.4rem;
  padding-bottom: 6.2rem;
}
.test__head {
  text-align: center;
  margin-bottom: 11rem;
}
.test__head div {
  position: absolute;
  left: 50%;
}
.test__head h5 {
  font-size: 2rem;
  letter-spacing: 0.04rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-black-primary);
  margin: 0 auto;
}
.test__head h2 {
  font-family: "Abhaya Libre", serif;
  font-weight: 800;
  font-size: 6.2rem;
  line-height: 6rem;
  color: var(--color-red-secondary);
  letter-spacing: -0.372rem;
  margin: 0 auto;
}
.test__reviews {
  gap: 1.5rem;
}
.test__review {
  align-items: flex-start;
  gap: 2.5rem;
  width: 49%;
  padding: 0 2rem;
  padding: 18px 18px;
  border: 0.5px solid rgba(0, 0, 0, 0.159);
  border-radius: 5px;
}
.test__review-image {
  width: 7.5rem;
  height: 7.5rem;
  flex-shrink: 0;
}
.test__review-content h3 {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2.1rem;
  color: var(--color-black-primary);
  margin-bottom: 0.8rem;
}
.test__review-content h4 {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2.1rem;
  color: var(--color-black-primary);
}
.test__review-content p {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2.4rem;
  color: var(--color-black-primary);
  width: 87%;
  text-transform: capitalize;
}

.test__review-content p span {
  font-weight: 700;
  color: var(--color-red-secondary);
}

.test__review-content .stars {
  margin: 1.7rem 0;
}
/* test */

/* discounts */
.discounts {
  padding-top: 7rem;
}
.discounts__box {
  border: 0.1rem solid var(--color-red-primary);
  border-radius: 4.7rem;
  gap: 2.5rem;
  padding: 3.1rem 0;
  margin-bottom: -8rem;
  position: relative;
  background-color: var(--color-white-primary);
  z-index: 9999;
}

.discounts__box h4 {
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 2.1rem;
}
.box__head {
  margin-bottom: 0.9rem;
}

.box__head div {
  width: 10.9rem;
  position: absolute;
  left: 55%;
  margin-top: 0.4rem;
}

.discounts__box p {
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.9rem;
  width: 40%;
  text-align: center;
}

.discounts__input {
  border: 0.1rem solid var(--color-red-primary);
  border-radius: 4.7rem;
  padding: 0.5rem 0.7rem 0.5rem 2rem;
  width: 50%;
}

.discounts__input button {
  color: var(--color-white-primary);
  font-weight: 500;
  font-size: 1.4rem;
  background-color: var(--color-red-secondary);
  border-radius: 4.7rem;
  padding: 1.1rem 2rem 1.4rem 2rem;
}
.discounts__input input {
  border: none;
  display: inline-block;
  outline: none;
  flex: 1;
}
/* discounts */

/* footer */

.footer {
  background-color: var(--color-black-primary);
  color: var(--color-white-primary);
  padding-top: 13rem;
}

.footer__body {
  margin-bottom: 6.6rem;
}
.footer a {
  color: var(--color-white-primary);
  padding: 0.1rem;
}

.footer h5 {
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--color-white-primary);
}

.footer__head {
  margin-right: 24rem;
  justify-content: space-evenly;
}

.footer__head-logo h3 {
  font-size: 25px;
}

.footer__head svg {
  width: 1.6rem;
  height: 1.5rem;
  margin: 0.1rem;
}

.footer__head-icons {
  gap: 1.4rem;
  margin-left: 0.5rem;
}

.footer__support a,
.footer__info a {
  font-weight: 400;
  font-size: 1.6rem;
}

.footer__contact {
  margin-right: 6.7rem;
  align-items: flex-start;
  width: 30%;
}

.footer__support {
  margin-right: 3.6rem;
}

.footer__contact a {
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.5rem;
  width: 80%;
  align-items: baseline;
}

.footer__support,
.footer__info {
  align-items: flex-start;

  gap: 2.1rem;
}

.footer small {
  font-size: 1.6rem;
  line-height: 2.5rem;
  font-weight: 400;
  color: var(--color-white-primary);
  text-align: center;
  display: block;
  margin-right: 10rem;
}

/* footer */
@media (max-width: 1152px) {
  .products__cards {
    row-gap: 4rem;
  }
  .products__card {
    width: 33.33%;
  }
}
@media (max-width: 1116px) {
  .navbar__icons {
    display: none;
  }
  .navbar__links {
    display: none;
  }
  .navbar__res {
    display: inline-block;
  }
  .footer__body {
    justify-content: space-between;
    gap: 0;
  }
  .footer__head,
  .footer__contact,
  .footer__support {
    margin-right: 0;
  }
  .footer__contact a {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .header {
    background-image: none;
    margin-bottom: 5rem;
  }

  /* hero */
  .hero {
    padding-top: 5rem;
  }
  .hero__content {
    width: 100%;
  }
  .hero__slider-bar {
    margin-left: -3%;
  }
  /* hero */
  /* products */
  .products__card {
    width: 50%;
  }
  /* products */

  /* delivery */
  .delivery .container-fluid-2 > .row {
    justify-content: center;
    row-gap: 4rem;
  }
  .delivery__categories {
    width: fit-content;
    padding-right: 3rem;
  }
  .delivery__content {
    width: 100%;
    padding-right: 8rem;
  }
  .delivery__content h2 {
    font-size: 6rem;
  }
  /* delivery */

  /* menu */
  .menu__head h5 {
    font-size: 1.5rem;
  }
  .menu__head h2 {
    font-size: 6rem;
    width: 80%;
  }
  .menu__item {
    width: 48.75%;
  }
  /* menu */

  /* app */
  .app .row {
    justify-content: center;
    gap: 4rem;
  }
  .app__content {
    width: 100%;
    text-align: center;
  }
  .app__buttons {
    justify-content: center;
  }
  /* app */

  /* test */
  .test__review {
    width: 100%;
  }
  /* test */

  /* discounts */
  .box__head {
    text-align: center;
  }
  .box__head div {
    display: none;
  }
  .discounts__box p {
    width: 60%;
  }
  .discounts__input {
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem 2rem;
  }

  /* discounts */

  /* footer */

  .footer__body {
    justify-content: space-between;
    row-gap: 3rem;
  }
  .footer__head {
    width: 100%;
    row-gap: 1rem;
  }
  .footer__head-icons {
    margin-left: 0;
  }
  .footer__contact {
    width: 65%;
    row-gap: 2rem;
  }
  .footer small {
    margin-right: 0;
  }
  /* footer */
}

@media (max-width: 600px) {
  .products__card {
    width: 100%;
  }
}

@media (max-width: 376px) {
  :root {
    font-size: 9px;
  }

  /* hero */
  .hero__slider-bar {
    margin-left: -11%;
  }
  .hero__content h1 {
    font-size: 9.2rem;
    padding-block: 2.2rem;
    letter-spacing: -1rem;
  }
  .hero__content h1 > span {
    font-size: 4.2rem;
  }
  .hero__content h1 > span > span {
    font-size: 3rem;
  }

  .hero__content p {
    font-size: 1.5rem;
  }
  .hero__buttons {
    padding-block: 4rem;
  }
  .hero__buttons a {
    font-size: 1.6rem;
  }
  .hero__button-wrapper-1 a {
    padding: 1.4rem 3.1rem 1.4rem 2.6rem;
  }
  .hero__button-wrapper-2 a {
    padding: 1.4rem 2.6rem 1.4rem 3.1rem;
  }

  .hero__times {
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
  }
  /* hero */

  /* delivery */
  .delivery__content {
    padding: 5rem 2rem;
  }
  .delivery__image-2 {
    width: 5rem;
    margin-left: -3rem;
  }
  .delivery__image-3 {
    display: none;
  }
  .delivery__content h5 {
    font-size: 1.4rem;
  }
  .delivery__content h2 {
    font-size: 5.5rem;
    letter-spacing: -0.4rem;
  }
  .delivery__content p {
    width: 100%;
  }
  /* delivery */

  /* menu */
  div:has(img[alt="blurred"]) {
    width: 5rem;
  }
  .menu__items {
    row-gap: 2rem;
  }
  /* .menu__head h5 {
    font-size: 1.5rem;
  }*/
  .menu__head h2 {
    width: 100%;
    letter-spacing: -0.4rem;
  }
  .menu__item {
    width: 100%;
  }
  /* menu */
  /* app */
  .app__buttons {
    flex-direction: column;
    justify-content: center;
  }
  /* app */

  /* test */
  .test__reviews {
    gap: 3rem;
  }
  .test__review {
    flex-wrap: wrap;
  }
  .test__review-content {
    width: 100%;
  }
  .test__review-content p {
    width: 100%;
  }
  /* test */

  /* discounts */
  .discounts__box {
    padding: 3.1rem 1rem;
  }
  .discounts__box p {
    width: 100%;
    font-size: 1.5rem;
  }
  .discounts__input {
    width: 100%;
    padding: 1rem 3rem;
  }
  /* discounts */
  /* footer */
  .footer__contact {
    width: 100%;
  }
  /* footer */
}