@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: 0vh;


       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);
}


.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: 30rem;
       width: 70rem;
}

.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(4, 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: 2rem;
       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;
       position: relative;
       top: 250vh;
}

.links a {
       transition: border-bottom 0.5s;
}

.links a:hover {
       border-bottom: white;
}

.firstOne {
       position: absolute;
       top: 100%;
       left: 50%;
       transform: translate(-50%, -50%);

}

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

}

.thirdOne {
       position: absolute;
       top: 180%;
       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;

       }
              .footer {
                     background-color: black;
                     width: 100vw;
                     height: 15rem;
                     position: relative;
                     top: 110vh;
              }

       .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;
       }
#BtnOfCart
{
       position: relative;
       top: 5rem;
}

       .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%;
       }
              .firstOne {
                     position: absolute;
                     top: 50%;
                     left: 50%;
                     transform: translate(-50%, -50%);
       
              }
                            .secondOne {
                                   position: absolute;
                                   top: 60%;
                                   left: 50%;
                                   transform: translate(-50%, -50%);
              
                            }

       .thirdOne {
              position: absolute;
              top: 110%;
              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;
       }



}