@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Readex+Pro:wght@160..700&display=swap');
body {
    position: relative;
    background: #1a1a1a;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: "Readex Pro", sans-serif;
    overflow-x: hidden;
}

/* .header {
    padding: 18px 0;
    background: #212121;
    box-shadow: 0 0 10px #000;
}

.header .left {
    gap: 50px;
}

.header .left .logo a img {
    width: 173.99px;
    height: 49.98px;
}

.header .left .menu {}

.header .left .menu ul {}

.header .left .menu ul li {
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    font-family: "Readex Pro", sans-serif;
}

.header .left .menu ul li a {
    color: #fff;
}
.header .left .menu ul li a i{
    margin-bottom: -1px;
}

.header .right {}

.header .right ul {
    margin-right: 40px;
}

.header .right ul li {
    background: #ffffff4d;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
}

.header .right ul li a {
    color: #fff;
    font-size: 17px;
}

.header .right .search {
    border: 1px solid #ffffff33;
    border-radius: 25px;
    overflow: hidden;
    cursor: pointer;
    margin-right: 30px;
    width: 290px;
    padding: 0 5px 0px 15px;
    height: 42px;
}

.header .right .search form {
    display: flex;
    align-items: center;
    width: 290px;
    height: 100%;
}

.header .right .search form input {
    background: none;
    border: none;
    padding: 0px 0px 0 10px;
    color: #fff;
    width: 100%;
    height: 100%;
    font-size: 14px;
    padding: 0 15px;
}

.header .right .search form i {
    background: #6d4eec;
    width: 38px;
    height: 34px;
    font-size: 15px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    place-content: center;
    color: #fff;
}

.header .right .account {
    gap: 15px;
    border-left: 1px solid #585858;
    padding-left: 30px;
}

.header .right .account a {
    color: #fff;
    font-size: 20px;
    font-family: "Readex Pro", sans-serif;
}

.header .right .account a i sup {
    font-size: 8px;
} */


.banner {
    padding: 40px 0;
}

.banner .container {
    display: flex;
    align-items: start;
    gap: 2%;
}

.banner .left {
    width: 74%;
}

.banner .left .bannerSlider {}

.banner .left .sinSlide {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.banner .left .sinSlide img {}

.banner .left .sinSlide .info {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    /* background: #1a1a1a31; */
    justify-content: center;
    padding: 0 50px;
    border-radius: 8px;
    overflow: hidden;
}

.banner .left .sinSlide .info .tg {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.banner .left .sinSlide .info .tg h5 {
    color: #fff;
    font-size: 16px;
}

.banner .left .sinSlide .info .tg ul {
    display: flex;
}

.banner .left .sinSlide .info .tg ul li {
    color: #fff;
    border: 1px solid #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 25px;
}

.banner .left .sinSlide .info p {
    color: #fff;
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 20px;
}

.banner .left .sinSlide .info p a {}

.banner .right {
    width: 26%;
}

.banner .right h4 {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 12px;
}

.banner .right h4 img {
    width: 24px;
    height: 24px;
}

.banner .right .discounted {
    background: #242424;
    box-shadow: 0 0 10px #1a1a1a;
    padding: 15px;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}

.banner .right .discounted .sinGame {
    display: flex;
    align-items: start;
}

.banner .right .discounted .sinGame img {
    width: 70px;
    margin-right: 10px;
    border-radius: 5px;
}

.banner .right .discounted .sinGame .info {}

.banner .right .discounted .sinGame .info h5 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
}

.banner .right .discounted .sinGame .info ul {
    display: flex;
    margin-bottom: 10px;
}

.banner .right .discounted .sinGame .info ul li {
    color: #768a91;
    font-size: 16px;
}

.banner .right .discounted .sinGame .info ul li i.icon-star2 {
    color: #eabe12;
}

.banner .right .discounted .sinGame .info ul li i {}

.banner .right .discounted .sinGame .info p {
    font-size: 16px;
    color: #6d4eec;
}

.banner .right .discounted .sinGame .info p s {
    color: #ffffff80;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 3px;
    padding: 0;
    cursor: pointer;
}
.slick-dots {
    background: #fff;
    display: inline-flex;
    width: 40px;
    padding: 8px;
    border-radius: 25px;
    text-align: right;
    bottom: 10px;
    right: 10px;

}
.slick-dots li.slick-active button {
   background: #212121;

}
.slick-dots li button {
    padding: 4px;

}
.slick-dots li.slick-active button {
   background: #212121;

}

.category {}

.category .allCategogry {
    display: flex;
    gap: 15px;
}

.category .allCategogry .sinCate {
    margin: 10px;
    position: relative;
    overflow: hidden;
}

.category .allCategogry .sinCate img {
    border-radius: 5px;
    transition: 0.5s all ease;
}
.category .allCategogry .sinCate:hover img {
    border-radius: 5px;
    transition: 0.5s all ease;
    transform: scale(1.1);
}

.category .allCategogry .sinCate h4 {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
}









.topSeller {
    padding: 50px 0;
}

.topSeller h4 {
    font-size: 24px;
    line-height: 34px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 15px;
}
.topSeller h4 a{
    background: #212121;
    color: #fff;
    font-size: 13px;
    padding: 5px 20px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    border-radius: 25px;
}

.topSeller .allSell {
    display: flex;
    gap: 1.4%;
    row-gap: 20px;
}

@media(max-width:900px){
    .topSeller .allSell {
        display: flex;
        gap: 0px;
        row-gap: 15px;
        justify-content:space-around;
    } 
    /*.leftss{*/
    /*    display:none;*/
    /*}*/
    
     
}

@media(max-width:900px){
    .leftss{ 
         display:none; 
     } 
}
.topSeller .allSell .sinSell {
    width: 20%;
    overflow: hidden;
}

.topSeller .allSell .sinSell .img {
    position: relative;
    margin-bottom: 10px;
}

.topSeller .allSell .sinSell .img img {
    border-radius: 5px;
}

.topSeller .allSell .sinSell .img p.hot {
    position: absolute;
    display: inline-block;
    background: #000000a8;
    left: 10px;
    top: 10px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    color: #fff;
    border-radius: 25px;
}

.topSeller .allSell .sinSell .img p.new {
    position: absolute;
    display: inline-block;
    background: #000000a8;
    left: 10px;
    top: 40px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    color: #fff;
    border-radius: 25px;
}

.topSeller .allSell .sinSell .img .view {
    position: absolute;
    right: -60px;
    top: 10px;
    padding: 5px;
    border-radius: 2px;
    transition: 0.5s all ease;
}

.topSeller .allSell .sinSell:hover .img .view {
    right: 10px;
    transition: 0.5s all ease;
}

.topSeller .allSell .sinSell .img .view ul {
    border-radius: 3px;
    background: #000000a8;
}
.topSeller .allSell .sinSell .img .view ul li,
.popular .popSell .sinSell .img .view ul li{
    position: relative;
}
.topSeller .allSell .sinSell .img .view ul li:nth-child(1)::before{
    content: "Quick view";
    position: absolute;
    left: -120px;
    top: 50%;
    background: #000000;
    color: #fff;
    width: 0px;
    padding: 0px;
    font-size: 12px;
    text-align: center;
    transform: translateY(-50%);
    border-radius: 3px;
    overflow: hidden;


}

ol, ul {
    padding: 2px 5px !important;
     

}

ol, ul:hover {
    padding: 2px 12px !important;
     

}
.topSeller .allSell .sinSell .img .view ul li:nth-child(2)::before{
    content: "Add to wishlist";
    position: absolute;
    left: -120px;
    top: 50%;
    background: #000000;
    color: #fff;
    font-size: 12px;
    text-align: center;
    transform: translateY(-50%);
    border-radius: 3px;
    width: 0;
    padding: 0;
    overflow: hidden;

}
.topSeller .allSell .sinSell .img .view ul li:nth-child(1):hover::before,
.topSeller .allSell .sinSell .img .view ul li:nth-child(2):hover::before{
    width: 100px;
    padding: 7px;


}
.topSeller .allSell .sinSell .img .view ul li:nth-child(1)::after,
.topSeller .allSell .sinSell .img .view ul li:nth-child(2)::after{
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);

}
.topSeller .allSell .sinSell .img .view ul li:nth-child(1):hover::after,
.topSeller .allSell .sinSell .img .view ul li:nth-child(2):hover::after{

    border-top: 10px solid #00000000;
    border-right: 10px solid #00000000;
    border-bottom: 10px solid #00000000;
    border-left: 10px solid #000;
}

.topSeller .allSell .sinSell .img .view ul li a {
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 35px;
    padding: 5px;
}

 

.topSeller .allSell .sinSell .info h5 {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}

 

.topSeller .allSell .sinSell .info h5 span i {
    color: #eabe12;
}

.topSeller .allSell .sinSell .info p {
    font-size: 14px;
    color: #6d4eec;
    font-weight: 500;
}



.feature .allFeature {
    display: flex;
    gap: 20px;
}

.feature .sinFeature {
    position: relative;
    height: 360px;
    margin: 10px;
    overflow: hidden;
    border-radius: 7px;
    cursor: pointer;
}

.feature .sinFeature img {
    transition: 0.5s all ease;
    height: 360px;
    object-fit: cover;
}
.feature .sinFeature:hover img {
    transition: 0.5s all ease;
    transform: scale(1.2);
}

.feature .sinFeature .info {
    position: absolute;
    width: calc(100% - 50px);
    height: 100%;
    left: 0;
    top: 0;
    background: #1a1a1a1c;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 0 25px;
    transition: 0.5s all ease;
}
.feature .sinFeature:hover .info {
    transition: 0.5s all ease;
    background: #1a1a1a8c;
}

.feature .sinFeature .info p {
    color: #d6d6d6;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 10px;
}

.feature .sinFeature .info h3 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
}

.feature .sinFeature .info p a {
    margin-bottom: 15px;
}





.popular {
    padding: 40px 0;
}

.popular .container {
    display: flex;
    align-items: start;
    gap: 2%;
}

.popular .left {
    width: 23%;
    background: #242424;
    padding: 15px;
    box-shadow: 0 0 10px #1a1a1a;
}

.popular .left h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 15px;
}

.popular .left ul {}

.popular .left ul li {
    margin: 15px 0;
}

.popular .left ul li a {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.popular .left ul li.active a {
    color: #6d4eec;
}

.popular .right {
    width: 75%;
}

.popular .popSell {
    display: flex;
    gap: 1.4%;
    row-gap: 20px;
}

.popular .popSell .sinSell {
    width: 20%;
    overflow: hidden;
    margin: 0px 10px;
}

.popular .popSell .sinSell .img {
    position: relative;
    margin-bottom: 10px;
}

.popular .popSell .sinSell .img img {
    border-radius: 5px;
}

.popular .popSell .sinSell .img p.hot {
    position: absolute;
    display: inline-block;
    background: #000000a8;
    left: 10px;
    top: 10px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    color: #fff;
    border-radius: 25px;
}

.popular .popSell .sinSell .img p.new {
    position: absolute;
    display: inline-block;
    background: #000000a8;
    left: 10px;
    top: 40px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    color: #fff;
    border-radius: 25px;
}

.popular .popSell .sinSell .img .view {
    position: absolute;
    right: -60px;
    top: 10px;
    padding: 5px;
    border-radius: 2px;
    transition: 0.5s all ease;
}

.popular .popSell .sinSell:hover .img .view {
    right: 10px;
    transition: 0.5s all ease;
}

.popular .popSell .sinSell .img .view ul {
    border-radius: 3px;
    background: #000000a8;
}

.popular .popSell .sinSell .img .view ul li:nth-child(1) {}
.popular .popSell .sinSell .img .view ul li:nth-child(1)::before{
    content: "Quick view";
    position: absolute;
    left: -120px;
    top: 50%;
    background: #000000;
    color: #fff;
    width: 0px;
    padding: 0px;
    font-size: 12px;
    text-align: center;
    transform: translateY(-50%);
    border-radius: 3px;
    overflow: hidden;


}
.popular .popSell .sinSell .img .view ul li:nth-child(2)::before{
    content: "Add to wishlist";
    position: absolute;
    left: -120px;
    top: 50%;
    background: #000000;
    color: #fff;
    font-size: 12px;
    text-align: center;
    transform: translateY(-50%);
    border-radius: 3px;
    width: 0;
    padding: 0;
    overflow: hidden;

}
.popular .popSell .sinSell .img .view ul li:nth-child(1):hover::before,
.popular .popSell .sinSell .img .view ul li:nth-child(2):hover::before{
    width: 100px;
    padding: 7px;


}
.popular .popSell .sinSell .img .view ul li:nth-child(1)::after,
.popular .popSell .sinSell .img .view ul li:nth-child(2)::after{
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);

}
.popular .popSell .sinSell .img .view ul li:nth-child(1):hover::after,
.popular .popSell .sinSell .img .view ul li:nth-child(2):hover::after{

    border-top: 10px solid #00000000;
    border-right: 10px solid #00000000;
    border-bottom: 10px solid #00000000;
    border-left: 10px solid #000;
}

.popular .popSell .sinSell .img .view ul li a {
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 35px;
    padding: 5px;
}

.popular .popSell .sinSell .info {}

.popular .popSell .sinSell .info h5 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 10px;
}

.popular .popSell .sinSell .info h5 span {}

.popular .popSell .sinSell .info h5 span i {
    color: #eabe12;
}

.popular .popSell .sinSell .info p {
    font-size: 13px;
    color: #6d4eec;
    font-weight: 600;
}




.stand {}

.stand .left {
    width: 50%;
}

.stand .right {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #212121;
}

.stand .right .data {
    padding: 0 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.stand .right img {
    width: 175px;
    height: 130px;
    margin-bottom: 20px;
}

.stand .right h2 {
    text-align: center;
    font-size: 34px;
    line-height: 44px;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 500;
}

.stand .right p {
    font-size: 14px;
    color: #d3d3d3;
    text-align: center;
    line-height: 24px;
    margin-bottom: 15px;
}

.stand .right .video {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.stand .right .video .sin {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.stand .right .video .sin img {
    width: 223px;
    height: 205px;
    margin-bottom: 0;
    transition: 0.5s all ease;
}
.stand .right .video .sin:hover img {
    transform: scale(1.1);
    transition: 0.5s all ease;
}

.stand .right .video .sin i {
    position: absolute;
    width: 79px;
    height: 79px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: #000000a8; */
    border: 1px solid #fff;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
}

.stand .right .take {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.stand .right .take img {
    width: 70px;
    height: 40px;
    margin-bottom: 0;
}

.stand .right .take a {}






.four {
    padding: 40px 0;
}

.four .newRel {
    width: 23%;
}

.four .newRel h4 {
    display: flex;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.four .newRel h4 a {
    font-size: 15px;
    background: #242424;
    padding: 7px 15px;
    border-radius: 25px;
    color: #fff;
    text-decoration: none;
}

.four .newRel .discounted {
    padding: 20px;
    background: #242424;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}

.four .newRel .discounted .sinGame {
    display: flex;
    align-items: start;
}

.four .newRel .discounted .sinGame img {
    width: 65px;
    margin-right: 10px;
    border-radius: 5px;
}

.four .newRel .discounted .sinGame .info {}

.four .newRel .discounted .sinGame .info h5 {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
}

.four .newRel .discounted .sinGame .info ul {
    display: flex;
    margin-bottom: 10px;
}

.four .newRel .discounted .sinGame .info ul li {
    color: #768a91;
    font-size: 15px;
}

.four .newRel .discounted .sinGame .info ul li i.icon-star2 {
    color: #eabe12;
}

.four .newRel .discounted .sinGame .info ul li i {}

.four .newRel .discounted .sinGame .info p {
    font-size: 15px;
    color: #6d4eec;
}

.four .newRel .discounted .sinGame .info p s {
    color: #ffffff80;
}





.article {}

.article h2 {
    font-size: 22px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 15px;
}

.article .blog {
    display: flex;
}

.article .blog .sinBlog {
    position: relative;
    width: 33%;
    margin: 0 10px;
    overflow: hidden;
    transition: 0.5s all ease;
}

.article .blog .sinBlog:hover img {
    transition: 0.5s all ease;
    transform: scale(1.1);
}

.article .blog .sinBlog .info {
    position: absolute;
    width: 100%;
    height: calc(100% - 0px);
    top: 0;
    left: 0;
    background: linear-gradient(#00000013, #000000a1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    padding-bottom: 30px;
    transition: 0.5s all ease;
}
.article .blog .sinBlog:hover .info {
    transition: 0.5s all ease;
    background: linear-gradient(#00000041, #000000c4);
}

.article .blog .sinBlog .info .date {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #000000ce;
    padding: 5px 8px;
    border-radius: 2px;
    text-align: center;
}

.article .blog .sinBlog .info .date h5 {
    font-family: "Lato", sans-serif;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 5px;
}

.article .blog .sinBlog .info .date p {
    font-family: "Lato", sans-serif;
    color: #fff;
    font-size: 12px;
}

.article .blog .sinBlog .info p.type {
    background: #6d4eec;
    padding: 4px 10px;
    border-radius: 25px;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
}

.article .blog .sinBlog .info h4 {
    padding: 10px 30px;
    text-align: center;
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;

}

.article .blog .sinBlog .info small {
    color: #768a91;
    font-size: 14px;
}

.article .blog .sinBlog .info small i {
    color: #6d4eec;
    cursor: pointer;
}




.des {
    padding: 50px 0;
}

.des h4 {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 15px;
}

.des p {
    font-size: 15px;
    color: #a2a2a2;
    line-height: 24px;
    margin-bottom: 10px;
}
p.expand{
    color: #fff;
    cursor: pointer;
}
.rMore{
    display: none;
}
.rMore.active{
    display: block;
}
.rMore p a{
    color: #6d4eec;
}

.footer {
    background: #242424;
}

.footer .footerTop{
    padding: 20px 0;
    border-bottom: 1px solid #3c3c3c;
}
.footer h4 {
    font-size: 17px;
    color: #fff;
    font-weight: 600;
    display: flex;
    gap: 10px;
}

.footer h4 img {
    width: 300px;
}

.footer .footerBody {
    padding: 30px 0;
}

.footerBody .container {
    gap: 3%;
}
@media(max-width:900px){
    .footerBody .container {
        gap: 0%;
    }
}

.flogo {
    width: 25%;
}

.flogo a {
    display: block;
    margin-bottom: 20px;
}

.flogo img {}

.flogo p {
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 15px;
}

.service {
    flex: 1;
}

.service h4 {
    margin-bottom: 20px;
    color: #f1f1f1
}

.service ul {
    display: block;
}

.service ul li {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin: 8px 0px;
    line-height: 24px;
}

.service ul li a {
    color: #d6d6d6;
    opacity: 0.8;
}

.service ul li i {
    color: #6d4eec;
    margin-right: 10px;
}

ul.socialIcon {
    margin-bottom: 10px;
    display: flex;
}

ul.socialIcon li a {
    background: #043651;
    color: #fff;
    display: grid;
    place-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 14px;
    margin-right: 10px;
}

.footerbottom {
    padding: 20px;
    border-top: 1px solid #3c3c3c;
    /* background: rgb(37 38 43); */
}

.footerbottom p {
    font-size: 14px;
    font-weight: 500;
}


/* new--------header----------------------- */

/* headeer--------------------- */

.navbar-brand {
    font-size: 20px;
}

.form-control {
    background: #222;
    border: 1px solid #444;
    color: white;
    height:5vh !important;
    border-radius: 10px !important;
}

.form-control::placeholder {
    color: #aaa;
}

.input-group-text {
    border: none;
}

.btn-outline-secondary {
    color: white;
    border-color: #666;
}

.btn-outline-secondary:hover {
    background: #444;
    color: white;
}

.form-check-input {
    background:rgb(22, 22, 22);;
    border: none;
}

.cart{
    background: transparent;
    border: none;
    width: 50px;
}

.cart img{
    width: 100%;
}

.me-3{

    .butt{
        font-size: 30px;
    }
    display: flex;
    justify-content: center;
    align-items: center;
}
.tran button{
    border: none;
}

.searchh{
    width: 40px;
    border-radius: 10px 0px px 0px !important;
    
}

.searchh img{
    width: 100%;
}


.right{
    display:flex;
    justify-content: space-between;
    gap:10px;
}

 .hFIFMP {
    cursor: pointer;
    display: flex
;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    border-radius: 8px;
    padding: 5px 10px;
    height: 48px;
    font-size: 14px;
    line-height: 0.875rem;
    font-family: Onest-Bold !important;
    font-weight: bold;
    color: rgb(255, 255, 255);
    transition: 0.3s;
    background-color: rgb(22, 22, 22) !important;
    border:none;
}
 .hFIFMP:hover{
   background-color:#555 !important;
}

.kSxJPJ {
    display: flex
;
    height: 16px;
    width: 24px;
    position: relative;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

.but {
    padding:10px 40px;
    background-color:#444;
    border-radius: 10px;
    border:none;
    
}
.but:hover{
    background-color: #555;
}
.but a{
    text-decoration: none;
    color:white;
    font-weight: bold;
    font-size: 17px !important;
    font-family:  Onest-Bold;
    

}
.but a:hover{
    color:white;
}
.butt {
    padding:10px 40px;
    background-color:rgb(72, 133, 255);
    border-radius: 10px;
    border: none;
    
}
.butt a{
    text-decoration: none;
    color:white;
    font-weight: bold;
    font-size: 17px !important;
    font-family:  Onest-Bold;
    

}
.butt:hover{
    color:white;
    background:rgb(99, 150, 253);
}


@media(max-width:1200px){
    .but {
        padding:0px 16px;
        background-color: rgb(22, 22, 22);;
        border-radius: 10px;
        
    }
    .but a{
        text-decoration: none;
        color:white;
        font-weight: bold;
        font-size: 10px !important;
        font-family:  Onest-Bold;
    
    
    }
    .but a:hover{
        color:white;
    }
    .butt {
        padding:0px 16px;
        background-color:rgb(72, 133, 255);
        border-radius: 10px;
        
    }
    .butt a{
        text-decoration: none;
        color:white;
        font-weight: bold;
        font-size: 15px !important;
        font-family:  Onest-Bold;
    
    
    }
    .butt a:hover{
        color:white;
    }
}

.head {
    display:flex;
    justify-content: space-between;

}
.search input{
    width:100% !important;
    padding:25px 250px !important;
}

.nav-2{
    display:flex;
    gap:30px !important;
    padding:10px 20px !important;
 border-bottom:1px solid rgb(22, 22, 22); ;
 flex-wrap: wrap;
        

}
@media(max-width:900px){
    .nav-2{
        display:flex;
        gap:20px !important;
        padding:10px 20px !important;
     border-bottom:1px solid rgb(22, 22, 22); ;
     flex-wrap: wrap;
            
    
    }
}

.nav-2 a{
    text-decoration: none;
    color:white;
    font-size:15px !important;
    font-weight: bold;
    list-style: none;
    font-family:  Onest-Medium, Inter, sans-serif;
    

}
.nav-2 li{
    list-style: none;
}

.nav-2 a:hover{
    text-decoration: none;
    color:white;
    font-size:17px !important;
    font-weight: bold;
    list-style: none;

}

.populars h3{
    font-size:25px;
    color:white;
    font-weight: bold;
    
    

}
.populars {
    /*padding:10px 10px 10px 20px !important ;*/
     

}
.populars ul li{
    font-size: 16px;
    font-weight: bold;
    padding:6px;
    
    text-decoration: none !important;
    list-style: none !important;
}

.populars ul li a{
    text-decoration: none !important;
    color:white;
}
.populars ul li a:hover{
    color:blue

}
/* end-----header------------- */
/* end---------------new header--------------- */


/* ----------------carosal==========css */
.main{
    max-width: 1350px;
    margin: 0 auto;
}

.banner-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 5px;
}

.banner-content h1 {
    font-size: 2rem;
    font-weight: bold;
}

.bigg-siz{
    width: 75%;
}

.disc-size{
    width: 25%;
}

.platform {
    padding: 5px 10px;
    margin-right: 5px;
    border-radius: 5px;
    color: white;
    font-size: 0.9rem;
}

.pc { background-color: red; }
.xbox { background-color: green; }
.ps5 { background-color: blue; }

.price-tag {
    font-size: 1.2rem;
    font-weight: bold;
    color: yellow;
    margin-left: 10px;
}

/* Discount Section */
.discount-section {
    background: #1e1e1e;
    padding: 10px;
    border-radius: 8px;
}

.discount-section h4 {
    color: white;
    /* margin-bottom: 15px; */
}

.game-item {
    display: flex;
    align-items: center;
    /* padding: 10px 0; */
    border-bottom: 1px solid #333;
}

.game-item img {
    width: 65px;
    height: 82px;
    border-radius: 5px;
    margin-right: 15px;
}

.game-item h6 {
    font-size: 1rem;
    margin: 0;
}

.game-item p{
    margin-bottom: 3px;
}

.old-price {
    text-decoration: line-through;
    color: gray;
    font-size: 0.9rem;
}

.new-price {
    color: yellow;
    font-size: 1rem;
    font-weight: bold;
}

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

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.swip-img{
    height: 600px;
}

.swip-img img{
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1215px) {
    .disc-size{
        display: none;
    }

    .bigg-siz{
        width: 100%;
    }
}



/* carosall================================= */

.carosal1{
     
        /* background-image: url(../images/banner1.jpg) */
        background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../carosal/Image/topp/carousel-1.jpg);
        height: 83vh;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        /* background-attachment: fixed; */
      
       
}
.carosal2{
    
        /* background-image: url(../images/banner1.jpg) */
        background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../carosal/Image/topp/carousel-2.jpg);
        height: 83vh;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        /* background-attachment: fixed; */
      
       
}
.carosal3{
  
        /* background-image: url(../images/banner1.jpg) */
        background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../carosal/Image/topp/carousel-3.jpg);
        height: 83vh;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        /* background-attachment: fixed; */
      
      }
 
      @media(max-width:600px){
        .carosal1{
     
            /* background-image: url(../images/banner1.jpg) */
            background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../carosal/Image/topp/carousel-1.jpg);
            height: 40vh;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            /* background-attachment: fixed; */
          
           
    }
    .carosal2{
        
            /* background-image: url(../images/banner1.jpg) */
            background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../carosal/Image/topp/carousel-2.jpg);
            height: 40vh;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            /* background-attachment: fixed; */
          
           
    }
    .carosal3{
      
            /* background-image: url(../images/banner1.jpg) */
            background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../carosal/Image/topp/carousel-3.jpg);
            height: 40vh;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            /* background-attachment: fixed; */
          
          }
    

      }

      .main{
        display: flex;
        gap:30px;
        flex-wrap: wrap;

         

      }

      .disc h3{
        color:white;
        font-size:16px;
      }
      .star{
        color:yellow; 
        font-size: 12px;

      }
      .main h4{
        font-size:15px;
        color:blue
      }
.dicsss{
    display: flex;
    gap:20px;
    flex-wrap: wrap;


} 
.dicsss h1{
    font-size:19px !important;
}

@media(max-width:900px){
    .stand .right img {
        width: 135px;
        height: 130px;
        margin-bottom: 20px;
    }

 
    .stand .right p {
        font-size: 2px !important;
        color: #d3d3d3;
        text-align: center;
        line-height: 19px;
        margin-bottom: 15px;
        /* padding: 20px; */
        display: none;
    }
}
.old-price {
    text-decoration: line-through;
    color: gray !important;
    font-size: 14px;

}
.dics{
    display: flex;
    gap:5px;
}

.tgg{
    display:flex;
    color:white;
    gap:10px;
}
.tgg2{

    display: flex;
    gap:20px;
}
.infoo ul{
    font-size:16px;
    
}

.infoo p{
    font-size:14px;
    color:white;
}

.infoo{

    padding: 200px 50px;


}

 @media(max-width:900px){
    .right-side{
    display:none;
    }
    
     
     
 }

@media(max-width:900px){
    .imgg img{
        width:50%;
    }
    .disc h3 {
        color: white;
        font-size: 11px !important;
    }
}



.containerr {
    display: flex;
    flex-wrap: wrap;
    gap: 15px !important;
    /* justify-content: center; */
    
  }
  
  .cardd {
    /* background-color:black !important; */
    width: 200px;
    /* padding: 20px; */
    border-radius: 10px;
    box-shadow: 0px !important;
    /* text-align: center; */
    transition: transform 0.3s ease-in-out;
    border-radius: 10px !important;
    border:2px solid  rgb(22, 22, 22) !important
  }

  @media(max-width:900px){
    .four{
        display:none;
    }
    .stand .right .video .sin img {
        width: 129px;
        height: 175px;
        margin-bottom: 0;
        transition: 0.5s all ease;
    }
    .topSeller .allSell .sinSell .info h5 {
        color: #fff;
        font-size: 13px !important;
        font-weight: 500;
        margin-bottom: 10px;
    }
    .topSeller .allSell .sinSell .img p.hot {
        position: absolute;
        display: inline-block;
        background: #000000a8;
        left: 10px;
        top: 10px;
        font-size: 6px !important;
        font-weight: 600;
        padding: 4px 8px;
        color: #fff;
        border-radius: 25px;
    }
    .topSeller .allSell .sinSell .img p.new {
        position: absolute;
        display: inline-block;
        background: #000000a8;
        left: 10px;
        top: 40px;
        font-size: 6px !important;
        font-weight: 600;
        padding: 4px 8px;
        color: #fff;
        border-radius: 25px;
    }
    @media (max-width: 900px) {
        .stand .right .video .sin img {
            width: 79px !important;
            height: 117px !important;
            margin-bottom: 0;
            transition: 0.5s all ease;
            /* display: none; */
        }
    }

    .stand .right h2 {
        text-align: center;
        font-size: 17px !important;
        line-height: 44px;
        color: #fff;
        margin-bottom: 15px;
        font-weight: 500;
    }

    .stand .right p {
        font-size: 7px !important;
        color: #d3d3d3;
        text-align: center;
        line-height: 19px;
        margin-bottom: 15px;
        /* padding: 20px; */
    }


   
    .feature .sinFeature .info p {
        color: #d6d6d6;
        font-size: 6px !important;
        line-height: 15px !important;
        margin-bottom: 10px;
    }
    .button {
        padding: 0px 19px !important;
        background: #6d4eec;
        color: #fff;
        display: inline-block;
        font-size: 12px !important;
        font-weight: 500;
        border: 2px solid #6d4eec;
        border-radius: 9px;
        transition: 0.5s all ease;
    }
    
  

  }

@media(max-width:900px){
    .payment{
        display:none;
    }
}


@media(max-width:600px){
    .payment-img{
        width:200% !important;
    }
    .trust{
        width:100% !important;
    }
    .des {
    padding: 17px 0 !important;
}
.Frequently{
    padding:0px !important;
}
}