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

  border: none;
  outline: none;

  font-family: sans-serif;
}

html {
  font-size: 14px;
}

:root {
  --darkest-grey: #0f1111;
  --dark-grey: #131921;
  --mid-light-grey: #232f3e;
  --light-grey: #37475a;
  --lightest-grey: #e3e6e6;

  --hover-light-grey: #ccc;

  --dark-yellow: #febd69;

  --white: #fff;
  --black: #000;
  --blue: #2162a1;
}

body {
  color: var(--white);
}

@font-face {
  font-family: "Amazon Ember Bold";
  font-style: normal;
  font-weight: normal;
  src:
    local("Amazon Ember Bold"),
    url("./amazon-ember-webfont/Amazon\ Ember\ Bold.woff") format("woff");
}

/* ! ******************* Nav Started ******************* */

/* ? Nav Main */
nav {
  /*border: 1px solid red;*/

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 48px);
}

/* ? Nav Logo */
.nav-logo {
  /*border: 1px solid red;*/
  background-color: var(--mid-light-grey);

  width: 100%;
  height: 100%;

  display: flex;
  align-items: start;
  justify-content: start;

  padding-left: 10px;
  padding-top: 10px;
  gap: 5px;
}

.nav-logo i {
  /*border: 1px solid red;*/

  font-size: 1.3rem;
  cursor: pointer;
}

.logo-div {
  /*border: 1px solid red;*/

  width: 80px;

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.logo-div img {
  /*border: 1px solid red;*/

  width: 100%;
}

/* ? Nav Multiple */
.nav-multiple {
  /*border: 1px solid red;*/
  background-color: var(--mid-light-grey);

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: end;
}

.sign-in {
  /*border: 1px solid red;*/

  display: flex;
  align-items: center;
  justify-content: start;
  cursor: pointer;
}

.sign-in > p {
  /*border: 1px solid red;*/

  font-size: 0.9rem;
}

.sign-in > i {
  /*border: 1px solid red;*/

  font-size: 0.7rem;
}

.sign-in-icon {
  /*border: 1px solid red;*/

  font-size: 2rem;
  margin-inline: 4px 12px;
  cursor: pointer;
}

.cart-icon {
  /*border: 1px solid red;*/

  font-size: 2rem;
  margin-right: 18px;
  cursor: pointer;
}

.lang-div {
  display: none;
}

.account-div {
  display: none;
}

.orders-div {
  display: none;
}

.cart-div {
  display: none;
}

/* ? Nav Search */

.nav-search {
  /*border: 1px solid red;*/
  background-color: var(--mid-light-grey);

  width: 100%;
  height: 100%;

  grid-column: 1/3;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
}

.nav-search select {
  display: none;
}

.search-bar {
  /*border: 1px solid red;*/

  width: calc(100% - 20px);
  height: 44px;

  border-radius: 8px 12px 12px 8px;
  padding: 0 95px 0 10px;
  font-size: 1rem;
}

.nav-search i {
  /*border: 1px solid red;*/
  background-color: var(--dark-yellow);
  color: var(--black);

  width: 50px;
  height: 44px;

  position: absolute;
  right: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;
  font-size: 1.3rem;
  cursor: pointer;
}

/* ? Nav Belt */
.nav-belt {
  /*border: 1px solid red;*/
  background-color: var(--mid-light-grey);

  width: 100%;
  height: 100%;

  grid-column: 1/3;

  display: flex;
  align-items: center;
  gap: 15px;

  scrollbar-width: none;

  overflow-x: auto;
  overflow-y: hidden;

  padding-left: 10px;
}

.nav-belt--items {
  /*border: 1px solid red;*/

  flex-shrink: 0;
  font-size: 1rem;

  padding: 2px;
  cursor: pointer;
}

.nav-belt--items:hover {
  color: var(--hover-light-grey);
}

.nav-belt--items:nth-child(1) > i {
  display: none;
}

/* ? Nav Delivery */
.nav-delivery--mb {
  /*border: 1px solid red;*/
  background-color: var(--light-grey);

  width: 100%;
  height: 100%;

  grid-column: 1/3;

  display: flex;
  align-items: center;

  padding: 5px 5px 5px 10px;
}

.nav-delivery--mb div {
  /*border: 1px solid red;*/

  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-delivery--mb div i {
  /*border: 1px solid red;*/
  font-size: 1.3rem;
}

.nav-delivery--mb div > span {
  /*border: 1px solid red;*/
  font-size: 1rem;
}

/* ! ******************* Nav Ended ******************* */

/* ! ******************* Header Started ******************* */

/* ? Mobile Header */
.header-mb {
  /*border: 1px solid red;*/

  height: 530px;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-around;

  overflow-x: auto;

  gap: 20px;
  padding: 10px 20px;
  scrollbar-width: none;
}

.img-1 {
  background: url("https://m.media-amazon.com/images/I/61Ld77LHXQL._SX855_.jpg");
}
.img-2 {
  background: url("https://m.media-amazon.com/images/I/51l7ZOsRo7L._SX855_.jpg");
}
.img-3 {
  background: url("https://m.media-amazon.com/images/I/61R7G24e7dL._SX855_.jpg");
}
.img-4 {
  background: url("https://m.media-amazon.com/images/I/613fnGHLTYL._SX855_.jpg");
}
.img-5 {
  background: url("https://m.media-amazon.com/images/I/61upHi2gzaL._SX855_.jpg");
}
.img-6 {
  background: url("https://m.media-amazon.com/images/I/71RXuGx+znL._SX855_.jpg");
}
.img-7 {
  background: url("https://m.media-amazon.com/images/I/714RPvHc4LL._SX855_.jpg");
}

.img-1,
.img-2,
.img-3,
.img-4,
.img-5,
.img-6,
.img-7 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-mb .img-div {
  /*border: 1px solid red;*/
  color: var(--darkest-grey);

  height: 100%;
  width: 330px;

  flex-shrink: 0;
  border-radius: 10px;
  padding: 20px 10px;

  font-size: 3rem;
  font-weight: normal;
  font-family: "Amazon Ember Bold";
  letter-spacing: -2px;
  line-height: 40px;
}

/* ? Desktop Header */

.header-img-div {
  display: none;
}

/* ! ******************* Header Ended ******************* */

/* ! ******************* Square Cards Started ******************* */

.card-products--main {
  /* border: 1px solid red; */
  color: var(--darkest-grey);

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 30px;
  padding-block: 30px;
}

.card-product--card {
  /* border: 1px solid red; */

  width: 100%;

  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
}

.card-product--card h3 {
  font-size: 1.7rem;
  font-family: "Amazon Ember Bold";
  padding-left: 20px;
}

.card-product--card > a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  padding-left: 20px;
}

.card-product--card > a:hover {
  text-decoration: underline;
}

.pics-main {
  /* border: 1px solid red; */

  width: 100%;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.pic {
  /* border: 1px solid red; */

  width: 100%;
  height: 100%;

  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;

  padding: 10px 20px;
}

.pic p {
  font-size: 1rem;
}

.pic-img-main {
  /* border: 1px solid red; */

  width: 100%;
  height: 90%;
}

.pic-img-main img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* ! ******************* Square Cards Ended ******************* */

/* ! ******************* Row product carousel Started ******************* */

.row-product--carousel {
  /* border: 1px solid red; */

  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;

  margin-top: 30px;
}

.row-product--carousel h3 {
  /* border: 1px solid red; */
  color: var(--darkest-grey);

  padding: 5px 20px;
  font-size: 1.4rem;
}

.products-main--div {
  /* border: 1px solid red; */

  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
}

.product-div {
  /* border: 1px solid red; */

  display: grid;
  grid-template-columns: 20% 1fr;
  grid-template-rows: 120px;

  padding: 5px 20px;
}

.product-div p {
  /* border: 1px solid red; */
  color: var(--darkest-grey);

  width: 100%;

  padding-left: 20px;
}

.single-img--div {
  /* border: 1px solid red; */

  width: 100%;
  height: 100%;
}

.single-img--div img {
  /* border: 1px solid #000; */
  width: 100%;
  height: 100%;

  object-fit: contain;
}

/* ! ******************* Row product carousel Ended ******************* */

/* ! ******************* foooter started ******************* */

footer {
  /* border: 1px solid red; */

  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  margin-top: 30px;
}

.top-mb {
  /* border: 1px solid red; */
  background-color: var(--light-grey);
  color: var(--lightest-grey);

  width: 100%;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 5px;

  font-size: 0.75rem;

  cursor: pointer;
}

.top-dsk {
  display: none;
}

.above-texts--div {
  /* border: 1px solid red; */
  background-color: var(--mid-light-grey);
  color: var(--white);

  width: 100%;

  display: flex;
  align-items: start;
  justify-content: center;
  gap: 40px;

  padding: 20px 10px;
}

.above-text--div {
  display: none;
}

.above-text--div---mb {
  /* border: 1px solid red; */

  width: 50%;

  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;

  gap: 15px;
}

.above-text--div---mb p {
  /* border: 1px solid red; */

  font-size: 1rem;
}

.multiple-details--div {
  /* border: 1px solid red; */
  background-color: var(--dark-grey);

  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 20px 6px;
}

.footer-logo--div {
  display: none;
}

.footer-lang--div {
  /* border: 1px solid red; */
  border: 1px solid var(--hover-light-grey);

  width: 100px;

  display: flex;
  align-items: center;
  justify-content: start;

  padding: 8px;
  border-radius: 3px;

  position: relative;
}

.footer-lang--div > i {
  /* border: 1px solid red; */

  font-size: 0.8rem;

  margin-right: 8px;
}

.footer-lang--div span {
  /* border: 1px solid red; */

  font-size: 0.85rem;
}

.up-down-arrow {
  /* border: 1px solid red; */

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  font-size: 0.6rem;

  position: absolute;
  right: 6px;
}

.currency-div {
  /* border: 1px solid red; */
  border: 1px solid var(--hover-light-grey);

  width: 135px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 8px;
  border-radius: 3px;
  font-size: 0.85rem;
}

.country-div {
  /* border: 1px solid red; */
  border: 1px solid var(--hover-light-grey);

  width: 125px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;
  padding: 8px;
  border-radius: 3px;
  font-size: 0.85rem;
}

.country-img--div {
  /* border: 1px solid red; */

  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 10px;
}

.country-img--div img {
  /* border: 1px solid red; */

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.below-div {
  /* border: 1px solid red; */
  background-color: var(--dark-grey);

  width: 100%;
  height: 110px;

  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;
}

.below-texts--div {
  display: none;
}

.sign-in--div {
  /* border: 1px solid red; */

  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 15px 0;
  font-weight: 600;
}

.footer-options {
  /* border: 1px solid yellow; */

  width: 90%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  font-size: 0.75rem;

  text-align: center;
  padding-bottom: 6px;
}

.footer-last {
  /* border: 1px solid yellow; */

  font-size: 0.75rem;
}
/* ! ******************* foooter Ended ******************* */

/* ! ******************* Media Queries ******************* */

@media (width >= 640px) {
  /* body {
    background-color: red;
  } */

  .footer-options {
    width: 550px;
  }
}

@media (width >= 768px) {
  body {
    background-color: var(--lightest-grey);
  }

  .border {
    border: 2px solid var(--dark-grey);
    border-radius: 4px;
  }

  .border:hover {
    border: 2px solid var(--white);
  }

  /* ? Nav Main */
  nav {
    grid-template-columns: 90px 100px auto 360px;
    grid-template-rows: 60px 39px;
  }

  /* ? Nav Logo */

  .nav-logo {
    background-color: var(--dark-grey);

    align-items: center;
    justify-content: center;

    padding: 4px 0px 4px 6px;
    gap: 0px;
  }

  .nav-logo i {
    display: none;
  }

  .logo-div {
    height: 100%;
    padding: 4px 2px 0 2px;
  }

  /* ? Nav Delivery */
  .nav-delivery--mb {
    background-color: var(--dark-grey);

    grid-row: 1/2;
    grid-column: 2/3;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 4px 0;
    cursor: pointer;
  }

  .nav-delivery--mb div {
    height: 100%;

    display: grid;
    grid-template-columns: 22px 65px;
    grid-template-rows: 25px 15px;
  }

  .nav-delivery--mb div > i {
    grid-row: 1/3;

    align-self: flex-end;
    justify-self: flex-end;

    font-size: 1.2rem;
    padding-bottom: 5px;
  }

  .nav-delivery--mb div > span:nth-child(2) {
    color: var(--hover-light-grey);

    grid-column: 2/3;

    align-self: flex-end;
    justify-self: start;

    font-size: 0.8rem;
  }

  .nav-delivery--mb div > span:nth-child(3) {
    grid-column: 2/3;

    align-self: flex-end;
    justify-self: start;

    font-weight: 600;
  }

  /* ? Nav Search */

  .nav-search {
    background-color: var(--dark-grey);

    grid-row: 1/2;
    grid-column: 3/4;

    position: static;
  }

  .nav-search select {
    /*border: 1px solid red;*/

    height: 44px;
    width: 45px;

    display: block;

    border-radius: 4px 0 0 4px;
    padding-left: 10px;
    font-size: 0.8rem;
    margin-left: 4px;
  }

  .search-bar {
    width: calc(100% - 95px);

    border-radius: 0px;
    padding: 0 10px 0 10px;
  }

  .nav-search i {
    position: static;
    border-radius: 0px 4px 4px 0px;
    margin-right: 4px;
  }

  /* ? Nav Belt */

  .nav-belt {
    grid-column: 1/5;
  }

  .nav-belt > .border {
    border: 2px solid var(--mid-light-grey);
    padding: 0px 4px;
    border-radius: 0px;
  }

  .nav-belt > .border:hover {
    border: 2px solid var(--white);
  }

  .nav-belt--items:hover {
    color: white;
  }

  .nav-belt--items:nth-child(1) > i {
    display: inline;
  }

  /* ? Nav Multiple */

  .nav-multiple {
    background-color: var(--dark-grey);

    justify-content: space-between;
    padding: 4px 0;
    cursor: pointer;
  }

  .sign-in {
    display: none;
  }

  .nav-multiple > span {
    display: none;
  }

  .lang-div {
    /*border: 1px solid red;*/

    width: 52px;
    height: 100%;

    display: flex;
    align-items: center;

    padding: 0px 4px;
  }

  .lang-div img {
    width: 20px;
  }

  .lang-div span {
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 600;
  }

  .lang-div i {
    font-size: 0.6rem;
  }

  .account-div {
    /*border: 1px solid red;*/

    width: 128px;
    height: 100%;

    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;

    padding: 0px 4px;
  }

  .account-div > span {
    color: var(--hover-light-grey);
    font-size: 0.75rem;
  }

  .account {
    font-size: 0.9rem;

    display: flex;
    align-items: center;
  }

  .account span {
    /*border: 1px solid red;*/
    font-weight: 600;
  }

  .account i {
    /*border: 1px solid red;*/
    font-size: 0.6rem;
  }

  .orders-div {
    /*border: 1px solid red;*/

    height: 100%;
    width: 68px;

    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    padding: 0 4px;
  }

  .orders-div span:nth-child(1) {
    color: var(--hover-light-grey);
    font-size: 0.75rem;
  }

  .orders-div span:nth-child(2) {
    font-size: 0.9rem;
    font-weight: 600;
  }

  .cart-div {
    /*border: 1px solid red;*/

    width: 70px;
    height: 100%;

    display: flex;
    align-items: end;
    justify-content: center;

    padding: 0 2px 10px 2px;
    margin-right: 6px;
  }

  .cart-div i {
    font-size: 1.8rem;
  }

  .cart-div span {
    font-size: 0.9rem;
    font-weight: 600;
  }

  /* ? Header Mobile */

  .header-mb {
    display: none;
  }

  /* ? Header Desktop */

  .main-header-div {
    /* border: 1px solid red; */

    width: 100%;
    height: 100%;
  }

  .header-img-div {
    /* border: 1px solid red; */

    width: 100%;
    height: 600px;

    display: block;
  }

  .header-img-div img {
    width: 100%;
    height: 100%;

    object-fit: cover;
  }

  /* ? Product cards */

  .card-products--main {
    /* border: 1px solid red; */
    background: linear-gradient(
      to bottom,
      transparent 5%,
      var(--lightest-grey) 20%
    );

    flex-direction: row;
    flex-wrap: wrap;

    z-index: 2;

    position: relative;
    margin-top: -350px;
  }

  .card-product--card {
    background-color: var(--white);

    width: 300px;
    height: 400px;

    padding: 15px 0px;
  }

  .card-product--card h3 {
    font-size: 1.2rem;
  }

  .pic p {
    font-size: 0.8rem;
  }

  /* ? Row product carousel */

  .row-product--carousel {
    /* border: 1px solid red; */
    background-color: var(--white);

    width: 90%;
    height: 250px;

    margin: 0 auto;

    padding: 10px;
  }

  .products-main--div {
    /* border: 1px solid red; */

    flex-direction: row;

    overflow-x: auto;
  }

  .product-div {
    /* border: 1px solid red; */

    grid-template-columns: 171px;
    grid-template-rows: 171px;

    align-self: center;
  }

  .product-div p {
    display: none;
  }

  /* ? Footer */

  .top-mb {
    display: none;
  }

  .top-dsk {
    /* border: 1px solid red; */
    background-color: var(--light-grey);

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 15px 0px;
    font-size: 1rem;

    cursor: pointer;
    transition: 0.2s;
  }

  .top-dsk:hover {
    background-color: #435469;
  }

  .above-texts--div {
    border-bottom: 1px solid var(--light-grey);

    padding: 50px 20px;
  }

  .above-text--div {
    /* border: 1px solid red; */

    width: 250px;

    display: block;
  }

  .above-text--div h4 {
    /* border: 1px solid red; */

    font-size: 1.1rem;
    font-weight: 600;

    padding-bottom: 10px;
  }

  .above-text--div p {
    /* border: 1px solid red; */
    text-decoration: underline var(--mid-light-grey);
    color: var(--hover-light-grey);

    width: 160px;
    padding-bottom: 5px;

    font-size: 0.9rem;
    cursor: pointer;
  }

  .above-text--div p:hover {
    text-decoration: underline var(--hover-light-grey);
  }

  .above-text--div---mb {
    display: none;
  }

  .multiple-details--div {
    background-color: var(--mid-light-grey);
  }

  .footer-logo--div {
    /* border: 1px solid red; */

    display: block;

    width: 76px;
    height: 27px;

    margin-right: 50px;
  }

  .footer-logo--div img {
    width: 100%;
    height: 100%;

    object-fit: contain;
  }

  .footer-lang--div {
    width: 150px;
  }

  .currency-div {
    width: 150px;
  }

  .country-div {
    width: 150px;
  }

  .below-div {
    background-color: var(--dark-grey);

    height: 500px;

    padding: 30px 0;
  }

  .below-texts--div {
    /* border: 1px solid red; */
    color: white;

    width: 100%;
    height: 90%;

    display: grid;
    grid-template-columns: repeat(7, 105px);
    grid-template-rows: repeat(4, 67px);
    grid-auto-flow: column;

    row-gap: 30px;
    column-gap: 3px;

    justify-content: center;
    align-items: start;

    margin-bottom: 10px;
  }

  .below-text--mini---div {
    /* border: 1px solid red; */

    width: 100%;
    height: 100%;

    cursor: pointer;
  }

  .below-text--mini---div:hover h4 {
    text-decoration: underline white;
  }

  .below-text--mini---div:hover p {
    text-decoration: underline var(--hover-light-grey);
  }

  .below-text--mini---div:nth-child(3) {
    grid-row: 3/5;
  }

  .below-text--mini---div h4 {
    /* border: 1px solid red; */

    font-size: 0.75rem;

    font-weight: 500;
  }

  .below-text--mini---div p {
    /* border: 1px solid red; */
    color: var(--hover-light-grey);

    font-size: 0.75rem;
  }

  .sign-in--div {
    display: none;
  }
}

@media (width >= 1024px) {
  .below-texts--div {
    gap: 30px;
  }
}

@media (width >= 1280px) {
  .below-texts--div {
    gap: 35px;
  }
}

@media (width >= 1536px) {
  /* body {
    background-color: purple;
  } */
}