*{
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
    list-style: none;
}
body{
    background-color: rgba(236, 236, 236, 0.658);
}
#category{
    width: 83%;
    background-color: white;
    margin: 8px auto;
}
#category .item{
    width: 70%;
    margin: auto;
    padding: 10px 0px;
    & a{
        text-decoration: none;
        color: black;
        & h6{
            margin-top: 8px;
            margin-bottom: 0px;
        }
    }
}
#category .item a:hover{
    color: rgba(0, 0, 255, 0.842);
}
.slider, .slider-container, .live-deal, .live-deal-2, .deal-slider, .fashion-slider, .cricket-container, .furniture-container, .electro-container{
    width: 83%;
    margin: 16px auto;
    position: relative;
}
.slider-container .phone-slider,
.deal-slider .topDeal-slider,
.fashion-slider .fashionSeller-slider,
.cricket-container .cricket-slider,
.furniture-container .furniture-slider,
.electro-container .electro-slider{
    padding: 20px 15px;
    background-color: white;
    overflow: hidden;
    position: relative;
}
.slider .image-slider button{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0px 14px;
    height: 80px;
    background-color: white;
    color: gray;
    border: none;
    z-index: 1;
}
.slider .image-slider .prev{
    left: 0px;
    border-radius: 0px 5px 5px 0px;
}
.slider .image-slider .next{
    right: 0px;
    border-radius: 5px 0px 0px 5px;
}
.slider .image-slider .dots-container{
    position: absolute;
    bottom: 5px;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
    & .dots{
        display: inline-block;
        height: 9px;
        width: 9px;
        background-color: gray;
        margin: 1px;
        border-radius: 50%;
    }
}
.slider .image-slider .dots-container .dots.active{
    background-color: white;
    transition: all 0.5s;
}
.slider .image-slider .slides{
    display: flex;
    overflow: hidden;
}
.slider .image-slider .slides img{
    transition: 1s all;
}
.slider-container picture img{
    width: 16em;
}
.slider-container .phone-title i,
.deal-slider .topDeal-title i,
.fashion-slider .fashion-title i,
.cricket-container .cricket-title i,
.furniture-container .furniture-title i,
.electro-container .electro-title i{
    background-color: #2a55e5;
    color: white;
    text-align: center;
    padding: 4px 7px;
    border-radius: 50%;
}
.slider-container #phone-slider-container,
.deal-slider #topDeal-slider-container,
.fashion-slider #fashionSeller-slider-container,
.cricket-container #cricket-data-container,
.furniture-container #furniture-slider-container,
.electro-container #electro-slider-container{
    gap: 15px;
    margin-top: 20px;
    overflow: hidden;
    text-align: center;
}
#phone-slider-container a{
    color: black;
    text-decoration: none;
}
.slider-container #phone-slider-container #phoneCard,
.deal-slider #topDeal-slider-container #tdCard,
.fashion-slider #fashionSeller-slider-container #fashionCard,
.cricket-container #cricket-data-container #cricketCard,
.furniture-container #furniture-slider-container #furnitureCard,
.electro-container #electro-slider-container #eletronicsCard{
    padding: 5px;
    height: 300px;
    & p{
        white-space: nowrap;
        width: 180px;
        margin: auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.slider-container #phone-slider-container #phoneCard #image,
.deal-slider #topDeal-slider-container #tdCard #image,
.fashion-slider #fashionSeller-slider-container #fashionCard #image,
.furniture-container #furniture-slider-container #furnitureCard #image,
.electro-container #electro-slider-container #eletronicsCard #image{
    width: 180px;
    overflow: hidden;
    & img{
        &:hover{
            transform: scale(1.02);
        }
    }
}
.slider-container #phone-slider-container #phoneCard #image img,
.deal-slider #topDeal-slider-container #tdCard #image img,
.fashion-slider #fashionSeller-slider-container #fashionCard #image img,
.cricket-container #cricket-data-container #cricketCard #image img,
.furniture-container #furniture-slider-container #furnitureCard #image img,
.electro-container #electro-slider-container #eletronicsCard #image img{
    margin: auto;
    display: block;
}
.slider-container .phone-slider button,
.deal-slider .topDeal-slider button,
.fashion-slider .fashionSeller-slider button,
.furniture-container .furniture-slider button,
.electro-container .electro-slider button{
    position: absolute;
    background-color: white;
    border: none;
    padding: 0px 14px;
    height: 80px;
    top: 50%;
    z-index: 4;
}
.slider-container .phone-slider #prev,
.deal-slider .topDeal-slider #tdPrev,
.fashion-slider .fashionSeller-slider #FashionPrev,
.furniture-container .furniture-slider #furniturePrev,
.electro-container .electro-slider #electroPrev{
    left: 0%;
    border-radius: 0px 5px 5px 0px;
    box-shadow: 0px 0px 3px 0px rgb(204, 204, 204);
}
.slider-container .phone-slider #next,
.deal-slider .topDeal-slider #tdNext,
.fashion-slider .fashionSeller-slider #FashionNext,
.furniture-container .furniture-slider #furnitureNext,
.electro-container .electro-slider #electroNext{
    right: 0%;
    border-radius: 5px 0px 0px 5px;
    box-shadow: 0px 0px 3px 0px rgb(204, 204, 204);
}
.live-deal, .live-deal-2{
    row-gap: 10px;
    column-gap: 5px;
    grid-template-columns: repeat(3, 1fr);
}
.cricket-container #cricket-data-container{
    gap: 10px;
    flex-wrap: wrap;
}
.cricket-container #cricket-data-container #cricketCard #image{
    width: 213px;
    overflow: hidden;
    & img{
        &:hover{
            transform: scale(1.02);
        }
    }
}
.cricket-container picture{
    overflow: hidden;
    width: 225%;
}
.cricket-container picture img{
    width: 100%;
    height: 100%;
}
/* media query for mobile phone */
@media(min-width: 300px) and (max-width: 480px){
    #category, .slider, .slider-container, .live-deal, .live-deal-2, .deal-slider, .fashion-slider, .cricket-container, .furniture-container, .electro-container{
        width: 100%;
    }
    #category .item{
        width: 100%;
        overflow: auto;
        padding: 10px 5px 10px 0px;
        & li{
            margin: 0px 5px;
            & h6{
                font-size: 10px;
            }
        }
    }
    .live-deal, .live-deal-2{
        grid-template-columns: repeat(1, 1fr);
        & .offer-card{
            width: 100%;
            & img{
                width: 100%;
            }
        }
    }
    .slider{
        margin: 0px;
    }
    .slider .image-slider button{
        padding: 0px 8px;
        height: 30px;
        & i{
            font-size: 11px;
            margin-bottom: 7px;
        }
    }
    .slider .image-slider .dots-container{
        bottom: -3px;
        & .dots{
            height: 5px;
            width: 5px;
            margin: 0px;
        }
    }
    .slider-container{
        flex-wrap: wrap;
        & picture{
            width: 100%;
            text-align: center;
        }
    }
    .slider-container h5, .deal-slider h5, .fashion-slider h5, .cricket-container h5, .furniture-container h5, .electro-container h5{
        font-size: 15px;
    }
    .slider-container .phone-title i, .deal-slider .topDeal-title i, .fashion-slider .fashion-title i, .cricket-container .cricket-title i, .furniture-container .furniture-title i, .electro-container .electro-title i{
        font-size: 10px;
        padding: 4px 6px 5px;
    }
    .slider-container .phone-slider button,
    .deal-slider .topDeal-slider button,
    .fashion-slider .fashionSeller-slider button,
    .furniture-container .furniture-slider button,
    .electro-container .electro-slider button{
        padding: 0px 10px;
        height: 60px;
    }
    .cricket-container{
        flex-wrap: wrap;
    }
    .cricket-container #cricket-data-container{
        flex-wrap: nowrap;
        overflow: auto;
    }
}
@media(min-width: 481px) and (max-width: 768px){

}
@media(min-width: 769px) and (max-width: 1024px){

}