/* Write your CSS here */



.custom-gradient {
    position: absolute; 
    top: 0; 
    left: -100%; 
    width: 50%; 
    height: 100%;
    transform: skewX(-12deg); 
    z-index: 5; 
    background: linear-gradient(to right, transparent, white);
    opacity: 0.1; 
    transition: transform 0.3s ease; 
}

 .two_banner:hover .custom-gradient{
    animation: shine 1s ease-in-out forwards
}


@keyframes shine {
  0% {
        left: 0; /* Start position */
    }
    100% {
        left: 125%; /* End position */
    }
}

.product_cart_btn:hover{
    background:#e5eaf1;
}
.product_img{
    cursor:pointer;
    transition: all 200ms ease-in-out;
}
.product_img:hover{
   transform: translate(0px, 0px) rotate(0deg) skewX(0deg) skewY(0deg) scaleX(1.05) scaleY(1.05);
}

.big_box{
      cursor:pointer;
    transition: all 200ms ease-in-out;
}
.big_box:hover .big_img{
    transform: translate(0px, 0px) rotate(0deg) skewX(0deg) skewY(0deg) scaleX(1.05) scaleY(1.05);
}


.big_box:hover .big_text{
    color:#02b290;
}

.big_text p{
    font-weight:600;
}

.store_img:hover{
        opacity: .8;

}

.store_banner_p p{
    font-weight:700;
}




.open-search-overlay{
    opacity: 1;
    display:flex;
}


.after_product:after{
        position: absolute;
        top: 0;
        inset-inline-end: 0;
        height: 100%;
        background-image: linear-gradient(90deg, hsla(0, 0%, 100%, .2), hsla(0, 0%, 100%, .9), #fff);
        content: "";
        z-index: 5;
        width: 50%;
        /*opacity:0.5;*/
}

 @media screen and  (min-width: 2560px)  {
        .product_box{
            width:300px;
        }
        .after_product:after{
            width: 30%;
        }
    }

 @media screen and (min-width: 1920px) and (max-width: 2558px)  {
        .product_box{
            width:248.375px;
        }
        .after_product:after{
            width: 30%;
        }
    }

 @media screen and (min-width: 1706px) and (max-width: 1919px)  {
        .product_box{
            width:253.714px;
        }
         .after_product:after{
            width: 40%;
        }
    }
    
@media screen and (min-width: 1600px) and (max-width: 1705px)  {
        .product_box{
            width:238px;
        }
    }
    
      @media screen and (min-width: 1420px) and (max-width: 1599px)  {
        .product_box{
            width:253.333px;
        }
    }
    
    
    @media screen and (min-width: 1024px) {
       .isScroll{
        position: fixed;
        top: 0;
        z-index: 99;
        width: 100%;
        --tw-shadow: 0 2px 3px rgba(0, 0, 0, .08);
        --tw-shadow-colored: 0 2px 3px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        overflow:visible;
    }
    
    .isScroll .navbaricon{
        display:block;
        transform: translateZ(0);
        width: auto !important;
        opacity: 1;
    }
    
     .isScroll .purchase_scroll{
        display:flex;
        transform: translateZ(0);
        /*width: auto !important;*/
        opacity: 1;
        /*flex-direction:row-reverse;*/
    }
    .isScroll .purchase_icons{
         /*flex-direction:row-reverse;*/
    }
    
    .isScroll .navbar_m{
        /*margin-left:20px;*/
    }
    
    .purchase_scroll{
        margin-left: auto;
    }
    
    [dir="rtl"] .purchase_scroll {
  margin-left: auto; 
  margin-right: auto; 
}
    }
    
    

    
    
    .next_btn_hover {

    transition: background-color 0.3s ease !important;
}

.next_btn_hover:hover {
    background-color: #02b290; 
}

.next_btn_hover:hover svg {
    color: white; 
    fill: white; 
   
}


  .pre_btn_hover {

    transition: background-color 0.3s ease !important;
}

.pre_btn_hover:hover {
    background-color: #02b290; 
}

.pre_btn_hover:hover svg {
    color: white; 
    fill: white; 
}