@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
       padding: 0;
       margin: 0;
       box-sizing: border-box;
       font-size: inherit;
       font-family: 'poppins', sans-serif;
             
       
}

html
{
      font-size: 55.5%;
       background-image: linear-gradient(to right, black, rgb(3, 3, 28), rgb(3, 3, 28), black);
       overflow-x: hidden;
}

:root
{
       --text-color:#fff;
       --buttons-color:#DB4444;
       --green:#00953c;
       --text-second-color:rgb(174, 172, 172);
       --star-color:#FFAD33;
       --star-dark-color:#8D8D8D;
       --blue-color:#326994;
       --Circle-color:#817D7D;
       --blue:#5557d1;
       
   --bg-color: #09031B;
   --sec-bg-color: #344162;
    --text-color: #ffffff;
--white: #fdfdfd;
--sub-color: #e4d4f9;
              
}
.all
{
       width: 100vw;
       height: 100vh;
       

       font-family: 'Times New Roman', Times, serif;
       animation: transitionIN 1s;
     

}
.smallScreen
{
       display: none;
}
.search-icon
{
       color: var(--text-color);
}

.heart
{
       color: var(--text-color);
}
.home-nav
{
      
       display: flex;
       padding: 1rem;
       justify-content: space-around;
       font-size: 1.5rem;
       position: relative;
       top: 1.5rem;
       font-weight: 800;

}

.i
{
       margin-right: 1rem;
       text-decoration: none;
       color: var(--text-color);
       transition: all 0.5s;
       font-weight: 800;
       
}
h2 {
       color: var(--text-color);
}

.home-nav h2
{
       font-size: 2rem;
}

.i:hover
{
       border-bottom: 0.5rem solid white ;
       color: var(--buttons-color);
}
a{
       color: white;
       text-decoration: none;
}

.input input
{
       border: none;
       outline: none;
       font-size: 1.25rem;
       width: 22rem;
       height: 3rem;
       border-radius: 2rem;
       color: black;
       text-align: center;

} 
.btn-box {
       position: relative;
       display: flex;
       justify-content: space-between;
       width: 34.5rem;
       height: 5rem;

}

.btn-box .btn {
       position: relative;
       display: flex;
       justify-content: center;
       padding-top: 3%;
       width: 15rem;
       height: 100%;
       background-color: var(--sub-color);
       border: 0.2rem solid var(--sub-color);
       border-radius: 0.8rem;
       font-size: 2rem;
       font-weight: 600;
       letter-spacing: 0.1rem;
       color: var(--bg-color);
       z-index: 1;
       overflow: hidden;
}


.btn-box .btn::before {
       content: ' ';
       position: absolute;
       top: 0;
       left: 0;
       width: 0;
       height: 100%;
       background: #87a7f3;
       z-index: -1;
       transition: 0.5s;
}

.btn-box .btn:hover::before {
       width: 100%;
}

.btn-box.btns {
       display: inline-block;
       width: 15rem;


}

.btn-box.btns a ::before {
       background: var(--sec-bg-color);
}

.contact form .btn-box.btns .btn {
       cursor: pointer;
}


.bb {
       width: 100vw;
       display: flex;
       justify-content: center;

}
.category
{
       font-size: 1.25rem;
       display: flex;
       justify-content: space-around;
       align-items: center;
       margin-top: 2rem;

}


.category .text h2
{
  margin-top: 1rem;
  position: relative;
  right: 3.5rem;
  transition: all 0.1s;
  cursor: pointer;

}
.category .text h2:hover
{
       color: var(--buttons-color);
       transform: scale(0.96);
}
.slider img
{
    align-self: end;   
    margin-top: 2rem; 
    height: 25rem;
    width: 50rem;
}
.slide
{
       position: relative;
       left: 70rem;
}

.today
{
       display: flex;
       color: var(--buttons-color);
       margin-left: 13rem;
       margin-top: 2rem;
       align-items: center;
       font-size: 1.5rem;
       font-family: sans-serif;
}
.today h1
{
       background-color: var(--buttons-color);
       margin-right: 0.5rem;
       width: 1rem;
       height: 2rem;
       border-radius: 0.3rem;
}


.flash-sales
{
       margin-left: 20rem;
       display: flex;
       justify-content: center;
       margin: 1rem;
       font-size: 2rem;
       


}

.time
{
       display: grid;
       grid-template-rows: repeat(2,max-content);
       grid-template-columns: repeat(3,max-content);
       font-size: 2.25rem;
       justify-items: center;
       font-family: 'Times New Roman', Times, serif;
      

}
.time .d
{
  font-size: 1rem;
  font-family: 'Times New Roman', Times, serif;
   
}

.time h2
{
       padding-right: 1rem;

}
.time  span{
       color:var(--buttons-color);
      

}
.sec
{
      position: relative;
      right: 1rem;
}
.flashAndTime
{
       display: flex;
       position: relative;
       right: 2.25rem;

}
.flash
{
       margin-right: 2rem;
}

.arrows
{
       color: black;
      
      
}
.arrows .left
{
       background-color: var(--text-color);
       border-radius: 2rem;
       padding: 0.5rem;
       transition: transform 0.25s;
     
}
.arrows .right
{
       background-color: var(--text-color);
              border-radius: 2rem;
       padding: 0.5rem;
              transition: transform 0.25s;

}
.arrows .right:hover
{
       transform: scale(0.96);
}
.arrows .left:hover {
       transform: scale(0.96);
}

.items
{
 color: var(black);

}

.items
{
       width: 100vw;
       height: 22rem;
       margin: 0 1rem;
       display: flex;
       justify-content: space-around;
}

.allRangeBox
{
      
       padding: 2rem;
       border-radius: 0.5rem;
       box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
       display: flex;
       align-items: center;
       background-image: linear-gradient(to right, #1c6894, #5a3f9b);

}
.RangeSlider
{
       height: 3rem;
       width: 100%;
       display:flex ;
       align-items: center;
       margin-right: 1.5rem;

}
.RangeSlider input
{
       height: 1rem;
       width: 100%;
       /* -webkit-appearance: none; */
       outline: none;
       background: #f2f2f2;
       box-shadow: inset 0 0 0.4rem rgba(0, 0, 0, 0.5);
      
} 

.value
{
       font-size: 2rem;
       font-weight: 600;
       font-family: sans-serif;
       width: 5.5rem;
       text-align: center;

}
.box img
{
       background-color: var(--text-color);
       padding: 1.5rem;
       width: 15rem;
       height: 15rem;
       border-radius: 1rem;
       margin-left: 1rem;
}
.prices
{
       display: flex;
       text-align: center;
      
              
      

}

.item
{
       color: #d46b6b;
       
       font-size: 1.5rem;
       transition: transform 0.25s;
       position: relative;
       top: 1rem;

}
.item:hover
{
       transform: scale(0.96);
}
.item i {
       color: var(--star-color);

}
.discription
{
       margin-left: 1.5rem;
}
.title
{
       color: var(--text-color);
       font-family: sans-serif;
       font-size: 1.25rem;
}
.price
{
       margin-right: 1rem;
}
.discount
{
       text-decoration: line-through;
}
.i3  span i
{
    color: var(--star-dark-color);
    
}
.button
{
       width: 100vw;
        
       display: flex;
       justify-content: center;
       
}
.button button
{
       padding: 1rem;
       background-color: var(--buttons-color);
       border: none;
       outline: none;
       border-radius: 1rem;
       font-size: 2rem;
       width: 15rem;
       font-family: 'Times New Roman', Times, serif;
       transition: all 0.5s;
       cursor: pointer;

}
.button button:hover
{
       background-color: var(--blue-color);
}
.button button:active {
       transform: scale(0.96);
}


.popbtn button {
       padding: 1rem;
       background-color: var(--buttons-color);
       border: none;
       outline: none;
       border-radius: 1rem;
       font-size: 2rem;
       width: 20rem;
       font-family: 'Times New Roman', Times, serif;
       transition: all 0.5s;
       cursor: pointer;

}

.popbtn button:hover {
       background-color: var(--blue-color);
}

.popbtn button:active {
       transform: scale(0.96);
}

.boxes
{
       display: flex;
       width: 100vw;
       justify-content: space-around;
      
}

.categorybox
{
       border: 0.1rem solid var(--buttons-color);
       padding: 3rem;
       transition: all 0.25s;
}
.categorybox h3 {
       color: var(--text-color);
       text-align: center;
       font-size: 1rem;
       font-family: sans-serif;
      

}

.categorybox:hover {
      transform: scale(0.96);

}

.bigPhoto
{
       width: 100vw;
       display: flex;
       justify-content: center;
       margin: 2rem;
     
}
.bigPhoto img {
     height: 35rem;
     width: 85rem;

}
.bigFramebtn
{
    position: relative;
    bottom: 10rem;
    right: 20rem;
   

}
.bigFramebtn  button{
        background-color: var(--green);


}

.explore
{
       flex-wrap: wrap;
}
.centerGallary
{
       width: 100vw;
       display: flex;
       justify-content: center;
       margin: 2rem;
       z-index: -1;
}
.gallary
{
       width: 50vw;
       height: 30rem;
       display: grid;
       grid-template-columns: repeat(4,1fr);
       grid-template-rows: repeat(2,1fr);
       background-image: linear-gradient(to right,
              black,
              rgb(5, 5, 33),
              rgb(4, 4, 30),
              black);
       grid-gap: 1.25rem;
       z-index: -1;

}
.img1
{
       width: 100%;
       height: 100%;
       grid-column: 1/3;
       grid-row: 1/-1;

}
.img2
{
       width: 100%;
              height: 100%;
      
       grid-column: 3/5;
       grid-row: 1/2;

}
.img3
{
       width: 100%;
              height: 100%;

grid-column: 3/4;
grid-row: 2/3;
}
.img4
{
       width: 100%;
              height: 100%;
     
       grid-column: 4/5;
       grid-row: 2/3;

}
.Circles
{
       width: 100vw;
       display: flex;
       justify-content: space-around;
       margin:  5rem 0;
      


}
.cin
{
       width:3rem;
       height: 3rem;
       background-color: var(--Circle-color);
       padding: 1rem;
       border-radius: 2rem;
}
.cout
{
       display: flex;
       justify-content: center;
       align-items: center;
       width: 4rem;
       height: 4rem;
       background-color: #5b5b5b4d;
       border-radius: 2rem;
       margin-right: 1rem;
}

.footer
{
       background-color: black;
       width: 100vw;
       height: 15rem;
       
}
.links a
{
       transition: border-bottom 0.5s;
}
.links a:hover
{
       border-bottom: white;
}
.firstOne
{
       position: absolute;
       top: 80%;
       left: 50%;
       transform: translate(-50%, -50%);

}
.secondOne
{
       position: absolute;
              top: 170%;
              left: 50%;
              transform: translate(-50%, -50%);

}
.thirdOne
{
              position: absolute;
                     top: 300%;
                     left: 50%;
                     transform: translate(-50%, -50%);

}


.popBuyWindow
{
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: 1fr 1fr;
       justify-content: center;
       align-items: center;
       width: 40vw;
       height: 60rem;
       background-image: linear-gradient(to right bottom , #14192a,#222942,#1e1d43,#21084d ,#170634);
       border-radius: 1rem;
      
      

}
.imgContainer
{
       display: flex;
       justify-content: space-around;
       align-items: center;
       flex-direction: column;
       background-color: #f2f6ff;
       width: 80%;
       height: 80%;
       border-radius: 1rem;
       grid-column: 1/2;
       grid-row: 1/2;
       margin: 1rem;
}
.buttonsToBuy
{
       grid-row: 2/3;
       grid-column: 1/2;
       position: relative;
       left: 67%;
}

.stars
{
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 2rem;
       color: var(--star-color);
       grid-column: 1/2;
       grid-row: 1/2;
       align-self: end;
       position: relative;
       top: 1rem;
       right: 1rem;
       
       
}
.stars  span{
    color: gray;


}
.titleOfImg
{
       display: flex;
       flex-direction: column;
       align-items: start;
       justify-content: space-around;
       gap: 1rem;
}
.titleOfImg h3
{
      grid-column: 2/3;
       grid-row: 1/2;
       font-size: 2rem;
       font-family: 'Times New Roman', Times, serif;
       align-self: self-start;
       color: rgb(192, 219, 227);
      
      
     
      
       
}
.xicon
{
 font-size: 2.5rem;
 cursor: pointer;
 position: absolute;
 bottom: 92%;
 left: 90%;
 z-index: 100;
 transition: all 0.2s;


}
.xicon:active
{
       transform: scale(0.8);
}
.titleOfImg p {
     grid-column: 2/3;
     grid-row: 1/2;
     font-size: 1.5rem;
     font-family: 'Times New Roman', Times, serif;
     /* text-align: center; */
      color: rgb(192, 219, 227);


}
.ratingNumber
{
       color:#09031B;
       font-size: 1.5rem;
}

.showAnimate
{
       display: grid;
       animation-name: showPopUpWindow;
       animation-duration: 0.5s;
       animation-fill-mode: forwards;
      animation-timing-function: ease-in;
     
       
}
.hideAnimate {
       
       animation-name: hidePopUpWindow;
       animation-duration: 0.5s;
       animation-fill-mode: forwards;
       animation-timing-function: ease-in;


}

@keyframes showPopUpWindow {
       from{
              opacity: 0;
          

       }
       to
       {
              opacity: 1;
              z-index: 100;
              
            

       }
       
}
@keyframes hidePopUpWindow {
       from {
              opacity: 1;


       }

       to {
              opacity: 0;
              z-index: -1;
              
       }

}
button:active {
       transform: scale(0.92);
}

button:hover {

       animation-name: hoverOnSubmitBtn;
       animation-duration: 2s;
       animation-iteration-count: infinite;
       animation-timing-function: linear;
       animation-fill-mode: backwards;



}
.userName
{
       color: white;
}
@keyframes hoverOnSubmitBtn {
       0% {
              background-image: linear-gradient(to right, #8ec8cc, #2a5fb3);

       }

       5% {
              background-image: linear-gradient(to right, #8ea7cc, #2a4fb3);

       }

       10% {
              background-image: linear-gradient(to right, #8ea0cc, #2a48b3);
       }

       15% {

              background-image: linear-gradient(to right, #8e9dcc, #2a3fb3);
       }

       20% {
              background-image: linear-gradient(to right, #8e97cc, #2a3ab3);
       }

       25% {
              background-image: linear-gradient(to right, #928ecc, #2a2cb3);
       }

       30% {
              background-image: linear-gradient(to right, #928ecc, #382ab3);
       }

       35% {
              background-image: linear-gradient(to right, #928ecc, #382ab3);
       }

       40% {
              background-image: linear-gradient(to right, #928ecc, #382ab3);
       }

       45% {
              background-image: linear-gradient(to right, #928ecc, #382ab3);
       }

       50% {
              background-image: linear-gradient(to right, #978ecc, #352ab3);
       }

       55% {
              background-image: linear-gradient(to right, #908ecc, #2a2ab3);
       }

       60% {
              background-image: linear-gradient(to right, #8e95cc, #2a35b3);
       }

       65% {
              background-image: linear-gradient(to right, #8e9ccc, #2a4ab3);
       }

       70% {
              background-image: linear-gradient(to right, #8ea4cc, #2a63b3);
       }

       75% {
              background-image: linear-gradient(to right, #8eabcc, #2a73b3);
       }

       80% {
              background-image: linear-gradient(to right, #8eb7cc, #2a73b3);
       }

       85% {
              background-image: linear-gradient(to right, #8eb7cc, #2a65b3);
       }

       90% {
              background-image: linear-gradient(to right, #8ec8cc, #2a5fb3);
       }

       95% {
              background-image: linear-gradient(to right, #8ec8cc, #2a5fb3);
       }

       100% {
              background-image: linear-gradient(to right, #8ec8cc, #2a5fb3);

       }
}

@keyframes transitionIN {
       from {
              opacity: 0;
              transform: scale(1.2);


       }

       to {
              opacity: 1;
              transform: scale(1);
       }
}
.container {
       width: 100vw;
       height: 100vh;
       position: absolute;
       display: flex;
       overflow: hidden;
       z-index: -1;

}

.bubbles {
       position: relative;
       display: flex;
}

.bubbles span {
       position: relative;
       width: 3rem;
       height: 3rem;
       background-color: #4fc3dc;
       margin: 0 0.4rem;
       border-radius: 50%;
       box-shadow: 0 0 0 1rem #4fc3dc44, 0 0 5rem #4fc3dc, 0 0 10rem #4fc3dc;
       animation: animate ease-in infinite;
       animation-duration: calc(250s/var(--i));




}

.bubbles span:nth-child(even) {
       background-color: #ff2d75;
       box-shadow: 0 0 0 1rem #ff2d7544, 0 0 5rem #ff2d75,
              0 0 10rem #ff2d75;
}

@keyframes animate {
       0% {
              opacity: 0.1;
              transform: translateY(200vh) scale(0);
       }

       100% {
              opacity: 0.1;
              transform: translateY(-10vh) scale(1);

       }

}
div.footer{
       margin-top: 300px;
       padding-bottom: 300px;
       background-color: black;
       text-decoration: none;
       
}
span.footer_content{
       margin-left: 200px;
       
       
}
.account span{
       text-decoration: none;
       
}
.footer a{
       text-decoration: none;
       color: aliceblue;
       font-family:'Times New Roman', Times, serif ;
}

    .correct
    {
       width: 30rem;
       height: 5rem;
       font-size: 2rem;
       background-color: #07ff6aac;
       text-align: center;
       border-radius: 1rem;
       position: absolute;
       top: 55%;
       right: 25%;
       
    }

    


@media(max-width:800px) {
       .all{
              height: 75vh;
       }
       html {
                     font-size: 50.5%;
                     background-image: linear-gradient(to right, black, rgb(3, 3, 28), rgb(3, 3, 28), black);
                     overflow-x: hidden;
              }
       .slider img
       {
              display: none;
       }
       .text
       {
             display: grid;
             grid-template-rows: 1fr 1fr 1fr;
             grid-template-columns: 1fr 1fr 1fr;
             width: 100vw;
            
             z-index: 100;
            margin: 0 1rem;
             
       }
       .input
       {
              display: none;
       }
       .today
       {
              margin-left: 1.3rem;
            
       }
       .flash-sales
       {
              font-size: 1.4rem;
              margin-left: 0;
       }
       .i5
       {
              display: none;
       }
       .i4
       {
              display: none;
       }
       .items
       {
              display: flex;
              justify-content: center;
              width: 100vw;
              margin: 0;

       }
       .f2
       {
              display: flex;
              justify-content: space-evenly;
             
       }
       .bx1
       {
              display: none;
       }
       .bx2
       {
              display: none;
       }
       .category .text h2 {
              margin: 1rem 0;
              transition: all 0.1s;
              cursor: pointer;
              display: flex;
              justify-content: center;
              position: relative;
                     right: 0;
                     font-size: 1.2rem;
              


       
       }
       .gallary
       {
              width: 80vw;
       }
       .centerGallary
       {
              display: flex;
              justify-content: center;
              margin:0; 
        }
        .bigPhoto
        {
              display: none;
        }
        .pulsate

        {
              display: none;
        }
        .button
        {
              font-family: 'Times New Roman', Times, serif;
        }
        .time
        {
              font-size: 2.5rem;
             font-family: 'Times New Roman', Times, serif;
        }
     .time .d {
            font-size: 1.2rem;
            font-family: 'Times New Roman', Times, serif;

     }
     .popBuyWindow
     {
       width: 90vw;

     }
     .titleOfImg
     {
       position: relative;
       top: 20%;
       right: 10%;
     }
     .thirdOne {
       position: absolute;
       top: 230%;
       left: 50%;
       transform: translate(-50%, -50%);

}
.imgContainer {
       display: flex;
       justify-content: space-around;
       align-items: center;
       flex-direction: column;
       background-color: #f2f6ff;
       width: 60%;
       height: 60%;
       border-radius: 1rem;
       grid-column: 1/2;
       grid-row: 1/2;
       position: relative;
       left: 1.5rem;
       
}
.buttonsToBuy {
       position: absolute;
       left: 45%;

}

.home-nav
{
       font-size: 1.25rem;
}



}