/*======> Root colour <======*/
:root {
    --primary-color: #50c878;
    --secondary-color: #f0ffff;
    --third-color: #1b1b1b;
    --fourth-color: #f82b50;
    --fifth-color: #38ed77;
    --sixth-color: #e4e4e4;
    --offerprice-color: #22a751;
    --realprice-color: #3c3c3c;
    --discount-color: #d73131;
    --badgeBg-color: #6eeaa468;
    --btn-color: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
    --btnHover-color: linear-gradient(120deg, #fdfbfb 0%, #989a9c 100%);
}

a, h1,h2,h3,h4,h5,h6{
    text-decoration: none;
}

/*======> Very small devices <======*/
@media (max-width: 576px) {

    .box-two {
        height: auto;
        width: 13rem;
    }

    .box-two .img {
        height: 80%;
        width: 100%;
        overflow: hidden;
    }

    .box-two .img img {
        height: 180px;
        width: 100%;
        /* height: 100%; */
    }

    .box-desc, .box-name{
        font-size: 10px;
    }

    .box-price{
        font-size: 11px;
    }

    .scroll-arrow {
        font-size: 14px;
    }

}

/*======> Extra small devices <======*/
@media (max-width: 576px) {

    .box-two {
        height: auto;
        width: 14rem;
    }

    .box-two .img {
        height: 80%;
        width: 100%;
        overflow: hidden;
    }

    .box-two .img img {
        height: 200px;
        width: 100%;
        /* height: 100%; */
    }

    .box-desc, .box-name{
        font-size: 10px;
    }

    .box-price{
        font-size: 11px;
    }

    .scroll-arrow {
        font-size: 16px;
    }
}

/*======> Samll devices <======*/
@media (min-width: 576px) and (max-width: 767px) {

    .box-two {
        height: auto;
        width: 15rem;
    }

    .box-two .img {
        height: 80%;
        width: 100%;
        overflow: hidden;
    }

    .box-two .img img {
        height: 210px;
        width: 100%;
        /* height: 100%; */
    }

    .box-desc, .box-name{
        font-size: 11px;
    }

    .box-price{
        font-size: 12px;
    }

    .scroll-arrow {
        font-size: 16px;
    }

}

/*======> Medium devices <======*/
@media (min-width: 768px) and (max-width: 991px) {

    .product-image img {
        height: 360px;
        object-fit: contain;
    }

    .box-two {
        height: auto;
        width: 17rem;
    }

    .box-two .img {
        height: 80%;
        width: 100%;
        overflow: hidden;
    }

    .box-two .img img {
        height: 230px;
        width: 100%;
        /* height: 100%; */
    }

    .box-desc, .box-name{
        font-size: 13px;
    }

    .box-price{
        font-size: 14px;
    }

    .scroll-arrow {
        font-size: 18px;
    }

    
}

/*======> LG devices <======*/
@media (min-width: 992px) and (max-width: 1199px) {

    .box-two {
        height: auto;
        width: 17rem;
    }

    .box-two .img {
        height: 80%;
        width: 100%;
        overflow: hidden;
    }

    .box-two .img img {
        height: 240px;
        width: 100%;
        /* height: 100%; */
    }

    .box-desc, .box-name{
        font-size: 13px;
    }

    .box-price{
        font-size: 15px;
    }

    .scroll-arrow {
        font-size: 22px;
    }
}

/*======> XL devices <======*/
@media (min-width: 1200px) {

    .product-image img {
        height: 400px;
        object-fit: contain;
    }

    .box-two {
        height: auto;
        width: 18rem;
    }

    .box-two .img {
        height: 80%;
        width: 100%;
        overflow: hidden;
    }

    .box-two .img img {
        height: 250px;
        width: 100%;
        /* height: 100%; */
    }

    .box-desc, .box-name{
        font-size: 14px;
    }

    .box-price{
        font-size: 16px;
    }

    .scroll-arrow {
        font-size: 24px;
    }
}

/*======> Product detail view image next and prev buttons <======*/
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #171717;
}

/*======> Product detail view buttons <======*/
.goToCart-btn{
    background-image: var(--btn-color)
}

.addtocart-btn{
    background-image: var(--btn-color)
}

/*======> Product detail view buttons <======*/
.goToCart-btn:hover{
    background-image: var(--btnHover-color)
}

.addtocart-btn:hover{
    background-image: var(--btnHover-color)
}

/*======> Class real price <======*/
.real-price {
    color: var(--realprice-color);
}

/*======> Class offer price <======*/
.offer-price {
    color: var(--offerprice-color);
}

/*======> Class discount percentage <======*/
.discount-perc {
    color: var(--discount-color);
    font-weight: normal;
}

/*======> Product outline div <======*/
.product-outline {
    text-decoration: none;
}

/*======> Stock hurry up span <======*/
.hurry-up{
    font-weight: 500;
}

/*======> Extra details div <======*/
.extra-detail-span{
    font-weight: 500;
}

/*======> Same category products name <======*/
.box-two .name {
    color: var(--third-color);
}

/*======> second div <======*/
#second{
    background-size: 600%;   
    background-repeat: no-repeat;
    background-position: center;
    display: none;
}

/*======> second div lens <======*/
#lens{
    width: 100px;
    height: 100px;
    background:rgba(62, 174, 226, 0.55);
    position: absolute;
    border: 1px solid black;
    transform:  translateY(-50% , -50%);
    pointer-events: none;
    display: none;
}

/*======> product image <======*/
.product-image .first { 
    position: relative; 
}

.card-body {
    line-height: 1.2; 
}

.card-text {
    margin-bottom: 4px !important; 
}

.card-title {
    font-size: 14px; 
    font-weight: bold;
}

.icon-style {
    border: 2px solid green; /* Green border */
    border-radius: 50%; /* Round shape */
    padding: 10px; /* Space between the icon and border */
    font-size: 24px; /* Adjust size if necessary */
    color: green; /* Change icon color to green */
}