itemsPage.css

*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}



/*navbar*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Ubuntu:wght@300;400;500;700&display=swap');
*{
   margin: 0;
   padding: 0;
   outline: 0;
   appearance: none;
   border: 0;
   text-decoration: none;
   list-style-type: none;
   box-sizing: border-box;
}
html{
   font-size: 14px;
}
body{
   background-color: #181d35;
   /* background-image: linear-gradient(to right, #181d35 ,#a5d3f61f ); */
   width: 100vw;
   height: 100vh;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 0.88rem;
}
.container{
   width: 80%;
   margin: 0 auto;
}
.header{
   margin-top: 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20%;
}
.navbaroptions ul{
   display: flex;
}
.navbaroptions ul li{
   padding: 0rem 2rem;
   font-size: 1.3rem;
   color: #E6DDC4;
}
.navbaroptions ul li a{
   padding: 0rem 2rem;
   font-size: 1.3rem;
   color: #E6DDC4;
}

.searchtab{
   display: flex;
   justify-content: space-between;
   margin: 4rem auto 3rem auto;
   /* width: 90%; */
   width: 100%;
   height: 2.8rem;
   /* border: 1px rgb(62, 62, 151) solid; */
   /* opacity: 0.2; */
   border-radius: 0.7rem;
   /* background-color: #678983; */
   background-image: linear-gradient(to left,#678983, #181d35  );
   /* align-items: center; */

}
.material-icons-outlined{
   color: #E6DDC4;
}

.itemlist{
   margin-left: 2rem;
   /* align-items: center; */

}
.itemlist ul{
   display: flex;
   justify-content: space-between;
   gap: 2rem;
   /* margin-top: rem; */
   align-items: center;
   /* width: 50%; */
}

.itemlist ul li{
   cursor: pointer;
   color: #E6DDC4;
   display: flex;
   /* justify-content: space-between; */
   /* gap: 1rem; */
   align-items: center;
   /* margin-top: rem; */
   padding-top: 0.6rem;
}
.itemlist ul li a{
    color: #E6DDC4;
}
.searchbar{
   /* background: #D6DCF5; */
   border-radius: 0.7rem;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   margin-right: 0.5rem;
   /* width: 200%; */
   display: flex;
   align-items: center;
   /* border: 1px solid rgb(62, 62, 151); */
   background-color:#cad1d0;
   width: 20rem;
}
.searchbar input[type="text"]{
   background: transparent;
   color: white;
   padding-left: 1rem;
   
   caret-color: white;
}
.material-symbols-outlined{
    padding-left: 5rem;
    color: #181D35;
  }
body{
  background-color: #181D35;
  display: inline-block;
}


/* <!-- =============================== * product* ============================================ --> */


.First_row{
    display: flex;
    justify-content: space-evenly;
    width: 1200px;
    margin: auto;
    margin-top: 35px;
}
.box img{
    width: 136px;
    height: 40%;
    display: flex;
    align-self: baseline;
    border-radius: 20px;
    margin-left: 32%;
}

#cycle img{
    width: 250px;
    height: 40%;
    margin-left: 15%;
}

#laptop img{
    width: 220px;
    height: 40%;
    margin-left: 22%;
}

.data{
    /* border: 2px solid ; */
    /* border-color: rgb(88 199 250 / 100%); */
    width: 80%;
    height: 30%;
    /* background-image: linear-gradient( #181D35 , rgba(49, 97, 119, 0.468), rgb(46, 103, 130) ); */
    background-color: #50837a;
    color: white;
    border-radius: 20px;
}

@property --rotate {
    syntax: "<angle>";
    initial-value: 132deg;
    inherits: false;
  }
  
  :root {
    --card-height: 65vh;
    --card-width: calc(var(--card-height) / 1.5);
  }
  
  
  body {
    min-height: 100vh;
    background-color: #181d35 ;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 2rem;
    padding-bottom: 2rem;
    box-sizing: border-box;
  }
  
  
  .box {
    background: #191919;
    width: var(--card-height);
    height: var(--card-height);
    position: relative;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    margin-left: 0.3rem;
    margin-right: 0.3rem;
    font-size: 1.5em;
    color: rgb(88 199 250 / 0%);
    cursor: pointer;
    font-family: cursive;
    transition: all 0.3s ease 0s;
  }
  
  .box:hover {
    color: rgb(88 199 250 / 100%);
    transition: color 1s;
  }
  
  
  
  .box:hover:before {
    content: "";
    width: 101%;
    height: 101%;
    border-radius: 20px;
    background-image: linear-gradient(
      var(--rotate)
      , #5ddcff, #3c67e3 43%, #4e00c2);
      position: absolute;
      z-index: -1;
      /* top: -1%;
      left: -2%; */
  }
  
  .box:hover:after {
    position: absolute;
    content: "";
    top: calc(var(--card-height) / 5);
    left: 0;
    right: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    margin-top: 0 ;
    margin-left: 0.2rem;
    transform: scale(0.8);
    filter: blur(calc(var(--card-height) / 5));
    background-image: linear-gradient(
      var(--rotate)
      , #5ddcff, #3c67e3 43%, #4e00c2);
      opacity: 1;
    transition: opacity .5s;
    animation: spin 2.5s linear infinite;
  }
  
  @keyframes spin {
    0% {
      --rotate: 0deg;
    }
    100% {
      --rotate: 360deg;
    }
  }
  
  a {
    color: #212534;
    text-decoration: none;
    font-family: sans-serif;
    font-weight: bold;
    margin-top: 2rem;
  }
.addres_data {
    display: flex;
    align-items: flex-end;
    margin-top: 0.8rem;
    justify-content: space-around;
}
.addres_data p{
    font-size: 11px;
    margin-right: 10px;
}
.rate{
    margin-top: 1rem;
}

/* <!-- =============================== * downlode * ============================================ --> */



.downlode_app{
    background-color: #f7f8f9;
}
.downlode{
    margin: 100px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.imges{
    width: 400px;
}
.text{
    border-right: 2px solid #cacdce;
}
.text h1{
    padding: 20px 20px 10px 20px ;
    font-size: 35px;
}
.text p{
    padding: 10px 20px 20px 20px;
    font-size: 20px;
}
.downlode_store p{
    padding: 20px 20px 20px 0;
    font-weight: bold;
    font-size: 17px;
}
.downlode_store{
    padding-left: 30px;
}
.downlode_store img{
  width: 140px;
  padding-left: 20px;
  cursor: pointer;
}





/* <!-- =============================== * footer * ============================================ --> */


.Main_footerP{
    background-color: #ebeeef;
}
.footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1200px;
    margin: auto;
}
.footer_box h2{
    font-size: 17px;
    margin: 10px 0 15px 0;
    cursor: pointer;
}
.footer_box p{
    margin: 8px 0 8px 0;
    cursor: pointer;
}
.Main_footer p{
    color: white;
}
.Main_footer h2{
    color: white;
}