body {
  zoom: 80%;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #fff;
}

.fooTer {
  z-index: 1;
  margin-left: 0;
  margin-top: -11px;
  width: 100%;
  background-color: #000001;
  padding: 70px 0;
}

.footer-col ul li a {
  margin-left: -79px;
}

.pic {
  position: relative;
  top: 75px;
  height: 1000px;
  width: 100%;
  z-index: -2;
}

.theme {
  position: absolute;
  text-align: center;
}

.bestwebsite {
  position: absolute;
  text-align: center;
}

.navbar {
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px;
}

.navbar {
  position: fixed;
  background-color: white;
  z-index: 1002;
  height: 82px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-link {
  text-decoration: none;
  color: rgb(42, 32, 32);
}

.navbar-link {
  text-decoration: none;
  color: rgb(42, 32, 32);
}

.logo {
  height: 70px;
  width: 200px;
  position: absolute;
  top: 4px;
  left: 45%;
}

.nav-icons {
  position: absolute;
  display: flex;
  top: 27px;
  gap: 19%;
  font-family: sans-serif;
  right: 172px;
  font-size: 18px;
}

.nav-icons i {
  font-size: 19px;
  color: #262a32;
}

.category-link:hover {
  border-bottom: 2px solid #000;
}

.nav-links {
  position: absolute;
  display: flex;
  top: 33px;
  gap: 14%;
  font-family: sans-serif;
  left: 43px;
  font-size: 18px;
}

.fa-magnifying-glass {
  cursor: pointer;
}

.screen img,
.pcscreen img {
  position: relative;
  z-index: -1;
}

.phone {
  position: relative;
  top: 70px;
  max-width: 100%;
  height: 490px;
  background-image: url('images/phone-image.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 56%;
}

.screen {
  margin-left: 29.6%;
  z-index: -1;
  overflow: hidden;
}

.screen img {
  margin-top: 15%;
  max-width: 60%;
}

.pc {
  position: relative;
  top: -400px;
  max-width: 100%;
  height: 665px;
  background-image: url('images/pc-image.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 30%;
}

.pcscreen {
  margin-left: 13%;
  overflow: hidden;
}

.pcscreen img {
  margin-top: 4%;
  max-width: 86%;
}

.responsiveweb {
  position: relative;
  background-color: rgb(242, 232, 233);
  z-index: -11;
  display: grid;
  margin-top: 7%;
  grid-template-columns: auto auto;
  gap: 0;
  height: 550px;
}

.res {
  font-size: 19px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  padding-left: 3%;
}

.design {
  padding-left: 3%;
  font-size: 33px;
  font-weight: bold;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.MobileOptimized {
  font-size: 33px;
  padding-left: 3%;
  padding-top: 33px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.main-title {
  position: absolute;
  font-size: 42px;
  color: black;
  top: 155px;
  left: 0;
  right: 0;
  text-align: center;
}

.secondary-title {
  position: absolute;
  font-size: 77px;
  color: black;
  left: 0;
  right: 0;
  text-align: center;
  top: 194px;
}

a {
  color: #d1c0c0;
  text-decoration: none;
}

.back-to-top {
  background-color: black;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 19px;
  padding-bottom: 19px;
  margin-top: 99px;
  margin-bottom: -18px;
  color: white;
}

.login {
  border: 2px solid white;
}

.recherche {
  visibility: hidden;
}

.section-title {
  text-align: center;
  margin-top: 122px;
  font-size: 44px;
}

.category-container {
  margin-left: 15%;
  margin-right: 15%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 23px;
}

.category-button {
  color: black;
  margin-right: 4px;
  margin-top: 19px;
  font-size: 21px;
  border: none;
  background-color: transparent;
  text-decoration: none;
}

h1 {
  text-align: center;
  margin-top: 93px;
  font-size: 38px;
}

.featured {
  margin-top: 97px;
  display: grid;
  grid-template-columns: auto auto auto;
  text-align: center;
}

.featuredelements {
  font-size: 30px;
}

.loader, .resp, .filter {
  height: 173px;
  width: 173px;
}

.pages {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.page1, .page2, .page3, .page4, .page5 {
  opacity: 0;
}

@keyframes slideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.page1 {
  animation: slideIn 1s ease 1s forwards;
  position: absolute;
  height: 41%;
  width: 26%;
  left: 60%;
  top: 67.5%;
}

.page2 {
  animation: slideIn 1s ease 1.2s forwards;
  position: absolute;
  top: 86%;
  height: 22%;
  width: 21%;
  left: 4%;
}

.page3 {
  animation: slideIn 1s ease 1.4s forwards;
  position: absolute;
  height: 50%;
  width: 29%;
  left: 20%;
  top: 58.5%;
}

.page4 {
  animation: slideIn 1s ease 1.6s forwards;
  position: absolute;
  height: 29%;
  width: 19%;
  left: 80%;
  top: 79.5%;
  z-index: -1;
}

.page5 {
  animation: slideIn 1s ease 1.8s forwards;
  position: absolute;
  height: 17%;
  width: 17%;
  left: 47%;
  top: 91.5%;
}

#products {
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 1px;
  row-gap: 9px;
  margin-top: 5%;
  margin-left: 5%;
}

.cardd {
  background-color: white;
  max-width: 27em;
  border: 1.5px solid black;
  margin-top: 1em;
  padding: 1em;
  border-radius: 5px;
  box-shadow: 1em 2em 2.5em rgb(133, 131, 131);
}

.image-container {
  text-align: center;
}

.search-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 6px;
}

.about-container {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 6px;
}

.login-container {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 6px;
}

.immg {
  object-fit: contain;
  height: 17em;
  max-width: 100%;
}

.container {
  padding-top: 1em;
  color: rgb(31, 30, 29);
}

.container h4 {
  font-weight: 600;
  font-size: 22px;
}

.container h5 {
  font-weight: 900;
  font-size: 20px;
}

.hide {
  display: none;
  visibility: hidden;
}

.thepages {
  position: absolute;
  display: none;
  flex-direction: column;
  row-gap: 28px;
  font-weight: bold;
  padding: 50px 155px;
  background-color: rgb(220, 220, 211);
  top: 11%;
  right: 14%;
  z-index: 2000;
  position: fixed;
}

.page {
  color: black;
  font-size: 22px;
}

.search {
  background-color: white;
  display: none;
  height: 80px;
  top: 0;
  z-index: 10000;
  margin-left: 0;
  position: fixed;
}

.type-search {
  background-color: transparent;
  color: rgb(80, 80, 72);
  font-size: 22px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  margin-left: 105px;
  margin-top: 11px;
  width: 523px;
  border: none;
  outline: none;
}

.delete {
  margin-top: 27px;
  margin-left: 44px;
  cursor: pointer;
  font-size: 25px;
  color: rgb(0, 0, 0);
}

.triangle-background {
  height: 205px;
  width: 205px;
  position: absolute;
  top: 280%;
  left: 61%;
  z-index: -1000;
}

.star2-background {
  height: 205px;
  width: 205px;
  position: absolute;
  top: 3300px;
  left: 481px;
  z-index: -1000;
}

.star-background {
  height: 205px;
  width: 205px;
  position: absolute;
  top: 2200px;
  left: 0%;
  z-index: -1000;
}

.circle-background {
  height: 155px;
  width: 155px;
  position: absolute;
  top: 1000px;
  left: 811px;
  z-index: -1000;
}

.modal {
  display: none;
  position: fixed;
  display: grid;
  grid-template-columns: auto auto;
  top: 79px;
  width: 100%;
  background-color: rgb(231, 222, 222);
  height: 853px;
  border: 1px solid #ccc;
  z-index: 1000;
  gap: 39%;
  cursor: pointer;
}

.modal h2 {
  margin-left: 55%;
  font-size: 37px;
  margin-top: -652px;
  font-family: sans-serif;
}

.modal p {
  margin-left: 56%;
  font-size: 188%;
  margin-top: 1%;
}

.modal button {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  color: white;
  background-color: orangered;
  padding: 20px;
  font-size: 22px;
  border: none;
}

.button1 {
  position: absolute;
  left: 79%;
  top: 715px;
}

.button2 {
  position: absolute;
  left: 91%;
  top: 715px;
}

.modal img {
  margin-top: 22px;
  max-width: 50%;
  height: 690px;
  margin-left: 2%;
}

.close {
  padding: 0;
  color: orangered;
  font-size: 53px;
  top: 90%;
}

.shopping-cart {
  position: fixed;
  top: 0px;
  left: 100%;
  width: 400px;
  z-index: 10000;
  background-color: rgb(167, 150, 150);
  height: 100%;
  transition: 0.5s;
}

.shopping-cart h1 {
  color: blanchedalmond;
  margin-top: 72px;
  font-weight: 100;
  padding: 0 20px;
  height: 80px;
  display: flex;
  align-items: center;
}

.shopping-cart .checkout {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.shopping-cart .checkout div {
  background-color: #E8BC0E;
  width: 100%;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
}

.shopping-cart .checkout div:nth-child(2) {
  background-color: #1C1F25;
  color: #fff;
}

.active .shopping-cart {
  left: calc(100% - 400px);
}

.groupcart {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-row-gap: 17px;
  column-gap: 14px;
  margin-left: -50px;
}

.imagecart {
  width: 72px;
  height: 72px;
  border-radius: 45px;
  border: 1px solid red;
}

.titlecart {
  font-size: 15px;
}

.prixcart {
  font-weight: bold;
}

.zaid {
  background-color: #fff5;
  border: none;
  width: 22px;
  height: 22px;
}

.nakis {
  width: auto;
  background-color: #fff5;
  border: none;
  width: 22px;
  height: 22px;
}

.gridbutton {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 11px;
  align-items: center;
  justify-content: center;
}

.vidde {
  font-size: 19px;
  text-align: center;
}

.buy-now {
  font-size: 19px;
  position: absolute;
  text-decoration: none;
  color: blue;
  bottom: 80px;
  text-align: center;
  width: 100%;
}

.menu-links {
  visibility: hidden;
  display: none;
}

.fa-bars-staggered {
  visibility: hidden;
}

.none {
  display: none;
}

.count{
  color: white;
  background-color: red;
  border-radius: 22px;
  height: 22px;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-summary{
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
}

.cart-container{
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media only screen and (min-width: 760px) and (max-width: 1100px) {
  .modal {
    display: none;
    position: fixed;
    display: grid;
    grid-template-columns: auto auto;
    top: 0;
    width: 100%;
    background-color: rgb(231, 222, 222);
    height: 100%;
    border: 1px solid #ccc;
    z-index: 1000;
    gap: 39%;
    cursor: pointer;
  }
  .modal h2 {
    margin-left: 55.5%;
    font-size: 31px;
    margin-top: -600px;
    font-family:  sans-serif;
  }
  .modal p {
    margin-left: 56%;
    font-size: 170%;
    margin-top: 2%;
  }
  .modal button {
    display: flex; 
    flex-direction: row; 
    align-items: flex-start; 
    color: white;
    background-color: orangered;
    padding: 15px;
    font-size: 19px;
    border: none;
  }
  .button1{
    position: absolute;
    left: 700px;
    top: 795px;
  }
  .button2{
    position: absolute;
    left: 850px;
    top: 795px; 
  }
  .modal img {
    margin-top: 92px;
    max-width: 50%;
    height: 690px;
    margin-left: 2%;
  }
}

@media screen and (max-width: 760px) {
  .modal {
    display: none;
    position: fixed;
    display: grid;
    grid-template-columns: auto auto;
    top: 0;
    width: 100%;
    background-color: rgb(231, 222, 222);
    height: 100%;
    border: 1px solid #ccc;
    z-index: 1000;
    gap: 39%;
    cursor: pointer;
  }
  .modal h2 {
    margin-left: 1%;
    font-size: 27px;
    margin-top: 13px;
    font-family:  sans-serif;
  }
  .modal p {
    display: none;
  }
  .modal button {
    display: flex; 
    flex-direction: row;
    align-items: flex-start;
    color: white;
    background-color: orangered;
    padding: 20px;
    font-size: 21px;
    border: none;
  }
  .button1{
    position: absolute;
    left: 300px;
    top: 740px;
  }
  .button2{
    position: absolute;
    left: 150px;
    top: 740px;
  }
  .modal img {
    margin-top: 52px;
    max-width: 85%;
    height: 550px;
    margin-left: 2%;
  }
}
@media screen and (max-width: 900px) {
  .thepages {
    padding: 30px;
    right: 338px;
    display: block;
    visibility: visible;
  }

  .search {
    background-color: white;
    display: none;
    height: 80px;
    top: 0;
    z-index: 10000;
    margin-left: 0;
    position: fixed;
  }
  
  .type-search {
    background-color: transparent;
    color: rgb(80, 80, 72);
    font-size: 15px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    margin-left: 8px;
    margin-top: 11px;
    width: 309px;
    border: none;
    outline: none;
  }
  
  .delete {
    margin-top: 27px;
    margin-left: 14px;
    cursor: pointer;
    font-size: 25px;
    color: rgb(0, 0, 0);
  }
  
  #products {
    grid-template-columns: auto auto;
    grid-column-gap: 1em;
    margin-left: 43px;
  }
  
  .triangle-background {
    height: 205px;
    width: 205px;
    position: absolute;
    top: 1880px;
    left: 36%;
    z-index: -1000;
  }
  
  .star2-background {
    height: 205px;
    width: 205px;
    position: absolute;
    top: 2900px;
    left: 55%;
    z-index: -1000;
  }
  
  .star-background {
    height: 205px;
    width: 205px;
    position: absolute;
    top: 3400px;
    left: 44%;
    z-index: -1000;
  }
  
  .circle-background {
    height: 155px;
    width: 155px;
    position: absolute;
    top: 1000px;
    left: 3%;
    z-index: -1000;
  }
  
  .nav-links {
    display: none;
    visibility: hidden;
  }
  
  .about-container {
    display: none;
  }
  
  .login-container {
    display: none;
  }
  
  .navbar-link {
    display: none;
  }
  
  .cart-summary {
    visibility: visible;
    font-size: 22px;
    display: flex;
    color: black;
    position: absolute;
    align-items: center;
    justify-content: center;
    top: 3px;
    right: -112px;
    z-index: 100000;
  }
  
  .fa-bars-staggered {
    position: absolute;
    top: 33px;
    right: 12px;
    visibility: visible;
    color: black;
    font-size: 25px;
  }
  
  .logo {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 62px;
    width: 113px;
  }
  
  .search-container i {
    visibility: visible;
    font-size: 22px;
    position: absolute;
    top: 8px;
    right: -42px;
    z-index: 100000;
  }
  
  .menu-links {
    position: absolute;
    visibility: visible;
    display: flex;
    flex-direction: column;
    row-gap: 28px;
    font-weight: bold;
    padding-left: 155px;
    padding-right: 155px;
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: rgb(220, 220, 211);
    top: 72px;
    right: 5%;
    font-size: 22px;
    z-index: 1000;
  }
  
  .menu-link {
    color: black;
    font-size: 22px;
  }  
}

@media screen and (max-width: 480px) {
  .nav-links {
    display: none;
    visibility: hidden;
  }
  
  .main-title {
    font-size: 38px;
  }
  
  .secondary-title {
    font-size: 75px;
  }
  
  .responsivee {
    display: none;
  }
  
  .featured {
    margin-top: 97px;
    display: grid;
    grid-template-columns: auto;
    text-align: center;
  }
  
  #products {
    grid-template-columns: auto;
    margin-left: 5px;
  }
  
  .icon {
    display: none;
  }
  
  .thepages {
    padding: 30px;
    right: 298px;
    display: block;
    visibility: visible;
  }
  
  .star-background {
    height: 205px;
    width: 205px;
    position: absolute;
    top: 2300px;
    left: 53%;
    z-index: -1000;
  }
  
  .star2-background {
    height: 205px;
    width: 205px;
    position: absolute;
    top: 770px;
    left: 53%;
    z-index: -1000;
  }
  
  .circle-background {
    height: 205px;
    width: 205px;
    position: absolute;
    top: 3170px;
    left: 40%;
    z-index: -1000;
  }
  
  .back-to-top {
    width: 100%;
    height: 66px;
    margin-bottom: 0;
  }
  
  .none {
    display: block;
    position: absolute;
    top: 1%;
    left: 75%;
  }
  
  .list {
    grid-template-columns: auto;
    grid-row-gap: 1.5em;
    margin-left: 1%;
    margin-top: 260%;
  }
  
  .shopping-cart {
    height: 100%;
  }
  
}